@weaverse/react 0.3.2 → 0.3.5

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,30 +66,63 @@ 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) => {
+  let [count, setCount] = React2.useState(0);
+  return /* @__PURE__ */ React2.createElement("button", __spreadProps(__spreadValues({
+    ref
+  }, props), {
+    onClick: () => setCount(count + 1)
+  }), "Test Button ", count);
+});
+Button.defaultProps = {
   style: {
-    display: "grid",
-    gridTemplate: "1fr / 1fr"
-  },
-  type: "grid"
+    borderRadius: "9999px",
+    fontSize: "13px",
+    padding: "10px 15px"
+  }
 };
+var schema2 = {
+  title: "Button",
+  type: "button",
+  properties: {
+    label: {
+      type: "string",
+      title: "Label",
+      default: "Button"
+    },
+    onClick: {
+      type: "string",
+      title: "On Click",
+      default: "() => {}"
+    },
+    style: {
+      type: "object",
+      title: "Style",
+      default: {
+        borderRadius: "9999px",
+        fontSize: "13px",
+        padding: "10px 15px"
+      }
+    }
+  }
+};
+var button_default = Button;
 
 // src/elements/text.tsx
-var React4 = __toESM(require("react"));
-var Text = React4.forwardRef((props, ref) => {
+var React3 = __toESM(require("react"));
+var Text = React3.forwardRef((props, ref) => {
   let _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
-  return /* @__PURE__ */ React4.createElement("span", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React3.createElement("span", __spreadProps(__spreadValues({
     ref
   }, rest), {
     contentEditable: true,
@@ -128,33 +131,47 @@ var Text = React4.forwardRef((props, ref) => {
 });
 Text.defaultProps = {
   style: {},
-  type: "text",
   tag: "span"
 };
+var schema3 = {
+  type: "text"
+};
 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 +186,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 +235,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,15 +30,28 @@ var __objRest = (source, exclude) => {
   return target;
 };
 
-// src/renderer.tsx
-import * as React5 from "react";
-import { isBrowser, Weaverse } from "@weaverse/core";
+// src/elements/base.tsx
+import React from "react";
+var BaseElement = React.forwardRef((_a, ref) => {
+  var _b = _a, { tag, children } = _b, props = __objRest(_b, ["tag", "children"]);
+  return React.createElement(tag, __spreadValues({
+    ref
+  }, props), children);
+});
+BaseElement.defaultProps = {
+  tag: "div",
+  style: {}
+};
+var schema = {
+  type: "base"
+};
+var base_default = BaseElement;
 
 // 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({
+import * as React2 from "react";
+var Button = React2.forwardRef((props, ref) => {
+  let [count, setCount] = React2.useState(0);
+  return /* @__PURE__ */ React2.createElement("button", __spreadProps(__spreadValues({
     ref
   }, props), {
     onClick: () => setCount(count + 1)
@@ -49,45 +62,40 @@ Button.defaultProps = {
     borderRadius: "9999px",
     fontSize: "13px",
     padding: "10px 15px"
-  },
+  }
+};
+var schema2 = {
+  title: "Button",
   type: "button",
-  tag: "button"
+  properties: {
+    label: {
+      type: "string",
+      title: "Label",
+      default: "Button"
+    },
+    onClick: {
+      type: "string",
+      title: "On Click",
+      default: "() => {}"
+    },
+    style: {
+      type: "object",
+      title: "Style",
+      default: {
+        borderRadius: "9999px",
+        fontSize: "13px",
+        padding: "10px 15px"
+      }
+    }
+  }
 };
 var button_default = Button;
 
-// src/elements/base.tsx
-import React2 from "react";
-var BaseElement = React2.forwardRef((_a, ref) => {
-  var _b = _a, { tag, children } = _b, props = __objRest(_b, ["tag", "children"]);
-  return React2.createElement(tag, __spreadValues({
-    ref
-  }, props), children);
-});
-BaseElement.defaultProps = {
-  type: "base",
-  tag: "div",
-  style: {}
-};
-var base_default = BaseElement;
-
-// src/elements/grid.tsx
-import React3 from "react";
-function Grid(props) {
-  return /* @__PURE__ */ React3.createElement("div", __spreadValues({}, props));
-}
-Grid.defaultProps = {
-  style: {
-    display: "grid",
-    gridTemplate: "1fr / 1fr"
-  },
-  type: "grid"
-};
-
 // src/elements/text.tsx
-import * as React4 from "react";
-var Text = React4.forwardRef((props, ref) => {
+import * as React3 from "react";
+var Text = React3.forwardRef((props, ref) => {
   let _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
-  return /* @__PURE__ */ React4.createElement("span", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React3.createElement("span", __spreadProps(__spreadValues({
     ref
   }, rest), {
     contentEditable: true,
@@ -96,33 +104,50 @@ var Text = React4.forwardRef((props, ref) => {
 });
 Text.defaultProps = {
   style: {},
-  type: "text",
   tag: "span"
 };
+var schema3 = {
+  type: "text"
+};
 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 +162,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 +211,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.2",
+  "version": "0.3.5",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -16,7 +16,8 @@
   "scripts": {
     "start": "npm run dev",
     "dev": "tsup src/index.ts --format esm,cjs --dts --outDir dist --watch --external react",
-    "build": "tsup src/index.ts --format esm,cjs --dts --outDir dist --external react"
+    "build": "tsup src/index.ts --format esm,cjs --dts --outDir dist --external react",
+    "prepublish": "npm run build"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -24,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.1"
+    "@weaverse/core": "^0.3.4"
   }
 }