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.
Björn
b963b3396c
|
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 |
README.md
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 thetemplate
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
orjavascript
- 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