@thor-commerce/app-bridge-react 0.7.3 → 0.8.0

package/dist/index.cjs

@@ -23,8 +23,12 @@ __export(index_exports, {
   AppBridge: () => AppBridge,
   AppBridgeProvider: () => AppBridgeProvider,
   EMBEDDED_LAUNCH_PARAMS: () => EMBEDDED_LAUNCH_PARAMS,
+  EmbeddedAppRuntime: () => EmbeddedAppRuntime,
+  THOR_NAVIGATE_EVENT: () => THOR_NAVIGATE_EVENT,
   buildNavigationUpdatePayload: () => buildNavigationUpdatePayload,
   createAppBridge: () => createAppBridge,
+  getEmbeddedAppRuntime: () => getEmbeddedAppRuntime,
+  getOrCreateEmbeddedAppRuntime: () => getOrCreateEmbeddedAppRuntime,
   isBridgeMessage: () => isBridgeMessage,
   normalizeBridgeNavigationItem: () => normalizeBridgeNavigationItem,
   normalizeBridgeNavigationItems: () => normalizeBridgeNavigationItems,
@@ -539,242 +543,155 @@ function createAppBridge(options = {}) {
 
 // src/react.tsx
 var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var AppBridgeContext = (0, import_react.createContext)(null);
-function AppBridgeProvider({
-  children,
-  clientId,
-  currentPath,
-  navigationItems,
-  navigationEventType = "navigation:go",
-  navigationUpdateEventType = "navigation:update",
-  namespace,
-  onNavigate,
-  readyEventType = "app:ready",
-  readyPayload,
-  requestTimeoutMs,
-  selfWindow,
-  targetOrigin,
-  targetWindow
-}) {
-  const [bridge, setBridge] = (0, import_react.useState)(null);
-  const onNavigateRef = (0, import_react.useRef)(onNavigate);
-  const normalizedNavigationItems = (0, import_react.useMemo)(
-    () => normalizeBridgeNavigationItems(navigationItems),
-    [navigationItems]
-  );
-  const sessionTokenCacheRef = (0, import_react.useRef)(null);
-  const projectRef = (0, import_react.useRef)(readInitialProject(selfWindow));
-  const pendingSessionTokenRef = (0, import_react.useRef)(null);
-  (0, import_react.useEffect)(() => {
-    onNavigateRef.current = onNavigate;
-  }, [onNavigate]);
-  (0, import_react.useEffect)(() => {
-    if (typeof window === "undefined" && !selfWindow) {
-      return;
+
+// src/runtime.ts
+var GLOBAL_RUNTIME_KEY = "__thorEmbeddedAppRuntime__";
+var THOR_NAVIGATE_EVENT = "thor:navigate";
+var EmbeddedAppRuntime = class {
+  constructor(config) {
+    this.currentPath = null;
+    this.navigationItems = [];
+    this.navigationEventType = "navigation:go";
+    this.navigationUpdateEventType = "navigation:update";
+    this.readyEventType = "app:ready";
+    this.sessionTokenCache = null;
+    this.pendingSessionToken = null;
+    const resolvedWindow = config.selfWindow ?? (typeof window !== "undefined" ? window : void 0);
+    if (!resolvedWindow) {
+      throw new Error("EmbeddedAppRuntime requires a browser window.");
     }
-    const resolvedTargetOrigin = targetOrigin ?? getReferrerOrigin(selfWindow);
-    const resolvedAllowedOrigins = resolvedTargetOrigin ? [resolvedTargetOrigin] : void 0;
-    const nextBridge = createAppBridge({
-      allowedOrigins: resolvedAllowedOrigins,
-      clientId,
-      namespace,
-      requestTimeoutMs,
-      selfWindow,
+    this.selfWindow = resolvedWindow;
+    this.targetOrigin = config.targetOrigin ?? getReferrerOrigin(resolvedWindow);
+    this.clientId = config.clientId;
+    this.project = readInitialProject(resolvedWindow);
+    this.readyPayload = config.readyPayload ?? { clientId: config.clientId };
+    this.bridge = createAppBridge({
+      allowedOrigins: this.targetOrigin ? [this.targetOrigin] : void 0,
+      namespace: config.namespace,
+      requestTimeoutMs: config.requestTimeoutMs,
+      selfWindow: resolvedWindow,
       source: "embedded-app",
       target: "dashboard",
-      targetOrigin: resolvedTargetOrigin,
-      targetWindow
+      targetOrigin: this.targetOrigin,
+      targetWindow: config.targetWindow
     });
-    setBridge(nextBridge);
-    return () => {
-      setBridge((currentBridge) => currentBridge === nextBridge ? null : currentBridge);
-      nextBridge.destroy();
-    };
-  }, [
-    clientId,
-    namespace,
-    requestTimeoutMs,
-    selfWindow,
-    targetOrigin,
-    targetWindow
-  ]);
-  (0, import_react.useEffect)(() => {
-    if (!bridge || !bridge.hasTargetWindow()) {
-      return;
-    }
-    bridge.send(
-      readyEventType,
-      readyPayload ?? {
-        clientId
-      }
-    );
-  }, [bridge, clientId, readyEventType, readyPayload]);
-  (0, import_react.useEffect)(() => {
-    if (!bridge || !bridge.hasTargetWindow()) {
-      return;
-    }
-    bridge.send("navigation:items:update", {
-      items: normalizedNavigationItems
-    });
-  }, [bridge, normalizedNavigationItems]);
-  (0, import_react.useEffect)(() => {
-    if (!bridge || !bridge.hasTargetWindow() || !currentPath) {
-      return;
-    }
-    bridge.send(navigationUpdateEventType, buildNavigationUpdatePayload(currentPath));
-  }, [bridge, currentPath, navigationUpdateEventType]);
-  (0, import_react.useEffect)(() => {
-    if (!bridge || !onNavigate) {
-      return;
-    }
-    return bridge.on(navigationEventType, (message) => {
+    this.removeNavigationRequestHandler = this.bridge.on(this.navigationEventType, (message) => {
       const destination = resolveNavigationDestination(message.payload);
       if (!destination) {
         return;
       }
       const nextPath = preserveEmbeddedAppLaunchParams(
         destination,
-        typeof window !== "undefined" ? window.location.href : void 0
+        this.selfWindow.location.href
       );
-      onNavigateRef.current?.(nextPath ?? destination, message);
+      this.navigate(nextPath ?? destination, message);
     });
-  }, [bridge, navigationEventType, onNavigate]);
-  (0, import_react.useEffect)(() => {
-    if (!bridge || !onNavigate || typeof document === "undefined" || typeof window === "undefined") {
-      return;
-    }
-    const handleLocalNavigation = (path) => {
-      const sanitizedPath = sanitizeEmbeddedAppPath(path);
-      if (!sanitizedPath) {
-        return;
-      }
-      const nextPath = preserveEmbeddedAppLaunchParams(
-        sanitizedPath,
-        window.location.href
-      );
-      onNavigateRef.current?.(nextPath ?? sanitizedPath);
-    };
-    const handleDocumentClick = (event) => {
-      if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {
-        return;
-      }
-      const target = event.target;
-      if (!(target instanceof Element)) {
-        return;
-      }
-      const anchor = target.closest("a[href]");
-      if (!(anchor instanceof HTMLAnchorElement)) {
-        return;
-      }
-      if (anchor.hasAttribute("download")) {
-        return;
-      }
-      const targetWindow2 = anchor.target.toLowerCase();
-      const href = anchor.getAttribute("href");
-      if (!href) {
-        return;
-      }
-      if (targetWindow2 === "_top" || targetWindow2 === "_parent") {
-        event.preventDefault();
-        bridge.redirectToRemote(anchor.href);
-        return;
-      }
-      if (targetWindow2 && targetWindow2 !== "_self") {
-        return;
-      }
-      const nextPath = resolveLocalNavigationPath(href, window.location.origin);
-      if (!nextPath) {
-        return;
-      }
-      event.preventDefault();
-      handleLocalNavigation(nextPath);
-    };
-    const originalOpen = window.open.bind(window);
-    window.open = (url, target, features) => {
-      if (url == null) {
-        return originalOpen(url, target, features);
-      }
-      const href = typeof url === "string" ? url : url.toString();
-      const targetName = (target ?? "").toLowerCase();
-      if (targetName === "_top" || targetName === "_parent") {
-        bridge.redirectToRemote(new URL(href, window.location.href).toString());
-        return null;
+    this.removeNavigationInterceptors = installNavigationInterceptors({
+      bridge: this.bridge,
+      selfWindow: this.selfWindow,
+      navigate: (path) => this.navigate(path)
+    });
+    this.restoreFetch = installFetchInterceptor({
+      bridge: this.bridge,
+      getClientId: () => this.clientId,
+      getProject: () => this.project,
+      setProject: (project) => {
+        this.project = project;
+      },
+      readCachedToken: () => this.sessionTokenCache,
+      writeCachedToken: (token) => {
+        this.sessionTokenCache = token;
+      },
+      readPendingToken: () => this.pendingSessionToken,
+      writePendingToken: (token) => {
+        this.pendingSessionToken = token;
       }
-      if (!targetName || targetName === "_self") {
-        const nextPath = resolveLocalNavigationPath(href, window.location.origin);
-        if (nextPath) {
-          handleLocalNavigation(nextPath);
-          return window;
-        }
+    });
+    this.update(config);
+  }
+  update(config) {
+    if (config.clientId) {
+      this.clientId = config.clientId;
+      if (!this.readyPayload || typeof this.readyPayload === "object" && this.readyPayload !== null && "clientId" in this.readyPayload) {
+        this.readyPayload = config.readyPayload ?? { clientId: config.clientId };
       }
-      return originalOpen(url, target, features);
-    };
-    document.addEventListener("click", handleDocumentClick, true);
-    return () => {
-      document.removeEventListener("click", handleDocumentClick, true);
-      window.open = originalOpen;
-    };
-  }, [bridge, onNavigate]);
-  (0, import_react.useEffect)(() => {
-    if (!bridge || typeof window === "undefined") {
+    }
+    if (config.currentPath !== void 0) {
+      this.currentPath = config.currentPath;
+    }
+    if (config.navigationItems !== void 0) {
+      this.navigationItems = normalizeBridgeNavigationItems(config.navigationItems);
+    }
+    if (config.onNavigate !== void 0) {
+      this.onNavigate = config.onNavigate;
+    }
+    if (config.readyEventType) {
+      this.readyEventType = config.readyEventType;
+    }
+    if (config.readyPayload !== void 0) {
+      this.readyPayload = config.readyPayload;
+    }
+    if (config.targetWindow !== void 0) {
+      this.bridge.setTargetWindow(config.targetWindow ?? null);
+    }
+    this.syncBridgeState();
+  }
+  clearNavigationHandler() {
+    this.onNavigate = void 0;
+  }
+  destroy() {
+    this.removeNavigationRequestHandler?.();
+    this.removeNavigationInterceptors();
+    this.restoreFetch();
+    this.bridge.destroy();
+  }
+  syncBridgeState() {
+    if (!this.bridge.hasTargetWindow()) {
       return;
     }
-    const originalFetch = globalThis.fetch.bind(globalThis);
-    const interceptedFetch = async (input, init) => {
-      if (!shouldAttachSessionToken(input)) {
-        return originalFetch(input, init);
-      }
-      const existingAuthorization = getExistingAuthorization(input, init);
-      if (existingAuthorization) {
-        return originalFetch(input, init);
-      }
-      const nextHeaders = new Headers(
-        input instanceof Request ? input.headers : init?.headers
+    this.bridge.send(this.readyEventType, this.readyPayload);
+    this.bridge.send("navigation:items:update", {
+      items: this.navigationItems
+    });
+    if (this.currentPath) {
+      this.bridge.send(
+        this.navigationUpdateEventType,
+        buildNavigationUpdatePayload(this.currentPath)
       );
-      if (projectRef.current && !nextHeaders.has("X-Thor-Project")) {
-        nextHeaders.set("X-Thor-Project", projectRef.current);
-      }
-      try {
-        const sessionToken = await getSessionToken({
-          bridge,
-          clientId,
-          pendingSessionTokenRef,
-          projectRef,
-          sessionTokenCacheRef
-        });
-        nextHeaders.set("Authorization", `Bearer ${sessionToken}`);
-      } catch {
-        if (!projectRef.current) {
-          throw new Error("Missing Thor embedded session token");
-        }
-      }
-      if (!nextHeaders.has("X-Requested-With")) {
-        nextHeaders.set("X-Requested-With", "XMLHttpRequest");
-      }
-      if (input instanceof Request) {
-        return originalFetch(
-          new Request(input, {
-            headers: nextHeaders
-          })
-        );
-      }
-      return originalFetch(input, {
-        ...init,
-        headers: nextHeaders
-      });
-    };
-    globalThis.fetch = interceptedFetch;
-    window.fetch = interceptedFetch;
-    return () => {
-      globalThis.fetch = originalFetch;
-      window.fetch = originalFetch;
-    };
-  }, [bridge, clientId]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppBridgeContext.Provider, { value: bridge, children });
+    }
+  }
+  navigate(path, message) {
+    if (this.onNavigate) {
+      this.onNavigate(path, message);
+      return;
+    }
+    if (dispatchNavigateEvent(this.selfWindow.document, path)) {
+      return;
+    }
+    this.selfWindow.location.assign(path);
+  }
+};
+function getOrCreateEmbeddedAppRuntime(config) {
+  const globalScope = globalThis;
+  const existingRuntime = globalScope[GLOBAL_RUNTIME_KEY];
+  if (existingRuntime) {
+    existingRuntime.update(config);
+    return existingRuntime;
+  }
+  const runtime = new EmbeddedAppRuntime(config);
+  globalScope[GLOBAL_RUNTIME_KEY] = runtime;
+  return runtime;
 }
-function useAppBridge() {
-  return (0, import_react.useContext)(AppBridgeContext);
+function getEmbeddedAppRuntime() {
+  return globalThis[GLOBAL_RUNTIME_KEY] ?? null;
+}
+function dispatchNavigateEvent(document, path) {
+  const event = new CustomEvent(THOR_NAVIGATE_EVENT, {
+    cancelable: true,
+    detail: { path }
+  });
+  document.dispatchEvent(event);
+  return event.defaultPrevented;
 }
 function getReferrerOrigin(explicitWindow) {
   const resolvedWindow = explicitWindow ?? (typeof window !== "undefined" ? window : void 0);
@@ -788,40 +705,190 @@ function getReferrerOrigin(explicitWindow) {
     return void 0;
   }
 }
+function installNavigationInterceptors({
+  bridge,
+  selfWindow,
+  navigate
+}) {
+  const document = selfWindow.document;
+  const handleLocalNavigation = (path) => {
+    const sanitizedPath = sanitizeEmbeddedAppPath(path);
+    if (!sanitizedPath) {
+      return;
+    }
+    const nextPath = preserveEmbeddedAppLaunchParams(
+      sanitizedPath,
+      selfWindow.location.href
+    );
+    navigate(nextPath ?? sanitizedPath);
+  };
+  const handleDocumentClick = (event) => {
+    if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {
+      return;
+    }
+    const target = event.target;
+    if (!(target instanceof Element)) {
+      return;
+    }
+    const anchor = target.closest("a[href]");
+    if (!(anchor instanceof HTMLAnchorElement)) {
+      return;
+    }
+    if (anchor.hasAttribute("download")) {
+      return;
+    }
+    const targetWindow = anchor.target.toLowerCase();
+    const href = anchor.getAttribute("href");
+    if (!href) {
+      return;
+    }
+    if (targetWindow === "_top" || targetWindow === "_parent") {
+      event.preventDefault();
+      bridge.redirectToRemote(anchor.href);
+      return;
+    }
+    if (targetWindow && targetWindow !== "_self") {
+      return;
+    }
+    const nextPath = resolveLocalNavigationPath(href, selfWindow.location.origin);
+    if (!nextPath) {
+      return;
+    }
+    event.preventDefault();
+    handleLocalNavigation(nextPath);
+  };
+  const originalOpen = selfWindow.open.bind(selfWindow);
+  selfWindow.open = (url, target, features) => {
+    if (url == null) {
+      return originalOpen(url, target, features);
+    }
+    const href = typeof url === "string" ? url : url.toString();
+    const targetName = (target ?? "").toLowerCase();
+    if (targetName === "_top" || targetName === "_parent") {
+      bridge.redirectToRemote(new URL(href, selfWindow.location.href).toString());
+      return null;
+    }
+    if (!targetName || targetName === "_self") {
+      const nextPath = resolveLocalNavigationPath(
+        href,
+        selfWindow.location.origin
+      );
+      if (nextPath) {
+        handleLocalNavigation(nextPath);
+        return selfWindow;
+      }
+    }
+    return originalOpen(url, target, features);
+  };
+  document.addEventListener("click", handleDocumentClick, true);
+  return () => {
+    document.removeEventListener("click", handleDocumentClick, true);
+    selfWindow.open = originalOpen;
+  };
+}
+function installFetchInterceptor({
+  bridge,
+  getClientId,
+  getProject,
+  setProject,
+  readCachedToken,
+  writeCachedToken,
+  readPendingToken,
+  writePendingToken
+}) {
+  if (typeof window === "undefined") {
+    return () => {
+    };
+  }
+  const originalFetch = globalThis.fetch.bind(globalThis);
+  const interceptedFetch = async (input, init) => {
+    if (!shouldAttachSessionToken(input)) {
+      return originalFetch(input, init);
+    }
+    const existingAuthorization = getExistingAuthorization(input, init);
+    if (existingAuthorization) {
+      return originalFetch(input, init);
+    }
+    const nextHeaders = new Headers(
+      input instanceof Request ? input.headers : init?.headers
+    );
+    try {
+      const sessionToken = await getSessionToken({
+        bridge,
+        clientId: getClientId(),
+        project: getProject,
+        setProject,
+        readCachedToken,
+        writeCachedToken,
+        readPendingToken,
+        writePendingToken
+      });
+      nextHeaders.set("Authorization", `Bearer ${sessionToken}`);
+    } catch {
+      if (!getProject()) {
+        throw new Error("Missing Thor embedded session token");
+      }
+    }
+    if (!nextHeaders.has("X-Requested-With")) {
+      nextHeaders.set("X-Requested-With", "XMLHttpRequest");
+    }
+    if (input instanceof Request) {
+      return originalFetch(
+        new Request(input, {
+          headers: nextHeaders
+        })
+      );
+    }
+    return originalFetch(input, {
+      ...init,
+      headers: nextHeaders
+    });
+  };
+  globalThis.fetch = interceptedFetch;
+  window.fetch = interceptedFetch;
+  return () => {
+    globalThis.fetch = originalFetch;
+    window.fetch = originalFetch;
+  };
+}
 async function getSessionToken({
   bridge,
   clientId,
-  pendingSessionTokenRef,
-  projectRef,
-  sessionTokenCacheRef
+  project,
+  setProject,
+  readCachedToken,
+  writeCachedToken,
+  readPendingToken,
+  writePendingToken
 }) {
-  const cachedToken = sessionTokenCacheRef.current;
+  const cachedToken = readCachedToken();
   if (cachedToken && !isExpired(cachedToken.expiresAt)) {
     return cachedToken.token;
   }
-  if (pendingSessionTokenRef.current) {
-    return pendingSessionTokenRef.current;
+  const pendingToken = readPendingToken();
+  if (pendingToken) {
+    return pendingToken;
   }
-  const pendingToken = bridge.getSessionToken({ clientId }).then((response) => {
+  const nextPendingToken = bridge.getSessionToken({ clientId }).then((response) => {
     const token = response.sessionToken ?? response.idToken;
     if (!token) {
       throw new Error("Missing Thor embedded session token");
     }
     if (response.project) {
-      projectRef.current = response.project;
+      setProject(response.project);
     }
-    sessionTokenCacheRef.current = {
+    writeCachedToken({
       token,
       expiresAt: normalizeTokenExpiry(token, response.exp)
-    };
-    pendingSessionTokenRef.current = null;
+    });
+    writePendingToken(null);
     return token;
   }).catch((error) => {
-    pendingSessionTokenRef.current = null;
+    writePendingToken(null);
     throw error;
   });
-  pendingSessionTokenRef.current = pendingToken;
-  return pendingToken;
+  writePendingToken(nextPendingToken);
+  return nextPendingToken;
 }
 function shouldAttachSessionToken(input) {
   if (typeof window === "undefined") {
@@ -887,13 +954,84 @@ function readInitialProject(explicitWindow) {
     return null;
   }
 }
+
+// src/react.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var AppBridgeContext = (0, import_react.createContext)(null);
+function AppBridgeProvider({
+  children,
+  clientId,
+  currentPath,
+  navigationItems,
+  navigationEventType = "navigation:go",
+  navigationUpdateEventType = "navigation:update",
+  namespace,
+  onNavigate,
+  readyEventType = "app:ready",
+  readyPayload,
+  requestTimeoutMs,
+  selfWindow,
+  targetOrigin,
+  targetWindow
+}) {
+  const [bridge, setBridge] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined" && !selfWindow) {
+      return;
+    }
+    const runtime = getOrCreateEmbeddedAppRuntime({
+      clientId,
+      currentPath,
+      navigationEventType,
+      navigationItems,
+      navigationUpdateEventType,
+      namespace,
+      onNavigate,
+      readyEventType,
+      readyPayload,
+      requestTimeoutMs,
+      selfWindow,
+      targetOrigin,
+      targetWindow
+    });
+    setBridge(runtime.bridge);
+    return () => {
+      runtime.clearNavigationHandler();
+      setBridge(
+        (currentBridge) => currentBridge === runtime.bridge ? null : currentBridge
+      );
+    };
+  }, [
+    clientId,
+    currentPath,
+    navigationEventType,
+    navigationItems,
+    navigationUpdateEventType,
+    namespace,
+    onNavigate,
+    readyEventType,
+    readyPayload,
+    requestTimeoutMs,
+    selfWindow,
+    targetOrigin,
+    targetWindow
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AppBridgeContext.Provider, { value: bridge, children });
+}
+function useAppBridge() {
+  return (0, import_react.useContext)(AppBridgeContext);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppBridge,
   AppBridgeProvider,
   EMBEDDED_LAUNCH_PARAMS,
+  EmbeddedAppRuntime,
+  THOR_NAVIGATE_EVENT,
   buildNavigationUpdatePayload,
   createAppBridge,
+  getEmbeddedAppRuntime,
+  getOrCreateEmbeddedAppRuntime,
   isBridgeMessage,
   normalizeBridgeNavigationItem,
   normalizeBridgeNavigationItems,