Package Exports
- @xstate/fsm
- @xstate/fsm/es/index.js
- @xstate/fsm/lib/index.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@xstate/fsm) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
@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 | ❌ | ✅ |
| Wildcard 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/fsmUsage (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();