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

machine.js

const ponger = Machine({
  id: 'ponger',
  initial: 'ready',
  context: {
    pongs: 0,
  },
  states: {
    ready: {
      on: {
        PING: {
          actions: [
            assign({pongs: (c) => c.pongs + 1}),
            sendParent('PONG', {delay: 2000})
            ]
        }
      }
    }
  }
});

const pinger = Machine({
  id: 'pinger',
  initial: 'stopped',
  context: {
    pings: 0
  },
  states: {
    stopped: {
      on: {
        START: {
          target: 'ready',
          actions: assign({
            ponger: (_) => spawn(ponger)
          })
        }
      }
    },
    ready: {
      after: {
        2000: 'pinging'
      },
      on: {
        PING: 'pinging'
      }
    },
    pinging: {
      entry: [
            assign({pings: (c) => c.pings + 1}),
            send('PING', {to: (c) => c.ponger})],
      on: {
        PONG: {
          target: 'ready',
        }
      }
    }
  }
})