@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 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
- _data: ElementData;
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(data: Omit<ElementData, "id" | "type">);
55
+ set data(update: Omit<ElementData, "id" | "type">);
70
56
  get data(): ElementData;
71
- setData: (data: Omit<ElementData, "id" | "type">) => ElementData;
72
- subscribe: (fn: any) => void;
73
- unsubscribe: (fn: any) => void;
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<any>;
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({ weaverseHost, weaverseVersion, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas, platformType, pageId, }?: WeaverseType);
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
- initProjectItemData(): void;
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
- current: null
121
- };
119
+ this.ref = { current: null };
120
+ this.platformType = "shopify-section";
122
121
  this.stitchesClass = "";
123
- this._data = { id: "", type: "" };
124
- this.setData = (data) => {
125
- this.data = Object.assign(this.data, data);
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.data = { ...itemData };
148
+ this._store = { ...itemData };
145
149
  }
146
150
  }
147
151
  get _id() {
148
- return this._data.id;
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._data.type);
161
+ return this.weaverse.elementInstances.get(this._store.type);
158
162
  }
159
- set data(data) {
160
- this._data = { ...this.data, ...data };
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 defaultCss = this.Element?.defaultCss || {};
164
- let currentCss = this._data.css || {};
165
- let css = merge(defaultCss, currentCss);
166
- let defaultData = { ...this.Element?.Component?.defaultProps, ...this.Element?.extraData || {} };
167
- return { ...defaultData, ...this._data, css };
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
- this.init({
269
- weaverseHost,
270
- weaverseVersion,
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.initProjectItemData();
311
+ this.initProject();
336
312
  this.triggerUpdate();
337
313
  }
338
- initProjectItemData() {
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
- current: null
79
- };
77
+ this.ref = { current: null };
78
+ this.platformType = "shopify-section";
80
79
  this.stitchesClass = "";
81
- this._data = { id: "", type: "" };
82
- this.setData = (data) => {
83
- this.data = Object.assign(this.data, data);
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.data = { ...itemData };
106
+ this._store = { ...itemData };
103
107
  }
104
108
  }
105
109
  get _id() {
106
- return this._data.id;
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._data.type);
119
+ return this.weaverse.elementInstances.get(this._store.type);
116
120
  }
117
- set data(data) {
118
- this._data = { ...this.data, ...data };
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 defaultCss = this.Element?.defaultCss || {};
122
- let currentCss = this._data.css || {};
123
- let css = merge(defaultCss, currentCss);
124
- let defaultData = { ...this.Element?.Component?.defaultProps, ...this.Element?.extraData || {} };
125
- return { ...defaultData, ...this._data, css };
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
- this.init({
227
- weaverseHost,
228
- weaverseVersion,
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.initProjectItemData();
269
+ this.initProject();
294
270
  this.triggerUpdate();
295
271
  }
296
- initProjectItemData() {
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) => {
@@ -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.44",
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
  }