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

machine.js

const ACTIVITY_INTERVAL = 500;

const a11yObj = Machine(
  {
    id: "a11y-tool",
    initial: "unloaded",
    context: {
      watching: false
    },
    states: {
      unloaded: {
        on: {
          LOAD: "loaded"
        }
      },
      loaded: {
        initial: "inactive",
        states: {
          inactive: {
            on: {
              CLOSE: "#a11y-tool.unloaded",
              "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"],
            on: {
              DONE: [
                {
                  target: "watching",
                  cond: "isWatching",
                  actions: "renderResults"
                },
                {
                  target: "inactive",
                  actions: "renderResults"
                }
              ]
            }
          }
        }
      }
    }
  },
  {
    actions: {
      toggleWatching: assign({
        watching: (context, event) => !context.watching
      }),
      renderResults: (context, event) => {
        console.log("rendering resuts...");
      }
    },
    guards: {
      isWatching: (context, event) => context.watching == true
    },
    activities: {
      watching: () => {
        const interval = setInterval(() => console.log("watching..."), ACTIVITY_INTERVAL);
        return () => clearInterval(interval);
      },
      auditing: () => {
        const interval = setInterval(() => console.log("auditing..."), ACTIVITY_INTERVAL);
        return () => clearInterval(interval);
      }
    }
  }
);