@weaverse/hydrogen 1.0.29 → 1.0.31

package/dist/index.d.ts

@@ -49,6 +49,5 @@ declare let WeaverseHydrogenRoot: React.MemoExoticComponent<({ components, data,
         weaverseData: any;
     };
 }) => JSX.Element>;
-declare function useIsHydrated(): boolean;
 
-export { WeaverseComponentLoaderArgs, WeaverseHydrogenRoot, fetchWithServerCache, hashKey, useIsHydrated, useStudio, weaverseLoader };
+export { WeaverseComponentLoaderArgs, WeaverseHydrogenRoot, fetchWithServerCache, hashKey, useStudio, weaverseLoader };

package/dist/index.js

@@ -33,7 +33,6 @@ __export(src_exports, {
   WeaverseHydrogenRoot: () => WeaverseHydrogenRoot,
   fetchWithServerCache: () => fetchWithServerCache,
   hashKey: () => hashKey,
-  useIsHydrated: () => useIsHydrated,
   useStudio: () => useStudio,
   weaverseLoader: () => weaverseLoader
 });
@@ -69,16 +68,26 @@ var import_react4 = require("@weaverse/react");
 
 // src/context.ts
 var import_react2 = require("@weaverse/react");
+var createCachedWeaverseContext = (init) => {
+  if (import_react2.isBrowser && init.pageId) {
+    window.__weaverses = window.__weaverses || {};
+    if (!window.__weaverses[init.pageId]) {
+      window.__weaverses[init.pageId] = (0, import_react2.createRootContext)(init);
+    }
+    return window.__weaverses[init.pageId];
+  }
+  return (0, import_react2.createRootContext)(init);
+};
 var createWeaverseHydrogenContext = ({
   weaverseData: { pageData, config } = {
     pageData: {},
     config: {}
   }
 }, components) => {
-  let weaverse = (0, import_react2.createRootContext)({
+  let weaverse = createCachedWeaverseContext({
     ...config,
     data: pageData,
-    pageId: pageData?.pageId,
+    pageId: pageData?.id,
     isDesignMode: true,
     platformType: "shopify-hydrogen"
   });
@@ -216,32 +225,30 @@ var WeaverseHydrogenRoot = (0, import_react3.memo)(
   }) => {
     let weaverse = createWeaverseHydrogenContext(data, components);
     useStudio(weaverse);
+    useEnsureStitchesWorking(weaverse);
     if (!weaverse?.data) {
       return /* @__PURE__ */ import_react3.default.createElement("div", null, "404");
     }
-    return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement(import_react4.WeaverseRoot, { context: weaverse }), /* @__PURE__ */ import_react3.default.createElement(RenderStitchesStyles, { weaverse }));
+    return /* @__PURE__ */ import_react3.default.createElement(import_react4.WeaverseRoot, { context: weaverse });
   }
 );
-function useIsHydrated() {
-  const [isHydrated, setHydrated] = (0, import_react3.useState)(false);
+var useEnsureStitchesWorking = (weaverse) => {
   (0, import_react3.useEffect)(() => {
-    setHydrated(true);
+    let stitchesInstance = weaverse.stitchesInstance;
+    if (stitchesInstance && !stitchesInstance.sheet?.sheet?.ownerNode) {
+      console.warn("stitches instance is not working, re-creating it");
+      delete weaverse.stitchesInstance;
+      weaverse.initStitches({ root: document });
+      weaverse.triggerUpdate();
+      weaverse.refreshAllItems();
+    }
   }, []);
-  return isHydrated;
-}
-var RenderStitchesStyles = ({ weaverse }) => {
-  let h = useIsHydrated();
-  (0, import_react3.useEffect)(() => {
-    h && !weaverse.isDesignMode && weaverse.triggerUpdate();
-  }, [h]);
-  return null;
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   WeaverseHydrogenRoot,
   fetchWithServerCache,
   hashKey,
-  useIsHydrated,
   useStudio,
   weaverseLoader
 });

package/dist/index.mjs

@@ -23,21 +23,31 @@ var useStudio = (weaverseCore) => {
 };
 
 // src/index.tsx
-import React, { memo, useEffect as useEffect2, useState } from "react";
+import React, { memo, useEffect as useEffect2 } from "react";
 import { WeaverseRoot } from "@weaverse/react";
 
 // src/context.ts
-import { createRootContext } from "@weaverse/react";
+import { createRootContext, isBrowser } from "@weaverse/react";
+var createCachedWeaverseContext = (init) => {
+  if (isBrowser && init.pageId) {
+    window.__weaverses = window.__weaverses || {};
+    if (!window.__weaverses[init.pageId]) {
+      window.__weaverses[init.pageId] = createRootContext(init);
+    }
+    return window.__weaverses[init.pageId];
+  }
+  return createRootContext(init);
+};
 var createWeaverseHydrogenContext = ({
   weaverseData: { pageData, config } = {
     pageData: {},
     config: {}
   }
 }, components) => {
-  let weaverse = createRootContext({
+  let weaverse = createCachedWeaverseContext({
     ...config,
     data: pageData,
-    pageId: pageData?.pageId,
+    pageId: pageData?.id,
     isDesignMode: true,
     platformType: "shopify-hydrogen"
   });
@@ -178,31 +188,29 @@ var WeaverseHydrogenRoot = memo(
   }) => {
     let weaverse = createWeaverseHydrogenContext(data, components);
     useStudio(weaverse);
+    useEnsureStitchesWorking(weaverse);
     if (!weaverse?.data) {
       return /* @__PURE__ */ React.createElement("div", null, "404");
     }
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse }), /* @__PURE__ */ React.createElement(RenderStitchesStyles, { weaverse }));
+    return /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse });
   }
 );
-function useIsHydrated() {
-  const [isHydrated, setHydrated] = useState(false);
+var useEnsureStitchesWorking = (weaverse) => {
   useEffect2(() => {
-    setHydrated(true);
+    let stitchesInstance = weaverse.stitchesInstance;
+    if (stitchesInstance && !stitchesInstance.sheet?.sheet?.ownerNode) {
+      console.warn("stitches instance is not working, re-creating it");
+      delete weaverse.stitchesInstance;
+      weaverse.initStitches({ root: document });
+      weaverse.triggerUpdate();
+      weaverse.refreshAllItems();
+    }
   }, []);
-  return isHydrated;
-}
-var RenderStitchesStyles = ({ weaverse }) => {
-  let h = useIsHydrated();
-  useEffect2(() => {
-    h && !weaverse.isDesignMode && weaverse.triggerUpdate();
-  }, [h]);
-  return null;
 };
 export {
   WeaverseHydrogenRoot,
   fetchWithServerCache,
   hashKey,
-  useIsHydrated,
   useStudio,
   weaverseLoader
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.29",
+  "version": "1.0.31",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -33,8 +33,8 @@
   "author": "Weaverse Team",
   "dependencies": {
     "@shopify/hydrogen": "2023.4.0",
-    "@weaverse/core": "1.0.29",
-    "@weaverse/react": "1.0.29"
+    "@weaverse/core": "1.0.31",
+    "@weaverse/react": "1.0.31"
   },
   "devDependencies": {
     "@shopify/remix-oxygen": "^1.0.5"