Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md Readme updates for 2.0 Dec 20, 2018
index.mjs Add `variableArity:false` option. Dec 20, 2018
package.json

README.md

babel-plugin-htm

A Babel plugin that compiles htm syntax to hyperscript, React.createElement, or just plain objects.

Usage

Basic usage:

[
  ["htm", {
    "pragma": "React.createElement"
  }]
]
// input:
html`<div id="foo">hello ${you}</div>`

// output:
React.createElement("div", { id: "foo" }, "hello ", you)

options

pragma

The target "hyperscript" function to compile elements to (see Babel docs). Defaults to: "h".

tag=html

By default, babel-plugin-htm will process all Tagged Templates with a tag function named html. To use a different name, use the tag option in your Babel configuration:

{"plugins":[
  ["babel-plugin-htm", {
    "tag": "myCustomHtmlFunction"
  }]
]}

useBuiltIns=false

babel-plugin-htm transforms prop spreads (<a ...${b}>) into Object.assign() calls. For browser support reasons, Babel's standard _extends helper is used by default. To use native Object.assign directly, pass {useBuiltIns:true}.

variableArity=true

By default, babel-plugin-htm transpiles to the same output as JSX would, which assumes a target function of the form h(type, props, ...children). If, for the purposes of optimization or simplification, you would like all calls to h() to be passed exactly 3 arguments, specify {variableArity:false} in your Babel config:

html`<div />`  // h('div', null, [])
html`<div a />`  // h('div', { a: true }, [])
html`<div>b</div>`  // h('div', null, ['b'])
html`<div a>b</div>`  // h('div', { a: true }, ['b'])

pragma=false (experimental)

Setting pragma to false changes the output to be plain objects instead of h() function calls:

// input:
html`<div id="foo">hello ${you}</div>`
// output:
{ tag:"div", props:{ id: "foo" }, children:["hello ", you] }

monomorphic (experimental)

Like pragma=false but converts all inline text to objects, resulting in the same object shape being used:

// input:
html`<div id="foo">hello ${you}</div>`
// output:
{ type: 1, tag:"div", props:{ id: "foo" }, text: null, children:[
  { type: 3, tag: null, props: null, text: "hello ", children: null },
  you
] }