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

machine.js

const multiColoredBulbMachine = Machine({
  id: 'multiColoredBulb',
  initial: 'unlit',
  context: {
    color: '#fff'
  },
  states: {
    lit: {
      on: {
        BREAK: 'broken',
        TOGGLE: 'unlit',
        CHANGE_COLOR: {
          actions: ['changeColor']
        }
      }
    },
    unlit: {
      on: {
        BREAK: 'broken',
        TOGGLE: 'lit'  
      }
      
    },
    broken: {
      type: 'final'
    }
  },
  strict: true
}, {
  actions: {
    changeColor: assign({
      color: (context, event) => ({
        color: event.color
      })
    })
  }
})