113 lines
3.7 KiB
Markdown
113 lines
3.7 KiB
Markdown
|
[![Build Status][ci-image]][ci-url]
|
||
|
|
[![Issue Count][codeclimate-image]][codeclimate-url]
|
||
|
|
[![Coverage Status][coverage-image]][coverage-url]
|
||
|
|
[![NPM version][npm-version-image]][npm-url]
|
||
|
|
[![NPM downloads][npm-downloads-image]][npm-url]
|
||
|
|
[![MIT License][license-image]][license-url]
|
||
|
|
|
||
|
|
## 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](https://github.com/riot/compiler/tree/v3) branch
|
||
|
|
|
||
|
|
## Installation
|
||
|
|
|
||
|
|
```
|
||
|
|
npm i @riotjs/compiler -D
|
||
|
|
```
|
||
|
|
|
||
|
|
## Usage
|
||
|
|
|
||
|
|
The riot compiler can compile only strings:
|
||
|
|
|
||
|
|
```js
|
||
|
|
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:
|
||
|
|
|
||
|
|
```js
|
||
|
|
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 `{ 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
|
||
|
|
|
||
|
|
```html
|
||
|
|
<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
|
||
|
|
|
||
|
|
### generateTemplateFunctionFromString(string, parserOptions)
|
||
|
|
#### @returns `string` with the code to execute the @riotjs/bindings `template` function
|
||
|
|
|
||
|
|
### generateSlotsFromString(string, parserOptions)
|
||
|
|
#### @returns `string` with the code to generate components slots in runtime
|
||
|
|
|
||
|
|
[ci-image]:https://img.shields.io/github/workflow/status/riot/compiler/test?style=flat-square
|
||
|
|
[ci-url]:https://github.com/riot/compiler/actions
|
||
|
|
[license-image]: https://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
|
||
|
|
[license-url]: LICENSE
|
||
|
|
[npm-version-image]: https://img.shields.io/npm/v/@riotjs/compiler.svg?style=flat-square
|
||
|
|
[npm-downloads-image]: https://img.shields.io/npm/dm/@riotjs/compiler.svg?style=flat-square
|
||
|
|
[npm-url]: https://npmjs.org/package/@riotjs/compiler
|
||
|
|
[coverage-image]: https://img.shields.io/coveralls/riot/compiler/main.svg?style=flat-square
|
||
|
|
[coverage-url]: https://coveralls.io/r/riot/compiler?branch=main
|
||
|
|
[codeclimate-image]: https://api.codeclimate.com/v1/badges/37de24282e8d113bb0cc/maintainability
|
||
|
|
[codeclimate-url]: https://codeclimate.com/github/riot/compiler
|