@wirestate/lit-signals [monorepo] [docs]

Preact Signals Lit reactivity binding for Wirestate Lit services.

Use this package together with @wirestate/signals: create signal state with @wirestate/signals, then re-render Lit elements with SignalWatcher or the watch() directive.

Install

npm install @wirestate/core @wirestate/lit @wirestate/signals @wirestate/lit-signals

Start

import { Injectable } from "@wirestate/core";
import { Signal, signal } from "@wirestate/signals";

@Injectable()
class CounterService {
  public readonly count: Signal<number> = signal(0);

  public increment(): void {
    this.count.value += 1;
  }
}

In a Lit element:

import { injection } from "@wirestate/lit";
import { SignalWatcher } from "@wirestate/lit-signals";
import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";

@customElement("w-counter")
export class Counter extends SignalWatcher(LitElement) {
  @injection(CounterService)
  private readonly counter!: CounterService;

  public render() {
    return html`<button @click=${() => this.counter.increment()}>${this.counter.count.value}</button>`;
  }
}

The same CounterService definition powers React components through @wirestate/react-signals.

What Is Included

• Re-exports from @lit-labs/preact-signals (SignalWatcher, watch, withWatch, html, svg).

Signal definitions (signal, computed, effect, and others) live in @wirestate/signals.

Learn More

• Lit Signals guide
• API reference
• lit-labs/preact-signals docs

License

MIT