Fluent machine

Spec compliant state machines using JSX, SCXML or JSON and chainable methods.

Example:

import fsm from "fluent-machine";

// Define state chart using JSX
const humanStateChart = (
  <>
    <State initial id="sleeping">
      <Transition event="walk" target="walking" />
    </State>
    <State id="walking">
      <Transition event="sleep" target="sleeping" />
      <Transition event="run" target="running" />
    </State>
    <State initial id="running">
      <Transition event="walk" target="walking" />
    </State>
  </>
);

const context = {
  energy: 10,
  speed: 0,
};

// Create a machine (also supports SCXML or Xstate JSON)
const humanMachine = fsm(humanStateChart, context);

// Add conditions, assignments or invoke side effects with chained syntax
humanMachine
  .when({
    state: "walking",
    event: "run",
  })
  .cond((context) => {
    return context.energy > 5;
  })
  .assign((context) => ({
    energy: context.energy--,
    speed: 10,
  }));

humanMachine
  .when({
    state: "sleeping",
  })
  .assign((context) => ({
    energy: context.energy++,
    speed: 0,
  }));

// Start machine
export const service = humanMachine.start();

Features

SCXML specification

| SCXML specification | flux-machine | | ------------------- | :--------------: | | scxml | ✅ | | state | ✅ | | parallel | ❌ | | transition | ✅ | | initial | ❌ | | final | ❌ | | onentry | ❌ | | onexit | ❌ | | history | ❌ | | raise | ❌ | | if | ❌ | | elseif | ❌ | | else | ❌ | | foreach | ❌ | | log | ❌ | | datamodel | ✅ | | data | ✅ | | assign | ✅ | | donedata | ❌ | | content | ❌ | | param | ❌ | | script | ❌ | | send | ✅ | | cancel | ❌ | | invoke | ✅ | | finalize | ❌ |

FAQ

Should I use this in production?

• No, not until it reaches V1.0.0
• It's an experiment that I coded in a weekend it and only supports the conditions in src/tests/fsm.test.tsx