node package manager


Ractify Loader (for webpack)

npm version Build Status

Webpack + ractive.js

Based on (and compatible with) ractify.


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


npm install --save ractify-loader
npm install --save ractive@0.7

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({
    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 


Open source software under the zlib license.