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 fooMachine = Machine(
  {
    id: "foo",
    type: "parallel",
    context: {
      values: {
        name: ""
      },
      buffer: {
        name: ""
      }
    },
    states: {
      visibility: {
        initial: "closed",
        states: {
          closed: {
            on: {
              OPEN: "opened"
            }
          },
          opened: {
            on: {
              CLOSE: "closed"
            }
          }
        }
      },
      form: {
        initial: "clean",
        states: {
          clean: {
            on: {
              CHANGE: {
                target: "dirty",
                actions: "change"
              }
            }
          },
          dirty: {
            on: {
              CHANGE: [
                { 
                  target: 'clean', 
                  cond: 'isClean'
                },
               { 
                 actions: "change"
               }
              ],
              RESET: {
                target: "clean",
                actions: "reset"
              },
              SUBMIT: {
                target: "clean",
                actions: ["submit", "close"]
              }
            }
          }
        }
      }
    }
  },
  {
    actions: {
      submit: assign((context, event) => ({
        values: context.buffer
      })),
      reset: assign((context, event) => ({
        buffer: context.values
      })),
      change: assign((context, event) => ({
        buffer: event.values
      })),
      close: send("CLOSE")
    },
    guards: {
      isClean: (context, event) => context.values.name === event.value.name
    }
  }
);