@weaverse/react 0.4.3 → 0.5.1

package/dist/index.d.ts

@@ -4,8 +4,7 @@ export * from '@weaverse/core';
 declare const createRootContext: (configs: WeaverseType) => Weaverse;
 declare type WeaverseRootPropsType = {
     context: Weaverse;
-    defaultData: any;
 };
-declare const WeaverseRoot: ({ context, defaultData, }: WeaverseRootPropsType) => JSX.Element;
+declare const WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element;
 
 export { WeaverseRoot, WeaverseRootPropsType, createRootContext };

package/dist/index.js

@@ -177,25 +177,62 @@ var schema2 = {
 };
 var button_default = Button;
 
-// src/elements/grid.tsx
+// src/elements/flex.tsx
 var import_react2 = __toESM(require("react"));
-var Grid = (0, import_react2.forwardRef)((props, ref) => {
+var Flex = (0, import_react2.forwardRef)((props, ref) => {
   return /* @__PURE__ */ import_react2.default.createElement("div", __spreadValues({
     ref
   }, props));
 });
 var schema3 = {
+  title: "Flex",
+  type: "flex",
+  data: {
+    css: {
+      "@desktop": {
+        display: "flex",
+        backgroundColor: "rgba(248,203,203,0.38)",
+        gridArea: "1 / 1 / 3 / 3"
+      }
+    }
+  },
+  settings: [
+    {
+      tab: "Layout",
+      label: "Flex",
+      inspectors: [
+        {
+          type: "flex"
+        }
+      ]
+    }
+  ]
+};
+var flex_default = Flex;
+
+// src/elements/grid.tsx
+var import_react3 = __toESM(require("react"));
+var Grid = (0, import_react3.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ import_react3.default.createElement("div", __spreadValues({
+    ref
+  }, props));
+});
+var schema4 = {
   title: "Grid",
   type: "grid",
   data: {
     css: {
       "@desktop": {
         display: "grid",
-        gridTemplateRows: "repeat(auto-fill, 48px)",
-        gridTemplateColumns: "repeat(24, 1fr)",
-        gridGap: "8px",
+        gridTemplateRows: "repeat(auto-fill, $rowSize)",
+        gridTemplateColumns: "repeat($columns, 1fr)",
+        gridGap: "$gap",
         minHeight: "480px",
         backgroundColor: "#c7c7c7"
+      },
+      "@mobile": {
+        gridTemplateRows: "100%",
+        gridTemplateColumns: "100%"
       }
     }
   },
@@ -214,10 +251,10 @@ var schema3 = {
 var grid_default = Grid;
 
 // src/elements/text.tsx
-var React4 = __toESM(require("react"));
-var Text = React4.forwardRef((props, ref) => {
+var React5 = __toESM(require("react"));
+var Text = React5.forwardRef((props, ref) => {
   let _a = props, { children, value } = _a, rest = __objRest(_a, ["children", "value"]);
-  return /* @__PURE__ */ React4.createElement("span", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React5.createElement("span", __spreadProps(__spreadValues({
     ref
   }, rest), {
     contentEditable: true,
@@ -228,7 +265,7 @@ Text.defaultProps = {
   value: "sample text",
   tag: "span"
 };
-var schema4 = {
+var schema5 = {
   type: "text",
   title: "Text Settings",
   settings: [
@@ -264,10 +301,14 @@ var elements = {
   },
   Text: {
     Component: text_default,
-    schema: schema4
+    schema: schema5
   },
   Grid: {
     Component: grid_default,
+    schema: schema4
+  },
+  Flex: {
+    Component: flex_default,
     schema: schema3
   }
 };
@@ -284,7 +325,7 @@ var shortCssObject = (css) => {
 
 // src/renderer.tsx
 var import_core = require("@weaverse/core");
-var React5 = __toESM(require("react"));
+var React6 = __toESM(require("react"));
 var createRootContext = (configs) => {
   const rootContext = new import_core.Weaverse(configs);
   Object.keys(elements_default).forEach((key) => {
@@ -292,39 +333,34 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseRoot = ({
-  context,
-  defaultData
-}) => {
-  var _a, _b, _c;
-  let [, setData] = React5.useState(context.projectData);
-  React5.useEffect(() => {
+var WeaverseRoot = ({ context }) => {
+  var _a;
+  let [, setData] = React6.useState(context.projectData);
+  React6.useEffect(() => {
     let handleUpdate = () => {
-      setData(__spreadValues({}, context.projectData));
+      setData({});
     };
     context.subscribe(handleUpdate);
-    context.updateProjectData();
+    if (context.projectData) {
+      setTimeout(handleUpdate, 110);
+    }
     return () => {
       context.unsubscribe(handleUpdate);
     };
   }, []);
-  if (!((_b = (_a = context.projectData) == null ? void 0 : _a.items) == null ? void 0 : _b.length) && defaultData) {
-    Object.assign(context.projectData, defaultData);
-    context.initProjectItemData();
-  }
-  let handleProps = ((_c = context == null ? void 0 : context.studioBridge) == null ? void 0 : _c.handleProps) || {};
-  return /* @__PURE__ */ React5.createElement("div", __spreadValues({
-    className: `weaverse-root`,
-    id: "weaverse-root"
-  }, handleProps), /* @__PURE__ */ React5.createElement(RenderItem, {
+  let handleProps = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.handleProps) || {};
+  let themeClass = context.stitchesInstance.theme.className;
+  return /* @__PURE__ */ React6.createElement("div", __spreadValues({
+    className: `weaverse-content-root ${themeClass}`
+  }, handleProps), /* @__PURE__ */ React6.createElement(RenderItem, {
     itemId: context.projectData.rootId || 0,
     context
   }));
 };
 var Item = ({ itemInstance, elementInstances, context }) => {
-  let [data, setData] = React5.useState(itemInstance.data);
+  let [data, setData] = React6.useState(itemInstance.data);
   let _a = data, { id, type, childIds, css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     let handleUpdate = (update) => {
       setData(__spreadValues({}, update));
     };
@@ -350,12 +386,13 @@ var Item = ({ itemInstance, elementInstances, context }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = itemInstance.ref;
     }
-    return /* @__PURE__ */ React5.createElement(Component, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React6.createElement(Component, __spreadProps(__spreadValues({
       key: id,
+      "data-wv-type": type,
       "data-wv-id": id
     }, rest), {
       className: realClassName
-    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React5.createElement(RenderItem, {
+    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React6.createElement(RenderItem, {
       key: childId,
       itemId: childId,
       context
@@ -370,13 +407,14 @@ var RenderItem = ({
   let { itemInstances, elementInstances } = context;
   let itemInstance = itemInstances.get(itemId);
   if (itemInstance) {
-    return /* @__PURE__ */ React5.createElement(Item, {
+    return /* @__PURE__ */ React6.createElement(Item, {
       itemInstance,
       elementInstances,
       context
     });
   }
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null);
+  console.warn(`Item instance ${itemId} not found`);
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null);
 };
 
 // src/index.ts

package/dist/index.mjs

@@ -150,25 +150,62 @@ var schema2 = {
 };
 var button_default = Button;
 
-// src/elements/grid.tsx
+// src/elements/flex.tsx
 import React3, { forwardRef as forwardRef2 } from "react";
-var Grid = forwardRef2((props, ref) => {
+var Flex = forwardRef2((props, ref) => {
   return /* @__PURE__ */ React3.createElement("div", __spreadValues({
     ref
   }, props));
 });
 var schema3 = {
+  title: "Flex",
+  type: "flex",
+  data: {
+    css: {
+      "@desktop": {
+        display: "flex",
+        backgroundColor: "rgba(248,203,203,0.38)",
+        gridArea: "1 / 1 / 3 / 3"
+      }
+    }
+  },
+  settings: [
+    {
+      tab: "Layout",
+      label: "Flex",
+      inspectors: [
+        {
+          type: "flex"
+        }
+      ]
+    }
+  ]
+};
+var flex_default = Flex;
+
+// src/elements/grid.tsx
+import React4, { forwardRef as forwardRef3 } from "react";
+var Grid = forwardRef3((props, ref) => {
+  return /* @__PURE__ */ React4.createElement("div", __spreadValues({
+    ref
+  }, props));
+});
+var schema4 = {
   title: "Grid",
   type: "grid",
   data: {
     css: {
       "@desktop": {
         display: "grid",
-        gridTemplateRows: "repeat(auto-fill, 48px)",
-        gridTemplateColumns: "repeat(24, 1fr)",
-        gridGap: "8px",
+        gridTemplateRows: "repeat(auto-fill, $rowSize)",
+        gridTemplateColumns: "repeat($columns, 1fr)",
+        gridGap: "$gap",
         minHeight: "480px",
         backgroundColor: "#c7c7c7"
+      },
+      "@mobile": {
+        gridTemplateRows: "100%",
+        gridTemplateColumns: "100%"
       }
     }
   },
@@ -187,10 +224,10 @@ var schema3 = {
 var grid_default = Grid;
 
 // src/elements/text.tsx
-import * as React4 from "react";
-var Text = React4.forwardRef((props, ref) => {
+import * as React5 from "react";
+var Text = React5.forwardRef((props, ref) => {
   let _a = props, { children, value } = _a, rest = __objRest(_a, ["children", "value"]);
-  return /* @__PURE__ */ React4.createElement("span", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React5.createElement("span", __spreadProps(__spreadValues({
     ref
   }, rest), {
     contentEditable: true,
@@ -201,7 +238,7 @@ Text.defaultProps = {
   value: "sample text",
   tag: "span"
 };
-var schema4 = {
+var schema5 = {
   type: "text",
   title: "Text Settings",
   settings: [
@@ -237,10 +274,14 @@ var elements = {
   },
   Text: {
     Component: text_default,
-    schema: schema4
+    schema: schema5
   },
   Grid: {
     Component: grid_default,
+    schema: schema4
+  },
+  Flex: {
+    Component: flex_default,
     schema: schema3
   }
 };
@@ -260,7 +301,7 @@ import {
   isBrowser,
   Weaverse
 } from "@weaverse/core";
-import * as React5 from "react";
+import * as React6 from "react";
 var createRootContext = (configs) => {
   const rootContext = new Weaverse(configs);
   Object.keys(elements_default).forEach((key) => {
@@ -268,39 +309,34 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseRoot = ({
-  context,
-  defaultData
-}) => {
-  var _a, _b, _c;
-  let [, setData] = React5.useState(context.projectData);
-  React5.useEffect(() => {
+var WeaverseRoot = ({ context }) => {
+  var _a;
+  let [, setData] = React6.useState(context.projectData);
+  React6.useEffect(() => {
     let handleUpdate = () => {
-      setData(__spreadValues({}, context.projectData));
+      setData({});
     };
     context.subscribe(handleUpdate);
-    context.updateProjectData();
+    if (context.projectData) {
+      setTimeout(handleUpdate, 110);
+    }
     return () => {
       context.unsubscribe(handleUpdate);
     };
   }, []);
-  if (!((_b = (_a = context.projectData) == null ? void 0 : _a.items) == null ? void 0 : _b.length) && defaultData) {
-    Object.assign(context.projectData, defaultData);
-    context.initProjectItemData();
-  }
-  let handleProps = ((_c = context == null ? void 0 : context.studioBridge) == null ? void 0 : _c.handleProps) || {};
-  return /* @__PURE__ */ React5.createElement("div", __spreadValues({
-    className: `weaverse-root`,
-    id: "weaverse-root"
-  }, handleProps), /* @__PURE__ */ React5.createElement(RenderItem, {
+  let handleProps = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.handleProps) || {};
+  let themeClass = context.stitchesInstance.theme.className;
+  return /* @__PURE__ */ React6.createElement("div", __spreadValues({
+    className: `weaverse-content-root ${themeClass}`
+  }, handleProps), /* @__PURE__ */ React6.createElement(RenderItem, {
     itemId: context.projectData.rootId || 0,
     context
   }));
 };
 var Item = ({ itemInstance, elementInstances, context }) => {
-  let [data, setData] = React5.useState(itemInstance.data);
+  let [data, setData] = React6.useState(itemInstance.data);
   let _a = data, { id, type, childIds, css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     let handleUpdate = (update) => {
       setData(__spreadValues({}, update));
     };
@@ -326,12 +362,13 @@ var Item = ({ itemInstance, elementInstances, context }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = itemInstance.ref;
     }
-    return /* @__PURE__ */ React5.createElement(Component, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React6.createElement(Component, __spreadProps(__spreadValues({
       key: id,
+      "data-wv-type": type,
       "data-wv-id": id
     }, rest), {
       className: realClassName
-    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React5.createElement(RenderItem, {
+    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React6.createElement(RenderItem, {
       key: childId,
       itemId: childId,
       context
@@ -346,13 +383,14 @@ var RenderItem = ({
   let { itemInstances, elementInstances } = context;
   let itemInstance = itemInstances.get(itemId);
   if (itemInstance) {
-    return /* @__PURE__ */ React5.createElement(Item, {
+    return /* @__PURE__ */ React6.createElement(Item, {
       itemInstance,
       elementInstances,
       context
     });
   }
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null);
+  console.warn(`Item instance ${itemId} not found`);
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null);
 };
 
 // src/index.ts

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.3",
+  "version": "0.5.1",
   "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.4.2"
+    "@weaverse/core": "0.5.0"
   }
 }