https://github.com/riot/riotify

browserify plugin for riot files
https://github.com/riot/riotify

Last synced: 5 days ago
JSON representation

browserify plugin for riot files

• Host: GitHub
• URL: https://github.com/riot/riotify
• Owner: riot
• License: mit
• Created: 2015-01-22T19:19:37.000Z (almost 10 years ago)
• Default Branch: main
• Last Pushed: 2023-03-04T03:00:56.000Z (over 1 year ago)
• Last Synced: 2024-04-24T13:44:47.631Z (7 months ago)
• Language: JavaScript
• Homepage:
• Size: 336 KB
• Stars: 96
• Watchers: 7
• Forks: 16
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-starred - riot/riotify - browserify plugin for riot files (others)

README

        
# riotify

[![Build Status][ci-image]][ci-url]

[![NPM version][npm-version-image]][npm-url]

[![NPM downloads][npm-downloads-image]][npm-url]

[![MIT License][license-image]][license-url]

"riotify" is a browserify transformer for [riot](https://github.com/riot/riot) ".riot" files.

## Important

If you are using Riot.js < 4.0.0 please check the [v3 branch](https://github.com/riot/riotify/tree/v3)

## Installation

```bash

$ npm install riotify @riotjs/compiler -D

```

## Usage

This module is meant to be used together with

[browserify](http://browserify.org) or

[module-deps](https://github.com/substack/module-deps):

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

```bash

$ browserify -t riotify app.js

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

```

Example `app.js`:

```javascript

const Todo = require('./todo.riot').default

const {component} = require('riot')

component(Todo)(document.getElementById('todo'))

```

Example `todo.riot`:

```html

  


    
{ item.title }

  

  

    // 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 } ]

    }

  

```

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

### Compile Options

This plugin can give riot's compile options.

```bash

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

```

You can also configure it in package.json

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

```javascript

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

```bash

$ npm test

```

## Author

Originally written by Jan Henning Thorsen - [email protected]


Maintained by Gianluca Guarini - [email protected]

[ci-image]:https://img.shields.io/github/actions/workflow/status/riot/riotify/test.yml?style=flat-square

[ci-url]:https://github.com/riot/riotify/actions

[license-image]:https://img.shields.io/badge/license-MIT-000000.svg?style=flat-square

[license-url]:LICENSE

[npm-version-image]:https://img.shields.io/npm/v/riotify.svg?style=flat-square

[npm-downloads-image]:https://img.shields.io/npm/dm/riotify.svg?style=flat-square

[npm-url]:https://npmjs.org/package/riotify