🎲 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("[email protected]", "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