@xstate/fsm | Npm Package Usage Trend

@xstate/fsm

XState for finite state machines

🌟 Show real-time usage chart on @xstate/fsm's README.md, just copy the code below.

## Usage Trend
[![Usage Trend of @xstate/fsm](https://npm-compare.com/img/npm-trend/THREE_YEARS/@xstate/fsm.png)](https://npm-compare.com/@xstate/fsm#timeRange=THREE_YEARS)

🌟 Show GitHub stars trend chart on @xstate/fsm's README.md, just copy the code below.

## GitHub Stars Trend
[![GitHub Stars Trend of @xstate/fsm](https://npm-compare.com/img/github-trend/@xstate/fsm.png)](https://npm-compare.com/@xstate/fsm)

Package	Downloads	Stars	Size	Issues	Publish	License

@xstate/fsm	2,077,724	29,001	57.1 kB	157	2 years ago	MIT

@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/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();