Nightly Perpetrated Mischief
    Wondering what’s next for npm?Check out our public roadmap! »

    riotify

    5.0.0 • Public • Published

    BuildStatus

    riotify

    "riotify" is a browserify transformer for riot ".riot" files.

    Important

    If you are using Riot.js < 4.0.0 please check the v3 branch

    Installation

    $ npm install riotify @riotjs/compiler -D

    Usage

    This module is meant to be used together with browserify or module-deps:

    Either of the two commands below result creates the same result:

    $ browserify -t riotify app.js
    $ module-deps -t riotify app.js | browser-pack

    Example app.js:

    const Todo = require('./todo.riot').default
    const {component} = require('riot')
     
    component(Todo)(document.getElementById('todo'))

    Example todo.riot:

    <todo>
      <div each={ item in items }>
        <h3>{ item.title }</h3>
      </div>
      <script>
        // a tag file can contain any JavaScript, even require()
        const resources = require('../resources.json')
     
        export default {
          items: [ { title: resources.en.first }, { title: resources.en.second } ]
        }
      </script> 
    </todo>

    Note that your tag files actually need to have the extension ".riot".

    Compile Options

    This plugin can give riot's compile options.

    $ browserify -t [ riotify --ext html ] app.js

    You can also configure it in package.json

    {
        "name": "my-package",
        "browserify": {
            "transform": [
                ["riotify", { "ext": ".html" }],
            ]
        }
    }

    Available option

    • ext: String
      • custom extension, you’re free to use any file extension for your tags (instead of default .riot):

    See more: https://github.com/riot/compiler

    With gulp.js

    const gulp       = require('gulp')
    const browserify = require('browserify')
    const riotify    = require('riotify')
    const source     = require('vinyl-source-stream')
     
    gulp.task('browserify', function(){
      browserify({ entries: ['src/app.js'] })
        .transform(riotify) // pass options if you need
        .bundle()
        .pipe(source('app.js'))
        .pipe(gulp.dest('dist/'))
    })

    These are the simplest cases. uglify and sourcemaps would be needed.

    Tests

    $ npm test

    Author

    Originally written by Jan Henning Thorsen - jhthorsen@cpan.org
    Maintained by Gianluca Guarini - gianluca.guarini@gmail.com

    Install

    npm i riotify

    DownloadsWeekly Downloads

    83

    Version

    5.0.0

    License

    MIT

    Unpacked Size

    7.18 kB

    Total Files

    5

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar