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

machine.js

const lit = {
  on: {
    BREAK: 'broken',
    TOGGLE: 'unlit',
    CHNAGE_COLOR: {
      actions: ['changeColor']
    }
  }
}
const unlit = {
  on: {
    BREAK: 'broken',
    TOGGLE: 'lit'
  }
}
const broken = {}

const states = { lit, unlit, broken }

const initial = 'unlit'

const config = {
  id: 'multiColoredBulb',
  context: {
    color: '#fff'
  },
  initial,
  states,
  strict: true,
  devTools: true,
}


const lightBulbMachine = Machine(config, {
  actions: {
    changeColor: assign((context, { color }) => ({
        color
      }))
  }
})