zustand-lit

A zustand adapter for lit

Zustand is a lightweight state manager for javascript applications

Install

npm install zustand zustand-lit

Usage

There are two ways to use store adapter:

• Class mixin
• Class decorator
• Class field decorator [deprecated]

Note: You have to choose one style you prefer and don't mix them. For more details you also can take a look at unit tests example

[1] Create a store object

// app-store.ts
import { createStore } from 'zustand/vanilla';

export interface AppState {
  count: number;
  setCount: (count: number) => void;
}

export const appStore = createStore<AppState>(set => ({
  count: 0,
  setCount: count => set({ count }),
}));

[2] Use one of availables bridges

[2.1] connect mixin

import { LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { connect } from 'zustand-lit';
import { appStore } from './app-store.ts'; 

@customElement('app-component')
export class AppComponent extends connect(LitElement, appStore) {
  // ...
}

Get access to store object through $state property

this.$state.count;
this.$state.setCount(1);

[2.2] observe decorator

import { LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { observe } from 'zustand-lit';
import { appStore } from './app-store.ts'; 

@customElement('app-component')
@observe(appStore)
export class AppComponent extends LitElement { }

Read the state

appStore.getState().count;
appStore.getState().setCount(1);

[2.3][deprecated] subscribe decorator

import { LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { subscribe } from 'zustand-lit';
import { appStore } from './app-store.ts'; 

@customElement('app-component')
export class AppComponent extends LitElement {
  @subscribe 
  readonly appStore = appStore;
}

Read the state

this.appStore.getState().count;
this.appStore.getState().setCount(1);

License

This project is licensed under the MIT License - see the LICENSE file for details