Skip to content

Latest commit

 

History

History
151 lines (120 loc) · 5.96 KB

README.md

File metadata and controls

151 lines (120 loc) · 5.96 KB

jssm

A Javascript state machine with a simple API. Well tested, and typed with Flowtype. MIT license.

License Open issues Closed issues

Dependency status NSP status Travis status Coveralls status CodeClimate status

NPM version CDNjs version NPM downloads

TL;DR

Specify finite state machines with a brief syntax. Run them. Derive charts from them. Save and load states. Make factories. Impress friends and loved ones. Cure corns and callouses.

const traffic_light = sm`
  Red 'Proceed' -> Green 'Proceed' -> Yellow 'Proceed' -> Red;
`;

You could also write that as a piece of data, for when you're generating. That's ... a bit more verbose.

const traffic_light = new jssm.machine({

  initial_state : 'Red',

  transitions   : [
    { action: 'Proceed', from:'Green',  to:'Yellow' },
    { action: 'Proceed', from:'Yellow', to:'Red'    },
    { action: 'Proceed', from:'Red',    to:'Green'  }
  ]

});

In either case, you'll build an executable state machine.

// use with actions
traffic_light.state();              // 'Red'
traffic_light.action('Proceed');    // true
traffic_light.state();              // 'Green'
traffic_light.action('Proceed');    // true
traffic_light.state();              // 'Yellow'
traffic_light.action('Proceed');    // true
traffic_light.state();              // 'Red'

// use with transitions
traffic_light.transition('Yellow'); // false (lights can't go from red to yellow, only to green)
traffic_light.state();              // 'Red'
traffic_light.transition('Red');    // false (lights can't go from red to red, either)
traffic_light.state();              // 'Red'
traffic_light.transition('Green');  // true
traffic_light.state();              // 'Green'

Which you can see being hand-executed in the console here:



Why

Why state machines

Why this implementation

Quick Start

Terminology

Features

DSL

States

Transitions

Legal, main, and forced

Validators

State history

Automatic visualization

How to think in state machines

Example Machines

Door lock

Traffic lights

Basic three-state

RYG, Off, Flash-red, Flash-yellow

RYG, Off, Flash-red, Flash-yellow, Green-left, Yellow-left

Heirarchal intersection

Better HTTP

Coin-op vending machine (data)

Video games

Pac-man Ghost (sensors)

Weather (probabilistics)

Roguelike monster (interface satisfaction)

Candy crush clone game flow (practical large use)

React SPA website (practical large use)

How to debug

Notation Comparison

Their notations, one by one

Apples to Apples - Traffic Light

Other state machines

There are a lot of state machine impls for JS, many quite a bit more mature than this one. Here are some options:

  1. Finity 😮
  2. Stately.js
  3. machina.js
  4. Pastafarian
  5. Henderson
  6. fsm-as-promised
  7. state-machine
  8. mood
  9. FSM Workbench
  10. SimpleStateMachine
  11. shime/micro-machine
    1. soveran/micromachine (ruby)
  12. fabiospampinato/FSM
  13. HQarroum/FSM
  14. Finite-State-Automata
  15. finite-state-machine
  16. nfm

And some similar stuff:

  1. redux-machine
  2. ember-fsm
  3. State machine cat
  4. Workty 😮
  5. sam-simpler
  6. event_chain
  7. DRAKON
  8. Yakindu Statechart Tools
  9. GraphViz
    1. Viz.js, which we use