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

machine.js

// DEMO: History State Deep

const heatedStates = {
  lowHeat: {
    on: { TOGGLE_HEAT: 'highHeat' }
  },
  highHeat: {
    on: { TOGGLE_HEAT: 'lowHeat' }
  }
}

const oscillationStates = {
  enabled: {
    on: {
      TOGGLE_OSC: 'disabled'
    }
  },
  disabled: {
    on: {
      TOGGLE_OSC: 'enabled'
    }
  }
}


const poweredOnStates = {
  heated: {
    initial: 'lowHeat',
    states: heatedStates
  },
  oscillation: {
    initial: 'disabled',
    states: oscillationStates
  },
  hist: {
    type: 'history',
    
    //DEEP HISTORY
    // When this state node is activated
    // It returns the previous DEEP/NESTED (heared and oscillation) states of
    // poweredOnStates
    // A state that remembers :)
    history: 'deep'
  }
}


const spaceHeaterMachine = Machine({
  id: 'spaceHeater',
  initial: 'poweredOff',
  states: {
    poweredOff: {
      on: { TOGGLE_POWER: 'poweredOn.hist' }
    },
    poweredOn: {
      on: { TOGGLE_POWER: 'poweredOff' },
      // With parallel set, you can ignore
      // initial.
      // This makes the poweredOn states parallel
      //so they are not mutually exlusive
      type: 'parallel',
      states: poweredOnStates
    }
  }
})