Generated by XState Viz: https://xstate.js.org/viz, single input model

machine.js

Machine({
  initial: "ready",
  context: {
    value: ""
  },
  states: {
    updating: {
      entry: "updateInputValue",
      on: {
        '': [
          { target: "ready.valid", cond: "isInputValid" },
          { target: "ready.invalid" }
        ]
      }
    },
    ready: {
      initial: "empty",
      on: {
        TYPE: "updating"
      },
      states: {
        empty: {},
        valid: {},
        invalid: {}
      }
    }
  }
}, {
  guards: {
    isInputValid: ctx => ctx.value.length > 0 && validateEmail(ctx.value.length)
  },
  actions: {
    updateInputValue: assign({
      value: (_, e) => e.data
    })
  }
});