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.

107 lines
3.4 KiB

4 years ago
  1. [![Build Status][travis-image]][travis-url]
  2. [![Issue Count][codeclimate-image]][codeclimate-url]
  3. [![Coverage Status][coverage-image]][coverage-url]
  4. [![NPM version][npm-version-image]][npm-url]
  5. [![NPM downloads][npm-downloads-image]][npm-url]
  6. [![MIT License][license-image]][license-url]
  7. ## Important
  8. This compiler will not work with older Riot.js versions.
  9. It's designed to work with Riot.js > 4.0.0.
  10. For Riot.js < 4.0.0 please check the [v3](https://github.com/riot/compiler/tree/v3) branch
  11. ## Installation
  12. ```
  13. npm i @riotjs/compiler -D
  14. ```
  15. ## Usage
  16. The riot compiler can compile only strings:
  17. ```js
  18. import { compile } from '@riotjs/compiler'
  19. const { code, map } = compile('<p>{hello}</p>')
  20. ```
  21. You can compile your tags also using the new `registerPreprocessor` and `registerPostprocessor` APIs for example:
  22. ```js
  23. import { compiler, registerPreprocessor, registerPostprocessor } from '@riotjs/compiler'
  24. import pug from 'pug'
  25. import buble from 'buble'
  26. // process your tag template before it will be compiled
  27. registerPreprocessor('template', 'pug', function(code, { options }) {
  28. const { file } = options
  29. console.log('your file path is:', file)
  30. return {
  31. code: pug.render(code),
  32. // no sourcemap here
  33. map: null
  34. }
  35. })
  36. // your compiler output will pass from here
  37. registerPostprocessor(function(code, { options }) {
  38. const { file } = options
  39. console.log('your file path is:', file)
  40. // notice that buble.transform returns {code, map}
  41. return buble.transform(code)
  42. })
  43. const { code, map } = compile('<p>{hello}</p>', {
  44. // specify the template preprocessor
  45. template: 'pug'
  46. })
  47. ```
  48. ## API
  49. ### compile(string, options)
  50. #### @returns `<Promise>{ code, map }` output that can be used by Riot.js
  51. - *string*: is your tag source code
  52. - *options*: the options should contain the `file` key identifying the source of the string to compile and
  53. the `template` preprocessor to use as string
  54. Note: specific preprocessors like the `css` or the `javascript` ones can be enabled simply specifying the `type` attribute
  55. in the tag source code for example
  56. ```html
  57. <my-tag>
  58. <style type='scss'>
  59. // ...
  60. </style>
  61. </my-tag>
  62. ```
  63. ### registerPreprocessor(type, id, preprocessorFn)
  64. #### @returns `Object` containing all the preprocessors registered
  65. - *type*: either one of `template` `css` or `javascript`
  66. - *id*: unique preprocessor identifier
  67. - *preprocessorFn*: function receiving the code as first argument and the current options as second
  68. ### registerPostprocessor(postprocessorFn)
  69. #### @returns `Set` containing all the postprocessors registered
  70. - *postprocessorFn*: function receiving the compiler output as first argument and the current options as second
  71. [travis-image]: https://img.shields.io/travis/riot/compiler.svg?style=flat-square
  72. [travis-url]: https://travis-ci.org/riot/compiler
  73. [license-image]: https://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
  74. [license-url]: LICENSE
  75. [npm-version-image]: https://img.shields.io/npm/v/@riotjs/compiler.svg?style=flat-square
  76. [npm-downloads-image]: https://img.shields.io/npm/dm/@riotjs/compiler.svg?style=flat-square
  77. [npm-url]: https://npmjs.org/package/@riotjs/compiler
  78. [coverage-image]: https://img.shields.io/coveralls/riot/compiler/master.svg?style=flat-square
  79. [coverage-url]: https://coveralls.io/r/riot/compiler?branch=master
  80. [codeclimate-image]: https://api.codeclimate.com/v1/badges/37de24282e8d113bb0cc/maintainability
  81. [codeclimate-url]: https://codeclimate.com/github/riot/compiler