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

Basic usage:

[
  ["htm", {
    "pragma": "React.createElement"
  }]
]

// input:
html`<div id="foo">hello ${you}</div>`

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

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

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"
  }]
]}

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}.

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'])

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] }

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
] }