@weaverse/hydrogen 4.1.2 → 4.2.1

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { EventEmitter, ElementData, ElementSchema, BasicInput as BasicInput$1, WeaverseElement, WeaverseCoreParams, WeaverseProjectDataType, WeaverseImage, WeaverseResourcePickerData, Weaverse, PlatformTypeEnum, WeaverseItemStore } from '@weaverse/react';
+import { EventEmitter, BasicInput as BasicInput$1, ElementData, WeaverseElement, ElementSchema, WeaverseProjectDataType, WeaverseCoreParams, WeaverseResourcePickerData, Weaverse, PlatformTypeEnum, WeaverseItemStore } from '@weaverse/react';
 export { InputType, PositionInputValue, WeaverseImage, WeaverseVideo, isBrowser, isIframe, useChildInstances, useItemInstance, useParentInstance, useWeaverse } from '@weaverse/react';
 import { NavigateFunction } from '@remix-run/react';
 import { createWithCache, I18nBase, HydrogenContext, HydrogenEnv } from '@shopify/hydrogen';
@@ -47,7 +47,8 @@ declare class WeaverseClient {
     waitUntil: WeaverseClientArgs['waitUntil'];
     countries?: WeaverseClientArgs['countries'];
     constructor(args: WeaverseClientArgs);
-    fetchWithCache: <T extends object>(url: string, options?: FetchWithCacheOptions) => Promise<T>;
+    private directFetch;
+    fetchWithCache<T extends object>(url: string, options?: FetchWithCacheOptions): Promise<T>;
     loadThemeSettings: (strategy?: AllCacheOptions) => Promise<any>;
     generateFallbackPage: (message: string) => HydrogenPageData;
     loadPage: (params?: LoadPageParams) => Promise<WeaverseLoaderData | null>;
@@ -70,9 +71,7 @@ interface AllCacheOptions {
 }
 type ComponentLoaderArgs<T = any, E = any> = {
     data: T;
-    weaverse: Omit<WeaverseClient, 'env'> & {
-        env: E;
-    };
+    weaverse: WeaverseClient;
 };
 interface RouteLoaderArgs extends LoaderFunctionArgs {
     context: AppLoadContext & {
@@ -175,6 +174,8 @@ type WeaverseStudioQueries = {
     weaverseHost: string;
     weaverseVersion: string;
     isDesignMode: boolean;
+    isPreviewMode?: boolean;
+    sectionType?: string;
 };
 type PublicEnv = {
     PUBLIC_STORE_DOMAIN: string;
@@ -186,6 +187,8 @@ type WeaverseProjectConfigs = {
     weaverseApiKey: string;
     weaverseVersion?: string;
     isDesignMode?: boolean;
+    isPreviewMode?: boolean;
+    sectionType?: string;
     publicEnv?: PublicEnv;
 };
 type HydrogenPageAssignment = {
@@ -276,34 +279,6 @@ type RootRouteData = {
     };
     [key: string]: any;
 };
-type OptionDisplayType = 'dropdown' | 'button' | 'color' | 'variant-image' | 'custom-image';
-type OptionSize = 'sm' | 'md' | 'lg';
-type OptionShape = 'square' | 'round' | 'circle';
-type OptionData = {
-    id: string;
-    name: string;
-    displayName: string;
-    type: OptionDisplayType;
-    size: OptionSize;
-    shape: OptionShape;
-};
-type SwatchesConfigs = {
-    options: OptionData[];
-    swatches: {
-        colors: ColorSwatch[];
-        images: ImageSwatch[];
-    };
-};
-type ColorSwatch = {
-    id: string;
-    name: string;
-    value: string;
-};
-type ImageSwatch = {
-    id: string;
-    name: string;
-    value: WeaverseImage | string;
-};
 type WeaverseProduct = WeaverseResourcePickerData;
 type WeaverseCollection = WeaverseResourcePickerData;
 type WeaverseBlog = WeaverseResourcePickerData;
@@ -352,6 +327,38 @@ declare function generateDataFromSchema({ inspector, }: HydrogenComponentSchema
  * resizeImage('https://cdn.shopify.com/image.jpg', '100x100')
  */
 declare function resizeShopifyImage(imageURL: string, size: string): string;
+declare function recursivelyAddDataItem(type: string, components: HydrogenComponent<any>[], items: any[], initData?: object): `${string}-${string}-${string}-${string}-${string}`;
+declare function getPreviewData(type: string, components: any, weaverseHost: string): {
+    page: {
+        id: string;
+        name: string;
+        rootId: string;
+        items: any[];
+    };
+    project: {
+        id: string;
+        weaverseShopId: string;
+        name: string;
+    };
+    configs: {
+        projectId: string;
+        weaverseHost: string;
+        isDesignMode: boolean;
+        isPreviewMode: boolean;
+        requestInfo: {
+            i18n: {
+                label: string;
+                language: string;
+                country: string;
+                currency: string;
+                pathPrefix: string;
+            };
+            queries: {};
+            pathname: string;
+            search: string;
+        };
+    };
+};
 
 declare function getSelectedProductOptions(request: Request): SelectedOptionInput[];
 
@@ -405,4 +412,4 @@ declare class WeaverseHydrogenItem extends WeaverseItemStore {
     get _schemaData(): Record<string, any>;
 }
 
-export { type AllCacheOptions, type BasicInput, type ColorSwatch, type ComponentLoaderArgs, type FetchProjectPayload, type FetchProjectRequestBody, type FetchWithCacheOptions, type HeadingInput, type HeadingInputType, type HydrogenComponent, type HydrogenComponentData, type HydrogenComponentPresets, type HydrogenComponentProps, type HydrogenComponentSchema, type HydrogenElement, type HydrogenPageAssignment, type HydrogenPageConfigs, type HydrogenPageData, type HydrogenProjectType, type HydrogenThemeInfo, type HydrogenThemeSchema, type HydrogenThemeSettings, type HydrogenToolbarAction, type I18nLocale, IMAGES_PLACEHOLDERS, type ImageSwatch, type InspectorGroup, type LoadPageParams, type Locale, type Localizations, type OptionData, type OptionDisplayType, type OptionShape, type OptionSize, type PageAssignmentParams, type PageType, type PublicEnv, type RootRouteData, type RouteLoaderArgs, type SwatchesConfigs, type WeaverseArticle, type WeaverseBlog, WeaverseClient, type WeaverseClientArgs, type WeaverseCollection, WeaverseHydrogen, WeaverseHydrogenItem, type WeaverseHydrogenParams, WeaverseHydrogenRoot, type WeaverseHydrogenRootProps, type WeaverseInternal, type WeaverseLoaderData, type WeaverseLoaderRequestInfo, type WeaverseMetaObject, type WeaverseProduct, type WeaverseProjectConfigs, type WeaverseStudioQueries, generateDataFromSchema, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, resizeShopifyImage, useThemeSettings, withWeaverse };
+export { type AllCacheOptions, type BasicInput, type ComponentLoaderArgs, type FetchProjectPayload, type FetchProjectRequestBody, type FetchWithCacheOptions, type HeadingInput, type HeadingInputType, type HydrogenComponent, type HydrogenComponentData, type HydrogenComponentPresets, type HydrogenComponentProps, type HydrogenComponentSchema, type HydrogenElement, type HydrogenPageAssignment, type HydrogenPageConfigs, type HydrogenPageData, type HydrogenProjectType, type HydrogenThemeInfo, type HydrogenThemeSchema, type HydrogenThemeSettings, type HydrogenToolbarAction, type I18nLocale, IMAGES_PLACEHOLDERS, type InspectorGroup, type LoadPageParams, type Locale, type Localizations, type PageAssignmentParams, type PageType, type PublicEnv, type RootRouteData, type RouteLoaderArgs, type WeaverseArticle, type WeaverseBlog, WeaverseClient, type WeaverseClientArgs, type WeaverseCollection, WeaverseHydrogen, WeaverseHydrogenItem, type WeaverseHydrogenParams, WeaverseHydrogenRoot, type WeaverseHydrogenRootProps, type WeaverseInternal, type WeaverseLoaderData, type WeaverseLoaderRequestInfo, type WeaverseMetaObject, type WeaverseProduct, type WeaverseProjectConfigs, type WeaverseStudioQueries, generateDataFromSchema, getPreviewData, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, recursivelyAddDataItem, resizeShopifyImage, useThemeSettings, withWeaverse };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, ElementData, ElementSchema, BasicInput as BasicInput$1, WeaverseElement, WeaverseCoreParams, WeaverseProjectDataType, WeaverseImage, WeaverseResourcePickerData, Weaverse, PlatformTypeEnum, WeaverseItemStore } from '@weaverse/react';
+import { EventEmitter, BasicInput as BasicInput$1, ElementData, WeaverseElement, ElementSchema, WeaverseProjectDataType, WeaverseCoreParams, WeaverseResourcePickerData, Weaverse, PlatformTypeEnum, WeaverseItemStore } from '@weaverse/react';
 export { InputType, PositionInputValue, WeaverseImage, WeaverseVideo, isBrowser, isIframe, useChildInstances, useItemInstance, useParentInstance, useWeaverse } from '@weaverse/react';
 import { NavigateFunction } from '@remix-run/react';
 import { createWithCache, I18nBase, HydrogenContext, HydrogenEnv } from '@shopify/hydrogen';
@@ -47,7 +47,8 @@ declare class WeaverseClient {
     waitUntil: WeaverseClientArgs['waitUntil'];
     countries?: WeaverseClientArgs['countries'];
     constructor(args: WeaverseClientArgs);
-    fetchWithCache: <T extends object>(url: string, options?: FetchWithCacheOptions) => Promise<T>;
+    private directFetch;
+    fetchWithCache<T extends object>(url: string, options?: FetchWithCacheOptions): Promise<T>;
     loadThemeSettings: (strategy?: AllCacheOptions) => Promise<any>;
     generateFallbackPage: (message: string) => HydrogenPageData;
     loadPage: (params?: LoadPageParams) => Promise<WeaverseLoaderData | null>;
@@ -70,9 +71,7 @@ interface AllCacheOptions {
 }
 type ComponentLoaderArgs<T = any, E = any> = {
     data: T;
-    weaverse: Omit<WeaverseClient, 'env'> & {
-        env: E;
-    };
+    weaverse: WeaverseClient;
 };
 interface RouteLoaderArgs extends LoaderFunctionArgs {
     context: AppLoadContext & {
@@ -175,6 +174,8 @@ type WeaverseStudioQueries = {
     weaverseHost: string;
     weaverseVersion: string;
     isDesignMode: boolean;
+    isPreviewMode?: boolean;
+    sectionType?: string;
 };
 type PublicEnv = {
     PUBLIC_STORE_DOMAIN: string;
@@ -186,6 +187,8 @@ type WeaverseProjectConfigs = {
     weaverseApiKey: string;
     weaverseVersion?: string;
     isDesignMode?: boolean;
+    isPreviewMode?: boolean;
+    sectionType?: string;
     publicEnv?: PublicEnv;
 };
 type HydrogenPageAssignment = {
@@ -276,34 +279,6 @@ type RootRouteData = {
     };
     [key: string]: any;
 };
-type OptionDisplayType = 'dropdown' | 'button' | 'color' | 'variant-image' | 'custom-image';
-type OptionSize = 'sm' | 'md' | 'lg';
-type OptionShape = 'square' | 'round' | 'circle';
-type OptionData = {
-    id: string;
-    name: string;
-    displayName: string;
-    type: OptionDisplayType;
-    size: OptionSize;
-    shape: OptionShape;
-};
-type SwatchesConfigs = {
-    options: OptionData[];
-    swatches: {
-        colors: ColorSwatch[];
-        images: ImageSwatch[];
-    };
-};
-type ColorSwatch = {
-    id: string;
-    name: string;
-    value: string;
-};
-type ImageSwatch = {
-    id: string;
-    name: string;
-    value: WeaverseImage | string;
-};
 type WeaverseProduct = WeaverseResourcePickerData;
 type WeaverseCollection = WeaverseResourcePickerData;
 type WeaverseBlog = WeaverseResourcePickerData;
@@ -352,6 +327,38 @@ declare function generateDataFromSchema({ inspector, }: HydrogenComponentSchema
  * resizeImage('https://cdn.shopify.com/image.jpg', '100x100')
  */
 declare function resizeShopifyImage(imageURL: string, size: string): string;
+declare function recursivelyAddDataItem(type: string, components: HydrogenComponent<any>[], items: any[], initData?: object): `${string}-${string}-${string}-${string}-${string}`;
+declare function getPreviewData(type: string, components: any, weaverseHost: string): {
+    page: {
+        id: string;
+        name: string;
+        rootId: string;
+        items: any[];
+    };
+    project: {
+        id: string;
+        weaverseShopId: string;
+        name: string;
+    };
+    configs: {
+        projectId: string;
+        weaverseHost: string;
+        isDesignMode: boolean;
+        isPreviewMode: boolean;
+        requestInfo: {
+            i18n: {
+                label: string;
+                language: string;
+                country: string;
+                currency: string;
+                pathPrefix: string;
+            };
+            queries: {};
+            pathname: string;
+            search: string;
+        };
+    };
+};
 
 declare function getSelectedProductOptions(request: Request): SelectedOptionInput[];
 
@@ -405,4 +412,4 @@ declare class WeaverseHydrogenItem extends WeaverseItemStore {
     get _schemaData(): Record<string, any>;
 }
 
-export { type AllCacheOptions, type BasicInput, type ColorSwatch, type ComponentLoaderArgs, type FetchProjectPayload, type FetchProjectRequestBody, type FetchWithCacheOptions, type HeadingInput, type HeadingInputType, type HydrogenComponent, type HydrogenComponentData, type HydrogenComponentPresets, type HydrogenComponentProps, type HydrogenComponentSchema, type HydrogenElement, type HydrogenPageAssignment, type HydrogenPageConfigs, type HydrogenPageData, type HydrogenProjectType, type HydrogenThemeInfo, type HydrogenThemeSchema, type HydrogenThemeSettings, type HydrogenToolbarAction, type I18nLocale, IMAGES_PLACEHOLDERS, type ImageSwatch, type InspectorGroup, type LoadPageParams, type Locale, type Localizations, type OptionData, type OptionDisplayType, type OptionShape, type OptionSize, type PageAssignmentParams, type PageType, type PublicEnv, type RootRouteData, type RouteLoaderArgs, type SwatchesConfigs, type WeaverseArticle, type WeaverseBlog, WeaverseClient, type WeaverseClientArgs, type WeaverseCollection, WeaverseHydrogen, WeaverseHydrogenItem, type WeaverseHydrogenParams, WeaverseHydrogenRoot, type WeaverseHydrogenRootProps, type WeaverseInternal, type WeaverseLoaderData, type WeaverseLoaderRequestInfo, type WeaverseMetaObject, type WeaverseProduct, type WeaverseProjectConfigs, type WeaverseStudioQueries, generateDataFromSchema, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, resizeShopifyImage, useThemeSettings, withWeaverse };
+export { type AllCacheOptions, type BasicInput, type ComponentLoaderArgs, type FetchProjectPayload, type FetchProjectRequestBody, type FetchWithCacheOptions, type HeadingInput, type HeadingInputType, type HydrogenComponent, type HydrogenComponentData, type HydrogenComponentPresets, type HydrogenComponentProps, type HydrogenComponentSchema, type HydrogenElement, type HydrogenPageAssignment, type HydrogenPageConfigs, type HydrogenPageData, type HydrogenProjectType, type HydrogenThemeInfo, type HydrogenThemeSchema, type HydrogenThemeSettings, type HydrogenToolbarAction, type I18nLocale, IMAGES_PLACEHOLDERS, type InspectorGroup, type LoadPageParams, type Locale, type Localizations, type PageAssignmentParams, type PageType, type PublicEnv, type RootRouteData, type RouteLoaderArgs, type WeaverseArticle, type WeaverseBlog, WeaverseClient, type WeaverseClientArgs, type WeaverseCollection, WeaverseHydrogen, WeaverseHydrogenItem, type WeaverseHydrogenParams, WeaverseHydrogenRoot, type WeaverseHydrogenRootProps, type WeaverseInternal, type WeaverseLoaderData, type WeaverseLoaderRequestInfo, type WeaverseMetaObject, type WeaverseProduct, type WeaverseProjectConfigs, type WeaverseStudioQueries, generateDataFromSchema, getPreviewData, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, recursivelyAddDataItem, resizeShopifyImage, useThemeSettings, withWeaverse };

package/dist/index.js

@@ -38,6 +38,8 @@ function getWeaverseConfigs(request, env) {
     weaverseProjectId,
     weaverseHost,
     isDesignMode,
+    isPreviewMode,
+    sectionType,
     weaverseVersion,
     weaverseApiKey
   } = queries;
@@ -47,6 +49,8 @@ function getWeaverseConfigs(request, env) {
     weaverseApiKey: weaverseApiKey || WEAVERSE_API_KEY || envFromProcess.WEAVERSE_API_KEY || "",
     weaverseVersion: weaverseVersion || "",
     isDesignMode: isDesignMode || false,
+    isPreviewMode: isPreviewMode || false,
+    sectionType: sectionType || "",
     publicEnv: {
       PUBLIC_STORE_DOMAIN: PUBLIC_STORE_DOMAIN || "",
       PUBLIC_STOREFRONT_API_TOKEN: PUBLIC_STOREFRONT_API_TOKEN || ""
@@ -80,6 +84,94 @@ function resizeShopifyImage(imageURL, size) {
     return imageURL;
   }
 }
+function recursivelyAddDataItem(type, components, items, initData) {
+  const component = components.find((c) => c.schema.type === type);
+  if (!component) {
+    return;
+  }
+  let childIDs = [];
+  const id = crypto.randomUUID();
+  const { children, ...data } = component.schema?.presets || {};
+  if (children) {
+    for (const child of children) {
+      const { type: type2, children: children2, ...data2 } = child;
+      const childID = recursivelyAddDataItem(
+        child.type,
+        components,
+        items,
+        data2
+      );
+      childIDs.push({
+        id: childID
+      });
+    }
+  }
+  items.push({
+    data: { ...data, ...initData },
+    id,
+    type,
+    children: childIDs
+  });
+  return id;
+}
+function getPreviewData(type, components, weaverseHost) {
+  const initialData = {
+    project: {
+      id: "x",
+      weaverseShopId: "shopid",
+      name: "Section Preview"
+    },
+    // pageAssignment: {
+    //   projectId: "x",
+    //   type: "CUSTOM",
+    //   locale: "en-us",
+    //   handle: "",
+    // },
+    configs: {
+      projectId: "x",
+      weaverseHost,
+      isDesignMode: false,
+      isPreviewMode: true,
+      requestInfo: {
+        i18n: {
+          label: "United States (USD $)",
+          language: "EN",
+          country: "US",
+          currency: "USD",
+          pathPrefix: ""
+        },
+        queries: {},
+        pathname: "/",
+        search: ""
+      }
+    }
+  };
+  let items = [];
+  const id = recursivelyAddDataItem(type, components, items);
+  const page = {
+    id: "0",
+    name: "Preview section",
+    rootId: "1",
+    items: [
+      {
+        data: {},
+        id: "1",
+        type: "main",
+        children: [
+          {
+            id
+          }
+        ]
+      },
+      ...items
+    ]
+  };
+  const previewData = {
+    ...initialData,
+    page
+  };
+  return previewData;
+}
 var ThemeSettingsStore = class extends react.EventEmitter {
   settings = {};
   countries;
@@ -134,19 +226,24 @@ function useStudio(weaverse) {
   let { pathname, search } = react$2.useLocation();
   let navigate = react$2.useNavigate();
   let themeSettingsStore = useThemeSettingsStore();
-  let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
+  let { isDesignMode, weaverseHost, weaverseVersion, isPreviewMode } = weaverse;
   react$1.useEffect(() => {
-    if (navigation.state === "idle" && isDesignMode) {
-      weaverse.internal = {
-        ...weaverse.internal,
-        navigate,
-        revalidate,
-        themeSettingsStore
-      };
-      let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
-      react.loadScript(studioSrc).then(() => {
-        window.weaverseStudio?.init(weaverse);
-      }).catch(console.error);
+    if (navigation.state === "idle") {
+      if (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,
+          themeSettingsStore
+        };
+        let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
+        react.loadScript(studioSrc).then(() => {
+          window.weaverseStudio?.init(weaverse);
+        }).catch(console.error);
+      }
     }
   }, [pathname, search, navigation.state]);
   usePixel(weaverse);
@@ -279,12 +376,19 @@ function withWeaverse(Component) {
 function FallbackError({ error }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { children: error?.message || "An unexpected error occurred" });
 }
+var API_PATH = "api/public";
+var DEFAULT_CACHE_STRATEGY = {
+  maxAge: 5,
+  sMaxAge: 5,
+  staleWhileRevalidate: 82800
+};
 var WeaverseClient = class {
-  API = "api/public";
+  API = API_PATH;
   basePageConfigs;
   basePageRequestBody;
   configs;
   withCache;
+  // Required dependencies
   request;
   storefront;
   components;
@@ -294,7 +398,7 @@ var WeaverseClient = class {
   waitUntil;
   countries;
   constructor(args) {
-    let {
+    const {
       env,
       storefront,
       components,
@@ -327,50 +431,50 @@ var WeaverseClient = class {
       projectId: this.configs.projectId
     };
   }
-  fetchWithCache = async (url, options = {}) => {
-    let cacheKey = [url, options.body];
-    let {
-      strategy = this.storefront.CacheCustom({
-        maxAge: 1,
-        sMaxAge: 1,
-        staleWhileRevalidate: 82800
-      }),
+  // Helper method for direct fetching in design mode
+  async directFetch(url, options = {}) {
+    try {
+      const res = await fetch(url, options);
+      if (!res.ok) {
+        const error = await res.text();
+        throw new Error(`${res.status} ${res.statusText} ${error}`);
+      }
+      return res.json();
+    } catch (err) {
+      throw new Error(`Failed to fetch data from ${url}`, { cause: err });
+    }
+  }
+  async fetchWithCache(url, options = {}) {
+    const {
+      strategy = this.storefront.CacheCustom(DEFAULT_CACHE_STRATEGY),
       ...reqInit
     } = options;
+    const cacheKey = [url, options.body];
     if (this.configs.isDesignMode) {
-      try {
-        const res2 = await fetch(url, reqInit);
-        return await res2.json();
-      } catch (err) {
-        throw new Error(`Failed to fetch data from ${url}`, { cause: err });
-      }
+      return this.directFetch(url, reqInit);
     }
-    let res = this.withCache.run(
+    return this.withCache.run(
       {
         cacheKey,
         cacheStrategy: strategy,
-        // @ts-expect-error
         shouldCacheResult: (result) => result?.data
       },
       async () => {
-        let response = await fetch(url, {
+        return this.directFetch(url, {
           ...reqInit,
           headers: {
             "Cache-Control": hydrogen.generateCacheControlHeader(strategy),
             ...reqInit.headers
           }
         });
-        if (!response.ok) {
-          let error = await response.text();
-          let { status, statusText } = response;
-          throw new Error(`${status} ${statusText} ${error}`, { cause: error });
-        }
-        return await response.json();
       }
     );
-    return res;
-  };
+  }
   loadThemeSettings = async (strategy) => {
+    let defaultThemeSettings = {};
+    if (this.themeSchema) {
+      defaultThemeSettings = generateDataFromSchema(this.themeSchema);
+    }
     try {
       let { API, configs } = this;
       let { weaverseHost, projectId, isDesignMode } = configs;
@@ -393,10 +497,6 @@ var WeaverseClient = class {
       }
       let data = res || {};
       if (data?.theme && this.themeSchema?.inspector) {
-        let defaultThemeSettings = {};
-        if (this.themeSchema) {
-          defaultThemeSettings = generateDataFromSchema(this.themeSchema);
-        }
         data.theme = {
           ...defaultThemeSettings,
           ...data.theme
@@ -412,8 +512,8 @@ var WeaverseClient = class {
       }
       return data;
     } catch (e) {
-      console.error("\u274C Theme settings load failed.", e);
-      return null;
+      console.info("Unable to load theme settings", e);
+      return defaultThemeSettings;
     }
   };
   generateFallbackPage = (message) => {
@@ -434,7 +534,21 @@ var WeaverseClient = class {
   loadPage = async (params = {}) => {
     try {
       let { request, storefront, basePageRequestBody, basePageConfigs } = this;
-      let { projectId, isDesignMode, weaverseHost } = this.configs;
+      let {
+        projectId,
+        isDesignMode,
+        weaverseHost,
+        isPreviewMode,
+        sectionType
+      } = this.configs;
+      if (isPreviewMode) {
+        const previewData = getPreviewData(
+          sectionType,
+          this.components,
+          weaverseHost
+        );
+        return previewData;
+      }
       if (!projectId) {
         throw new Error("Missing Weaverse projectId!");
       }
@@ -463,7 +577,13 @@ var WeaverseClient = class {
       }
       let { page, project, pageAssignment } = payload;
       if (!project) {
-        throw new Error(`Weaverse project not found. Id: ${projectId}`);
+        console.error("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.");
@@ -489,7 +609,7 @@ var WeaverseClient = class {
       };
     } catch (e) {
       console.error(`\u274C Page load failed.`, e);
-      throw e;
+      return null;
     }
   };
   execComponentLoader = async (item) => {
@@ -619,9 +739,11 @@ exports.WeaverseHydrogen = WeaverseHydrogen;
 exports.WeaverseHydrogenItem = WeaverseHydrogenItem;
 exports.WeaverseHydrogenRoot = WeaverseHydrogenRoot;
 exports.generateDataFromSchema = generateDataFromSchema;
+exports.getPreviewData = getPreviewData;
 exports.getRequestQueries = getRequestQueries;
 exports.getSelectedProductOptions = getSelectedProductOptions;
 exports.getWeaverseConfigs = getWeaverseConfigs;
+exports.recursivelyAddDataItem = recursivelyAddDataItem;
 exports.resizeShopifyImage = resizeShopifyImage;
 exports.useThemeSettings = useThemeSettings;
 exports.withWeaverse = withWeaverse;