You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

3.4 KiB

Build Status Issue Count Coverage Status NPM version NPM downloads MIT License

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 buble from 'buble'

// 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 buble.transform returns {code, map}
  return buble.transform(code)
})

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

API

compile(string, options)

@returns <Promise>{ 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

<my-tag>
  <style type='scss'>
    // ...
  </style>
</my-tag>

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