@drip-apex/sdk 0.1.0

package/src/shopify-cart-events.ts

@@ -0,0 +1,115 @@
+export type ShopifyCartMutationHandler = () => void;
+
+const handlers = new Set<ShopifyCartMutationHandler>();
+let originalFetch: typeof window.fetch | null = null;
+let wrappedFetch: typeof window.fetch | null = null;
+let suppressNotifications = 0;
+let formListenerInstalled = false;
+
+function requestUrl(input: RequestInfo | URL): URL | null {
+  try {
+    const value = typeof input === "string" || input instanceof URL
+      ? String(input)
+      : input.url;
+    return new URL(value, location.href);
+  } catch {
+    return null;
+  }
+}
+
+function isShopifyCartMutation(input: RequestInfo | URL): boolean {
+  const url = requestUrl(input);
+  if (!url || url.origin !== location.origin) return false;
+  const configuredRoot = (window as Window & {
+    Shopify?: { routes?: { root?: string } };
+  }).Shopify?.routes?.root;
+  let root = "";
+  if (typeof configuredRoot === "string") {
+    try {
+      const parsed = new URL(configuredRoot, location.origin);
+      if (parsed.origin === location.origin && !parsed.search && !parsed.hash) {
+        root = parsed.pathname.replace(/\/$/, "");
+      }
+    } catch {
+      root = "";
+    }
+  }
+  const path = url.pathname.replace(/\/$/, "");
+  return ["add", "change", "update", "clear"].some(
+    (action) => path === `${root}/cart/${action}` || path === `${root}/cart/${action}.js`,
+  );
+}
+
+function notifyHandlers(): void {
+  for (const handler of handlers) {
+    try {
+      handler();
+    } catch {
+      // Cart observers must never affect the storefront's own mutation flow.
+    }
+  }
+}
+
+function handleFormSubmit(event: Event): void {
+  const form = event.target;
+  if (!(form instanceof HTMLFormElement) || !isShopifyCartMutation(form.action)) return;
+  queueMicrotask(notifyHandlers);
+}
+
+function install(): void {
+  if (originalFetch || typeof window.fetch !== "function") return;
+  originalFetch = window.fetch;
+  const nativeFetch = originalFetch.bind(window);
+  wrappedFetch = function(...args: Parameters<typeof fetch>) {
+    const shouldNotify = suppressNotifications === 0 && isShopifyCartMutation(args[0]);
+    const result = nativeFetch(...args);
+    if (shouldNotify) {
+      result.then((response) => {
+        if (response.ok) notifyHandlers();
+      }, () => {
+        // Observe without changing or consuming the caller's rejection.
+      });
+    }
+    return result;
+  };
+  window.fetch = wrappedFetch;
+  document.addEventListener("submit", handleFormSubmit, true);
+  formListenerInstalled = true;
+}
+
+function uninstall(): void {
+  if (formListenerInstalled) {
+    document.removeEventListener("submit", handleFormSubmit, true);
+    formListenerInstalled = false;
+  }
+  if (originalFetch && window.fetch === wrappedFetch) window.fetch = originalFetch;
+  wrappedFetch = null;
+  originalFetch = null;
+}
+
+export function onShopifyCartMutation(handler: ShopifyCartMutationHandler): () => void {
+  handlers.add(handler);
+  install();
+  return () => {
+    handlers.delete(handler);
+    if (handlers.size === 0) uninstall();
+  };
+}
+
+/**
+ * Use for Apex's own cart-attribute write so it does not recursively look like
+ * a shopper/theme mutation to subscribers of the shared fetch wrapper.
+ */
+export function fetchWithoutShopifyCartMutationNotification(
+  ...args: Parameters<typeof fetch>
+): ReturnType<typeof fetch> {
+  suppressNotifications += 1;
+  try {
+    const activeFetch = typeof window.fetch === "function"
+      ? window.fetch
+      : globalThis.fetch;
+    return activeFetch.call(window, ...args);
+  } finally {
+    suppressNotifications -= 1;
+  }
+}