@weaverse/react 0.1.10 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -1
- package/dist/index.d.ts +9 -1
- package/dist/index.js +212 -5
- package/dist/index.mjs +181 -0
- package/package.json +7 -37
- package/dist/elements/base.d.ts +0 -3
- package/dist/elements/button.d.ts +0 -3
- package/dist/elements/grid.d.ts +0 -12
- package/dist/elements/index.d.ts +0 -8
- package/dist/renderer.d.ts +0 -7
- package/dist/sdk-react.cjs.development.js +0 -118
- package/dist/sdk-react.cjs.development.js.map +0 -1
- package/dist/sdk-react.cjs.production.min.js +0 -2
- package/dist/sdk-react.cjs.production.min.js.map +0 -1
- package/dist/sdk-react.esm.js +0 -110
- package/dist/sdk-react.esm.js.map +0 -1
package/README.md
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
TODO: update readme
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
import { WeaverseType, Weaverse } from '@weaverse/core';
|
|
2
|
+
|
|
3
|
+
declare const createRootContext: (configs: WeaverseType) => Weaverse;
|
|
4
|
+
declare const WeaverseRoot: ({ context, defaultData }: {
|
|
5
|
+
context: Weaverse;
|
|
6
|
+
defaultData: any;
|
|
7
|
+
}) => JSX.Element;
|
|
8
|
+
|
|
9
|
+
export { WeaverseRoot, createRootContext };
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,215 @@
|
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __defProps = Object.defineProperties;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
11
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
12
|
+
var __spreadValues = (a, b) => {
|
|
13
|
+
for (var prop in b || (b = {}))
|
|
14
|
+
if (__hasOwnProp.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
if (__getOwnPropSymbols)
|
|
17
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
18
|
+
if (__propIsEnum.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
}
|
|
21
|
+
return a;
|
|
22
|
+
};
|
|
23
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
24
|
+
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
|
|
25
|
+
var __objRest = (source, exclude) => {
|
|
26
|
+
var target = {};
|
|
27
|
+
for (var prop in source)
|
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
37
|
+
var __export = (target, all) => {
|
|
38
|
+
for (var name in all)
|
|
39
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
40
|
+
};
|
|
41
|
+
var __reExport = (target, module2, copyDefault, desc) => {
|
|
42
|
+
if (module2 && typeof module2 === "object" || typeof module2 === "function") {
|
|
43
|
+
for (let key of __getOwnPropNames(module2))
|
|
44
|
+
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
45
|
+
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
46
|
+
}
|
|
47
|
+
return target;
|
|
48
|
+
};
|
|
49
|
+
var __toESM = (module2, isNodeMode) => {
|
|
50
|
+
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
|
|
51
|
+
};
|
|
52
|
+
var __toCommonJS = /* @__PURE__ */ ((cache) => {
|
|
53
|
+
return (module2, temp) => {
|
|
54
|
+
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
55
|
+
};
|
|
56
|
+
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
1
57
|
|
|
2
|
-
|
|
58
|
+
// src/index.ts
|
|
59
|
+
var src_exports = {};
|
|
60
|
+
__export(src_exports, {
|
|
61
|
+
WeaverseRoot: () => WeaverseRoot,
|
|
62
|
+
createRootContext: () => createRootContext
|
|
63
|
+
});
|
|
3
64
|
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
65
|
+
// src/renderer.tsx
|
|
66
|
+
var React4 = __toESM(require("react"));
|
|
67
|
+
var import_core = require("@weaverse/core");
|
|
68
|
+
|
|
69
|
+
// src/elements/button.tsx
|
|
70
|
+
var React = __toESM(require("react"));
|
|
71
|
+
var Button = React.forwardRef((props, ref) => {
|
|
72
|
+
let [count, setCount] = React.useState(0);
|
|
73
|
+
return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({
|
|
74
|
+
ref
|
|
75
|
+
}, props), {
|
|
76
|
+
onClick: () => setCount(count + 1)
|
|
77
|
+
}), "Test Button ", count);
|
|
78
|
+
});
|
|
79
|
+
Button.defaultProps = {
|
|
80
|
+
style: {
|
|
81
|
+
backgroundColor: "green",
|
|
82
|
+
borderRadius: "9999px",
|
|
83
|
+
fontSize: "13px",
|
|
84
|
+
padding: "10px 15px"
|
|
85
|
+
},
|
|
86
|
+
type: "button",
|
|
87
|
+
tag: "button"
|
|
88
|
+
};
|
|
89
|
+
var button_default = Button;
|
|
90
|
+
|
|
91
|
+
// src/elements/base.tsx
|
|
92
|
+
var import_react = __toESM(require("react"));
|
|
93
|
+
var BaseElement = import_react.default.forwardRef((_a, ref) => {
|
|
94
|
+
var _b = _a, { tag, children } = _b, props = __objRest(_b, ["tag", "children"]);
|
|
95
|
+
return import_react.default.createElement(tag, __spreadValues({
|
|
96
|
+
ref
|
|
97
|
+
}, props), children);
|
|
98
|
+
});
|
|
99
|
+
BaseElement.defaultProps = {
|
|
100
|
+
type: "base",
|
|
101
|
+
tag: "div",
|
|
102
|
+
style: {}
|
|
103
|
+
};
|
|
104
|
+
var base_default = BaseElement;
|
|
105
|
+
|
|
106
|
+
// src/elements/grid.tsx
|
|
107
|
+
var import_react2 = __toESM(require("react"));
|
|
108
|
+
function Grid(props) {
|
|
109
|
+
return /* @__PURE__ */ import_react2.default.createElement("div", __spreadValues({}, props));
|
|
8
110
|
}
|
|
111
|
+
Grid.defaultProps = {
|
|
112
|
+
style: {
|
|
113
|
+
display: "grid",
|
|
114
|
+
gridTemplate: "1fr / 1fr"
|
|
115
|
+
},
|
|
116
|
+
type: "grid"
|
|
117
|
+
};
|
|
118
|
+
|
|
119
|
+
// src/elements/index.ts
|
|
120
|
+
var elements = {
|
|
121
|
+
Button: button_default,
|
|
122
|
+
BaseElement: base_default,
|
|
123
|
+
Grid
|
|
124
|
+
};
|
|
125
|
+
var elements_default = elements;
|
|
126
|
+
|
|
127
|
+
// src/renderer.tsx
|
|
128
|
+
var createRootContext = (configs) => {
|
|
129
|
+
const rootContext = new import_core.Weaverse(configs);
|
|
130
|
+
Object.keys(elements_default).forEach((key) => {
|
|
131
|
+
var _a, _b;
|
|
132
|
+
((_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]);
|
|
133
|
+
});
|
|
134
|
+
return rootContext;
|
|
135
|
+
};
|
|
136
|
+
var WeaverseRoot = ({ context, defaultData }) => {
|
|
137
|
+
var _a, _b, _c;
|
|
138
|
+
let [, setData] = React4.useState(context.projectData);
|
|
139
|
+
React4.useEffect(() => {
|
|
140
|
+
let handleUpdate = () => {
|
|
141
|
+
setData(__spreadValues({}, context.projectData));
|
|
142
|
+
};
|
|
143
|
+
context.subscribe(handleUpdate);
|
|
144
|
+
context.updateProjectData();
|
|
145
|
+
return () => {
|
|
146
|
+
context.unsubscribe(handleUpdate);
|
|
147
|
+
};
|
|
148
|
+
}, []);
|
|
149
|
+
if (!((_b = (_a = context.projectData) == null ? void 0 : _a.items) == null ? void 0 : _b.length) && defaultData) {
|
|
150
|
+
context.projectData = defaultData;
|
|
151
|
+
context.initItemData();
|
|
152
|
+
}
|
|
153
|
+
let handleProps = ((_c = context == null ? void 0 : context.studioBridge) == null ? void 0 : _c.handleProps) || {};
|
|
154
|
+
console.log("handleProps", handleProps);
|
|
155
|
+
return /* @__PURE__ */ React4.createElement("div", __spreadValues({}, handleProps), /* @__PURE__ */ React4.createElement(RenderItem, {
|
|
156
|
+
itemId: 0,
|
|
157
|
+
context
|
|
158
|
+
}));
|
|
159
|
+
};
|
|
160
|
+
var Item = ({ itemInstance, elementInstances, context }) => {
|
|
161
|
+
let [data, setData] = React4.useState(itemInstance.data);
|
|
162
|
+
let _a = data, { id, type, childIds, css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
|
|
163
|
+
React4.useEffect(() => {
|
|
164
|
+
let handleUpdate = (update) => {
|
|
165
|
+
setData(__spreadValues({}, update));
|
|
166
|
+
};
|
|
167
|
+
itemInstance.subscribe(handleUpdate);
|
|
168
|
+
if (!itemInstance.ref.current && import_core.isBrowser) {
|
|
169
|
+
Object.assign(itemInstance.ref, { current: document.querySelector(`[data-wv-id="${id}"]`) });
|
|
170
|
+
}
|
|
171
|
+
return () => {
|
|
172
|
+
itemInstance.unsubscribe(handleUpdate);
|
|
173
|
+
};
|
|
174
|
+
}, []);
|
|
175
|
+
let realClassName = className || "";
|
|
176
|
+
if (css) {
|
|
177
|
+
let selector = context.stitchesInstance.css(css)().className;
|
|
178
|
+
realClassName += " " + selector;
|
|
179
|
+
}
|
|
180
|
+
let Component = elementInstances.get(type);
|
|
181
|
+
if (Component) {
|
|
182
|
+
if (Component.$$typeof === Symbol.for("react.forward_ref")) {
|
|
183
|
+
rest.ref = itemInstance.ref;
|
|
184
|
+
}
|
|
185
|
+
return /* @__PURE__ */ React4.createElement(Component, __spreadProps(__spreadValues({
|
|
186
|
+
key: id,
|
|
187
|
+
"data-wv-id": id
|
|
188
|
+
}, rest), {
|
|
189
|
+
className: realClassName
|
|
190
|
+
}), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React4.createElement(RenderItem, {
|
|
191
|
+
key: childId,
|
|
192
|
+
itemId: childId,
|
|
193
|
+
context
|
|
194
|
+
})));
|
|
195
|
+
}
|
|
196
|
+
return null;
|
|
197
|
+
};
|
|
198
|
+
var RenderItem = ({ itemId, context }) => {
|
|
199
|
+
let { itemInstances, elementInstances } = context;
|
|
200
|
+
let itemInstance = itemInstances.get(itemId);
|
|
201
|
+
if (itemInstance) {
|
|
202
|
+
return /* @__PURE__ */ React4.createElement(Item, {
|
|
203
|
+
itemInstance,
|
|
204
|
+
elementInstances,
|
|
205
|
+
context
|
|
206
|
+
});
|
|
207
|
+
}
|
|
208
|
+
return /* @__PURE__ */ React4.createElement(React4.Fragment, null);
|
|
209
|
+
};
|
|
210
|
+
module.exports = __toCommonJS(src_exports);
|
|
211
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
212
|
+
0 && (module.exports = {
|
|
213
|
+
WeaverseRoot,
|
|
214
|
+
createRootContext
|
|
215
|
+
});
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __defProps = Object.defineProperties;
|
|
3
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
+
var __spreadValues = (a, b) => {
|
|
9
|
+
for (var prop in b || (b = {}))
|
|
10
|
+
if (__hasOwnProp.call(b, prop))
|
|
11
|
+
__defNormalProp(a, prop, b[prop]);
|
|
12
|
+
if (__getOwnPropSymbols)
|
|
13
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
+
if (__propIsEnum.call(b, prop))
|
|
15
|
+
__defNormalProp(a, prop, b[prop]);
|
|
16
|
+
}
|
|
17
|
+
return a;
|
|
18
|
+
};
|
|
19
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
+
var __objRest = (source, exclude) => {
|
|
21
|
+
var target = {};
|
|
22
|
+
for (var prop in source)
|
|
23
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
24
|
+
target[prop] = source[prop];
|
|
25
|
+
if (source != null && __getOwnPropSymbols)
|
|
26
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
27
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
28
|
+
target[prop] = source[prop];
|
|
29
|
+
}
|
|
30
|
+
return target;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
// src/renderer.tsx
|
|
34
|
+
import * as React4 from "react";
|
|
35
|
+
import { isBrowser, Weaverse } from "@weaverse/core";
|
|
36
|
+
|
|
37
|
+
// src/elements/button.tsx
|
|
38
|
+
import * as React from "react";
|
|
39
|
+
var Button = React.forwardRef((props, ref) => {
|
|
40
|
+
let [count, setCount] = React.useState(0);
|
|
41
|
+
return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({
|
|
42
|
+
ref
|
|
43
|
+
}, props), {
|
|
44
|
+
onClick: () => setCount(count + 1)
|
|
45
|
+
}), "Test Button ", count);
|
|
46
|
+
});
|
|
47
|
+
Button.defaultProps = {
|
|
48
|
+
style: {
|
|
49
|
+
backgroundColor: "green",
|
|
50
|
+
borderRadius: "9999px",
|
|
51
|
+
fontSize: "13px",
|
|
52
|
+
padding: "10px 15px"
|
|
53
|
+
},
|
|
54
|
+
type: "button",
|
|
55
|
+
tag: "button"
|
|
56
|
+
};
|
|
57
|
+
var button_default = Button;
|
|
58
|
+
|
|
59
|
+
// src/elements/base.tsx
|
|
60
|
+
import React2 from "react";
|
|
61
|
+
var BaseElement = React2.forwardRef((_a, ref) => {
|
|
62
|
+
var _b = _a, { tag, children } = _b, props = __objRest(_b, ["tag", "children"]);
|
|
63
|
+
return React2.createElement(tag, __spreadValues({
|
|
64
|
+
ref
|
|
65
|
+
}, props), children);
|
|
66
|
+
});
|
|
67
|
+
BaseElement.defaultProps = {
|
|
68
|
+
type: "base",
|
|
69
|
+
tag: "div",
|
|
70
|
+
style: {}
|
|
71
|
+
};
|
|
72
|
+
var base_default = BaseElement;
|
|
73
|
+
|
|
74
|
+
// src/elements/grid.tsx
|
|
75
|
+
import React3 from "react";
|
|
76
|
+
function Grid(props) {
|
|
77
|
+
return /* @__PURE__ */ React3.createElement("div", __spreadValues({}, props));
|
|
78
|
+
}
|
|
79
|
+
Grid.defaultProps = {
|
|
80
|
+
style: {
|
|
81
|
+
display: "grid",
|
|
82
|
+
gridTemplate: "1fr / 1fr"
|
|
83
|
+
},
|
|
84
|
+
type: "grid"
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
// src/elements/index.ts
|
|
88
|
+
var elements = {
|
|
89
|
+
Button: button_default,
|
|
90
|
+
BaseElement: base_default,
|
|
91
|
+
Grid
|
|
92
|
+
};
|
|
93
|
+
var elements_default = elements;
|
|
94
|
+
|
|
95
|
+
// src/renderer.tsx
|
|
96
|
+
var createRootContext = (configs) => {
|
|
97
|
+
const rootContext = new Weaverse(configs);
|
|
98
|
+
Object.keys(elements_default).forEach((key) => {
|
|
99
|
+
var _a, _b;
|
|
100
|
+
((_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]);
|
|
101
|
+
});
|
|
102
|
+
return rootContext;
|
|
103
|
+
};
|
|
104
|
+
var WeaverseRoot = ({ context, defaultData }) => {
|
|
105
|
+
var _a, _b, _c;
|
|
106
|
+
let [, setData] = React4.useState(context.projectData);
|
|
107
|
+
React4.useEffect(() => {
|
|
108
|
+
let handleUpdate = () => {
|
|
109
|
+
setData(__spreadValues({}, context.projectData));
|
|
110
|
+
};
|
|
111
|
+
context.subscribe(handleUpdate);
|
|
112
|
+
context.updateProjectData();
|
|
113
|
+
return () => {
|
|
114
|
+
context.unsubscribe(handleUpdate);
|
|
115
|
+
};
|
|
116
|
+
}, []);
|
|
117
|
+
if (!((_b = (_a = context.projectData) == null ? void 0 : _a.items) == null ? void 0 : _b.length) && defaultData) {
|
|
118
|
+
context.projectData = defaultData;
|
|
119
|
+
context.initItemData();
|
|
120
|
+
}
|
|
121
|
+
let handleProps = ((_c = context == null ? void 0 : context.studioBridge) == null ? void 0 : _c.handleProps) || {};
|
|
122
|
+
console.log("handleProps", handleProps);
|
|
123
|
+
return /* @__PURE__ */ React4.createElement("div", __spreadValues({}, handleProps), /* @__PURE__ */ React4.createElement(RenderItem, {
|
|
124
|
+
itemId: 0,
|
|
125
|
+
context
|
|
126
|
+
}));
|
|
127
|
+
};
|
|
128
|
+
var Item = ({ itemInstance, elementInstances, context }) => {
|
|
129
|
+
let [data, setData] = React4.useState(itemInstance.data);
|
|
130
|
+
let _a = data, { id, type, childIds, css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
|
|
131
|
+
React4.useEffect(() => {
|
|
132
|
+
let handleUpdate = (update) => {
|
|
133
|
+
setData(__spreadValues({}, update));
|
|
134
|
+
};
|
|
135
|
+
itemInstance.subscribe(handleUpdate);
|
|
136
|
+
if (!itemInstance.ref.current && isBrowser) {
|
|
137
|
+
Object.assign(itemInstance.ref, { current: document.querySelector(`[data-wv-id="${id}"]`) });
|
|
138
|
+
}
|
|
139
|
+
return () => {
|
|
140
|
+
itemInstance.unsubscribe(handleUpdate);
|
|
141
|
+
};
|
|
142
|
+
}, []);
|
|
143
|
+
let realClassName = className || "";
|
|
144
|
+
if (css) {
|
|
145
|
+
let selector = context.stitchesInstance.css(css)().className;
|
|
146
|
+
realClassName += " " + selector;
|
|
147
|
+
}
|
|
148
|
+
let Component = elementInstances.get(type);
|
|
149
|
+
if (Component) {
|
|
150
|
+
if (Component.$$typeof === Symbol.for("react.forward_ref")) {
|
|
151
|
+
rest.ref = itemInstance.ref;
|
|
152
|
+
}
|
|
153
|
+
return /* @__PURE__ */ React4.createElement(Component, __spreadProps(__spreadValues({
|
|
154
|
+
key: id,
|
|
155
|
+
"data-wv-id": id
|
|
156
|
+
}, rest), {
|
|
157
|
+
className: realClassName
|
|
158
|
+
}), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React4.createElement(RenderItem, {
|
|
159
|
+
key: childId,
|
|
160
|
+
itemId: childId,
|
|
161
|
+
context
|
|
162
|
+
})));
|
|
163
|
+
}
|
|
164
|
+
return null;
|
|
165
|
+
};
|
|
166
|
+
var RenderItem = ({ itemId, context }) => {
|
|
167
|
+
let { itemInstances, elementInstances } = context;
|
|
168
|
+
let itemInstance = itemInstances.get(itemId);
|
|
169
|
+
if (itemInstance) {
|
|
170
|
+
return /* @__PURE__ */ React4.createElement(Item, {
|
|
171
|
+
itemInstance,
|
|
172
|
+
elementInstances,
|
|
173
|
+
context
|
|
174
|
+
});
|
|
175
|
+
}
|
|
176
|
+
return /* @__PURE__ */ React4.createElement(React4.Fragment, null);
|
|
177
|
+
};
|
|
178
|
+
export {
|
|
179
|
+
WeaverseRoot,
|
|
180
|
+
createRootContext
|
|
181
|
+
};
|
package/package.json
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "0.1
|
|
2
|
+
"version": "0.3.1",
|
|
3
3
|
"license": "MIT",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"typings": "dist/index.d.ts",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
6
7
|
"publishConfig": {
|
|
7
8
|
"access": "public"
|
|
8
9
|
},
|
|
10
|
+
"type": "commonjs",
|
|
9
11
|
"files": [
|
|
10
12
|
"dist"
|
|
11
13
|
],
|
|
@@ -13,24 +15,14 @@
|
|
|
13
15
|
"node": ">=10"
|
|
14
16
|
},
|
|
15
17
|
"scripts": {
|
|
16
|
-
"start": "
|
|
17
|
-
"dev": "
|
|
18
|
-
"build": "
|
|
19
|
-
"test": "tsdx test --passWithNoTests",
|
|
20
|
-
"lint": "tsdx lint",
|
|
21
|
-
"prepare": "tsdx build --name sdk-react",
|
|
22
|
-
"size": "size-limit",
|
|
23
|
-
"analyze": "size-limit --why"
|
|
18
|
+
"start": "npm run dev",
|
|
19
|
+
"dev": "tsup src/index.ts --format esm,cjs --dts --outDir dist --watch --external react",
|
|
20
|
+
"build": "tsup src/index.ts --format esm,cjs --dts --outDir dist --external react"
|
|
24
21
|
},
|
|
25
22
|
"peerDependencies": {
|
|
26
23
|
"react": ">=17",
|
|
27
24
|
"react-dom": ">=17"
|
|
28
25
|
},
|
|
29
|
-
"husky": {
|
|
30
|
-
"hooks": {
|
|
31
|
-
"pre-commit": "tsdx lint"
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
26
|
"prettier": {
|
|
35
27
|
"printWidth": 80,
|
|
36
28
|
"semi": true,
|
|
@@ -39,29 +31,7 @@
|
|
|
39
31
|
},
|
|
40
32
|
"name": "@weaverse/react",
|
|
41
33
|
"author": "Weaverse Team",
|
|
42
|
-
"module": "dist/sdk-react.esm.js",
|
|
43
|
-
"size-limit": [
|
|
44
|
-
{
|
|
45
|
-
"path": "dist/sdk-react.cjs.production.min.js",
|
|
46
|
-
"limit": "10 KB"
|
|
47
|
-
},
|
|
48
|
-
{
|
|
49
|
-
"path": "dist/sdk-react.esm.js",
|
|
50
|
-
"limit": "10 KB"
|
|
51
|
-
}
|
|
52
|
-
],
|
|
53
|
-
"devDependencies": {
|
|
54
|
-
"@size-limit/preset-small-lib": "^7.0.8",
|
|
55
|
-
"@types/react": "^17.0.39",
|
|
56
|
-
"@types/react-dom": "^17.0.11",
|
|
57
|
-
"@types/react-is": "^17.0.3",
|
|
58
|
-
"husky": "^7.0.4",
|
|
59
|
-
"size-limit": "^7.0.8",
|
|
60
|
-
"tsdx": "^0.14.1",
|
|
61
|
-
"tslib": "^2.3.1",
|
|
62
|
-
"typescript": "^4.5.5"
|
|
63
|
-
},
|
|
64
34
|
"dependencies": {
|
|
65
|
-
"@weaverse/core": "^0.
|
|
35
|
+
"@weaverse/core": "^0.3.1"
|
|
66
36
|
}
|
|
67
37
|
}
|
package/dist/elements/base.d.ts
DELETED
package/dist/elements/grid.d.ts
DELETED
package/dist/elements/index.d.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import Grid from './grid';
|
|
3
|
-
declare const elements: {
|
|
4
|
-
Button: import("react").ForwardRefExoticComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<unknown>>;
|
|
5
|
-
BaseElement: import("react").ForwardRefExoticComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<unknown>>;
|
|
6
|
-
Grid: typeof Grid;
|
|
7
|
-
};
|
|
8
|
-
export default elements;
|
package/dist/renderer.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { Weaverse, WeaverseType } from '@weaverse/core';
|
|
3
|
-
export declare const createRootContext: (configs: WeaverseType) => Weaverse;
|
|
4
|
-
export declare const WeaverseRoot: ({ context, defaultData }: {
|
|
5
|
-
context: Weaverse;
|
|
6
|
-
defaultData: any;
|
|
7
|
-
}) => JSX.Element;
|
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
6
|
-
|
|
7
|
-
var React = require('react');
|
|
8
|
-
var React__default = _interopDefault(React);
|
|
9
|
-
var core = require('@weaverse/core');
|
|
10
|
-
|
|
11
|
-
function _extends() {
|
|
12
|
-
_extends = Object.assign || function (target) {
|
|
13
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
14
|
-
var source = arguments[i];
|
|
15
|
-
|
|
16
|
-
for (var key in source) {
|
|
17
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
18
|
-
target[key] = source[key];
|
|
19
|
-
}
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
return target;
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
return _extends.apply(this, arguments);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
30
|
-
if (source == null) return {};
|
|
31
|
-
var target = {};
|
|
32
|
-
var sourceKeys = Object.keys(source);
|
|
33
|
-
var key, i;
|
|
34
|
-
|
|
35
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
|
36
|
-
key = sourceKeys[i];
|
|
37
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
38
|
-
target[key] = source[key];
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
return target;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
45
|
-
var _React$useState = React.useState(0),
|
|
46
|
-
count = _React$useState[0],
|
|
47
|
-
setCount = _React$useState[1];
|
|
48
|
-
|
|
49
|
-
return React.createElement("button", Object.assign({
|
|
50
|
-
ref: ref
|
|
51
|
-
}, props, {
|
|
52
|
-
onClick: function onClick() {
|
|
53
|
-
return setCount(count + 1);
|
|
54
|
-
}
|
|
55
|
-
}), "Test Button ", count);
|
|
56
|
-
});
|
|
57
|
-
Button.defaultProps = {
|
|
58
|
-
style: {
|
|
59
|
-
backgroundColor: 'green',
|
|
60
|
-
borderRadius: '9999px',
|
|
61
|
-
fontSize: '13px',
|
|
62
|
-
padding: '10px 15px'
|
|
63
|
-
},
|
|
64
|
-
type: 'button',
|
|
65
|
-
tag: 'button'
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
var _excluded = ["tag", "children"];
|
|
69
|
-
var BaseElement = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
70
|
-
var tag = _ref.tag,
|
|
71
|
-
children = _ref.children,
|
|
72
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
73
|
-
|
|
74
|
-
return React__default.createElement(tag, _extends({
|
|
75
|
-
ref: ref
|
|
76
|
-
}, props), children);
|
|
77
|
-
});
|
|
78
|
-
BaseElement.defaultProps = {
|
|
79
|
-
type: 'base',
|
|
80
|
-
tag: 'div',
|
|
81
|
-
style: {}
|
|
82
|
-
};
|
|
83
|
-
|
|
84
|
-
function Grid(props) {
|
|
85
|
-
return React__default.createElement("div", Object.assign({}, props));
|
|
86
|
-
}
|
|
87
|
-
Grid.defaultProps = {
|
|
88
|
-
style: {
|
|
89
|
-
display: 'grid',
|
|
90
|
-
gridTemplate: '1fr / 1fr'
|
|
91
|
-
},
|
|
92
|
-
type: 'grid'
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
var elements = {
|
|
96
|
-
Button: Button,
|
|
97
|
-
BaseElement: BaseElement,
|
|
98
|
-
Grid: Grid
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
var createRootContext = function createRootContext(configs) {
|
|
102
|
-
var rootContext = new core.Weaverse(configs); // Register the element components
|
|
103
|
-
|
|
104
|
-
Object.keys(elements).forEach(function (key) {
|
|
105
|
-
var _Elements$key, _Elements$key$default;
|
|
106
|
-
|
|
107
|
-
// @ts-ignore
|
|
108
|
-
((_Elements$key = elements[key]) == null ? void 0 : (_Elements$key$default = _Elements$key.defaultProps) == null ? void 0 : _Elements$key$default.type) && rootContext.registerElement(elements[key].defaultProps.type, elements[key]);
|
|
109
|
-
});
|
|
110
|
-
return rootContext;
|
|
111
|
-
};
|
|
112
|
-
var WeaverseRoot = function WeaverseRoot(_ref) {
|
|
113
|
-
return React.createElement("div", null, "hiii");
|
|
114
|
-
};
|
|
115
|
-
|
|
116
|
-
exports.WeaverseRoot = WeaverseRoot;
|
|
117
|
-
exports.createRootContext = createRootContext;
|
|
118
|
-
//# sourceMappingURL=sdk-react.cjs.development.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sdk-react.cjs.development.js","sources":["../src/elements/button.tsx","../src/elements/base.tsx","../src/elements/grid.tsx","../src/elements/index.ts","../src/renderer.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const Button = React.forwardRef((props: any, ref) => {\n let [count, setCount] = React.useState(0)\n return <button ref={ref} {...props} onClick={() => setCount(count + 1)}>Test Button {count}</button>\n})\n\nButton.defaultProps = {\n style: {\n backgroundColor: 'green',\n borderRadius: '9999px',\n fontSize: '13px',\n padding: '10px 15px'\n },\n type: 'button',\n tag: 'button'\n}\n\nexport default Button","import React from 'react'\n\nexport const BaseElement = React.forwardRef((({tag, children, ...props}: any, ref) => {\n return React.createElement(tag, {\n ref,\n ...props\n }, children)\n}))\n\nBaseElement.defaultProps = {\n type: 'base',\n tag: 'div',\n style: {}\n}\nexport default BaseElement\n","import React from 'react'\n\nexport default function Grid(props: any) {\n return <div {...props} />\n}\n\nGrid.defaultProps = {\n style: {\n display: 'grid',\n gridTemplate: '1fr / 1fr'\n },\n type: 'grid'\n}","import Button from './button'\nimport BaseElement from './base'\nimport Grid from './grid'\n\nconst elements = {\n Button,\n BaseElement,\n Grid\n}\nexport default elements","import * as React from 'react'\nimport {isBrowser, Weaverse, WeaverseItemStore, WeaverseType} from '@weaverse/core'\nimport Elements from './elements'\n\nexport const createRootContext = (configs: WeaverseType) => {\n const rootContext = new Weaverse(configs)\n // Register the element components\n Object.keys(Elements).forEach(key => {\n // @ts-ignore\n Elements[key]?.defaultProps?.type && rootContext.registerElement(Elements[key].defaultProps.type, Elements[key])\n })\n return rootContext\n}\n\nexport const WeaverseRoot = ({context, defaultData}: { context: Weaverse, defaultData: any }) => {\n return <div>hiii</div>\n let [, setData] = React.useState<any>(context.projectData)\n React.useEffect(() => {\n let handleUpdate = () => {\n setData({...context.projectData})\n }\n context.subscribe(handleUpdate)\n context.updateProjectData()\n return () => {\n context.unsubscribe(handleUpdate)\n }\n }, [])\n if (!context.projectData?.items?.length && defaultData) {\n context.projectData = defaultData\n context.initItemData()\n }\n let handleProps = context?.studioBridge?.handleProps || {}\n console.log('handleProps', handleProps)\n return <div {...handleProps}>\n <RenderItem itemId={0} context={context}/>\n </div>\n}\n\n\ntype ItemProps = {\n itemInstance: WeaverseItemStore\n elementInstances: Map<string, React.FC>\n context: Weaverse\n}\n\n\nconst Item = ({itemInstance, elementInstances, context}: ItemProps) => {\n let [data, setData] = React.useState<any>(itemInstance.data)\n let {id, type, childIds, css, className, ...rest} = data\n React.useEffect(() => {\n let handleUpdate = (update: any) => {\n setData({...update})\n }\n itemInstance.subscribe(handleUpdate)\n if (!itemInstance.ref.current && isBrowser) {\n Object.assign(itemInstance.ref, {current: document.querySelector(`[data-wv-id=\"${id}\"]`)})\n }\n\n return () => {\n itemInstance.unsubscribe(handleUpdate)\n }\n }, [])\n\n let realClassName = className || ''\n if (css) {\n\n // let stitches create the style from css object and\n // then return the classname, so we can use it in the render\n let selector = (context.stitchesInstance.css(css)()).className\n realClassName += ' ' + selector\n }\n let Component = elementInstances.get(type)\n if (Component) {\n // @ts-ignore\n if (Component.$$typeof === Symbol.for('react.forward_ref')) {\n rest.ref = itemInstance.ref\n }\n return <Component key={id} data-wv-id={id} {...rest} className={realClassName}>\n {Array.isArray(childIds)\n && childIds.map(childId =>\n <RenderItem\n key={childId}\n itemId={childId}\n context={context}\n />\n )}\n </Component>\n }\n return null\n}\n\nconst RenderItem = ({itemId, context}: { itemId: number, context: any }): any => {\n let {itemInstances, elementInstances} = context\n let itemInstance = itemInstances.get(itemId)\n if (itemInstance) {\n return <Item itemInstance={itemInstance} elementInstances={elementInstances} context={context}/>\n }\n return <></>\n}\n\n"],"names":["Button","React","props","ref","count","setCount","onClick","defaultProps","style","backgroundColor","borderRadius","fontSize","padding","type","tag","BaseElement","forwardRef","children","createElement","Grid","display","gridTemplate","elements","createRootContext","configs","rootContext","Weaverse","Object","keys","Elements","forEach","key","registerElement","WeaverseRoot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,MAAM,gBAAGC,gBAAA,CAAiB,UAACC,KAAD,EAAaC,GAAb;AACrC,wBAAwBF,cAAA,CAAe,CAAf,CAAxB;AAAA,MAAKG,KAAL;AAAA,MAAYC,QAAZ;;AACA,SAAOJ,mBAAA,SAAA;AAAQE,IAAAA,GAAG,EAAEA;KAASD;AAAOI,IAAAA,OAAO,EAAE;AAAA,aAAMD,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAd;AAAA;IAAtC,gBAAA,EAA8EA,KAA9E,CAAP;AACD,CAHqB,CAAf;AAKPJ,MAAM,CAACO,YAAP,GAAsB;AAClBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,eAAe,EAAE,OADd;AAEHC,IAAAA,YAAY,EAAE,QAFX;AAGHC,IAAAA,QAAQ,EAAE,MAHP;AAIHC,IAAAA,OAAO,EAAE;AAJN,GADW;AAOlBC,EAAAA,IAAI,EAAE,QAPY;AAQlBC,EAAAA,GAAG,EAAE;AARa,CAAtB;;;ACPA,AAEO,IAAMC,WAAW,gBAAGd,cAAK,CAACe,UAAN,CAAkB,gBAAiCb,GAAjC;MAAEW,WAAAA;MAAKG,gBAAAA;MAAaf;;AAC/D,SAAOD,cAAK,CAACiB,aAAN,CAAoBJ,GAApB;AACLX,IAAAA,GAAG,EAAHA;AADK,KAEFD,KAFE,GAGJe,QAHI,CAAP;AAID,CAL0B,CAApB;AAOPF,WAAW,CAACR,YAAZ,GAA2B;AACzBM,EAAAA,IAAI,EAAE,MADmB;AAEzBC,EAAAA,GAAG,EAAE,KAFoB;AAGzBN,EAAAA,KAAK,EAAE;AAHkB,CAA3B;;SCPwBW,KAAKjB;AAC3B,SAAOD,4BAAA,MAAA,oBAASC,MAAT,CAAP;AACD;AAEDiB,IAAI,CAACZ,YAAL,GAAoB;AAClBC,EAAAA,KAAK,EAAE;AACLY,IAAAA,OAAO,EAAE,MADJ;AAELC,IAAAA,YAAY,EAAE;AAFT,GADW;AAKlBR,EAAAA,IAAI,EAAE;AALY,CAApB;;ACFA,IAAMS,QAAQ,GAAG;AACftB,EAAAA,MAAM,EAANA,MADe;AAEfe,EAAAA,WAAW,EAAXA,WAFe;AAGfI,EAAAA,IAAI,EAAJA;AAHe,CAAjB;;ICAaI,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,OAAD;AAC/B,MAAMC,WAAW,GAAG,IAAIC,aAAJ,CAAaF,OAAb,CAApB;;AAEAG,EAAAA,MAAM,CAACC,IAAP,CAAYC,QAAZ,EAAsBC,OAAtB,CAA8B,UAAAC,GAAG;;;AAC/B;AACA,sBAAAF,QAAQ,CAACE,GAAD,CAAR,4DAAexB,YAAf,2CAA6BM,IAA7B,KAAqCY,WAAW,CAACO,eAAZ,CAA4BH,QAAQ,CAACE,GAAD,CAAR,CAAcxB,YAAd,CAA2BM,IAAvD,EAA6DgB,QAAQ,CAACE,GAAD,CAArE,CAArC;AACD,GAHD;AAIA,SAAON,WAAP;AACD,CARM;AAUP,IAAaQ,YAAY,GAAG,SAAfA,YAAe;AAC1B,SAAOhC,mBAAA,MAAA,MAAA,QAAA,CAAP;AAqBD,CAtBM;;;;;"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("@weaverse/core");function a(){return(a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}var o=t.forwardRef((function(e,r){var n=t.useState(0),a=n[0],o=n[1];return t.createElement("button",Object.assign({ref:r},e,{onClick:function(){return o(a+1)}}),"Test Button ",a)}));o.defaultProps={style:{backgroundColor:"green",borderRadius:"9999px",fontSize:"13px",padding:"10px 15px"},type:"button",tag:"button"};var u=["tag","children"],i=r.forwardRef((function(e,t){var n=e.tag,o=e.children,i=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)t.indexOf(r=o[n])>=0||(a[r]=e[r]);return a}(e,u);return r.createElement(n,a({ref:t},i),o)}));function l(e){return r.createElement("div",Object.assign({},e))}i.defaultProps={type:"base",tag:"div",style:{}},l.defaultProps={style:{display:"grid",gridTemplate:"1fr / 1fr"},type:"grid"};var f={Button:o,BaseElement:i,Grid:l};exports.WeaverseRoot=function(e){return t.createElement("div",null,"hiii")},exports.createRootContext=function(e){var t=new n.Weaverse(e);return Object.keys(f).forEach((function(e){var r,n;(null==(r=f[e])||null==(n=r.defaultProps)?void 0:n.type)&&t.registerElement(f[e].defaultProps.type,f[e])})),t};
|
|
2
|
-
//# sourceMappingURL=sdk-react.cjs.production.min.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sdk-react.cjs.production.min.js","sources":["../src/elements/button.tsx","../src/elements/base.tsx","../src/elements/grid.tsx","../src/elements/index.ts","../src/renderer.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const Button = React.forwardRef((props: any, ref) => {\n let [count, setCount] = React.useState(0)\n return <button ref={ref} {...props} onClick={() => setCount(count + 1)}>Test Button {count}</button>\n})\n\nButton.defaultProps = {\n style: {\n backgroundColor: 'green',\n borderRadius: '9999px',\n fontSize: '13px',\n padding: '10px 15px'\n },\n type: 'button',\n tag: 'button'\n}\n\nexport default Button","import React from 'react'\n\nexport const BaseElement = React.forwardRef((({tag, children, ...props}: any, ref) => {\n return React.createElement(tag, {\n ref,\n ...props\n }, children)\n}))\n\nBaseElement.defaultProps = {\n type: 'base',\n tag: 'div',\n style: {}\n}\nexport default BaseElement\n","import React from 'react'\n\nexport default function Grid(props: any) {\n return <div {...props} />\n}\n\nGrid.defaultProps = {\n style: {\n display: 'grid',\n gridTemplate: '1fr / 1fr'\n },\n type: 'grid'\n}","import Button from './button'\nimport BaseElement from './base'\nimport Grid from './grid'\n\nconst elements = {\n Button,\n BaseElement,\n Grid\n}\nexport default elements","import * as React from 'react'\nimport {isBrowser, Weaverse, WeaverseItemStore, WeaverseType} from '@weaverse/core'\nimport Elements from './elements'\n\nexport const createRootContext = (configs: WeaverseType) => {\n const rootContext = new Weaverse(configs)\n // Register the element components\n Object.keys(Elements).forEach(key => {\n // @ts-ignore\n Elements[key]?.defaultProps?.type && rootContext.registerElement(Elements[key].defaultProps.type, Elements[key])\n })\n return rootContext\n}\n\nexport const WeaverseRoot = ({context, defaultData}: { context: Weaverse, defaultData: any }) => {\n return <div>hiii</div>\n let [, setData] = React.useState<any>(context.projectData)\n React.useEffect(() => {\n let handleUpdate = () => {\n setData({...context.projectData})\n }\n context.subscribe(handleUpdate)\n context.updateProjectData()\n return () => {\n context.unsubscribe(handleUpdate)\n }\n }, [])\n if (!context.projectData?.items?.length && defaultData) {\n context.projectData = defaultData\n context.initItemData()\n }\n let handleProps = context?.studioBridge?.handleProps || {}\n console.log('handleProps', handleProps)\n return <div {...handleProps}>\n <RenderItem itemId={0} context={context}/>\n </div>\n}\n\n\ntype ItemProps = {\n itemInstance: WeaverseItemStore\n elementInstances: Map<string, React.FC>\n context: Weaverse\n}\n\n\nconst Item = ({itemInstance, elementInstances, context}: ItemProps) => {\n let [data, setData] = React.useState<any>(itemInstance.data)\n let {id, type, childIds, css, className, ...rest} = data\n React.useEffect(() => {\n let handleUpdate = (update: any) => {\n setData({...update})\n }\n itemInstance.subscribe(handleUpdate)\n if (!itemInstance.ref.current && isBrowser) {\n Object.assign(itemInstance.ref, {current: document.querySelector(`[data-wv-id=\"${id}\"]`)})\n }\n\n return () => {\n itemInstance.unsubscribe(handleUpdate)\n }\n }, [])\n\n let realClassName = className || ''\n if (css) {\n\n // let stitches create the style from css object and\n // then return the classname, so we can use it in the render\n let selector = (context.stitchesInstance.css(css)()).className\n realClassName += ' ' + selector\n }\n let Component = elementInstances.get(type)\n if (Component) {\n // @ts-ignore\n if (Component.$$typeof === Symbol.for('react.forward_ref')) {\n rest.ref = itemInstance.ref\n }\n return <Component key={id} data-wv-id={id} {...rest} className={realClassName}>\n {Array.isArray(childIds)\n && childIds.map(childId =>\n <RenderItem\n key={childId}\n itemId={childId}\n context={context}\n />\n )}\n </Component>\n }\n return null\n}\n\nconst RenderItem = ({itemId, context}: { itemId: number, context: any }): any => {\n let {itemInstances, elementInstances} = context\n let itemInstance = itemInstances.get(itemId)\n if (itemInstance) {\n return <Item itemInstance={itemInstance} elementInstances={elementInstances} context={context}/>\n }\n return <></>\n}\n\n"],"names":["Button","React","props","ref","count","setCount","onClick","defaultProps","style","backgroundColor","borderRadius","fontSize","padding","type","tag","BaseElement","forwardRef","children","createElement","Grid","display","gridTemplate","elements","configs","rootContext","Weaverse","Object","keys","Elements","forEach","key","registerElement"],"mappings":"+XAEO,IAAMA,EAASC,cAAiB,SAACC,EAAYC,SAC1BF,WAAe,GAAlCG,OAAOC,cACLJ,wCAAQE,IAAKA,GAASD,GAAOI,QAAS,kBAAMD,EAASD,EAAQ,qBAAiBA,MAGvFJ,EAAOO,aAAe,CAClBC,MAAO,CACHC,gBAAiB,QACjBC,aAAc,SACdC,SAAU,OACVC,QAAS,aAEbC,KAAM,SACNC,IAAK,mCCbIC,EAAcd,EAAMe,YAAY,WAAiCb,OAA/BW,IAAAA,IAAKG,IAAAA,SAAaf,iJACxDD,EAAMiB,cAAcJ,KACzBX,IAAAA,GACGD,GACFe,eCJmBE,EAAKjB,UACpBD,uCAASC,IDMlBa,EAAYR,aAAe,CACzBM,KAAM,OACNC,IAAK,MACLN,MAAO,ICNTW,EAAKZ,aAAe,CAClBC,MAAO,CACLY,QAAS,OACTC,aAAc,aAEhBR,KAAM,YCPFS,EAAW,CACftB,OAAAA,EACAe,YAAAA,EACAI,KAAAA,wBCO0B,mBACnBlB,8DAXwB,SAACsB,OAC1BC,EAAc,IAAIC,WAASF,UAEjCG,OAAOC,KAAKC,GAAUC,SAAQ,SAAAC,qBAE5BF,EAASE,gBAAMvB,uBAAcM,OAAQW,EAAYO,gBAAgBH,EAASE,GAAKvB,aAAaM,KAAMe,EAASE,OAEtGN"}
|
package/dist/sdk-react.esm.js
DELETED
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
import React__default, { forwardRef, useState, createElement } from 'react';
|
|
2
|
-
import { Weaverse } from '@weaverse/core';
|
|
3
|
-
|
|
4
|
-
function _extends() {
|
|
5
|
-
_extends = Object.assign || function (target) {
|
|
6
|
-
for (var i = 1; i < arguments.length; i++) {
|
|
7
|
-
var source = arguments[i];
|
|
8
|
-
|
|
9
|
-
for (var key in source) {
|
|
10
|
-
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
11
|
-
target[key] = source[key];
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
return target;
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
return _extends.apply(this, arguments);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
23
|
-
if (source == null) return {};
|
|
24
|
-
var target = {};
|
|
25
|
-
var sourceKeys = Object.keys(source);
|
|
26
|
-
var key, i;
|
|
27
|
-
|
|
28
|
-
for (i = 0; i < sourceKeys.length; i++) {
|
|
29
|
-
key = sourceKeys[i];
|
|
30
|
-
if (excluded.indexOf(key) >= 0) continue;
|
|
31
|
-
target[key] = source[key];
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
return target;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
var Button = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
38
|
-
var _React$useState = useState(0),
|
|
39
|
-
count = _React$useState[0],
|
|
40
|
-
setCount = _React$useState[1];
|
|
41
|
-
|
|
42
|
-
return createElement("button", Object.assign({
|
|
43
|
-
ref: ref
|
|
44
|
-
}, props, {
|
|
45
|
-
onClick: function onClick() {
|
|
46
|
-
return setCount(count + 1);
|
|
47
|
-
}
|
|
48
|
-
}), "Test Button ", count);
|
|
49
|
-
});
|
|
50
|
-
Button.defaultProps = {
|
|
51
|
-
style: {
|
|
52
|
-
backgroundColor: 'green',
|
|
53
|
-
borderRadius: '9999px',
|
|
54
|
-
fontSize: '13px',
|
|
55
|
-
padding: '10px 15px'
|
|
56
|
-
},
|
|
57
|
-
type: 'button',
|
|
58
|
-
tag: 'button'
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
var _excluded = ["tag", "children"];
|
|
62
|
-
var BaseElement = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
63
|
-
var tag = _ref.tag,
|
|
64
|
-
children = _ref.children,
|
|
65
|
-
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
66
|
-
|
|
67
|
-
return React__default.createElement(tag, _extends({
|
|
68
|
-
ref: ref
|
|
69
|
-
}, props), children);
|
|
70
|
-
});
|
|
71
|
-
BaseElement.defaultProps = {
|
|
72
|
-
type: 'base',
|
|
73
|
-
tag: 'div',
|
|
74
|
-
style: {}
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
function Grid(props) {
|
|
78
|
-
return React__default.createElement("div", Object.assign({}, props));
|
|
79
|
-
}
|
|
80
|
-
Grid.defaultProps = {
|
|
81
|
-
style: {
|
|
82
|
-
display: 'grid',
|
|
83
|
-
gridTemplate: '1fr / 1fr'
|
|
84
|
-
},
|
|
85
|
-
type: 'grid'
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
var elements = {
|
|
89
|
-
Button: Button,
|
|
90
|
-
BaseElement: BaseElement,
|
|
91
|
-
Grid: Grid
|
|
92
|
-
};
|
|
93
|
-
|
|
94
|
-
var createRootContext = function createRootContext(configs) {
|
|
95
|
-
var rootContext = new Weaverse(configs); // Register the element components
|
|
96
|
-
|
|
97
|
-
Object.keys(elements).forEach(function (key) {
|
|
98
|
-
var _Elements$key, _Elements$key$default;
|
|
99
|
-
|
|
100
|
-
// @ts-ignore
|
|
101
|
-
((_Elements$key = elements[key]) == null ? void 0 : (_Elements$key$default = _Elements$key.defaultProps) == null ? void 0 : _Elements$key$default.type) && rootContext.registerElement(elements[key].defaultProps.type, elements[key]);
|
|
102
|
-
});
|
|
103
|
-
return rootContext;
|
|
104
|
-
};
|
|
105
|
-
var WeaverseRoot = function WeaverseRoot(_ref) {
|
|
106
|
-
return createElement("div", null, "hiii");
|
|
107
|
-
};
|
|
108
|
-
|
|
109
|
-
export { WeaverseRoot, createRootContext };
|
|
110
|
-
//# sourceMappingURL=sdk-react.esm.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"sdk-react.esm.js","sources":["../src/elements/button.tsx","../src/elements/base.tsx","../src/elements/grid.tsx","../src/elements/index.ts","../src/renderer.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const Button = React.forwardRef((props: any, ref) => {\n let [count, setCount] = React.useState(0)\n return <button ref={ref} {...props} onClick={() => setCount(count + 1)}>Test Button {count}</button>\n})\n\nButton.defaultProps = {\n style: {\n backgroundColor: 'green',\n borderRadius: '9999px',\n fontSize: '13px',\n padding: '10px 15px'\n },\n type: 'button',\n tag: 'button'\n}\n\nexport default Button","import React from 'react'\n\nexport const BaseElement = React.forwardRef((({tag, children, ...props}: any, ref) => {\n return React.createElement(tag, {\n ref,\n ...props\n }, children)\n}))\n\nBaseElement.defaultProps = {\n type: 'base',\n tag: 'div',\n style: {}\n}\nexport default BaseElement\n","import React from 'react'\n\nexport default function Grid(props: any) {\n return <div {...props} />\n}\n\nGrid.defaultProps = {\n style: {\n display: 'grid',\n gridTemplate: '1fr / 1fr'\n },\n type: 'grid'\n}","import Button from './button'\nimport BaseElement from './base'\nimport Grid from './grid'\n\nconst elements = {\n Button,\n BaseElement,\n Grid\n}\nexport default elements","import * as React from 'react'\nimport {isBrowser, Weaverse, WeaverseItemStore, WeaverseType} from '@weaverse/core'\nimport Elements from './elements'\n\nexport const createRootContext = (configs: WeaverseType) => {\n const rootContext = new Weaverse(configs)\n // Register the element components\n Object.keys(Elements).forEach(key => {\n // @ts-ignore\n Elements[key]?.defaultProps?.type && rootContext.registerElement(Elements[key].defaultProps.type, Elements[key])\n })\n return rootContext\n}\n\nexport const WeaverseRoot = ({context, defaultData}: { context: Weaverse, defaultData: any }) => {\n return <div>hiii</div>\n let [, setData] = React.useState<any>(context.projectData)\n React.useEffect(() => {\n let handleUpdate = () => {\n setData({...context.projectData})\n }\n context.subscribe(handleUpdate)\n context.updateProjectData()\n return () => {\n context.unsubscribe(handleUpdate)\n }\n }, [])\n if (!context.projectData?.items?.length && defaultData) {\n context.projectData = defaultData\n context.initItemData()\n }\n let handleProps = context?.studioBridge?.handleProps || {}\n console.log('handleProps', handleProps)\n return <div {...handleProps}>\n <RenderItem itemId={0} context={context}/>\n </div>\n}\n\n\ntype ItemProps = {\n itemInstance: WeaverseItemStore\n elementInstances: Map<string, React.FC>\n context: Weaverse\n}\n\n\nconst Item = ({itemInstance, elementInstances, context}: ItemProps) => {\n let [data, setData] = React.useState<any>(itemInstance.data)\n let {id, type, childIds, css, className, ...rest} = data\n React.useEffect(() => {\n let handleUpdate = (update: any) => {\n setData({...update})\n }\n itemInstance.subscribe(handleUpdate)\n if (!itemInstance.ref.current && isBrowser) {\n Object.assign(itemInstance.ref, {current: document.querySelector(`[data-wv-id=\"${id}\"]`)})\n }\n\n return () => {\n itemInstance.unsubscribe(handleUpdate)\n }\n }, [])\n\n let realClassName = className || ''\n if (css) {\n\n // let stitches create the style from css object and\n // then return the classname, so we can use it in the render\n let selector = (context.stitchesInstance.css(css)()).className\n realClassName += ' ' + selector\n }\n let Component = elementInstances.get(type)\n if (Component) {\n // @ts-ignore\n if (Component.$$typeof === Symbol.for('react.forward_ref')) {\n rest.ref = itemInstance.ref\n }\n return <Component key={id} data-wv-id={id} {...rest} className={realClassName}>\n {Array.isArray(childIds)\n && childIds.map(childId =>\n <RenderItem\n key={childId}\n itemId={childId}\n context={context}\n />\n )}\n </Component>\n }\n return null\n}\n\nconst RenderItem = ({itemId, context}: { itemId: number, context: any }): any => {\n let {itemInstances, elementInstances} = context\n let itemInstance = itemInstances.get(itemId)\n if (itemInstance) {\n return <Item itemInstance={itemInstance} elementInstances={elementInstances} context={context}/>\n }\n return <></>\n}\n\n"],"names":["Button","React","props","ref","count","setCount","onClick","defaultProps","style","backgroundColor","borderRadius","fontSize","padding","type","tag","BaseElement","forwardRef","children","createElement","Grid","display","gridTemplate","elements","createRootContext","configs","rootContext","Weaverse","Object","keys","Elements","forEach","key","registerElement","WeaverseRoot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEO,IAAMA,MAAM,gBAAGC,UAAA,CAAiB,UAACC,KAAD,EAAaC,GAAb;AACrC,wBAAwBF,QAAA,CAAe,CAAf,CAAxB;AAAA,MAAKG,KAAL;AAAA,MAAYC,QAAZ;;AACA,SAAOJ,aAAA,SAAA;AAAQE,IAAAA,GAAG,EAAEA;KAASD;AAAOI,IAAAA,OAAO,EAAE;AAAA,aAAMD,QAAQ,CAACD,KAAK,GAAG,CAAT,CAAd;AAAA;IAAtC,gBAAA,EAA8EA,KAA9E,CAAP;AACD,CAHqB,CAAf;AAKPJ,MAAM,CAACO,YAAP,GAAsB;AAClBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,eAAe,EAAE,OADd;AAEHC,IAAAA,YAAY,EAAE,QAFX;AAGHC,IAAAA,QAAQ,EAAE,MAHP;AAIHC,IAAAA,OAAO,EAAE;AAJN,GADW;AAOlBC,EAAAA,IAAI,EAAE,QAPY;AAQlBC,EAAAA,GAAG,EAAE;AARa,CAAtB;;;ACPA,AAEO,IAAMC,WAAW,gBAAGd,cAAK,CAACe,UAAN,CAAkB,gBAAiCb,GAAjC;MAAEW,WAAAA;MAAKG,gBAAAA;MAAaf;;AAC/D,SAAOD,cAAK,CAACiB,aAAN,CAAoBJ,GAApB;AACLX,IAAAA,GAAG,EAAHA;AADK,KAEFD,KAFE,GAGJe,QAHI,CAAP;AAID,CAL0B,CAApB;AAOPF,WAAW,CAACR,YAAZ,GAA2B;AACzBM,EAAAA,IAAI,EAAE,MADmB;AAEzBC,EAAAA,GAAG,EAAE,KAFoB;AAGzBN,EAAAA,KAAK,EAAE;AAHkB,CAA3B;;SCPwBW,KAAKjB;AAC3B,SAAOD,4BAAA,MAAA,oBAASC,MAAT,CAAP;AACD;AAEDiB,IAAI,CAACZ,YAAL,GAAoB;AAClBC,EAAAA,KAAK,EAAE;AACLY,IAAAA,OAAO,EAAE,MADJ;AAELC,IAAAA,YAAY,EAAE;AAFT,GADW;AAKlBR,EAAAA,IAAI,EAAE;AALY,CAApB;;ACFA,IAAMS,QAAQ,GAAG;AACftB,EAAAA,MAAM,EAANA,MADe;AAEfe,EAAAA,WAAW,EAAXA,WAFe;AAGfI,EAAAA,IAAI,EAAJA;AAHe,CAAjB;;ICAaI,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,OAAD;AAC/B,MAAMC,WAAW,GAAG,IAAIC,QAAJ,CAAaF,OAAb,CAApB;;AAEAG,EAAAA,MAAM,CAACC,IAAP,CAAYC,QAAZ,EAAsBC,OAAtB,CAA8B,UAAAC,GAAG;;;AAC/B;AACA,sBAAAF,QAAQ,CAACE,GAAD,CAAR,4DAAexB,YAAf,2CAA6BM,IAA7B,KAAqCY,WAAW,CAACO,eAAZ,CAA4BH,QAAQ,CAACE,GAAD,CAAR,CAAcxB,YAAd,CAA2BM,IAAvD,EAA6DgB,QAAQ,CAACE,GAAD,CAArE,CAArC;AACD,GAHD;AAIA,SAAON,WAAP;AACD,CARM;AAUP,IAAaQ,YAAY,GAAG,SAAfA,YAAe;AAC1B,SAAOhC,aAAA,MAAA,MAAA,QAAA,CAAP;AAqBD,CAtBM;;;;"}
|