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

machine.js

  // TRAFFIC-LIGHT MACHINE
  // ===================
  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const alertsMachine = Machine({
    id: 'alerts',
    initial: 'green',
    context: {
      yellowRetries: 0,
      redRetries: 0,
      greenRetries: 0
    },
    states: {
      green: {
        on: {
          // WARN: 'yellow',
          WARN: {
            target: 'yellow',
            actions: assign({
              yellowRetries: (context, event) =>
                context.yellowRetries + 1
            })
          },
          PANIC: {
            target: 'red',
            actions: assign({
              redRetries: (context, event) => context.redRetries + 1
            })
          }
        }
      },
      yellow: {
        on: {
          PANIC: {
            target: 'red',
            actions: assign({
              redRetries: (context, event) => context.redRetries + 1
            })
          },
          CLEAR: {
            target: 'green',
            actions: assign({
              greenRetries: (context, event) => context.greenRetries + 1
            })
          }
        }
      },
      red: {
        on: {
          CALM: {
            target: 'yellow',
            actions: assign({
              yellowRetries: (context, event) =>
                context.yellowRetries + 1
            })
          },
          CLEAR: {
            target: 'success',
            actions: assign({
              greenRetries: (context, event) => context.greenRetries + 1
            })
          }
        }
      },  
      success: {
        type: 'final'
      },
    }
  });