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

machine.js

console.dir(actions);

const StepMachine = (
  validateFunction = (obj) => Promise.resolve(obj)
) =>
  Machine({
    context: {
      validate: validateFunction,
      data: {},
    },
    initial: 'empty',
    states: {
      empty: {
        on: {
          UPDATE: {
            actions: [
              assign({
                data: (context, event) => ({
                  ...context.data,
                  ...event.data,
                }),
              }),
              sendParent((context) => ({
                type: 'UPDATE_CHILD',
                data: context.data,
              })),
            ]
          },
          VALIDATE: {
            target: 'validating',
          },
        },
      },
      validating: {
        invoke: {
          id: 'validateData',
          src: ({ validate, data }) => validate(data),
          onDone: 'validated',
          onError: {
            target: 'invalid',
            actions: assign({
              error: (context, event) => event.data,
            }),
          },
        },
      },
      validated: {
        type: 'final',
      },
      invalid: {
        on: {
          UPDATE: {
            actions: assign({
              data: ({ data }, { data: eventData }) => ({
                ...data,
                ...eventData,
              }),
            }),
          },
          VALIDATE: 'validating',
        },
      },
    },
  });

const alwaysValid = (obj) => Promise.resolve(obj)
const OnboardingMachine = Machine({
  id: 'onboarding-machine',
  context: {},
  initial: 'stepOne',
  states: {
    stepOne: {
      invoke: {
        id: 'step-one',
        autoForward: true,
        src: StepMachine(),
        onDone: {
          target: 'stepTwo',
          actions: assign({ stepOne: (context, event) => event.data }),
        },
      },
      on: {
        'UPDATE_CHILD': {
          actions: assign({ stepOne: (context, event) => event.data })
        }
      }
    },
    stepTwo: {
      invoke: {
        id: 'step-two',
        autoForward: true,
        src: StepMachine(),
        onDone: {
          target: 'stepThree',
          actions: assign({ stepTwo: (context, event) => event.data }),
        },
      },
    },
    stepThree: {
      invoke: {
        id: 'step-three',
        src: StepMachine(),
        autoForward: true,
        onDone: {
          target: 'complete',
          actions: assign({ stepThree: (context, event) => event.data }),
        },
      },
    },
    complete: {
      type: 'final',
    },
  },
});