Browserify transform for ractive components
npm install ractive-componentifyA versatile browserify transform for ractive components, following the Ractive.js component specification.
Inspired by ractiveify, it lets you compile the component contents of the script and style tags using a language of your choice.
It also generates sourcemaps that map directly to the component original source.
``
npm install ractive-componentify --save
`javascript
var browserify = require('browserify');
var componentify = require('ractive-componentify');
var b = browserify();
b.transform(componentify, {
// extension to parse
// default: 'ract'
extension: 'ract',
// require a ractive instance when requiring components
// dafault: true
requireRactive: true
});
b.bundle();
`
Compilers are defined using the same value of the type attribute of the script and style tags, like this:
`javascript
var componentify = require('ractive-componentify');
componentify.compilers["text/es6"] = function (source, file) {
// Your compile code goes here
return {
source: / compiled source /,
map: / resulting sourcemap /
};
}
`
You can also return a promise
`javascript
var componentify = require('ractive-componentify');
componentify.compilers["text/es6"] = function (source, file) {
// Your compile code goes here
return compiler.then(function(output) {
return {
source: / compiled source /,
map: / resulting sourcemap /
};
});
}
`
Currently Sourcemaps are only supported in js compilers.
You can also override the default text/javascript and text/css compilers.
`javascript
var Main = require('./components/main.ract');
var app = new Main({
el: '#main',
data: {
title: 'My App'
}
});
`
You can also import partials in component files. The only requirement is that
partial files need to start with an underscore.
`html
{{>mypartial}}
``
The link, style and script tags are ignored inside partials.