babel-plugin-htm

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

Usage

In your Babel configuration (.babelrc, babel.config.js, "babel" field in package.json, etc), add the plugin:

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

`js
// input:
html

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

options

$3

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

$3

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:

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

$3

Auto-import the pragma function, off by default.

#### false (default)

Don't auto-import anything.

#### String

Import the pragma like import {} from ''.

With Babel config:
`js
"plugins": [
["babel-plugin-htm", {
"tag": "$$html",
"import": "preact"
}]
]
`

`js
import { html as $$html } from 'htm/preact';

export default $$html

`js
import { h } from 'preact';
import { html as $$html } from 'htm/preact';

export default h("div", { id: "foo" }, "hello ", you)
`

#### {module: String, export: String}

Import the pragma like import { as } from ''.

With Babel config:
`js
"plugins": [
["babel-plugin-htm", {
"pragma": "React.createElement",
"tag": "$$html",
"import": {
// the module to import:
"module": "react",
// a named export to use from that module:
"export": "default"
}
}]
]
`

`js
import { html as $$html } from 'htm/react';

export default $$html

`js
import React from 'react';
import { html as $$html } from 'htm/react';

export default React.createElement("div", { id: "foo" }, "hello ", you)
`

$3

babel-plugin-htm transforms prop spreads () 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}.

$3

babel-plugin-htm transforms prop spreads () into { ...b, x: 'y' } object spread syntax. For browser support reasons, Babel's standard _extends helper is used by default. To use object spread syntax, pass {useNativeSpread:true}. This option takes precedence over the useBuiltIns option.

$3

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:

`js
html