Björn f184cd7e2a | 4 years ago | |
---|---|---|
.. | ||
dist | 4 years ago | |
src | 4 years ago | |
CHANGELOG.md | 4 years ago | |
LICENSE | 4 years ago | |
README.md | 4 years ago | |
package.json | 4 years ago |
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
npm i @riotjs/compiler -D
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'
})
<Promise>{ code, map }
output that can be used by Riot.jsfile
key identifying the source of the string to compile and
the template
preprocessor to use as stringNote: 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>
Object
containing all the preprocessors registeredtemplate
css
or javascript
Set
containing all the postprocessors registered