npm:ractive-load

[guybedford]

See jspm/npm#39 (comment).

[guybedford]

@victorwpbastos following up from jspm/npm#39 (comment):

I think you're jumping a few steps - the first thing is to just get ractive-load to work on its own.

Test out:

  jspm install npm:ractive-load -o {...}

With a simple page to load System.import('ractive-load').

Then there will be an error, specifically I'm getting:

 Uncaught Error: Could not find Ractive! It must be loaded before the Ractive.load plugin
system.js:2161 Uncaught Error evaluating file:///Users/guybedford/Projects/jspm-cli/sandbox/jspm_packages/npm/ractive-load@0.4.0/ractive-load.js
Uncaught Error: Could not find Ractive! It must be loaded before the Ractive.load plugin
es6-module-loader.js:139 Potentially unhandled rejection [2] Error loading "npm:ractive-load@0.4.0" at file:///Users/guybedford/Projects/jspm-cli/sandbox/jspm_packages/npm/ractive-load@0.4.0.js
Error evaluating file:///Users/guybedford/Projects/jspm-cli/sandbox/jspm_packages/npm/ractive-load@0.4.0.js
Uncaught Error evaluating file:///Users/guybedford/Projects/jspm-cli/sandbox/jspm_packages/npm/ractive-load@0.4.0/ractive-load.js
Uncaught Error: Could not find Ractive! It must be loaded before the Ractive.load plugin (WARNING: non-Error used)

I don't have time to help with this, but when I do I will.

[victorwpbastos]

Yes, then I installed github:ractive, required it before ractive-load and everything works in runtime but in bundle not.

[guybedford]

@victorwpbastos ok I see. Yes, just requiring ractive before ractive-load is not enough, as you need to ensure the dependency is defined at a modular level. This is where you should use shim configuration to enforce the dependency https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#shim-configuration.

[guybedford]

Also, perhaps use ractive-load from GitHub as well then?

[guybedford]

Basically, something like

  jspm install github:ractivejs/ractive-load -o "{ shim: { 'ractive-load': ['ractive'] }, dependencies: { ractive: 'github:ractivejs/ractive' } }"

[victorwpbastos]

Runtime: fine, bundle:

Ract plugin:

exports.translate = function(load) {
    load.source = 'module.exports = ' + JSON.stringify(load.source);
    return Ractive.load(load.address).then(function(c) {
        Ractive.components['ract-teste'] = c;
    });
};

[guybedford]

Yes this is a race condition that is only affecting you on the server as the dependency on Ractive is not properly defined.

[victorwpbastos]

So by now there is no way to do that?

[guybedford]

This will be fixed by applying the shim override like the above example in my previous comment.

[victorwpbastos]

After that I could install ractive-load running: jspm install ractive-load and jspm would take care of everything, is it?

[guybedford]

Yes exactly.

[victorwpbastos]

I wanna help. How could I do that?

[guybedford]

I'd suggest trying to follow the suggestion in #115 (comment) and see where it breaks. Read about overrides in detail at https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm#shim-configuration.

[guilhermeaiolfi]

@victorwpbastos any luck with that? I'm having the exactly same problem. But I'm not using ractive-node but rcu. rcu is a dep used by ractive-load. @guybedford suggestion didn't worked.

[victorwpbastos]

I came back to webpack until this is resolved.
Em 08/04/2015 15:36, "guilhermeaiolfi" notifications@github.com escreveu:

@victorwpbastos https://github.com/victorwpbastos any luck with that?
I'm having the exactly same problem. But I'm not using ractive-node but
rcu. rcu is a dep used by ractive-load. @guybedford
https://github.com/guybedford suggestion didn't worked.

—
Reply to this email directly or view it on GitHub
#115 (comment).

[guilhermeaiolfi]

I wonder if that's something that @Rich-Harris could help and change in the library side.

[guilhermeaiolfi]

So I made some progress. Enforcing CJS as a format for rcu ( "format cjs" ) and instaling github:jspm/nodelibs-module and requiring it at the top of the file made it work until:

     Cannot call method 'add' of null
         at Object.cssConfigurator.extend (evalmachine.<anonymous>:3400:17)
         at configure (evalmachine.<anonymous>:6977:19)
         at Object.config.extend (evalmachine.<anonymous>:6932:12)
         at extendOne (evalmachine.<anonymous>:16531:18)
         at Array.reduce (native)
         at Function._extend__extend (evalmachine.<anonymous>:16491:20)
         at createComponent [as _onTimeout] (evalmachine.<anonymous>:387:27)
         at Timer.listOnTimeout [as ontimeout] (timers.js:110:15)

But that's OK, seems a library error, so commented the line in ractive@0.7.2:7400

global_css.add({ id: id, styles: styles });

then the build completes. Not a lot of changes to make. What you guys think?

[victorwpbastos]

In fact I'm using handlebars again. Ractive seems a little work in progress. I hope they keep the good work. Looks promising!

[guilhermeaiolfi]

The problem with global_css.add({ id: id, styles: styles }); was my fault. The only problem left is enforcing the cjs format for rcu and requiring 'module' (nodelibs-module). Here is the code: https://github.com/guilhermeaiolfi/ractem

[guybedford]

@guilhermeaiolfi thanks for updating here. I've just added an experimental feature to jspm at jspm/jspm-cli#670, which would allow shim to apply to any module format.

With this feature, such an install can be accomplished with:

jspm install npm:rcu -o "{shim:{'dist/rcu':{deps:['module']}},dependencies:{module:'jspm/nodelibs-module@0.1'},format:'cjs'}"

This is breaking though, so won't be released too soon unfortunately, but let me know if it looks like that will help here.

[guilhermeaiolfi]

So, it worked for me:

System.config({
  meta: {
    'github:ractivejs/rcu@0.4.0/dist/rcu': {
      deps: ['module'],
      format: 'cjs'
    }
  }
});

It took me a while until I understood how 'meta' works because it matches files and not modules names (at least in this case).

DO NOT WORK:

System.config({
  meta: {
    'rcu': { // 'github:ractivejs/rcu@0.4.0' won't work either
      deps: ['module'],
      format: 'cjs'
    }
  }
});

I hope it helps someone else. You can close this issue for now.

Thanks for the tips.