@weaverse/hydrogen 1.2.2 → 1.3.1

package/dist/index.d.mts

@@ -8,6 +8,21 @@ import * as React from 'react';
 import React__default, { ForwardRefExoticComponent } from 'react';
 import * as _shopify_hydrogen_react_storefront_api_types from '@shopify/hydrogen-react/storefront-api-types';
 
+declare class ThemeSettingsStore {
+    settings: HydrogenThemeSettings | null;
+    listeners: (() => void)[];
+    countries?: Localizations;
+    schema?: HydrogenThemeSchema;
+    publicEnv?: PublicEnv;
+    constructor(data: RootRouteData['weaverseTheme']);
+    updateThemeSettings: (newSettings: HydrogenThemeSettings) => void;
+    subscribe: (listener: () => void) => (() => void);
+    getSnapshot: () => HydrogenThemeSettings | null;
+    getServerSnapshot: () => HydrogenThemeSettings | null;
+    emitChange: () => void;
+}
+declare function useThemeSettings<T = HydrogenThemeSettings>(): T;
+
 declare let STORE_PAGES: {
     INDEX: string;
     PRODUCT: string;
@@ -127,7 +142,7 @@ type WeaverseInternal = {
     project: HydrogenProjectType;
     navigate: NavigateFunction;
     revalidate: () => void;
-    themeSettingsStore: WeaverseThemeSettingsStore;
+    themeSettingsStore: ThemeSettingsStore;
 };
 type HydrogenComponentPresets = {
     type: string;
@@ -238,18 +253,6 @@ type FetchProjectPayload = {
     project: HydrogenProjectType;
     pageAssignment: HydrogenPageAssignment;
 };
-type WeaverseThemeSettingsStore = {
-    updateThemeSettings(newSettings: HydrogenThemeSettings): void;
-    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;
     WEAVERSE_HOST: string;
@@ -267,6 +270,15 @@ type WeaverseClientArgs = {
 type FetchWithCacheOptions = RequestInit & {
     strategy?: AllCacheOptions;
 };
+type RootRouteData = {
+    weaverseTheme?: {
+        theme: HydrogenThemeSettings;
+        countries?: Localizations;
+        schema?: HydrogenThemeSchema;
+        publicEnv?: PublicEnv;
+    };
+    [key: string]: any;
+};
 declare global {
     interface Window {
         __weaverse: WeaverseHydrogen;
@@ -293,27 +305,6 @@ declare class WeaverseClient {
     }) => Promise<WeaverseLoaderData | null>;
     execComponentLoader: (item: HydrogenComponentData, args: LoaderArgs) => Promise<HydrogenComponentData>;
 }
-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;
 declare function getWeaverseConfigs(request: Request, env: HydrogenThemeEnv): WeaverseProjectConfigs;
@@ -333,6 +324,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;
+declare let withWeaverse: (Component: React__default.ComponentType) => (props: React__default.JSX.IntrinsicAttributes) => 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, ThemeSettingsStore, WeaverseClient, WeaverseClientArgs, WeaverseHydrogen, WeaverseHydrogenInit, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderData, WeaverseLoaderRequestInfo, WeaverseProjectConfigs, WeaverseStorefrontData, WeaverseStudioQueries, WeaverseThemeConfigs, WeaverseThemeSettingsStore, createContentSecurityPolicy, createWeaverseClient, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, getWeaverseCsp, useThemeSettings, withWeaverse };
+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, RootRouteData, RouteLoaderArgs, ThemeSettingsStore, WeaverseClient, WeaverseClientArgs, WeaverseHydrogen, WeaverseHydrogenInit, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderData, WeaverseLoaderRequestInfo, WeaverseProjectConfigs, WeaverseStorefrontData, WeaverseStudioQueries, WeaverseThemeConfigs, createContentSecurityPolicy, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, getWeaverseCsp, useThemeSettings, withWeaverse };

package/dist/index.d.ts

@@ -8,6 +8,21 @@ import * as React from 'react';
 import React__default, { ForwardRefExoticComponent } from 'react';
 import * as _shopify_hydrogen_react_storefront_api_types from '@shopify/hydrogen-react/storefront-api-types';
 
+declare class ThemeSettingsStore {
+    settings: HydrogenThemeSettings | null;
+    listeners: (() => void)[];
+    countries?: Localizations;
+    schema?: HydrogenThemeSchema;
+    publicEnv?: PublicEnv;
+    constructor(data: RootRouteData['weaverseTheme']);
+    updateThemeSettings: (newSettings: HydrogenThemeSettings) => void;
+    subscribe: (listener: () => void) => (() => void);
+    getSnapshot: () => HydrogenThemeSettings | null;
+    getServerSnapshot: () => HydrogenThemeSettings | null;
+    emitChange: () => void;
+}
+declare function useThemeSettings<T = HydrogenThemeSettings>(): T;
+
 declare let STORE_PAGES: {
     INDEX: string;
     PRODUCT: string;
@@ -127,7 +142,7 @@ type WeaverseInternal = {
     project: HydrogenProjectType;
     navigate: NavigateFunction;
     revalidate: () => void;
-    themeSettingsStore: WeaverseThemeSettingsStore;
+    themeSettingsStore: ThemeSettingsStore;
 };
 type HydrogenComponentPresets = {
     type: string;
@@ -238,18 +253,6 @@ type FetchProjectPayload = {
     project: HydrogenProjectType;
     pageAssignment: HydrogenPageAssignment;
 };
-type WeaverseThemeSettingsStore = {
-    updateThemeSettings(newSettings: HydrogenThemeSettings): void;
-    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;
     WEAVERSE_HOST: string;
@@ -267,6 +270,15 @@ type WeaverseClientArgs = {
 type FetchWithCacheOptions = RequestInit & {
     strategy?: AllCacheOptions;
 };
+type RootRouteData = {
+    weaverseTheme?: {
+        theme: HydrogenThemeSettings;
+        countries?: Localizations;
+        schema?: HydrogenThemeSchema;
+        publicEnv?: PublicEnv;
+    };
+    [key: string]: any;
+};
 declare global {
     interface Window {
         __weaverse: WeaverseHydrogen;
@@ -293,27 +305,6 @@ declare class WeaverseClient {
     }) => Promise<WeaverseLoaderData | null>;
     execComponentLoader: (item: HydrogenComponentData, args: LoaderArgs) => Promise<HydrogenComponentData>;
 }
-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;
 declare function getWeaverseConfigs(request: Request, env: HydrogenThemeEnv): WeaverseProjectConfigs;
@@ -333,6 +324,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;
+declare let withWeaverse: (Component: React__default.ComponentType) => (props: React__default.JSX.IntrinsicAttributes) => 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, ThemeSettingsStore, WeaverseClient, WeaverseClientArgs, WeaverseHydrogen, WeaverseHydrogenInit, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderData, WeaverseLoaderRequestInfo, WeaverseProjectConfigs, WeaverseStorefrontData, WeaverseStudioQueries, WeaverseThemeConfigs, WeaverseThemeSettingsStore, createContentSecurityPolicy, createWeaverseClient, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, getWeaverseCsp, useThemeSettings, withWeaverse };
+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, RootRouteData, RouteLoaderArgs, ThemeSettingsStore, WeaverseClient, WeaverseClientArgs, WeaverseHydrogen, WeaverseHydrogenInit, WeaverseHydrogenRoot, WeaverseHydrogenRootProps, WeaverseInternal, WeaverseLoaderData, WeaverseLoaderRequestInfo, WeaverseProjectConfigs, WeaverseStorefrontData, WeaverseStudioQueries, WeaverseThemeConfigs, createContentSecurityPolicy, getRequestQueries, getSelectedProductOptions, getWeaverseConfigs, getWeaverseCsp, useThemeSettings, withWeaverse };

package/dist/index.js

@@ -35,7 +35,6 @@ __export(src_exports, {
   WeaverseClient: () => WeaverseClient,
   WeaverseHydrogenRoot: () => WeaverseHydrogenRoot,
   createContentSecurityPolicy: () => createContentSecurityPolicy,
-  createWeaverseClient: () => createWeaverseClient,
   getRequestQueries: () => getRequestQueries,
   getSelectedProductOptions: () => getSelectedProductOptions,
   getWeaverseConfigs: () => getWeaverseConfigs,
@@ -51,7 +50,7 @@ var import_hydrogen = require("@shopify/hydrogen");
 
 // package.json
 var package_default = {
-  version: "1.2.2",
+  version: "1.3.1",
   license: "MIT",
   main: "dist/index.js",
   typings: "dist/index.d.ts",
@@ -86,7 +85,7 @@ var package_default = {
   dependencies: {
     "@remix-run/react": "1.19.1",
     "@shopify/hydrogen": "2023.7.8",
-    "@weaverse/react": "1.2.2",
+    "@weaverse/react": "1.3.1",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
@@ -291,11 +290,11 @@ var WeaverseClient = class {
     };
   }
 };
-function createWeaverseClient(args) {
-  return new WeaverseClient(args);
-}
 
 // src/hooks/use-theme-settings.ts
+var import_react4 = require("react");
+
+// src/hooks/use-theme-context.ts
 var import_react3 = require("react");
 
 // src/context.ts
@@ -340,14 +339,20 @@ function createWeaverseInstance(weaverseData, components) {
 var ThemeProvider = (0, import_react2.createContext)(null);
 ThemeProvider.displayName = "WeaverseThemeProvider";
 
+// src/hooks/use-theme-context.ts
+function useThemeContext() {
+  let themeContext = (0, import_react3.useContext)(ThemeProvider);
+  if (!themeContext) {
+    throw new Error(
+      `useThemeContext must be used within a ThemeProvider. Make sure to wrap your app in the withWeaverse HoC.`
+    );
+  }
+  return themeContext;
+}
+
 // src/hooks/use-theme-settings.ts
 var ThemeSettingsStore = class {
-  constructor({
-    theme,
-    countries,
-    schema,
-    publicEnv
-  }) {
+  constructor(data) {
     this.settings = null;
     this.listeners = [];
     this.updateThemeSettings = (newSettings) => {
@@ -367,19 +372,20 @@ var ThemeSettingsStore = class {
       return this.settings;
     };
     this.emitChange = () => {
-      for (const listener of this.listeners) {
+      for (let listener of this.listeners) {
         listener();
       }
     };
-    this.settings = theme;
+    let { theme, countries, schema, publicEnv } = data || {};
+    this.settings = theme || null;
     this.countries = countries;
     this.schema = schema;
     this.publicEnv = publicEnv;
   }
 };
 function useThemeSettings() {
-  let themeSettingsStore = (0, import_react3.useContext)(ThemeProvider);
-  let settings = (0, import_react3.useSyncExternalStore)(
+  let themeSettingsStore = useThemeContext();
+  let settings = (0, import_react4.useSyncExternalStore)(
     themeSettingsStore.subscribe,
     themeSettingsStore.getSnapshot,
     themeSettingsStore.getServerSnapshot
@@ -405,22 +411,22 @@ function createContentSecurityPolicy(request, directives) {
 }
 
 // src/WeaverseHydrogenRoot.tsx
-var import_react7 = require("@remix-run/react");
-var import_react8 = require("@weaverse/react");
-var import_react9 = __toESM(require("react"));
+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/hooks/use-studio.ts
-var import_react4 = require("@remix-run/react");
-var import_react5 = require("@weaverse/react");
-var import_react6 = require("react");
+var import_react5 = require("@remix-run/react");
+var import_react6 = require("@weaverse/react");
+var import_react7 = require("react");
 function useStudio(weaverse) {
-  let navigate = (0, import_react4.useNavigate)();
-  let { revalidate } = (0, import_react4.useRevalidator)();
-  let themeSettingsStore = (0, import_react6.useContext)(ThemeProvider);
+  let { revalidate } = (0, import_react5.useRevalidator)();
+  let navigate = (0, import_react5.useNavigate)();
+  let themeSettingsStore = useThemeContext();
   let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
-  let isStudio = import_react5.isIframe && isDesignMode && weaverseHost && weaverseVersion;
-  (0, import_react6.useEffect)(() => {
+  let isStudio = import_react6.isIframe && isDesignMode && weaverseHost && weaverseVersion;
+  (0, import_react7.useEffect)(() => {
     if (isStudio) {
       weaverse.internal = {
         ...weaverse.internal,
@@ -433,7 +439,7 @@ function useStudio(weaverse) {
         window.weaverseStudio.init(weaverse);
       } else {
         let studioSrc = `${weaverseHost}/assets/studio/hydrogen/index.js?v=${weaverseVersion}`;
-        (0, import_react5.loadScript)(studioSrc);
+        (0, import_react6.loadScript)(studioSrc);
       }
     }
   }, [weaverse]);
@@ -441,52 +447,48 @@ function useStudio(weaverse) {
 
 // src/WeaverseHydrogenRoot.tsx
 function WeaverseHydrogenRoot({
-  errorComponent: ErrorComponent,
+  errorComponent: ErrorComponent = FallbackError,
   components
 }) {
-  let loaderData = (0, import_react7.useLoaderData)();
+  let loaderData = (0, import_react8.useLoaderData)();
   let data = loaderData?.weaverseData;
   if (data) {
     if (data instanceof Promise) {
-      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(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(RenderRoot, { data, components });
+    return /* @__PURE__ */ import_react10.default.createElement(RenderRoot, { data, components });
   }
-  return ErrorComponent ? /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react10.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_react9.default.createElement(import_react8.WeaverseRoot, { context: weaverse });
+  return /* @__PURE__ */ import_react10.default.createElement(import_react9.WeaverseRoot, { context: weaverse });
 }
 var withWeaverse = (Component) => {
   return (props) => {
-    let { weaverseTheme } = (0, import_react7.useLoaderData)();
+    let { weaverseTheme } = (0, import_react8.useLoaderData)();
     let themeSettingsStore = new ThemeSettingsStore(weaverseTheme);
-    return /* @__PURE__ */ import_react9.default.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ import_react9.default.createElement(Component, { ...props }));
+    return /* @__PURE__ */ import_react10.default.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ import_react10.default.createElement(Component, { ...props }));
   };
 };
+function FallbackError({ error }) {
+  return /* @__PURE__ */ import_react10.default.createElement("div", null, error?.message || "An unexpected error occurred");
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ThemeSettingsStore,
   WeaverseClient,
   WeaverseHydrogenRoot,
   createContentSecurityPolicy,
-  createWeaverseClient,
   getRequestQueries,
   getSelectedProductOptions,
   getWeaverseConfigs,

package/dist/index.mjs

@@ -6,7 +6,7 @@ import "@shopify/hydrogen";
 
 // package.json
 var package_default = {
-  version: "1.2.2",
+  version: "1.3.1",
   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.8",
-    "@weaverse/react": "1.2.2",
+    "@weaverse/react": "1.3.1",
     "react-error-boundary": "^4.0.11"
   },
   devDependencies: {
@@ -246,12 +246,12 @@ var WeaverseClient = class {
     };
   }
 };
-function createWeaverseClient(args) {
-  return new WeaverseClient(args);
-}
 
 // src/hooks/use-theme-settings.ts
-import { useContext, useSyncExternalStore } from "react";
+import { useSyncExternalStore } from "react";
+
+// src/hooks/use-theme-context.ts
+import { useContext } from "react";
 
 // src/context.ts
 import { Weaverse, isBrowser } from "@weaverse/react";
@@ -295,14 +295,20 @@ function createWeaverseInstance(weaverseData, components) {
 var ThemeProvider = createContext(null);
 ThemeProvider.displayName = "WeaverseThemeProvider";
 
+// src/hooks/use-theme-context.ts
+function useThemeContext() {
+  let themeContext = useContext(ThemeProvider);
+  if (!themeContext) {
+    throw new Error(
+      `useThemeContext must be used within a ThemeProvider. Make sure to wrap your app in the withWeaverse HoC.`
+    );
+  }
+  return themeContext;
+}
+
 // src/hooks/use-theme-settings.ts
 var ThemeSettingsStore = class {
-  constructor({
-    theme,
-    countries,
-    schema,
-    publicEnv
-  }) {
+  constructor(data) {
     this.settings = null;
     this.listeners = [];
     this.updateThemeSettings = (newSettings) => {
@@ -322,18 +328,19 @@ var ThemeSettingsStore = class {
       return this.settings;
     };
     this.emitChange = () => {
-      for (const listener of this.listeners) {
+      for (let listener of this.listeners) {
         listener();
       }
     };
-    this.settings = theme;
+    let { theme, countries, schema, publicEnv } = data || {};
+    this.settings = theme || null;
     this.countries = countries;
     this.schema = schema;
     this.publicEnv = publicEnv;
   }
 };
 function useThemeSettings() {
-  let themeSettingsStore = useContext(ThemeProvider);
+  let themeSettingsStore = useThemeContext();
   let settings = useSyncExternalStore(
     themeSettingsStore.subscribe,
     themeSettingsStore.getSnapshot,
@@ -368,11 +375,11 @@ import { ErrorBoundary } from "react-error-boundary";
 // src/hooks/use-studio.ts
 import { useNavigate, useRevalidator } from "@remix-run/react";
 import { isIframe, loadScript } from "@weaverse/react";
-import { useContext as useContext2, useEffect } from "react";
+import { useEffect } from "react";
 function useStudio(weaverse) {
-  let navigate = useNavigate();
   let { revalidate } = useRevalidator();
-  let themeSettingsStore = useContext2(ThemeProvider);
+  let navigate = useNavigate();
+  let themeSettingsStore = useThemeContext();
   let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
   let isStudio = isIframe && isDesignMode && weaverseHost && weaverseVersion;
   useEffect(() => {
@@ -396,31 +403,25 @@ function useStudio(weaverse) {
 
 // src/WeaverseHydrogenRoot.tsx
 function WeaverseHydrogenRoot({
-  errorComponent: ErrorComponent,
+  errorComponent: ErrorComponent = FallbackError,
   components
 }) {
   let loaderData = useLoaderData();
   let data = loaderData?.weaverseData;
   if (data) {
     if (data instanceof Promise) {
-      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(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(RenderRoot, { data, components });
   }
-  return ErrorComponent ? /* @__PURE__ */ React.createElement(
+  return /* @__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;
@@ -435,12 +436,14 @@ var withWeaverse = (Component) => {
     return /* @__PURE__ */ React.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ React.createElement(Component, { ...props }));
   };
 };
+function FallbackError({ error }) {
+  return /* @__PURE__ */ React.createElement("div", null, error?.message || "An unexpected error occurred");
+}
 export {
   ThemeSettingsStore,
   WeaverseClient,
   WeaverseHydrogenRoot,
   createContentSecurityPolicy,
-  createWeaverseClient,
   getRequestQueries,
   getSelectedProductOptions,
   getWeaverseConfigs,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.2",
+  "version": "1.3.1",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -34,10 +34,10 @@
   "dependencies": {
     "@remix-run/react": "1.19.1",
     "@shopify/hydrogen": "2023.7.8",
-    "@weaverse/react": "1.2.2",
+    "@weaverse/react": "1.3.1",
     "react-error-boundary": "^4.0.11"
   },
   "devDependencies": {
     "@shopify/remix-oxygen": "^1.1.4"
   }
-}
+}