Experimental Statechart

experiment.js

const deviceMachine = Machine({
  id: 'device',

  initial: 'powered_off',
  
  states: {
    powered_on: {
      type: 'parallel',
      
      on: {
        OFF: 'powered_off',
      },
      states: {
        fan_machine: {
          initial: 'fanOff',
          states: {
            fanOff: {
              on: {
                POWER: 'fanOn',
                HIGH_POWER: 'fanOn.third'
              }
            },
            fanOn: {
              initial: 'first',
              states: {
                first: {
                  on: { TIMER: 'second' }
                },
                second: {
                  on: { TIMER: 'third' }
                },
                third: {
                  on: { TIMER: 'first' }
                },

              },
              on: {
                POWER: 'fanOff'
              }
            }
          }
        },
        
        traffic_light_working: {
          initial: 'green',
          states: {
            green: {
              on: {
                TIMER: 'yellow'
              }
            },
        
            yellow: {
              on: {
                TIMER: 'red'
              }
            },
        
            red: {
              initial: 'walk',
        
              on: {
                TIMER: 'green'
              },
    
              states: {
                walk: {
                  on: {
                    PED_TIMER: 'wait'
                  }
                },
                wait: {
                  on: {
                    PED_TIMER: 'stop'
                  }
                },
                stop: {}
              }
            }
          }
        }
      }
    },

    powered_off: {
      on: {
        ON: 'powered_on'
      }
    }
  }
});