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

machine.js

const validate = ({ value, validator }) => {
  if (validator === undefined) {
    return new Promise((resolve) => resolve())
  }
  return validator.validate(value)
}
  
  const inputMachine = Machine({
  id: 'input',
  initial: 'valid',
  context: {
    errorMessage: undefined,
    validator: undefined,
    value: undefined
  },
  states: {
    valid: {
      on: {
        INPUT_CHANGED: {
          actions: 'updateValue'
        }
      }
    },
    validateContext: {
      invoke: {
        src: validate,
        onDone: {
          target: 'valid',
          actions: 'clearError'
        },
        onError: {
          target: 'error',
          actions: 'setError'
        }
      }
    },
    error: {
      on: {
        CLEAR_ERROR: {
          target: 'valid'
        },
        INPUT_CHANGED: {
          target: 'validateContext',
          actions: 'updateValue'
        }
      }
    }
  },
  on: {
    BLUR: 'validateContext'
  }
}, {
  actions: {
    clearError: assign({
      errorMessage: (_) => undefined
    }),
    setError: assign({
      errorMessage: (_, event) => event.data.errors.join(' ')
    }),
    updateValue: assign((_, event) => ({
      value: event.value
    }))
  }
});