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

machine.js

const buttonFactory = id => {
  const toggleName = `TOGGLE${id}`
  return {
    id: `button${id}`,
    initial: 'hist',
    states: {
      off: {
        on: {
          [toggleName]: 'on'
        }
      },
      on: {
        on: {
          [toggleName]: 'off'
        }
      },
      hist: {
        type: 'history',
        target: 'off',
        history: 'deep',
      },
    },
  }
}


const buttons = {
  id: 'buttons',
  type: 'parallel',
  states: {
    button1: buttonFactory(1),
    button2: buttonFactory(2),
  },
  on: {
    SLEEP: '#idle',
  }
}


const parallelTest = Machine({
  id: 'test',
  initial: 'idle',
  states: {
    idle: {
      id: 'idle',
      on: {
        START: 'buttons',
      }
    },
    buttons,
  }
});