@weaverse/hydrogen 5.16.1 → 5.16.3

package/dist/index.d.mts

@@ -256,10 +256,18 @@ type WithWeaverseOptions = {
     t?: TranslateFunction;
 };
 /**
- * Higher-order component that wraps your app with Weaverse theme settings
- * and translation context.
+ * Higher-order component that wraps your app with Weaverse theme settings and
+ * translation context, and mounts the Studio connect bridge.
  *
- * @param Component - The root component to wrap
+ * Export the result as your root route's **`Layout`** (not the default route
+ * `Component`). In React Router the root `Layout` wraps both the matched route
+ * and its `ErrorBoundary`, so the Studio bridge keeps rendering on 404s and
+ * loader/render errors — exactly the pages where Studio must still answer its
+ * handshake instead of reporting a false "Connection lost". A default-component
+ * wrapper (`export default withWeaverse(App)`) is replaced by the error
+ * boundary on those routes and would drop the bridge.
+ *
+ * @param Component - The root layout component to wrap
  * @param options   - Optional configuration (e.g. an external `t` function)
  * @returns Wrapped component with theme settings + translation providers
  *
@@ -267,11 +275,11 @@ type WithWeaverseOptions = {
  * ```typescript
  * import { withWeaverse } from '@weaverse/hydrogen'
  *
- * // Basic usage
- * export default withWeaverse(App)
+ * // Basic usage — export as the root route Layout
+ * export const Layout = withWeaverse(RootLayout)
  *
- * // With external translation function
- * export default withWeaverse(App, { t: myI18nFunction })
+ * // With an external translation function
+ * export const Layout = withWeaverse(RootLayout, { t: myI18nFunction })
  * ```
  */
 declare function withWeaverse(Component: ComponentType<any>, options?: WithWeaverseOptions): (props: JSX.IntrinsicAttributes) => react_jsx_runtime.JSX.Element;
@@ -394,6 +402,7 @@ declare class WeaverseClient {
      * Returns same format as withCache.fetch for consistency.
      * Includes 10-second timeout to prevent hanging requests.
      */
+    private readonly fetchOnce;
     private readonly directFetch;
     private getApiUrl;
     private isExternalPublicApiUrl;

package/dist/index.d.ts

@@ -256,10 +256,18 @@ type WithWeaverseOptions = {
     t?: TranslateFunction;
 };
 /**
- * Higher-order component that wraps your app with Weaverse theme settings
- * and translation context.
+ * Higher-order component that wraps your app with Weaverse theme settings and
+ * translation context, and mounts the Studio connect bridge.
  *
- * @param Component - The root component to wrap
+ * Export the result as your root route's **`Layout`** (not the default route
+ * `Component`). In React Router the root `Layout` wraps both the matched route
+ * and its `ErrorBoundary`, so the Studio bridge keeps rendering on 404s and
+ * loader/render errors — exactly the pages where Studio must still answer its
+ * handshake instead of reporting a false "Connection lost". A default-component
+ * wrapper (`export default withWeaverse(App)`) is replaced by the error
+ * boundary on those routes and would drop the bridge.
+ *
+ * @param Component - The root layout component to wrap
  * @param options   - Optional configuration (e.g. an external `t` function)
  * @returns Wrapped component with theme settings + translation providers
  *
@@ -267,11 +275,11 @@ type WithWeaverseOptions = {
  * ```typescript
  * import { withWeaverse } from '@weaverse/hydrogen'
  *
- * // Basic usage
- * export default withWeaverse(App)
+ * // Basic usage — export as the root route Layout
+ * export const Layout = withWeaverse(RootLayout)
  *
- * // With external translation function
- * export default withWeaverse(App, { t: myI18nFunction })
+ * // With an external translation function
+ * export const Layout = withWeaverse(RootLayout, { t: myI18nFunction })
  * ```
  */
 declare function withWeaverse(Component: ComponentType<any>, options?: WithWeaverseOptions): (props: JSX.IntrinsicAttributes) => react_jsx_runtime.JSX.Element;
@@ -394,6 +402,7 @@ declare class WeaverseClient {
      * Returns same format as withCache.fetch for consistency.
      * Includes 10-second timeout to prevent hanging requests.
      */
+    private readonly fetchOnce;
     private readonly directFetch;
     private getApiUrl;
     private isExternalPublicApiUrl;

package/dist/index.js

@@ -251,6 +251,67 @@ function hasWeaverseStudio(window2) {
   return "weaverseStudio" in window2 && typeof window2.weaverseStudio === "object";
 }
 
+// src/utils/studio-script-src.ts
+var DEFAULT_WEAVERSE_HOST = "https://studio.weaverse.io";
+var TRUSTED_STUDIO_DOMAINS = ["weaverse.io", "weaverse.dev"];
+function isLoopbackHostname(hostname) {
+  return hostname === "localhost" || hostname === "127.0.0.1" || hostname.endsWith(".localhost");
+}
+function isTrustedStudioHost(host, options) {
+  let parsed;
+  try {
+    parsed = new URL(host);
+  } catch {
+    return false;
+  }
+  let { hostname, protocol } = parsed;
+  if (options?.allowLoopback && isLoopbackHostname(hostname)) {
+    return protocol === "http:" || protocol === "https:";
+  }
+  if (protocol !== "https:") {
+    return false;
+  }
+  return TRUSTED_STUDIO_DOMAINS.some(
+    (domain) => hostname === domain || hostname.endsWith(`.${domain}`)
+  );
+}
+function getStudioScriptSrc(mode) {
+  let {
+    isDesignMode,
+    isPreviewMode,
+    isRevisionPreview,
+    weaverseHost,
+    weaverseVersion
+  } = mode;
+  let base = `${weaverseHost}/static/studio/hydrogen`;
+  let version = `?v=${weaverseVersion}`;
+  if (isRevisionPreview || isPreviewMode) {
+    return `${base}/preview.js${version}`;
+  }
+  if (isDesignMode) {
+    return `${base}/index.js${version}`;
+  }
+  return null;
+}
+function resolveStudioScriptSrc(search, storefrontHostname = "") {
+  let params = new URLSearchParams(search);
+  let last = (key) => params.getAll(key).at(-1);
+  let host = last("weaverseHost");
+  if (host) {
+    let allowLoopback = isLoopbackHostname(storefrontHostname);
+    if (!isTrustedStudioHost(host, { allowLoopback })) {
+      return null;
+    }
+  }
+  return getStudioScriptSrc({
+    isDesignMode: last("isDesignMode") === "true",
+    isPreviewMode: last("isPreviewMode") === "true",
+    isRevisionPreview: params.has("__revisionId"),
+    weaverseHost: host || DEFAULT_WEAVERSE_HOST,
+    weaverseVersion: last("weaverseVersion") || ""
+  });
+}
+
 // src/utils/index.ts
 var warnedTypes = /* @__PURE__ */ new Set();
 function logOnce(type, message) {
@@ -314,8 +375,9 @@ function getWeaverseConfigs(request, env) {
   let url = new URL(request.url);
   let isRevisionPreview = url.searchParams.has("__revisionId");
   let configuredWeaverseHost = WEAVERSE_HOST || envFromProcess.WEAVERSE_HOST;
-  let resolvedWeaverseHost = weaverseHost || configuredWeaverseHost || "https://studio.weaverse.io";
-  let resolvedWeaverseApiBase = weaverseHost ? weaverseHost : WEAVERSE_PUBLIC_API_BASE || envFromProcess.WEAVERSE_PUBLIC_API_BASE || (configuredWeaverseHost && configuredWeaverseHost !== "https://studio.weaverse.io" ? configuredWeaverseHost : "https://api.weaverse.io");
+  let trustedUrlHost = typeof weaverseHost === "string" && isTrustedStudioHost(weaverseHost) ? weaverseHost : "";
+  let resolvedWeaverseHost = trustedUrlHost || configuredWeaverseHost || "https://studio.weaverse.io";
+  let resolvedWeaverseApiBase = trustedUrlHost ? trustedUrlHost : WEAVERSE_PUBLIC_API_BASE || envFromProcess.WEAVERSE_PUBLIC_API_BASE || (configuredWeaverseHost && configuredWeaverseHost !== "https://studio.weaverse.io" ? configuredWeaverseHost : "https://api.weaverse.io");
   return {
     projectId: weaverseProjectId || WEAVERSE_PROJECT_ID || envFromProcess.WEAVERSE_PROJECT_ID || "",
     weaverseHost: resolvedWeaverseHost,
@@ -720,6 +782,16 @@ function waitForStudio() {
     check();
   });
 }
+function useStudioConnect() {
+  let { search } = reactRouter.useLocation();
+  react$1.useEffect(() => {
+    let hostname = typeof window === "undefined" ? "" : window.location.hostname;
+    let src = resolveStudioScriptSrc(search, hostname);
+    if (src) {
+      react.loadScript(src).catch(console.error);
+    }
+  }, [search]);
+}
 function useStudio(weaverse) {
   let { revalidate } = reactRouter.useRevalidator();
   let navigation = reactRouter.useNavigation();
@@ -735,22 +807,31 @@ function useStudio(weaverse) {
     isRevisionPreview
   } = weaverse;
   react$1.useEffect(() => {
-    if (navigation.state === "idle") {
-      if (isRevisionPreview || isPreviewMode) {
-        let previewSrc = `${weaverseHost}/static/studio/hydrogen/preview.js?v=${weaverseVersion}`;
-        react.loadScript(previewSrc).catch(console.error);
-      } else if (isDesignMode) {
-        weaverse.internal = {
-          ...weaverse.internal,
-          navigate,
-          revalidate,
-          merchantOverrides,
-          themeSettingsStore,
-          themeTextStore
-        };
-        let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
-        react.loadScript(studioSrc).then(waitForStudio).then((studio) => studio?.init(weaverse)).catch(console.error);
-      }
+    if (navigation.state !== "idle") {
+      return;
+    }
+    let src = getStudioScriptSrc({
+      isDesignMode,
+      isPreviewMode,
+      isRevisionPreview,
+      weaverseHost,
+      weaverseVersion
+    });
+    if (!src) {
+      return;
+    }
+    if (isRevisionPreview || isPreviewMode) {
+      react.loadScript(src).catch(console.error);
+    } else {
+      weaverse.internal = {
+        ...weaverse.internal,
+        navigate,
+        revalidate,
+        merchantOverrides,
+        themeSettingsStore,
+        themeTextStore
+      };
+      react.loadScript(src).then(waitForStudio).then((studio) => studio?.init(weaverse)).catch(console.error);
     }
   }, [pathname, search, navigation.state]);
   usePixel(weaverse);
@@ -959,6 +1040,10 @@ var StudioBridge = react$1.memo(({ context }) => {
   useStudio(context);
   return null;
 });
+var StudioConnect = react$1.memo(() => {
+  useStudioConnect();
+  return null;
+});
 var registeredComponentLists = /* @__PURE__ */ new WeakSet();
 function RenderRoot(props) {
   const { data, components, dataContext } = props;
@@ -1046,14 +1131,17 @@ function withWeaverse(Component, options) {
     if (!themeTextStoreRef.current) {
       themeTextStoreRef.current = new ThemeTextStore();
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(ThemeSettingsStoreContext.Provider, { value: themeSettingsStore, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ThemeSettingsStoreContext.Provider, { value: themeSettingsStore, children: /* @__PURE__ */ jsxRuntime.jsxs(
       ThemeTextProvider,
       {
         merchantOverrides: themeTextData.merchantOverrides,
         staticContent: themeTextData.staticContent,
         t: options?.t,
         themeTextStore: themeTextStoreRef.current,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props })
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StudioConnect, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props })
+        ]
       }
     ) });
   };
@@ -1089,7 +1177,11 @@ function normalizePageUrl(url) {
   );
   kept.sort(([a], [b]) => a.localeCompare(b));
   const search = new URLSearchParams(kept).toString();
-  return `${parsed.origin}${parsed.pathname}${search ? `?${search}` : ""}`;
+  let { pathname } = parsed;
+  if (pathname.endsWith(".data")) {
+    pathname = pathname.slice(0, -".data".length);
+  }
+  return `${parsed.origin}${pathname}${search ? `?${search}` : ""}`;
 }
 
 // src/weaverse-client.ts
@@ -1104,6 +1196,17 @@ var CACHE_DURATIONS = {
   STATIC: 3600
 };
 var DEFAULT_FETCH_TIMEOUT_MS = 1e4;
+var MAX_FETCH_ATTEMPTS = 2;
+var FETCH_RETRY_BACKOFF_MS = 300;
+function isRetryableFetchError(error) {
+  if (!(error instanceof WeaverseError)) {
+    return false;
+  }
+  if (error.code === "TIMEOUT_ERROR" || error.code === "NETWORK_ERROR") {
+    return true;
+  }
+  return error.code === "FETCH_ERROR" && (error.statusCode ?? 0) >= 500;
+}
 var API_PATH = "v1";
 var DEFAULT_CACHE_STRATEGY = {
   maxAge: CACHE_DURATIONS.SHORT,
@@ -1394,7 +1497,7 @@ var WeaverseClient = class {
    * Returns same format as withCache.fetch for consistency.
    * Includes 10-second timeout to prevent hanging requests.
    */
-  directFetch = async (url, options = {}, timeoutMs = this.fetchTimeoutMs) => {
+  fetchOnce = async (url, options, timeoutMs) => {
     const controller = new AbortController();
     const timeoutId = setTimeout(
       () => controller.abort(),
@@ -1440,6 +1543,23 @@ var WeaverseClient = class {
       }
     }
   };
+  directFetch = async (url, options = {}, timeoutMs = this.fetchTimeoutMs) => {
+    let lastError;
+    for (let attempt = 1; attempt <= MAX_FETCH_ATTEMPTS; attempt++) {
+      try {
+        return await this.fetchOnce(url, options, timeoutMs);
+      } catch (err) {
+        lastError = err;
+        if (attempt >= MAX_FETCH_ATTEMPTS || !isRetryableFetchError(err)) {
+          throw err;
+        }
+        await new Promise(
+          (resolve) => setTimeout(resolve, FETCH_RETRY_BACKOFF_MS * attempt)
+        );
+      }
+    }
+    throw lastError;
+  };
   // Helper method for building API URLs consistently
   getApiUrl(endpoint) {
     const { weaverseApiBase } = this.configs;