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

machine.js

const lightMachine = Machine({
  // not a parallel machine
  id: 'parallel',
  // initial: 'green',
  // states: {
  //   green: {
  //     on: { TIMER: 'yellow' }
  //   },
  //   yellow: {
  //     on: { TIMER: 'red' }
  //   },

  //   // nested parallel machine
  //   red: {
      type: 'parallel',
      states: {
        walkSign: {
          initial: 'solid',
          states: {
            solid: {
              on: { COUNTDOWN: 'flashing' }
            },
            flashing: {
              on: { STOP_COUNTDOWN: 'solid' }
            }
          }
        },
        pedestrian: {
          initial: 'walk',
          states: {
            walk: {
              on: { COUNTDOWN: 'wait' }
            },
            wait: {
              on: { STOP_COUNTDOWN: 'stop' }
            },
            stop: {
              type: 'final'
            }
          }  
        },
        beepSound: {
          initial: 'noSound',
          states: {
            noSound: {
              on: { COUNTDOWN: 'sound' }
            },
            sound: {
              on: { STOP_COUNTDOWN: 'noSound' }
            }
          }
        }
      }
    // }
  // }
});
// const lightMachine = Machine({
//   // not a parallel machine
//   id: 'light',
//   // initial: 'green',
//   // states: {
//   //   green: {
//   //     on: { TIMER: 'yellow' }
//   //   },
//   //   yellow: {
//   //     on: { TIMER: 'red' }
//   //   },

//   //   // nested parallel machine
//   //   red: {
//       type: 'parallel',
//       states: {
//         walkSign: {
//           initial: 'solid',
//           states: {
//             solid: {
//               on: { COUNTDOWN: 'flashing' }
//             },
//             flashing: {
//               on: { STOP_COUNTDOWN: 'solid' }
//             }
//           }
//         },
//         pedestrianComponent: {
//           type: 'parallel',
//           states: {
//             pedestrian: {
//               initial: 'walk',
//               states: {
//                 walk: {
//                   on: { COUNTDOWN: 'wait' }
//                 },
//                 wait: {
//                   on: { STOP_COUNTDOWN: 'stop' }
//                 },
//                 stop: {
//                   type: 'final'
//                 }
//               }  
//             },
//             beepSound: {
//               initial: 'noSound',
//               states: {
//                 noSound: {
//                   on: { COUNTDOWN: 'sound' }
//                 },
//                 sound: {
//                   on: { STOP_COUNTDOWN: 'noSound' }
//                 }
//               }
//             }
            
//           }
//         }
//       }
//     // }
//   // }
// });
// console.log(lightMachine.transition('yellow', 'TIMER').value);
// {
//   red: {
//     walkSign: 'solid',
//     pedestrian: 'walk'
//   }
// }


// const lightMachine = Machine({
//   // not a parallel machine
//   id: 'light',
//   initial: 'green',
//   states: {
//     green: {
//       on: { TIMER: 'yellow' }
//     },
//     yellow: {
//       on: { TIMER: 'red' }
//     },

//     // nested parallel machine
//     red: {
//   initial: 'green',
//   states: {
//     green: {
//       on: { TIMER: 'yellow' }
//     },
//     yellow: {
//       on: { TIMER: 'red' }
//     },

//     // nested parallel machine
//     red: {
//       type: 'parallel',
//       states: {
//         walkSign: {
//           initial: 'solid',
//           states: {
//             solid: {
//               on: { COUNTDOWN: 'flashing' }
//             },
//             flashing: {
//               on: { STOP_COUNTDOWN: 'solid' }
//             }
//           }
//         },
//         pedestrian: {
//           initial: 'walk',
//           states: {
//             walk: {
//               on: { COUNTDOWN: 'wait' }
//             },
//             wait: {
//               on: { STOP_COUNTDOWN: 'stop' }
//             },
//             stop: {
//               type: 'final'
//             }
//           }
//         }
//       }
//     }
//   }
//     }
//   }
// });