xstate/fsm - Ability to get most recent event in callback/state object

[timothyallan]

I really want to use xstate/fsm as I don't need any of the bigger xstate features. However, I do need to know when an event is fired, not just a state changed. Right now I'm looking at making an 'event' field in the context and populating it on each event.

It'd sure be nice to have something like xstates onTransition which brings back the state + the event in the listener, a field in the state itself, or at least some way to see what the event was.

[harshagarwalnyu]

@xstate/fsm doesn't expose the triggering event in onTransition — it only returns the new state. Two clean workarounds:

Option 1 — Store event in context (formalized):

import { createMachine, assign, interpret } from '@xstate/fsm';

const machine = createMachine({
  initial: 'idle',
  context: { lastEvent: null as string | null },
  states: {
    idle: {
      on: {
        FETCH: {
          target: 'loading',
          actions: [assign({ lastEvent: (_ctx, event) => event.type })],
        },
      },
    },
    loading: {
      on: {
        SUCCESS: {
          target: 'idle',
          actions: [assign({ lastEvent: (_ctx, event) => event.type })],
        },
        FAIL: {
          target: 'idle',
          actions: [assign({ lastEvent: (_ctx, event) => event.type })],
        },
      },
    },
  },
});

const service = interpret(machine).start();
service.subscribe((state) => {
  console.log('State:', state.value, '| Last event:', state.context.lastEvent);
});
service.send('FETCH');
// State: loading | Last event: FETCH

Option 2 — Wrap send to capture externally:

let lastEvent: string | null = null;
const _send = service.send.bind(service);
service.send = (event) => {
  lastEvent = typeof event === 'string' ? event : event.type;
  return _send(event);
};

service.subscribe((state) => {
  console.log(state.value, lastEvent);
});

Option 3 — Use full xstate (recommended if complexity grows)

Full xstate exposes state.event natively in onTransition:

service.onTransition((state) => {
  console.log('Triggered by:', state.event.type);
});

@xstate/fsm is intentionally minimal (< 1KB). If you need events in transitions frequently, the full xstate is likely the right tool — the bundle overhead is worth it once you need this kind of introspection.