@wirestate/lit [monorepo] [docs]

Lit bindings for Wirestate containers.

Use this package to provide a Wirestate container through Lit context, inject services into elements, and register element-scoped event, command, and query handlers.

Install

npm install @wirestate/core @wirestate/lit

Start

import { Injectable } from "@wirestate/core";
import { ContainerProvider, injection, provideContainer } from "@wirestate/lit";
import { LitElement, html } from "lit";
import { customElement } from "lit/decorators.js";

@Injectable()
class CounterService {
  public count = 0;
}

@customElement("my-app")
class MyApp extends LitElement {
  @provideContainer({ config: { bindings: [CounterService] } })
  private provider!: ContainerProvider;

  protected render() {
    return html`<counter-view></counter-view>`;
  }
}

@customElement("counter-view")
class CounterView extends LitElement {
  @injection(CounterService)
  private counter!: CounterService;

  protected render() {
    return html`<span>${this.counter.count}</span>`;
  }
}

What Is Included

This package connects services to Lit. For reactive rendering, use @wirestate/lit-signals or @wirestate/lit-mobx.

Learn More

• Lit guide
• API reference

License

MIT