@weaverse/hydrogen 1.0.65 → 1.1.0

package/dist/index.d.mts

@@ -103,6 +103,7 @@ type WeaverseInternal = {
     pageAssignment: HydrogenPageAssignment;
     project: HydrogenProjectType;
     navigate: NavigateFunction;
+    revalidator: TODO;
 };
 type HydrogenComponentPresets = {
     type: string;
@@ -176,10 +177,8 @@ type NavigateOptions = {
 };
 type NavigateFunction = (to: To, options?: NavigateOptions) => void;
 interface WeaverseHydrogenRootProps {
-    weaverseData: WeaverseLoaderData;
     components: HydrogenComponent[];
     themeSchema: HydrogenThemeSchema;
-    navigate: NavigateFunction;
 }
 type HydrogenThemeInfo = {
     name: string;

package/dist/index.d.ts

@@ -103,6 +103,7 @@ type WeaverseInternal = {
     pageAssignment: HydrogenPageAssignment;
     project: HydrogenProjectType;
     navigate: NavigateFunction;
+    revalidator: TODO;
 };
 type HydrogenComponentPresets = {
     type: string;
@@ -176,10 +177,8 @@ type NavigateOptions = {
 };
 type NavigateFunction = (to: To, options?: NavigateOptions) => void;
 interface WeaverseHydrogenRootProps {
-    weaverseData: WeaverseLoaderData;
     components: HydrogenComponent[];
     themeSchema: HydrogenThemeSchema;
-    navigate: NavigateFunction;
 }
 type HydrogenThemeInfo = {
     name: string;

package/dist/index.js

@@ -37,8 +37,8 @@ __export(src_exports, {
   weaverseLoader: () => weaverseLoader
 });
 module.exports = __toCommonJS(src_exports);
-var import_react5 = require("@weaverse/react");
-var import_react6 = __toESM(require("react"));
+var import_react6 = require("@weaverse/react");
+var import_react7 = __toESM(require("react"));
 
 // src/context.ts
 var import_react = require("@weaverse/react");
@@ -79,13 +79,18 @@ function createWeaverseInstance(weaverseData, components) {
 // src/hooks/use-studio.ts
 var import_react2 = require("@weaverse/react");
 var import_react3 = require("react");
-function useStudio(weaverse, themeSchema, navigate) {
+var import_react4 = require("@remix-run/react");
+function useStudio(weaverse, themeSchema) {
+  let revalidator = (0, import_react4.useRevalidator)();
+  let navigate = (0, import_react4.useNavigate)();
+  console.log("revalidator", revalidator);
   (0, import_react3.useEffect)(() => {
     let initialized = checkStudioInitialized(weaverse);
     if (import_react2.isIframe && weaverse.isDesignMode && !initialized) {
       window.__initializedWeaverseStudios[weaverse.pageId] = true;
       weaverse.internal.themeSchema = themeSchema;
       weaverse.internal.navigate = navigate;
+      weaverse.internal.revalidator = revalidator;
       let host = weaverse.weaverseHost;
       let version = weaverse.weaverseVersion || Date.now();
       (0, import_react2.loadScript)(`${host}/assets/studio/studio-bridge.js?v=${version}`).then(
@@ -111,9 +116,9 @@ function checkStudioInitialized(weaverseInit) {
 }
 
 // src/hooks/use-theme-setting.ts
-var import_react4 = require("@weaverse/react");
+var import_react5 = require("@weaverse/react");
 function useThemeSettings() {
-  let weaverse = (0, import_react4.useWeaverse)();
+  let weaverse = (0, import_react5.useWeaverse)();
   let settings = weaverse?.internal?.project?.config?.theme;
   let updateSettings = (newSettings) => {
     weaverse.internal.project.config.theme = Object.assign(
@@ -258,12 +263,43 @@ async function weaverseLoader(args, components, loaderConfigs) {
 
 // src/index.tsx
 __reExport(src_exports, require("@weaverse/react"), module.exports);
+var import_react8 = require("@remix-run/react");
 function WeaverseHydrogenRoot(props) {
-  let { components, weaverseData, themeSchema, navigate } = props;
-  let weaverse = createWeaverseInstance(weaverseData, components);
-  useStudio(weaverse, themeSchema, navigate);
-  return /* @__PURE__ */ import_react6.default.createElement(import_react5.WeaverseRoot, { context: weaverse });
+  let loaderData = (0, import_react8.useLoaderData)();
+  console.log("loaderData111", loaderData);
+  let weaverseDataFromLoader = loaderData?.weaverseData;
+  let { components, themeSchema } = props;
+  if (weaverseDataFromLoader) {
+    if (weaverseDataFromLoader instanceof Promise) {
+      return /* @__PURE__ */ import_react7.default.createElement(import_react7.Suspense, null, /* @__PURE__ */ import_react7.default.createElement(import_react8.Await, { resolve: weaverseDataFromLoader }, (resolvedData) => {
+        console.log("resolvedData", resolvedData);
+        return /* @__PURE__ */ import_react7.default.createElement(
+          RenderWeaverseRoot,
+          {
+            components,
+            themeSchema,
+            weaverseData: resolvedData
+          }
+        );
+      }));
+    }
+    return /* @__PURE__ */ import_react7.default.createElement(
+      RenderWeaverseRoot,
+      {
+        components,
+        themeSchema,
+        weaverseData: weaverseDataFromLoader
+      }
+    );
+  }
+  return /* @__PURE__ */ import_react7.default.createElement("div", { style: { display: "none" } }, "No weaverseData return from Remix loader!");
 }
+var RenderWeaverseRoot = (props) => {
+  let { components, themeSchema, weaverseData } = props;
+  let weaverse = createWeaverseInstance(weaverseData, components);
+  useStudio(weaverse, themeSchema);
+  return /* @__PURE__ */ import_react7.default.createElement(import_react6.WeaverseRoot, { context: weaverse });
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   WeaverseHydrogenRoot,

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/index.tsx
 import { WeaverseRoot } from "@weaverse/react";
-import React from "react";
+import React, { Suspense } from "react";
 
 // src/context.ts
 import { Weaverse, isBrowser } from "@weaverse/react";
@@ -41,13 +41,18 @@ function createWeaverseInstance(weaverseData, components) {
 // src/hooks/use-studio.ts
 import { isIframe, loadScript } from "@weaverse/react";
 import { useEffect } from "react";
-function useStudio(weaverse, themeSchema, navigate) {
+import { useRevalidator, useNavigate } from "@remix-run/react";
+function useStudio(weaverse, themeSchema) {
+  let revalidator = useRevalidator();
+  let navigate = useNavigate();
+  console.log("revalidator", revalidator);
   useEffect(() => {
     let initialized = checkStudioInitialized(weaverse);
     if (isIframe && weaverse.isDesignMode && !initialized) {
       window.__initializedWeaverseStudios[weaverse.pageId] = true;
       weaverse.internal.themeSchema = themeSchema;
       weaverse.internal.navigate = navigate;
+      weaverse.internal.revalidator = revalidator;
       let host = weaverse.weaverseHost;
       let version = weaverse.weaverseVersion || Date.now();
       loadScript(`${host}/assets/studio/studio-bridge.js?v=${version}`).then(
@@ -220,12 +225,43 @@ async function weaverseLoader(args, components, loaderConfigs) {
 
 // src/index.tsx
 export * from "@weaverse/react";
+import { Await, useLoaderData } from "@remix-run/react";
 function WeaverseHydrogenRoot(props) {
-  let { components, weaverseData, themeSchema, navigate } = props;
+  let loaderData = useLoaderData();
+  console.log("loaderData111", loaderData);
+  let weaverseDataFromLoader = loaderData?.weaverseData;
+  let { components, themeSchema } = props;
+  if (weaverseDataFromLoader) {
+    if (weaverseDataFromLoader instanceof Promise) {
+      return /* @__PURE__ */ React.createElement(Suspense, null, /* @__PURE__ */ React.createElement(Await, { resolve: weaverseDataFromLoader }, (resolvedData) => {
+        console.log("resolvedData", resolvedData);
+        return /* @__PURE__ */ React.createElement(
+          RenderWeaverseRoot,
+          {
+            components,
+            themeSchema,
+            weaverseData: resolvedData
+          }
+        );
+      }));
+    }
+    return /* @__PURE__ */ React.createElement(
+      RenderWeaverseRoot,
+      {
+        components,
+        themeSchema,
+        weaverseData: weaverseDataFromLoader
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement("div", { style: { display: "none" } }, "No weaverseData return from Remix loader!");
+}
+var RenderWeaverseRoot = (props) => {
+  let { components, themeSchema, weaverseData } = props;
   let weaverse = createWeaverseInstance(weaverseData, components);
-  useStudio(weaverse, themeSchema, navigate);
+  useStudio(weaverse, themeSchema);
   return /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse });
-}
+};
 export {
   WeaverseHydrogenRoot,
   fetchWithServerCache,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.65",
+  "version": "1.1.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -15,8 +15,8 @@
   },
   "scripts": {
     "start": "npm run dev",
-    "dev": "tsup src/index.tsx --format esm,cjs --dts --outDir dist --watch --external @weaverse/react,@shopify/hydrogen",
-    "build": "tsup src/index.tsx --format esm,cjs --dts --outDir dist --external @weaverse/react,@shopify/hydrogen",
+    "dev": "tsup src/index.tsx --format esm,cjs --dts --outDir dist --watch --external @remix-run/react,@shopify/hydrogen",
+    "build": "tsup src/index.tsx --format esm,cjs --dts --outDir dist --external @remix-run/react,@shopify/hydrogen",
     "clean": "rimraf dist",
     "prepublish": "npm run build"
   },
@@ -32,8 +32,9 @@
   "name": "@weaverse/hydrogen",
   "author": "Weaverse Team",
   "dependencies": {
+    "@remix-run/react": "1.19.1",
     "@shopify/hydrogen": "2023.7.1",
-    "@weaverse/react": "1.0.65"
+    "@weaverse/react": "1.1.0"
   },
   "devDependencies": {
     "@shopify/remix-oxygen": "^1.1.2"