Skip to content

riot/riotify

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

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

riotify

Build Status NPM version NPM downloads MIT License

"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