Skip to content

Instantly share code, notes, and snippets.

@guilhermeaiolfi
Last active April 3, 2016 17:58
Show Gist options
  • Save guilhermeaiolfi/791e3c07725761638d3c to your computer and use it in GitHub Desktop.
Save guilhermeaiolfi/791e3c07725761638d3c to your computer and use it in GitHub Desktop.
SystemJS loader plugin for ractive components
var Ractive = require("ractive");
var rcu = require("rcu");
var toSource = require("tosource");
rcu.init(Ractive);
createComponent = function(definition) {
console.log(definition);
var components_output = [];
components_output.push('var components = {};');
for(var i = 0; i < definition.imports.length; i++) {
components_output.push("components[\'" + definition.imports[i].name + "\'] = require(\'" + definition.imports[i].href + "!ract\')");
}
var output = [
'var Ractive = require(\'ractive\')',
components_output.join("\n\n"),
'var component = {};',
'var options = {};',
'options.template = ' + toSource(definition.template),
'options.partials = ' + toSource(definition.partials),
'options.css = ' + toSource(definition.css),
'options.components = components;',
definition.script,
'var exports = component.exports;',
'if ( typeof exports === \'object\') {',
'for ( prop in exports ) {',
'if ( exports.hasOwnProperty( prop ) ) {',
'options[ prop ] = exports[ prop ];',
'}',
'}',
'}',
'module.exports = Ractive.extend(options);'
];
return output.join("\n\n");
}
exports.translate = function(load) {
var definition = rcu.parse(load.source);
var imports = {};
var options = {
template: definition.template,
partials: definition.partials,
css: definition.css,
components: imports
};
return createComponent(definition);
}
@guilhermeaiolfi
Copy link
Author

Revision 2 is using just rcu, no need for ractive-load

@guilhermeaiolfi
Copy link
Author

Revision 3 is the way I found to make it work for bundles too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment