$
This commit is contained in:
112
node_modules/@riotjs/compiler/README.md
generated
vendored
Normal file
112
node_modules/@riotjs/compiler/README.md
generated
vendored
Normal file
@@ -0,0 +1,112 @@
|
||||
[![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
|
Reference in New Issue
Block a user