babel-plugin-transform-jsx-to-tt
v0.5.0
The babel plugin converts JSX into Tagged templates
0/weekUpdated 2 years agoMITUnpacked: 36.8 KB
Published by Denis Sumbaev
npm install babel-plugin-transform-jsx-to-tt
babel-plugin-transform-jsx-to-tt
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.
- Examples
- Installation
- Usage
- Options
---
Examples
In `` Out ` Options
Attributes in lit-html
jsx`
const baz = (
);js
const baz = html
;`json`
{
"tag": "html",
"attributes": [
{
"preset": "lit-html"
}
]
}
In Bar.jsx ` Hello, World! index.jsx ` const BarElement = Bar.define('bar-bar'); const define = (tag) => {}; const FooElement = define('foo-foo'); const baz = ( Hello, World! Hello, World! Out const define = (tag) => {}; const FooElement = define('foo-foo'); Hello, World! Hello, World!
Composition
jsx`
export class Bar {
static define = (tag) => (properties) => AbstractElement;
render() {
return
}
}jsx
import { Bar } from './Bar';
);
`js
import { Bar } from './Bar';
const BarElement = Bar.define('bar-bar');
const baz = html
;`
In ` export class Loader extends AbstractElement { constructor() { render() { const ElementLoader = Loader.define('a-a'); export class Converter extends AbstractElement { constructor() { setInterval(() => { render() { Out constructor() { render() { constructor() { render() { Options
Class component
jsx
import { AbstractElement } from 'abstract-element';
import litRender from 'abstract-element/render/lit';
static define = (tag) => (properties) => AbstractElement;
loading;
super(litRender, true);
}
return this.loading ? Loading 3 seconds, please... : That's a loaded content!;
}
}
loading = true;
super(litRender, true);
this.loading = !this.loading;
}, 3000);
}
return (
ā
);
}
}
`jsLoading 3 seconds, please...
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;
super(litRender, true);
}
return this.loading ? html : htmlThat's a loaded content!;
}
}
const ElementLoader = Loader.define('a-a');
export class Converter extends AbstractElement {
loading = true;
super(litRender, true);
setInterval(() => {
this.loading = !this.loading;
}, 3000);
}
return htmlā;`
}
}json`
{
"tag": "html",
"import": {
"module": "lit-html",
"export": "html"
},
"attributes": [
{
"preset": "lit-html"
}
]
}
Most examples in abstract-element demo.
---
Installation
`sh`
$ npm install babel-plugin-transform-jsx-to-tt
---
Usage
$3
.babelrc.json
`json`
{
"plugins": ["babel-plugin-transform-jsx-to-tt"]
}
$3
`sh`
$ babel --plugins babel-plugin-transform-jsx-to-tt script.js
$3
`javascript`
require('babel-core').transform('code', {
plugins: ['babel-plugin-transform-jsx-to-tt'],
});
---
Options
| 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:
`js``
"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": [
".*"
]
}
]
}]
]