@weaverse/core 1.0.48 → 1.0.50

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
@@ -1,5 +1,5 @@
1
1
  import * as Stitches from '@stitches/core';
2
- import { RefObject, ForwardRefExoticComponent } from 'react';
2
+ import { ForwardRefExoticComponent, RefObject } from 'react';
3
3
  import Stitches$1 from '@stitches/core/types/stitches';
4
4
 
5
5
  declare let stitchesUtils: {
@@ -40,119 +40,6 @@ declare let stitchesUtils: {
40
40
  };
41
41
  };
42
42
 
43
- declare class WeaverseItemStore {
44
- weaverse: Weaverse;
45
- listeners: Set<(_: ElementData) => void>;
46
- ref: RefObject<HTMLElement>;
47
- stitchesClass: string;
48
- private _store;
49
- constructor(itemData: ElementData, weaverse: Weaverse);
50
- get _id(): string;
51
- get _element(): HTMLElement | null;
52
- get _flags(): Partial<Record<FlagType, boolean>>;
53
- get Element(): WeaverseElement | undefined;
54
- set data(update: Omit<ElementData, "id" | "type">);
55
- get data(): ElementData;
56
- setData: (update: Omit<ElementData, "id" | "type">) => ElementData;
57
- subscribe: (fn: (_: ElementData) => void) => void;
58
- unsubscribe: (fn: (_: ElementData) => void) => void;
59
- triggerUpdate: () => void;
60
- }
61
- declare class Weaverse {
62
- /**
63
- * The `weaverse-content-root` element of Weaverse SDK
64
- */
65
- contentRootElement: HTMLElement | undefined;
66
- /**
67
- * For storing, registering element React component from Weaverse or created by user/developer
68
- */
69
- elementInstances: Map<string, WeaverseElement>;
70
- /**
71
- * list of element/items store to provide data, handle state update, state sharing, etc.
72
- */
73
- itemInstances: Map<string | number, WeaverseItemStore>;
74
- /**
75
- * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
76
- */
77
- weaverseHost: string;
78
- /**
79
- * Weaverse version, it can be used to load the correct version of Weaverse SDK
80
- */
81
- weaverseVersion: string;
82
- /**
83
- * Weaverse project key to access project data via API
84
- */
85
- projectId: string;
86
- pageId: string;
87
- /**
88
- * Weaverse project data, by default, user can provide project data via React Component:
89
- * <WeaverseRoot data={data} /> it will be used to server-side rendering
90
- */
91
- data: WeaverseProjectDataType;
92
- /**
93
- * Storing subscribe callback function for any component that want to listen to the change of WeaverseRoot
94
- */
95
- listeners: Set<() => void>;
96
- /**
97
- * Check whether the sdk is in editor or not.
98
- * If isDesignMode is true, it means the sdk is isDesignMode mode, render the editor UI,
99
- * else render the preview UI, plain HTML + CSS + React hydrate
100
- */
101
- isDesignMode: boolean;
102
- /**
103
- * Check the platform, shopify-section or react-ssr(hydrogen)
104
- */
105
- platformType: PlatformTypeEnum;
106
- /**
107
- * Check whether the sdk is in preview mode or not
108
- */
109
- isPreviewMode: boolean;
110
- /**
111
- * Use in element to optionally render special HTML for hydration
112
- */
113
- ssrMode: boolean;
114
- /**
115
- * Stitches instance for handling CSS stylesheet, media, theme for Weaverse project
116
- */
117
- stitchesInstance: Stitches$1 | any;
118
- studioBridge?: any;
119
- elementSchemas: ElementSchema[];
120
- static WeaverseItemStore: typeof WeaverseItemStore;
121
- mediaBreakPoints: BreakPoints;
122
- /**
123
- * constructor
124
- * @param weaverseHost {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
125
- * @param projectId {string} Weaverse project key to access project data via API
126
- * @param data {WeaverseProjectDataType} Weaverse project data, by default, user can provide project data via React Component.
127
- * @param mediaBreakPoints {object} Pass down custom media query breakpoints or just use the default.
128
- * @param isDesignMode {boolean} check whether the sdk is isDesignMode or not
129
- * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration
130
- * @param elementSchemas {Array<ElementSchema>} List of element schemas
131
- * @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)
132
- */
133
- constructor(params?: WeaverseType);
134
- /**
135
- * Register the custom React Component to Weaverse, store it into Weaverse.elementInstances
136
- * @param element {WeaverseElement} custom React Component
137
- */
138
- registerElement(element: WeaverseElement): void;
139
- initStitches: (externalConfig?: {}) => void;
140
- subscribe(fn: any): void;
141
- unsubscribe(fn: any): void;
142
- triggerUpdate(): void;
143
- refreshAllItems(): void;
144
- /**
145
- * When applying new template,
146
- * we need to reset the project data and re-initialize the project item data
147
- * @param data {WeaverseProjectDataType}
148
- */
149
- setProjectData(data: WeaverseProjectDataType): void;
150
- /**
151
- * Create new WeaverseItemStore instance for each item in project data
152
- */
153
- initProject(): void;
154
- }
155
-
156
43
  interface WeaverseProjectDataType {
157
44
  items: ElementData[];
158
45
  rootId: string;
@@ -283,7 +170,7 @@ interface BasicInput<ConfigsType = AdditionalInputConfigs> {
283
170
  * `imagesPerRow.gt.1`
284
171
  */
285
172
  condition?: string;
286
- defaultValue?: string | number | boolean;
173
+ defaultValue: string | number | boolean;
287
174
  placeholder?: string;
288
175
  helpText?: string;
289
176
  }
@@ -322,16 +209,130 @@ interface DataSortInputConfigs {
322
209
  type InputType = "color" | "datepicker" | "image" | "range" | "select" | "children-sort" | "data-sort" | "switch" | "text" | "textarea" | "toggle-group" | "position" | "information" | "product" | "product-list" | "product-swatches" | "text-editor" | "custom.html" | "instagram" | "collection-list" | "collection" | "article-list" | "map-autocomplete";
323
210
  declare global {
324
211
  interface Window {
325
- createWeaverseStudioBridge: (weaverse: Weaverse) => Promise<any>;
326
212
  weaverseStudioInitialized: boolean;
327
213
  Blinkloader: any;
328
- __weaverse: Weaverse;
214
+ __weaverse: any;
329
215
  __weaverses: {
330
- [key: string]: Weaverse;
216
+ [key: string]: any;
331
217
  };
218
+ createWeaverseStudioBridge: (weaverse: any) => Promise<any>;
332
219
  }
333
220
  }
334
221
 
222
+ declare class WeaverseItemStore {
223
+ weaverse: Weaverse;
224
+ listeners: Set<(_: ElementData) => void>;
225
+ ref: RefObject<HTMLElement>;
226
+ stitchesClass: string;
227
+ private _store;
228
+ constructor(itemData: ElementData, weaverse: Weaverse);
229
+ get _id(): string;
230
+ get _element(): HTMLElement | null;
231
+ get _flags(): Partial<Record<FlagType, boolean>>;
232
+ get Element(): WeaverseElement | undefined;
233
+ set data(update: Omit<ElementData, "id" | "type">);
234
+ get data(): ElementData;
235
+ setData: (update: Omit<ElementData, "id" | "type">) => ElementData;
236
+ subscribe: (fn: (_: ElementData) => void) => void;
237
+ unsubscribe: (fn: (_: ElementData) => void) => void;
238
+ triggerUpdate: () => void;
239
+ }
240
+ declare class Weaverse {
241
+ /**
242
+ * The `weaverse-content-root` element of Weaverse SDK
243
+ */
244
+ contentRootElement: HTMLElement | undefined;
245
+ /**
246
+ * For storing, registering element React component from Weaverse or created by user/developer
247
+ */
248
+ elementInstances: Map<string, WeaverseElement>;
249
+ /**
250
+ * list of element/items store to provide data, handle state update, state sharing, etc.
251
+ */
252
+ itemInstances: Map<string | number, WeaverseItemStore>;
253
+ /**
254
+ * Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
255
+ */
256
+ weaverseHost: string;
257
+ /**
258
+ * Weaverse version, it can be used to load the correct version of Weaverse SDK
259
+ */
260
+ weaverseVersion: string;
261
+ /**
262
+ * Weaverse project key to access project data via API
263
+ */
264
+ projectId: string;
265
+ pageId: string;
266
+ themeSchema: any;
267
+ /**
268
+ * Weaverse project data, by default, user can provide project data via React Component:
269
+ * <WeaverseRoot data={data} /> it will be used to server-side rendering
270
+ */
271
+ data: WeaverseProjectDataType;
272
+ /**
273
+ * Storing subscribe callback function for any component that want to listen to the change of WeaverseRoot
274
+ */
275
+ listeners: Set<() => void>;
276
+ /**
277
+ * Check whether the sdk is in editor or not.
278
+ * If isDesignMode is true, it means the sdk is isDesignMode mode, render the editor UI,
279
+ * else render the preview UI, plain HTML + CSS + React hydrate
280
+ */
281
+ isDesignMode: boolean;
282
+ /**
283
+ * Check the platform, shopify-section or react-ssr(hydrogen)
284
+ */
285
+ platformType: PlatformTypeEnum;
286
+ /**
287
+ * Check whether the sdk is in preview mode or not
288
+ */
289
+ isPreviewMode: boolean;
290
+ /**
291
+ * Use in element to optionally render special HTML for hydration
292
+ */
293
+ ssrMode: boolean;
294
+ /**
295
+ * Stitches instance for handling CSS stylesheet, media, theme for Weaverse project
296
+ */
297
+ stitchesInstance: Stitches$1 | any;
298
+ studioBridge?: any;
299
+ elementSchemas: ElementSchema[];
300
+ static WeaverseItemStore: typeof WeaverseItemStore;
301
+ mediaBreakPoints: BreakPoints;
302
+ /**
303
+ * constructor
304
+ * @param weaverseHost {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
305
+ * @param projectId {string} Weaverse project key to access project data via API
306
+ * @param data {WeaverseProjectDataType} Weaverse project data, by default, user can provide project data via React Component.
307
+ * @param mediaBreakPoints {object} Pass down custom media query breakpoints or just use the default.
308
+ * @param isDesignMode {boolean} check whether the sdk is isDesignMode or not
309
+ * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration
310
+ * @param elementSchemas {Array<ElementSchema>} List of element schemas
311
+ * @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)
312
+ */
313
+ constructor(params?: WeaverseType);
314
+ /**
315
+ * Register the custom React Component to Weaverse, store it into Weaverse.elementInstances
316
+ * @param element {WeaverseElement} custom React Component
317
+ */
318
+ registerElement(element: WeaverseElement): void;
319
+ initStitches: (externalConfig?: {}) => void;
320
+ subscribe(fn: any): void;
321
+ unsubscribe(fn: any): void;
322
+ triggerUpdate(): void;
323
+ refreshAllItems(): void;
324
+ /**
325
+ * When applying new template,
326
+ * we need to reset the project data and re-initialize the project item data
327
+ * @param data {WeaverseProjectDataType}
328
+ */
329
+ setProjectData(data: WeaverseProjectDataType): void;
330
+ /**
331
+ * Create new WeaverseItemStore instance for each item in project data
332
+ */
333
+ initProject(): void;
334
+ }
335
+
335
336
  declare let loadScript: (src: string) => Promise<unknown>;
336
337
 
337
338
  declare let isReactNative: boolean;
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\nexport class WeaverseItemStore {\n weaverse: Weaverse\n listeners: Set<(_: ElementData) => void> = new Set()\n ref: RefObject<HTMLElement> = { current: null }\n stitchesClass = \"\"\n private _store: 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 if (weaverse.platformType === \"shopify-hydrogen\") {\n let { data, ...rest } = itemData\n this._store = { ...data, ...rest }\n } else {\n this._store = { ...itemData }\n }\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.weaverse.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 this._store = { ...this.data, ...update }\n }\n\n get data(): ElementData {\n let defaultProps = { ...this.Element?.Component?.defaultProps }\n // if (this.platformType === \"shopify-hydrogen\") {\n // return {\n // ...defaultProps,\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 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 setData = (update: Omit<ElementData, \"id\" | \"type\">) => {\n // if (this.weaverse.platformType === \"shopify-hydrogen\") {\n // this.data = update\n // } else {\n // this.data = Object.assign(this.data, update)\n // }\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://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 return 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 stitchesClass = \"\"\n private _store: 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 if (weaverse.platformType === \"shopify-hydrogen\") {\n let { data, ...rest } = itemData\n this._store = { ...data, ...rest }\n } else {\n this._store = { ...itemData }\n }\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.weaverse.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 this._store = { ...this.data, ...update }\n }\n\n get data(): ElementData {\n let defaultProps = { ...this.Element?.Component?.defaultProps }\n // if (this.platformType === \"shopify-hydrogen\") {\n // return {\n // ...defaultProps,\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 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 setData = (update: Omit<ElementData, \"id\" | \"type\">) => {\n // if (this.weaverse.platformType === \"shopify-hydrogen\") {\n // this.data = update\n // } else {\n // this.data = Object.assign(this.data, update)\n // }\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://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 themeSchema: any\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 return 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 +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\nexport class WeaverseItemStore {\n weaverse: Weaverse\n listeners: Set<(_: ElementData) => void> = new Set()\n ref: RefObject<HTMLElement> = { current: null }\n stitchesClass = \"\"\n private _store: 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 if (weaverse.platformType === \"shopify-hydrogen\") {\n let { data, ...rest } = itemData\n this._store = { ...data, ...rest }\n } else {\n this._store = { ...itemData }\n }\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.weaverse.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 this._store = { ...this.data, ...update }\n }\n\n get data(): ElementData {\n let defaultProps = { ...this.Element?.Component?.defaultProps }\n // if (this.platformType === \"shopify-hydrogen\") {\n // return {\n // ...defaultProps,\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 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 setData = (update: Omit<ElementData, \"id\" | \"type\">) => {\n // if (this.weaverse.platformType === \"shopify-hydrogen\") {\n // this.data = update\n // } else {\n // this.data = Object.assign(this.data, update)\n // }\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://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 return 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 stitchesClass = \"\"\n private _store: 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 if (weaverse.platformType === \"shopify-hydrogen\") {\n let { data, ...rest } = itemData\n this._store = { ...data, ...rest }\n } else {\n this._store = { ...itemData }\n }\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.weaverse.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 this._store = { ...this.data, ...update }\n }\n\n get data(): ElementData {\n let defaultProps = { ...this.Element?.Component?.defaultProps }\n // if (this.platformType === \"shopify-hydrogen\") {\n // return {\n // ...defaultProps,\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 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 setData = (update: Omit<ElementData, \"id\" | \"type\">) => {\n // if (this.weaverse.platformType === \"shopify-hydrogen\") {\n // this.data = update\n // } else {\n // this.data = Object.assign(this.data, update)\n // }\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://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 themeSchema: any\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 return 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":";AAMA,YAAY,cAAc;;;ACNnB,IAAI,aAAa,CAAC,QAAgB;AACvC,SAAO,IAAI,QAAQ,CAAC,SAAS,WAAW;AACtC,QAAI,SAAS,SAAS,cAAc,QAAQ;AAC5C,WAAO,MAAM;AACb,WAAO,SAAS;AAChB,WAAO,UAAU;AACjB,WAAO,QAAQ;AACf,aAAS,KAAK,YAAY,MAAM;AAAA,EAClC,CAAC;AACH;;;ACTO,IAAI,gBAAgB,OAAO,cAAc,YAAY,UAAU,YAAY;AAC3E,IAAI,YAAY,OAAO,WAAW,eAAe,CAAC;AAClD,IAAI,WAAW,aAAa,OAAO,QAAQ,OAAO;AAOlD,SAAS,MAAM,QAA6B,QAA6B;AAC9E,MAAI,IAAI,EAAE,GAAI,UAAU,CAAC,EAAG;AAE5B,WAAS,OAAO,OAAO,KAAK,MAAM,GAAG;AACnC,QAAI,OAAO,GAAG,aAAa,UAAU,CAAC,MAAM,QAAQ,OAAO,GAAG,CAAC,GAAG;AAChE,aAAO,OAAO,OAAO,GAAG,GAAG,MAAM,EAAE,GAAG,GAAG,OAAO,GAAG,CAAC,CAAC;AAAA,IACvD;AAAA,EACF;AAGA,SAAO,OAAO,KAAK,CAAC,GAAG,MAAM;AAC7B,SAAO;AACT;;;ACrBO,IAAI,gBAAgB;AAAA;AAAA,EAEzB,GAAG,CAAC,WAAmB;AAAA,IACrB,QAAQ;AAAA,EACV;AAAA,EACA,IAAI,CAAC,WAAmB;AAAA,IACtB,WAAW;AAAA,EACb;AAAA,EACA,IAAI,CAAC,WAAmB;AAAA,IACtB,aAAa;AAAA,EACf;AAAA,EACA,IAAI,CAAC,WAAmB;AAAA,IACtB,cAAc;AAAA,EAChB;AAAA,EACA,IAAI,CAAC,WAAmB;AAAA,IACtB,YAAY;AAAA,EACd;AAAA,EACA,IAAI,CAAC,WAAmB;AAAA,IACtB,YAAY;AAAA,IACZ,aAAa;AAAA,EACf;AAAA,EACA,IAAI,CAAC,WAAmB;AAAA,IACtB,WAAW;AAAA,IACX,cAAc;AAAA,EAChB;AAAA;AAAA,EAGA,MAAM,CAAC,WAAmB;AAAA,IACxB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA;AAAA,EAEA,IAAI,CAAC,WAAmB;AAAA,IACtB,aAAa;AAAA,IACb,cAAc;AAAA,EAChB;AAAA,EACA,IAAI,CAAC,WAAmB;AAAA,IACtB,YAAY;AAAA,IACZ,eAAe;AAAA,EACjB;AACF;;;AHnBO,IAAM,oBAAN,MAAwB;AAAA,EAO7B,YAAY,UAAuB,UAAoB;AALvD,qBAA2C,oBAAI,IAAI;AACnD,eAA8B,EAAE,SAAS,KAAK;AAC9C,yBAAgB;AAChB,SAAQ,SAAsB,EAAE,IAAI,IAAI,MAAM,GAAG;AAgEjD,mBAAU,CAAC,WAA6C;AAMtD,WAAK,OAAO,OAAO,OAAO,KAAK,MAAM,MAAM;AAE3C,WAAK,cAAc;AACnB,aAAO,KAAK;AAAA,IACd;AAEA,qBAAY,CAAC,OAAiC;AAC5C,WAAK,UAAU,IAAI,EAAE;AAAA,IACvB;AAEA,uBAAc,CAAC,OAAiC;AAC9C,WAAK,UAAU,OAAO,EAAE;AAAA,IAC1B;AAEA,yBAAgB,MAAM;AACpB,WAAK,UAAU,QAAQ,CAAC,OAAO;AAC7B,eAAO,GAAG,KAAK,IAAI;AAAA,MACrB,CAAC;AAAA,IACH;AArFE,QAAI,EAAE,MAAM,GAAG,IAAI;AACnB,SAAK,WAAW;AAChB,QAAI,MAAM,MAAM;AACd,eAAS,cAAc,IAAI,IAAI,IAAI;AACnC,UAAI,SAAS,iBAAiB,oBAAoB;AAChD,YAAI,EAAE,MAAM,GAAG,KAAK,IAAI;AACxB,aAAK,SAAS,EAAE,GAAG,MAAM,GAAG,KAAK;AAAA,MACnC,OAAO;AACL,aAAK,SAAS,EAAE,GAAG,SAAS;AAAA,MAC9B;AAAA,IACF;AAAA,EACF;AAAA,EAEA,IAAI,MAAM;AACR,WAAO,KAAK,OAAO;AAAA,EACrB;AAAA,EACA,IAAI,WAAW;AACb,WAAO,KAAK,IAAI;AAAA,EAClB;AAAA,EACA,IAAI,SAAS;AACX,WAAO,KAAK,SAAS,QAAQ,SAAS,CAAC;AAAA,EACzC;AAAA,EACA,IAAI,UAAU;AACZ,WAAO,KAAK,SAAS,iBAAiB,IAAI,KAAK,OAAO,IAAI;AAAA,EAC5D;AAAA,EAEA,IAAI,KAAK,QAA0C;AAUjD,SAAK,SAAS,EAAE,GAAG,KAAK,MAAM,GAAG,OAAO;AAAA,EAC1C;AAAA,EAEA,IAAI,OAAoB;AACtB,QAAI,eAAe,EAAE,GAAG,KAAK,SAAS,WAAW,aAAa;AAc9D,QAAI,aAAa,KAAK,SAAS,cAAc,CAAC;AAC9C,QAAI,aAAa,KAAK,OAAO,OAAO,CAAC;AACrC,QAAI,MAAM,MAAM,YAAY,UAAU;AACtC,QAAI,YAAY,KAAK,SAAS;AAC9B,WAAO,EAAE,GAAG,cAAc,GAAG,WAAW,GAAG,KAAK,QAAQ,IAAI;AAAA,EAC9D;AA2BF;AAEO,IAAM,WAAN,MAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA0FpB,YAAY,SAAuB,CAAC,GAAG;AAlFvC;AAAA;AAAA;AAAA,4BAAmB,oBAAI,IAA6B;AAIpD;AAAA;AAAA;AAAA,yBAAgB,oBAAI,IAAwC;AAI5D;AAAA;AAAA;AAAA,wBAAe;AAIf;AAAA;AAAA;AAAA,2BAAkB;AAIlB;AAAA;AAAA;AAAA,qBAAY;AAEZ,kBAAS;AAOT;AAAA;AAAA;AAAA;AAAA,gBAAgC;AAAA,MAC9B,QAAQ;AAAA,MACR,OAAO,CAAC;AAAA,MACR,QAAQ,EAAE,KAAK,IAAI,IAAI,GAAG;AAAA,IAC5B;AAIA;AAAA;AAAA;AAAA,qBAA6B,oBAAI,IAAI;AAMrC;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAe;AAKf;AAAA;AAAA;AAAA,wBAAiC;AAKjC;AAAA;AAAA;AAAA,yBAAgB;AAKhB;AAAA;AAAA;AAAA,mBAAU;AAOV,0BAAkC,CAAC;AAGnC,4BAAgC;AAAA,MAC9B,SAAS;AAAA;AAAA;AAAA,MAGT,QAAQ;AAAA,IACV;AAoCA,wBAAe,CAAC,iBAAiB,CAAC,MAAM;AACtC,WAAK,mBACH,KAAK,oBACI,wBAAe;AAAA,QACtB,QAAQ;AAAA,QACR,OAAO,KAAK;AAAA,QACZ,OAAO;AAAA,QACP,GAAG;AAAA,MACL,CAAC;AAAA,IACL;AA/BE,WAAO,QAAQ,MAAM,EAAE,QAAQ,CAAC,CAAC,GAAG,CAAC,MAAM;AACzC,UAAI,MAAM;AACV,WAAK,GAAG,IAAI,KAAK,KAAK,GAAG;AAAA,IAC3B,CAAC;AACD,SAAK,YAAY;AACjB,SAAK,aAAa;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,gBAAgB,SAA0B;AACxC,QAAI,SAAS,MAAM;AACjB,UAAI,CAAC,KAAK,iBAAiB,IAAI,QAAQ,IAAI,GAAG;AAC5C,aAAK,iBAAiB,IAAI,SAAS,MAAM,OAAO;AAAA,MAClD;AAAA,IACF,OAAO;AACL,cAAQ,MAAM,+CAA+C;AAAA,IAC/D;AAAA,EACF;AAAA,EAaA,UAAU,IAAS;AACjB,SAAK,UAAU,IAAI,EAAE;AAAA,EACvB;AAAA,EAEA,YAAY,IAAS;AACnB,SAAK,UAAU,OAAO,EAAE;AAAA,EAC1B;AAAA,EAEA,gBAAgB;AACd,SAAK,UAAU,QAAQ,CAAC,OAAO,GAAG,CAAC;AAAA,EACrC;AAAA,EACA,kBAAkB;AAChB,SAAK,cAAc,QAAQ,CAAC,SAAS;AACnC,WAAK,cAAc;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,eAAe,MAA+B;AAC5C,SAAK,OAAO;AACZ,SAAK,YAAY;AACjB,SAAK,cAAc;AAAA,EACrB;AAAA;AAAA;AAAA;AAAA,EAKA,cAAc;AACZ,UAAM,OAAO,KAAK;AAClB,QAAI,MAAM,OAAO;AACf,WAAK,MAAM,QAAQ,CAAC,SAAS;AAC3B,YAAI,CAAC,KAAK,cAAc,IAAI,KAAK,EAAqB,GAAG;AACvD,iBAAO,IAAI,kBAAkB,MAAM,IAAI;AAAA,QACzC;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACF;AArKa,SAsEJ,oBAA8C;","names":[]}
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.48",
2
+ "version": "1.0.50",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",