@weaverse/core 1.0.44 → 1.0.46
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 +19 -33
- package/dist/index.js +51 -72
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +51 -72
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -1
package/dist/index.d.ts
CHANGED
|
@@ -40,37 +40,23 @@ declare let stitchesUtils: {
|
|
|
40
40
|
};
|
|
41
41
|
};
|
|
42
42
|
|
|
43
|
-
/**
|
|
44
|
-
* WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data
|
|
45
|
-
* @param itemData {ElementData} Weaverse item data
|
|
46
|
-
* @param weaverse {Weaverse} Weaverse instance
|
|
47
|
-
* @example
|
|
48
|
-
* useEffect(() => {
|
|
49
|
-
* let handleUpdate = (update: any) => {
|
|
50
|
-
* setData({...update})
|
|
51
|
-
* }
|
|
52
|
-
* itemInstance.subscribe(handleUpdate)
|
|
53
|
-
* return () => {
|
|
54
|
-
* itemInstance.unsubscribe(handleUpdate)
|
|
55
|
-
* }
|
|
56
|
-
* }, [])
|
|
57
|
-
*/
|
|
58
43
|
declare class WeaverseItemStore {
|
|
59
|
-
listeners: Set<any>;
|
|
60
|
-
ref: RefObject<HTMLElement>;
|
|
61
44
|
weaverse: Weaverse;
|
|
45
|
+
listeners: Set<(_: ElementData) => void>;
|
|
46
|
+
ref: RefObject<HTMLElement>;
|
|
47
|
+
platformType: PlatformTypeEnum;
|
|
62
48
|
stitchesClass: string;
|
|
63
|
-
|
|
49
|
+
_store: ElementData;
|
|
64
50
|
constructor(itemData: ElementData, weaverse: Weaverse);
|
|
65
51
|
get _id(): string;
|
|
66
52
|
get _element(): HTMLElement | null;
|
|
67
53
|
get _flags(): Partial<Record<FlagType, boolean>>;
|
|
68
54
|
get Element(): WeaverseElement | undefined;
|
|
69
|
-
set data(
|
|
55
|
+
set data(update: Omit<ElementData, "id" | "type">);
|
|
70
56
|
get data(): ElementData;
|
|
71
|
-
setData: (
|
|
72
|
-
subscribe: (fn:
|
|
73
|
-
unsubscribe: (fn:
|
|
57
|
+
setData: (update: Omit<ElementData, "id" | "type">) => ElementData;
|
|
58
|
+
subscribe: (fn: (_: ElementData) => void) => void;
|
|
59
|
+
unsubscribe: (fn: (_: ElementData) => void) => void;
|
|
74
60
|
triggerUpdate: () => void;
|
|
75
61
|
}
|
|
76
62
|
declare class Weaverse {
|
|
@@ -88,17 +74,14 @@ declare class Weaverse {
|
|
|
88
74
|
itemInstances: Map<string | number, WeaverseItemStore>;
|
|
89
75
|
/**
|
|
90
76
|
* Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
|
|
91
|
-
* @type {string}
|
|
92
77
|
*/
|
|
93
78
|
weaverseHost: string;
|
|
94
79
|
/**
|
|
95
80
|
* Weaverse version, it can be used to load the correct version of Weaverse SDK
|
|
96
|
-
* @type {string}
|
|
97
81
|
*/
|
|
98
82
|
weaverseVersion: string;
|
|
99
83
|
/**
|
|
100
84
|
* Weaverse project key to access project data via API
|
|
101
|
-
* @type {string}
|
|
102
85
|
*/
|
|
103
86
|
projectId: string;
|
|
104
87
|
pageId: string;
|
|
@@ -109,14 +92,12 @@ declare class Weaverse {
|
|
|
109
92
|
data: WeaverseProjectDataType;
|
|
110
93
|
/**
|
|
111
94
|
* Storing subscribe callback function for any component that want to listen to the change of WeaverseRoot
|
|
112
|
-
* @type {Map<string, (data: any) => void>}
|
|
113
95
|
*/
|
|
114
|
-
listeners: Set<
|
|
96
|
+
listeners: Set<() => void>;
|
|
115
97
|
/**
|
|
116
98
|
* Check whether the sdk is in editor or not.
|
|
117
99
|
* If isDesignMode is true, it means the sdk is isDesignMode mode, render the editor UI,
|
|
118
100
|
* else render the preview UI, plain HTML + CSS + React hydrate
|
|
119
|
-
* @type {boolean}
|
|
120
101
|
*/
|
|
121
102
|
isDesignMode: boolean;
|
|
122
103
|
/**
|
|
@@ -125,12 +106,10 @@ declare class Weaverse {
|
|
|
125
106
|
platformType: PlatformTypeEnum;
|
|
126
107
|
/**
|
|
127
108
|
* Check whether the sdk is in preview mode or not
|
|
128
|
-
* @type {boolean}
|
|
129
109
|
*/
|
|
130
110
|
isPreviewMode: boolean;
|
|
131
111
|
/**
|
|
132
112
|
* Use in element to optionally render special HTML for hydration
|
|
133
|
-
* @type {boolean}
|
|
134
113
|
*/
|
|
135
114
|
ssrMode: boolean;
|
|
136
115
|
/**
|
|
@@ -152,8 +131,7 @@ declare class Weaverse {
|
|
|
152
131
|
* @param elementSchemas {Array<ElementSchema>} List of element schemas
|
|
153
132
|
* @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)
|
|
154
133
|
*/
|
|
155
|
-
constructor(
|
|
156
|
-
init({ weaverseHost, weaverseVersion, elementSchemas, platformType, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, pageId, }?: WeaverseType): void;
|
|
134
|
+
constructor(params?: WeaverseType);
|
|
157
135
|
/**
|
|
158
136
|
* Register the custom React Component to Weaverse, store it into Weaverse.elementInstances
|
|
159
137
|
* @param element {WeaverseElement} custom React Component
|
|
@@ -164,8 +142,16 @@ declare class Weaverse {
|
|
|
164
142
|
unsubscribe(fn: any): void;
|
|
165
143
|
triggerUpdate(): void;
|
|
166
144
|
refreshAllItems(): void;
|
|
145
|
+
/**
|
|
146
|
+
* When applying new template,
|
|
147
|
+
* we need to reset the project data and re-initialize the project item data
|
|
148
|
+
* @param data {WeaverseProjectDataType}
|
|
149
|
+
*/
|
|
167
150
|
setProjectData(data: WeaverseProjectDataType): void;
|
|
168
|
-
|
|
151
|
+
/**
|
|
152
|
+
* Create new WeaverseItemStore instance for each item in project data
|
|
153
|
+
*/
|
|
154
|
+
initProject(): void;
|
|
169
155
|
}
|
|
170
156
|
|
|
171
157
|
interface WeaverseProjectDataType {
|
package/dist/index.js
CHANGED
|
@@ -116,13 +116,16 @@ var stitchesUtils = {
|
|
|
116
116
|
var WeaverseItemStore = class {
|
|
117
117
|
constructor(itemData, weaverse) {
|
|
118
118
|
this.listeners = /* @__PURE__ */ new Set();
|
|
119
|
-
this.ref = {
|
|
120
|
-
|
|
121
|
-
};
|
|
119
|
+
this.ref = { current: null };
|
|
120
|
+
this.platformType = "shopify-section";
|
|
122
121
|
this.stitchesClass = "";
|
|
123
|
-
this.
|
|
124
|
-
this.setData = (
|
|
125
|
-
|
|
122
|
+
this._store = { id: "", type: "" };
|
|
123
|
+
this.setData = (update) => {
|
|
124
|
+
if (this.platformType === "shopify-hydrogen") {
|
|
125
|
+
this.data = update;
|
|
126
|
+
} else {
|
|
127
|
+
this.data = Object.assign(this.data, update);
|
|
128
|
+
}
|
|
126
129
|
this.triggerUpdate();
|
|
127
130
|
return this.data;
|
|
128
131
|
};
|
|
@@ -139,13 +142,14 @@ var WeaverseItemStore = class {
|
|
|
139
142
|
};
|
|
140
143
|
let { type, id } = itemData;
|
|
141
144
|
this.weaverse = weaverse;
|
|
145
|
+
this.platformType = weaverse.platformType;
|
|
142
146
|
if (id && type) {
|
|
143
147
|
weaverse.itemInstances.set(id, this);
|
|
144
|
-
this.
|
|
148
|
+
this._store = { ...itemData };
|
|
145
149
|
}
|
|
146
150
|
}
|
|
147
151
|
get _id() {
|
|
148
|
-
return this.
|
|
152
|
+
return this._store.id;
|
|
149
153
|
}
|
|
150
154
|
get _element() {
|
|
151
155
|
return this.ref.current;
|
|
@@ -154,17 +158,33 @@ var WeaverseItemStore = class {
|
|
|
154
158
|
return this.Element?.schema?.flags || {};
|
|
155
159
|
}
|
|
156
160
|
get Element() {
|
|
157
|
-
return this.weaverse.elementInstances.get(this.
|
|
161
|
+
return this.weaverse.elementInstances.get(this._store.type);
|
|
158
162
|
}
|
|
159
|
-
set data(
|
|
160
|
-
this.
|
|
163
|
+
set data(update) {
|
|
164
|
+
if (this.platformType === "shopify-hydrogen") {
|
|
165
|
+
let { children, ...rest } = update;
|
|
166
|
+
if (children) {
|
|
167
|
+
this._store.children = children;
|
|
168
|
+
}
|
|
169
|
+
this._store.data = merge(this._store.data, rest);
|
|
170
|
+
} else {
|
|
171
|
+
this._store = { ...this.data, ...update };
|
|
172
|
+
}
|
|
161
173
|
}
|
|
162
174
|
get data() {
|
|
163
|
-
let
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
175
|
+
let defaultProps = { ...this.Element?.Component?.defaultProps };
|
|
176
|
+
if (this.platformType === "shopify-hydrogen") {
|
|
177
|
+
return {
|
|
178
|
+
...this._store,
|
|
179
|
+
data: { ...defaultProps?.data, ...this._store.data }
|
|
180
|
+
};
|
|
181
|
+
} else {
|
|
182
|
+
let defaultCss = this.Element?.defaultCss || {};
|
|
183
|
+
let currentCss = this._store.css || {};
|
|
184
|
+
let css = merge(defaultCss, currentCss);
|
|
185
|
+
let extraData = this.Element?.extraData;
|
|
186
|
+
return { ...defaultProps, ...extraData, ...this._store, css };
|
|
187
|
+
}
|
|
168
188
|
}
|
|
169
189
|
};
|
|
170
190
|
var Weaverse = class {
|
|
@@ -179,18 +199,7 @@ var Weaverse = class {
|
|
|
179
199
|
* @param elementSchemas {Array<ElementSchema>} List of element schemas
|
|
180
200
|
* @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)
|
|
181
201
|
*/
|
|
182
|
-
constructor({
|
|
183
|
-
weaverseHost,
|
|
184
|
-
weaverseVersion,
|
|
185
|
-
projectId,
|
|
186
|
-
data,
|
|
187
|
-
mediaBreakPoints,
|
|
188
|
-
isDesignMode,
|
|
189
|
-
ssrMode,
|
|
190
|
-
elementSchemas,
|
|
191
|
-
platformType,
|
|
192
|
-
pageId
|
|
193
|
-
} = {}) {
|
|
202
|
+
constructor(params = {}) {
|
|
194
203
|
/**
|
|
195
204
|
* For storing, registering element React component from Weaverse or created by user/developer
|
|
196
205
|
*/
|
|
@@ -201,17 +210,14 @@ var Weaverse = class {
|
|
|
201
210
|
this.itemInstances = /* @__PURE__ */ new Map();
|
|
202
211
|
/**
|
|
203
212
|
* Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
|
|
204
|
-
* @type {string}
|
|
205
213
|
*/
|
|
206
214
|
this.weaverseHost = "https://studio.weaverse.io";
|
|
207
215
|
/**
|
|
208
216
|
* Weaverse version, it can be used to load the correct version of Weaverse SDK
|
|
209
|
-
* @type {string}
|
|
210
217
|
*/
|
|
211
218
|
this.weaverseVersion = "";
|
|
212
219
|
/**
|
|
213
220
|
* Weaverse project key to access project data via API
|
|
214
|
-
* @type {string}
|
|
215
221
|
*/
|
|
216
222
|
this.projectId = "";
|
|
217
223
|
this.pageId = "";
|
|
@@ -226,14 +232,12 @@ var Weaverse = class {
|
|
|
226
232
|
};
|
|
227
233
|
/**
|
|
228
234
|
* Storing subscribe callback function for any component that want to listen to the change of WeaverseRoot
|
|
229
|
-
* @type {Map<string, (data: any) => void>}
|
|
230
235
|
*/
|
|
231
236
|
this.listeners = /* @__PURE__ */ new Set();
|
|
232
237
|
/**
|
|
233
238
|
* Check whether the sdk is in editor or not.
|
|
234
239
|
* If isDesignMode is true, it means the sdk is isDesignMode mode, render the editor UI,
|
|
235
240
|
* else render the preview UI, plain HTML + CSS + React hydrate
|
|
236
|
-
* @type {boolean}
|
|
237
241
|
*/
|
|
238
242
|
this.isDesignMode = false;
|
|
239
243
|
/**
|
|
@@ -242,12 +246,10 @@ var Weaverse = class {
|
|
|
242
246
|
this.platformType = "shopify-section";
|
|
243
247
|
/**
|
|
244
248
|
* Check whether the sdk is in preview mode or not
|
|
245
|
-
* @type {boolean}
|
|
246
249
|
*/
|
|
247
250
|
this.isPreviewMode = false;
|
|
248
251
|
/**
|
|
249
252
|
* Use in element to optionally render special HTML for hydration
|
|
250
|
-
* @type {boolean}
|
|
251
253
|
*/
|
|
252
254
|
this.ssrMode = false;
|
|
253
255
|
this.elementSchemas = [];
|
|
@@ -265,42 +267,11 @@ var Weaverse = class {
|
|
|
265
267
|
...externalConfig
|
|
266
268
|
});
|
|
267
269
|
};
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
projectId,
|
|
272
|
-
data,
|
|
273
|
-
platformType,
|
|
274
|
-
mediaBreakPoints,
|
|
275
|
-
isDesignMode,
|
|
276
|
-
ssrMode,
|
|
277
|
-
elementSchemas,
|
|
278
|
-
pageId
|
|
270
|
+
Object.entries(params).forEach(([k, v]) => {
|
|
271
|
+
let key = k;
|
|
272
|
+
this[key] = v || this[key];
|
|
279
273
|
});
|
|
280
|
-
|
|
281
|
-
init({
|
|
282
|
-
weaverseHost,
|
|
283
|
-
weaverseVersion,
|
|
284
|
-
elementSchemas,
|
|
285
|
-
platformType,
|
|
286
|
-
projectId,
|
|
287
|
-
data,
|
|
288
|
-
mediaBreakPoints,
|
|
289
|
-
isDesignMode,
|
|
290
|
-
ssrMode,
|
|
291
|
-
pageId
|
|
292
|
-
} = {}) {
|
|
293
|
-
this.elementSchemas = elementSchemas || this.elementSchemas;
|
|
294
|
-
this.weaverseHost = weaverseHost || this.weaverseHost;
|
|
295
|
-
this.weaverseVersion = weaverseVersion || this.weaverseVersion;
|
|
296
|
-
this.projectId = projectId || this.projectId;
|
|
297
|
-
this.pageId = pageId || this.pageId;
|
|
298
|
-
this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
|
|
299
|
-
this.isDesignMode = isDesignMode || this.isDesignMode;
|
|
300
|
-
this.ssrMode = ssrMode || this.ssrMode;
|
|
301
|
-
this.platformType = platformType || this.platformType;
|
|
302
|
-
this.data = data || this.data;
|
|
303
|
-
this.initProjectItemData();
|
|
274
|
+
this.initProject();
|
|
304
275
|
this.initStitches();
|
|
305
276
|
}
|
|
306
277
|
/**
|
|
@@ -330,12 +301,20 @@ var Weaverse = class {
|
|
|
330
301
|
item.triggerUpdate();
|
|
331
302
|
});
|
|
332
303
|
}
|
|
304
|
+
/**
|
|
305
|
+
* When applying new template,
|
|
306
|
+
* we need to reset the project data and re-initialize the project item data
|
|
307
|
+
* @param data {WeaverseProjectDataType}
|
|
308
|
+
*/
|
|
333
309
|
setProjectData(data) {
|
|
334
310
|
this.data = data;
|
|
335
|
-
this.
|
|
311
|
+
this.initProject();
|
|
336
312
|
this.triggerUpdate();
|
|
337
313
|
}
|
|
338
|
-
|
|
314
|
+
/**
|
|
315
|
+
* Create new WeaverseItemStore instance for each item in project data
|
|
316
|
+
*/
|
|
317
|
+
initProject() {
|
|
339
318
|
const data = this.data;
|
|
340
319
|
if (data?.items) {
|
|
341
320
|
data.items.forEach((item) => {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/core.ts","../src/utils/load-script.ts","../src/utils/index.ts","../src/utils/styles.ts"],"sourcesContent":["export * from \"./types\"\nexport * from \"./core\"\nexport * from \"./utils\"\n","// TODO: Implement Weaverse SDK class\n// Only core code is implemented here, avoid importing other packages,\n// the core code should be framework agnostic, no react, vue, angular, etc.\n// noinspection JSUnusedGlobalSymbols\n\n// using stitches core only for framework-agnostic code\nimport * as stitches from \"@stitches/core\"\nimport type Stitches from \"@stitches/core/types/stitches\"\nimport type { RefObject } from \"react\"\nimport type {\n BreakPoints,\n ElementData,\n ElementSchema,\n PlatformTypeEnum,\n WeaverseElement,\n WeaverseProjectDataType,\n WeaverseType,\n} from \"./types\"\nimport { merge } from \"./utils\"\nimport { stitchesUtils } from \"./utils/styles\"\n\n/**\n * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data\n * @param itemData {ElementData} Weaverse item data\n * @param weaverse {Weaverse} Weaverse instance\n * @example\n * useEffect(() => {\n * let handleUpdate = (update: any) => {\n * setData({...update})\n * }\n * itemInstance.subscribe(handleUpdate)\n * return () => {\n * itemInstance.unsubscribe(handleUpdate)\n * }\n * }, [])\n */\nexport class WeaverseItemStore {\n listeners: Set<any> = new Set()\n ref: RefObject<HTMLElement> = {\n current: null,\n }\n weaverse: Weaverse\n stitchesClass = \"\"\n _data: ElementData = { id: \"\", type: \"\" }\n\n constructor(itemData: ElementData, weaverse: Weaverse) {\n let { type, id } = itemData\n this.weaverse = weaverse\n if (id && type) {\n weaverse.itemInstances.set(id, this)\n this.data = { ...itemData }\n }\n }\n\n get _id() {\n return this._data.id\n }\n get _element() {\n return this.ref.current\n }\n get _flags() {\n return this.Element?.schema?.flags || {}\n }\n\n get Element() {\n return this.weaverse.elementInstances.get(this._data.type!)\n }\n\n set data(data: Omit<ElementData, \"id\" | \"type\">) {\n this._data = { ...this.data, ...data }\n }\n\n get data(): ElementData {\n let defaultCss = this.Element?.defaultCss || {}\n let currentCss = this._data.css || {}\n let css = merge(defaultCss, currentCss)\n let defaultData = { ...this.Element?.Component?.defaultProps, ...(this.Element?.extraData || {}) }\n return { ...defaultData, ...this._data, css }\n }\n\n setData = (data: Omit<ElementData, \"id\" | \"type\">) => {\n this.data = Object.assign(this.data, data)\n this.triggerUpdate()\n return this.data\n }\n\n subscribe = (fn: any) => {\n this.listeners.add(fn)\n }\n\n unsubscribe = (fn: any) => {\n this.listeners.delete(fn)\n }\n\n triggerUpdate = () => {\n this.listeners.forEach((fn) => {\n return fn(this.data)\n })\n }\n}\n\nexport class Weaverse {\n /**\n * The `weaverse-content-root` element of Weaverse SDK\n */\n contentRootElement: HTMLElement | undefined\n /**\n * For storing, registering element React component from Weaverse or created by user/developer\n */\n elementInstances = new Map<string, WeaverseElement>()\n /**\n * list of element/items store to provide data, handle state update, state sharing, etc.\n */\n itemInstances = new Map<string | number, WeaverseItemStore>()\n /**\n * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n * @type {string}\n */\n weaverseHost = \"https://studio.weaverse.io\"\n /**\n * Weaverse version, it can be used to load the correct version of Weaverse SDK\n * @type {string}\n */\n weaverseVersion = \"\"\n /**\n * Weaverse project key to access project data via API\n * @type {string}\n */\n projectId = \"\"\n\n pageId = \"\"\n /**\n * Weaverse project data, by default, user can provide project data via React Component:\n * <WeaverseRoot data={data} /> it will be used to server-side rendering\n */\n data: WeaverseProjectDataType = {\n rootId: \"\",\n items: [],\n script: { css: \"\", js: \"\" },\n }\n /**\n * Storing subscribe callback function for any component that want to listen to the change of WeaverseRoot\n * @type {Map<string, (data: any) => void>}\n */\n listeners: Set<any> = new Set()\n /**\n * Check whether the sdk is in editor or not.\n * If isDesignMode is true, it means the sdk is isDesignMode mode, render the editor UI,\n * else render the preview UI, plain HTML + CSS + React hydrate\n * @type {boolean}\n */\n isDesignMode = false\n\n /**\n * Check the platform, shopify-section or react-ssr(hydrogen)\n */\n platformType: PlatformTypeEnum = \"shopify-section\"\n\n /**\n * Check whether the sdk is in preview mode or not\n * @type {boolean}\n */\n isPreviewMode = false\n\n /**\n * Use in element to optionally render special HTML for hydration\n * @type {boolean}\n */\n ssrMode = false\n /**\n * Stitches instance for handling CSS stylesheet, media, theme for Weaverse project\n */\n stitchesInstance: Stitches | any\n\n studioBridge?: any\n elementSchemas: ElementSchema[] = []\n static WeaverseItemStore: typeof WeaverseItemStore = WeaverseItemStore\n\n mediaBreakPoints: BreakPoints = {\n desktop: \"all\",\n // max-width need to subtract 0.02px to prevent bug https://getbootstrap.com/docs/5.1/layout/breakpoints/#max-width\n // tablet: \"(max-width: 1023.98px)\", // to set css for tablet, {'@tablet' : { // css }},\n mobile: \"(max-width: 767.98px)\",\n }\n\n /**\n * constructor\n * @param weaverseHost {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n * @param projectId {string} Weaverse project key to access project data via API\n * @param data {WeaverseProjectDataType} Weaverse project data, by default, user can provide project data via React Component.\n * @param mediaBreakPoints {object} Pass down custom media query breakpoints or just use the default.\n * @param isDesignMode {boolean} check whether the sdk is isDesignMode or not\n * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration\n * @param elementSchemas {Array<ElementSchema>} List of element schemas\n * @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)\n */\n constructor({\n weaverseHost,\n weaverseVersion,\n projectId,\n data,\n mediaBreakPoints,\n isDesignMode,\n ssrMode,\n elementSchemas,\n platformType,\n pageId,\n }: WeaverseType = {}) {\n this.init({\n weaverseHost,\n weaverseVersion,\n projectId,\n data,\n platformType,\n mediaBreakPoints,\n isDesignMode,\n ssrMode,\n elementSchemas,\n pageId,\n })\n }\n\n init({\n weaverseHost,\n weaverseVersion,\n elementSchemas,\n platformType,\n projectId,\n data,\n mediaBreakPoints,\n isDesignMode,\n ssrMode,\n pageId,\n }: WeaverseType = {}) {\n this.elementSchemas = elementSchemas || this.elementSchemas\n this.weaverseHost = weaverseHost || this.weaverseHost\n this.weaverseVersion = weaverseVersion || this.weaverseVersion\n this.projectId = projectId || this.projectId\n this.pageId = pageId || this.pageId\n this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints\n this.isDesignMode = isDesignMode || this.isDesignMode\n this.ssrMode = ssrMode || this.ssrMode\n this.platformType = platformType || this.platformType\n this.data = data || this.data\n this.initProjectItemData()\n this.initStitches()\n }\n\n /**\n * Register the custom React Component to Weaverse, store it into Weaverse.elementInstances\n * @param element {WeaverseElement} custom React Component\n */\n registerElement(element: WeaverseElement) {\n if (element?.type) {\n if (!this.elementInstances.has(element.type)) {\n this.elementInstances.set(element?.type, element)\n }\n } else {\n console.error(\"Weaverse: registerElement: `type` is required\")\n }\n }\n\n initStitches = (externalConfig = {}) => {\n this.stitchesInstance =\n this.stitchesInstance ||\n stitches.createStitches({\n prefix: \"weaverse\",\n media: this.mediaBreakPoints,\n utils: stitchesUtils,\n ...externalConfig,\n })\n }\n\n subscribe(fn: any) {\n this.listeners.add(fn)\n }\n\n unsubscribe(fn: any) {\n this.listeners.delete(fn)\n }\n\n triggerUpdate() {\n this.listeners.forEach((fn) => fn())\n }\n refreshAllItems() {\n this.itemInstances.forEach((item) => {\n item.triggerUpdate()\n })\n }\n\n setProjectData(data: WeaverseProjectDataType) {\n this.data = data\n this.initProjectItemData()\n this.triggerUpdate()\n }\n\n initProjectItemData() {\n const data = this.data\n if (data?.items) {\n data.items.forEach((item) => {\n if (!this.itemInstances.get(item.id as string | number)) {\n new WeaverseItemStore(item, this)\n }\n })\n }\n }\n}\n","export let loadScript = (src: string) => {\n return new Promise((resolve, reject) => {\n let script = document.createElement(\"script\")\n script.src = src\n script.onload = resolve\n script.onerror = reject\n script.defer = true\n document.body.appendChild(script)\n })\n}\n\nexport default loadScript\n","export let isReactNative = typeof navigator === \"object\" && navigator.product === \"ReactNative\"\nexport let isBrowser = typeof window !== \"undefined\" && !isReactNative\nexport let isIframe = isBrowser && window.top !== window.self\n\n/**\n * Deep merge two objects.\n * @param target\n * @param source\n */\nexport function merge(target: Record<string, any>, source: Record<string, any>) {\n let t = { ...(target || {}) }\n // Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties\n for (let key of Object.keys(source)) {\n if (source[key] instanceof Object && !Array.isArray(source[key])) {\n Object.assign(source[key], merge(t[key], source[key]))\n }\n }\n\n // Join `target` and modified `source`\n Object.assign(t || {}, source)\n return t\n}\n\nexport { loadScript } from \"./load-script\"\n","export let stitchesUtils = {\n // Abbreviated margin properties\n m: (value: string) => ({\n margin: value,\n }),\n mt: (value: string) => ({\n marginTop: value,\n }),\n mr: (value: string) => ({\n marginRight: value,\n }),\n mb: (value: string) => ({\n marginBottom: value,\n }),\n ml: (value: string) => ({\n marginLeft: value,\n }),\n mx: (value: string) => ({\n marginLeft: value,\n marginRight: value,\n }),\n my: (value: string) => ({\n marginTop: value,\n marginBottom: value,\n }),\n\n // A property for applying width/height together\n size: (value: string) => ({\n width: value,\n height: value,\n }),\n // Abbreviated padding properties\n px: (value: string) => ({\n paddingLeft: value,\n paddingRight: value,\n }),\n py: (value: string) => ({\n paddingTop: value,\n paddingBottom: value,\n }),\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/core.ts","../src/utils/load-script.ts","../src/utils/index.ts","../src/utils/styles.ts"],"sourcesContent":["export * from \"./types\"\nexport * from \"./core\"\nexport * from \"./utils\"\n","// TODO: Implement Weaverse SDK class\n// Only core code is implemented here, avoid importing other packages,\n// the core code should be framework agnostic, no react, vue, angular, etc.\n// noinspection JSUnusedGlobalSymbols\n\n// using stitches core only for framework-agnostic code\nimport * as stitches from \"@stitches/core\"\nimport type Stitches from \"@stitches/core/types/stitches\"\nimport type { RefObject } from \"react\"\nimport type {\n BreakPoints,\n ElementData,\n ElementSchema,\n PlatformTypeEnum,\n WeaverseElement,\n WeaverseProjectDataType,\n WeaverseType,\n} from \"./types\"\nimport { merge } from \"./utils\"\nimport { stitchesUtils } from \"./utils/styles\"\n\nexport class WeaverseItemStore {\n weaverse: Weaverse\n listeners: Set<(_: ElementData) => void> = new Set()\n ref: RefObject<HTMLElement> = { current: null }\n platformType: PlatformTypeEnum = \"shopify-section\"\n stitchesClass = \"\"\n _store: ElementData = { id: \"\", type: \"\" }\n\n constructor(itemData: ElementData, weaverse: Weaverse) {\n let { type, id } = itemData\n this.weaverse = weaverse\n this.platformType = weaverse.platformType\n if (id && type) {\n weaverse.itemInstances.set(id, this)\n this._store = { ...itemData }\n }\n }\n\n get _id() {\n return this._store.id\n }\n get _element() {\n return this.ref.current\n }\n get _flags() {\n return this.Element?.schema?.flags || {}\n }\n get Element() {\n return this.weaverse.elementInstances.get(this._store.type)\n }\n\n set data(update: Omit<ElementData, \"id\" | \"type\">) {\n if (this.platformType === \"shopify-hydrogen\") {\n let { children, ...rest } = update\n if (children) {\n this._store.children = children\n }\n this._store.data = merge(this._store.data, rest)\n } else {\n this._store = { ...this.data, ...update }\n }\n }\n\n get data(): ElementData {\n let defaultProps = { ...this.Element?.Component?.defaultProps }\n if (this.platformType === \"shopify-hydrogen\") {\n return {\n ...this._store,\n data: { ...defaultProps?.data, ...this._store.data },\n }\n } else {\n let defaultCss = this.Element?.defaultCss || {}\n let currentCss = this._store.css || {}\n let css = merge(defaultCss, currentCss)\n let extraData = this.Element?.extraData\n return { ...defaultProps, ...extraData, ...this._store, css }\n }\n }\n\n setData = (update: Omit<ElementData, \"id\" | \"type\">) => {\n if (this.platformType === \"shopify-hydrogen\") {\n this.data = update\n } else {\n this.data = Object.assign(this.data, update)\n }\n this.triggerUpdate()\n return this.data\n }\n\n subscribe = (fn: (_: ElementData) => void) => {\n this.listeners.add(fn)\n }\n\n unsubscribe = (fn: (_: ElementData) => void) => {\n this.listeners.delete(fn)\n }\n\n triggerUpdate = () => {\n this.listeners.forEach((fn) => {\n return fn(this.data)\n })\n }\n}\n\nexport class Weaverse {\n /**\n * The `weaverse-content-root` element of Weaverse SDK\n */\n contentRootElement: HTMLElement | undefined\n /**\n * For storing, registering element React component from Weaverse or created by user/developer\n */\n elementInstances = new Map<string, WeaverseElement>()\n /**\n * list of element/items store to provide data, handle state update, state sharing, etc.\n */\n itemInstances = new Map<string | number, WeaverseItemStore>()\n /**\n * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n */\n weaverseHost = \"https://studio.weaverse.io\"\n /**\n * Weaverse version, it can be used to load the correct version of Weaverse SDK\n */\n weaverseVersion = \"\"\n /**\n * Weaverse project key to access project data via API\n */\n projectId = \"\"\n\n pageId = \"\"\n /**\n * Weaverse project data, by default, user can provide project data via React Component:\n * <WeaverseRoot data={data} /> it will be used to server-side rendering\n */\n data: WeaverseProjectDataType = {\n rootId: \"\",\n items: [],\n script: { css: \"\", js: \"\" },\n }\n /**\n * Storing subscribe callback function for any component that want to listen to the change of WeaverseRoot\n */\n listeners: Set<() => void> = new Set()\n /**\n * Check whether the sdk is in editor or not.\n * If isDesignMode is true, it means the sdk is isDesignMode mode, render the editor UI,\n * else render the preview UI, plain HTML + CSS + React hydrate\n */\n isDesignMode = false\n\n /**\n * Check the platform, shopify-section or react-ssr(hydrogen)\n */\n platformType: PlatformTypeEnum = \"shopify-section\"\n\n /**\n * Check whether the sdk is in preview mode or not\n */\n isPreviewMode = false\n\n /**\n * Use in element to optionally render special HTML for hydration\n */\n ssrMode = false\n /**\n * Stitches instance for handling CSS stylesheet, media, theme for Weaverse project\n */\n stitchesInstance: Stitches | any\n\n studioBridge?: any\n elementSchemas: ElementSchema[] = []\n static WeaverseItemStore: typeof WeaverseItemStore = WeaverseItemStore\n\n mediaBreakPoints: BreakPoints = {\n desktop: \"all\",\n // max-width need to subtract 0.02px to prevent bug https://getbootstrap.com/docs/5.1/layout/breakpoints/#max-width\n // tablet: \"(max-width: 1023.98px)\", // to set css for tablet, {'@tablet' : { // css }},\n mobile: \"(max-width: 767.98px)\",\n }\n\n /**\n * constructor\n * @param weaverseHost {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n * @param projectId {string} Weaverse project key to access project data via API\n * @param data {WeaverseProjectDataType} Weaverse project data, by default, user can provide project data via React Component.\n * @param mediaBreakPoints {object} Pass down custom media query breakpoints or just use the default.\n * @param isDesignMode {boolean} check whether the sdk is isDesignMode or not\n * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration\n * @param elementSchemas {Array<ElementSchema>} List of element schemas\n * @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)\n */\n constructor(params: WeaverseType = {}) {\n Object.entries(params).forEach(([k, v]) => {\n let key = k as keyof typeof this\n this[key] = v || this[key]\n })\n this.initProject()\n this.initStitches()\n }\n\n /**\n * Register the custom React Component to Weaverse, store it into Weaverse.elementInstances\n * @param element {WeaverseElement} custom React Component\n */\n registerElement(element: WeaverseElement) {\n if (element?.type) {\n if (!this.elementInstances.has(element.type)) {\n this.elementInstances.set(element?.type, element)\n }\n } else {\n console.error(\"Weaverse: registerElement: `type` is required\")\n }\n }\n\n initStitches = (externalConfig = {}) => {\n this.stitchesInstance =\n this.stitchesInstance ||\n stitches.createStitches({\n prefix: \"weaverse\",\n media: this.mediaBreakPoints,\n utils: stitchesUtils,\n ...externalConfig,\n })\n }\n\n subscribe(fn: any) {\n this.listeners.add(fn)\n }\n\n unsubscribe(fn: any) {\n this.listeners.delete(fn)\n }\n\n triggerUpdate() {\n this.listeners.forEach((fn) => fn())\n }\n refreshAllItems() {\n this.itemInstances.forEach((item) => {\n item.triggerUpdate()\n })\n }\n\n /**\n * When applying new template,\n * we need to reset the project data and re-initialize the project item data\n * @param data {WeaverseProjectDataType}\n */\n setProjectData(data: WeaverseProjectDataType) {\n this.data = data\n this.initProject()\n this.triggerUpdate()\n }\n\n /**\n * Create new WeaverseItemStore instance for each item in project data\n */\n initProject() {\n const data = this.data\n if (data?.items) {\n data.items.forEach((item) => {\n if (!this.itemInstances.get(item.id as string | number)) {\n new WeaverseItemStore(item, this)\n }\n })\n }\n }\n}\n","export let loadScript = (src: string) => {\n return new Promise((resolve, reject) => {\n let script = document.createElement(\"script\")\n script.src = src\n script.onload = resolve\n script.onerror = reject\n script.defer = true\n document.body.appendChild(script)\n })\n}\n\nexport default loadScript\n","export let isReactNative = typeof navigator === \"object\" && navigator.product === \"ReactNative\"\nexport let isBrowser = typeof window !== \"undefined\" && !isReactNative\nexport let isIframe = isBrowser && window.top !== window.self\n\n/**\n * Deep merge two objects.\n * @param target\n * @param source\n */\nexport function merge(target: Record<string, any>, source: Record<string, any>) {\n let t = { ...(target || {}) }\n // Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties\n for (let key of Object.keys(source)) {\n if (source[key] instanceof Object && !Array.isArray(source[key])) {\n Object.assign(source[key], merge(t[key], source[key]))\n }\n }\n\n // Join `target` and modified `source`\n Object.assign(t || {}, source)\n return t\n}\n\nexport { loadScript } from \"./load-script\"\n","export let stitchesUtils = {\n // Abbreviated margin properties\n m: (value: string) => ({\n margin: value,\n }),\n mt: (value: string) => ({\n marginTop: value,\n }),\n mr: (value: string) => ({\n marginRight: value,\n }),\n mb: (value: string) => ({\n marginBottom: value,\n }),\n ml: (value: string) => ({\n marginLeft: value,\n }),\n mx: (value: string) => ({\n marginLeft: value,\n marginRight: value,\n }),\n my: (value: string) => ({\n marginTop: value,\n marginBottom: value,\n }),\n\n // A property for applying width/height together\n size: (value: string) => ({\n width: value,\n height: value,\n }),\n // Abbreviated padding properties\n px: (value: string) => ({\n paddingLeft: value,\n paddingRight: value,\n }),\n py: (value: string) => ({\n paddingTop: value,\n paddingBottom: value,\n }),\n}\n"],"mappings":"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","names":[]}
|
package/dist/index.mjs
CHANGED
|
@@ -74,13 +74,16 @@ var stitchesUtils = {
|
|
|
74
74
|
var WeaverseItemStore = class {
|
|
75
75
|
constructor(itemData, weaverse) {
|
|
76
76
|
this.listeners = /* @__PURE__ */ new Set();
|
|
77
|
-
this.ref = {
|
|
78
|
-
|
|
79
|
-
};
|
|
77
|
+
this.ref = { current: null };
|
|
78
|
+
this.platformType = "shopify-section";
|
|
80
79
|
this.stitchesClass = "";
|
|
81
|
-
this.
|
|
82
|
-
this.setData = (
|
|
83
|
-
|
|
80
|
+
this._store = { id: "", type: "" };
|
|
81
|
+
this.setData = (update) => {
|
|
82
|
+
if (this.platformType === "shopify-hydrogen") {
|
|
83
|
+
this.data = update;
|
|
84
|
+
} else {
|
|
85
|
+
this.data = Object.assign(this.data, update);
|
|
86
|
+
}
|
|
84
87
|
this.triggerUpdate();
|
|
85
88
|
return this.data;
|
|
86
89
|
};
|
|
@@ -97,13 +100,14 @@ var WeaverseItemStore = class {
|
|
|
97
100
|
};
|
|
98
101
|
let { type, id } = itemData;
|
|
99
102
|
this.weaverse = weaverse;
|
|
103
|
+
this.platformType = weaverse.platformType;
|
|
100
104
|
if (id && type) {
|
|
101
105
|
weaverse.itemInstances.set(id, this);
|
|
102
|
-
this.
|
|
106
|
+
this._store = { ...itemData };
|
|
103
107
|
}
|
|
104
108
|
}
|
|
105
109
|
get _id() {
|
|
106
|
-
return this.
|
|
110
|
+
return this._store.id;
|
|
107
111
|
}
|
|
108
112
|
get _element() {
|
|
109
113
|
return this.ref.current;
|
|
@@ -112,17 +116,33 @@ var WeaverseItemStore = class {
|
|
|
112
116
|
return this.Element?.schema?.flags || {};
|
|
113
117
|
}
|
|
114
118
|
get Element() {
|
|
115
|
-
return this.weaverse.elementInstances.get(this.
|
|
119
|
+
return this.weaverse.elementInstances.get(this._store.type);
|
|
116
120
|
}
|
|
117
|
-
set data(
|
|
118
|
-
this.
|
|
121
|
+
set data(update) {
|
|
122
|
+
if (this.platformType === "shopify-hydrogen") {
|
|
123
|
+
let { children, ...rest } = update;
|
|
124
|
+
if (children) {
|
|
125
|
+
this._store.children = children;
|
|
126
|
+
}
|
|
127
|
+
this._store.data = merge(this._store.data, rest);
|
|
128
|
+
} else {
|
|
129
|
+
this._store = { ...this.data, ...update };
|
|
130
|
+
}
|
|
119
131
|
}
|
|
120
132
|
get data() {
|
|
121
|
-
let
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
133
|
+
let defaultProps = { ...this.Element?.Component?.defaultProps };
|
|
134
|
+
if (this.platformType === "shopify-hydrogen") {
|
|
135
|
+
return {
|
|
136
|
+
...this._store,
|
|
137
|
+
data: { ...defaultProps?.data, ...this._store.data }
|
|
138
|
+
};
|
|
139
|
+
} else {
|
|
140
|
+
let defaultCss = this.Element?.defaultCss || {};
|
|
141
|
+
let currentCss = this._store.css || {};
|
|
142
|
+
let css = merge(defaultCss, currentCss);
|
|
143
|
+
let extraData = this.Element?.extraData;
|
|
144
|
+
return { ...defaultProps, ...extraData, ...this._store, css };
|
|
145
|
+
}
|
|
126
146
|
}
|
|
127
147
|
};
|
|
128
148
|
var Weaverse = class {
|
|
@@ -137,18 +157,7 @@ var Weaverse = class {
|
|
|
137
157
|
* @param elementSchemas {Array<ElementSchema>} List of element schemas
|
|
138
158
|
* @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)
|
|
139
159
|
*/
|
|
140
|
-
constructor({
|
|
141
|
-
weaverseHost,
|
|
142
|
-
weaverseVersion,
|
|
143
|
-
projectId,
|
|
144
|
-
data,
|
|
145
|
-
mediaBreakPoints,
|
|
146
|
-
isDesignMode,
|
|
147
|
-
ssrMode,
|
|
148
|
-
elementSchemas,
|
|
149
|
-
platformType,
|
|
150
|
-
pageId
|
|
151
|
-
} = {}) {
|
|
160
|
+
constructor(params = {}) {
|
|
152
161
|
/**
|
|
153
162
|
* For storing, registering element React component from Weaverse or created by user/developer
|
|
154
163
|
*/
|
|
@@ -159,17 +168,14 @@ var Weaverse = class {
|
|
|
159
168
|
this.itemInstances = /* @__PURE__ */ new Map();
|
|
160
169
|
/**
|
|
161
170
|
* Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
|
|
162
|
-
* @type {string}
|
|
163
171
|
*/
|
|
164
172
|
this.weaverseHost = "https://studio.weaverse.io";
|
|
165
173
|
/**
|
|
166
174
|
* Weaverse version, it can be used to load the correct version of Weaverse SDK
|
|
167
|
-
* @type {string}
|
|
168
175
|
*/
|
|
169
176
|
this.weaverseVersion = "";
|
|
170
177
|
/**
|
|
171
178
|
* Weaverse project key to access project data via API
|
|
172
|
-
* @type {string}
|
|
173
179
|
*/
|
|
174
180
|
this.projectId = "";
|
|
175
181
|
this.pageId = "";
|
|
@@ -184,14 +190,12 @@ var Weaverse = class {
|
|
|
184
190
|
};
|
|
185
191
|
/**
|
|
186
192
|
* Storing subscribe callback function for any component that want to listen to the change of WeaverseRoot
|
|
187
|
-
* @type {Map<string, (data: any) => void>}
|
|
188
193
|
*/
|
|
189
194
|
this.listeners = /* @__PURE__ */ new Set();
|
|
190
195
|
/**
|
|
191
196
|
* Check whether the sdk is in editor or not.
|
|
192
197
|
* If isDesignMode is true, it means the sdk is isDesignMode mode, render the editor UI,
|
|
193
198
|
* else render the preview UI, plain HTML + CSS + React hydrate
|
|
194
|
-
* @type {boolean}
|
|
195
199
|
*/
|
|
196
200
|
this.isDesignMode = false;
|
|
197
201
|
/**
|
|
@@ -200,12 +204,10 @@ var Weaverse = class {
|
|
|
200
204
|
this.platformType = "shopify-section";
|
|
201
205
|
/**
|
|
202
206
|
* Check whether the sdk is in preview mode or not
|
|
203
|
-
* @type {boolean}
|
|
204
207
|
*/
|
|
205
208
|
this.isPreviewMode = false;
|
|
206
209
|
/**
|
|
207
210
|
* Use in element to optionally render special HTML for hydration
|
|
208
|
-
* @type {boolean}
|
|
209
211
|
*/
|
|
210
212
|
this.ssrMode = false;
|
|
211
213
|
this.elementSchemas = [];
|
|
@@ -223,42 +225,11 @@ var Weaverse = class {
|
|
|
223
225
|
...externalConfig
|
|
224
226
|
});
|
|
225
227
|
};
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
projectId,
|
|
230
|
-
data,
|
|
231
|
-
platformType,
|
|
232
|
-
mediaBreakPoints,
|
|
233
|
-
isDesignMode,
|
|
234
|
-
ssrMode,
|
|
235
|
-
elementSchemas,
|
|
236
|
-
pageId
|
|
228
|
+
Object.entries(params).forEach(([k, v]) => {
|
|
229
|
+
let key = k;
|
|
230
|
+
this[key] = v || this[key];
|
|
237
231
|
});
|
|
238
|
-
|
|
239
|
-
init({
|
|
240
|
-
weaverseHost,
|
|
241
|
-
weaverseVersion,
|
|
242
|
-
elementSchemas,
|
|
243
|
-
platformType,
|
|
244
|
-
projectId,
|
|
245
|
-
data,
|
|
246
|
-
mediaBreakPoints,
|
|
247
|
-
isDesignMode,
|
|
248
|
-
ssrMode,
|
|
249
|
-
pageId
|
|
250
|
-
} = {}) {
|
|
251
|
-
this.elementSchemas = elementSchemas || this.elementSchemas;
|
|
252
|
-
this.weaverseHost = weaverseHost || this.weaverseHost;
|
|
253
|
-
this.weaverseVersion = weaverseVersion || this.weaverseVersion;
|
|
254
|
-
this.projectId = projectId || this.projectId;
|
|
255
|
-
this.pageId = pageId || this.pageId;
|
|
256
|
-
this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
|
|
257
|
-
this.isDesignMode = isDesignMode || this.isDesignMode;
|
|
258
|
-
this.ssrMode = ssrMode || this.ssrMode;
|
|
259
|
-
this.platformType = platformType || this.platformType;
|
|
260
|
-
this.data = data || this.data;
|
|
261
|
-
this.initProjectItemData();
|
|
232
|
+
this.initProject();
|
|
262
233
|
this.initStitches();
|
|
263
234
|
}
|
|
264
235
|
/**
|
|
@@ -288,12 +259,20 @@ var Weaverse = class {
|
|
|
288
259
|
item.triggerUpdate();
|
|
289
260
|
});
|
|
290
261
|
}
|
|
262
|
+
/**
|
|
263
|
+
* When applying new template,
|
|
264
|
+
* we need to reset the project data and re-initialize the project item data
|
|
265
|
+
* @param data {WeaverseProjectDataType}
|
|
266
|
+
*/
|
|
291
267
|
setProjectData(data) {
|
|
292
268
|
this.data = data;
|
|
293
|
-
this.
|
|
269
|
+
this.initProject();
|
|
294
270
|
this.triggerUpdate();
|
|
295
271
|
}
|
|
296
|
-
|
|
272
|
+
/**
|
|
273
|
+
* Create new WeaverseItemStore instance for each item in project data
|
|
274
|
+
*/
|
|
275
|
+
initProject() {
|
|
297
276
|
const data = this.data;
|
|
298
277
|
if (data?.items) {
|
|
299
278
|
data.items.forEach((item) => {
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/core.ts","../src/utils/load-script.ts","../src/utils/index.ts","../src/utils/styles.ts"],"sourcesContent":["// TODO: Implement Weaverse SDK class\n// Only core code is implemented here, avoid importing other packages,\n// the core code should be framework agnostic, no react, vue, angular, etc.\n// noinspection JSUnusedGlobalSymbols\n\n// using stitches core only for framework-agnostic code\nimport * as stitches from \"@stitches/core\"\nimport type Stitches from \"@stitches/core/types/stitches\"\nimport type { RefObject } from \"react\"\nimport type {\n BreakPoints,\n ElementData,\n ElementSchema,\n PlatformTypeEnum,\n WeaverseElement,\n WeaverseProjectDataType,\n WeaverseType,\n} from \"./types\"\nimport { merge } from \"./utils\"\nimport { stitchesUtils } from \"./utils/styles\"\n\n/**\n * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data\n * @param itemData {ElementData} Weaverse item data\n * @param weaverse {Weaverse} Weaverse instance\n * @example\n * useEffect(() => {\n * let handleUpdate = (update: any) => {\n * setData({...update})\n * }\n * itemInstance.subscribe(handleUpdate)\n * return () => {\n * itemInstance.unsubscribe(handleUpdate)\n * }\n * }, [])\n */\nexport class WeaverseItemStore {\n listeners: Set<any> = new Set()\n ref: RefObject<HTMLElement> = {\n current: null,\n }\n weaverse: Weaverse\n stitchesClass = \"\"\n _data: ElementData = { id: \"\", type: \"\" }\n\n constructor(itemData: ElementData, weaverse: Weaverse) {\n let { type, id } = itemData\n this.weaverse = weaverse\n if (id && type) {\n weaverse.itemInstances.set(id, this)\n this.data = { ...itemData }\n }\n }\n\n get _id() {\n return this._data.id\n }\n get _element() {\n return this.ref.current\n }\n get _flags() {\n return this.Element?.schema?.flags || {}\n }\n\n get Element() {\n return this.weaverse.elementInstances.get(this._data.type!)\n }\n\n set data(data: Omit<ElementData, \"id\" | \"type\">) {\n this._data = { ...this.data, ...data }\n }\n\n get data(): ElementData {\n let defaultCss = this.Element?.defaultCss || {}\n let currentCss = this._data.css || {}\n let css = merge(defaultCss, currentCss)\n let defaultData = { ...this.Element?.Component?.defaultProps, ...(this.Element?.extraData || {}) }\n return { ...defaultData, ...this._data, css }\n }\n\n setData = (data: Omit<ElementData, \"id\" | \"type\">) => {\n this.data = Object.assign(this.data, data)\n this.triggerUpdate()\n return this.data\n }\n\n subscribe = (fn: any) => {\n this.listeners.add(fn)\n }\n\n unsubscribe = (fn: any) => {\n this.listeners.delete(fn)\n }\n\n triggerUpdate = () => {\n this.listeners.forEach((fn) => {\n return fn(this.data)\n })\n }\n}\n\nexport class Weaverse {\n /**\n * The `weaverse-content-root` element of Weaverse SDK\n */\n contentRootElement: HTMLElement | undefined\n /**\n * For storing, registering element React component from Weaverse or created by user/developer\n */\n elementInstances = new Map<string, WeaverseElement>()\n /**\n * list of element/items store to provide data, handle state update, state sharing, etc.\n */\n itemInstances = new Map<string | number, WeaverseItemStore>()\n /**\n * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n * @type {string}\n */\n weaverseHost = \"https://studio.weaverse.io\"\n /**\n * Weaverse version, it can be used to load the correct version of Weaverse SDK\n * @type {string}\n */\n weaverseVersion = \"\"\n /**\n * Weaverse project key to access project data via API\n * @type {string}\n */\n projectId = \"\"\n\n pageId = \"\"\n /**\n * Weaverse project data, by default, user can provide project data via React Component:\n * <WeaverseRoot data={data} /> it will be used to server-side rendering\n */\n data: WeaverseProjectDataType = {\n rootId: \"\",\n items: [],\n script: { css: \"\", js: \"\" },\n }\n /**\n * Storing subscribe callback function for any component that want to listen to the change of WeaverseRoot\n * @type {Map<string, (data: any) => void>}\n */\n listeners: Set<any> = new Set()\n /**\n * Check whether the sdk is in editor or not.\n * If isDesignMode is true, it means the sdk is isDesignMode mode, render the editor UI,\n * else render the preview UI, plain HTML + CSS + React hydrate\n * @type {boolean}\n */\n isDesignMode = false\n\n /**\n * Check the platform, shopify-section or react-ssr(hydrogen)\n */\n platformType: PlatformTypeEnum = \"shopify-section\"\n\n /**\n * Check whether the sdk is in preview mode or not\n * @type {boolean}\n */\n isPreviewMode = false\n\n /**\n * Use in element to optionally render special HTML for hydration\n * @type {boolean}\n */\n ssrMode = false\n /**\n * Stitches instance for handling CSS stylesheet, media, theme for Weaverse project\n */\n stitchesInstance: Stitches | any\n\n studioBridge?: any\n elementSchemas: ElementSchema[] = []\n static WeaverseItemStore: typeof WeaverseItemStore = WeaverseItemStore\n\n mediaBreakPoints: BreakPoints = {\n desktop: \"all\",\n // max-width need to subtract 0.02px to prevent bug https://getbootstrap.com/docs/5.1/layout/breakpoints/#max-width\n // tablet: \"(max-width: 1023.98px)\", // to set css for tablet, {'@tablet' : { // css }},\n mobile: \"(max-width: 767.98px)\",\n }\n\n /**\n * constructor\n * @param weaverseHost {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n * @param projectId {string} Weaverse project key to access project data via API\n * @param data {WeaverseProjectDataType} Weaverse project data, by default, user can provide project data via React Component.\n * @param mediaBreakPoints {object} Pass down custom media query breakpoints or just use the default.\n * @param isDesignMode {boolean} check whether the sdk is isDesignMode or not\n * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration\n * @param elementSchemas {Array<ElementSchema>} List of element schemas\n * @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)\n */\n constructor({\n weaverseHost,\n weaverseVersion,\n projectId,\n data,\n mediaBreakPoints,\n isDesignMode,\n ssrMode,\n elementSchemas,\n platformType,\n pageId,\n }: WeaverseType = {}) {\n this.init({\n weaverseHost,\n weaverseVersion,\n projectId,\n data,\n platformType,\n mediaBreakPoints,\n isDesignMode,\n ssrMode,\n elementSchemas,\n pageId,\n })\n }\n\n init({\n weaverseHost,\n weaverseVersion,\n elementSchemas,\n platformType,\n projectId,\n data,\n mediaBreakPoints,\n isDesignMode,\n ssrMode,\n pageId,\n }: WeaverseType = {}) {\n this.elementSchemas = elementSchemas || this.elementSchemas\n this.weaverseHost = weaverseHost || this.weaverseHost\n this.weaverseVersion = weaverseVersion || this.weaverseVersion\n this.projectId = projectId || this.projectId\n this.pageId = pageId || this.pageId\n this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints\n this.isDesignMode = isDesignMode || this.isDesignMode\n this.ssrMode = ssrMode || this.ssrMode\n this.platformType = platformType || this.platformType\n this.data = data || this.data\n this.initProjectItemData()\n this.initStitches()\n }\n\n /**\n * Register the custom React Component to Weaverse, store it into Weaverse.elementInstances\n * @param element {WeaverseElement} custom React Component\n */\n registerElement(element: WeaverseElement) {\n if (element?.type) {\n if (!this.elementInstances.has(element.type)) {\n this.elementInstances.set(element?.type, element)\n }\n } else {\n console.error(\"Weaverse: registerElement: `type` is required\")\n }\n }\n\n initStitches = (externalConfig = {}) => {\n this.stitchesInstance =\n this.stitchesInstance ||\n stitches.createStitches({\n prefix: \"weaverse\",\n media: this.mediaBreakPoints,\n utils: stitchesUtils,\n ...externalConfig,\n })\n }\n\n subscribe(fn: any) {\n this.listeners.add(fn)\n }\n\n unsubscribe(fn: any) {\n this.listeners.delete(fn)\n }\n\n triggerUpdate() {\n this.listeners.forEach((fn) => fn())\n }\n refreshAllItems() {\n this.itemInstances.forEach((item) => {\n item.triggerUpdate()\n })\n }\n\n setProjectData(data: WeaverseProjectDataType) {\n this.data = data\n this.initProjectItemData()\n this.triggerUpdate()\n }\n\n initProjectItemData() {\n const data = this.data\n if (data?.items) {\n data.items.forEach((item) => {\n if (!this.itemInstances.get(item.id as string | number)) {\n new WeaverseItemStore(item, this)\n }\n })\n }\n }\n}\n","export let loadScript = (src: string) => {\n return new Promise((resolve, reject) => {\n let script = document.createElement(\"script\")\n script.src = src\n script.onload = resolve\n script.onerror = reject\n script.defer = true\n document.body.appendChild(script)\n })\n}\n\nexport default loadScript\n","export let isReactNative = typeof navigator === \"object\" && navigator.product === \"ReactNative\"\nexport let isBrowser = typeof window !== \"undefined\" && !isReactNative\nexport let isIframe = isBrowser && window.top !== window.self\n\n/**\n * Deep merge two objects.\n * @param target\n * @param source\n */\nexport function merge(target: Record<string, any>, source: Record<string, any>) {\n let t = { ...(target || {}) }\n // Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties\n for (let key of Object.keys(source)) {\n if (source[key] instanceof Object && !Array.isArray(source[key])) {\n Object.assign(source[key], merge(t[key], source[key]))\n }\n }\n\n // Join `target` and modified `source`\n Object.assign(t || {}, source)\n return t\n}\n\nexport { loadScript } from \"./load-script\"\n","export let stitchesUtils = {\n // Abbreviated margin properties\n m: (value: string) => ({\n margin: value,\n }),\n mt: (value: string) => ({\n marginTop: value,\n }),\n mr: (value: string) => ({\n marginRight: value,\n }),\n mb: (value: string) => ({\n marginBottom: value,\n }),\n ml: (value: string) => ({\n marginLeft: value,\n }),\n mx: (value: string) => ({\n marginLeft: value,\n marginRight: value,\n }),\n my: (value: string) => ({\n marginTop: value,\n marginBottom: value,\n }),\n\n // A property for applying width/height together\n size: (value: string) => ({\n width: value,\n height: value,\n }),\n // Abbreviated padding properties\n px: (value: string) => ({\n paddingLeft: value,\n paddingRight: value,\n }),\n py: (value: string) => ({\n paddingTop: value,\n paddingBottom: value,\n }),\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/core.ts","../src/utils/load-script.ts","../src/utils/index.ts","../src/utils/styles.ts"],"sourcesContent":["// TODO: Implement Weaverse SDK class\n// Only core code is implemented here, avoid importing other packages,\n// the core code should be framework agnostic, no react, vue, angular, etc.\n// noinspection JSUnusedGlobalSymbols\n\n// using stitches core only for framework-agnostic code\nimport * as stitches from \"@stitches/core\"\nimport type Stitches from \"@stitches/core/types/stitches\"\nimport type { RefObject } from \"react\"\nimport type {\n BreakPoints,\n ElementData,\n ElementSchema,\n PlatformTypeEnum,\n WeaverseElement,\n WeaverseProjectDataType,\n WeaverseType,\n} from \"./types\"\nimport { merge } from \"./utils\"\nimport { stitchesUtils } from \"./utils/styles\"\n\nexport class WeaverseItemStore {\n weaverse: Weaverse\n listeners: Set<(_: ElementData) => void> = new Set()\n ref: RefObject<HTMLElement> = { current: null }\n platformType: PlatformTypeEnum = \"shopify-section\"\n stitchesClass = \"\"\n _store: ElementData = { id: \"\", type: \"\" }\n\n constructor(itemData: ElementData, weaverse: Weaverse) {\n let { type, id } = itemData\n this.weaverse = weaverse\n this.platformType = weaverse.platformType\n if (id && type) {\n weaverse.itemInstances.set(id, this)\n this._store = { ...itemData }\n }\n }\n\n get _id() {\n return this._store.id\n }\n get _element() {\n return this.ref.current\n }\n get _flags() {\n return this.Element?.schema?.flags || {}\n }\n get Element() {\n return this.weaverse.elementInstances.get(this._store.type)\n }\n\n set data(update: Omit<ElementData, \"id\" | \"type\">) {\n if (this.platformType === \"shopify-hydrogen\") {\n let { children, ...rest } = update\n if (children) {\n this._store.children = children\n }\n this._store.data = merge(this._store.data, rest)\n } else {\n this._store = { ...this.data, ...update }\n }\n }\n\n get data(): ElementData {\n let defaultProps = { ...this.Element?.Component?.defaultProps }\n if (this.platformType === \"shopify-hydrogen\") {\n return {\n ...this._store,\n data: { ...defaultProps?.data, ...this._store.data },\n }\n } else {\n let defaultCss = this.Element?.defaultCss || {}\n let currentCss = this._store.css || {}\n let css = merge(defaultCss, currentCss)\n let extraData = this.Element?.extraData\n return { ...defaultProps, ...extraData, ...this._store, css }\n }\n }\n\n setData = (update: Omit<ElementData, \"id\" | \"type\">) => {\n if (this.platformType === \"shopify-hydrogen\") {\n this.data = update\n } else {\n this.data = Object.assign(this.data, update)\n }\n this.triggerUpdate()\n return this.data\n }\n\n subscribe = (fn: (_: ElementData) => void) => {\n this.listeners.add(fn)\n }\n\n unsubscribe = (fn: (_: ElementData) => void) => {\n this.listeners.delete(fn)\n }\n\n triggerUpdate = () => {\n this.listeners.forEach((fn) => {\n return fn(this.data)\n })\n }\n}\n\nexport class Weaverse {\n /**\n * The `weaverse-content-root` element of Weaverse SDK\n */\n contentRootElement: HTMLElement | undefined\n /**\n * For storing, registering element React component from Weaverse or created by user/developer\n */\n elementInstances = new Map<string, WeaverseElement>()\n /**\n * list of element/items store to provide data, handle state update, state sharing, etc.\n */\n itemInstances = new Map<string | number, WeaverseItemStore>()\n /**\n * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n */\n weaverseHost = \"https://studio.weaverse.io\"\n /**\n * Weaverse version, it can be used to load the correct version of Weaverse SDK\n */\n weaverseVersion = \"\"\n /**\n * Weaverse project key to access project data via API\n */\n projectId = \"\"\n\n pageId = \"\"\n /**\n * Weaverse project data, by default, user can provide project data via React Component:\n * <WeaverseRoot data={data} /> it will be used to server-side rendering\n */\n data: WeaverseProjectDataType = {\n rootId: \"\",\n items: [],\n script: { css: \"\", js: \"\" },\n }\n /**\n * Storing subscribe callback function for any component that want to listen to the change of WeaverseRoot\n */\n listeners: Set<() => void> = new Set()\n /**\n * Check whether the sdk is in editor or not.\n * If isDesignMode is true, it means the sdk is isDesignMode mode, render the editor UI,\n * else render the preview UI, plain HTML + CSS + React hydrate\n */\n isDesignMode = false\n\n /**\n * Check the platform, shopify-section or react-ssr(hydrogen)\n */\n platformType: PlatformTypeEnum = \"shopify-section\"\n\n /**\n * Check whether the sdk is in preview mode or not\n */\n isPreviewMode = false\n\n /**\n * Use in element to optionally render special HTML for hydration\n */\n ssrMode = false\n /**\n * Stitches instance for handling CSS stylesheet, media, theme for Weaverse project\n */\n stitchesInstance: Stitches | any\n\n studioBridge?: any\n elementSchemas: ElementSchema[] = []\n static WeaverseItemStore: typeof WeaverseItemStore = WeaverseItemStore\n\n mediaBreakPoints: BreakPoints = {\n desktop: \"all\",\n // max-width need to subtract 0.02px to prevent bug https://getbootstrap.com/docs/5.1/layout/breakpoints/#max-width\n // tablet: \"(max-width: 1023.98px)\", // to set css for tablet, {'@tablet' : { // css }},\n mobile: \"(max-width: 767.98px)\",\n }\n\n /**\n * constructor\n * @param weaverseHost {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000\n * @param projectId {string} Weaverse project key to access project data via API\n * @param data {WeaverseProjectDataType} Weaverse project data, by default, user can provide project data via React Component.\n * @param mediaBreakPoints {object} Pass down custom media query breakpoints or just use the default.\n * @param isDesignMode {boolean} check whether the sdk is isDesignMode or not\n * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration\n * @param elementSchemas {Array<ElementSchema>} List of element schemas\n * @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)\n */\n constructor(params: WeaverseType = {}) {\n Object.entries(params).forEach(([k, v]) => {\n let key = k as keyof typeof this\n this[key] = v || this[key]\n })\n this.initProject()\n this.initStitches()\n }\n\n /**\n * Register the custom React Component to Weaverse, store it into Weaverse.elementInstances\n * @param element {WeaverseElement} custom React Component\n */\n registerElement(element: WeaverseElement) {\n if (element?.type) {\n if (!this.elementInstances.has(element.type)) {\n this.elementInstances.set(element?.type, element)\n }\n } else {\n console.error(\"Weaverse: registerElement: `type` is required\")\n }\n }\n\n initStitches = (externalConfig = {}) => {\n this.stitchesInstance =\n this.stitchesInstance ||\n stitches.createStitches({\n prefix: \"weaverse\",\n media: this.mediaBreakPoints,\n utils: stitchesUtils,\n ...externalConfig,\n })\n }\n\n subscribe(fn: any) {\n this.listeners.add(fn)\n }\n\n unsubscribe(fn: any) {\n this.listeners.delete(fn)\n }\n\n triggerUpdate() {\n this.listeners.forEach((fn) => fn())\n }\n refreshAllItems() {\n this.itemInstances.forEach((item) => {\n item.triggerUpdate()\n })\n }\n\n /**\n * When applying new template,\n * we need to reset the project data and re-initialize the project item data\n * @param data {WeaverseProjectDataType}\n */\n setProjectData(data: WeaverseProjectDataType) {\n this.data = data\n this.initProject()\n this.triggerUpdate()\n }\n\n /**\n * Create new WeaverseItemStore instance for each item in project data\n */\n initProject() {\n const data = this.data\n if (data?.items) {\n data.items.forEach((item) => {\n if (!this.itemInstances.get(item.id as string | number)) {\n new WeaverseItemStore(item, this)\n }\n })\n }\n }\n}\n","export let loadScript = (src: string) => {\n return new Promise((resolve, reject) => {\n let script = document.createElement(\"script\")\n script.src = src\n script.onload = resolve\n script.onerror = reject\n script.defer = true\n document.body.appendChild(script)\n })\n}\n\nexport default loadScript\n","export let isReactNative = typeof navigator === \"object\" && navigator.product === \"ReactNative\"\nexport let isBrowser = typeof window !== \"undefined\" && !isReactNative\nexport let isIframe = isBrowser && window.top !== window.self\n\n/**\n * Deep merge two objects.\n * @param target\n * @param source\n */\nexport function merge(target: Record<string, any>, source: Record<string, any>) {\n let t = { ...(target || {}) }\n // Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties\n for (let key of Object.keys(source)) {\n if (source[key] instanceof Object && !Array.isArray(source[key])) {\n Object.assign(source[key], merge(t[key], source[key]))\n }\n }\n\n // Join `target` and modified `source`\n Object.assign(t || {}, source)\n return t\n}\n\nexport { loadScript } from \"./load-script\"\n","export let stitchesUtils = {\n // Abbreviated margin properties\n m: (value: string) => ({\n margin: value,\n }),\n mt: (value: string) => ({\n marginTop: value,\n }),\n mr: (value: string) => ({\n marginRight: value,\n }),\n mb: (value: string) => ({\n marginBottom: value,\n }),\n ml: (value: string) => ({\n marginLeft: value,\n }),\n mx: (value: string) => ({\n marginLeft: value,\n marginRight: value,\n }),\n my: (value: string) => ({\n marginTop: value,\n marginBottom: value,\n }),\n\n // A property for applying width/height together\n size: (value: string) => ({\n width: value,\n height: value,\n }),\n // Abbreviated padding properties\n px: (value: string) => ({\n paddingLeft: value,\n paddingRight: value,\n }),\n py: (value: string) => ({\n paddingTop: value,\n paddingBottom: value,\n }),\n}\n"],"mappings":"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","names":[]}
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.0.
|
|
2
|
+
"version": "1.0.46",
|
|
3
3
|
"license": "MIT",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
@@ -24,5 +24,8 @@
|
|
|
24
24
|
"author": "Weaverse Team",
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@stitches/core": "^1.2.8"
|
|
27
|
+
},
|
|
28
|
+
"optionalDependencies": {
|
|
29
|
+
"@esbuild/darwin-x64": "*"
|
|
27
30
|
}
|
|
28
31
|
}
|