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 a11yObj = Machine(
  {
    id: "accessibility tool",
    initial: "unloaded",
    context: {
      watching: false
    },
    states: {
      unloaded: {
        on: {
          LOAD: "loaded"
        }
      },
      loaded: {
        initial: "inactive",
        states: {
          EXIT: {
            type: "final"
          },
          inactive: {
            on: {
              CLOSE: "EXIT",
              "AUDIT PAGE": "auditing",
              "WATCH PAGE": {
                target: "watching",
                actions: "toggleWatching"
              }
            }
          },
          watching: {
            activities: ["watching"],
            on: {
              PAUSE: {
                target: "inactive",
                actions: "toggleWatching"
              },
              DOM_NODES_CHANGED: "auditing"
            }
          },
          auditing: {
            activities: ["auditing"],
            after: {
              750: [
                  {
                    target: "watching",
                    cond: "isWatching",
                    actions: "renderResults"
                  },
                  {
                    target: "inactive",
                    cond: "isNotWatching",
                    actions: "renderResults"
                  }
                ]
            }
          }
        },
        onDone: {
          target: "unloaded",
          actions: "unload"
        }
      }
    }
  },
  {
    actions: {
      toggleWatching: assign({
        watching: (context, event) => !context.watching
      }),
      renderResults: (context, event) => {
        console.log("rendering resuts...");
      }
    },
    guards: {
      isWatching: (context, event) => context.watching == true,
      isNotWatching: (context, event) => context.watching == false
    },
    activities: {
      watching: () => {
        const interval = setInterval(() => console.log("watching..."), 1000);
        return () => clearInterval(interval);
      },
      auditing: () => {
        const interval = setInterval(() => console.log("auditing..."), 1000);
        return () => clearInterval(interval);
      }
    }
  }
);