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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
const lit = {
    on: {
        BREAK: {
          // target: 'broken',
          actions: send({type: 'TOGGLE'})
        },
        TOGGLE: 'unlit'
    }
}

const unlit = {
    on: {
        BREAK: 'broken',
        TOGGLE: 'lit',
        CHANGE_COLOR: {
          actions: assign({
            color: (ctx, evt) => evt.color
            })
        }
    }
}

// what is type?
const broken = {
    type: 'final'
}

const states = { lit, unlit, broken }

const initial = 'unlit'

const config = {
    id: 'lightBulb',
    context: {
      color: "#fff"
    },
    initial,
    states,
    strict: true
}
const options = {
    actions: {
        logBroken: (ctx, event) => {console.log(`ACTION: I am broken in ${event.location}`)},
        changeColor: () => {
            assign({
                color: '#f0f'
            })
        }
    }
}

const fetchMachine = Machine(config, options);