@riotjs/compiler

To help you get started, we've collected the most common ways that @riotjs/compiler is being used within popular public projects.

Acesmndr / chrome-extension-boilerplate-riot / src / popup / components / __tests__ / pageone.spec.js View on Github

import * as riot from 'riot';
import { registerPreprocessor } from '@riotjs/compiler';
import pageone from '../pageone/pageone.riot';

registerPreprocessor('css', 'sass', function (code, { options }) {
    const { file } = options

    console.log('Compile the sass code in', file)

    const { css } = sass.renderSync({
        data: code
    })

    return {
        code: css.toString(),
        map: null
    }
})

const mockFn = jest.fn();
// const messageMixin = {

View more ways to use @riotjs/compiler

Important

This compiler will not work with older Riot.js versions. It's designed to work with Riot.js > 4.0.0. For Riot.js < 4.0.0 please check the v3 branch

Installation

npm i @riotjs/compiler -D

Usage

The riot compiler can compile only strings:

import { compile } from '@riotjs/compiler'

const { code, map } = compile('<p>{hello}</p>')

You can compile your tags also using the new registerPreprocessor and registerPostprocessor APIs for example:

import {
  compiler,
  registerPreprocessor,
  registerPostprocessor,
} from '@riotjs/compiler'
import pug from 'pug'
import * as babel from '@babel/core'

// process your tag template before it will be compiled
registerPreprocessor('template', 'pug', function (code, { options }) {
  const { file } = options
  console.log('your file path is:', file)

  return {
    code: pug.render(code),
    // no sourcemap here
    map: null,
  }
})

// your compiler output will pass from here
registerPostprocessor(function (code, { options }) {
  const { file } = options
  console.log('your file path is:', file)

  // notice that babel.transformSync returns {code, map}
  return babel.transformSync(code)
})

const { code, map } = compile('<p>{hello}</p>', {
  // specify the template preprocessor
  template: 'pug',
})

API

compile(string, options)

@returns { code, map } output that can be used by Riot.js

• string: is your tag source code
• options: the options should contain the file key identifying the source of the string to compile and the template preprocessor to use as string

Note: specific preprocessors like the css or the javascript ones can be enabled simply specifying the type attribute in the tag source code for example

  <style type="scss">
    // ...
  </style>

registerPreprocessor(type, id, preprocessorFn)

@returns Object containing all the preprocessors registered

• type: either one of template css or javascript
• id: unique preprocessor identifier
• preprocessorFn: function receiving the code as first argument and the current options as second

registerPostprocessor(postprocessorFn)

@returns Set containing all the postprocessors registered

• postprocessorFn: function receiving the compiler output as first argument and the current options as second

generateTemplateFunctionFromString(string, parserOptions)

@returns string with the code to execute the @riotjs/bindings template function

generateSlotsFromString(string, parserOptions)

@returns string with the code to generate components slots in runtime