@weaverse/react 0.6.6 → 0.6.10

package/dist/index.d.ts

@@ -1,18 +1,19 @@
+import * as react from 'react';
 import { WeaverseType, Weaverse } from '@weaverse/core';
 export * from '@weaverse/core';
-import React$1 from 'react';
 
-declare const createRootContext: (configs: WeaverseType) => Weaverse;
-declare let WeaverseContext: React$1.Context<Weaverse>;
-declare let WeaverseContextProvider: React$1.Provider<Weaverse>;
-declare let WeaverseContextConsumer: React$1.Consumer<Weaverse>;
-declare type WeaverseRootPropsType = {
-    context: Weaverse;
-};
-declare const WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element;
+declare let createRootContext: (configs: WeaverseType) => Weaverse;
+declare let WeaverseContext: react.Context<Weaverse>;
+declare let WeaverseContextProvider: react.Provider<Weaverse>;
+declare let WeaverseContextConsumer: react.Consumer<Weaverse>;
 
 interface WeaverseElementProps {
     children?: React.ReactNode;
 }
+declare type WeaverseRootPropsType = {
+    context: Weaverse;
+};
+
+declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element;
 
 export { WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };

package/dist/index.js

@@ -60,6 +60,10 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
+// src/context.ts
+var import_core = require("@weaverse/core");
+var import_react5 = require("react");
+
 // src/elements/base.tsx
 var import_react = __toESM(require("react"));
 var BaseElement = import_react.default.forwardRef((_a, ref) => {
@@ -201,7 +205,6 @@ var schema4 = {
   data: {
     css: {
       "@desktop": {
-        overflow: "hidden",
         paddingTop: "16px",
         paddingBottom: "16px",
         paddingLeft: "var(--gap)",
@@ -211,13 +214,16 @@ var schema4 = {
           display: "grid !important",
           gridTemplateRows: "repeat(var(--rows), var(--row-size))",
           gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
-          gridGap: "var(--gap)",
+          gap: "var(--gap)",
           maxWidth: "var(--grid-size)"
         }
       },
       "@mobile": {
-        display: "flex !important",
-        flexDirection: "column"
+        padding: "0",
+        "> [data-layout-content]": {
+          display: "flex !important",
+          flexDirection: "column"
+        }
       }
     },
     gridSize: 1224,
@@ -286,7 +292,9 @@ var schema6 = {
   data: {
     css: {
       "@desktop": {
-        padding: "10px"
+        width: "100%",
+        height: "100%",
+        objectFit: "cover"
       }
     }
   }
@@ -322,19 +330,9 @@ var elements = {
 };
 var elements_default = elements;
 
-// src/utils/css.ts
-var shortCssObject = (css) => {
-  return {
-    "@desktop": css[`@desktop`],
-    "@mobile": css[`@mobile`]
-  };
-};
-
-// src/renderer.tsx
-var import_core = require("@weaverse/core");
-var import_react5 = __toESM(require("react"));
+// src/context.ts
 var createRootContext = (configs) => {
-  const rootContext = new import_core.Weaverse(configs);
+  let rootContext = new import_core.Weaverse(configs);
   Object.keys(elements_default).forEach((key) => {
     rootContext.registerElement(elements_default[key]);
   });
@@ -343,92 +341,107 @@ var createRootContext = (configs) => {
 var WeaverseContext = (0, import_react5.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
+
+// src/renderer.tsx
+var import_core2 = require("@weaverse/core");
+var import_react6 = __toESM(require("react"));
+
+// src/utils/index.ts
+var shortCssObject = (css) => {
+  return {
+    "@desktop": css[`@desktop`],
+    "@mobile": css[`@mobile`]
+  };
+};
+function generateItemClass(instance, stitchesInstance) {
+  var _a;
+  let { css, className: cls = "" } = instance.data;
+  let className = "";
+  if (css) {
+    let formattedCss = shortCssObject(css);
+    let { className: newClass = "" } = stitchesInstance.css(formattedCss)();
+    let { stitchesClass } = instance;
+    let otherClass = (((_a = instance.ref.current) == null ? void 0 : _a.className) || "").replace(stitchesClass, "").replace(cls, "").trim();
+    className = `${cls} ${newClass} ${otherClass}`.trim();
+    instance.stitchesClass = newClass;
+  }
+  return className;
+}
+
+// src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a;
-  let [, setData] = (0, import_react5.useState)(context.projectData);
-  (0, import_react5.useEffect)(() => {
-    let handleUpdate = () => {
-      setData({});
-    };
-    context.subscribe(handleUpdate);
+  let [, setData] = (0, import_react6.useState)(context.projectData);
+  let rootRef = (0, import_react6.useRef)();
+  (0, import_react6.useEffect)(() => {
+    let update = () => setData({});
+    context.subscribe(update);
     if (context.projectData) {
-      setTimeout(handleUpdate, 110);
+      setTimeout(update, 110);
     }
+    context.contentRootElement = rootRef.current;
     return () => {
-      context.unsubscribe(handleUpdate);
+      context.unsubscribe(update);
     };
   }, []);
   let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
-  return /* @__PURE__ */ import_react5.default.createElement("div", __spreadValues({
+  return /* @__PURE__ */ import_react6.default.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
-  }, eventHandlers), /* @__PURE__ */ import_react5.default.createElement(WeaverseContextProvider, {
+  }, eventHandlers), {
+    ref: rootRef
+  }), /* @__PURE__ */ import_react6.default.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ import_react5.default.createElement(RenderItem, {
-    itemId: context.projectData.rootId || 0
+  }, /* @__PURE__ */ import_react6.default.createElement(ItemInstance, {
+    id: context.projectData.rootId || 0
   })));
 };
-var Item = ({ itemInstance, elementInstances }) => {
-  var _b;
-  let [data, setData] = (0, import_react5.useState)(itemInstance.data);
-  let _a = data, { id, type, childIds, css, className: cls = "" } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  (0, import_react5.useEffect)(() => {
-    let handleUpdate = (update) => {
-      setData(__spreadValues({}, update));
-    };
-    itemInstance.subscribe(handleUpdate);
-    if (import_core.isBrowser && !itemInstance.ref.current) {
-      Object.assign(itemInstance.ref, {
+var ItemComponent = ({ instance }) => {
+  let { stitchesInstance, elementInstances } = (0, import_react6.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react6.useState)(instance.data);
+  let _a = data, { id, type, childIds = [], css, className: cls = "" } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
+  (0, import_react6.useEffect)(() => {
+    let update = (data2) => setData(__spreadValues({}, data2));
+    instance.subscribe(update);
+    if (import_core2.isBrowser && !instance.ref.current) {
+      Object.assign(instance.ref, {
         current: document.querySelector(`[data-wv-id="${id}"]`)
       });
     }
     return () => {
-      itemInstance.unsubscribe(handleUpdate);
+      instance.unsubscribe(update);
     };
   }, []);
-  let context = (0, import_react5.useContext)(WeaverseContext);
-  let className = "";
-  if (css) {
-    let formattedCss = shortCssObject(css);
-    let { className: newClass = "" } = context.stitchesInstance.css(formattedCss)();
-    let { stitchesClass } = itemInstance;
-    let otherClass = (((_b = itemInstance.ref.current) == null ? void 0 : _b.className) || "").replace(stitchesClass, "").replace(cls, "").trim();
-    className = `${cls} ${newClass} ${otherClass}`.trim();
-    itemInstance.stitchesClass = newClass;
-  }
-  let element = elementInstances.get(type) || elementInstances.get("base");
-  if (element == null ? void 0 : element.Component) {
-    let Component = element.Component;
+  let Element = elementInstances.get(type || "base");
+  if (Element == null ? void 0 : Element.Component) {
+    let Component = Element.Component;
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
-      rest.ref = itemInstance.ref;
+      rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react5.default.createElement(Component, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ import_react6.default.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
-      "data-wv-id": id
-    }, rest), {
-      className
-    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ import_react5.default.createElement(RenderItem, {
-      key: childId,
-      itemId: childId
+      "data-wv-id": id,
+      className: generateItemClass(instance, stitchesInstance)
+    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react6.default.createElement(ItemInstance, {
+      key: id2,
+      id: id2
     })));
   }
   return null;
 };
-var RenderItem = ({
-  itemId
-}) => {
-  let context = (0, import_react5.useContext)(WeaverseContext);
-  let { itemInstances, elementInstances } = context;
-  let itemInstance = itemInstances.get(itemId);
-  if (itemInstance) {
-    return /* @__PURE__ */ import_react5.default.createElement(Item, {
-      itemInstance,
-      elementInstances
-    });
+var ItemInstance = ({ id }) => {
+  let context = (0, import_react6.useContext)(WeaverseContext);
+  let { itemInstances } = context;
+  let instance = itemInstances.get(id);
+  if (!instance) {
+    return /* @__PURE__ */ import_react6.default.createElement("div", {
+      style: { display: "none" }
+    }, "Item instance ", id, " not found");
   }
-  console.warn(`Item instance ${itemId} not found`);
-  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null);
+  return /* @__PURE__ */ import_react6.default.createElement(ItemComponent, {
+    instance
+  });
 };
 
 // src/index.ts

package/dist/index.mjs

@@ -30,6 +30,10 @@ var __objRest = (source, exclude) => {
   return target;
 };
 
+// src/context.ts
+import { Weaverse } from "@weaverse/core";
+import { createContext } from "react";
+
 // src/elements/base.tsx
 import React from "react";
 var BaseElement = React.forwardRef((_a, ref) => {
@@ -171,7 +175,6 @@ var schema4 = {
   data: {
     css: {
       "@desktop": {
-        overflow: "hidden",
         paddingTop: "16px",
         paddingBottom: "16px",
         paddingLeft: "var(--gap)",
@@ -181,13 +184,16 @@ var schema4 = {
           display: "grid !important",
           gridTemplateRows: "repeat(var(--rows), var(--row-size))",
           gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
-          gridGap: "var(--gap)",
+          gap: "var(--gap)",
           maxWidth: "var(--grid-size)"
         }
       },
       "@mobile": {
-        display: "flex !important",
-        flexDirection: "column"
+        padding: "0",
+        "> [data-layout-content]": {
+          display: "flex !important",
+          flexDirection: "column"
+        }
       }
     },
     gridSize: 1224,
@@ -256,7 +262,9 @@ var schema6 = {
   data: {
     css: {
       "@desktop": {
-        padding: "10px"
+        width: "100%",
+        height: "100%",
+        objectFit: "cover"
       }
     }
   }
@@ -292,19 +300,9 @@ var elements = {
 };
 var elements_default = elements;
 
-// src/utils/css.ts
-var shortCssObject = (css) => {
-  return {
-    "@desktop": css[`@desktop`],
-    "@mobile": css[`@mobile`]
-  };
-};
-
-// src/renderer.tsx
-import { isBrowser, Weaverse } from "@weaverse/core";
-import React7, { createContext, useContext, useEffect, useState } from "react";
+// src/context.ts
 var createRootContext = (configs) => {
-  const rootContext = new Weaverse(configs);
+  let rootContext = new Weaverse(configs);
   Object.keys(elements_default).forEach((key) => {
     rootContext.registerElement(elements_default[key]);
   });
@@ -313,92 +311,107 @@ var createRootContext = (configs) => {
 var WeaverseContext = createContext({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
+
+// src/renderer.tsx
+import { isBrowser } from "@weaverse/core";
+import React7, { useContext, useEffect, useRef, useState } from "react";
+
+// src/utils/index.ts
+var shortCssObject = (css) => {
+  return {
+    "@desktop": css[`@desktop`],
+    "@mobile": css[`@mobile`]
+  };
+};
+function generateItemClass(instance, stitchesInstance) {
+  var _a;
+  let { css, className: cls = "" } = instance.data;
+  let className = "";
+  if (css) {
+    let formattedCss = shortCssObject(css);
+    let { className: newClass = "" } = stitchesInstance.css(formattedCss)();
+    let { stitchesClass } = instance;
+    let otherClass = (((_a = instance.ref.current) == null ? void 0 : _a.className) || "").replace(stitchesClass, "").replace(cls, "").trim();
+    className = `${cls} ${newClass} ${otherClass}`.trim();
+    instance.stitchesClass = newClass;
+  }
+  return className;
+}
+
+// src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a;
   let [, setData] = useState(context.projectData);
+  let rootRef = useRef();
   useEffect(() => {
-    let handleUpdate = () => {
-      setData({});
-    };
-    context.subscribe(handleUpdate);
+    let update = () => setData({});
+    context.subscribe(update);
     if (context.projectData) {
-      setTimeout(handleUpdate, 110);
+      setTimeout(update, 110);
     }
+    context.contentRootElement = rootRef.current;
     return () => {
-      context.unsubscribe(handleUpdate);
+      context.unsubscribe(update);
     };
   }, []);
   let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
-  return /* @__PURE__ */ React7.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React7.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
-  }, eventHandlers), /* @__PURE__ */ React7.createElement(WeaverseContextProvider, {
+  }, eventHandlers), {
+    ref: rootRef
+  }), /* @__PURE__ */ React7.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ React7.createElement(RenderItem, {
-    itemId: context.projectData.rootId || 0
+  }, /* @__PURE__ */ React7.createElement(ItemInstance, {
+    id: context.projectData.rootId || 0
   })));
 };
-var Item = ({ itemInstance, elementInstances }) => {
-  var _b;
-  let [data, setData] = useState(itemInstance.data);
-  let _a = data, { id, type, childIds, css, className: cls = "" } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
+var ItemComponent = ({ instance }) => {
+  let { stitchesInstance, elementInstances } = useContext(WeaverseContext);
+  let [data, setData] = useState(instance.data);
+  let _a = data, { id, type, childIds = [], css, className: cls = "" } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
   useEffect(() => {
-    let handleUpdate = (update) => {
-      setData(__spreadValues({}, update));
-    };
-    itemInstance.subscribe(handleUpdate);
-    if (isBrowser && !itemInstance.ref.current) {
-      Object.assign(itemInstance.ref, {
+    let update = (data2) => setData(__spreadValues({}, data2));
+    instance.subscribe(update);
+    if (isBrowser && !instance.ref.current) {
+      Object.assign(instance.ref, {
         current: document.querySelector(`[data-wv-id="${id}"]`)
       });
     }
     return () => {
-      itemInstance.unsubscribe(handleUpdate);
+      instance.unsubscribe(update);
     };
   }, []);
-  let context = useContext(WeaverseContext);
-  let className = "";
-  if (css) {
-    let formattedCss = shortCssObject(css);
-    let { className: newClass = "" } = context.stitchesInstance.css(formattedCss)();
-    let { stitchesClass } = itemInstance;
-    let otherClass = (((_b = itemInstance.ref.current) == null ? void 0 : _b.className) || "").replace(stitchesClass, "").replace(cls, "").trim();
-    className = `${cls} ${newClass} ${otherClass}`.trim();
-    itemInstance.stitchesClass = newClass;
-  }
-  let element = elementInstances.get(type) || elementInstances.get("base");
-  if (element == null ? void 0 : element.Component) {
-    let Component = element.Component;
+  let Element = elementInstances.get(type || "base");
+  if (Element == null ? void 0 : Element.Component) {
+    let Component = Element.Component;
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
-      rest.ref = itemInstance.ref;
+      rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React7.createElement(Component, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React7.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
-      "data-wv-id": id
-    }, rest), {
-      className
-    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React7.createElement(RenderItem, {
-      key: childId,
-      itemId: childId
+      "data-wv-id": id,
+      className: generateItemClass(instance, stitchesInstance)
+    }, rest), childIds.map((id2) => /* @__PURE__ */ React7.createElement(ItemInstance, {
+      key: id2,
+      id: id2
     })));
   }
   return null;
 };
-var RenderItem = ({
-  itemId
-}) => {
+var ItemInstance = ({ id }) => {
   let context = useContext(WeaverseContext);
-  let { itemInstances, elementInstances } = context;
-  let itemInstance = itemInstances.get(itemId);
-  if (itemInstance) {
-    return /* @__PURE__ */ React7.createElement(Item, {
-      itemInstance,
-      elementInstances
-    });
+  let { itemInstances } = context;
+  let instance = itemInstances.get(id);
+  if (!instance) {
+    return /* @__PURE__ */ React7.createElement("div", {
+      style: { display: "none" }
+    }, "Item instance ", id, " not found");
   }
-  console.warn(`Item instance ${itemId} not found`);
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null);
+  return /* @__PURE__ */ React7.createElement(ItemComponent, {
+    instance
+  });
 };
 
 // src/index.ts

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.6",
+  "version": "0.6.10",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -31,6 +31,6 @@
   "name": "@weaverse/react",
   "author": "Weaverse Team",
   "dependencies": {
-    "@weaverse/core": "0.6.6"
+    "@weaverse/core": "0.6.10"
   }
 }