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 undoMachine = Machine({
    id: 'undo',
    initial: 'idle',
    context: {
      value: "",
      prevSteps: []
    },
    states: {
      idle: {
        on: {
          EDIT: {target: 'editing', actions: 'captureStep'},
          UNDO: {actions: 'undo', cond: 'hasUndoSteps'}
        }
      },
      editing: {
        on: {
          CHANGE: {actions: 'setValue'},
          SAVE: [{target: 'idle', cond: 'hasNewValue'}, {actions: send('CANCEL')}],
          CANCEL: {target: 'idle', actions: 'undo'}
        }
      },
    }
  }, {
    actions: {
      setValue: assign({value: (_, event) => event.data || ""}),
      captureStep: assign({prevSteps: (context) => [context.value, ...context.prevSteps]}),
      undo: assign(context => {
        const [head, ...tail] = context.prevSteps
        return {value: head, prevSteps: tail}
      })
    },
    guards: {
      hasUndoSteps: context => Boolean(context.prevSteps.length),
      hasNewValue: (context, event) => context.prevSteps[0] !== context.value
    },
  });