This is a babel plugin to converts JSX into Tagged Templates
That can work with hyperHTML, lit-html or some other libraries to rendering templates to DOM.
Attributes in lit-html
In
const baz = (
<div>
<li attr1="A">First item</li>
<li attr2="B">Second item</li>
<li attr3={"C"}>Third item</li>
<li class="main-colour">Third item</li>
<li hidden={true}>Third item</li>
<li onclick={() => console.log('test')}>Third item</li>
<button color="blue" shadowSize={2} shadowSizeSum={2 + 1 + 1}>
<small id={Date.now()}>Click Me</small>
</button>
<my-comp message={'hello world'}></my-comp>
<my-text-box autocomplete={true} />
</div>
);
Out
const baz = html`<div>
<li attr1="A">First item</li>
<li attr2="B">Second item</li>
<li .attr3=${"C"}>Third item</li>
<li class="main-colour">Third item</li>
<li ?hidden=${true}>Third item</li>
<li @click=${() => console.log('test')}>Third item</li>
<button color="blue" .shadowSize=${2} .shadowSizeSum=${2 + 1 + 1}>
<small id=${Date.now()}>Click Me</small>
</button>
<my-comp .message=${'hello world'}></my-comp>
<my-text-box .autocomplete=${true}></my-text-box>
</div>`;
Options
{
"tag": "html",
"attributes": [
{
"preset": "lit-html"
}
]
}
Composition
In
Bar.jsx
export class Bar {
static define = (tag) => (properties) => AbstractElement;
render() {
return <p>Hello, World!</p>;
}
}
index.jsx
import { Bar } from './Bar';
const BarElement = Bar.define('bar-bar');
const define = (tag) => {};
const FooElement = define('foo-foo');
const baz = (
<div>
<p>Hello, World!</p>
<BarElement></BarElement>
<FooElement></FooElement>
<p>Hello, World!</p>
</div>
);
Out
import { Bar } from './Bar';
const BarElement = Bar.define('bar-bar');
const define = (tag) => {};
const FooElement = define('foo-foo');
const baz = html`<div>
<p>Hello, World!</p>
<bar-bar></bar-bar>
<foo-foo></foo-foo>
<p>Hello, World!</p>
</div>`;
Class component
In
import { AbstractElement } from 'abstract-element';
import litRender from 'abstract-element/render/lit';
export class Loader extends AbstractElement {
static define = (tag) => (properties) => AbstractElement;
loading;
constructor() {
super(litRender, true);
}
render() {
return this.loading ? <span>Loading 3 seconds, please...</span> : <span>That's a loaded content!</span>;
}
}
const ElementLoader = Loader.define('a-a');
export class Converter extends AbstractElement {
loading = true;
constructor() {
super(litRender, true);
setInterval(() => {
this.loading = !this.loading;
}, 3000);
}
render() {
return (
<div>
⌛<ElementLoader loading={this.loading}></ElementLoader>
</div>
);
}
}
Out
import { html } from 'lit-html';
import { AbstractElement } from 'abstract-element';
import litRender from 'abstract-element/render/lit';
export class Loader extends AbstractElement {
static define = (tag) => (properties) => AbstractElement;
loading;
constructor() {
super(litRender, true);
}
render() {
return this.loading ? html`<span>Loading 3 seconds, please...</span>` : html`<span>That's a loaded content!</span>`;
}
}
const ElementLoader = Loader.define('a-a');
export class Converter extends AbstractElement {
loading = true;
constructor() {
super(litRender, true);
setInterval(() => {
this.loading = !this.loading;
}, 3000);
}
render() {
return html`<div>⌛<a-a .loading=${this.loading}></a-a></div>`;
}
}
Options
{
"tag": "html",
"import": {
"module": "lit-html",
"export": "html"
},
"attributes": [
{
"preset": "lit-html"
}
]
}
Most examples in abstract-element demo.
$ npm install babel-plugin-transform-jsx-to-tt
.babelrc.json
{
"plugins": ["babel-plugin-transform-jsx-to-tt"]
}
$ babel --plugins babel-plugin-transform-jsx-to-tt script.js
require('babel-core').transform('code', {
plugins: ['babel-plugin-transform-jsx-to-tt'],
});
Option | Type | Default | Description |
---|---|---|---|
tag
|
String
|
"html"
|
The tagged function name. |
define
|
String
|
A function name for define Custom Element. The first argument of this function has to be a Custom Element name - String value. | |
import
|
{ module: string; export: string }
|
Add import for a tagged function. | |
attributes
|
Array<{prefix: string; attributes: string[]; replace?: string;} | { preset?: 'lit-html' | 'global' }>
|
Mapping to convert JSX attributes. | |
quotedAttributes
|
Boolean
|
false |
A property to force all attributes to be wrapped in quotes. |
These options could be passed to the Babel plugin using a nested array. A complex config example:
"plugins": [
["babel-plugin-transform-jsx-to-htm", {
"tag": "html",
"define": "defineElement",
"import": {
"module": "some-html-render",
"export": "html"
},
"attributes": [
{
"prefix": "",
"attributes": [
"on.*"
]
},
{
"preset": "global"
},
{
"prefix": "",
"attributes": [
"hidden",
"draggable",
"spellcheck"
]
},
{
"prefix": ".",
"attributes": [
".*"
]
}
]
}]
]