@weaverse/hydrogen 5.10.0 → 5.11.0

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';
 
@@ -83,7 +83,11 @@ function ThemeTextProvider({
 }
 function useThemeText() {
   const ctx = useContext(ThemeTextContext);
-  if (!ctx) throw new Error("useThemeText must be used within <ThemeTextProvider>. Wrap your app with withWeaverse().");
+  if (!ctx) {
+    throw new Error(
+      "useThemeText must be used within <ThemeTextProvider>. Wrap your app with withWeaverse()."
+    );
+  }
   return ctx;
 }
 function createFlatDataContext(matches) {
@@ -404,7 +408,6 @@ var ThemeSettingsStore = class {
       }
     }
   };
-  // Method to properly clean up the store
   destroy = () => {
     if (this.isDestroyed) {
       return;
@@ -416,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
@@ -613,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,