@weaverse/hydrogen 5.10.1 → 5.11.1

package/dist/index.mjs

@@ -4,7 +4,7 @@ export { isBrowser, isIframe, useChildInstances, useItemInstance, useParentInsta
 import { createSchema, isValidSchema } from '@weaverse/schema';
 export * from '@weaverse/schema';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { createContext, memo, useMemo, Suspense, useEffect, useContext } from 'react';
+import { createContext, memo, useMemo, Suspense, useEffect, useContext, useRef } from 'react';
 import { useMatches, Await, useRevalidator, useNavigation, useLocation, useNavigate, useRouteLoaderData } from 'react-router';
 import { ErrorBoundary } from 'react-error-boundary';
 
@@ -48,12 +48,12 @@ function getNestedKey(obj, path, fallback) {
   return fallback;
 }
 function interpolate(template, variables) {
-  if (!variables || Object.keys(variables).length === 0) {
+  if (!variables) {
     return template;
   }
   return template.replace(/\{\{(\w+)\}\}/g, (match, key) => {
     const value = variables[key];
-    return value !== void 0 ? String(value) : match;
+    return value === void 0 ? match : String(value);
   });
 }
 var ThemeTextContext = createContext(null);
@@ -408,7 +408,6 @@ var ThemeSettingsStore = class {
       }
     }
   };
-  // Method to properly clean up the store
   destroy = () => {
     if (this.isDestroyed) {
       return;
@@ -420,12 +419,37 @@ var ThemeSettingsStore = class {
     }
   };
 };
+var ThemeSettingsStoreContext = createContext(null);
+ThemeSettingsStoreContext.displayName = "ThemeSettingsStoreContext";
+function useCreateThemeSettingsStore() {
+  const data = useRouteLoaderData("root");
+  const storeRef = useRef(null);
+  if (!storeRef.current) {
+    storeRef.current = new ThemeSettingsStore(data?.weaverseTheme);
+  }
+  const theme = data?.weaverseTheme?.theme;
+  useEffect(() => {
+    if (storeRef.current && theme) {
+      storeRef.current.updateThemeSettings(theme);
+    }
+  }, [theme]);
+  return storeRef.current;
+}
 function useThemeSettingsStore() {
+  const fromContext = useContext(ThemeSettingsStoreContext);
   const data = useRouteLoaderData("root");
-  if (isBrowser && window.__weaverseThemeSettingsStore) {
-    return window.__weaverseThemeSettingsStore;
+  const fallbackRef = useRef(null);
+  if (!(fallbackRef.current || fromContext)) {
+    fallbackRef.current = new ThemeSettingsStore(data?.weaverseTheme);
   }
-  return new ThemeSettingsStore(data?.weaverseTheme);
+  const store = fromContext ?? fallbackRef.current;
+  const theme = data?.weaverseTheme?.theme;
+  useEffect(() => {
+    if (!fromContext && theme) {
+      store.updateThemeSettings(theme);
+    }
+  }, [fromContext, store, theme]);
+  return store;
 }
 
 // src/utils/use-studio.ts
@@ -617,14 +641,11 @@ var WeaverseHydrogenRoot = memo(
     );
   }
 );
-var ThemeSettingsProvider = createContext(null);
-ThemeSettingsProvider.displayName = "WeaverseThemeSettingsProvider";
 function withWeaverse(Component, options) {
   return (props) => {
-    const themeSettingsStore = useThemeSettingsStore();
-    const { settings } = themeSettingsStore;
+    const themeSettingsStore = useCreateThemeSettingsStore();
     const themeTextData = useThemeTextData();
-    return /* @__PURE__ */ jsx(ThemeSettingsProvider.Provider, { value: settings, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(ThemeSettingsStoreContext.Provider, { value: themeSettingsStore, children: /* @__PURE__ */ jsx(
       ThemeTextProvider,
       {
         merchantOverrides: themeTextData.merchantOverrides,
@@ -1076,7 +1097,7 @@ var WeaverseClient = class {
             type: typeof result,
             isString: typeof result === "string",
             length: typeof result === "string" ? result.length : "N/A",
-            preview: typeof result === "string" ? `${result.substring(0, 50)}...` : String(result)
+            preview: typeof result === "string" ? `${result.slice(0, 50)}...` : String(result)
           }
         );
         result = { theme: defaultThemeSettings };