@weaverse/core 0.6.2 → 0.6.5

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 (4) hide show
  1. package/dist/index.d.ts +27 -19
  2. package/dist/index.js +14 -26
  3. package/dist/index.mjs +14 -26
  4. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import Stitches from '@stitches/core/types/stitches';
2
+ import { RefObject } from 'react';
2
3
 
3
4
  declare type TODO = any;
4
5
  declare type WeaverseElementMap = {
@@ -8,26 +9,29 @@ declare type WeaverseElement = {
8
9
  Component: TODO;
9
10
  schema: WeaverseElementSchema;
10
11
  };
12
+ declare type WeaverseElementCatalog = {
13
+ name: string;
14
+ icon?: string;
15
+ group?: 'essential' | 'composition' | 'other';
16
+ };
11
17
  declare type WeaverseElementSchema = {
12
18
  title?: string;
13
19
  type: string;
14
- settings?: WeaverseElementSettingInput[];
15
- styles?: WeaverseElementStyleInput[];
20
+ settings?: WeaverseElementInput[];
21
+ styles?: WeaverseElementInput[];
16
22
  toolbar?: TODO;
17
23
  data?: TODO;
24
+ catalog?: WeaverseElementCatalog;
18
25
  };
19
- declare type WeaverseElementStyleInput = {
26
+ declare type WeaverseElementInput = {
27
+ label?: string;
28
+ type: 'select' | 'checkbox' | 'radio' | 'range' | 'button' | 'image' | 'file' | 'hidden' | 'alignment' | 'color' | 'dimensions' | 'flex' | 'grid' | 'input' | 'switch' | 'spacing' | 'textarea' | 'visibility' | 'border' | 'background' | 'typography' | 'shadow' | 'position' | 'overflow' | 'display' | 'other';
20
29
  name?: string;
21
- type: 'alignment' | 'color' | 'dimensions' | 'flex' | 'grid' | 'input' | 'switch' | 'spacing' | 'textarea' | 'visibility' | 'border' | 'background' | 'typography' | 'shadow' | 'position' | 'overflow' | 'display' | 'other';
22
- defaultValue?: string;
23
- };
24
- declare type WeaverseElementSettingInput = {
25
- type: 'input' | 'textarea' | 'select' | 'checkbox' | 'radio' | 'color' | 'range' | 'button' | 'image';
26
- name: string;
27
30
  defaultValue?: string;
28
31
  helpText?: string;
29
32
  options?: TODO[];
30
- condition?: TODO;
33
+ conditions?: TODO[];
34
+ [key: string]: TODO;
31
35
  };
32
36
  declare global {
33
37
  interface Window {
@@ -49,16 +53,13 @@ interface ProjectDataType {
49
53
  items: ProjectDataItemType[];
50
54
  rootId: string | number;
51
55
  }
52
- declare type MediaBreakpoints = {
53
- tablet: string;
54
- mobile: string;
55
- };
56
56
  declare type WeaverseType = {
57
- [key: string]: any;
57
+ mediaBreakPoints?: any;
58
58
  appUrl?: string;
59
59
  projectKey?: string;
60
60
  projectData?: ProjectDataType;
61
61
  isDesignMode?: boolean;
62
+ ssrMode?: boolean;
62
63
  };
63
64
  /**
64
65
  * WeaverseItemStore is a store for Weaverse item, it can be used to subscribe/update the item data
@@ -79,8 +80,9 @@ declare type WeaverseType = {
79
80
  */
80
81
  declare class WeaverseItemStore {
81
82
  listeners: Set<any>;
82
- ref: any;
83
+ ref: RefObject<HTMLElement>;
83
84
  weaverse: Weaverse;
85
+ stitchesClass: string;
84
86
  constructor(itemData: any, weaverse: Weaverse);
85
87
  _data: any;
86
88
  get Element(): WeaverseElement;
@@ -129,6 +131,11 @@ declare class Weaverse {
129
131
  * @type {boolean}
130
132
  */
131
133
  isDesignMode: boolean;
134
+ /**
135
+ * Use in element to optionally render special HTML for hydration
136
+ * @type {boolean}
137
+ */
138
+ ssrMode: boolean;
132
139
  /**
133
140
  * stitches instance for handling CSS stylesheet, media, theme for Weaverse project
134
141
  */
@@ -145,8 +152,10 @@ declare class Weaverse {
145
152
  * @param projectKey {string} Weaverse project key to access project data via API
146
153
  * @param projectData {ProjectDataType} Weaverse project data, by default, user can provide project data via React Component.
147
154
  * @param mediaBreakPoints {object} Pass down custom media query breakpoints or just use the default.
155
+ * @param isDesignMode {boolean} check whether the sdk is isDesignMode or not
156
+ * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration
148
157
  */
149
- constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode }?: WeaverseType);
158
+ constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode }?: WeaverseType);
150
159
  /**
151
160
  * register the custom React Component to Weaverse, store it into Weaverse.elementInstances
152
161
  * @param element {WeaverseElement} custom React Component
@@ -154,7 +163,6 @@ declare class Weaverse {
154
163
  registerElement(element: WeaverseElement): void;
155
164
  init(): void;
156
165
  initStitches: () => void;
157
- loadStudio(): void;
158
166
  subscribe(fn: any): void;
159
167
  unsubscribe(fn: any): void;
160
168
  triggerUpdate(): void;
@@ -180,4 +188,4 @@ declare const isReactNative: boolean;
180
188
  declare const isBrowser: boolean;
181
189
  declare const isIframe: boolean;
182
190
 
183
- export { MediaBreakpoints, ProjectDataItemType, ProjectDataType, TODO, Weaverse, WeaverseElement, WeaverseElementMap, WeaverseElementSchema, WeaverseElementSettingInput, WeaverseElementStyleInput, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative };
191
+ export { ProjectDataItemType, ProjectDataType, TODO, Weaverse, WeaverseElement, WeaverseElementCatalog, WeaverseElementInput, WeaverseElementMap, WeaverseElementSchema, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative };
package/dist/index.js CHANGED
@@ -44,11 +44,6 @@ __export(src_exports, {
44
44
  });
45
45
  module.exports = __toCommonJS(src_exports);
46
46
 
47
- // src/utils/index.ts
48
- var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
49
- var isBrowser = typeof window !== "undefined" && !isReactNative;
50
- var isIframe = isBrowser && window.top !== window.self;
51
-
52
47
  // src/core.ts
53
48
  var stitches = __toESM(require("@stitches/core"));
54
49
  var WeaverseItemStore = class {
@@ -57,6 +52,7 @@ var WeaverseItemStore = class {
57
52
  this.ref = {
58
53
  current: null
59
54
  };
55
+ this.stitchesClass = "";
60
56
  this._data = {};
61
57
  this.setData = (data) => {
62
58
  this.data = Object.assign(this.data, data);
@@ -93,7 +89,7 @@ var WeaverseItemStore = class {
93
89
  }
94
90
  };
95
91
  var _Weaverse = class {
96
- constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode } = {}) {
92
+ constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
97
93
  this.elementInstances = /* @__PURE__ */ new Map();
98
94
  this.itemInstances = /* @__PURE__ */ new Map();
99
95
  this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://weaverse.io";
@@ -104,6 +100,7 @@ var _Weaverse = class {
104
100
  };
105
101
  this.listeners = /* @__PURE__ */ new Set();
106
102
  this.isDesignMode = false;
103
+ this.ssrMode = false;
107
104
  this.mediaBreakPoints = {
108
105
  desktop: "all",
109
106
  mobile: "(max-width: 767.98px)"
@@ -114,8 +111,11 @@ var _Weaverse = class {
114
111
  media: this.mediaBreakPoints,
115
112
  theme: {
116
113
  sizes: {
117
- rowSize: "48px",
118
- columns: 16
114
+ "width": "100%",
115
+ "max-width": "100%",
116
+ "column-count": "16",
117
+ "row-count": "12",
118
+ "row-size": "48px"
119
119
  },
120
120
  space: {
121
121
  gap: "8px"
@@ -127,6 +127,7 @@ var _Weaverse = class {
127
127
  this.projectKey = projectKey || this.projectKey;
128
128
  this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
129
129
  this.isDesignMode = isDesignMode || this.isDesignMode;
130
+ this.ssrMode = ssrMode || this.ssrMode;
130
131
  projectData && (this.projectData = projectData);
131
132
  this.init();
132
133
  }
@@ -140,27 +141,9 @@ var _Weaverse = class {
140
141
  }
141
142
  init() {
142
143
  this.initStitches();
143
- this.loadStudio();
144
144
  this.initProjectItemData();
145
145
  this.updateProjectData();
146
146
  }
147
- loadStudio() {
148
- if (this.isDesignMode && isIframe) {
149
- let initStudio = () => {
150
- this.studioBridge = new window.WeaverseStudioBridge(this);
151
- this.triggerUpdate();
152
- };
153
- if (!window.WeaverseStudioBridge) {
154
- const studioBridgeScript = document.createElement("script");
155
- studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`;
156
- studioBridgeScript.type = "module";
157
- studioBridgeScript.onload = initStudio;
158
- document.body.appendChild(studioBridgeScript);
159
- } else {
160
- initStudio();
161
- }
162
- }
163
- }
164
147
  subscribe(fn) {
165
148
  this.listeners.add(fn);
166
149
  }
@@ -203,6 +186,11 @@ var _Weaverse = class {
203
186
  };
204
187
  var Weaverse = _Weaverse;
205
188
  Weaverse.WeaverseItemStore = WeaverseItemStore;
189
+
190
+ // src/utils/index.ts
191
+ var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
192
+ var isBrowser = typeof window !== "undefined" && !isReactNative;
193
+ var isIframe = isBrowser && window.top !== window.self;
206
194
  // Annotate the CommonJS export names for ESM import in node:
207
195
  0 && (module.exports = {
208
196
  Weaverse,
package/dist/index.mjs CHANGED
@@ -15,11 +15,6 @@ var __spreadValues = (a, b) => {
15
15
  return a;
16
16
  };
17
17
 
18
- // src/utils/index.ts
19
- var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
20
- var isBrowser = typeof window !== "undefined" && !isReactNative;
21
- var isIframe = isBrowser && window.top !== window.self;
22
-
23
18
  // src/core.ts
24
19
  import * as stitches from "@stitches/core";
25
20
  var WeaverseItemStore = class {
@@ -28,6 +23,7 @@ var WeaverseItemStore = class {
28
23
  this.ref = {
29
24
  current: null
30
25
  };
26
+ this.stitchesClass = "";
31
27
  this._data = {};
32
28
  this.setData = (data) => {
33
29
  this.data = Object.assign(this.data, data);
@@ -64,7 +60,7 @@ var WeaverseItemStore = class {
64
60
  }
65
61
  };
66
62
  var _Weaverse = class {
67
- constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode } = {}) {
63
+ constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
68
64
  this.elementInstances = /* @__PURE__ */ new Map();
69
65
  this.itemInstances = /* @__PURE__ */ new Map();
70
66
  this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://weaverse.io";
@@ -75,6 +71,7 @@ var _Weaverse = class {
75
71
  };
76
72
  this.listeners = /* @__PURE__ */ new Set();
77
73
  this.isDesignMode = false;
74
+ this.ssrMode = false;
78
75
  this.mediaBreakPoints = {
79
76
  desktop: "all",
80
77
  mobile: "(max-width: 767.98px)"
@@ -85,8 +82,11 @@ var _Weaverse = class {
85
82
  media: this.mediaBreakPoints,
86
83
  theme: {
87
84
  sizes: {
88
- rowSize: "48px",
89
- columns: 16
85
+ "width": "100%",
86
+ "max-width": "100%",
87
+ "column-count": "16",
88
+ "row-count": "12",
89
+ "row-size": "48px"
90
90
  },
91
91
  space: {
92
92
  gap: "8px"
@@ -98,6 +98,7 @@ var _Weaverse = class {
98
98
  this.projectKey = projectKey || this.projectKey;
99
99
  this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
100
100
  this.isDesignMode = isDesignMode || this.isDesignMode;
101
+ this.ssrMode = ssrMode || this.ssrMode;
101
102
  projectData && (this.projectData = projectData);
102
103
  this.init();
103
104
  }
@@ -111,27 +112,9 @@ var _Weaverse = class {
111
112
  }
112
113
  init() {
113
114
  this.initStitches();
114
- this.loadStudio();
115
115
  this.initProjectItemData();
116
116
  this.updateProjectData();
117
117
  }
118
- loadStudio() {
119
- if (this.isDesignMode && isIframe) {
120
- let initStudio = () => {
121
- this.studioBridge = new window.WeaverseStudioBridge(this);
122
- this.triggerUpdate();
123
- };
124
- if (!window.WeaverseStudioBridge) {
125
- const studioBridgeScript = document.createElement("script");
126
- studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`;
127
- studioBridgeScript.type = "module";
128
- studioBridgeScript.onload = initStudio;
129
- document.body.appendChild(studioBridgeScript);
130
- } else {
131
- initStudio();
132
- }
133
- }
134
- }
135
118
  subscribe(fn) {
136
119
  this.listeners.add(fn);
137
120
  }
@@ -174,6 +157,11 @@ var _Weaverse = class {
174
157
  };
175
158
  var Weaverse = _Weaverse;
176
159
  Weaverse.WeaverseItemStore = WeaverseItemStore;
160
+
161
+ // src/utils/index.ts
162
+ var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
163
+ var isBrowser = typeof window !== "undefined" && !isReactNative;
164
+ var isIframe = isBrowser && window.top !== window.self;
177
165
  export {
178
166
  Weaverse,
179
167
  WeaverseItemStore,
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.6.2",
2
+ "version": "0.6.5",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",