ractify

browserify 2 + precompiled Ractive.js components

Ractify

Browserify 2 + ractive.js

Replace require('ractive/build/ractive.runtime') with require('ractive/ractive.runtime')

I've decided to remove some "magic." Namely:

  • Ractify no longer uses Ractive.extend
  • require('ractify') no longer includes the ractive runtime (it throws an error and will be removed in future versions)

ractify still parses Ractive components, but it just returns a plain javascript object with template and css properties (and whatever <script> code is in the Ractive component). See this issue

See test input and output for an example.

  • replace var Ractive = require('ractify') with var Ractive = require('ractive/build/ractive.runtime')
  • For components, replace var Foo = require('./foo.ract') with:
var Ractive = require('ractive/build/ractive.runtime')
var Foo = Ractive.extend(require('./foo.ract'))
  • replace require('ractify') with require('ractive/build/ractive.runtime')
  • replace new Ractive({ template:require('./foo.ract'), ... }) with new Ractive({ template:require('./foo.ract').template, ... })

Ractify does not install Ractive on its own, you must do so yourself (this allows you to update Ractive without an update to ractify).

Example:

npm install --save ractify
npm install --save ractive@0.4.0

Browserify API usage:

var browserify = require('browserify')
var ractify = require('ractify')
 
var bundle = browserify()
bundle.transform(ractify)

In your Client-side JavaScript, require('ractive/build/ractive.runtime') and it'll import the runtime-only version of ractive. require a .ract file, and it will return a plain javascript object with template and (if defined) css parameters:

var Ractive = require('ractive/build/ractive.runtime')
var foo = new Ractive({
    template:require('./views/foo.ract').template,
    el: document.getElementById("foo"),
    data: ...
})

This structure can be passed into Ractive.extend to automatically build Ractive components:

var Ractive = require('ractive/build/ractive.runtime')
var Foo = Ractive.extend(require('./views/foo.ract'))
var foo = new Foo({
    el: document.getElementById("foo"),
    data: ...
})

Extract partials by inspecting the template property:

var foo = require('./views/partials.ract')
if (foo.template.partials) {
    // foo.template.main has the main template 
    // foo.template.partials has the partial templates 
}

Commandline Browserify usage:

$ browserify -t ractify main.js > bundle.js

If you want to use different file extension, e.g. .html, you can use extension option:

var browserify = require('browserify');
var ractify = require('ractify');
 
var bundle = browserify();
bundle.transform({ extension: 'html' }, ractify);
$ browserify -t [ ractify --extension html ] main.js > bundle.js

Open source software under the zlib license.