@xstate/fsm

XState for finite state machines

Usage no npm install needed!

<script type="module">
  import xstateFsm from 'https://cdn.skypack.dev/@xstate/fsm';
</script>

README

@xstate/fsm


XState FSM
XState for Finite State Machines

This package contains a minimal, 1kb implementation of XState for finite state machines.

Features

@xstate/fsm XState
Finite states
Initial state
Transitions (object)
Transitions (string target)
Delayed transitions
Eventless transitions
Nested states
Parallel states
History states
Final states
Context
Entry actions
Exit actions
Transition actions
Parameterized actions
Transition guards
Parameterized guards
Spawned actors
Invoked actors
  • Finite states (non-nested)
  • Initial state
  • Transitions (object or strings)
  • Context
  • Entry actions
  • Exit actions
  • Transition actions
  • state.changed

If you want to use statechart features such as nested states, parallel states, history states, activities, invoked services, delayed transitions, transient transitions, etc. please use XState.

Quick start

Installation

npm i @xstate/fsm

Usage (machine)

import { createMachine } from '@xstate/fsm';

const toggleMachine = createMachine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: { on: { TOGGLE: 'active' } },
    active: { on: { TOGGLE: 'inactive' } }
  }
});

const { initialState } = toggleMachine;

const toggledState = toggleMachine.transition(initialState, 'TOGGLE');
toggledState.value;
const untoggledState = toggleMachine.transition(toggledState, 'TOGGLE');
untoggledState.value;
// => 'inactive'

Usage (service)

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

const toggleMachine = createMachine({});

const toggleService = interpret(toggleMachine).start();

toggleService.subscribe((state) => {
  console.log(state.value);
});

toggleService.send('TOGGLE');
toggleService.send('TOGGLE');
toggleService.stop();