Cram js multiple bundles and dynamic loading

[Bawer Dagdeviren]

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!

[Chris Hafey]

I am working on a similar project and have it working (see my other post about this).  The problem is that curl throws the error you are seeing when a module is defined a second time.  In your case, your dashboard app is referencing a module that has already been loaded by your AppContainer.  I worked around this by tell cram to exclude the shared code when building the dynamic module (your dashboard app).  See my other post for some more detail about my approach. 

[unscriptable]

Hey Bawer,

I see the problem.  curl.js is looking for a file at "scripts/apps/dashboard/dashboard.js".  Since the baseUrl is "scripts/" and the path mapping for "apps" is "apps/", I can see that curl thinks that the name of the module is "dashboard/dashboard".  cram.js is compiling a bundle with a module named "dashboard".

If your config.json had the same package declaration, curl and cram should be in sync:

{
  "main": "dashboard",
  "baseUrl": "dashboard",
  "paths": {
    "curl": "../../vendor/curl/src/curl"

  },
  "packages": [
    { "name": "dashboard", "location": "apps/dashboard", "main": "dashboard" }
  ]
}

Is this an option for your setup?

-- John

[Bawer Dagdeviren]

Hey John!

That did the trick! Thanks!