@weaverse/core 0.3.6 → 0.4.2
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/dist/index.d.ts +32 -12
- package/dist/index.js +37 -15
- package/dist/index.mjs +40 -15
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
import Stitches from '@stitches/core/types/stitches';
|
|
2
2
|
|
|
3
|
+
declare type TODO = any;
|
|
3
4
|
declare type WeaverseElementMap = {
|
|
4
5
|
[key: string]: WeaverseElement;
|
|
5
6
|
};
|
|
6
7
|
declare type WeaverseElement = {
|
|
7
|
-
Component:
|
|
8
|
+
Component: TODO;
|
|
8
9
|
schema: WeaverseElementSchema;
|
|
9
10
|
};
|
|
10
11
|
declare type WeaverseElementSchema = {
|
|
11
12
|
title: string;
|
|
12
13
|
type: string;
|
|
13
14
|
settings: WeaverseElementSetting[];
|
|
15
|
+
toolbar?: TODO;
|
|
16
|
+
data?: TODO;
|
|
14
17
|
};
|
|
15
18
|
declare type WeaverseElementSetting = {
|
|
16
19
|
tab: string;
|
|
@@ -18,14 +21,21 @@ declare type WeaverseElementSetting = {
|
|
|
18
21
|
inspectors: WeaverseElementInspector[];
|
|
19
22
|
};
|
|
20
23
|
declare type WeaverseElementInspector = {
|
|
21
|
-
binding
|
|
22
|
-
key
|
|
23
|
-
|
|
24
|
+
binding?: "data" | "style";
|
|
25
|
+
key?: string;
|
|
26
|
+
label?: string;
|
|
27
|
+
type: InspectorInputType;
|
|
28
|
+
options?: InspectorOption[];
|
|
29
|
+
default?: TODO;
|
|
24
30
|
};
|
|
25
|
-
declare type
|
|
31
|
+
declare type InspectorOption = {
|
|
32
|
+
value: TODO;
|
|
33
|
+
label: string;
|
|
34
|
+
};
|
|
35
|
+
declare type InspectorInputType = "alignment" | "color" | "switch" | "spacing" | "textarea" | "select" | "grid";
|
|
26
36
|
declare global {
|
|
27
37
|
interface Window {
|
|
28
|
-
WeaverseStudioBridge:
|
|
38
|
+
WeaverseStudioBridge: TODO;
|
|
29
39
|
}
|
|
30
40
|
}
|
|
31
41
|
|
|
@@ -43,6 +53,10 @@ interface ProjectDataType {
|
|
|
43
53
|
items: ProjectDataItemType[];
|
|
44
54
|
rootId: string | number;
|
|
45
55
|
}
|
|
56
|
+
declare type MediaBreakpoints = {
|
|
57
|
+
tablet: string;
|
|
58
|
+
mobile: string;
|
|
59
|
+
};
|
|
46
60
|
declare type WeaverseType = {
|
|
47
61
|
[key: string]: any;
|
|
48
62
|
appUrl?: string;
|
|
@@ -69,10 +83,10 @@ declare type WeaverseType = {
|
|
|
69
83
|
declare class WeaverseItemStore {
|
|
70
84
|
data: any;
|
|
71
85
|
listeners: Set<any>;
|
|
72
|
-
|
|
86
|
+
Element: WeaverseElement;
|
|
73
87
|
ref: any;
|
|
74
88
|
constructor(itemData: any, weaverse: Weaverse);
|
|
75
|
-
setData: (data: any) =>
|
|
89
|
+
setData: (data: any) => any;
|
|
76
90
|
subscribe: (fn: any) => void;
|
|
77
91
|
unsubscribe: (fn: any) => void;
|
|
78
92
|
triggerUpdate: () => void;
|
|
@@ -121,20 +135,26 @@ declare class Weaverse {
|
|
|
121
135
|
stitchesInstance: Stitches | any;
|
|
122
136
|
studioBridge?: any;
|
|
123
137
|
static WeaverseItemStore: typeof WeaverseItemStore;
|
|
138
|
+
mediaBreakPoints: {
|
|
139
|
+
desktop: string;
|
|
140
|
+
tablet: string;
|
|
141
|
+
mobile: string;
|
|
142
|
+
};
|
|
124
143
|
/**
|
|
125
144
|
* constructor
|
|
126
145
|
* @param appUrl {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
|
|
127
146
|
* @param projectKey {string} Weaverse project key to access project data via API
|
|
128
147
|
* @param projectData {ProjectDataType} Weaverse project data, by default, user can provide project data via React Component.
|
|
148
|
+
* @param mediaBreakPoints {object} Pass down custom media query breakpoints or just use the default.
|
|
129
149
|
*/
|
|
130
|
-
constructor({ appUrl, projectKey, projectData }?: WeaverseType);
|
|
150
|
+
constructor({ appUrl, projectKey, projectData, mediaBreakPoints }?: WeaverseType);
|
|
131
151
|
/**
|
|
132
152
|
* register the custom React Component to Weaverse, store it into Weaverse.elementInstances
|
|
133
|
-
* @param
|
|
134
|
-
* @param element {React.Component} custom React Component
|
|
153
|
+
* @param element {WeaverseElement} custom React Component
|
|
135
154
|
*/
|
|
136
155
|
registerElement(element: WeaverseElement): void;
|
|
137
156
|
init(): void;
|
|
157
|
+
initStitches: () => void;
|
|
138
158
|
loadStudio(): void;
|
|
139
159
|
subscribe(fn: any): void;
|
|
140
160
|
unsubscribe(fn: any): void;
|
|
@@ -155,4 +175,4 @@ declare const isReactNative: boolean;
|
|
|
155
175
|
declare const isBrowser: boolean;
|
|
156
176
|
declare const isIframe: boolean;
|
|
157
177
|
|
|
158
|
-
export {
|
|
178
|
+
export { InspectorInputType, InspectorOption, MediaBreakpoints, ProjectDataItemType, ProjectDataType, TODO, Weaverse, WeaverseElement, WeaverseElementInspector, WeaverseElementMap, WeaverseElementSchema, WeaverseElementSetting, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative };
|
package/dist/index.js
CHANGED
|
@@ -2,8 +2,22 @@ var __create = Object.create;
|
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
6
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
7
21
|
var __export = (target, all) => {
|
|
8
22
|
for (var name in all)
|
|
9
23
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -47,6 +61,7 @@ var WeaverseItemStore = class {
|
|
|
47
61
|
this.setData = (data) => {
|
|
48
62
|
this.data = Object.assign(this.data, data);
|
|
49
63
|
this.triggerUpdate();
|
|
64
|
+
return this.data;
|
|
50
65
|
};
|
|
51
66
|
this.subscribe = (fn) => {
|
|
52
67
|
this.listeners.add(fn);
|
|
@@ -59,16 +74,19 @@ var WeaverseItemStore = class {
|
|
|
59
74
|
return fn(this.data);
|
|
60
75
|
});
|
|
61
76
|
};
|
|
62
|
-
|
|
77
|
+
var _a, _b, _c, _d;
|
|
63
78
|
let { type, id } = itemData;
|
|
64
|
-
|
|
65
|
-
|
|
79
|
+
this.Element = weaverse.elementInstances.get(type);
|
|
80
|
+
console.log("this.Element", this.Element);
|
|
81
|
+
if (id && this.Element) {
|
|
82
|
+
let defaultData = (_b = (_a = this.Element) == null ? void 0 : _a.schema) == null ? void 0 : _b.data;
|
|
66
83
|
weaverse.itemInstances.set(id, this);
|
|
84
|
+
this.data = __spreadValues(__spreadValues(__spreadValues({}, (_d = (_c = this.Element) == null ? void 0 : _c.Component) == null ? void 0 : _d.defaultProps), defaultData), itemData);
|
|
67
85
|
}
|
|
68
86
|
}
|
|
69
87
|
};
|
|
70
88
|
var Weaverse = class {
|
|
71
|
-
constructor({ appUrl, projectKey, projectData } = {}) {
|
|
89
|
+
constructor({ appUrl, projectKey, projectData, mediaBreakPoints } = {}) {
|
|
72
90
|
this.elementInstances = /* @__PURE__ */ new Map();
|
|
73
91
|
this.itemInstances = /* @__PURE__ */ new Map();
|
|
74
92
|
this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://weaverse.io";
|
|
@@ -79,8 +97,20 @@ var Weaverse = class {
|
|
|
79
97
|
};
|
|
80
98
|
this.listeners = /* @__PURE__ */ new Set();
|
|
81
99
|
this.isEditor = false;
|
|
100
|
+
this.mediaBreakPoints = {
|
|
101
|
+
desktop: "all",
|
|
102
|
+
tablet: "(max-width: 1023.98px)",
|
|
103
|
+
mobile: "(max-width: 767.98px)"
|
|
104
|
+
};
|
|
105
|
+
this.initStitches = () => {
|
|
106
|
+
this.stitchesInstance = stitches.createStitches({
|
|
107
|
+
prefix: "we",
|
|
108
|
+
media: this.mediaBreakPoints
|
|
109
|
+
});
|
|
110
|
+
};
|
|
82
111
|
this.appUrl = appUrl || this.appUrl;
|
|
83
112
|
this.projectKey = projectKey || this.projectKey;
|
|
113
|
+
this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
|
|
84
114
|
projectData && (this.projectData = projectData);
|
|
85
115
|
this.init();
|
|
86
116
|
}
|
|
@@ -93,14 +123,7 @@ var Weaverse = class {
|
|
|
93
123
|
}
|
|
94
124
|
}
|
|
95
125
|
init() {
|
|
96
|
-
this.
|
|
97
|
-
prefix: "we",
|
|
98
|
-
media: {
|
|
99
|
-
bp1: "(min-width: 640px)",
|
|
100
|
-
bp2: "(max-width: 768px)",
|
|
101
|
-
bp3: "(min-width: 1024px)"
|
|
102
|
-
}
|
|
103
|
-
});
|
|
126
|
+
this.initStitches();
|
|
104
127
|
this.loadStudio();
|
|
105
128
|
}
|
|
106
129
|
loadStudio() {
|
|
@@ -108,13 +131,12 @@ var Weaverse = class {
|
|
|
108
131
|
window.addEventListener("message", (e) => {
|
|
109
132
|
var _a;
|
|
110
133
|
if (((_a = e.data) == null ? void 0 : _a.type) === "weaverse.preview.initializeEditor") {
|
|
134
|
+
this.isEditor = true;
|
|
111
135
|
let initStudio = () => {
|
|
112
|
-
|
|
113
|
-
this.studioBridge = new StudioBridge(this);
|
|
136
|
+
this.studioBridge = new window.WeaverseStudioBridge(this);
|
|
114
137
|
this.studioBridge.subscribeMessageEvent();
|
|
115
138
|
this.triggerUpdate();
|
|
116
139
|
};
|
|
117
|
-
this.isEditor = true;
|
|
118
140
|
if (!window.WeaverseStudioBridge) {
|
|
119
141
|
const studioBridgeScript = document.createElement("script");
|
|
120
142
|
studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`;
|
package/dist/index.mjs
CHANGED
|
@@ -1,3 +1,20 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
3
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
4
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
5
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
6
|
+
var __spreadValues = (a, b) => {
|
|
7
|
+
for (var prop in b || (b = {}))
|
|
8
|
+
if (__hasOwnProp.call(b, prop))
|
|
9
|
+
__defNormalProp(a, prop, b[prop]);
|
|
10
|
+
if (__getOwnPropSymbols)
|
|
11
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
12
|
+
if (__propIsEnum.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
}
|
|
15
|
+
return a;
|
|
16
|
+
};
|
|
17
|
+
|
|
1
18
|
// src/utils/index.ts
|
|
2
19
|
var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
|
|
3
20
|
var isBrowser = typeof window !== "undefined" && !isReactNative;
|
|
@@ -15,6 +32,7 @@ var WeaverseItemStore = class {
|
|
|
15
32
|
this.setData = (data) => {
|
|
16
33
|
this.data = Object.assign(this.data, data);
|
|
17
34
|
this.triggerUpdate();
|
|
35
|
+
return this.data;
|
|
18
36
|
};
|
|
19
37
|
this.subscribe = (fn) => {
|
|
20
38
|
this.listeners.add(fn);
|
|
@@ -27,16 +45,19 @@ var WeaverseItemStore = class {
|
|
|
27
45
|
return fn(this.data);
|
|
28
46
|
});
|
|
29
47
|
};
|
|
30
|
-
|
|
48
|
+
var _a, _b, _c, _d;
|
|
31
49
|
let { type, id } = itemData;
|
|
32
|
-
|
|
33
|
-
|
|
50
|
+
this.Element = weaverse.elementInstances.get(type);
|
|
51
|
+
console.log("this.Element", this.Element);
|
|
52
|
+
if (id && this.Element) {
|
|
53
|
+
let defaultData = (_b = (_a = this.Element) == null ? void 0 : _a.schema) == null ? void 0 : _b.data;
|
|
34
54
|
weaverse.itemInstances.set(id, this);
|
|
55
|
+
this.data = __spreadValues(__spreadValues(__spreadValues({}, (_d = (_c = this.Element) == null ? void 0 : _c.Component) == null ? void 0 : _d.defaultProps), defaultData), itemData);
|
|
35
56
|
}
|
|
36
57
|
}
|
|
37
58
|
};
|
|
38
59
|
var Weaverse = class {
|
|
39
|
-
constructor({ appUrl, projectKey, projectData } = {}) {
|
|
60
|
+
constructor({ appUrl, projectKey, projectData, mediaBreakPoints } = {}) {
|
|
40
61
|
this.elementInstances = /* @__PURE__ */ new Map();
|
|
41
62
|
this.itemInstances = /* @__PURE__ */ new Map();
|
|
42
63
|
this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://weaverse.io";
|
|
@@ -47,8 +68,20 @@ var Weaverse = class {
|
|
|
47
68
|
};
|
|
48
69
|
this.listeners = /* @__PURE__ */ new Set();
|
|
49
70
|
this.isEditor = false;
|
|
71
|
+
this.mediaBreakPoints = {
|
|
72
|
+
desktop: "all",
|
|
73
|
+
tablet: "(max-width: 1023.98px)",
|
|
74
|
+
mobile: "(max-width: 767.98px)"
|
|
75
|
+
};
|
|
76
|
+
this.initStitches = () => {
|
|
77
|
+
this.stitchesInstance = stitches.createStitches({
|
|
78
|
+
prefix: "we",
|
|
79
|
+
media: this.mediaBreakPoints
|
|
80
|
+
});
|
|
81
|
+
};
|
|
50
82
|
this.appUrl = appUrl || this.appUrl;
|
|
51
83
|
this.projectKey = projectKey || this.projectKey;
|
|
84
|
+
this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
|
|
52
85
|
projectData && (this.projectData = projectData);
|
|
53
86
|
this.init();
|
|
54
87
|
}
|
|
@@ -61,14 +94,7 @@ var Weaverse = class {
|
|
|
61
94
|
}
|
|
62
95
|
}
|
|
63
96
|
init() {
|
|
64
|
-
this.
|
|
65
|
-
prefix: "we",
|
|
66
|
-
media: {
|
|
67
|
-
bp1: "(min-width: 640px)",
|
|
68
|
-
bp2: "(max-width: 768px)",
|
|
69
|
-
bp3: "(min-width: 1024px)"
|
|
70
|
-
}
|
|
71
|
-
});
|
|
97
|
+
this.initStitches();
|
|
72
98
|
this.loadStudio();
|
|
73
99
|
}
|
|
74
100
|
loadStudio() {
|
|
@@ -76,13 +102,12 @@ var Weaverse = class {
|
|
|
76
102
|
window.addEventListener("message", (e) => {
|
|
77
103
|
var _a;
|
|
78
104
|
if (((_a = e.data) == null ? void 0 : _a.type) === "weaverse.preview.initializeEditor") {
|
|
105
|
+
this.isEditor = true;
|
|
79
106
|
let initStudio = () => {
|
|
80
|
-
|
|
81
|
-
this.studioBridge = new StudioBridge(this);
|
|
107
|
+
this.studioBridge = new window.WeaverseStudioBridge(this);
|
|
82
108
|
this.studioBridge.subscribeMessageEvent();
|
|
83
109
|
this.triggerUpdate();
|
|
84
110
|
};
|
|
85
|
-
this.isEditor = true;
|
|
86
111
|
if (!window.WeaverseStudioBridge) {
|
|
87
112
|
const studioBridgeScript = document.createElement("script");
|
|
88
113
|
studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`;
|
package/package.json
CHANGED