@weaverse/hydrogen 5.3.4 → 5.4.1-beta.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { createWithCache, generateCacheControlHeader, getSelectedProductOptions as getSelectedProductOptions$1 } from '@shopify/hydrogen';
+import { createWithCache, getSelectedProductOptions as getSelectedProductOptions$1 } from '@shopify/hydrogen';
 import { Weaverse, WeaverseItemStore, loadScript, WeaverseRoot, isBrowser, EventEmitter, useSafeExternalStore } from '@weaverse/react';
 export { isBrowser, isIframe, useChildInstances, useItemInstance, useParentInstance, useWeaverse } from '@weaverse/react';
 import { createSchema } from '@weaverse/schema';
@@ -41,6 +41,33 @@ var schema = createSchema({
 var defaultComponents = [main_exports];
 
 // src/types.ts
+var WeaverseError = class _WeaverseError extends Error {
+  code;
+  statusCode;
+  context;
+  constructor(message, code = "WEAVERSE_ERROR", statusCode, context) {
+    super(message);
+    this.name = "WeaverseError";
+    this.code = code;
+    this.statusCode = statusCode;
+    this.context = context;
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, _WeaverseError);
+    }
+  }
+};
+function isWithCacheFetchResponse(response) {
+  return typeof response === "object" && response !== null && "data" in response && "response" in response;
+}
+function isFetchProjectPayload(payload) {
+  return typeof payload === "object" && payload !== null && "page" in payload && "project" in payload && "pageAssignment" in payload;
+}
+function hasError(response) {
+  return typeof response === "object" && response !== null && "error" in response && typeof response.error === "string";
+}
+function isThemeSettingsResponse(data) {
+  return typeof data === "object" && data !== null && data.theme !== void 0;
+}
 function isValidHydrogenSchema(schema2) {
   return typeof schema2 === "object" && schema2 !== null && "type" in schema2 && "title" in schema2;
 }
@@ -57,8 +84,12 @@ function deepMergeArrays(target, source) {
   return [...target, ...source];
 }
 function mergeInspectorSettings(settings, inspector, type) {
-  if (!inspector?.length) return settings;
-  if (!settings?.length) return inspector;
+  if (!inspector?.length) {
+    return settings;
+  }
+  if (!settings?.length) {
+    return inspector;
+  }
   console.info(
     `Schema "${type}": Both 'settings' and 'inspector' found. Using 'settings' with 'inspector' as fallback.`
   );
@@ -80,6 +111,7 @@ function getWeaverseConfigs(request, env) {
     WEAVERSE_PROJECT_ID,
     WEAVERSE_API_KEY,
     WEAVERSE_HOST,
+    WEAVERSE_API_BASE,
     PUBLIC_STORE_DOMAIN,
     PUBLIC_STOREFRONT_API_TOKEN
   } = env || {};
@@ -96,10 +128,11 @@ function getWeaverseConfigs(request, env) {
   return {
     projectId: weaverseProjectId || WEAVERSE_PROJECT_ID || envFromProcess.WEAVERSE_PROJECT_ID || "",
     weaverseHost: weaverseHost || WEAVERSE_HOST || envFromProcess.WEAVERSE_HOST || "https://studio.weaverse.io",
+    weaverseApiBase: WEAVERSE_API_BASE || envFromProcess.WEAVERSE_API_BASE || "https://api.weaverse.io",
     weaverseApiKey: weaverseApiKey || WEAVERSE_API_KEY || envFromProcess.WEAVERSE_API_KEY || "",
     weaverseVersion: weaverseVersion || "",
-    isDesignMode: isDesignMode || false,
-    isPreviewMode: isPreviewMode || false,
+    isDesignMode,
+    isPreviewMode,
     sectionType: sectionType || "",
     publicEnv: {
       PUBLIC_STORE_DOMAIN: PUBLIC_STORE_DOMAIN || "",
@@ -295,7 +328,9 @@ function useStudio(weaverse) {
 function usePixel(context) {
   let { projectId, pageId, weaverseHost, isDesignMode } = context;
   useEffect(() => {
-    if (!projectId || !pageId || !weaverseHost || isDesignMode) return;
+    if (!(projectId && pageId && weaverseHost) || isDesignMode) {
+      return;
+    }
     let url = `${weaverseHost}/api/public/px`;
     let img = new Image();
     img.onload = () => img.remove();
@@ -323,6 +358,14 @@ var WeaverseHydrogen = class extends Weaverse {
   pageId;
   internal;
   requestInfo;
+  projectId;
+  weaverseHost;
+  weaverseApiBase;
+  weaverseApiKey;
+  weaverseVersion;
+  isDesignMode;
+  isPreviewMode;
+  sectionType;
   static itemInstances;
   static elementRegistry;
   constructor(params) {
@@ -331,6 +374,14 @@ var WeaverseHydrogen = class extends Weaverse {
     this.internal = internal;
     this.pageId = pageId;
     this.requestInfo = requestInfo;
+    this.projectId = params.projectId;
+    this.weaverseHost = params.weaverseHost;
+    this.weaverseApiBase = params.weaverseApiBase;
+    this.weaverseApiKey = params.weaverseApiKey;
+    this.weaverseVersion = params.weaverseVersion || "";
+    this.isDesignMode = params.isDesignMode ?? false;
+    this.isPreviewMode = params.isPreviewMode ?? false;
+    this.sectionType = params.sectionType || "";
   }
 };
 function createWeaverseInstance(params) {
@@ -387,9 +438,9 @@ var WeaverseHydrogenRoot = memo(
     let data = loaderData?.weaverseData;
     if (data) {
       if (data instanceof Promise) {
-        return /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorComponent, children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Await, { resolve: data, children: (resolvedData) => /* @__PURE__ */ jsx(RenderRoot, { data: resolvedData, components }) }) }) });
+        return /* @__PURE__ */ jsx(ErrorBoundary, { fallbackRender: ErrorComponent, children: /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Await, { resolve: data, children: (resolvedData) => /* @__PURE__ */ jsx(RenderRoot, { components, data: resolvedData }) }) }) });
       }
-      return /* @__PURE__ */ jsx(RenderRoot, { data, components });
+      return /* @__PURE__ */ jsx(RenderRoot, { components, data });
     }
     return /* @__PURE__ */ jsx(
       ErrorComponent,
@@ -416,12 +467,17 @@ function useThemeSettings() {
   );
   return settings;
 }
-var API_PATH = "api/public";
+var API_PATH = "v1";
 var DEFAULT_CACHE_STRATEGY = {
-  maxAge: 10,
-  sMaxAge: 10,
-  staleWhileRevalidate: 82800,
-  staleIfError: 82800
+  maxAge: 5,
+  // 5 seconds for development/testing
+  sMaxAge: 5,
+  // 5 seconds CDN cache
+  staleWhileRevalidate: 5,
+  // 5 seconds
+  staleIfError: 82800,
+  // 23 hours
+  mode: "public"
 };
 var WeaverseClient = class {
   API = API_PATH;
@@ -454,11 +510,16 @@ var WeaverseClient = class {
     this.env = env;
     this.cache = cache;
     this.waitUntil = waitUntil;
-    this.withCache = createWithCache({ cache, waitUntil, request });
+    this.withCache = createWithCache({
+      cache,
+      waitUntil: waitUntil || (() => Promise.resolve()),
+      request
+    });
     this.configs = getWeaverseConfigs(request, env);
     this.basePageConfigs = {
       projectId: this.configs.projectId,
       weaverseHost: this.configs.weaverseHost,
+      weaverseApiBase: this.configs.weaverseApiBase,
       weaverseApiKey: this.configs.weaverseApiKey,
       weaverseVersion: this.configs.weaverseVersion,
       isDesignMode: this.configs.isDesignMode
@@ -469,73 +530,90 @@ var WeaverseClient = class {
       projectId: this.configs.projectId
     };
   }
-  // Helper method for direct fetching in design mode
+  // Helper method for direct fetching in design mode - returns same format as withCache.fetch
   directFetch = async (url, options = {}) => {
     try {
-      let res = await fetch(url, options);
-      if (!res.ok) {
-        let error = await res.text();
-        throw new Error(`${res.status} ${res.statusText} ${error}`);
+      let response = await fetch(url, options);
+      if (!response.ok) {
+        let error = await response.text();
+        throw new Error(`${response.status} ${response.statusText} ${error}`);
       }
-      return res.json();
+      let data = await response.json();
+      return {
+        data,
+        response
+      };
     } catch (err) {
       throw new Error(`Failed to fetch data from ${url}`, { cause: err });
     }
   };
+  // Helper method for building API URLs consistently
+  getApiUrl(endpoint, useProxy = !this.configs.isDesignMode) {
+    const { weaverseHost, weaverseApiBase, projectId } = this.configs;
+    if (useProxy) {
+      return `${weaverseApiBase}/v1/${endpoint}?projectId=${projectId}`;
+    }
+    return `${weaverseHost}/api/public/${endpoint}`;
+  }
   fetchWithCache = async (url, options = {}) => {
-    let {
-      strategy = this.storefront.CacheCustom(DEFAULT_CACHE_STRATEGY),
-      ...reqInit
-    } = options;
-    let cacheKey = [url, options.body];
+    const strategy = options.strategy || this.storefront.CacheCustom(DEFAULT_CACHE_STRATEGY);
+    const cacheKey = [url, options.method || "GET", options.body];
+    let result;
     if (this.configs.isDesignMode) {
-      return this.directFetch(url, reqInit);
-    }
-    return this.withCache.run(
-      {
+      result = await this.directFetch(url, options);
+    } else {
+      result = await this.withCache.fetch(url, options, {
         cacheKey,
         cacheStrategy: strategy,
-        shouldCacheResult: (result) => result?.data
-      },
-      async () => {
-        return this.directFetch(url, {
-          ...reqInit,
-          headers: {
-            "Cache-Control": generateCacheControlHeader(strategy),
-            ...reqInit.headers
-          }
-        });
-      }
-    );
+        shouldCacheResponse: (response) => {
+          return !hasError(response) && response !== null && response !== void 0;
+        },
+        displayName: "Weaverse API"
+      });
+    }
+    return result.data;
   };
   loadThemeSettings = async (strategy) => {
     let defaultThemeSettings = generateDataFromSchema(this.themeSchema);
     try {
-      let { API, configs } = this;
-      let { weaverseHost, projectId, isDesignMode } = configs;
+      let { configs } = this;
+      let { weaverseApiBase, weaverseHost, projectId, isDesignMode } = configs;
       if (!projectId) {
         throw new Error("Missing Weaverse projectId!");
       }
-      let url = `${weaverseHost}/${API}/project_configs`;
-      let res;
+      let url = this.getApiUrl("project_configs");
       let body = JSON.stringify({ isDesignMode, projectId });
-      if (isDesignMode) {
-        res = await fetch(url, { method: "POST", body }).then(
-          (res2) => res2.json()
+      let data = await this.fetchWithCache(url, {
+        method: "POST",
+        strategy,
+        body,
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          "Accept-Encoding": "gzip, deflate, br"
+        }
+      });
+      if (typeof data !== "object" || data === null) {
+        console.warn(
+          "Invalid theme settings response format, using defaults:",
+          {
+            type: typeof data,
+            isString: typeof data === "string",
+            length: typeof data === "string" ? data.length : "N/A",
+            preview: typeof data === "string" ? `${data.substring(0, 50)}...` : String(data)
+          }
         );
-      } else {
-        res = await this.fetchWithCache(url, {
-          method: "POST",
-          strategy,
-          body
-        });
+        data = { theme: defaultThemeSettings };
       }
-      let data = res || {};
       if (this.themeSchema?.settings || this.themeSchema?.inspector) {
-        data.theme = {
-          ...defaultThemeSettings,
-          ...data.theme
-        };
+        if (!data.theme || typeof data.theme !== "object") {
+          data.theme = defaultThemeSettings;
+        } else {
+          data.theme = {
+            ...defaultThemeSettings,
+            ...data.theme
+          };
+        }
       }
       if (this.configs.isDesignMode) {
         data = {
@@ -554,14 +632,14 @@ var WeaverseClient = class {
                 return input;
               })
             }))
-          } : null,
+          } : void 0,
           publicEnv: this.configs.publicEnv
         };
       }
       return data;
     } catch (e) {
       console.info("Unable to load theme settings", e);
-      return defaultThemeSettings;
+      return { theme: defaultThemeSettings };
     }
   };
   generateFallbackPage = (message) => {
@@ -586,11 +664,12 @@ var WeaverseClient = class {
         projectId,
         isDesignMode,
         weaverseHost,
+        weaverseApiBase,
         isPreviewMode,
         sectionType
       } = this.configs;
       if (isPreviewMode) {
-        return getPreviewData(sectionType, this.components, weaverseHost);
+        return getPreviewData(sectionType || "", this.components, weaverseHost);
       }
       if (!projectId) {
         throw new Error("Missing Weaverse projectId!");
@@ -603,30 +682,29 @@ var WeaverseClient = class {
       };
       let reqInit = {
         method: "POST",
-        body: JSON.stringify(body)
+        body: JSON.stringify(body),
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+          "Accept-Encoding": "gzip, deflate, br"
+        }
       };
-      let url = `${weaverseHost}/${this.API}/project`;
-      let payload;
-      if (isDesignMode) {
-        payload = await fetch(url, reqInit).then((res) => res.json());
-      } else {
-        payload = await this.fetchWithCache(url, {
-          ...reqInit,
-          strategy
-        });
-      }
-      if (payload?.error) {
-        throw new Error(payload?.error);
+      let url = this.getApiUrl("project");
+      let projectData = await this.fetchWithCache(url, {
+        ...reqInit,
+        strategy
+      });
+      if (hasError(projectData)) {
+        throw new Error(projectData.error);
       }
-      let { page, project, pageAssignment } = payload;
+      let { page, project, pageAssignment } = projectData;
       if (!project) {
-        console.error("Weaverse project not found. Id:", projectId);
+        console.warn("Weaverse project not found. Id:", projectId);
         project = {
           id: projectId,
           name: "Weaverse project not found.",
           weaverseShopId: ""
         };
-        page = this.generateFallbackPage("Weaverse project not found.");
       }
       if (!page) {
         page = this.generateFallbackPage("Please add new section to start.");
@@ -658,7 +736,7 @@ var WeaverseClient = class {
     let { data = {}, type, id } = item;
     let component = this.components?.find(({ schema: schema2 }) => schema2?.type === type);
     let loader = component?.loader;
-    if (typeof loader === "function") {
+    if (typeof loader === "function" && component) {
       try {
         return {
           ...item,
@@ -717,6 +795,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, WeaverseClient, WeaverseHydrogen, WeaverseHydrogenItem, WeaverseHydrogenRoot, defaultComponents, generateDataFromSchema, getPreviewData, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, isValidHydrogenSchema, registerComponent, useThemeSettings, withWeaverse };
+export { IMAGES_PLACEHOLDERS, WeaverseClient, WeaverseError, WeaverseHydrogen, WeaverseHydrogenItem, WeaverseHydrogenRoot, defaultComponents, generateDataFromSchema, getPreviewData, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, hasError, isFetchProjectPayload, isThemeSettingsResponse, isValidHydrogenSchema, isWithCacheFetchResponse, registerComponent, useThemeSettings, withWeaverse };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map