@riotjs/parcel-transformer-riot NPM

The Riot.js official parcel transformer.

Important

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

Using

1. Add the riot parcel transformer to your project.

npm i -D @riotjs/parcel-transformer-riot @riotjs/compiler

2. Configure your .parcelrc file

{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.riot": ["@riotjs/parcel-transformer-riot"]
  }
}

-> You are ready!

import App from './src/App.riot'
import { component } from 'riot'

component(App)(document.querySelector('#root'), {
  message: 'Hello there',
})

Configuration

If you want compile your tags using custom riot compiler options you can create a riot.config.js in the root folder of your project

export default {
  hot: false, // set it to true if you are using hmr
  // add here all the other @riotjs/compiler options riot.js.org/compiler
  // template: 'pug' for example
}

If you want to use pug as your template engine, your riot.config.js might look like this

import { registerPreprocessor } from '@riotjs/compiler'
import { render } from 'pug'

// register the pug preprocessor
registerPreprocessor('template', 'pug', (code, options) => {
  const { file } = options

  return {
    code: render(code, {
      filename: file,
      pretty: true,
      doctype: 'html',
    }),
  }
})

export default  {
  template: 'pug',
}

If you want to enable hmr via hot option you will need to install also @riotjs/hot-reload