@weaverse/hydrogen 5.13.0 → 5.14.0

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { createSchema, isValidSchema } from '@weaverse/schema';
 export * from '@weaverse/schema';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, memo, useMemo, Suspense, useEffect, useContext, useRef } from 'react';
-import { useMatches, Await, useRevalidator, useNavigation, useLocation, useNavigate, useRouteLoaderData } from 'react-router';
+import { useMatches, useLoaderData, Await, useRevalidator, useNavigation, useLocation, useNavigate, useRouteLoaderData } from 'react-router';
 import { ErrorBoundary } from 'react-error-boundary';
 
 // src/index.ts
@@ -143,6 +143,73 @@ function useWeaverseDataContext() {
 function createWeaverseDataContext(matches) {
   return createFlatDataContext(matches);
 }
+
+// src/seo.ts
+function formatMetaDescriptors(seo) {
+  if (!seo) {
+    return [{ name: "robots", content: "index,follow" }];
+  }
+  let descriptors = [];
+  if (seo.title) {
+    descriptors.push({ title: seo.title });
+  }
+  if (seo.description) {
+    descriptors.push({ name: "description", content: seo.description });
+  }
+  if (seo.keywords) {
+    descriptors.push({ name: "keywords", content: seo.keywords });
+  }
+  if (seo.canonicalUrl) {
+    descriptors.push({
+      tagName: "link",
+      rel: "canonical",
+      href: seo.canonicalUrl
+    });
+  }
+  let og = seo.openGraph;
+  if (og && (og.title || og.description || og.image || og.type)) {
+    if (og.title) {
+      descriptors.push({ property: "og:title", content: og.title });
+    }
+    if (og.description) {
+      descriptors.push({ property: "og:description", content: og.description });
+    }
+    if (og.image) {
+      descriptors.push({ property: "og:image", content: og.image });
+    }
+    descriptors.push({ property: "og:type", content: og.type || "website" });
+  }
+  let tw = seo.twitter;
+  if (tw && (tw.title || tw.description || tw.image || tw.cardType)) {
+    descriptors.push({
+      name: "twitter:card",
+      content: tw.cardType || "summary"
+    });
+    if (tw.title) {
+      descriptors.push({ name: "twitter:title", content: tw.title });
+    }
+    if (tw.description) {
+      descriptors.push({ name: "twitter:description", content: tw.description });
+    }
+    if (tw.image) {
+      descriptors.push({ name: "twitter:image", content: tw.image });
+    }
+  }
+  let index = seo.robots?.index !== false;
+  let follow = seo.robots?.follow !== false;
+  descriptors.push({
+    name: "robots",
+    content: `${index ? "index" : "noindex"},${follow ? "follow" : "nofollow"}`
+  });
+  return descriptors;
+}
+function getWeaverseSeoMeta(data) {
+  if (!data) {
+    return formatMetaDescriptors(null);
+  }
+  let page = "items" in data && "id" in data ? data : data.page ?? null;
+  return formatMetaDescriptors(page?.seo ?? null);
+}
 function isProjectIdFunction(projectId) {
   return typeof projectId === "function";
 }
@@ -417,6 +484,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 +799,7 @@ var WeaverseHydrogen = class extends 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 +812,7 @@ var WeaverseHydrogen = class extends Weaverse {
       }
     }
     if (entries.length === 0) {
-      return void 0;
+      return;
     }
     return { languageId, entries };
   };
@@ -786,20 +876,19 @@ function registerComponent(element) {
 var WeaverseHydrogenRoot = memo(
   ({
     components,
+    data: dataProp,
     errorComponent: ErrorComponent = ({ error }) => /* @__PURE__ */ jsx("div", { children: error instanceof Error ? error.message : "An unexpected error occurred" })
   }) => {
     const matches = useMatches();
     const enhancedDataContext = createWeaverseDataContext(matches);
-    const weaverseData = 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 = useLoaderData();
+    const weaverseData = useMemo(
+      () => pickWeaverseData(dataProp, ownLoaderData, matches),
+      [dataProp, ownLoaderData, matches]
+    );
+    if (dataProp === null) {
       return null;
-    }, [matches]);
+    }
     if (weaverseData) {
       if (weaverseData instanceof Promise) {
         return /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorComponent, children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Await, { resolve: weaverseData, children: (resolvedData) => /* @__PURE__ */ jsx(
@@ -1355,7 +1444,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 +1463,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 +1648,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({
@@ -1677,6 +1768,6 @@ var IMAGES_PLACEHOLDERS = {
   product_18: "https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-watch-2-1024x1024.svg"
 };
 
-export { IMAGES_PLACEHOLDERS, ThemeTextProvider, ThemeTextStore, WeaverseClient, WeaverseError, WeaverseHydrogen, WeaverseHydrogenItem, WeaverseHydrogenRoot, createWeaverseDataContext, defaultComponents, generateDataFromSchema, getNestedKey, getPreviewData, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, hasError, hasWeaverseStudio, interpolate, isFetchProjectPayload, isProjectIdFunction, isThemeSettingsResponse, isValidHydrogenSchema, isWithCacheFetchResponse, registerComponent, useThemeSettings, useThemeText, useWeaverseDataContext, withWeaverse };
+export { IMAGES_PLACEHOLDERS, ThemeTextProvider, ThemeTextStore, WeaverseClient, WeaverseError, WeaverseHydrogen, WeaverseHydrogenItem, WeaverseHydrogenRoot, createWeaverseDataContext, defaultComponents, formatMetaDescriptors, generateDataFromSchema, getNestedKey, getPreviewData, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, getWeaverseSeoMeta, hasError, hasWeaverseStudio, interpolate, isFetchProjectPayload, isProjectIdFunction, isThemeSettingsResponse, isValidHydrogenSchema, isWithCacheFetchResponse, registerComponent, useThemeSettings, useThemeText, useWeaverseDataContext, withWeaverse };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map