@wirestate/mobx [monorepo] [docs]

Framework-agnostic MobX exports for Wirestate services.

Use this package to create observable services once and share them across React and Lit applications. Pair it with @wirestate/react-mobx to render React components or @wirestate/lit-mobx to render Lit elements.

Install

npm install @wirestate/core @wirestate/mobx

Start

import { Injectable } from "@wirestate/core";
import { Action, Observable, makeObservable } from "@wirestate/mobx";

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

  public constructor() {
    makeObservable(this);
  }

  @Action()
  public increment(): void {
    this.count++;
  }
}

Alternatively, register ObservablePlugin on the root container. It calls makeObservable for every activated service that carries MobX decorators, so services skip the constructor call.

import { Container } from "@wirestate/core";
import { ObservablePlugin } from "@wirestate/mobx";

const container = new Container({ bindings: [CounterService], plugins: [new ObservablePlugin()] });

The same CounterService can now be consumed from a React component (via @wirestate/react-mobx) or a Lit element (via @wirestate/lit-mobx) without changes.

What Is Included

• Re-exports from mobx.
• Decorator aliases: Observable, ShallowObservable, RefObservable, DeepObservable, Action, BoundAction, and Computed.
• ObservablePlugin: optional shortcut that calls makeObservable for activated services.

Learn More

• API reference
• MobX docs

License

MIT