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

machine.js

const lightBulbMachine = Machine(
  {
    id: 'lightbulb',
    strict: true,
    initial: 'lit',
    context: {
      count: 0,
    },
    states: {
      lit: {
        exit: () => {
          console.log('it is dark');
        },
        on: {
          BREAK: 'broken',
          TOGGLE: {
            target: 'unlit',
            actions: ['logUnlit', 'logToggle', 'logCount'],
          },
        },
      },
      unlit: {
        exit: () => {
          console.log('it is light');
        },
        on: {
          BREAK: 'broken',
          TOGGLE: {
            target: 'lit',
            actions: ['logLit', 'logToggle', 'logCount'],
          },
        },
      },
      broken: { type: 'final', entry: ['logBroken', 'resetCount'] },
    },
  },
  {
    actions: {
      logBroken: (context, event) => {
        console.log(`I broke while ${context}`);
      },
      logLit: () => {
        console.log('Lit!');
      },
      logUnlit: () => {
        console.log('Unlit!');
      },
      logToggle: (context) => {
        context.count++;
      },
      logCount: (context) => {
        console.log(context.count)
      },
      resetCount: (context) => {
        context.count = 0;
      }
    },
  }
);