I'm using a project that has 2 different files wrapped in AMD which one extends the other, project is jsondiffpatch.
The project has 2 files (build/bundle.js and build/formatters.js) each export jsondiffpatch. When I include them in my file like:
define(['jsondiffpatch',
'jsondiffpatch-formatters'], function (jsondiffpatch) {
});
the formatters extensions are not present. If I change the main config make jsondiffpath depend on the formatters like:
shim: {
'jsondiffpatch': {
deps: ['jsondiffpatch-formatters']
}
}
I still don't get the formatters. This is a pretty common practice, but haven't seen to overcome it; i know its something simple, what am i missing?
This should work:
shim: {
'jsondiffpatch-formatters': {
deps: ['jsondiffpatch'],
exports: 'jsondiffpatch.formatters'
},
'jsondiffpatch': {
exports: 'jsondiffpatch'
}
}
When you load jsondiffpatch with an AMD loader like RequireJS the formatters are a different module. In other words, it works slightly differently from when you load jsondiffpatch without an AMD-loader. Here's a complete example:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8"/>
<link rel="stylesheet" href="bower_components/jsondiffpatch/src/formatters/html.css" type="text/css" />
<link rel="stylesheet" href="bower_components/jsondiffpatch/src/formatters/annotated.css" type="text/css" />
</head>
<script type="text/javascript" src="bower_components/requirejs/require.js"></script>
</head>
<body>
<div id="visual"></div>
<hr/>
<div id="annotated"></div>
<script>
require.config({
baseUrl: ".",
paths: {
jsondiffpatch: "bower_components/jsondiffpatch/build/bundle",
"jsondiffpatch.formatters": "bower_components/jsondiffpatch/build/formatters"
},
enforceDefine: true
});
require(["jsondiffpatch", "jsondiffpatch.formatters"],
function (jsdp, formatters) {
//
// Code here adapted from jsondiffpatch's examples:
// https://github.com/benjamine/jsondiffpatch
//
var left = { a: 3, b: 4 };
var right = { a: 5, c: 9 };
var delta = jsdp.diff(left, right);
document.getElementById('visual').innerHTML =
formatters.html.format(delta, left);
document.getElementById('annotated').innerHTML =
formatters.annotated.format(delta, left);
});
</script>
</body>
</html>
The only thing you need other than this HTML above is to install RequireJS and jsondiffpatch with Bower.
Related
<!DOCTYPE html>
<html>
<head>
<title>MathJax MathML Test Page</title>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/mml-chtml.js">
</script>
</head>
<body>
<p>
<math overflow="scroll"><mfrac><msup><msub><mi mathvariant="-italic">Q</mi><mrow><msub><mi mathvariant="italic">T</mi><mi mathvariant="italic">i</mi></msub><mo mathvariant="italic">max</mo></mrow></msub><mn mathvariant="normal">0.75</mn></msup><msup><mi mathvariant="italic">β</mi><mn mathvariant="normal">0.75</mn></msup></mfrac><mo>≤</mo><mn mathvariant="normal">5</mn><mo>×</mo><msub><mi mathvariant="italic">AEL</mi><msub><mi mathvariant="italic">T</mi><mi mathvariant="italic">i</mi></msub></msub><mo>×</mo><msup><msub><mi mathvariant="italic">Q</mi><msub><mi mathvariant="italic">T</mi><mi mathvariant="italic">m</mi></msub></msub><mrow><mo>−</mo><mn mathvariant="normal">0.25</mn></mrow></msup><mo></mo></math>
</p>
</body>
</html>
Getting parsing error with new CDN https://cdn.jsdelivr.net/npm/mathjax#3/es5/mml-chtml.js
Here is a configuration you can use to post-filter the MathML to fix the invalid -italic math variant value.
MathJax = {
startup: {
ready() {
MathJax.startup.defaultReady();
MathJax.startup.input[0].postFilters.add(({data}) => {
data.walkTree(node => {
if (node.attributes) {
if (node.attributes.get('mathvariant') === '-italic') {
node.attributes.set('mathvariant', 'italic');
}
}
});
});
}
}
}
Place this in a <script> tag just before the script that loads mml-html.js.
I just use Phaser and saw some example code like below. In the Rox.Boot.prototype function, the .load, .physics, etc, are all in game(Phaser.Game). How does this inheritance happen?
Rox = {
score: 0,
music: null,
orientated: false
};
Rox.Boot = function (game) {
};
Rox.Boot.prototype = {
preload: function () {
this.load.image('preloaderBar', 'images/preload.png');
},
create: function () {
this.physics.startSystem(Phaser.Physics.ARCADE);
this.input.maxPointers = 1;
this.state.start('Preloader');
},
};
To use Phaser, you have to have a phaser.min.js or phaser.js file which you can get here. I use the phaser.min.js file instead of the phaser.js file because I don't need the extra features that the phaser.js file has (debugging); phaser.min.js will have all the same methods, classes, properties, etc as phaser.js.
They tell you to download the whole GitHub repo, but really you just need the Phaser JS file.
After you add the phaser.min.js file to your project, make sure it's the first script you call in the head of your HTML file; you should be able to use Phaser in the following JS files after that.
Here is what my index.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>FILL_IN_GAME_NAME_HERE</title>
<script src="phaser.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="Main.css">
<script src="Boot.js" type="text/javascript"></script>
<script src="Preloader.js" type="text/javascript"></script>
<script src="Menu.js" type="text/javascript"></script>
<script src="Game.js" type="text/javascript"></script>
<script src="GameOver.js" type="text/javascript"></script>
<script src="HighScores.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var game = new Phaser.Game(500, 500, Phaser.AUTO, 'game', false, false);
game.state.add('Boot', Game.Boot);
game.state.add('Preloader', Game.Preloader);
game.state.add('Menu', Game.Menu);
game.state.add('Game', Game.Game);
game.state.add('GameOver', Game.GameOver);
game.state.add('HighScores', Game.HighScores);
game.state.start('Boot');
</script>
</body>
</html>
I have been using requirejs on couple projects, and today is the first time I got this problem and not sure how to fix it. I am using requirejs and tyepscript, I can't really tell what's wrong here. Can someone take a look?
Here is my main.ts:
///<reference path="../lib/require/requirejs.d.ts"/>
///<reference path="TestClass.ts"/>
require.config(
{
baseUrl: 'js',
paths: {
puremvc: 'lib/puremvc/puremvc_standard_1.0_min'
}
}
);
require(
[
'puremvc',
'sim/TestClass'
],
function (TestClass ) {
var test = new TestClass();
test.logMsg("WHO AM I");
}
);
and this is my TestClass.ts
class TestClass{
constructor(){
console.log ("TestClass constructor")
}
public logMsg(msg:string){
console.log ("TestClass.log(): " + msg);
}
}
export = TestClass;
and my sim.html looks like this one
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simulation Tester</title>
<script src="js/lib/puremvc/puremvc_standard_1.0_min.js"></script>
<script data-main="js/sim/main.js" src="js/lib/require/require.js" ></script>
</head>
<body >
</body>
</html>
And this is my folder structure:
- root
- sim.html
- js
- lib
- require (containt requirejs)
- sim
- main.ts
- TestClass.ts
Any idea?
Are you loading puremvc through the script tag, or through require.js? I don't think you want to do both.
Over here:
require(
[
'puremvc',
'sim/TestClass'
],
function (TestClass ) {
var test = new TestClass();
test.logMsg("WHO AM I");
}
);
The callback function gets the modules in the same order you listed them. So the 'TestClass' parameter is being supplied the value from the 'puremvc' module. You probably want function(puremvc, TestClass) instead here.
I am using the following code Html to load the scripts that I need. I am getting $ as Undefined. It is not able to load the jquery.
How can I get this to work.
<html>
<head>
<title>Using The Text Plugin With RequireJS</title>
<script data-main="Scripts/init type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.6/require.min.js"></script>
<script type="text/javascript" language="javascript">
require(['jquery', 'knockout-2.2.1', 'Template', 'text!Template.htm'], function ($, ko, t, temp) {
$("body").append(temp);
//make this new template engine our default engine
ko.setTemplateEngine(t.myExternalTemplateEngine(t.templates));
ko.applyBindings(t);
});
</script>
</head>
code in Init.js in a separate file
require.config({
baseUrl:'Scripts',
paths: {
'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.js',
'knockout-2.2.1': '//cdnjs.cloudflare.com/ajax/libs/knockout/2.2.1/knockout-min.js',
'knockout.mapping-latest': '//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.3.5/knockout.mapping.js',
'Template': 'Template',
'text': '//cdnjs.cloudflare.com/ajax/libs/require-text/2.0.5/text',
'domready': '//cdnjs.cloudflare.com/ajax/libs/require-domReady/2.0.1/domReady.js'
}
});
Remove the .js from your paths configuration:
paths: {
'jquery': '//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery'
}
More detail in this example repo
I have a simple ExtJS4 MVC test application started with:
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/Test/extjs-4.1.0/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="/Test/extjs-4.1.0/resources/css/CheckHeader.css">
<script type="text/javascript" src="/Test/extjs-4.1.0/ext-all-dev.js"></script>
<script type="text/javascript" src="/Test/ajax/api-debug.js?apiNs=MyNamespac"></script>
<script type="text/javascript" src="/Test/app.js"></script>
</head>
<body><div id="viewport"></div></body>
</html>
And here is the actual app.js code (i've copied the CheckColumn.js file to extjs-4.1.0\src):
Ext.Loader.setConfig({ enabled: true });
Ext.require([ 'Ext.ux.CheckColumn' ]);
Ext.direct.Manager.addProvider(MyNamespace.REMOTING_API);
Ext.application({
name : 'Auctions',
controllers : [ 'TestDates' ],
appFolder : '/Test/app',
launch : function() {
Ext.create('Ext.Panel', {
layout : 'fit',
items : [ {
xtype : 'testdates'
} ],
renderTo : 'viewport',
});
}
});
I had to include the Loader, otherwise the app complained it cannot load the controller. I also had to require the CheckColumn, otherwise the checkcolumn xtype was not recognized.
I am not getting the following error:
The following classes are not declared even if their files have been
loaded: 'Ext.ux.CheckColumn'. Please check the source code of their
corresponding files for possible typos: './ux/CheckColumn.js
You should create folder ux under extjs-4.1.0\src and copy CheckColumn.js file there. There is always a link in ExtJs between class name and location of the file. If you class name is Ext.ux.CheckColumn then path must be .\src\ux\CheckColumn.js