@weaverse/react 0.3.4 → 0.3.7

package/dist/index.d.ts

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

package/dist/index.js

@@ -21,7 +21,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __objRest = (source, exclude) => {
   var target = {};
   for (var prop in source)
@@ -38,22 +37,17 @@ var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, copyDefault, desc) => {
-  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
-    for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
-        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return target;
-};
-var __toESM = (module2, isNodeMode) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+  return to;
 };
-var __toCommonJS = /* @__PURE__ */ ((cache) => {
-  return (module2, temp) => {
-    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
-  };
-})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
@@ -61,31 +55,7 @@ __export(src_exports, {
   WeaverseRoot: () => WeaverseRoot,
   createRootContext: () => createRootContext
 });
-
-// src/renderer.tsx
-var React5 = __toESM(require("react"));
-var import_core = require("@weaverse/core");
-
-// src/elements/button.tsx
-var React = __toESM(require("react"));
-var Button = React.forwardRef((props, ref) => {
-  let [count, setCount] = React.useState(0);
-  return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({
-    ref
-  }, props), {
-    onClick: () => setCount(count + 1)
-  }), "Test Button ", count);
-});
-Button.defaultProps = {
-  style: {
-    borderRadius: "9999px",
-    fontSize: "13px",
-    padding: "10px 15px"
-  },
-  type: "button",
-  tag: "button"
-};
-var button_default = Button;
+module.exports = __toCommonJS(src_exports);
 
 // src/elements/base.tsx
 var import_react = __toESM(require("react"));
@@ -96,65 +66,130 @@ var BaseElement = import_react.default.forwardRef((_a, ref) => {
   }, props), children);
 });
 BaseElement.defaultProps = {
-  type: "base",
   tag: "div",
   style: {}
 };
+var schema = {
+  type: "base"
+};
 var base_default = BaseElement;
 
-// src/elements/grid.tsx
-var import_react2 = __toESM(require("react"));
-function Grid(props) {
-  return /* @__PURE__ */ import_react2.default.createElement("div", __spreadValues({}, props));
-}
-Grid.defaultProps = {
+// src/elements/button.tsx
+var React2 = __toESM(require("react"));
+var Button = React2.forwardRef((props, ref) => {
+  return /* @__PURE__ */ React2.createElement("button", __spreadValues({
+    ref
+  }, props), props.value);
+});
+Button.defaultProps = {
+  value: "Click me",
   style: {
-    display: "grid",
-    gridTemplate: "1fr / 1fr"
-  },
-  type: "grid"
+    borderRadius: "9999px",
+    fontSize: "13px",
+    padding: "10px 15px"
+  }
 };
+var schema2 = {
+  title: "Button",
+  type: "button",
+  settings: [
+    {
+      tab: "Settings",
+      label: "Group 1",
+      inspectors: [
+        {
+          binding: "data",
+          key: "value",
+          componentType: "textarea"
+        },
+        {
+          binding: "style",
+          key: "backgroundColor",
+          componentType: "color"
+        }
+      ]
+    },
+    {
+      tab: "Settings",
+      label: "Group 2",
+      inspectors: [
+        {
+          binding: "style",
+          key: "color",
+          componentType: "color"
+        }
+      ]
+    }
+  ]
+};
+var button_default = Button;
 
 // src/elements/text.tsx
-var React4 = __toESM(require("react"));
-var Text = React4.forwardRef((props, ref) => {
-  let _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
-  return /* @__PURE__ */ React4.createElement("span", __spreadProps(__spreadValues({
+var React3 = __toESM(require("react"));
+var Text = React3.forwardRef((props, ref) => {
+  let _a = props, { children, value } = _a, rest = __objRest(_a, ["children", "value"]);
+  return /* @__PURE__ */ React3.createElement("span", __spreadProps(__spreadValues({
     ref
   }, rest), {
     contentEditable: true,
-    dangerouslySetInnerHTML: { __html: "123123" }
+    dangerouslySetInnerHTML: { __html: value }
   }));
 });
 Text.defaultProps = {
-  style: {},
-  type: "text",
+  value: "sample text",
   tag: "span"
 };
+var schema3 = {
+  type: "text",
+  inspectors: [
+    {
+      binding: "data",
+      key: "value",
+      componentType: "textarea"
+    },
+    {
+      binding: "style",
+      key: "color",
+      componentType: "color"
+    }
+  ]
+};
 var text_default = Text;
 
 // src/elements/index.ts
 var elements = {
-  Button: button_default,
-  BaseElement: base_default,
-  Grid,
-  Text: text_default
+  Button: {
+    Component: button_default,
+    schema: schema2
+  },
+  BaseElement: {
+    Component: base_default,
+    schema
+  },
+  Text: {
+    Component: text_default,
+    schema: schema3
+  }
 };
 var elements_default = elements;
 
 // src/renderer.tsx
+var import_core = require("@weaverse/core");
+var React4 = __toESM(require("react"));
 var createRootContext = (configs) => {
   const rootContext = new import_core.Weaverse(configs);
   Object.keys(elements_default).forEach((key) => {
-    var _a, _b;
-    ((_b = (_a = elements_default[key]) == null ? void 0 : _a.defaultProps) == null ? void 0 : _b.type) && rootContext.registerElement(elements_default[key].defaultProps.type, elements_default[key]);
+    rootContext.registerElement(elements_default[key]);
   });
   return rootContext;
 };
-var WeaverseRoot = ({ context, defaultData }) => {
+var WeaverseRoot = ({
+  context,
+  defaultData
+}) => {
   var _a, _b, _c;
-  let [, setData] = React5.useState(context.projectData);
-  React5.useEffect(() => {
+  let [, setData] = React4.useState(context.projectData);
+  React4.useEffect(() => {
     let handleUpdate = () => {
       setData(__spreadValues({}, context.projectData));
     };
@@ -169,45 +204,48 @@ var WeaverseRoot = ({ context, defaultData }) => {
     context.initProjectItemData();
   }
   let handleProps = ((_c = context == null ? void 0 : context.studioBridge) == null ? void 0 : _c.handleProps) || {};
-  return /* @__PURE__ */ React5.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React4.createElement("div", __spreadValues({
     className: `weaverse-root`,
     id: "weaverse-root"
-  }, handleProps), /* @__PURE__ */ React5.createElement(RenderItem, {
+  }, handleProps), /* @__PURE__ */ React4.createElement(RenderItem, {
     itemId: context.projectData.rootId || 0,
     context
   }));
 };
 var Item = ({ itemInstance, elementInstances, context }) => {
-  let [data, setData] = React5.useState(itemInstance.data);
+  let [data, setData] = React4.useState(itemInstance.data);
   let _a = data, { id, type, childIds, css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     let handleUpdate = (update) => {
       setData(__spreadValues({}, update));
     };
     itemInstance.subscribe(handleUpdate);
-    if (!itemInstance.ref.current && import_core.isBrowser) {
-      Object.assign(itemInstance.ref, { current: document.querySelector(`[data-wv-id="${id}"]`) });
+    if (import_core.isBrowser && !itemInstance.ref.current) {
+      Object.assign(itemInstance.ref, {
+        current: document.querySelector(`[data-wv-id="${id}"]`)
+      });
     }
     return () => {
       itemInstance.unsubscribe(handleUpdate);
     };
   }, []);
-  let realClassName = className || "";
+  let realClassName = className;
   if (css) {
     let selector = context.stitchesInstance.css(css)().className;
-    realClassName += " " + selector;
+    realClassName = realClassName ? `${selector} ${realClassName}` : selector;
   }
-  let Component = elementInstances.get(type);
-  if (Component) {
+  let element = elementInstances.get(type) || elementInstances.get("base");
+  if (element == null ? void 0 : element.Component) {
+    let Component = element.Component;
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = itemInstance.ref;
     }
-    return /* @__PURE__ */ React5.createElement(Component, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React4.createElement(Component, __spreadProps(__spreadValues({
       key: id,
       "data-wv-id": id
     }, rest), {
       className: realClassName
-    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React5.createElement(RenderItem, {
+    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React4.createElement(RenderItem, {
       key: childId,
       itemId: childId,
       context
@@ -215,19 +253,24 @@ var Item = ({ itemInstance, elementInstances, context }) => {
   }
   return null;
 };
-var RenderItem = ({ itemId, context }) => {
+var RenderItem = ({
+  itemId,
+  context
+}) => {
   let { itemInstances, elementInstances } = context;
   let itemInstance = itemInstances.get(itemId);
   if (itemInstance) {
-    return /* @__PURE__ */ React5.createElement(Item, {
+    return /* @__PURE__ */ React4.createElement(Item, {
       itemInstance,
       elementInstances,
       context
     });
   }
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null);
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null);
 };
-module.exports = __toCommonJS(src_exports);
+
+// src/index.ts
+__reExport(src_exports, require("@weaverse/core"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   WeaverseRoot,

package/dist/index.mjs

@@ -30,99 +30,142 @@ var __objRest = (source, exclude) => {
   return target;
 };
 
-// src/renderer.tsx
-import * as React5 from "react";
-import { isBrowser, Weaverse } from "@weaverse/core";
-
-// src/elements/button.tsx
-import * as React from "react";
-var Button = React.forwardRef((props, ref) => {
-  let [count, setCount] = React.useState(0);
-  return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({
-    ref
-  }, props), {
-    onClick: () => setCount(count + 1)
-  }), "Test Button ", count);
-});
-Button.defaultProps = {
-  style: {
-    borderRadius: "9999px",
-    fontSize: "13px",
-    padding: "10px 15px"
-  },
-  type: "button",
-  tag: "button"
-};
-var button_default = Button;
-
 // src/elements/base.tsx
-import React2 from "react";
-var BaseElement = React2.forwardRef((_a, ref) => {
+import React from "react";
+var BaseElement = React.forwardRef((_a, ref) => {
   var _b = _a, { tag, children } = _b, props = __objRest(_b, ["tag", "children"]);
-  return React2.createElement(tag, __spreadValues({
+  return React.createElement(tag, __spreadValues({
     ref
   }, props), children);
 });
 BaseElement.defaultProps = {
-  type: "base",
   tag: "div",
   style: {}
 };
+var schema = {
+  type: "base"
+};
 var base_default = BaseElement;
 
-// src/elements/grid.tsx
-import React3 from "react";
-function Grid(props) {
-  return /* @__PURE__ */ React3.createElement("div", __spreadValues({}, props));
-}
-Grid.defaultProps = {
+// src/elements/button.tsx
+import * as React2 from "react";
+var Button = React2.forwardRef((props, ref) => {
+  return /* @__PURE__ */ React2.createElement("button", __spreadValues({
+    ref
+  }, props), props.value);
+});
+Button.defaultProps = {
+  value: "Click me",
   style: {
-    display: "grid",
-    gridTemplate: "1fr / 1fr"
-  },
-  type: "grid"
+    borderRadius: "9999px",
+    fontSize: "13px",
+    padding: "10px 15px"
+  }
 };
+var schema2 = {
+  title: "Button",
+  type: "button",
+  settings: [
+    {
+      tab: "Settings",
+      label: "Group 1",
+      inspectors: [
+        {
+          binding: "data",
+          key: "value",
+          componentType: "textarea"
+        },
+        {
+          binding: "style",
+          key: "backgroundColor",
+          componentType: "color"
+        }
+      ]
+    },
+    {
+      tab: "Settings",
+      label: "Group 2",
+      inspectors: [
+        {
+          binding: "style",
+          key: "color",
+          componentType: "color"
+        }
+      ]
+    }
+  ]
+};
+var button_default = Button;
 
 // src/elements/text.tsx
-import * as React4 from "react";
-var Text = React4.forwardRef((props, ref) => {
-  let _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
-  return /* @__PURE__ */ React4.createElement("span", __spreadProps(__spreadValues({
+import * as React3 from "react";
+var Text = React3.forwardRef((props, ref) => {
+  let _a = props, { children, value } = _a, rest = __objRest(_a, ["children", "value"]);
+  return /* @__PURE__ */ React3.createElement("span", __spreadProps(__spreadValues({
     ref
   }, rest), {
     contentEditable: true,
-    dangerouslySetInnerHTML: { __html: "123123" }
+    dangerouslySetInnerHTML: { __html: value }
   }));
 });
 Text.defaultProps = {
-  style: {},
-  type: "text",
+  value: "sample text",
   tag: "span"
 };
+var schema3 = {
+  type: "text",
+  inspectors: [
+    {
+      binding: "data",
+      key: "value",
+      componentType: "textarea"
+    },
+    {
+      binding: "style",
+      key: "color",
+      componentType: "color"
+    }
+  ]
+};
 var text_default = Text;
 
 // src/elements/index.ts
 var elements = {
-  Button: button_default,
-  BaseElement: base_default,
-  Grid,
-  Text: text_default
+  Button: {
+    Component: button_default,
+    schema: schema2
+  },
+  BaseElement: {
+    Component: base_default,
+    schema
+  },
+  Text: {
+    Component: text_default,
+    schema: schema3
+  }
 };
 var elements_default = elements;
 
 // src/renderer.tsx
+import {
+  isBrowser,
+  Weaverse
+} from "@weaverse/core";
+import * as React4 from "react";
 var createRootContext = (configs) => {
   const rootContext = new Weaverse(configs);
   Object.keys(elements_default).forEach((key) => {
-    var _a, _b;
-    ((_b = (_a = elements_default[key]) == null ? void 0 : _a.defaultProps) == null ? void 0 : _b.type) && rootContext.registerElement(elements_default[key].defaultProps.type, elements_default[key]);
+    rootContext.registerElement(elements_default[key]);
   });
   return rootContext;
 };
-var WeaverseRoot = ({ context, defaultData }) => {
+var WeaverseRoot = ({
+  context,
+  defaultData
+}) => {
   var _a, _b, _c;
-  let [, setData] = React5.useState(context.projectData);
-  React5.useEffect(() => {
+  let [, setData] = React4.useState(context.projectData);
+  React4.useEffect(() => {
     let handleUpdate = () => {
       setData(__spreadValues({}, context.projectData));
     };
@@ -137,45 +180,48 @@ var WeaverseRoot = ({ context, defaultData }) => {
     context.initProjectItemData();
   }
   let handleProps = ((_c = context == null ? void 0 : context.studioBridge) == null ? void 0 : _c.handleProps) || {};
-  return /* @__PURE__ */ React5.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React4.createElement("div", __spreadValues({
     className: `weaverse-root`,
     id: "weaverse-root"
-  }, handleProps), /* @__PURE__ */ React5.createElement(RenderItem, {
+  }, handleProps), /* @__PURE__ */ React4.createElement(RenderItem, {
     itemId: context.projectData.rootId || 0,
     context
   }));
 };
 var Item = ({ itemInstance, elementInstances, context }) => {
-  let [data, setData] = React5.useState(itemInstance.data);
+  let [data, setData] = React4.useState(itemInstance.data);
   let _a = data, { id, type, childIds, css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     let handleUpdate = (update) => {
       setData(__spreadValues({}, update));
     };
     itemInstance.subscribe(handleUpdate);
-    if (!itemInstance.ref.current && isBrowser) {
-      Object.assign(itemInstance.ref, { current: document.querySelector(`[data-wv-id="${id}"]`) });
+    if (isBrowser && !itemInstance.ref.current) {
+      Object.assign(itemInstance.ref, {
+        current: document.querySelector(`[data-wv-id="${id}"]`)
+      });
     }
     return () => {
       itemInstance.unsubscribe(handleUpdate);
     };
   }, []);
-  let realClassName = className || "";
+  let realClassName = className;
   if (css) {
     let selector = context.stitchesInstance.css(css)().className;
-    realClassName += " " + selector;
+    realClassName = realClassName ? `${selector} ${realClassName}` : selector;
   }
-  let Component = elementInstances.get(type);
-  if (Component) {
+  let element = elementInstances.get(type) || elementInstances.get("base");
+  if (element == null ? void 0 : element.Component) {
+    let Component = element.Component;
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = itemInstance.ref;
     }
-    return /* @__PURE__ */ React5.createElement(Component, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React4.createElement(Component, __spreadProps(__spreadValues({
       key: id,
       "data-wv-id": id
     }, rest), {
       className: realClassName
-    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React5.createElement(RenderItem, {
+    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React4.createElement(RenderItem, {
       key: childId,
       itemId: childId,
       context
@@ -183,18 +229,24 @@ var Item = ({ itemInstance, elementInstances, context }) => {
   }
   return null;
 };
-var RenderItem = ({ itemId, context }) => {
+var RenderItem = ({
+  itemId,
+  context
+}) => {
   let { itemInstances, elementInstances } = context;
   let itemInstance = itemInstances.get(itemId);
   if (itemInstance) {
-    return /* @__PURE__ */ React5.createElement(Item, {
+    return /* @__PURE__ */ React4.createElement(Item, {
       itemInstance,
       elementInstances,
       context
     });
   }
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null);
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null);
 };
+
+// src/index.ts
+export * from "@weaverse/core";
 export {
   WeaverseRoot,
   createRootContext

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.4",
+  "version": "0.3.7",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -25,13 +25,12 @@
   },
   "prettier": {
     "printWidth": 80,
-    "semi": true,
-    "singleQuote": true,
-    "trailingComma": "es5"
+    "semi": false,
+    "singleQuote": true
   },
   "name": "@weaverse/react",
   "author": "Weaverse Team",
   "dependencies": {
-    "@weaverse/core": "^0.3.3"
+    "@weaverse/core": "^0.3.6"
   }
 }