Pre-compilation on gives you following benefits:

    • Ability to compile tags with your .
    • Big performance benefit. No need to load and execute the compiler on browser.
    • Sourcemaps support for debugging.

    Tools like and are the perfect match to bundle your riot application tags.For such tools we provide riot official loaders to let import natively riot components into your source code:

    • webpack
    • parcel
    • With the riot loaders your application entry script might look like this:
    1. import {compile} from '@riotjs/compiler'
    3. const { code, map } = compile('<p>{hello}</p>', {
    4.   //...options
    5.   file: 'my/path/to/my-component.riot',
    6.   // transform the `:host` css rules
    7.   scopedCss: true,
    8.   // expressions delimiters
    9.   brackets: ['{', '}'],
    10.   // keep HTML comments
    11. })

    The compile function takes a string and returns an object containing the code and map keys.You can handle the code generated however you like and use it into your build system.

    Remember that the riot compiler outputs javascript modules and you might want to transpile them in your bundle.

    1. npm install @riotjs/cli -g

    Using

    Here is how riot command works:

    1. # compile a file to current folder
    2. riot some.riot
    4. # compile file to target folder
    5. riot some.riot --output some-folder
    7. # compile file to target path
    10. # compile all files from source folder to target folder
    11. riot some/folder --output path/to/dist

    For more information, type: riot —help

    Watch mode

    You can watch directories and automatically transform files when they are changed.

    Custom extension

    You’re free to use any file extension for your tags (instead of default .riot):

    1. riot --extension html

    ES6 Config file

    1. riot --config riot.config src

    The riot riot.config.js file:

    1. export default {
    2.   output: 'tags/dist',
    3.   // sourcemap type
    4.   sourcemap: 'inline',
    5.   // files extension
    6.   extension: 'foo'
    7. }

    If you want to use custom preprocessors in your project you should install @riotjs/cli as devDependency running it via npm scripts as follows:

    That’s how your riot.config.js file might look like in case you want to use pug as components template engine

    1. import { registerPreprocessor } from '@riotjs/compiler'
    2. import { render } from 'pug'
    3. // register the pug preprocessor
    5.   const { file } = options
    7.   return {
    8.     code: render(code, {
    9.       filename: file,
    10.       pretty: true,
    11.       doctype: 'html'
    12.     })
    13.   }
    14. })
    16. export default {
    17.   extension: 'pug',
    19.   // assign the pug preprocessor to the riot compiler options
    20.   riot: {
    21.     template: 'pug'
    22.   }
    23. }

    Build your whole application

    You can also use the CLI to bundle your entire application.

    1. import {component} from 'riot'
    2. import App from './app.riot'
    4. component(App)(document.getElementById('root'))

      Your file will contain all the Riot.js components imported in your application and the code to run it.