Code Monkey home page Code Monkey logo

lineman-riot's Introduction

lineman-riot

Dependency Status devDependency Status peerDependency Status

Git tips Flattr this Stories in Ready Bitdeli Badge

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

NPM

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/

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.

Pre-processor support

RIOT compiler currently supports:

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'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

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

lineman-riot's People

Contributors

mo3rfan avatar waffle-iron avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.