Ready to take your JavaScript development to the next level? Meet npm Enterprise - the ultimate in enterprise JavaScript. Learn more »

babel-plugin-htm

2.1.0 • Public • Published

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

install

npm i babel-plugin-htm

Downloadsweekly downloads

19

version

2.1.0

license

Apache-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability