Ractify Loader (for webpack)

Webpack + ractive.js

Based on (and compatible with) ractify.

Installation

This loader does not depend on Ractive, you must require it yourself (this allows you to update Ractive without an update to ractify-loader).

Example:

npm install --save ractify-loader
npm install --save [email protected]

Usage / Examples

Webpack config example usage:

/* webpack.config.js */
module.exports = {
  module: {
    loaders: [
      { test: /\.ract$/, loader: '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
}

License

Open source software under the zlib license.