Awesome
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
npm i @riotjs/hot-reload -D