@weaverse/hydrogen 1.1.19 → 1.2.0

package/dist/index.d.mts

@@ -123,12 +123,11 @@ type WeaverseThemeConfigs = {
     countries: Localizations;
 };
 type WeaverseInternal = {
-    themeConfigs: WeaverseThemeConfigs;
     pageAssignment: HydrogenPageAssignment;
     project: HydrogenProjectType;
     navigate: NavigateFunction;
     revalidate: () => void;
-    publicEnv?: PublicEnv;
+    themeSettingsStore: WeaverseThemeSettingsStore;
 };
 type HydrogenComponentPresets = {
     type: string;
@@ -201,7 +200,7 @@ type HydrogenPageData = {
 };
 interface WeaverseHydrogenRootProps {
     components: HydrogenComponent[];
-    errorComponent: React__default.FC<{
+    errorComponent?: React__default.FC<{
         error: {
             message: string;
             stack?: string;
@@ -229,7 +228,7 @@ type PageLoadParams = {
 type FetchProjectRequestBody = {
     projectId: string;
     url: string;
-    countries: Localizations;
+    countries?: Localizations;
     i18n?: I18nLocale;
     params?: PageLoadParams;
     isDesignMode?: boolean;
@@ -244,6 +243,12 @@ type WeaverseThemeSettingsStore = {
     subscribe(listener: () => void): () => void;
     getSnapshot(): HydrogenThemeSettings | null;
     getServerSnapshot(): HydrogenThemeSettings | null;
+    settings: HydrogenThemeSettings | null;
+    listeners: (() => void)[];
+    emitChange(): void;
+    countries: Localizations;
+    schema: HydrogenThemeSchema;
+    publicEnv?: PublicEnv;
 };
 type HydrogenThemeEnv = {
     WEAVERSE_PROJECT_ID: string;
@@ -256,7 +261,7 @@ type WeaverseClientArgs = {
     configs: WeaverseProjectConfigs;
     storefront: Storefront<I18nLocale>;
     components: HydrogenComponent[];
-    countries: Localizations;
+    countries?: Localizations;
     themeSchema: HydrogenThemeSchema;
 };
 type FetchWithCacheOptions = RequestInit & {
@@ -266,7 +271,6 @@ declare global {
     interface Window {
         __weaverse: WeaverseHydrogen;
         __weaverses: WeaverseHydrogen[];
-        __weaverseThemeSettingsStore: WeaverseThemeSettingsStore;
     }
 }
 
@@ -275,7 +279,7 @@ declare class WeaverseClient {
     clientVersion: string;
     storefront: Storefront<I18nLocale>;
     components: HydrogenComponent[];
-    countries: Localizations;
+    countries?: Localizations;
     themeSchema: HydrogenThemeSchema;
     configs: WeaverseProjectConfigs;
     basePageConfigs: Omit<WeaverseProjectConfigs, 'requestInfo'>;
@@ -291,6 +295,24 @@ declare class WeaverseClient {
 }
 declare function createWeaverseClient(args: WeaverseClientArgs): WeaverseClient;
 
+declare class ThemeSettingsStore implements WeaverseThemeSettingsStore {
+    settings: HydrogenThemeSettings | null;
+    listeners: (() => void)[];
+    countries: Localizations;
+    schema: HydrogenThemeSchema;
+    publicEnv?: PublicEnv;
+    constructor({ theme, countries, schema, publicEnv, }: {
+        theme: HydrogenThemeSettings;
+        countries: Localizations;
+        schema: HydrogenThemeSchema;
+        publicEnv?: PublicEnv;
+    });
+    updateThemeSettings: (newSettings: HydrogenThemeSettings) => void;
+    subscribe: (listener: () => void) => (() => void);
+    getSnapshot: () => HydrogenThemeSettings | null;
+    getServerSnapshot: () => HydrogenThemeSettings | null;
+    emitChange: () => void;
+}
 declare function useThemeSettings<T = HydrogenThemeSettings>(): T;
 
 declare function getRequestQueries<T = Record<string, string | boolean>>(request: Request): T;
@@ -311,5 +333,6 @@ declare function createContentSecurityPolicy(request: Request, directives?: Reco
 };
 
 declare function WeaverseHydrogenRoot({ errorComponent: ErrorComponent, components, }: WeaverseHydrogenRootProps): React__default.JSX.Element;
+declare let withWeaverse: (Component: React__default.ComponentType<any>) => (props: any) => React__default.JSX.Element;
 
-export { AllCacheOptions, ComponentLoaderArgs, FetchProjectPayload, FetchProjectRequestBody, FetchWithCacheOptions, HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentLoaderFunction, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageAssignment, HydrogenPageConfigs, HydrogenPageData, HydrogenProjectConfig, HydrogenProjectType, HydrogenThemeEnv, HydrogenThemeInfo, HydrogenThemeSchema, HydrogenThemeSettings, HydrogenToolbarAction, I18nLocale, InspectorGroup, Locale, Localizations, PageLoadParams, PageType, PublicEnv, RouteLoaderArgs, WeaverseClient, WeaverseClientArgs, WeaverseHydrogen, WeaverseHydrogenInit, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderData, WeaverseLoaderRequestInfo, WeaverseProjectConfigs, WeaverseStorefrontData, WeaverseStudioQueries, WeaverseThemeConfigs, WeaverseThemeSettingsStore, createContentSecurityPolicy, createWeaverseClient, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, getWeaverseCsp, useThemeSettings };
+export { AllCacheOptions, ComponentLoaderArgs, FetchProjectPayload, FetchProjectRequestBody, FetchWithCacheOptions, HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentLoaderFunction, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageAssignment, HydrogenPageConfigs, HydrogenPageData, HydrogenProjectConfig, HydrogenProjectType, HydrogenThemeEnv, HydrogenThemeInfo, HydrogenThemeSchema, HydrogenThemeSettings, HydrogenToolbarAction, I18nLocale, InspectorGroup, Locale, Localizations, PageLoadParams, PageType, PublicEnv, RouteLoaderArgs, ThemeSettingsStore, WeaverseClient, WeaverseClientArgs, WeaverseHydrogen, WeaverseHydrogenInit, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderData, WeaverseLoaderRequestInfo, WeaverseProjectConfigs, WeaverseStorefrontData, WeaverseStudioQueries, WeaverseThemeConfigs, WeaverseThemeSettingsStore, createContentSecurityPolicy, createWeaverseClient, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, getWeaverseCsp, useThemeSettings, withWeaverse };

package/dist/index.d.ts

@@ -123,12 +123,11 @@ type WeaverseThemeConfigs = {
     countries: Localizations;
 };
 type WeaverseInternal = {
-    themeConfigs: WeaverseThemeConfigs;
     pageAssignment: HydrogenPageAssignment;
     project: HydrogenProjectType;
     navigate: NavigateFunction;
     revalidate: () => void;
-    publicEnv?: PublicEnv;
+    themeSettingsStore: WeaverseThemeSettingsStore;
 };
 type HydrogenComponentPresets = {
     type: string;
@@ -201,7 +200,7 @@ type HydrogenPageData = {
 };
 interface WeaverseHydrogenRootProps {
     components: HydrogenComponent[];
-    errorComponent: React__default.FC<{
+    errorComponent?: React__default.FC<{
         error: {
             message: string;
             stack?: string;
@@ -229,7 +228,7 @@ type PageLoadParams = {
 type FetchProjectRequestBody = {
     projectId: string;
     url: string;
-    countries: Localizations;
+    countries?: Localizations;
     i18n?: I18nLocale;
     params?: PageLoadParams;
     isDesignMode?: boolean;
@@ -244,6 +243,12 @@ type WeaverseThemeSettingsStore = {
     subscribe(listener: () => void): () => void;
     getSnapshot(): HydrogenThemeSettings | null;
     getServerSnapshot(): HydrogenThemeSettings | null;
+    settings: HydrogenThemeSettings | null;
+    listeners: (() => void)[];
+    emitChange(): void;
+    countries: Localizations;
+    schema: HydrogenThemeSchema;
+    publicEnv?: PublicEnv;
 };
 type HydrogenThemeEnv = {
     WEAVERSE_PROJECT_ID: string;
@@ -256,7 +261,7 @@ type WeaverseClientArgs = {
     configs: WeaverseProjectConfigs;
     storefront: Storefront<I18nLocale>;
     components: HydrogenComponent[];
-    countries: Localizations;
+    countries?: Localizations;
     themeSchema: HydrogenThemeSchema;
 };
 type FetchWithCacheOptions = RequestInit & {
@@ -266,7 +271,6 @@ declare global {
     interface Window {
         __weaverse: WeaverseHydrogen;
         __weaverses: WeaverseHydrogen[];
-        __weaverseThemeSettingsStore: WeaverseThemeSettingsStore;
     }
 }
 
@@ -275,7 +279,7 @@ declare class WeaverseClient {
     clientVersion: string;
     storefront: Storefront<I18nLocale>;
     components: HydrogenComponent[];
-    countries: Localizations;
+    countries?: Localizations;
     themeSchema: HydrogenThemeSchema;
     configs: WeaverseProjectConfigs;
     basePageConfigs: Omit<WeaverseProjectConfigs, 'requestInfo'>;
@@ -291,6 +295,24 @@ declare class WeaverseClient {
 }
 declare function createWeaverseClient(args: WeaverseClientArgs): WeaverseClient;
 
+declare class ThemeSettingsStore implements WeaverseThemeSettingsStore {
+    settings: HydrogenThemeSettings | null;
+    listeners: (() => void)[];
+    countries: Localizations;
+    schema: HydrogenThemeSchema;
+    publicEnv?: PublicEnv;
+    constructor({ theme, countries, schema, publicEnv, }: {
+        theme: HydrogenThemeSettings;
+        countries: Localizations;
+        schema: HydrogenThemeSchema;
+        publicEnv?: PublicEnv;
+    });
+    updateThemeSettings: (newSettings: HydrogenThemeSettings) => void;
+    subscribe: (listener: () => void) => (() => void);
+    getSnapshot: () => HydrogenThemeSettings | null;
+    getServerSnapshot: () => HydrogenThemeSettings | null;
+    emitChange: () => void;
+}
 declare function useThemeSettings<T = HydrogenThemeSettings>(): T;
 
 declare function getRequestQueries<T = Record<string, string | boolean>>(request: Request): T;
@@ -311,5 +333,6 @@ declare function createContentSecurityPolicy(request: Request, directives?: Reco
 };
 
 declare function WeaverseHydrogenRoot({ errorComponent: ErrorComponent, components, }: WeaverseHydrogenRootProps): React__default.JSX.Element;
+declare let withWeaverse: (Component: React__default.ComponentType<any>) => (props: any) => React__default.JSX.Element;
 
-export { AllCacheOptions, ComponentLoaderArgs, FetchProjectPayload, FetchProjectRequestBody, FetchWithCacheOptions, HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentLoaderFunction, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageAssignment, HydrogenPageConfigs, HydrogenPageData, HydrogenProjectConfig, HydrogenProjectType, HydrogenThemeEnv, HydrogenThemeInfo, HydrogenThemeSchema, HydrogenThemeSettings, HydrogenToolbarAction, I18nLocale, InspectorGroup, Locale, Localizations, PageLoadParams, PageType, PublicEnv, RouteLoaderArgs, WeaverseClient, WeaverseClientArgs, WeaverseHydrogen, WeaverseHydrogenInit, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderData, WeaverseLoaderRequestInfo, WeaverseProjectConfigs, WeaverseStorefrontData, WeaverseStudioQueries, WeaverseThemeConfigs, WeaverseThemeSettingsStore, createContentSecurityPolicy, createWeaverseClient, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, getWeaverseCsp, useThemeSettings };
+export { AllCacheOptions, ComponentLoaderArgs, FetchProjectPayload, FetchProjectRequestBody, FetchWithCacheOptions, HydrogenComponent, HydrogenComponentData, HydrogenComponentInstance, HydrogenComponentLoaderFunction, HydrogenComponentPresets, HydrogenComponentProps, HydrogenComponentSchema, HydrogenElement, HydrogenPageAssignment, HydrogenPageConfigs, HydrogenPageData, HydrogenProjectConfig, HydrogenProjectType, HydrogenThemeEnv, HydrogenThemeInfo, HydrogenThemeSchema, HydrogenThemeSettings, HydrogenToolbarAction, I18nLocale, InspectorGroup, Locale, Localizations, PageLoadParams, PageType, PublicEnv, RouteLoaderArgs, ThemeSettingsStore, WeaverseClient, WeaverseClientArgs, WeaverseHydrogen, WeaverseHydrogenInit, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderData, WeaverseLoaderRequestInfo, WeaverseProjectConfigs, WeaverseStorefrontData, WeaverseStudioQueries, WeaverseThemeConfigs, WeaverseThemeSettingsStore, createContentSecurityPolicy, createWeaverseClient, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, getWeaverseCsp, useThemeSettings, withWeaverse };

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  ThemeSettingsStore: () => ThemeSettingsStore,
   WeaverseClient: () => WeaverseClient,
   WeaverseHydrogenRoot: () => WeaverseHydrogenRoot,
   createContentSecurityPolicy: () => createContentSecurityPolicy,
@@ -39,7 +40,8 @@ __export(src_exports, {
   getSelectedProductOptions: () => getSelectedProductOptions,
   getWeaverseConfigs: () => getWeaverseConfigs,
   getWeaverseCsp: () => getWeaverseCsp,
-  useThemeSettings: () => useThemeSettings
+  useThemeSettings: () => useThemeSettings,
+  withWeaverse: () => withWeaverse
 });
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("@weaverse/react"), module.exports);
@@ -49,7 +51,7 @@ var import_hydrogen = require("@shopify/hydrogen");
 
 // package.json
 var package_default = {
-  version: "1.1.19",
+  version: "1.1.20",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -84,7 +86,7 @@ var package_default = {
   dependencies: {
     "@remix-run/react": "1.19.1",
     "@shopify/hydrogen": "2023.7.7",
-    "@weaverse/react": "1.1.19",
+    "@weaverse/react": "1.1.20",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
@@ -294,86 +296,13 @@ function createWeaverseClient(args) {
 }
 
 // src/hooks/use-theme-settings.ts
-var import_react = require("@remix-run/react");
-var import_react2 = require("@weaverse/react");
 var import_react3 = require("react");
-var settings = null;
-var listeners = [];
-var themeSettingsStore = {
-  updateThemeSettings(newSettings) {
-    settings = { ...settings, ...newSettings };
-    emitChange();
-  },
-  subscribe(listener) {
-    listeners = [...listeners, listener];
-    return () => {
-      listeners = listeners.filter((l) => l !== listener);
-    };
-  },
-  getSnapshot() {
-    return settings;
-  },
-  getServerSnapshot() {
-    return settings;
-  }
-};
-function emitChange() {
-  for (let listener of listeners) {
-    listener();
-  }
-}
-if (import_react2.isBrowser) {
-  window.__weaverseThemeSettingsStore = themeSettingsStore;
-}
-function useThemeSettings() {
-  let settings2 = (0, import_react3.useSyncExternalStore)(
-    themeSettingsStore.subscribe,
-    themeSettingsStore.getSnapshot,
-    themeSettingsStore.getServerSnapshot
-  );
-  let { weaverseTheme } = (0, import_react.useLoaderData)();
-  (0, import_react3.useEffect)(() => {
-    if (weaverseTheme) {
-      let settings3 = weaverseTheme.theme;
-      if (settings3) {
-        themeSettingsStore.updateThemeSettings(settings3);
-      }
-    } else {
-      console.warn(
-        `'weaverseTheme' should be returned from root loader in order to get global settings from 'useThemeSettings'.`
-      );
-    }
-  }, [weaverseTheme]);
-  return settings2;
-}
-
-// src/wrappers.ts
-var import_hydrogen2 = require("@shopify/hydrogen");
-var import_hydrogen3 = require("@shopify/hydrogen");
-function getSelectedProductOptions(request) {
-  let options = (0, import_hydrogen2.getSelectedProductOptions)(request);
-  return options.filter(
-    ({ name }) => name !== "isDesignMode" && !name.startsWith("weaverse")
-  );
-}
-function createContentSecurityPolicy(request, directives) {
-  let weaverseDirectives = getWeaverseCsp(request);
-  return (0, import_hydrogen3.createContentSecurityPolicy)({
-    ...directives,
-    ...weaverseDirectives
-  });
-}
-
-// src/WeaverseHydrogenRoot.tsx
-var import_react8 = require("@remix-run/react");
-var import_react9 = require("@weaverse/react");
-var import_react10 = __toESM(require("react"));
-var import_react_error_boundary = require("react-error-boundary");
 
 // src/context.ts
-var import_react4 = require("@weaverse/react");
+var import_react = require("@weaverse/react");
+var import_react2 = require("react");
 function createCachedWeaverseInstance(init) {
-  if (import_react4.isBrowser) {
+  if (import_react.isBrowser) {
     window.__weaverses = window.__weaverses || [];
     let weaverse = window.__weaverses.find((w) => {
       let { pathname, search } = w.requestInfo;
@@ -381,13 +310,13 @@ function createCachedWeaverseInstance(init) {
       return pathname === init.requestInfo.pathname && search === init.requestInfo.search && __cachedId === init.data.__cachedId;
     });
     if (!weaverse) {
-      weaverse = new import_react4.Weaverse(init);
+      weaverse = new import_react.Weaverse(init);
       window.__weaverses.push(weaverse);
       console.log("\u{1F4BF} Weaverse", weaverse);
     }
     return weaverse;
   }
-  return new import_react4.Weaverse(init);
+  return new import_react.Weaverse(init);
 }
 function createWeaverseInstance(weaverseData, components) {
   let { page, configs, project, pageAssignment } = weaverseData || {};
@@ -408,33 +337,103 @@ function createWeaverseInstance(weaverseData, components) {
   });
   return weaverse;
 }
+var ThemeProvider = (0, import_react2.createContext)(null);
+ThemeProvider.displayName = "WeaverseThemeProvider";
+
+// src/hooks/use-theme-settings.ts
+var ThemeSettingsStore = class {
+  constructor({
+    theme,
+    countries,
+    schema,
+    publicEnv
+  }) {
+    this.settings = null;
+    this.listeners = [];
+    this.updateThemeSettings = (newSettings) => {
+      this.settings = { ...this.settings, ...newSettings };
+      this.emitChange();
+    };
+    this.subscribe = (listener) => {
+      this.listeners = [...this.listeners, listener];
+      return () => {
+        this.listeners = this.listeners.filter((l) => l !== listener);
+      };
+    };
+    this.getSnapshot = () => {
+      return this.settings;
+    };
+    this.getServerSnapshot = () => {
+      return this.settings;
+    };
+    this.emitChange = () => {
+      for (const listener of this.listeners) {
+        listener();
+      }
+    };
+    this.settings = theme;
+    this.countries = countries;
+    this.schema = schema;
+    this.publicEnv = publicEnv;
+  }
+};
+function useThemeSettings() {
+  let themeSettingsStore = (0, import_react3.useContext)(ThemeProvider);
+  let settings = (0, import_react3.useSyncExternalStore)(
+    themeSettingsStore.subscribe,
+    themeSettingsStore.getSnapshot,
+    themeSettingsStore.getServerSnapshot
+  );
+  return settings;
+}
+
+// src/wrappers.ts
+var import_hydrogen2 = require("@shopify/hydrogen");
+var import_hydrogen3 = require("@shopify/hydrogen");
+function getSelectedProductOptions(request) {
+  let options = (0, import_hydrogen2.getSelectedProductOptions)(request);
+  return options.filter(
+    ({ name }) => name !== "isDesignMode" && !name.startsWith("weaverse")
+  );
+}
+function createContentSecurityPolicy(request, directives) {
+  let weaverseDirectives = getWeaverseCsp(request);
+  return (0, import_hydrogen3.createContentSecurityPolicy)({
+    ...directives,
+    ...weaverseDirectives
+  });
+}
+
+// src/WeaverseHydrogenRoot.tsx
+var import_react7 = require("@remix-run/react");
+var import_react8 = require("@weaverse/react");
+var import_react9 = __toESM(require("react"));
+var import_react_error_boundary = require("react-error-boundary");
 
 // src/hooks/use-studio.ts
-var import_react5 = require("@remix-run/react");
-var import_react6 = require("@weaverse/react");
-var import_react7 = require("react");
+var import_react4 = require("@remix-run/react");
+var import_react5 = require("@weaverse/react");
+var import_react6 = require("react");
 function useStudio(weaverse) {
-  let { weaverseTheme } = (0, import_react5.useRouteLoaderData)("root");
-  let navigate = (0, import_react5.useNavigate)();
-  let { revalidate } = (0, import_react5.useRevalidator)();
-  let { countries, schema, publicEnv } = weaverseTheme || {};
+  let navigate = (0, import_react4.useNavigate)();
+  let { revalidate } = (0, import_react4.useRevalidator)();
+  let themeSettingsStore = (0, import_react6.useContext)(ThemeProvider);
   let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
-  let isStudio = import_react6.isIframe && isDesignMode && weaverseHost && weaverseVersion;
-  (0, import_react7.useEffect)(() => {
+  let isStudio = import_react5.isIframe && isDesignMode && weaverseHost && weaverseVersion;
+  (0, import_react6.useEffect)(() => {
     if (isStudio) {
       weaverse.internal = {
         ...weaverse.internal,
-        publicEnv,
         navigate,
         revalidate,
-        themeConfigs: { schema, countries }
+        themeSettingsStore
       };
       window.__weaverse = weaverse;
       if (window.weaverseStudio) {
         window.weaverseStudio.init(weaverse);
       } else {
         let studioSrc = `${weaverseHost}/assets/studio/hydrogen/index.js?v=${weaverseVersion}`;
-        (0, import_react6.loadScript)(studioSrc);
+        (0, import_react5.loadScript)(studioSrc);
       }
     }
   }, [weaverse]);
@@ -445,31 +444,45 @@ function WeaverseHydrogenRoot({
   errorComponent: ErrorComponent,
   components
 }) {
-  let loaderData = (0, import_react8.useLoaderData)();
+  let loaderData = (0, import_react7.useLoaderData)();
   let data = loaderData?.weaverseData;
   if (data) {
     if (data instanceof Promise) {
-      return /* @__PURE__ */ import_react10.default.createElement(import_react_error_boundary.ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ import_react10.default.createElement(import_react10.Suspense, null, /* @__PURE__ */ import_react10.default.createElement(import_react8.Await, { resolve: data }, (resolvedData) => {
-        return /* @__PURE__ */ import_react10.default.createElement(RenderRoot, { data: resolvedData, components });
-      })));
+      return /* @__PURE__ */ import_react9.default.createElement(
+        import_react_error_boundary.ErrorBoundary,
+        {
+          fallbackRender: ErrorComponent || (() => /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, "An error occurred!"))
+        },
+        /* @__PURE__ */ import_react9.default.createElement(import_react9.Suspense, null, /* @__PURE__ */ import_react9.default.createElement(import_react7.Await, { resolve: data }, (resolvedData) => {
+          return /* @__PURE__ */ import_react9.default.createElement(RenderRoot, { data: resolvedData, components });
+        }))
+      );
     }
-    return /* @__PURE__ */ import_react10.default.createElement(RenderRoot, { data, components });
+    return /* @__PURE__ */ import_react9.default.createElement(RenderRoot, { data, components });
   }
-  return /* @__PURE__ */ import_react10.default.createElement(
+  return ErrorComponent ? /* @__PURE__ */ import_react9.default.createElement(
     ErrorComponent,
     {
       error: { message: "No Weaverse data return from route loader!" }
     }
-  );
+  ) : /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, "No Weaverse data return from route loader!");
 }
 function RenderRoot(props) {
   let { data, components } = props;
   let weaverse = createWeaverseInstance(data, components);
   useStudio(weaverse);
-  return /* @__PURE__ */ import_react10.default.createElement(import_react9.WeaverseRoot, { context: weaverse });
+  return /* @__PURE__ */ import_react9.default.createElement(import_react8.WeaverseRoot, { context: weaverse });
 }
+var withWeaverse = (Component) => {
+  return (props) => {
+    let { weaverseTheme } = (0, import_react7.useLoaderData)();
+    let themeSettingsStore = new ThemeSettingsStore(weaverseTheme);
+    return /* @__PURE__ */ import_react9.default.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ import_react9.default.createElement(Component, { ...props }));
+  };
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ThemeSettingsStore,
   WeaverseClient,
   WeaverseHydrogenRoot,
   createContentSecurityPolicy,
@@ -479,5 +492,6 @@ function RenderRoot(props) {
   getWeaverseConfigs,
   getWeaverseCsp,
   useThemeSettings,
+  withWeaverse,
   ...require("@weaverse/react")
 });

package/dist/index.mjs

@@ -6,7 +6,7 @@ import "@shopify/hydrogen";
 
 // package.json
 var package_default = {
-  version: "1.1.19",
+  version: "1.1.20",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -41,7 +41,7 @@ var package_default = {
   dependencies: {
     "@remix-run/react": "1.19.1",
     "@shopify/hydrogen": "2023.7.7",
-    "@weaverse/react": "1.1.19",
+    "@weaverse/react": "1.1.20",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
@@ -251,86 +251,13 @@ function createWeaverseClient(args) {
 }
 
 // src/hooks/use-theme-settings.ts
-import { useLoaderData } from "@remix-run/react";
-import { isBrowser } from "@weaverse/react";
-import { useEffect, useSyncExternalStore } from "react";
-var settings = null;
-var listeners = [];
-var themeSettingsStore = {
-  updateThemeSettings(newSettings) {
-    settings = { ...settings, ...newSettings };
-    emitChange();
-  },
-  subscribe(listener) {
-    listeners = [...listeners, listener];
-    return () => {
-      listeners = listeners.filter((l) => l !== listener);
-    };
-  },
-  getSnapshot() {
-    return settings;
-  },
-  getServerSnapshot() {
-    return settings;
-  }
-};
-function emitChange() {
-  for (let listener of listeners) {
-    listener();
-  }
-}
-if (isBrowser) {
-  window.__weaverseThemeSettingsStore = themeSettingsStore;
-}
-function useThemeSettings() {
-  let settings2 = useSyncExternalStore(
-    themeSettingsStore.subscribe,
-    themeSettingsStore.getSnapshot,
-    themeSettingsStore.getServerSnapshot
-  );
-  let { weaverseTheme } = useLoaderData();
-  useEffect(() => {
-    if (weaverseTheme) {
-      let settings3 = weaverseTheme.theme;
-      if (settings3) {
-        themeSettingsStore.updateThemeSettings(settings3);
-      }
-    } else {
-      console.warn(
-        `'weaverseTheme' should be returned from root loader in order to get global settings from 'useThemeSettings'.`
-      );
-    }
-  }, [weaverseTheme]);
-  return settings2;
-}
-
-// src/wrappers.ts
-import { getSelectedProductOptions as hydrogen_getSelectedProductOptions } from "@shopify/hydrogen";
-import { createContentSecurityPolicy as hydrogen_createContentSecurityPolicy } from "@shopify/hydrogen";
-function getSelectedProductOptions(request) {
-  let options = hydrogen_getSelectedProductOptions(request);
-  return options.filter(
-    ({ name }) => name !== "isDesignMode" && !name.startsWith("weaverse")
-  );
-}
-function createContentSecurityPolicy(request, directives) {
-  let weaverseDirectives = getWeaverseCsp(request);
-  return hydrogen_createContentSecurityPolicy({
-    ...directives,
-    ...weaverseDirectives
-  });
-}
-
-// src/WeaverseHydrogenRoot.tsx
-import { Await, useLoaderData as useLoaderData2 } from "@remix-run/react";
-import { WeaverseRoot } from "@weaverse/react";
-import React, { Suspense } from "react";
-import { ErrorBoundary } from "react-error-boundary";
+import { useContext, useSyncExternalStore } from "react";
 
 // src/context.ts
-import { Weaverse, isBrowser as isBrowser2 } from "@weaverse/react";
+import { Weaverse, isBrowser } from "@weaverse/react";
+import { createContext } from "react";
 function createCachedWeaverseInstance(init) {
-  if (isBrowser2) {
+  if (isBrowser) {
     window.__weaverses = window.__weaverses || [];
     let weaverse = window.__weaverses.find((w) => {
       let { pathname, search } = w.requestInfo;
@@ -365,30 +292,96 @@ function createWeaverseInstance(weaverseData, components) {
   });
   return weaverse;
 }
+var ThemeProvider = createContext(null);
+ThemeProvider.displayName = "WeaverseThemeProvider";
+
+// src/hooks/use-theme-settings.ts
+var ThemeSettingsStore = class {
+  constructor({
+    theme,
+    countries,
+    schema,
+    publicEnv
+  }) {
+    this.settings = null;
+    this.listeners = [];
+    this.updateThemeSettings = (newSettings) => {
+      this.settings = { ...this.settings, ...newSettings };
+      this.emitChange();
+    };
+    this.subscribe = (listener) => {
+      this.listeners = [...this.listeners, listener];
+      return () => {
+        this.listeners = this.listeners.filter((l) => l !== listener);
+      };
+    };
+    this.getSnapshot = () => {
+      return this.settings;
+    };
+    this.getServerSnapshot = () => {
+      return this.settings;
+    };
+    this.emitChange = () => {
+      for (const listener of this.listeners) {
+        listener();
+      }
+    };
+    this.settings = theme;
+    this.countries = countries;
+    this.schema = schema;
+    this.publicEnv = publicEnv;
+  }
+};
+function useThemeSettings() {
+  let themeSettingsStore = useContext(ThemeProvider);
+  let settings = useSyncExternalStore(
+    themeSettingsStore.subscribe,
+    themeSettingsStore.getSnapshot,
+    themeSettingsStore.getServerSnapshot
+  );
+  return settings;
+}
+
+// src/wrappers.ts
+import { getSelectedProductOptions as hydrogen_getSelectedProductOptions } from "@shopify/hydrogen";
+import { createContentSecurityPolicy as hydrogen_createContentSecurityPolicy } from "@shopify/hydrogen";
+function getSelectedProductOptions(request) {
+  let options = hydrogen_getSelectedProductOptions(request);
+  return options.filter(
+    ({ name }) => name !== "isDesignMode" && !name.startsWith("weaverse")
+  );
+}
+function createContentSecurityPolicy(request, directives) {
+  let weaverseDirectives = getWeaverseCsp(request);
+  return hydrogen_createContentSecurityPolicy({
+    ...directives,
+    ...weaverseDirectives
+  });
+}
+
+// src/WeaverseHydrogenRoot.tsx
+import { Await, useLoaderData } from "@remix-run/react";
+import { WeaverseRoot } from "@weaverse/react";
+import React, { Suspense } from "react";
+import { ErrorBoundary } from "react-error-boundary";
 
 // src/hooks/use-studio.ts
-import {
-  useNavigate,
-  useRevalidator,
-  useRouteLoaderData
-} from "@remix-run/react";
+import { useNavigate, useRevalidator } from "@remix-run/react";
 import { isIframe, loadScript } from "@weaverse/react";
-import { useEffect as useEffect2 } from "react";
+import { useContext as useContext2, useEffect } from "react";
 function useStudio(weaverse) {
-  let { weaverseTheme } = useRouteLoaderData("root");
   let navigate = useNavigate();
   let { revalidate } = useRevalidator();
-  let { countries, schema, publicEnv } = weaverseTheme || {};
+  let themeSettingsStore = useContext2(ThemeProvider);
   let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
   let isStudio = isIframe && isDesignMode && weaverseHost && weaverseVersion;
-  useEffect2(() => {
+  useEffect(() => {
     if (isStudio) {
       weaverse.internal = {
         ...weaverse.internal,
-        publicEnv,
         navigate,
         revalidate,
-        themeConfigs: { schema, countries }
+        themeSettingsStore
       };
       window.__weaverse = weaverse;
       if (window.weaverseStudio) {
@@ -406,22 +399,28 @@ function WeaverseHydrogenRoot({
   errorComponent: ErrorComponent,
   components
 }) {
-  let loaderData = useLoaderData2();
+  let loaderData = useLoaderData();
   let data = loaderData?.weaverseData;
   if (data) {
     if (data instanceof Promise) {
-      return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ React.createElement(Suspense, null, /* @__PURE__ */ React.createElement(Await, { resolve: data }, (resolvedData) => {
-        return /* @__PURE__ */ React.createElement(RenderRoot, { data: resolvedData, components });
-      })));
+      return /* @__PURE__ */ React.createElement(
+        ErrorBoundary,
+        {
+          fallbackRender: ErrorComponent || (() => /* @__PURE__ */ React.createElement(React.Fragment, null, "An error occurred!"))
+        },
+        /* @__PURE__ */ React.createElement(Suspense, null, /* @__PURE__ */ React.createElement(Await, { resolve: data }, (resolvedData) => {
+          return /* @__PURE__ */ React.createElement(RenderRoot, { data: resolvedData, components });
+        }))
+      );
     }
     return /* @__PURE__ */ React.createElement(RenderRoot, { data, components });
   }
-  return /* @__PURE__ */ React.createElement(
+  return ErrorComponent ? /* @__PURE__ */ React.createElement(
     ErrorComponent,
     {
       error: { message: "No Weaverse data return from route loader!" }
     }
-  );
+  ) : /* @__PURE__ */ React.createElement(React.Fragment, null, "No Weaverse data return from route loader!");
 }
 function RenderRoot(props) {
   let { data, components } = props;
@@ -429,7 +428,15 @@ function RenderRoot(props) {
   useStudio(weaverse);
   return /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse });
 }
+var withWeaverse = (Component) => {
+  return (props) => {
+    let { weaverseTheme } = useLoaderData();
+    let themeSettingsStore = new ThemeSettingsStore(weaverseTheme);
+    return /* @__PURE__ */ React.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ React.createElement(Component, { ...props }));
+  };
+};
 export {
+  ThemeSettingsStore,
   WeaverseClient,
   WeaverseHydrogenRoot,
   createContentSecurityPolicy,
@@ -438,5 +445,6 @@ export {
   getSelectedProductOptions,
   getWeaverseConfigs,
   getWeaverseCsp,
-  useThemeSettings
+  useThemeSettings,
+  withWeaverse
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.19",
+  "version": "1.2.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@remix-run/react": "1.19.1",
     "@shopify/hydrogen": "2023.7.7",
-    "@weaverse/react": "1.1.19",
+    "@weaverse/react": "1.2.0",
     "react-error-boundary": "^4.0.11"
   },
   "devDependencies": {