Vielzeug

Debugging Transitions ​

Problem ​

You need development-time visibility into committed snapshots and state history.

Solution ​

Subscribe to an actor's committed snapshots at the application boundary for history.

ts
import { defineMachine } from '@vielzeug/clockwork';

type Event = { type: 'SUBMIT' } | { type: 'PAY' };
const machine = defineMachine<Record<string, never>, Event>()({
  initial: 'pending',
  states: {
    pending: { on: { SUBMIT: { target: 'confirmed' } } },
    confirmed: { on: { PAY: { target: 'paid' } } },
    paid: {},
  },
});

const actor = machine.createActor();
const history: string[] = [];
const stop = actor.subscribe((snapshot) => history.push(snapshot.state));

actor.send({ type: 'SUBMIT' });
actor.send({ type: 'PAY' });
console.log(actor.snapshot.state); // 'paid'
console.log(history); // ['confirmed', 'paid']

stop();
actor.dispose();

Pitfalls ​

  • actor.subscribe() observes snapshots only; keep send and error diagnostics at your application boundary.
  • Clockwork has no built-in trace buffer; keep history in your tooling boundary.