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 fetchMachine = Machine(
    {
      id: "tab",
      strict: true,
      initial: "checkingUrl",
      context: {},
      states: {
        checkingUrl: {
          on: {
            "": [
              { target: "fetchingUrl", cond: "urlPresent" },
              { target: "checkingStatus", cond: "urlValid" },
              { target: "invalid" },
            ],
          },
        },
        fetchingUrl: {
          invoke: {
            id: "getUrl",
            src: "getTabUrl",
            onDone: {
              target: "checkingUrl",
              actions: assign({ url: (context, event) => event.data.url }),
            },
            onError: {
              target: "invalid",
              actions: assign({ error: (context, event) => event.data }),
            },
          },
        },
        checkingStatus: {
          invoke: {
            id: "checkIfBookmarked",
            src: "checkIfBookmarked",
            onDone: {
              target: "bookmarked",
              actions: assign({ bookmarkId: (context, event) => event.data.id }),
            },
            onError: "notBookmarked",
          },
          on: {
            TAB_UPDATED: { target: "checkingUrl", actions: ["setUrl"] },
          },
        },
        bookmarking: {
          invoke: {
            id: "createBookmark",
            src: "createBookmark",
            onDone: {
              target: "bookmarked",
              actions: assign({ bookmarkId: (context, event) => event.data.id }),
            },
            onError: "notBookmarked",
          },
        },
        bookmarked: {
          entry: ["configureAsBookmarked"],
          on: {
            TAB_ACTIVATED: "checkingStatus",
            TAB_UPDATED: { target: "checkingUrl", actions: ["setUrl"] },
          },
        },
        notBookmarked: {
          entry: ["configureAsNotBookmarked"],
          on: {
            TAB_ACTIVATED: "checkingStatus",
            TAB_UPDATED: { target: "checkingUrl", actions: ["setUrl"] },
            ACTION_CLICKED: "bookmarking",
          },
        },
        invalid: {
          entry: ["disableAction"],
          on: {
            TAB_UPDATED: { target: "checkingUrl", actions: ["setUrl"] },
          },
        },
      },
    },
    {
      actions: {
        getTabUrl: (context, event) => context.browser.tabs.get(context.tabId),
        setUrl: assign((context, event) => {
          if (event.type !== "TAB_UPDATED") {
            return {}
          }
          if (!event.url) {
            console.log("[actions.setUrl] bailing - not event value set")
            return {}
          }
          return {
            url: event.url,
          }
        }),
        configureAsBookmarked: (context, event) => {
          context.browser.browserAction.setBadgeText({ tabId: context.tabId, text: " " })
          context.browser.browserAction.setPopup({ tabId: context.tabId, popup: "popup.html" })
          context.browser.browserAction.setTitle({ tabId: context.tabId, title: "Click to edit bookmark" })
        },
        configureAsNotBookmarked: (context, event) => {
          context.browser.browserAction.setBadgeText({ tabId: context.tabId, text: "" })
          context.browser.browserAction.setPopup({ tabId: context.tabId, popup: "" })
          context.browser.browserAction.setTitle({ tabId: context.tabId, title: "Click to bookmark" })
        },
        disableAction: (context, event) => {
          context.browser.browserAction.disable(context.tabId)
        },
        checkIfBookmarked: async (context, event) => {
        },
        createBookmark: async (context, event) => {
          // const bookmark = await store.bookmarks.new({ url: context.url, name: context.title }).save()
          // return bookmark
        },
      },
      activities: {
        /* ... */
      },
      guards: {
        urlPresent: context => !context.url,
        urlValid: context => !!context.url && context.url.startsWith("http"),
      },
      services: {
        /* ... */
      },
    }
  );