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.