@weaverse/hydrogen 5.7.1 → 5.8.1

package/dist/index.js

@@ -55,8 +55,9 @@ function useWeaverseDataContext() {
 function createWeaverseDataContext(matches) {
   return createFlatDataContext(matches);
 }
-
-// src/types.ts
+function isProjectIdFunction(projectId) {
+  return typeof projectId === "function";
+}
 var WeaverseError = class _WeaverseError extends Error {
   code;
   statusCode;
@@ -82,10 +83,14 @@ 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;
+  if (typeof data !== "object" || data === null) {
+    return false;
+  }
+  const record = data;
+  return "theme" in record && typeof record.theme === "object" && record.theme !== null;
 }
 function isValidHydrogenSchema(schema2) {
-  return typeof schema2 === "object" && schema2 !== null && "type" in schema2 && "title" in schema2;
+  return schema$1.isValidSchema(schema2);
 }
 
 // src/utils/index.ts
@@ -111,15 +116,22 @@ function mergeInspectorSettings(settings, inspector, type) {
   );
   return deepMergeArrays(settings, inspector);
 }
-function getRequestQueries(request) {
+function getRequestQueries(request, options) {
   let url = new URL(request.url);
-  return Array.from(url.searchParams.entries()).reduce(
-    (q, [k, v]) => {
-      q[k] = v === "true" ? true : v === "false" ? false : v;
-      return q;
-    },
-    {}
-  );
+  let queries = {};
+  for (let [key, value] of url.searchParams.entries()) {
+    if (options?.allowedKeys && !options.allowedKeys.includes(key)) {
+      continue;
+    }
+    if (value === "true") {
+      queries[key] = true;
+    } else if (value === "false") {
+      queries[key] = false;
+    } else {
+      queries[key] = value;
+    }
+  }
+  return queries;
 }
 function getWeaverseConfigs(request, env) {
   let queries = getRequestQueries(request);
@@ -156,7 +168,12 @@ function getWeaverseConfigs(request, env) {
     }
   };
 }
+var schemaDefaultsCache = /* @__PURE__ */ new WeakMap();
 function generateDataFromSchema(schema2) {
+  const cached = schemaDefaultsCache.get(schema2);
+  if (cached) {
+    return cached;
+  }
   let data = {};
   let inspectorGroups = [];
   const isComponentSchema = (s) => "type" in s && typeof s.type === "string";
@@ -211,6 +228,7 @@ function generateDataFromSchema(schema2) {
       }
     }
   }
+  schemaDefaultsCache.set(schema2, data);
   return data;
 }
 function recursivelyAddDataItem(type, components, items, initData) {
@@ -447,13 +465,16 @@ var WeaverseHydrogenRoot = react$1.memo(
   }) => {
     const matches = reactRouter.useMatches();
     const enhancedDataContext = createWeaverseDataContext(matches);
-    let weaverseData = null;
-    for (const match of matches) {
-      if (match.data && typeof match.data === "object" && match.data !== null && "weaverseData" in match.data) {
-        weaverseData = match.data.weaverseData;
-        break;
+    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;
+        }
       }
-    }
+      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(
@@ -499,14 +520,19 @@ function useThemeSettings() {
   );
   return settings;
 }
+var CACHE_DURATIONS = {
+  /** Short cache for frequently changing content (10 seconds) */
+  SHORT: 10,
+  /** Long cache duration - 23 hours to maximize CDN hits before daily refresh */
+  LONG: 82800
+};
+var DEFAULT_FETCH_TIMEOUT_MS = 1e4;
 var API_PATH = "v1";
 var DEFAULT_CACHE_STRATEGY = {
-  maxAge: 10,
-  sMaxAge: 10,
-  staleWhileRevalidate: 82800,
-  // 23 hours
-  staleIfError: 82800
-  // 23 hours
+  maxAge: CACHE_DURATIONS.SHORT,
+  sMaxAge: CACHE_DURATIONS.SHORT,
+  staleWhileRevalidate: CACHE_DURATIONS.LONG,
+  staleIfError: CACHE_DURATIONS.LONG
 };
 var WeaverseClient = class {
   API = API_PATH;
@@ -523,31 +549,67 @@ var WeaverseClient = class {
   env;
   cache;
   waitUntil;
+  // Performance optimizations
+  parsedUrl;
+  componentsByType;
+  // Configuration
+  fetchTimeoutMs;
   constructor(args) {
-    const {
-      customerAccount,
-      env,
-      storefront,
-      components,
-      cache,
-      waitUntil,
-      themeSchema,
-      request
-    } = args;
-    this.request = request;
-    this.storefront = storefront;
-    this.customerAccount = customerAccount;
-    this.components = components;
-    this.themeSchema = themeSchema;
-    this.env = env;
-    this.cache = cache;
-    this.waitUntil = waitUntil;
+    this.request = args.request;
+    this.storefront = args.storefront;
+    this.customerAccount = args.customerAccount;
+    this.components = args.components;
+    this.themeSchema = args.themeSchema;
+    this.env = args.env;
+    this.cache = args.cache;
+    this.waitUntil = args.waitUntil;
+    this.parsedUrl = new URL(args.request.url);
+    this.componentsByType = this.buildComponentLookupMap(args.components);
+    this.fetchTimeoutMs = args.fetchTimeoutMs || DEFAULT_FETCH_TIMEOUT_MS;
+    this.initializeCache(args);
+    this.initializeConfigs(args);
+  }
+  /**
+   * Initialize Hydrogen cache with proper configuration.
+   * Logs warning if waitUntil is missing.
+   */
+  initializeCache(args) {
+    if (!args.waitUntil) {
+      console.warn(
+        "\u26A0\uFE0F WeaverseClient: waitUntil not provided, background operations may not complete"
+      );
+    }
     this.withCache = hydrogen.createWithCache({
-      cache,
-      waitUntil: waitUntil || (() => Promise.resolve()),
-      request
+      cache: args.cache,
+      waitUntil: args.waitUntil || (() => Promise.resolve()),
+      request: args.request
     });
-    this.configs = getWeaverseConfigs(request, env);
+  }
+  /**
+   * Initialize configs with projectId resolution and fail-fast validation.
+   * Throws WeaverseError if projectId cannot be resolved.
+   */
+  initializeConfigs(args) {
+    const baseConfigs = getWeaverseConfigs(
+      args.request,
+      args.env
+    );
+    const resolvedProjectId = this.resolveProjectIdSync(
+      args.projectId,
+      args.request,
+      args.env,
+      baseConfigs
+    );
+    if (!resolvedProjectId || resolvedProjectId.trim() === "") {
+      throw new WeaverseError(
+        "Failed to initialize WeaverseClient: No valid projectId found. Set WEAVERSE_PROJECT_ID environment variable or provide projectId parameter.",
+        "MISSING_PROJECT_ID"
+      );
+    }
+    this.configs = {
+      ...baseConfigs,
+      projectId: resolvedProjectId
+    };
     this.basePageConfigs = {
       projectId: this.configs.projectId,
       weaverseHost: this.configs.weaverseHost,
@@ -558,35 +620,240 @@ var WeaverseClient = class {
     };
     this.basePageRequestBody = {
       isDesignMode: this.configs.isDesignMode,
-      i18n: storefront.i18n,
+      i18n: args.storefront.i18n,
       projectId: this.configs.projectId
     };
+    Object.freeze(this.configs);
+    Object.freeze(this.basePageConfigs);
+    Object.freeze(this.basePageRequestBody);
+  }
+  /**
+   * Build component lookup map for O(1) access by type.
+   * Significantly improves performance for large component lists.
+   */
+  buildComponentLookupMap(components) {
+    return new Map(components.map((comp) => [comp.schema?.type, comp]));
+  }
+  /**
+   * Extract comprehensive error information from unknown error type.
+   * Preserves error context, codes, and stack traces for debugging.
+   *
+   * @param error - Unknown error to extract information from
+   * @returns Structured error information with message, code, stack, and context
+   *
+   * @example
+   * ```typescript
+   * try {
+   *   // ... operation
+   * } catch (error) {
+   *   const errorInfo = this.extractErrorInfo(error)
+   *   console.error('Operation failed:', errorInfo.message, errorInfo.context)
+   * }
+   * ```
+   */
+  extractErrorInfo(error) {
+    if (error instanceof WeaverseError) {
+      return {
+        message: error.message,
+        code: error.code,
+        context: error.context,
+        stack: error.stack
+      };
+    }
+    if (error instanceof Error) {
+      return {
+        message: error.message,
+        stack: error.stack
+      };
+    }
+    return {
+      message: String(error)
+    };
+  }
+  /**
+   * Extract error message only (for backward compatibility).
+   * Use extractErrorInfo() for more detailed error information.
+   *
+   * @deprecated Use extractErrorInfo() instead to preserve error context
+   */
+  extractErrorMessage(error) {
+    return this.extractErrorInfo(error).message;
+  }
+  /**
+   * Validates projectId format (alphanumeric, hyphens, underscores only).
+   * Returns detailed validation result with error message.
+   *
+   * @param projectId - Project identifier to validate
+   * @returns Validation result with error message if invalid
+   */
+  validateProjectId(projectId) {
+    if (!projectId || projectId.trim() === "") {
+      return {
+        valid: false,
+        error: "Project ID cannot be empty"
+      };
+    }
+    const validPattern = /^[a-zA-Z0-9_-]+$/;
+    if (!validPattern.test(projectId)) {
+      return {
+        valid: false,
+        error: `Invalid format: "${projectId}". Only alphanumeric characters, hyphens, and underscores are allowed.`
+      };
+    }
+    return { valid: true };
+  }
+  /**
+   * Resolves projectId with multi-project architecture support.
+   * Uses priority chain to determine the correct project ID.
+   *
+   * @param projectId - Project identifier (string, function, or undefined)
+   * @param request - HTTP request for context access
+   * @param env - Hydrogen environment with variables
+   * @param baseConfigs - Pre-fetched base configs to avoid duplicate calls
+   * @returns Resolved project ID string (empty string if none found)
+   */
+  resolveProjectIdSync(projectId, request, env, baseConfigs) {
+    return this.resolveFromQueryParams(request) || this.resolveFromFunction(projectId) || this.resolveFromString(projectId) || this.resolveFromEnvironment(baseConfigs, request, env) || "";
+  }
+  /**
+   * Priority 1: Resolve projectId from URL query parameters.
+   * Used for design mode and preview mode overrides.
+   */
+  resolveFromQueryParams(request) {
+    const queries = getRequestQueries(request);
+    return queries.weaverseProjectId || null;
+  }
+  /**
+   * Priority 2: Resolve projectId from function parameter.
+   * Detects and rejects async functions with helpful error.
+   */
+  resolveFromFunction(projectId) {
+    if (!isProjectIdFunction(projectId)) {
+      return null;
+    }
+    if (projectId.constructor.name === "AsyncFunction") {
+      throw new WeaverseError(
+        "Async projectId functions must be awaited before passing to WeaverseClient. Use: projectId: await getProjectAsync() instead of: projectId: getProjectAsync",
+        "ASYNC_PROJECT_ID"
+      );
+    }
+    try {
+      const result = projectId();
+      if (result instanceof Promise) {
+        throw new WeaverseError(
+          "Async projectId functions must be awaited before passing to WeaverseClient. Use: projectId: await getProjectAsync() instead of: projectId: getProjectAsync",
+          "ASYNC_PROJECT_ID"
+        );
+      }
+      if (result && result.trim() !== "") {
+        const trimmed = result.trim();
+        const validation = this.validateProjectId(trimmed);
+        if (validation.valid) {
+          return trimmed;
+        }
+        throw new WeaverseError(
+          validation.error || "Invalid projectId format",
+          "INVALID_PROJECT_ID"
+        );
+      }
+    } catch (err) {
+      if (err instanceof WeaverseError) {
+        throw err;
+      }
+      throw new WeaverseError(
+        `Failed to evaluate projectId function: ${err instanceof Error ? err.message : String(err)}`,
+        "PROJECT_ID_FUNCTION_ERROR",
+        void 0,
+        { cause: err instanceof Error ? err.stack : String(err) }
+      );
+    }
+    return null;
+  }
+  /**
+   * Priority 3: Resolve projectId from explicit string parameter.
+   */
+  resolveFromString(projectId) {
+    if (typeof projectId !== "string") {
+      return null;
+    }
+    const trimmed = projectId.trim();
+    if (trimmed === "") {
+      return null;
+    }
+    const validation = this.validateProjectId(trimmed);
+    if (validation.valid) {
+      return trimmed;
+    }
+    throw new WeaverseError(
+      validation.error || "Invalid projectId format",
+      "INVALID_PROJECT_ID"
+    );
   }
-  // Helper method for direct fetching in design mode - returns same format as withCache.fetch
-  directFetch = async (url, options = {}) => {
+  /**
+   * Priority 4: Resolve projectId from environment variables.
+   */
+  resolveFromEnvironment(baseConfigs, request, env) {
+    const configs = baseConfigs || getWeaverseConfigs(request, env);
+    if (configs.projectId && configs.projectId.trim() !== "") {
+      return configs.projectId.trim();
+    }
+    return null;
+  }
+  /**
+   * Helper method for direct fetching in design mode.
+   * Returns same format as withCache.fetch for consistency.
+   * Includes 10-second timeout to prevent hanging requests.
+   */
+  directFetch = async (url, options = {}, timeoutMs = this.fetchTimeoutMs) => {
+    const controller = new AbortController();
+    const timeoutId = setTimeout(
+      () => controller.abort(),
+      timeoutMs
+    );
     try {
-      let response = await fetch(url, options);
+      const response = await fetch(url, {
+        ...options,
+        signal: controller.signal
+      });
       if (!response.ok) {
-        let error = await response.text();
-        throw new Error(`${response.status} ${response.statusText} ${error}`);
+        const errorText = await response.text();
+        throw new WeaverseError(
+          `HTTP ${response.status}: ${response.statusText}`,
+          "FETCH_ERROR",
+          response.status,
+          { url, errorText }
+        );
       }
-      let data = await response.json();
-      return {
-        data,
-        response
-      };
+      const data = await response.json();
+      return { data, response };
     } catch (err) {
-      throw new Error(`Failed to fetch data from ${url}`, { cause: err });
+      if (err instanceof WeaverseError) {
+        throw err;
+      }
+      if (err.name === "AbortError") {
+        throw new WeaverseError(
+          `Request timeout after ${timeoutMs}ms`,
+          "TIMEOUT_ERROR",
+          void 0,
+          { url, timeoutMs }
+        );
+      }
+      throw new WeaverseError(
+        "Network error during fetch",
+        "NETWORK_ERROR",
+        void 0,
+        { url, cause: err instanceof Error ? err.message : String(err) }
+      );
+    } finally {
+      if (timeoutId !== void 0) {
+        clearTimeout(timeoutId);
+      }
     }
   };
   // Helper method to detect if request is from localhost
   isLocalhost() {
-    try {
-      let url = new URL(this.request.url);
-      return url.hostname === "localhost" || url.hostname === "127.0.0.1";
-    } catch {
-      return false;
-    }
+    const hostname = this.parsedUrl.hostname;
+    return hostname === "localhost" || hostname === "127.0.0.1";
   }
   // Helper method for building API URLs consistently
   getApiUrl(endpoint, useProxy = !(this.configs.isDesignMode || this.isLocalhost())) {
@@ -597,8 +864,14 @@ var WeaverseClient = class {
     return `${weaverseHost}/api/public/${endpoint}`;
   }
   fetchWithCache = async (url, options = {}) => {
-    const strategy = options.strategy || this.storefront.CacheCustom(DEFAULT_CACHE_STRATEGY);
-    const cacheKey = [url, options.method || "GET", options.body];
+    const strategy = options.strategy || hydrogen.CacheCustom(DEFAULT_CACHE_STRATEGY);
+    const cacheKey = [
+      "weaverse-fetch",
+      url,
+      options.method || "GET",
+      options.body,
+      this.configs.projectId
+    ];
     let result;
     if (this.configs.isDesignMode) {
       result = await this.directFetch(url, options);
@@ -615,15 +888,15 @@ var WeaverseClient = class {
     return result.data;
   };
   loadThemeSettings = async (strategy) => {
-    let defaultThemeSettings = generateDataFromSchema(this.themeSchema);
+    const defaultThemeSettings = generateDataFromSchema(this.themeSchema);
     try {
-      let { configs } = this;
-      let { projectId, isDesignMode } = configs;
+      const { configs } = this;
+      const { projectId, isDesignMode } = configs;
       if (!projectId) {
         throw new Error("Missing Weaverse projectId!");
       }
-      let url = this.getApiUrl("project_configs");
-      let body = JSON.stringify({ isDesignMode, projectId });
+      const url = this.getApiUrl("project_configs");
+      const body = JSON.stringify({ isDesignMode, projectId });
       let data = await this.fetchWithCache(url, {
         method: "POST",
         strategy,
@@ -678,13 +951,19 @@ var WeaverseClient = class {
         };
       }
       return data;
-    } catch (e) {
-      console.info("Unable to load theme settings", e);
-      return { theme: defaultThemeSettings };
+    } catch (error) {
+      const errorMessage = "Unable to load theme settings";
+      const errorDetails = this.extractErrorMessage(error);
+      console.error(errorMessage, errorDetails);
+      return {
+        theme: defaultThemeSettings,
+        _error: errorDetails,
+        _loadFailed: true
+      };
     }
   };
   generateFallbackPage = (message) => {
-    let rootId = crypto.randomUUID();
+    const rootId = crypto.randomUUID();
     return {
       id: `fallback_page_${Date.now()}`,
       rootId,
@@ -700,21 +979,44 @@ var WeaverseClient = class {
   };
   loadPage = async (params = {}) => {
     try {
-      let { request, storefront, basePageRequestBody, basePageConfigs } = this;
-      let { projectId, weaverseHost, isPreviewMode, sectionType } = this.configs;
+      const { request, storefront, basePageRequestBody, basePageConfigs } = this;
+      const {
+        projectId: clientProjectId,
+        weaverseHost,
+        isPreviewMode,
+        sectionType
+      } = this.configs;
+      if (params.projectId !== void 0) {
+        if (typeof params.projectId !== "string") {
+          console.error(
+            `Route-level projectId validation failed: must be a string. Received: ${typeof params.projectId}`
+          );
+          return null;
+        }
+        const validation = this.validateProjectId(params.projectId);
+        if (!validation.valid) {
+          console.error(
+            `Route-level projectId validation failed: ${validation.error}`
+          );
+          return null;
+        }
+      }
+      const effectiveProjectId = params.projectId || clientProjectId;
       if (isPreviewMode) {
         return getPreviewData(sectionType || "", this.components, weaverseHost);
       }
-      if (!projectId) {
+      if (!effectiveProjectId) {
         throw new Error("Missing Weaverse projectId!");
       }
-      let { strategy, ...pageLoadParams } = params;
-      let body = {
+      const { strategy, ...pageLoadParams } = params;
+      const body = {
         ...basePageRequestBody,
+        projectId: effectiveProjectId,
+        // Use effective (potentially overridden) projectId
         params: pageLoadParams,
         url: request.url
       };
-      let reqInit = {
+      const reqInit = {
         method: "POST",
         body: JSON.stringify(body),
         headers: {
@@ -723,19 +1025,36 @@ var WeaverseClient = class {
           "Accept-Encoding": "gzip, deflate, br"
         }
       };
-      let url = this.getApiUrl("project");
-      let projectData = await this.fetchWithCache(url, {
+      const url = this.getApiUrl("project");
+      const projectData = await this.fetchWithCache(url, {
         ...reqInit,
         strategy
       });
       if (hasError(projectData)) {
         throw new Error(projectData.error);
       }
-      let { page, project, pageAssignment } = projectData;
+      console.log("projectData", projectData);
+      let page;
+      let project;
+      let pageAssignment;
+      if (isFetchProjectPayload(projectData)) {
+        page = projectData.page;
+        project = projectData.project;
+        pageAssignment = projectData.pageAssignment;
+      } else {
+        console.warn(
+          "Invalid project data structure received from API, using fallback data",
+          { projectId: effectiveProjectId }
+        );
+        const responseData = projectData;
+        page = responseData?.page;
+        project = responseData?.project;
+        pageAssignment = responseData?.pageAssignment;
+      }
       if (!project) {
-        console.warn("Weaverse project not found. Id:", projectId);
+        console.warn("Weaverse project not found. Id:", effectiveProjectId);
         project = {
-          id: projectId,
+          id: effectiveProjectId,
           name: "Weaverse project not found.",
           weaverseShopId: ""
         };
@@ -744,7 +1063,7 @@ var WeaverseClient = class {
         page = this.generateFallbackPage("Please add new section to start.");
       }
       if (page?.items) {
-        let items = page.items;
+        const items = page.items;
         page.items = await Promise.all(items.map(this.execComponentLoader));
       }
       return {
@@ -756,20 +1075,43 @@ var WeaverseClient = class {
           requestInfo: {
             i18n: storefront.i18n,
             queries: getRequestQueries(request),
-            pathname: new URL(request.url).pathname,
-            search: new URL(request.url).search
+            pathname: this.parsedUrl.pathname,
+            search: this.parsedUrl.search
           }
         }
       };
-    } catch (e) {
-      console.error("\u274C Page load failed.", e);
+    } catch (error) {
+      const errorMessage = "\u274C Page load failed";
+      const errorContext = {
+        url: this.request.url,
+        projectId: params.projectId || this.configs.projectId
+      };
+      if (error instanceof WeaverseError) {
+        console.error(errorMessage, {
+          code: error.code,
+          message: error.message,
+          ...errorContext,
+          ...error.context
+        });
+      } else if (error instanceof Error) {
+        console.error(errorMessage, {
+          message: error.message,
+          stack: error.stack,
+          ...errorContext
+        });
+      } else {
+        console.error(errorMessage, {
+          error: String(error),
+          ...errorContext
+        });
+      }
       return null;
     }
   };
   execComponentLoader = async (item) => {
-    let { data = {}, type, id } = item;
-    let component = this.components?.find(({ schema: schema2 }) => schema2?.type === type);
-    let loader = component?.loader;
+    const { data = {}, type, id } = item;
+    const component = this.componentsByType.get(type);
+    const loader = component?.loader;
     if (typeof loader === "function" && component) {
       try {
         return {
@@ -781,8 +1123,8 @@ var WeaverseClient = class {
             })
           )
         };
-      } catch (e) {
-        console.warn("\u274C Item loader run failed.", type, id, e);
+      } catch (error) {
+        console.warn("\u274C Item loader run failed.", type, id, error);
         return item;
       }
     }
@@ -868,6 +1210,7 @@ exports.getSelectedProductOptions = getSelectedProductOptions;
 exports.getWeaverseConfigs = getWeaverseConfigs;
 exports.hasError = hasError;
 exports.isFetchProjectPayload = isFetchProjectPayload;
+exports.isProjectIdFunction = isProjectIdFunction;
 exports.isThemeSettingsResponse = isThemeSettingsResponse;
 exports.isValidHydrogenSchema = isValidHydrogenSchema;
 exports.isWithCacheFetchResponse = isWithCacheFetchResponse;