ractive-componentify
v0.2.7
Published
Browserify transform for ractive components
Downloads
23
Maintainers
Readme
ractive-componentify
A 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.
Install
npm install ractive-componentify --save
Configuring the browserify transform
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();
Defining your own compilers
Compilers are defined using the same value of the type attribute of the script and style tags, like this:
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
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.
Requiring components
var Main = require('./components/main.ract');
var app = new Main({
el: '#main',
data: {
title: 'My App'
}
});
Partials
You can also import partials in component files. The only requirement is that partial files need to start with an underscore.
<link rel="ractive" href="path/to/_mypartial.ract">
{{>mypartial}}
The link, style and script tags are ignored inside partials.