Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Build Status

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

About

browserify plugin for riot files

Resources

License

Packages

No packages published
You can’t perform that action at this time.