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

machine.js

const inputMachine = Machine(
  {
    id: 'input',
    initial: 'pristine',
    context: {
      message: '',
    },
    states: {
      pristine: {},
      editing: {},
      validating: {
        on: {
          RESOLVE: 'valid',
          REJECT: 'invalid.pending',
        }
      },
      valid: {},
      invalid: {
        initial: 'empty',
        states: {
          empty: {},
          pending: {},
        }
      }
    },
    on: {
      SET_MESSAGE: {
        target: 'editing',
        actions: assign((_, { msg }) => ({ message: msg}))
      },
      LEAVE: [
        {
          target: 'invalid.empty',
          cond: ctx => ctx.message.length === 0
        },
        {
          target: 'validating'
        }
      ]
    }
  }  
);