Skip to content

Commit 1eaff8c

Browse files
committed
Add a rudimentary doc for babel-plugin-transform-jsx-to-htm's import option
1 parent 89cb9f7 commit 1eaff8c

File tree

1 file changed

+13
-16
lines changed
  • packages/babel-plugin-transform-jsx-to-htm

1 file changed

+13
-16
lines changed

packages/babel-plugin-transform-jsx-to-htm/README.md

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# babel-plugin-transform-jsx-to-htm
22

3-
This plugin converts JSX into Tagged Templates that work with things like [htm] and [lit-html].
3+
This plugin converts JSX into Tagged Templates that work with [htm].
44

55
```js
66
// INPUT:
@@ -32,7 +32,8 @@ The following options are available:
3232

3333
| Option | Type | Default | Description
3434
|--------|---------|----------|------------
35-
| `tag` | String | `"html"` | The "tag" function to prefix [Tagged Templates] with.<br> _Useful when [Auto-importing a tag function](#auto-importing-the-tag)._
35+
| `tag` | String | `"html"` | The "tag" function to prefix [Tagged Templates] with.
36+
| `import` | `false`\|String\|Object | `false` | Auto-import a tag function, off by default.<br>_See [Auto-importing a tag function](#auto-importing-the-tag) for an example._
3637

3738
Options are passed to a Babel plugin using a nested Array:
3839

@@ -46,29 +47,27 @@ Options are passed to a Babel plugin using a nested Array:
4647

4748
## Auto-importing the tag
4849

49-
Want to automatically import `html` into any file that uses JSX? It works the same as with JSX!
50-
Just use [babel-plugin-jsx-pragmatic]:
50+
Want to automatically import `html` into any file that uses JSX?
51+
Just use the `import` option:
5152

5253
```js
5354
"plugins": [
54-
["babel-plugin-jsx-pragmatic", {
55-
// the module to import:
56-
"module": "lit-html",
57-
// a named export to use from that module:
58-
"export": "html",
59-
// what to call it locally: (should match your "tag" option)
60-
"import": "$$html"
61-
}],
6255
["babel-plugin-transform-jsx-to-htm", {
63-
"tag": "$$html"
56+
"tag": "$$html",
57+
"import": {
58+
// the module to import:
59+
"module": "htm/preact",
60+
// a named export to use from that module:
61+
"export": "html"
62+
}
6463
}]
6564
]
6665
```
6766

6867
The above will produce files that look like:
6968

7069
```js
71-
import { html as $$html } from 'lit-html';
70+
import { html as $$html } from 'htm/preact';
7271

7372
export default $$html`<h1>hello</h1>`
7473
```
@@ -78,5 +77,3 @@ export default $$html`<h1>hello</h1>`
7877
Apache 2
7978

8079
[htm]: https://github.com/developit/htm
81-
[lit-html]: https://github.com/polymer/lit-html
82-
[babel-plugin-jsx-pragmatic]: https://github.com/jmm/babel-plugin-jsx-pragmatic

0 commit comments

Comments
 (0)