Skip to content

Latest commit

 

History

History
67 lines (48 loc) · 1.4 KB

README.md

File metadata and controls

67 lines (48 loc) · 1.4 KB

lit-jsx

Write lit-html template literal with JSX


https://twitter.com/Shinyaigeek


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"]
}
  1. 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"!))