lineman-riot is a plugin for lineman to precompile RIOT tags.
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/
Alternatively: If you installed the bower lineman plugin, you can do bower install riot
to install the riotjs runtime. (No need to do this if an up-to-date riot.min.js already exists)
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, ./app/pages/index.us
) and mount them. The riot runtime is made available automatically as a combined javascript file. (./generated/js/app.js
)
I'd recommend you install the lineman-browserify plugin if you need to leverage CommonJS support in RIOT.
When lineman-browserify plugin is installed, lineman-riot will automatically adjust itself the next time you execute lineman run
and you need to start using the CommonJS syntax such as require statements and mount as shown in riot.js documentation.
RIOT compiler currently supports:
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'd 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:
- coffeescript (CoffeeScript is pre-installed along with lineman or this plugin)
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
- 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.
Logo credits: Asad Ullah Khan