This page is part of a static HTML representation of TriTarget.org at https://tritarget.org

sourcecode/post-how-i-understand-state-machines-00.js

createMachine({
  initial: 'solid',
  states: {
    solid: {
      initial: 'red',
      on: {
        FAIL: '#blinking.red',
        CAUTION: '#blinking.yellow',
      },
      states: {
        red: {
          entry: 'setColorRed',
          on: { NEXT: 'yellow' },
        },
        yellow: {
          entry: 'setColorYellow',
          on: { NEXT: 'green' },
        },
        green: {
          entry: 'setColorGreen',
          on: { NEXT: 'red' },
        },
      },
    },
    blinking: {
      id: 'blinking',
      invoke: { src: 'blinkerRelay' },
      on: { NEXT: 'solid' },
      states: {
        red: {
          entry: 'setColorRed',
          on: { CAUTION: 'yellow' },
        },
        yellow: {
          entry: 'setColorYellow',
          on: { FAIL: 'red' },
        },
      },
    },
  },
});