lit-jsx

Write lit-html template literal with JSX

---

---

Features

• Write template literal in lit-html with JSX
• Developer can receive the benefit of @types/react
• Simple API

Installation

npm install babel-plugin-lit-jsx

or

yarn add babel-plugin-lit-jsx

Usage

1. Add babel-plugin-lit-jsx to plugins in babel configuration file.

{
    "presets" : [...],
    // add babel-pplugin-lit-jsx plugin
    "plugins" : [..., "babel-plugin-lit-jsx"]
}

2. Write Functional Component which doesn't depend on React.

ex)

import { BlogContent } from "./BlogContent";
import { render } from "lit-html";

interface Props {
    title: string;
    author: string;
    date: string;
    content: string;
}

const BlogPost = ({ title, author, date, content }: Props) => {
    return <div className="post"><main>
        <div className="title">{title}</div>
        <div className="author">{author}</div>
        <date className="date">{date}</date>
        <BlogContent content={content} />
    </main></div>
}

render(<BlogPost />, document.getElementById("_app"!))