Hello everyone!
I am having some troubles with getting dynamic loading of bundles to work. My use case is an 'application container" whose job it is to load "apps" on demand where each app is developed separately and to that end I would like to use cram to optimize/bundle and use curl to load the bundle.
While developing everything works fine with a run.js setup much like this:
curl.config({
baseUrl: 'scripts',
paths: {
apps: 'apps'
},
packages: [
{ name: 'wire', location: 'vendor/wire', main: 'wire' },
......
]
});
curl(['AppContainer']).then(function(a) { a.start(); } ) ....
In AppContainer i have a router set up which reacts on hash changes in the browser and attemtps to load an 'app' corresponding to the url:
......
function(route) {
var c = { paths: {}, packages:[] }
// c.paths[route] = 'apps/' + route + '/' + route;
c.packages.push({ name: route, location: 'apps/' + route, main: route })
curl.config(c);
curl([route], function(app) {
var root = document.getElementById('app-content');
root.innerHTML = app.index;
}
}
I have an extremely simple example app called dashboard:
define(['text!./views/pages/index.html'], function(html) {
return { index: html }
});
As you can see this is an extremely simple setup that works just fine when I develop. I then add a build step where i optimize the "app container" and then separately the dashboard app with a config file that looks like:
{
"main": "dashboard",
"baseUrl": "dashboard",
"paths": {
"curl": "../../vendor/curl/src/curl"
}
}
I run cram from the "apps" subdirectory that has a main file (in this case called dashboard.js) and a view file as follows:
cram -c dashboard/config.json -o .tmp/scripts/apps/dashboard.js -r .
The produced file dashboard.js looks like:
;define('curl/plugin/text!views/pages/index.html', function () {
return "<div class=\"app\">...</div>"
});
;define('dashboard', ['text!./views/pages/index.html'], function (html) {
return { index: html }
});
... when I try to run the optimized/bundled version I get an error : Uncaught Error: define() missing or duplicated: scripts/apps/dashboard/dashboard.js
Although curl seems to load the bundled view just fine (the index.html) I get an error.
If I uncomment the row containing:
// c.paths[route] = 'apps/' + route + '/' + route;
in the app-container function above I can get this to work properly at build time but not when developing. I need to be able to use the same method while developing as well as after an optimization process.
What am I missing?
Thanks for the great job and all the great tools that you guys have provided!