@weaverse/hydrogen 5.13.0 → 5.13.1

package/dist/index.d.mts

@@ -131,6 +131,8 @@ declare function ThemeTextProvider({ staticContent, merchantOverrides, t: extern
  */
 declare function useThemeText(): ThemeTextValue;
 
+type WeaverseDataValue = WeaverseLoaderData | Promise<WeaverseLoaderData> | null;
+
 declare class WeaverseHydrogenItem extends WeaverseItemStore {
     weaverse: WeaverseHydrogen;
     /**
@@ -226,12 +228,22 @@ declare class WeaverseHydrogen extends Weaverse {
  * ```
  */
 declare function registerComponent(element: HydrogenElement): void;
-declare const WeaverseHydrogenRoot: React$1.MemoExoticComponent<({ components, errorComponent: ErrorComponent, }: {
+declare const WeaverseHydrogenRoot: React$1.MemoExoticComponent<({ components, data: dataProp, errorComponent: ErrorComponent, }: {
     components: HydrogenComponent[];
+    /**
+     * Optional explicit `weaverseData` payload. When provided, bypasses the
+     * automatic route-scoped resolution. Accepts a resolved value, a
+     * `Promise` (handled via `<Await>`), or `null` to suppress rendering.
+     *
+     * Recommended for nested layout + child route compositions where two
+     * `<WeaverseHydrogenRoot>` instances need to render different Weaverse
+     * pages on the same URL. See issue #451.
+     */
+    data?: WeaverseDataValue;
     errorComponent?: React.FC<{
         error: Error | unknown;
     }>;
-}) => react_jsx_runtime.JSX.Element>;
+}) => react_jsx_runtime.JSX.Element | null>;
 /**
  * Options for the `withWeaverse` HOC.
  */

package/dist/index.d.ts

@@ -131,6 +131,8 @@ declare function ThemeTextProvider({ staticContent, merchantOverrides, t: extern
  */
 declare function useThemeText(): ThemeTextValue;
 
+type WeaverseDataValue = WeaverseLoaderData | Promise<WeaverseLoaderData> | null;
+
 declare class WeaverseHydrogenItem extends WeaverseItemStore {
     weaverse: WeaverseHydrogen;
     /**
@@ -226,12 +228,22 @@ declare class WeaverseHydrogen extends Weaverse {
  * ```
  */
 declare function registerComponent(element: HydrogenElement): void;
-declare const WeaverseHydrogenRoot: React$1.MemoExoticComponent<({ components, errorComponent: ErrorComponent, }: {
+declare const WeaverseHydrogenRoot: React$1.MemoExoticComponent<({ components, data: dataProp, errorComponent: ErrorComponent, }: {
     components: HydrogenComponent[];
+    /**
+     * Optional explicit `weaverseData` payload. When provided, bypasses the
+     * automatic route-scoped resolution. Accepts a resolved value, a
+     * `Promise` (handled via `<Await>`), or `null` to suppress rendering.
+     *
+     * Recommended for nested layout + child route compositions where two
+     * `<WeaverseHydrogenRoot>` instances need to render different Weaverse
+     * pages on the same URL. See issue #451.
+     */
+    data?: WeaverseDataValue;
     errorComponent?: React.FC<{
         error: Error | unknown;
     }>;
-}) => react_jsx_runtime.JSX.Element>;
+}) => react_jsx_runtime.JSX.Element | null>;
 /**
  * Options for the `withWeaverse` HOC.
  */

package/dist/index.js

@@ -417,6 +417,29 @@ var ThemeTextStore = class {
     }
   };
 };
+
+// src/utils/pick-weaverse-data.ts
+function pickWeaverseData(dataProp, ownLoaderData, matches) {
+  if (dataProp !== void 0) {
+    return dataProp;
+  }
+  if (hasWeaverseData(ownLoaderData)) {
+    return ownLoaderData.weaverseData;
+  }
+  for (let i = matches.length - 1; i >= 0; i--) {
+    const loaderData = matches[i].loaderData;
+    if (hasWeaverseData(loaderData)) {
+      return loaderData.weaverseData;
+    }
+  }
+  return null;
+}
+function hasWeaverseData(value) {
+  if (typeof value !== "object" || value === null || !("weaverseData" in value)) {
+    return false;
+  }
+  return value.weaverseData !== void 0;
+}
 var ThemeSettingsStore = class {
   settings = {};
   schema;
@@ -709,7 +732,7 @@ var WeaverseHydrogen = class extends react.Weaverse {
     const entries = [];
     const languageId = this.translationLanguageId;
     if (!(this.translationLocale && languageId)) {
-      return void 0;
+      return;
     }
     for (const [itemId, fields] of Object.entries(this.translationMap)) {
       for (const [key, entry] of Object.entries(fields)) {
@@ -722,7 +745,7 @@ var WeaverseHydrogen = class extends react.Weaverse {
       }
     }
     if (entries.length === 0) {
-      return void 0;
+      return;
     }
     return { languageId, entries };
   };
@@ -786,20 +809,19 @@ function registerComponent(element) {
 var WeaverseHydrogenRoot = react$1.memo(
   ({
     components,
+    data: dataProp,
     errorComponent: ErrorComponent = ({ error }) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: error instanceof Error ? error.message : "An unexpected error occurred" })
   }) => {
     const matches = reactRouter.useMatches();
     const enhancedDataContext = createWeaverseDataContext(matches);
-    const weaverseData = react$1.useMemo(() => {
-      for (let i = matches.length - 1; i >= 0; i--) {
-        const match = matches[i];
-        const loaderData = match.loaderData;
-        if (loaderData && "weaverseData" in loaderData) {
-          return loaderData.weaverseData;
-        }
-      }
+    const ownLoaderData = reactRouter.useLoaderData();
+    const weaverseData = react$1.useMemo(
+      () => pickWeaverseData(dataProp, ownLoaderData, matches),
+      [dataProp, ownLoaderData, matches]
+    );
+    if (dataProp === null) {
       return null;
-    }, [matches]);
+    }
     if (weaverseData) {
       if (weaverseData instanceof Promise) {
         return /* @__PURE__ */ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, { fallbackRender: ErrorComponent, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Suspense, { children: /* @__PURE__ */ jsxRuntime.jsx(reactRouter.Await, { resolve: weaverseData, children: (resolvedData) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -1355,7 +1377,7 @@ var WeaverseClient = class {
       const { projectId, weaverseHost } = this.configs;
       const i18n = this.storefront.i18n;
       if (!(projectId && weaverseHost)) {
-        return void 0;
+        return;
       }
       const language = (i18n?.language || "en").toLowerCase();
       const country = (i18n?.country || "us").toLowerCase();
@@ -1374,13 +1396,13 @@ var WeaverseClient = class {
       if (typeof overrides === "object" && overrides !== null) {
         return overrides;
       }
-      return void 0;
+      return;
     } catch (error) {
       console.warn(
         "Unable to load merchant overrides, using theme defaults:",
         this.extractErrorMessage(error)
       );
-      return void 0;
+      return;
     }
   };
   /**
@@ -1559,7 +1581,9 @@ var WeaverseClient = class {
         };
       }
       if (!page) {
-        page = this.generateFallbackPage("Please add new section to start.");
+        page = this.generateFallbackPage(
+          '<div style="text-align: center;">Please add new section to start.</div>'
+        );
       }
       if (page?.items?.length === 0) {
         page.items.push({