@riotjs/compiler

Installation

npm i @riotjs/compiler -D

Usage

The riot compiler is completely asynchronous and it can compile only strings:

import { compile } from '@riotjs/compiler'

const { code, map } = await 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', async function(code, { meta }) {
  const { file } = meta
  console.log('your file path is:', file)
  return await pug.compile(code)
})

// your compiler output will pass from here
registerPostprocessor(async function(code, { meta }) {
  const { file } = meta
  console.log('your file path is:', file)
  return await buble.transform(code)
})

const { code, map } = await 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, it can be also asynchronous

registerPostprocessor(postprocessorFn)

@returns Set containing all the postprocessors registered

• postprocessorFn: function receiving the compiler output as first argument and the current options as second, it can be also asynchronous