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 formMachine =  Machine(
  {
    id: 'form',
    initial: 'idle',
    context: {
      formObject: {
        validate: () => {},
      },
      onSubmit: () => {},
      schema: object().shape(),
    },
    type: 'parallel',

    states: {
      behavior: {
        initial: 'idle',
        states: {
          idle: {
            on: {
              SUBMIT: {
                target: 'busy',
                cond: 'canSubmit',
              },
            },
          },
          busy: {
            invoke: {
              src: 'submitForm',
              onDone: 'success',
              onError: 'error',
            },
          },
          success: {
            entry: 'handleSubmitSuccess',
          },
          error: {
            entry: 'handleSubmitError',
          },
        },
      },
      change: {
        initial: 'unchanged',
        states: {
          unchanged: {
            entry: [send('VALIDATE')],
            on: {
              CHANGE: {
                target: 'changed',
                actions: ['update'],
              },
            },
          },
          changed: {
            entry: [send('VALIDATE')],
            always: [{ target: 'unchanged', cond: 'isPristine' }],
            on: {
              CHANGE: {
                target: 'changed',
                actions: ['update'],
              },
            },
          },
        },
      },
      validity: {
        initial: 'unknown',
        states: {
          unknown: {
            on: {
              VALIDATE: 'validating',
            },
          },
          validating: {
            invoke: {
              src: 'validateFormObject',
              onDone: 'valid',
              onError: 'invalid',
            },
            on: {
              VALIDATE: 'validating',
            },
          },
          valid: {
            entry: [
              assign({
                validationErrors: [],
              }),
            ],
            on: {
              VALIDATE: 'validating',
            },
          },
          invalid: {
            entry: ['handleValidationErrors'],
            on: {
              VALIDATE: 'validating',
            },
          },
        },
      },
    },
  },
  {
    actions: {
      update() {},
      handleValidationErrors() {},
    },
    guards: {
      isPristine() {
        return Math.random() > 0.5;
      },
      canSubmit(_context, _event, guardMeta) {
        return Math.random() > 0.5;
      },
    },
  }
);

function object() {
  return {
    shape() {}
  }
}

function validate() {}