babel-plugin-transform-jsx-to-htm
v2.2.0
Published
Babel plugin to compile JSX to Tagged Templates.
Downloads
141
Maintainers
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