https://github.com/matthiaskainer/pure-lit

Register your lit-elements as a pure functions.
https://github.com/matthiaskainer/pure-lit

html javascript lit lit-html web-component web-components

Last synced: about 1 month ago
JSON representation

Register your lit-elements as a pure functions.

• Host: GitHub
• URL: https://github.com/matthiaskainer/pure-lit
• Owner: MatthiasKainer
• License: isc
• Created: 2020-07-04T18:36:12.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-09-25T15:30:54.000Z (about 2 months ago)
• Last Synced: 2024-10-15T17:34:33.189Z (about 1 month ago)
• Topics: html, javascript, lit, lit-html, web-component, web-components
• Language: TypeScript
• Homepage: https://pure-lit.org
• Size: 1.82 MB
• Stars: 25
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Contributing: CONTRIBUTING.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# pure-lit

[![Version](https://img.shields.io/npm/v/pure-lit?style=for-the-badge)](https://www.npmjs.com/package/pure-lit)

[![Size](https://img.shields.io/bundlephobia/minzip/pure-lit?style=for-the-badge)](https://bundlephobia.com/result?p=pure-lit)

[![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/pure-lit?style=for-the-badge)](https://snyk.io/test/github/MatthiasKainer/pure-lit?targetFile=package.json)

[![dependencies](https://img.shields.io/badge/dependencies-0-brightgreen?style=for-the-badge)](https://bundlephobia.com/result?p=pure-lit)

![Statements](docs/badges/badge-statements.svg)

![Branch](docs/badges/badge-branches.svg)

![Functions](docs/badges/badge-functions.svg)

![Lines](docs/badges/badge-lines.svg)

> [lit](https://lit.dev/) with pure functions.

## Install

`npm install pure-lit`

or add it to your page as module like this:

``

## Getting started

[![pure-lit.org](docs/img/documentation-button.png)](https://pure-lit.org)

The quickest way of getting started is by using JavaScript modules.

Create a file `index.html` that looks like this:

```html

  

    

    Awesome pure-lit

    

      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: "" },

        }

      );

    

  

  

    

  

```

Open it in the browser. Done.

## Adding some state 

pureLit exports the hooks from [lit-element-state-decoupler](https://github.com/MatthiasKainer/lit-element-state-decoupler) and [lit-element-effect](https://github.com/MatthiasKainer/lit-element-effect) which you can use to manage your state inside the functional components.

You can import them via

```typescript

import { pureLit, useState, useReducer, useWorkflow, useEffect, useOnce } from "pure-lit";

```

and then use them like this:

```typescript

pureLit("hello-world", (element) => {

    const counter = useState(element, 0);

    return html` counter.set(counter.get() + 1)}">You clicked me ${counter.get()} times!`

});

```