@weaverse/core 0.3.6 → 0.4.0

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
@@ -20,9 +20,10 @@ declare type WeaverseElementSetting = {
20
20
  declare type WeaverseElementInspector = {
21
21
  binding: 'data' | 'style';
22
22
  key: string;
23
- componentType: InspectorComponentType;
23
+ label: string;
24
+ type: InspectorInputType;
24
25
  };
25
- declare type InspectorComponentType = "textarea" | "color";
26
+ declare type InspectorInputType = "alignment" | "color" | "switch" | "textarea";
26
27
  declare global {
27
28
  interface Window {
28
29
  WeaverseStudioBridge: any;
@@ -43,6 +44,10 @@ interface ProjectDataType {
43
44
  items: ProjectDataItemType[];
44
45
  rootId: string | number;
45
46
  }
47
+ declare type MediaBreakpoints = {
48
+ tablet: string;
49
+ mobile: string;
50
+ };
46
51
  declare type WeaverseType = {
47
52
  [key: string]: any;
48
53
  appUrl?: string;
@@ -121,20 +126,26 @@ declare class Weaverse {
121
126
  stitchesInstance: Stitches | any;
122
127
  studioBridge?: any;
123
128
  static WeaverseItemStore: typeof WeaverseItemStore;
129
+ mediaBreakPoints: {
130
+ desktop: string;
131
+ tablet: string;
132
+ mobile: string;
133
+ };
124
134
  /**
125
135
  * constructor
126
136
  * @param appUrl {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
127
137
  * @param projectKey {string} Weaverse project key to access project data via API
128
138
  * @param projectData {ProjectDataType} Weaverse project data, by default, user can provide project data via React Component.
139
+ * @param mediaBreakPoints {object} Pass down custom media query breakpoints or just use the default.
129
140
  */
130
- constructor({ appUrl, projectKey, projectData }?: WeaverseType);
141
+ constructor({ appUrl, projectKey, projectData, mediaBreakPoints }?: WeaverseType);
131
142
  /**
132
143
  * register the custom React Component to Weaverse, store it into Weaverse.elementInstances
133
- * @param name {string} unique name of the custom React Component
134
- * @param element {React.Component} custom React Component
144
+ * @param element {WeaverseElement} custom React Component
135
145
  */
136
146
  registerElement(element: WeaverseElement): void;
137
147
  init(): void;
148
+ initStitches: () => void;
138
149
  loadStudio(): void;
139
150
  subscribe(fn: any): void;
140
151
  unsubscribe(fn: any): void;
@@ -155,4 +166,4 @@ declare const isReactNative: boolean;
155
166
  declare const isBrowser: boolean;
156
167
  declare const isIframe: boolean;
157
168
 
158
- export { InspectorComponentType, ProjectDataItemType, ProjectDataType, Weaverse, WeaverseElement, WeaverseElementInspector, WeaverseElementMap, WeaverseElementSchema, WeaverseElementSetting, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative };
169
+ export { InspectorInputType, MediaBreakpoints, ProjectDataItemType, ProjectDataType, Weaverse, WeaverseElement, WeaverseElementInspector, WeaverseElementMap, WeaverseElementSchema, WeaverseElementSetting, WeaverseItemStore, WeaverseType, isBrowser, isIframe, isReactNative };
package/dist/index.js CHANGED
@@ -68,7 +68,7 @@ var WeaverseItemStore = class {
68
68
  }
69
69
  };
70
70
  var Weaverse = class {
71
- constructor({ appUrl, projectKey, projectData } = {}) {
71
+ constructor({ appUrl, projectKey, projectData, mediaBreakPoints } = {}) {
72
72
  this.elementInstances = /* @__PURE__ */ new Map();
73
73
  this.itemInstances = /* @__PURE__ */ new Map();
74
74
  this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://weaverse.io";
@@ -79,8 +79,20 @@ var Weaverse = class {
79
79
  };
80
80
  this.listeners = /* @__PURE__ */ new Set();
81
81
  this.isEditor = false;
82
+ this.mediaBreakPoints = {
83
+ desktop: "all",
84
+ tablet: "(max-width: 1023.98px)",
85
+ mobile: "(max-width: 767.98px)"
86
+ };
87
+ this.initStitches = () => {
88
+ this.stitchesInstance = stitches.createStitches({
89
+ prefix: "we",
90
+ media: this.mediaBreakPoints
91
+ });
92
+ };
82
93
  this.appUrl = appUrl || this.appUrl;
83
94
  this.projectKey = projectKey || this.projectKey;
95
+ this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
84
96
  projectData && (this.projectData = projectData);
85
97
  this.init();
86
98
  }
@@ -93,14 +105,7 @@ var Weaverse = class {
93
105
  }
94
106
  }
95
107
  init() {
96
- this.stitchesInstance = stitches.createStitches({
97
- prefix: "we",
98
- media: {
99
- bp1: "(min-width: 640px)",
100
- bp2: "(max-width: 768px)",
101
- bp3: "(min-width: 1024px)"
102
- }
103
- });
108
+ this.initStitches();
104
109
  this.loadStudio();
105
110
  }
106
111
  loadStudio() {
@@ -108,13 +113,12 @@ var Weaverse = class {
108
113
  window.addEventListener("message", (e) => {
109
114
  var _a;
110
115
  if (((_a = e.data) == null ? void 0 : _a.type) === "weaverse.preview.initializeEditor") {
116
+ this.isEditor = true;
111
117
  let initStudio = () => {
112
- let StudioBridge = window.WeaverseStudioBridge;
113
- this.studioBridge = new StudioBridge(this);
118
+ this.studioBridge = new window.WeaverseStudioBridge(this);
114
119
  this.studioBridge.subscribeMessageEvent();
115
120
  this.triggerUpdate();
116
121
  };
117
- this.isEditor = true;
118
122
  if (!window.WeaverseStudioBridge) {
119
123
  const studioBridgeScript = document.createElement("script");
120
124
  studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`;
package/dist/index.mjs CHANGED
@@ -36,7 +36,7 @@ var WeaverseItemStore = class {
36
36
  }
37
37
  };
38
38
  var Weaverse = class {
39
- constructor({ appUrl, projectKey, projectData } = {}) {
39
+ constructor({ appUrl, projectKey, projectData, mediaBreakPoints } = {}) {
40
40
  this.elementInstances = /* @__PURE__ */ new Map();
41
41
  this.itemInstances = /* @__PURE__ */ new Map();
42
42
  this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://weaverse.io";
@@ -47,8 +47,20 @@ var Weaverse = class {
47
47
  };
48
48
  this.listeners = /* @__PURE__ */ new Set();
49
49
  this.isEditor = false;
50
+ this.mediaBreakPoints = {
51
+ desktop: "all",
52
+ tablet: "(max-width: 1023.98px)",
53
+ mobile: "(max-width: 767.98px)"
54
+ };
55
+ this.initStitches = () => {
56
+ this.stitchesInstance = stitches.createStitches({
57
+ prefix: "we",
58
+ media: this.mediaBreakPoints
59
+ });
60
+ };
50
61
  this.appUrl = appUrl || this.appUrl;
51
62
  this.projectKey = projectKey || this.projectKey;
63
+ this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
52
64
  projectData && (this.projectData = projectData);
53
65
  this.init();
54
66
  }
@@ -61,14 +73,7 @@ var Weaverse = class {
61
73
  }
62
74
  }
63
75
  init() {
64
- this.stitchesInstance = stitches.createStitches({
65
- prefix: "we",
66
- media: {
67
- bp1: "(min-width: 640px)",
68
- bp2: "(max-width: 768px)",
69
- bp3: "(min-width: 1024px)"
70
- }
71
- });
76
+ this.initStitches();
72
77
  this.loadStudio();
73
78
  }
74
79
  loadStudio() {
@@ -76,13 +81,12 @@ var Weaverse = class {
76
81
  window.addEventListener("message", (e) => {
77
82
  var _a;
78
83
  if (((_a = e.data) == null ? void 0 : _a.type) === "weaverse.preview.initializeEditor") {
84
+ this.isEditor = true;
79
85
  let initStudio = () => {
80
- let StudioBridge = window.WeaverseStudioBridge;
81
- this.studioBridge = new StudioBridge(this);
86
+ this.studioBridge = new window.WeaverseStudioBridge(this);
82
87
  this.studioBridge.subscribeMessageEvent();
83
88
  this.triggerUpdate();
84
89
  };
85
- this.isEditor = true;
86
90
  if (!window.WeaverseStudioBridge) {
87
91
  const studioBridgeScript = document.createElement("script");
88
92
  studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js`;
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.3.6",
2
+ "version": "0.4.0",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",