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'
registerPreprocessor('template', 'pug', async function(code, { file }) {
console.log('your file path is:', file)
return await pug.compile(code)
})
registerPostprocessor(async function(code, { file }) {
console.log('your file path is:', file)
return await buble.transform(code)
})
const { code, map } = await compile('<p>{hello}</p>', {
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