lineman-riot is a plugin for lineman to precompile RIOT tags.

Usage

At the root of your lineman project, do

npm install lineman-riot --save-dev

Note: If you're getting errors, you may want to try running npm as root (sudo). If you're on an ancient filesystem that does not support symlinks (FAT32 etc, like mine), try passing the --no-bin-links flag.

The most recent riot.min.js will be downloaded and (over)written in ./vendor/js/. If that didn't happen for some reason, download a copy of riotjs (without compiler, preferably minified) and place it into ./vendor/js/ (ensure the filename is riot.js and nothing else)

Alternatively (bower fanboys): If you installed the bower lineman plugin, you can do bower install riot to install the latest riotjs runtime. Make sure you have a bower.json file that specifies riot.js and also extend the js.vendor property to accomodate the downloaded riot.js file. It's all explained here. (That's a lot of work!)

A folder called riottags will be created in ./app/. This is where all RIOT custom tags should go. Tags should have the extension as .tag

Next, include your custom tags as mount points on your pages (eg, On 'vanilla' lineman projects, that'd be at ./app/pages/index.us) and mount them. The riot runtime is made available automatically as a combined javascript file. (./generated/js/app.js)

Modular Javascript

RIOT has support for AMD/CommonJS.

To make use of modular javascript, install any one of the following:

• For CommonJS, you can install lineman-browserify (More details on this given below)

• For AMD, install lineman-requirejs

When one of the above plugins are installed, lineman-riot will automatically adjust itself the next time you execute lineman run and you need to start using the appropriate syntax and mount as shown in riot.js documentation. (I did not test AMD, but it should work. If it doesn't, Do not hesitate to contact me. I'll be around on gitter chat where you can join in from the badge attached above or simply open an issue here on github and describe your problem elaborately.)

You can also explicitly change the modularization type. Set the override value for lineman config lm_riot.modular property in your module exports at ./config/applications.{coffee,js}. The default value is "notset" and that causes it to fall back to CommonJS and then AMD mode (in that order). Supported string values are amd,common or umd.

Example application.coffee configuration:

module.exports -> (lineman)
  app = lineman.config.application
  
  lm_riot:
    modular: "common"

CommonJS instructions

If you plan to use CommonJS; after you've installed lineman-browserify as mentioned above, edit ./app/js/entrypoint.{coffee,js} and add the following lines to load your RIOT tags modularly:

window.riot = require("riot")
window.tags = require("riottags/riot.tags")
riot.mount('*')

You get the idea!

Make sure lineman-browserify dependency is at the top of the list in ./package.json to avoid issues.

Pre-processor support

RIOT compiler currently supports several javascript preprocessors and one HTML preprocessor.

Javascript preprocessors

To write in one of the languages below, make sure you've installed their corresponding compiler modules (shown along side below). If you have them installed globally, that could work too. After that, you can specify any of them from the custom tags by doing something along the lines of <script type="text/js_type"> where js_type is one of the below:

js_type | NPM package ---------------------------------------------------------------------------------|--------------------------------- coffeescript (Preinstalled with lineman) | npm update coffee-script es6 (ECMAScript 6) | npm install babel typescript | npm install typescript-simple livescript | npm install LiveScript

If you insist on more, you can try to implement your own custom javascript riot.parsers on the browser

Note: I'm not sure if the custom parsers can be explicitly implemented in the browser. You might need to play around with the internal "parser" option of grunt-riot that we use in this plugin. Extend the riot.compile object's options in your application.{coffee,js} config file. To see the current configuration, type

lineman config riot.compile

HTML preprocessors

• Jade

The plugin also supports tags created in Jade. It's really nice and you should really try it out. You also get the bonus of using Jade templates outside of RIOT (in templates, pages directories etc) To use it, you need to install the lineman-jade plugin.

After that, write your custom tags in ./app/riottags/ with jade and save it with .jade extension. You can still use plain old .tag!

Jade also supports the javascript preprocessors mentioned above. Simply use script(type="text/livescript"). Replace "livescript" with your choice of type as mentioned above.

Credits

Logo credits: Asad Ullah Khan

Contributions welcome! Fork and send a pull request.