babel-plugin-transform-jsx-lit-html
Example
In
const renderProfile = <> <img class$="profile" src=useravatarUrl /> <h3>userfirstName userlastName</h3> <button on-click= user>Add friend</button></>;
Out
const renderProfile = html` user.addFriend()}>Add friend`;
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.
// Inconst input = <input type$="text" value=val on-change=handleChange/>;// Outconst input = html``;
Installation
npm install --save-dev babel-plugin-transform-jsx-lit-html
Usage
.babelrc
Via
Via CLI
babel --plugins transform-jsx-lit-html script.js