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

machine.js

const childMachine = Machine({
  id: "child",
  initial: "step1",
  states: {
    step1: {
      entry: ['logState'],
      on: { STEP: "step2" }
    },
    step2: {
      entry: ['logState'],
      on: { STEP: "step3" }
    },
    step3: {
      entry: ['logState'],
      type: "final"
    }
  }
},
{
  actions: {
    logState: (_, event, meta) => console.info(event, meta.state.value)
    }
  });


const parentMachine = Machine({
  id: "parent",
  initial: "idle",
  states: {
    idle: {
      on: { ACTIVATE: "active" }
    },
    active: {
      invoke: {
        id: 'child',
        src: childMachine,
        onDone: 'done'
      },
      on: {
        STEP: {
          actions: send("STEP", {
            to: "child"
          })
        }
      }
    },
    done: {}
  }
});