Awesome

Riot Tag Plugin for SystemJS and RequireJS

This is a loader plugin that enables to dynamically compile Riot tags from jspm/SystemJS or RequireJS and statically inline them during your build task.

Prior to version 1.2.0 the requirejs part of this loader was a separate project known as requirejs-riot, which is now deprecated in favor of this one.

Usage with JSPM/SystemJS

To use it you should install it with jspm:

jspm install tag

After that you can include Riot tags in your modules:

import riot from 'riot';
import 'app.tag!';

riot.mount('app');

You can also use it when defining AMD style modules, and combine it with the pluginFirst option of your SystemJS project to use it like:

define(['riot','tag!todo.tag'], function(riot) {
	riot.mount('todo');
    riot.route.start(true);
});

Usage with RequireJS

Install using npm like so:

npm install systemjs-riot

Add the proper config to your main requirejs.config. For example:

requirejs.config({
    paths: {
        "riot": "/node_modules/riot/riot+compiler.min",
        "tag": "../requirejs-riot",
        "tags": "./tags",
        "dist": "./dist"
    }
});

Then load your tags by prepending tag! to their path:

define(['riot','tag!timer.tag'], function(riot) {
	riot.mount('timer', {
        start: 0
    });
    riot.route.start(true);
});

Running examples

Install serve or any other basic webserver

make runexample

Then point your browser to http://localhost:3000/

Precompilation and Bundling

When you bundle or build your project, the tags will be precompiled and inlined as part of the process.

The make runexamples task does run make build, which uses both jspm and r.js to generate working bundles that you can inspect. The tasks run under the hood are:

for jspm:

jspm build 'tag!tags/todo.tag + tag!tags/timer.tag + tag!tags/app.tag - riot' example/dist/alltags.js --format umd

for the r.js optimizer

./node_modules/.bin/r.js -o example/requirejs.build.js

Tests

npm install
npm test