@bemedev/app-solidjs

@bemedev/app-solidjs

SolidJS reactive signal binding for @bemedev/app state machines.

@bemedev/app-solidjs provides a lightweight integration to track and select state from a @bemedev/app interpreter service inside SolidJS reactive contexts.

Installation

npm install @bemedev/app-solidjs
# or
pnpm add @bemedev/app-solidjs

Requirements: Node.js ≥ 24 · @bemedev/app ≥ 1.2.0 · SolidJS ≥ 1.9.0

Quick Start

import { interpret } from '@bemedev/app';
import { useService } from '@bemedev/app-solidjs';
import { createRoot } from 'solid-js';
import { myMachine } from './my.machine';

const service = interpret(myMachine, { context: { count: 0 } });
service.start();

createRoot(dispose => {
  // 1. Select a specific slice of context reactively
  const count = useService(service, s => s.context.count);

  // 2. Or track the active state value reactively
  const stateValue = useService(service, s => s.value);

  // 3. Or track the whole state object
  const state = useService(service);

  // Example consumption in SolidJS
  console.log(count()); // -> 0
  console.log(stateValue()); // -> "idle"

  dispose();
});

API Reference

useService(service, selector?)

Creates a SolidJS signal that updates whenever the interpreter transitions, using deep comparison to prevent unnecessary reactive notifications.

Returns a SolidJS Accessor<T> containing the selected state or slice.

License

MIT