Generated by XState Viz: https://xstate.js.org/viz

machine.js

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)

const workflowMachine = Machine(
  {
    id: "workflow_machine",
    initial: "new",
    context: {
      recordedEvents: [],
      expectedState: null
    },
    states: {
      new: {
        on: {
          START: "step1"
        }
      },
      step1: {
        onEntry: ["recordEvent", "recordState"],
        on: {
          NEXT: [
            {
              target: "step1b",
              cond: "someCondition"
            },
            {
              target: "step2"
            }
          ]
        }
      },
      step1b: {
        onEntry: ["recordEvent", "recordState"],
        on: {
          NEXT: "step2"
        }
      },
      step2: {
        onEntry: ["recordEvent", "recordState"],
        on: {
          SUBMIT: "submitting"
        }
      },
      submitting: {
        onEntry: ["recordEvent", "recordState"],
        invoke: {
          src: "sendEvents",
          onDone: "submitted",
          onError: "error"
        }
      },
      submitted: {
        onEntry: ["recordEvent", "recordState"],
        on: {
          APPROVE: [
            { target: "approved", cond: "canApprove" },
            { target: "error" }
          ]
        }
      },
      approved: {
        onEntry: ["recordEvent", "recordState"],
        type: "final"
      },
      error: {
        onEntry: ["recordEvent", "recordState"],
        type: "final"
      }
    }
  },
  {
    guards: {
      someCondition: () => true,
      canApprove: () => true
    },
    services: {
      sendEvents: ({ recordedEvents, expectedState }) => "sent successfully"
    },
    actions: {
      recordEvent: assign(({ recordedEvents }, event) => ({
        recordedEvents: [...recordedEvents, event]
      })),
      recordState: assign((_, __) => {})
      // this needs xstate 4.7 -> recordState: assign(({ recordedStates }, __, { state }) => ({ recordedStates: [...recordedStates, state.value] }))
    }
  }
);