I'm hopelessly trying to make the Dijit template inlining functionality of Dojo builds for my AMD project work with no luck yet ...
The particular issue isn't the inlining of the HTML templates themselves, but the fact that they are still requested with Ajax (XHR) after being successfully inlined.
Templates are inlined the following way :
"url:app/widgets/Example/templates/example.html": '<div>\n\tHello World!</div>'
The Dijit widget itself, after building, defines templates like this :
define("dojo/_base/declare,dijit/_Widget,dojo/text!./templates/example.html".split(","), function (f, g, d) {
return f("MyApp.Example", [g], {
templateString: d,
});
});
I tried to build with :
- the shrinksafe / closure optimiser
- relative / absolute paths
- using the old
cache()method - using the
templatePathproperty
but even after having run a successful build (0 errrors and a few warnings) where the templates were inlined, Dojo / Dijit still makes Ajax requests to these resources.
Here is my build profile :
var profile = {
basePath: '../src/',
action: 'release',
cssOptimize: 'comments',
mini: true,
optimize: 'closure',
layerOptimize: 'closure',
stripConsole: 'all',
selectorEngine: 'acme',
internStrings: true,
internStringsSkipList: false,
packages: [
'dojo',
'dijit',
'dojox',
'app'
],
layers: {
'dojo/dojo': {
include: [
'app/run'
],
boot: true,
customBase: true
},
},
staticHasFeatures: {
'dojo-trace-api': 0,
'dojo-log-api': 0,
'dojo-publish-privates': 0,
'dojo-sync-loader': 0,
'dojo-xhr-factory': 0,
'dojo-test-sniff': 0
}
};
Due to this issue my application is completely unusable because there are so many files to download separately (browsers have a limit on the number of parallel connections).
Thank you very much in advance !
UPDATE :
The two lines loading dojo.js and the run.js in my index.html :
<script data-dojo-config='async: 1, tlmSiblingOfDojo: 0, isDebug: 1' src='/public/dojo/dojo.js'></script>
<script src='/public/app-desktop/run.js'></script>
Here is the new build-profile :
var profile = {
basePath: '../src/',
action: 'release',
cssOptimize: 'comments',
mini: true,
internStrings: true,
optimize: 'closure',
layerOptimize: 'closure',
stripConsole: 'all',
selectorEngine: 'acme',
packages : [
'dojo',
'dijit',
'app-desktop'
],
layers: {
'dojo/dojo': {
include: [
'dojo/request/xhr',
'dojo/i18n',
'dojo/domReady',
'app-desktop/main'
],
boot: true,
customBase: true
}
},
staticHasFeatures: {
'dojo-trace-api': 0,
'dojo-log-api': 0,
'dojo-publish-privates': 0,
'dojo-sync-loader': 0,
'dojo-xhr-factory': 0,
'dojo-test-sniff': 0
}
};
My new run.js file :
require({
async: 1,
isDebug: 1,
baseUrl: '/public',
packages: [
'dojo',
'dijit',
'dojox',
'saga',
'historyjs',
'wysihtml5',
'app-shared',
'jquery',
'jcrop',
'introjs',
'app-desktop'
],
deps: [
'app-desktop/main',
'dojo/domReady!'
],
callback: function (Main) {
debugger;
var main = new Main();
debugger;
main.init();
}
});
and my main.js file looks like this :
define([
'dojo/_base/declare',
'app-desktop/widgets/Application',
'app-desktop/config/Config',
'saga/utils/Prototyping',
'dojo/window',
'dojo/domReady!'
], function (declare, Application, ConfigClass, Prototyping, win) {
return declare([], {
init: function() {
// ... other stuff
application = new Application();
application.placeAt(document.body);
// ... some more stuff
}
});
});
In build-mode, I get the following error :
GET http://localhost:4000/app-desktop/run.js 404 (Not Found)
which is weird because it means that the build process made it so that dojo has an external dependency rather than an a already inlined dojoConfig variable in the builded file.
In normal-mode, files get requested, but the app is never created.
In both cases none of the two debuggers set in the run.js file were run which means that the callback method was never called for some reason.
Thank you for your help !
"A,B,C".split(",")trick inside your widget? (In other words, just["A","B","C"]) Perhaps there's some parsing/regex magic going on and that breaks it? - Darien