https://github.com/julien-r44/lit-valtio-state

🏪 A simple state management library for Lit components
https://github.com/julien-r44/lit-valtio-state

lit state-management store valtio web-components

Last synced: about 1 month ago
JSON representation

🏪 A simple state management library for Lit components

• Host: GitHub
• URL: https://github.com/julien-r44/lit-valtio-state
• Owner: Julien-R44
• License: mit
• Created: 2022-07-20T11:11:54.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-26T19:44:50.000Z (over 1 year ago)
• Last Synced: 2024-10-29T16:58:53.545Z (about 2 months ago)
• Topics: lit, state-management, store, valtio, web-components
• Language: TypeScript
• Homepage:
• Size: 169 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

        


  



🏪 A simple state management library for [Lit](https://lit.dev), built on top of [valtio](https://valtio.pmnd.rs/).

## Installation

  

```sh

pnpm add @julr/lit-valtio-state

```

## Usage

First you have to define a state, eg. in `stores/app.ts` : 

```ts

import { defineState } from '@julr/lit-valtio-state'

export const appState = defineState({

  count: 0,

  name: 'John Doe'

})

```

Then you can simply use it in your components as follows : 

```ts

import { LitElement, html } from 'lit'

import { customElement } from 'lit/decorators.js'

import { useState } from '@julr/lit-valtio-state'

import { appState } from '@/stores/app'

@customElement('my-lit-component')

export class MyLitComponent extends LitElement {

  private state = useState(this, appState)

  render() {

    return html`

      


        
${this.state.name}

        
${this.state.count}

         this.state.count++}>Increment

      

    `

  }

}

```


## How it works ? 

This is made possible by [Javascript proxies](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Proxy) and [Lit controllers](https://lit.dev/docs/composition/controllers/)

Basically, the state is a proxy, and the `useState` will create a Lit controller that will subscribe to the state changes. When a change is made, we will ask the host of the controller (so your Lit component), to make a new rendering.

## License

[MIT](./LICENSE.md) License © 2022 [Julien Ripouteau](https://github.com/Julien-R44)