New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →

Book a Demo Sign in

pure-lit

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

pure-lit

lit elements as functions

latest

npm

Version: 3.0.5

Version published: 2 years ago

Weekly downloads: 57

Maintainers: 0

Weekly downloads

Created: 6 years ago

Source

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

Keywords

FAQs

What is pure-lit?

Is pure-lit popular?

Is pure-lit well maintained?

Package last updated on 28 Aug 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install