For Babel 7 only
Transform JSX to template literal, optionally tagged.
Follows JSX conventions for whitespace.
// From
<ul>
{items.map(item => <li id={item.id}>{item.name}</li>)}
</ul>
// To
html`<ul>${
items.map(item => html`<li id="${item.id}">${item.name}</li>`)
}</ul>`"plugins": [
["jsx-to-template-literal", {
"tag": "html",
"lowercaseEventNames": true,
"eventNamesPrefix": "on-"
}]
]Components are transformed to function calls, called with a properties object and children.
// From
<Component attribute={'value'}>
<span></span>
</Component>
// To
html`${Component({
attribute: 'value'
}, html`<span></span>`)}`- Spread attributes
- Spread children
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent