lit with pure functions.
npm install pure-lit
or add it to your page as module like this:
<script type="module" src="https://unpkg.com/pure-lit@latest?module"></script>
The quickest way of getting started is by using JavaScript modules.
Create a file index.html that looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Awesome pure-lit</title>
<script type="module">
import { html } from "https://unpkg.com/lit@latest?module";
import { pureLit } from "https://unpkg.com/pure-lit@latest?module";
pureLit(
"hello-you",
async ({ who }) => {
return html`<div>Hello ${who}!</div>`;
},
{
defaults: { who: "" },
}
);
</script>
</head>
<body>
<hello-you who="me"></hello-you>
</body>
</html>Open it in the browser. Done.
pureLit exports the hooks from lit-element-state-decoupler and lit-element-effect which you can use to manage your state inside the functional components.
You can import them via
import { pureLit, useState, useReducer, useWorkflow, useEffect, useOnce } from "pure-lit";and then use them like this:
pureLit("hello-world", (element) => {
const counter = useState(element, 0);
return html`<button @click="${() => counter.set(counter.get() + 1)}">You clicked me ${counter.get()} times!</button>`
});