Versatile browserify transform for ractive components
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
.gitignore
package.json
readme.md

readme.md

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.