@weaverse/hydrogen 1.0.18 → 1.0.19

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { WeaverseType, WeaverseElement, Weaverse } from '@weaverse/core';
+import { Weaverse, WeaverseType, WeaverseElement } from '@weaverse/core';
 
 type WHFetchConfigs = {
     weaverseHost?: string;
@@ -6,6 +6,7 @@ type WHFetchConfigs = {
     url: URL;
 };
 declare let fetchPageData: ({ weaverseHost, projectId, url, }: WHFetchConfigs) => Promise<any>;
+declare let useStudio: (weaverseCore: Weaverse) => void;
 
 declare let createHydrogenRootContext: (configs: WeaverseType, elements?: {
     [key: string]: WeaverseElement;
@@ -13,4 +14,4 @@ declare let createHydrogenRootContext: (configs: WeaverseType, elements?: {
 declare let createWeaverseHydrogenContext: (configs: WeaverseType) => Weaverse;
 declare let WeaverseHydrogenRoot: () => JSX.Element;
 
-export { WHFetchConfigs, WeaverseHydrogenRoot, createHydrogenRootContext, createWeaverseHydrogenContext, fetchPageData };
+export { WHFetchConfigs, WeaverseHydrogenRoot, createHydrogenRootContext, createWeaverseHydrogenContext, fetchPageData, useStudio };

package/dist/index.js

@@ -33,7 +33,8 @@ __export(src_exports, {
   WeaverseHydrogenRoot: () => WeaverseHydrogenRoot,
   createHydrogenRootContext: () => createHydrogenRootContext,
   createWeaverseHydrogenContext: () => createWeaverseHydrogenContext,
-  fetchPageData: () => fetchPageData
+  fetchPageData: () => fetchPageData,
+  useStudio: () => useStudio
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -42,10 +43,11 @@ var elements = {};
 var elements_default = elements;
 
 // src/index.tsx
-var import_core = require("@weaverse/core");
-var import_react = __toESM(require("react"));
+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,
@@ -66,10 +68,25 @@ var fetchPageData = async ({
   });
   return { ...data, weaverseHost, isDesignMode };
 };
+var useStudio = (weaverseCore) => {
+  (0, import_react.useEffect)(() => {
+    if (weaverseCore.isDesignMode && import_core.isIframe && !window.weaverseStudioInitialized) {
+      (0, import_core.loadScript)(
+        `${weaverseCore.weaverseHost}/assets/studio/studio-bridge.js`
+      ).then(() => {
+        window?.createWeaverseStudioBridge(weaverseCore);
+        setTimeout(() => {
+          weaverseCore.triggerUpdate();
+        }, 2e3);
+      });
+    }
+  }, []);
+};
 
 // src/index.tsx
+var import_react2 = __toESM(require("react"));
 var createHydrogenRootContext = (configs, elements2 = {}) => {
-  let rootContext = new import_core.Weaverse(configs);
+  let rootContext = new import_core2.Weaverse(configs);
   Object.keys(elements2).forEach((key) => {
     rootContext.registerElement(elements2[key]);
   });
@@ -83,12 +100,18 @@ var createWeaverseHydrogenContext = (configs) => {
   return context;
 };
 var WeaverseHydrogenRoot = () => {
-  return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", null, "hello world from weaverse hydrogen"));
+  let weaverse = createHydrogenRootContext({
+    isDesignMode: true,
+    platformType: "shopify-hydrogen"
+  });
+  useStudio(weaverse);
+  return /* @__PURE__ */ import_react2.default.createElement("div", null, /* @__PURE__ */ import_react2.default.createElement("div", { id: "weaverse-test" }, "hello world from weaverse hydrogen"));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   WeaverseHydrogenRoot,
   createHydrogenRootContext,
   createWeaverseHydrogenContext,
-  fetchPageData
+  fetchPageData,
+  useStudio
 });

package/dist/index.mjs

@@ -4,9 +4,10 @@ var elements_default = elements;
 
 // src/index.tsx
 import { Weaverse } from "@weaverse/core";
-import React from "react";
 
 // src/utils.ts
+import { isIframe, loadScript } from "@weaverse/core";
+import { useEffect } from "react";
 var fetchPageData = async ({
   weaverseHost = "https://studio.weaverse.io",
   projectId,
@@ -27,8 +28,23 @@ var fetchPageData = async ({
   });
   return { ...data, weaverseHost, isDesignMode };
 };
+var useStudio = (weaverseCore) => {
+  useEffect(() => {
+    if (weaverseCore.isDesignMode && isIframe && !window.weaverseStudioInitialized) {
+      loadScript(
+        `${weaverseCore.weaverseHost}/assets/studio/studio-bridge.js`
+      ).then(() => {
+        window?.createWeaverseStudioBridge(weaverseCore);
+        setTimeout(() => {
+          weaverseCore.triggerUpdate();
+        }, 2e3);
+      });
+    }
+  }, []);
+};
 
 // src/index.tsx
+import React from "react";
 var createHydrogenRootContext = (configs, elements2 = {}) => {
   let rootContext = new Weaverse(configs);
   Object.keys(elements2).forEach((key) => {
@@ -44,11 +60,17 @@ var createWeaverseHydrogenContext = (configs) => {
   return context;
 };
 var WeaverseHydrogenRoot = () => {
-  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", null, "hello world from weaverse hydrogen"));
+  let weaverse = createHydrogenRootContext({
+    isDesignMode: true,
+    platformType: "shopify-hydrogen"
+  });
+  useStudio(weaverse);
+  return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { id: "weaverse-test" }, "hello world from weaverse hydrogen"));
 };
 export {
   WeaverseHydrogenRoot,
   createHydrogenRootContext,
   createWeaverseHydrogenContext,
-  fetchPageData
+  fetchPageData,
+  useStudio
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.18",
+  "version": "1.0.19",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -15,7 +15,7 @@
   },
   "scripts": {
     "start": "npm run dev",
-    "dev": "tsup src/index.tsx --format esm,cjs --dts --outDir dist --watch --external react --sourcemap",
+    "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,6 +32,7 @@
   "name": "@weaverse/hydrogen",
   "author": "Weaverse Team",
   "dependencies": {
-    "@weaverse/core": "1.0.18"
+    "@weaverse/core": "1.0.19",
+    "@shopify/hydrogen": "2023.1.6"
   }
 }