README
babel-plugin-transform-jsx-to-htm
This plugin converts JSX into Tagged Templates that work with htm.
// INPUT:
const Foo = () => <h1>Hello</h1>
// OUTPUT:
const Foo = () => html`<h1>Hello</h1>`
Installation
Grab it from npm:
npm i -D babel-plugin-transform-jsx-to-htm
... then add it to your Babel config (eg: .babelrc
):
"plugins": [
"babel-plugin-transform-jsx-to-htm"
]
Options
The following options are available:
Option | Type | Default | Description |
---|---|---|---|
tag |
String | "html" |
The "tag" function to prefix [Tagged Templates] with. |
import |
false |String|Object |
false |
Auto-import a tag function, off by default. See Auto-importing a tag function for an example. |
Options are passed to a Babel plugin using a nested Array:
"plugins": [
["babel-plugin-transform-jsx-to-htm", {
"tag": "$html"
}]
]
Auto-importing the tag
Want to automatically import html
into any file that uses JSX?
Just use the import
option:
"plugins": [
["babel-plugin-transform-jsx-to-htm", {
"tag": "$html",
"import": {
// the module to import:
"module": "htm/preact",
// a named export to use from that module:
"export": "html"
}
}]
]
The above will produce files that look like:
import { html as $html } from 'htm/preact';
export default $html`<h1>hello</h1>`
License
Apache 2