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