@weaverse/core 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.d.ts +12 -7
  2. package/dist/index.js +37 -26
  3. package/dist/index.mjs +37 -26
  4. package/package.json +1 -1
  5. package/dist/index.js.map +0 -1
  6. package/dist/index.mjs.map +0 -1
package/dist/index.d.ts CHANGED
@@ -2,7 +2,7 @@ import * as Stitches from '@stitches/core';
2
2
  import { ForwardRefExoticComponent, RefObject } from 'react';
3
3
  import Stitches$1 from '@stitches/core/types/stitches';
4
4
 
5
- declare let stichesUtils: {
5
+ declare let stitchesUtils: {
6
6
  m: (value: string) => {
7
7
  margin: string;
8
8
  };
@@ -53,6 +53,7 @@ interface BreakPoints {
53
53
  mobile: string;
54
54
  desktop: string;
55
55
  }
56
+ type PlatformTypeEnum = "shopify-section" | "react-ssr";
56
57
  interface WeaverseType {
57
58
  mediaBreakPoints?: BreakPoints;
58
59
  weaverseHost?: string;
@@ -61,6 +62,7 @@ interface WeaverseType {
61
62
  isDesignMode?: boolean;
62
63
  ssrMode?: boolean;
63
64
  elementSchemas?: ElementSchema[];
65
+ platformType?: PlatformTypeEnum;
64
66
  }
65
67
  interface WeaverseElement {
66
68
  Component: ForwardRefExoticComponent<any>;
@@ -110,7 +112,7 @@ interface ElementData {
110
112
  css?: ElementCSS;
111
113
  [key: string]: any;
112
114
  }
113
- type WeaverseCSSProperties = Stitches.CSS & Partial<Record<keyof typeof stichesUtils, string | number>>;
115
+ type WeaverseCSSProperties = Stitches.CSS & Partial<Record<keyof typeof stitchesUtils, string | number>>;
114
116
  type ChildElementCSS = Partial<{
115
117
  [selector: string]: WeaverseCSSProperties & ChildElementCSS;
116
118
  }>;
@@ -274,6 +276,10 @@ declare class Weaverse {
274
276
  * @type {boolean}
275
277
  */
276
278
  isDesignMode: boolean;
279
+ /**
280
+ * Check the platform, shopify-section or react-ssr(hydrogen)
281
+ */
282
+ platformType: PlatformTypeEnum;
277
283
  /**
278
284
  * Check whether the sdk is in preview mode or not
279
285
  * @type {boolean}
@@ -301,11 +307,10 @@ declare class Weaverse {
301
307
  * @param isDesignMode {boolean} check whether the sdk is isDesignMode or not
302
308
  * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration
303
309
  * @param elementSchemas {Array<ElementSchema>} List of element schemas
310
+ * @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)
304
311
  */
305
- constructor({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas }?: WeaverseType);
306
- init({ weaverseHost, elementSchemas, projectId, data, mediaBreakPoints, isDesignMode, ssrMode }?: WeaverseType): void;
307
- initialized: boolean;
308
- initializeData: (data: any) => void;
312
+ constructor({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas, platformType }?: WeaverseType);
313
+ init({ weaverseHost, elementSchemas, platformType, projectId, data, mediaBreakPoints, isDesignMode, ssrMode }?: WeaverseType): void;
309
314
  loadStudio(version?: string): void;
310
315
  /**
311
316
  * Register the custom React Component to Weaverse, store it into Weaverse.elementInstances
@@ -332,4 +337,4 @@ declare function merge(target: Record<string, any>, source: Record<string, any>)
332
337
  [x: string]: any;
333
338
  };
334
339
 
335
- export { AdditionalInputConfigs, AdvancedGroup, AdvancedGroupType, BasicGroup, BasicInput, BreakPoints, CatalogGroup, ChildElement, ChildElementCSS, ChildElementSelector, ElementCSS, ElementCatalog, ElementData, ElementDataInCatalog, ElementFlags, ElementInspector, ElementSchema, FlagType, GridSize, InputType, ParentType, RangeInputConfigs, SelectInputConfigs, SortableInputConfigs, SortableItemAction, ToggleGroupConfigs, ToolbarAction, Weaverse, WeaverseCSSProperties, WeaverseElement, WeaverseItemStore, WeaverseProjectDataType, WeaverseType, isBrowser, isIframe, isReactNative, merge };
340
+ export { AdditionalInputConfigs, AdvancedGroup, AdvancedGroupType, BasicGroup, BasicInput, BreakPoints, CatalogGroup, ChildElement, ChildElementCSS, ChildElementSelector, ElementCSS, ElementCatalog, ElementData, ElementDataInCatalog, ElementFlags, ElementInspector, ElementSchema, FlagType, GridSize, InputType, ParentType, PlatformTypeEnum, RangeInputConfigs, SelectInputConfigs, SortableInputConfigs, SortableItemAction, ToggleGroupConfigs, ToolbarAction, Weaverse, WeaverseCSSProperties, WeaverseElement, WeaverseItemStore, WeaverseProjectDataType, WeaverseType, isBrowser, isIframe, isReactNative, merge };
package/dist/index.js CHANGED
@@ -58,7 +58,7 @@ function merge(target, source) {
58
58
  }
59
59
 
60
60
  // src/utils/styles.ts
61
- var stichesUtils = {
61
+ var stitchesUtils = {
62
62
  // Abbreviated margin properties
63
63
  m: (value) => ({
64
64
  margin: value
@@ -162,8 +162,18 @@ var Weaverse = class {
162
162
  * @param isDesignMode {boolean} check whether the sdk is isDesignMode or not
163
163
  * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration
164
164
  * @param elementSchemas {Array<ElementSchema>} List of element schemas
165
+ * @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)
165
166
  */
166
- constructor({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas } = {}) {
167
+ constructor({
168
+ weaverseHost,
169
+ projectId,
170
+ data,
171
+ mediaBreakPoints,
172
+ isDesignMode,
173
+ ssrMode,
174
+ elementSchemas,
175
+ platformType
176
+ } = {}) {
167
177
  /**
168
178
  * For storing, registering element React component from Weaverse or created by user/developer
169
179
  */
@@ -203,6 +213,10 @@ var Weaverse = class {
203
213
  * @type {boolean}
204
214
  */
205
215
  this.isDesignMode = false;
216
+ /**
217
+ * Check the platform, shopify-section or react-ssr(hydrogen)
218
+ */
219
+ this.platformType = "shopify-section";
206
220
  /**
207
221
  * Check whether the sdk is in preview mode or not
208
222
  * @type {boolean}
@@ -219,51 +233,48 @@ var Weaverse = class {
219
233
  // tablet: "(max-width: 1023.98px)", // to set css for tablet, {'@tablet' : { // css }},
220
234
  mobile: "(max-width: 767.98px)"
221
235
  };
222
- this.initialized = false;
223
- this.initializeData = (data) => {
224
- console.log("initializeData", data);
225
- if (!this.initialized) {
226
- let { data: d, isDesignMode, id, projectId, weaverseHost } = data;
227
- this.projectId = projectId || this.projectId;
228
- this.weaverseHost = weaverseHost || this.weaverseHost;
229
- this.data = { ...d, pageId: id };
230
- this.isDesignMode = isDesignMode;
231
- this.initProjectItemData();
232
- if (this.isDesignMode) {
233
- this.initStitches();
234
- this.triggerUpdate();
235
- this.loadStudio();
236
- }
237
- }
238
- this.initialized = true;
239
- };
240
236
  this.initStitches = () => {
241
237
  this.stitchesInstance = this.stitchesInstance || stitches.createStitches({
242
238
  prefix: "weaverse",
243
239
  media: this.mediaBreakPoints,
244
- utils: stichesUtils
240
+ utils: stitchesUtils
245
241
  });
246
242
  };
247
- this.init({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas });
243
+ this.init({ weaverseHost, projectId, data, platformType, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas });
248
244
  }
249
- init({ weaverseHost, elementSchemas, projectId, data, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
245
+ init({ weaverseHost, elementSchemas, platformType, projectId, data, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
250
246
  this.elementSchemas = elementSchemas || this.elementSchemas;
251
247
  this.weaverseHost = weaverseHost || this.weaverseHost;
252
248
  this.projectId = projectId || this.projectId;
253
249
  this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
254
250
  this.isDesignMode = isDesignMode || this.isDesignMode;
255
251
  this.ssrMode = ssrMode || this.ssrMode;
252
+ this.platformType = platformType || this.platformType;
256
253
  this.data = data || this.data;
257
- this.initStitches();
258
254
  this.initProjectItemData();
255
+ this.initStitches();
259
256
  }
257
+ // initialized = false
258
+ // initializeData = (data: any) => {
259
+ // if (!this.initialized) {
260
+ // let { data: d, isDesignMode, id, projectId, weaverseHost } = data
261
+ // this.projectId = projectId || this.projectId
262
+ // this.weaverseHost = weaverseHost || this.weaverseHost
263
+ // this.data = { ...d, pageId: id }
264
+ // this.isDesignMode = isDesignMode
265
+ // this.initProjectItemData()
266
+ // if (this.isDesignMode) {
267
+ // this.triggerUpdate()
268
+ // this.loadStudio()
269
+ // }
270
+ // }
271
+ // this.initialized = true
272
+ // }
260
273
  loadStudio(version) {
261
- console.log("load studio");
262
274
  if (isIframe && this.isDesignMode && !this.studioBridge) {
263
275
  const initStudio = () => {
264
276
  this.studioBridge = new window.WeaverseStudioBridge(this);
265
277
  this.triggerUpdate();
266
- console.log("Studio loaded", this);
267
278
  clearInterval(i);
268
279
  };
269
280
  let i = setInterval(() => {
package/dist/index.mjs CHANGED
@@ -17,7 +17,7 @@ function merge(target, source) {
17
17
  }
18
18
 
19
19
  // src/utils/styles.ts
20
- var stichesUtils = {
20
+ var stitchesUtils = {
21
21
  // Abbreviated margin properties
22
22
  m: (value) => ({
23
23
  margin: value
@@ -121,8 +121,18 @@ var Weaverse = class {
121
121
  * @param isDesignMode {boolean} check whether the sdk is isDesignMode or not
122
122
  * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration
123
123
  * @param elementSchemas {Array<ElementSchema>} List of element schemas
124
+ * @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)
124
125
  */
125
- constructor({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas } = {}) {
126
+ constructor({
127
+ weaverseHost,
128
+ projectId,
129
+ data,
130
+ mediaBreakPoints,
131
+ isDesignMode,
132
+ ssrMode,
133
+ elementSchemas,
134
+ platformType
135
+ } = {}) {
126
136
  /**
127
137
  * For storing, registering element React component from Weaverse or created by user/developer
128
138
  */
@@ -162,6 +172,10 @@ var Weaverse = class {
162
172
  * @type {boolean}
163
173
  */
164
174
  this.isDesignMode = false;
175
+ /**
176
+ * Check the platform, shopify-section or react-ssr(hydrogen)
177
+ */
178
+ this.platformType = "shopify-section";
165
179
  /**
166
180
  * Check whether the sdk is in preview mode or not
167
181
  * @type {boolean}
@@ -178,51 +192,48 @@ var Weaverse = class {
178
192
  // tablet: "(max-width: 1023.98px)", // to set css for tablet, {'@tablet' : { // css }},
179
193
  mobile: "(max-width: 767.98px)"
180
194
  };
181
- this.initialized = false;
182
- this.initializeData = (data) => {
183
- console.log("initializeData", data);
184
- if (!this.initialized) {
185
- let { data: d, isDesignMode, id, projectId, weaverseHost } = data;
186
- this.projectId = projectId || this.projectId;
187
- this.weaverseHost = weaverseHost || this.weaverseHost;
188
- this.data = { ...d, pageId: id };
189
- this.isDesignMode = isDesignMode;
190
- this.initProjectItemData();
191
- if (this.isDesignMode) {
192
- this.initStitches();
193
- this.triggerUpdate();
194
- this.loadStudio();
195
- }
196
- }
197
- this.initialized = true;
198
- };
199
195
  this.initStitches = () => {
200
196
  this.stitchesInstance = this.stitchesInstance || stitches.createStitches({
201
197
  prefix: "weaverse",
202
198
  media: this.mediaBreakPoints,
203
- utils: stichesUtils
199
+ utils: stitchesUtils
204
200
  });
205
201
  };
206
- this.init({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas });
202
+ this.init({ weaverseHost, projectId, data, platformType, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas });
207
203
  }
208
- init({ weaverseHost, elementSchemas, projectId, data, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
204
+ init({ weaverseHost, elementSchemas, platformType, projectId, data, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
209
205
  this.elementSchemas = elementSchemas || this.elementSchemas;
210
206
  this.weaverseHost = weaverseHost || this.weaverseHost;
211
207
  this.projectId = projectId || this.projectId;
212
208
  this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
213
209
  this.isDesignMode = isDesignMode || this.isDesignMode;
214
210
  this.ssrMode = ssrMode || this.ssrMode;
211
+ this.platformType = platformType || this.platformType;
215
212
  this.data = data || this.data;
216
- this.initStitches();
217
213
  this.initProjectItemData();
214
+ this.initStitches();
218
215
  }
216
+ // initialized = false
217
+ // initializeData = (data: any) => {
218
+ // if (!this.initialized) {
219
+ // let { data: d, isDesignMode, id, projectId, weaverseHost } = data
220
+ // this.projectId = projectId || this.projectId
221
+ // this.weaverseHost = weaverseHost || this.weaverseHost
222
+ // this.data = { ...d, pageId: id }
223
+ // this.isDesignMode = isDesignMode
224
+ // this.initProjectItemData()
225
+ // if (this.isDesignMode) {
226
+ // this.triggerUpdate()
227
+ // this.loadStudio()
228
+ // }
229
+ // }
230
+ // this.initialized = true
231
+ // }
219
232
  loadStudio(version) {
220
- console.log("load studio");
221
233
  if (isIframe && this.isDesignMode && !this.studioBridge) {
222
234
  const initStudio = () => {
223
235
  this.studioBridge = new window.WeaverseStudioBridge(this);
224
236
  this.triggerUpdate();
225
- console.log("Studio loaded", this);
226
237
  clearInterval(i);
227
238
  };
228
239
  let i = setInterval(() => {
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "1.0.0",
2
+ "version": "1.0.2",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
package/dist/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/index.ts","../src/core.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 ElementFlags,\n WeaverseProjectDataType,\n WeaverseElement,\n WeaverseType,\n ElementSchema\n} from './types'\nimport { isIframe, merge } from \"./utils\"\nimport { stichesUtils } 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 _flags: ElementFlags = {}\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\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 }\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: string = process.env.NODE_ENV === \"development\" ? \"http://localhost:3000\" : \"https://studio.weaverse.io\"\n /**\n * Weaverse project key to access project data via API\n * @type {string}\n */\n projectId = \"\"\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 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 */\n constructor({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas }: WeaverseType = {}) {\n this.init({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas })\n }\n\n init({ weaverseHost,elementSchemas, projectId, data, mediaBreakPoints, isDesignMode, ssrMode }: WeaverseType = {}) {\n this.elementSchemas = elementSchemas || this.elementSchemas\n this.weaverseHost = weaverseHost || this.weaverseHost\n this.projectId = projectId || this.projectId\n this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints\n this.isDesignMode = isDesignMode || this.isDesignMode\n this.ssrMode = ssrMode || this.ssrMode\n this.data = data || this.data\n this.initStitches()\n this.initProjectItemData()\n }\n\n initialized = false\n initializeData = (data: any) => {\n console.log(\"initializeData\", data)\n if (!this.initialized) {\n let { data: d, isDesignMode, id, projectId, weaverseHost } = data\n this.projectId = projectId || this.projectId\n this.weaverseHost = weaverseHost || this.weaverseHost\n this.data = { ...d, pageId: id }\n this.isDesignMode = isDesignMode\n this.initProjectItemData()\n if (this.isDesignMode) {\n this.initStitches()\n this.triggerUpdate()\n this.loadStudio()\n }\n }\n this.initialized = true\n }\n\n loadStudio(version?: string) {\n console.log(\"load studio\")\n if (isIframe && this.isDesignMode && !this.studioBridge) {\n const initStudio = () => {\n this.studioBridge = new window.WeaverseStudioBridge(this)\n // Make event listeners from studio work\n this.triggerUpdate()\n console.log(\"Studio loaded\", this)\n clearInterval(i)\n }\n let i = setInterval(() => {\n if (!window.WeaverseStudioBridge) {\n // Studio bridge script source -> https://weaverse.io/assets/studio/studio-bridge.js\n let studioBridgeScript = document.createElement(\"script\")\n studioBridgeScript.src = `${this.weaverseHost}/assets/studio/studio-bridge.js?v=${version}`\n studioBridgeScript.type = \"module\"\n studioBridgeScript.onload = initStudio\n document.body.appendChild(studioBridgeScript)\n } else {\n initStudio()\n }\n }, 2000)\n }\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 throw new Error(`Weaverse: Element '${element.type}' already registered`)\n }\n this.elementInstances.set(element?.type, element)\n } else {\n throw new Error(\"Weaverse: registerElement: `type` is required\")\n }\n }\n\n initStitches = () => {\n this.stitchesInstance =\n this.stitchesInstance ||\n stitches.createStitches({\n prefix: \"weaverse\",\n media: this.mediaBreakPoints,\n utils: stichesUtils,\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\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 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","export let stichesUtils = {\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.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/core.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 ElementFlags,\n WeaverseProjectDataType,\n WeaverseElement,\n WeaverseType,\n ElementSchema\n} from './types'\nimport { isIframe, merge } from \"./utils\"\nimport { stichesUtils } 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 _flags: ElementFlags = {}\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\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 }\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: string = process.env.NODE_ENV === \"development\" ? \"http://localhost:3000\" : \"https://studio.weaverse.io\"\n /**\n * Weaverse project key to access project data via API\n * @type {string}\n */\n projectId = \"\"\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 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 */\n constructor({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas }: WeaverseType = {}) {\n this.init({ weaverseHost, projectId, data, mediaBreakPoints, isDesignMode, ssrMode, elementSchemas })\n }\n\n init({ weaverseHost,elementSchemas, projectId, data, mediaBreakPoints, isDesignMode, ssrMode }: WeaverseType = {}) {\n this.elementSchemas = elementSchemas || this.elementSchemas\n this.weaverseHost = weaverseHost || this.weaverseHost\n this.projectId = projectId || this.projectId\n this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints\n this.isDesignMode = isDesignMode || this.isDesignMode\n this.ssrMode = ssrMode || this.ssrMode\n this.data = data || this.data\n this.initStitches()\n this.initProjectItemData()\n }\n\n initialized = false\n initializeData = (data: any) => {\n console.log(\"initializeData\", data)\n if (!this.initialized) {\n let { data: d, isDesignMode, id, projectId, weaverseHost } = data\n this.projectId = projectId || this.projectId\n this.weaverseHost = weaverseHost || this.weaverseHost\n this.data = { ...d, pageId: id }\n this.isDesignMode = isDesignMode\n this.initProjectItemData()\n if (this.isDesignMode) {\n this.initStitches()\n this.triggerUpdate()\n this.loadStudio()\n }\n }\n this.initialized = true\n }\n\n loadStudio(version?: string) {\n console.log(\"load studio\")\n if (isIframe && this.isDesignMode && !this.studioBridge) {\n const initStudio = () => {\n this.studioBridge = new window.WeaverseStudioBridge(this)\n // Make event listeners from studio work\n this.triggerUpdate()\n console.log(\"Studio loaded\", this)\n clearInterval(i)\n }\n let i = setInterval(() => {\n if (!window.WeaverseStudioBridge) {\n // Studio bridge script source -> https://weaverse.io/assets/studio/studio-bridge.js\n let studioBridgeScript = document.createElement(\"script\")\n studioBridgeScript.src = `${this.weaverseHost}/assets/studio/studio-bridge.js?v=${version}`\n studioBridgeScript.type = \"module\"\n studioBridgeScript.onload = initStudio\n document.body.appendChild(studioBridgeScript)\n } else {\n initStudio()\n }\n }, 2000)\n }\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 throw new Error(`Weaverse: Element '${element.type}' already registered`)\n }\n this.elementInstances.set(element?.type, element)\n } else {\n throw new Error(\"Weaverse: registerElement: `type` is required\")\n }\n }\n\n initStitches = () => {\n this.stitchesInstance =\n this.stitchesInstance ||\n stitches.createStitches({\n prefix: \"weaverse\",\n media: this.mediaBreakPoints,\n utils: stichesUtils,\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\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 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","export let stichesUtils = {\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":[]}