🎲 mchine

A Simple State Machine

Why?

Because State machine are sexy, and easy to use. Using a state machine will change how you think and develop a Front-end application. Think more on your view's state instead of his transactions, this will reduce a lot of the if else and make the code more maintanable.

Install

npm install mchine

How to use

import mchine from "mchine";
 
const stateMachineSchema = {
  initial: "idle",
  states: {
    idle: {
      events: {
        login: {
          target: "sending"
        }
      }
    },
    sending: {
      events: {
        success: {
          target: "idle"
        },
        error: {
          target: "error"
        }
      }
    },
    error: {}
  }
};
 
const stateMachine = mchine(stateMachineSchema);
 
stateMachine.getCurrentState(); // idle
 
stateMachine.transition("login");
stateMachine.getCurrentState(); // sending
 
API.login("[e-mail]", "Some.secure.password42")
  .then(() => stateMachine.transition("success")) // idle
  .catch(() => stateMachine.transition("error")); // error

How to import

Browser (Using modules)

  <script type="module">
    import mchine from './node_modules/mchine/dist/index.m.js';
 
    // some magic code ✨...
  </script> 

Browser (UMD)

  <script src="./node_modules/mchine/dist/index.umd.js"></script> 
  <script>
    // some magic code ✨...
  </script> 

Transpilers (Babel, Rollup, Typescript, ...)

import mchine from "mchine";
 
// Some magic code ✨...

Node

const mchine = require("mchine");
 
// Some magic code ✨...

References

• Implemention of MChine follows the main algorithm of the SCXML spec from the W3C