babel-plugin-transform-jsx-lit-html
v0.1.0
Published
Transform JSX to lit-html template literal
Downloads
40
Readme
babel-plugin-transform-jsx-lit-html
Example
In
const renderProfile = user => <>
<img class$="profile" src={user.avatarUrl} />
<h3>{user.firstName} {user.lastName}</h3>
<button on-click={() => user.addFriend()}>Add friend</button>
</>;
Out
const renderProfile = user => html`
<img class="profile" .src=${user.avatarUrl}>
<h3>${user.firstName} ${user.lastName}</h3>
<button @click=${() => user.addFriend()}>Add friend</button>
`;
Props syntax
Regular JSX props map to lit-html property setters.
To set an attribute use attr$
syntax.
To set an event handler use on-event
syntax.
// In
const input = <input type$="text" value={val} on-change={handleChange}/>;
// Out
const input = html`<input type="text" .value=${val} @change=${handleChange}>`;
Installation
npm install --save-dev babel-plugin-transform-jsx-lit-html
Usage
Via .babelrc
{
"plugins": ["transform-jsx-lit-html"]
}
Via CLI
babel --plugins transform-jsx-lit-html script.js