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

machine.js

//DEMO: Delay Events and 
// Use after instead of `on` for timer events

const states = {
  green: {
    after: {
      RED_TIMER: 'yellow'
    }
  },
  yellow: {
    after: {
      YELLOW_TIMER: 'red'
    }
  },
  red: {
    after: {
      GREEN_TIMER: 'green'
    }
  }
}

const options = {
  delays: {
    GREEN_TIMER: 4000,
    YELLOW_TIMER: 1000,
    // Can take a function
    RED_TIMER: (context, events) => 3000
  }
}
  
const fetchMachine = Machine({
  id: 'stopLight',
  initial: 'red',
  states
}, options);