@weaverse/hydrogen 1.0.22 → 1.0.24

package/dist/index.d.ts

@@ -1,20 +1,22 @@
-import { Weaverse, WeaverseType, WeaverseElement } from '@weaverse/core';
+import { Weaverse } from '@weaverse/core';
 import { LoaderArgs } from '@remix-run/server-runtime';
 
-type WHFetchConfigs = {
-    weaverseHost?: string;
+type WeaverseHydrogenConfigs = {
     projectId: string;
-    url: URL;
+    weaverseHost: string;
+    components: {
+        [key: string]: any;
+    };
 };
-declare let fetchPageData: ({ weaverseHost, projectId, url, }: WHFetchConfigs) => Promise<any>;
+
 declare let useStudio: (weaverseCore: Weaverse) => void;
 
-declare function weaverseLoader({ request, context, params, }: LoaderArgs): Promise<any>;
+declare function weaverseLoader({ request, context, params }: LoaderArgs, weaverseConfig: WeaverseHydrogenConfigs): Promise<any>;
 
-declare let createHydrogenRootContext: (configs: WeaverseType, elements?: {
-    [key: string]: WeaverseElement;
-}) => Weaverse;
-declare let createWeaverseHydrogenContext: (configs: WeaverseType) => Weaverse;
-declare let WeaverseHydrogenRoot: () => JSX.Element;
+declare let useWeaverseHydrogen: (weaverseHydrogenConfigs: WeaverseHydrogenConfigs, data: any) => Weaverse;
+declare let WeaverseHydrogenRoot: ({ configs, data, }: {
+    configs: WeaverseHydrogenConfigs;
+    data: any;
+}) => JSX.Element;
 
-export { WHFetchConfigs, WeaverseHydrogenRoot, createHydrogenRootContext, createWeaverseHydrogenContext, fetchPageData, useStudio, weaverseLoader };
+export { WeaverseHydrogenRoot, useStudio, useWeaverseHydrogen, weaverseLoader };

package/dist/index.js

@@ -31,103 +31,104 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   WeaverseHydrogenRoot: () => WeaverseHydrogenRoot,
-  createHydrogenRootContext: () => createHydrogenRootContext,
-  createWeaverseHydrogenContext: () => createWeaverseHydrogenContext,
-  fetchPageData: () => fetchPageData,
   useStudio: () => useStudio,
+  useWeaverseHydrogen: () => useWeaverseHydrogen,
   weaverseLoader: () => weaverseLoader
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/elements/index.ts
-var elements = {};
-var elements_default = elements;
-
-// src/index.tsx
-var import_core2 = require("@weaverse/core");
-
 // src/utils.ts
 var import_core = require("@weaverse/core");
 var import_react = require("react");
-var fetchPageData = async ({
-  weaverseHost = "https://studio.weaverse.io",
-  projectId,
-  url
-}) => {
-  let handle = url.pathname;
-  let isDesignMode = url.searchParams.get("isDesignMode") === "true";
-  let data = await fetch(weaverseHost + "/api/public/project", {
-    method: "POST",
-    body: JSON.stringify({
-      projectId,
-      handle,
-      isDesignMode
-    })
-  }).then((res) => res.json()).catch((e) => {
-    console.error(e);
-    return {};
-  });
-  return { ...data, weaverseHost, isDesignMode };
-};
 var useStudio = (weaverseCore) => {
   (0, import_react.useEffect)(() => {
     if (weaverseCore.isDesignMode && import_core.isIframe && !window.weaverseStudioInitialized) {
+      console.log("useStudio", weaverseCore);
       window.weaverseStudioInitialized = true;
-      (0, import_core.loadScript)(
-        `${weaverseCore.weaverseHost}/assets/studio/studio-bridge.js?t=${Date.now()}`
-      ).then(() => {
-        window?.createWeaverseStudioBridge(weaverseCore);
-        setTimeout(() => {
-          weaverseCore.triggerUpdate();
-        }, 2e3);
-      });
+      let host = weaverseCore.weaverseHost;
+      let version = weaverseCore.weaverseVersion || Date.now();
+      (0, import_core.loadScript)(`${host}/assets/studio/studio-bridge.js?v=${version}`).then(
+        () => {
+          window?.createWeaverseStudioBridge(weaverseCore);
+          setTimeout(() => {
+            weaverseCore.triggerUpdate();
+          }, 2e3);
+        }
+      );
     }
   }, []);
 };
 
 // src/index.tsx
 var import_react2 = __toESM(require("react"));
+var import_react3 = require("@weaverse/react");
 
 // src/weaverse-loader.ts
-async function weaverseLoader({
-  request,
-  context,
-  params
-}) {
+async function weaverseLoader({ request, context, params }, weaverseConfig) {
+  let fetchBody = {
+    projectId: weaverseConfig.projectId,
+    url: request.url
+  };
+  let response = await fetch(
+    `${weaverseConfig.weaverseHost}/api/public/project`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(fetchBody)
+    }
+  ).then((res) => res.json());
   return {
-    foo: "bar"
+    weaversePageData: response
   };
 }
 
 // src/index.tsx
-var createHydrogenRootContext = (configs, elements2 = {}) => {
-  let rootContext = new import_core2.Weaverse(configs);
-  Object.keys(elements2).forEach((key) => {
-    rootContext.registerElement(elements2[key]);
+var createHydrogenRootContext = (configs, elements = {}) => {
+  let rootContext = (0, import_react3.createRootContext)(configs);
+  Object.keys(elements).forEach((key) => {
+    rootContext.registerElement(elements[key]);
   });
   return rootContext;
 };
-var createWeaverseHydrogenContext = (configs) => {
-  let context = createHydrogenRootContext(configs);
-  Object.keys(elements_default).forEach((key) => {
-    context.registerElement(elements_default[key]);
-  });
-  return context;
-};
-var WeaverseHydrogenRoot = () => {
+var useWeaverseHydrogen = (weaverseHydrogenConfigs, data) => {
+  let weaversePageData = data?.weaverseData?.weaversePageData;
+  let { components, ...rest } = weaverseHydrogenConfigs;
   let weaverse = createHydrogenRootContext({
+    ...rest,
+    data: weaversePageData,
+    pageId: weaversePageData?.pageId,
     isDesignMode: true,
     platformType: "shopify-hydrogen"
   });
+  Object.keys(components).forEach((key) => {
+    let component = components[key];
+    weaverse.registerElement({
+      type: components[key]?.schema?.type || key,
+      Component: component?.default,
+      schema: component?.schema,
+      defaultCss: component?.css,
+      permanentCss: component?.permanentCss
+    });
+  });
   useStudio(weaverse);
-  return /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("div", { id: "weaverse-test" }, "hello world from weaverse hydrogen"));
+  return weaverse;
+};
+var WeaverseHydrogenRoot = ({
+  configs,
+  data
+}) => {
+  let weaverse = useWeaverseHydrogen(configs, data);
+  if (!weaverse?.data) {
+    return /* @__PURE__ */ import_react2.default.createElement("div", null, "404");
+  }
+  return /* @__PURE__ */ import_react2.default.createElement(import_react3.WeaverseRoot, { context: weaverse });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   WeaverseHydrogenRoot,
-  createHydrogenRootContext,
-  createWeaverseHydrogenContext,
-  fetchPageData,
   useStudio,
+  useWeaverseHydrogen,
   weaverseLoader
 });

package/dist/index.mjs

@@ -1,91 +1,94 @@
-// src/elements/index.ts
-var elements = {};
-var elements_default = elements;
-
-// src/index.tsx
-import { Weaverse } from "@weaverse/core";
-
 // src/utils.ts
 import { isIframe, loadScript } from "@weaverse/core";
 import { useEffect } from "react";
-var fetchPageData = async ({
-  weaverseHost = "https://studio.weaverse.io",
-  projectId,
-  url
-}) => {
-  let handle = url.pathname;
-  let isDesignMode = url.searchParams.get("isDesignMode") === "true";
-  let data = await fetch(weaverseHost + "/api/public/project", {
-    method: "POST",
-    body: JSON.stringify({
-      projectId,
-      handle,
-      isDesignMode
-    })
-  }).then((res) => res.json()).catch((e) => {
-    console.error(e);
-    return {};
-  });
-  return { ...data, weaverseHost, isDesignMode };
-};
 var useStudio = (weaverseCore) => {
   useEffect(() => {
     if (weaverseCore.isDesignMode && isIframe && !window.weaverseStudioInitialized) {
+      console.log("useStudio", weaverseCore);
       window.weaverseStudioInitialized = true;
-      loadScript(
-        `${weaverseCore.weaverseHost}/assets/studio/studio-bridge.js?t=${Date.now()}`
-      ).then(() => {
-        window?.createWeaverseStudioBridge(weaverseCore);
-        setTimeout(() => {
-          weaverseCore.triggerUpdate();
-        }, 2e3);
-      });
+      let host = weaverseCore.weaverseHost;
+      let version = weaverseCore.weaverseVersion || Date.now();
+      loadScript(`${host}/assets/studio/studio-bridge.js?v=${version}`).then(
+        () => {
+          window?.createWeaverseStudioBridge(weaverseCore);
+          setTimeout(() => {
+            weaverseCore.triggerUpdate();
+          }, 2e3);
+        }
+      );
     }
   }, []);
 };
 
 // src/index.tsx
 import React from "react";
+import { WeaverseRoot, createRootContext } from "@weaverse/react";
 
 // src/weaverse-loader.ts
-async function weaverseLoader({
-  request,
-  context,
-  params
-}) {
+async function weaverseLoader({ request, context, params }, weaverseConfig) {
+  let fetchBody = {
+    projectId: weaverseConfig.projectId,
+    url: request.url
+  };
+  let response = await fetch(
+    `${weaverseConfig.weaverseHost}/api/public/project`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(fetchBody)
+    }
+  ).then((res) => res.json());
   return {
-    foo: "bar"
+    weaversePageData: response
   };
 }
 
 // src/index.tsx
-var createHydrogenRootContext = (configs, elements2 = {}) => {
-  let rootContext = new Weaverse(configs);
-  Object.keys(elements2).forEach((key) => {
-    rootContext.registerElement(elements2[key]);
+var createHydrogenRootContext = (configs, elements = {}) => {
+  let rootContext = createRootContext(configs);
+  Object.keys(elements).forEach((key) => {
+    rootContext.registerElement(elements[key]);
   });
   return rootContext;
 };
-var createWeaverseHydrogenContext = (configs) => {
-  let context = createHydrogenRootContext(configs);
-  Object.keys(elements_default).forEach((key) => {
-    context.registerElement(elements_default[key]);
-  });
-  return context;
-};
-var WeaverseHydrogenRoot = () => {
+var useWeaverseHydrogen = (weaverseHydrogenConfigs, data) => {
+  let weaversePageData = data?.weaverseData?.weaversePageData;
+  let { components, ...rest } = weaverseHydrogenConfigs;
   let weaverse = createHydrogenRootContext({
+    ...rest,
+    data: weaversePageData,
+    pageId: weaversePageData?.pageId,
     isDesignMode: true,
     platformType: "shopify-hydrogen"
   });
+  Object.keys(components).forEach((key) => {
+    let component = components[key];
+    weaverse.registerElement({
+      type: components[key]?.schema?.type || key,
+      Component: component?.default,
+      schema: component?.schema,
+      defaultCss: component?.css,
+      permanentCss: component?.permanentCss
+    });
+  });
   useStudio(weaverse);
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { id: "weaverse-test" }, "hello world from weaverse hydrogen"));
+  return weaverse;
+};
+var WeaverseHydrogenRoot = ({
+  configs,
+  data
+}) => {
+  let weaverse = useWeaverseHydrogen(configs, data);
+  if (!weaverse?.data) {
+    return /* @__PURE__ */ React.createElement("div", null, "404");
+  }
+  return /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse });
 };
 export {
   WeaverseHydrogenRoot,
-  createHydrogenRootContext,
-  createWeaverseHydrogenContext,
-  fetchPageData,
   useStudio,
+  useWeaverseHydrogen,
   weaverseLoader
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.22",
+  "version": "1.0.24",
   "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 react @shopify/hydrogen",
-    "build": "tsup src/index.tsx --format esm,cjs --dts --outDir dist --external react @shopify/hydrogen",
+    "dev": "tsup src/index.tsx --format esm,cjs --dts --outDir dist --watch --external react",
+    "build": "tsup src/index.tsx --format esm,cjs --dts --outDir dist --external react",
     "clean": "rimraf dist",
     "prepublish": "npm run build"
   },
@@ -32,7 +32,8 @@
   "name": "@weaverse/hydrogen",
   "author": "Weaverse Team",
   "dependencies": {
-    "@weaverse/core": "1.0.22",
+    "@weaverse/react": "1.0.24",
+    "@weaverse/core": "1.0.24",
     "@shopify/hydrogen": "2023.1.6"
   }
 }