Pure-lit NPM | npm.io

pure-lit

lit with pure functions.

Install

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>

Getting started

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.

Adding some state

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>`
});

lit-element lit-elements functional component

lit-element-effect lit-element-state-decoupler

@infinitebrahmanuniverse/nolb-pur @everything-registry/sub-chunk-2495 html-presentations @zalastax/nolb-pur

6 months ago

5 months ago

6 months ago

6 months ago