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

machine.js

// DEMO: Call events in child machines

// NOTE: Child machine viz is not supported yet

const childMachine = Machine({
  id: 'child',
  initial: 'step1',
  states: {
    step1: {
      on: { STEP: 'step2' },
    },
    step2: {
      on: { STEP: 'step3' },
    },
    step3: {
      type: 'final',
    },
  },
})

const parentMachine = Machine({
  id: 'parent',
  initial: 'idle',
  states: {
    idle: {
      on: { ACTIVATE: 'active' },
    },
    active: {
      // invoke another machine
      invoke: {
        id: 'child',
        src: childMachine,
        // fired when child reaches `final`
        onDone: 'done'
      },
      on: {
        // trigger an event in a child machine
        STEP: {
          actions: send('STEP')
        }
      }
    },
    done: {},
  },
})