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

machine.js

// https://xstate.js.org/viz/?gist=caa428d6095266ec9cb79b033c7d9017

/*
 * https://xstate.js.org/viz/?gist=caa428d6095266ec9cb79b033c7d9017
 */

const yellowStates = {
  initial: 'normal',
  context: {
    blinking: false
  },
  states: {
    normal: {
      on: {
        YELLOW_TIMEOUT:{ 
          target: '#light.red',
          cond: 'isNotBlinking'
        }
      }
    },
    blinking: {
      action: ctx => {
        ctx.blinking = true
      }
      // assign({
      //   fetchingType: (ctx, event) => ctx.blinking = true
      // }),
    }
  }
};

const pedestrianStates = {
  initial: 'walk',
  states: {
    walk: {
      on: {
        PED_COUNTDOWN: 'wait'
      }
    },
    wait: {
      on: {
        PED_COUNTDOWN: 'stop'
      }
    },
    stop: {}
  }
};

const lightMachine = Machine({
  key: 'light',
  initial: 'green',
  context: {
    blinking: false
  },
  states: {
    green: {
      after: {
        GREEN_TIMEOUT: 'yellow'
      },
      on: {
        FORCE_NEXT: 'yellow'
      }
    },
    yellow: {
      after: {
        YELLOW_TIMEOUT:{ 
          target: 'red',
          cond: 'isBlinking'
        }
      },
      on: {
        FORCE_NEXT: 'red'
      },
      ...yellowStates
      
    },
    red: {
      after: {
        RED_TIMEOUT: 'green'
      },
      on: {
        FORCE_NEXT: 'green'
      },
      // ...pedestrianStates
    }
  },
  on: {
    POWER_OUTAGE: '.yellow.blinking',
    POWER_RESTORED: '.red'
  }
},
{
  guards: {
    isBlinking: ctx =>  ctx.blinking,
    isNotBlinking: ctx =>  {
      console.log('ctx.blinking:', ctx.blinking)
      console.log('!ctx.blinking:', !ctx.blinking)
      return !ctx.blinking
    }
  },
  delays: {
    GREEN_TIMEOUT: 2000,
    YELLOW_TIMEOUT: 500,
    RED_TIMEOUT: 1000
  }
});