JavaScript Event State Machine

Question

Does anybody know of any javascript implementations of a state machine? My goal is to setup a state machine implementation that would bind events to state transitions. So, if a user clicks on a button then the state will be changed, and this state might define certain values in objects to be changed for example.

I want this to be a state machine simply because there will be a rules json file that will allow to dictate what values change of various objects when certain events are called. Because this will be structured within the file, I think it would be easy to parse that information into a state machine object.

Solution 1

There are two main libraries for a finite state machine in js :

1/ Machina: Very well documented, examples, supports two JavaScript message bus providers out of the box: postal.js and amplify.js.

2/ Javascript State Machine: simpler and easier to use, perfect for "basic" usages.

Solution 2

I recently built a state machine implementation in JS, which is certainly the easiest to configure, thanks to its transition DSL:

transitions: [
  'next    : intro > form > finish',
  'back    : intro < form           < error',
  'error   :         form >           error',
  'restart : intro        < finish'
]

It's really flexible in both configuration and event handler assignment, you can add and remove states at runtime, pause and resume transitions, hook into a ton of events, with helpers for jQuery and reactive frameworks like Vue:

Docs and a whole host of demos here:

• http://statemachine.davestewart.io

Solution 3

Little bit of promotion for my state machine: stateflow I just created my own state machine because i found none which was simple enough for me.

a flow is defined with a js object where the property is the state name and the value is another js object with following properties.

• type: begin, end or state (default).
• action: function with a State instance object set to this, can also be named action previously registered or another flow definition in this case it is a subflow.
• on: property is to be matched event and value is the next state to goto

Simple example

var stateflow = require('stateflow');
var flow = new stateflow.StateFlow({
   a: {
       type:'begin',
       action: function(complete) {
           // do something
           complete('done');    
       },
       on: {
           done:'b',
           again:'a'
       }
   }, 
   b: {
       type:'end',
       action: function(complete) {
           complete('finished');
       }
   }
});
flow.start(function(event) {
   console.log('flow result:', event);
});

Check it out on git https://github.com/philipdev/stateflow or via npm

Solution 4

Try taking a look at https://github.com/steelbreeze/state.js - it supports much of the state machine semantics as described in the UML 2 spec while still being performant. There's not much in the way of documentation yet, but the examples and tests should provide a good reference.

Solution 5

You'll find library designed with jQuery that seems to do what you're looking for and binding automatically the events for you:

• https://github.com/lucaong/jquery-machine (see example https://github.com/lucaong/jquery-machine/blob/master/examples/onoff.html)
• https://github.com/intersel/iFSM (see example https://github.com/intersel/iFSM/blob/master/Examples/Example_1.html)

View more solutions