xstate.js

machineCheatSheet.js

const machineCheatSheet = {
  // ***** COMMON *****
  id: 'custom-id',
  type: 'atomic', // atomic | compound | history | final | parallel
  initial: 'start', // initial state
  context: {}, // any object - extended state
  states: { start: {}, final: {} },

  // ***** ACTIONS - ENTRY / EXIT *****
  entry: [], // * actions
  exit: [], // * actions

  // ***** ACTIONS - TRANSITIONS *****
  after: {
    5000: {
      actions: [], // * actions
    },
  },
  always: [], // initial state based on conditions (* actions)
  on: {
    '*': {}, // will run if others don't
    EVENT_NAME1: undefined, // forbidden transaction
    EVENT_NAME2: {
      actions: [], // * actions
      cond: [], // * actions
      entry: [], // * actions
      exit: [], // * actions
      target: 'targetState', // string or array of strings
    },
  },
  onDone: 'final', // state when final state reached

  // ***** SERVICES *****
  invoke: {
    autoForward: true, // forwards to children if true
    data: {}, // Derives child context from parent context
    id: 'unique id',
    onDone: {
      actions: [], // * actions
      target: 'targetState', // string or array of strings
    },
    onError: {
      actions: [], // * actions
      target: 'targetState', // string or array of strings
    },
    src: [], // machine | fn => promise/callback/observable | array (strings) | source object
  },

  // ***** HISTORY *****
  history: 'shallow', // false | true | "shallow" | "deep"
  target: 'defaultState', // if type 'history'

  // ***** MISC *****
  description: '', // description of state node
  meta: {}, // any object
  tags: [], // strings
}

/*
 * actions - fn (context, event) => null | array of strings (options.actions)
 */