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

machine.js

// Define the state machine configuration for the first machine
const firstMachine = Machine({
  id: 'firstMachine',
  initial: 'start',
  states: {
    start: {
      on: {
        NEXT: 'transitionToSecondMachine',
      },
    },
    transitionToSecondMachine: {
      invoke: {
        src: 'secondMachine',
        onDone: {
          target: 'end',
          actions: (context, event) => {
            console.log(`Done with secondMachine, result: ${event.data}`);
          },
        },
      },
    },
    end: {},
  },
});

// Define the state machine configuration for the second machine
const secondMachine = Machine({
  id: 'secondMachine',
  initial: 'start',
  states: {
    start: {
      entry: () => {
        console.log('Entering start state of secondMachine');
      },
      on: {
        NEXT: {
          target: 'end',
          actions: () => {
            console.log('Transitioning to end state of secondMachine');
          },
        },
      },
    },
    end: {
      entry: () => {
        console.log('Entering end state of secondMachine');
      },
    },
  },
});

// Create a new instance of the first machine
const firstInstance = interpret(firstMachine.withContext({})).start()

// Send an event to the first machine to trigger a transition to the second machine
//firstInstance.send({type: 'NEXT'})