babel-plugin-transform-jsx-lit-html

Transform JSX to lit-html template literal

Usage no npm install needed!

<script type="module">
  import babelPluginTransformJsxLitHtml from 'https://cdn.skypack.dev/babel-plugin-transform-jsx-lit-html';
</script>

README

babel-plugin-transform-jsx-lit-html

npm travis

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