JSPM – @riotjs/compiler@4.0.0-beta.3

Package Exports

@riotjs/compiler
@riotjs/compiler/dist/compiler
@riotjs/compiler/src/utils/compose

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@riotjs/compiler) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 pug.compile(code)
})

// your compiler output will pass from here
registerPostprocessor(function(code, { options }) {
  const { file } = options
  console.log('your file path is:', file)
  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 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

<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

@riotjs/compiler