@weaverse/core 0.7.51 → 0.7.53

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 (3) hide show
  1. package/dist/index.js +439 -1
  2. package/dist/index.mjs +399 -1
  3. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1 +1,439 @@
1
- "use strict";var y=Object.create;var p=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var D=(e,t)=>{for(var i in t)p(e,i,{get:t[i],enumerable:!0})},g=(e,t,i,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of w(t))!j.call(e,a)&&a!==i&&p(e,a,{get:()=>t[a],enumerable:!(s=x(t,a))||s.enumerable});return e};var S=(e,t,i)=>(i=e!=null?y(v(e)):{},g(t||!e||!e.__esModule?p(i,"default",{value:e,enumerable:!0}):i,e)),k=e=>g(p({},"__esModule",{value:!0}),e);var E={};D(E,{Weaverse:()=>c,WeaverseItemStore:()=>o,createGlobalStyles:()=>h,isBrowser:()=>f,isIframe:()=>m,isReactNative:()=>u,merge:()=>d,stichesUtils:()=>l});module.exports=k(E);var b=S(require("@stitches/core"));var l={m:e=>({margin:e}),mt:e=>({marginTop:e}),mr:e=>({marginRight:e}),mb:e=>({marginBottom:e}),ml:e=>({marginLeft:e}),mx:e=>({marginLeft:e,marginRight:e}),my:e=>({marginTop:e,marginBottom:e}),size:e=>({width:e,height:e}),px:e=>({paddingLeft:e,paddingRight:e}),py:e=>({paddingTop:e,paddingBottom:e})};function h(e){e.globalCss({"@keyframes spin":{from:{transform:"rotate(0deg)"},to:{transform:"rotate(360deg)"}},"@keyframes pulse":{"0%, 100%":{opacity:1},"50%":{opacity:.5}},".wv-tooltip-container":{position:"relative !important",display:"inline-flex !important",".wv-tooltip":{position:"absolute",color:"#fff !important",backgroundColor:"#000 !important",fontSize:"13px",textAlign:"center",transition:".3s all",borderRadius:"5px !important",lineHeight:"12px",bottom:"calc(100% + 5px)",left:"50%",transform:"translateX(-50%)",padding:"8px 12px",opacity:0,visibility:"hidden",textTransform:"initial",width:"max-content !important",maxWidth:"initial !important",height:"auto !important",display:"inline-block !important","&:after":{content:'""',position:"absolute",width:"10px",height:"10px",backgroundColor:"#000",bottom:"-4px",left:"50%",transform:"translateX(-50%) rotate(45deg)"}},"&:hover":{".wv-tooltip":{opacity:1,visibility:"visible",bottom:"calc(100% + 10px)"}}},".wv-spinner-wrapper":{position:"absolute",inset:"0px",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"inherit",".wv-spinner":{width:"20px",height:"20px",animation:"spin .75s linear infinite"}},"[data-wv-placeholder]":{height:"100%",width:"100%",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",backgroundColor:"rgba(236, 236, 236, 0.5)",backgroundClip:"content-box",padding:"10px"},".wv-pcard__quickview":{borderRadius:"0px !important",width:"950px !important"},"[data-blink-src]":{visibility:"hidden"},body:{"&.wv-modal-open":{".weaverse-content-root":{zIndex:9999,'[data-wv-type="product-details"]':{zIndex:999}}}},".weaverse-content-root":{position:"relative",zIndex:0,"*":{WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"auto",textRendering:"optimizeLegibility",boxSizing:"border-box"},input:{"&::-webkit-outer-spin-button, &::-webkit-inner-spin-button":{"-webkit-appearance":"none",margin:0},"&[type=number]":{"-moz-appearance":"textfield"}},select:{WebkitAppearance:"none",MozAppearance:"none",appearance:"none",outline:"none",boxShadow:"none",color:"currentColor",verticalAlign:"middle",backgroundColor:"transparent",backgroundPosition:"center",backgroundRepeat:"no-repeat",backgroundImage:"url(https://ucarecdn.com/4bb6a6e7-1ce8-4201-8f2d-da00a50105f3/)",backgroundSize:"10px",backgroundPositionX:"calc(100% - 12px)",paddingLeft:"12px",paddingRight:"35px !important",cursor:"pointer"},button:{outline:"none",boxShadow:"none",cursor:"pointer",border:"none","&:focus":{outline:"none",boxShadow:"none"}},".animate-pulse":{animation:"pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"}},".wv-error-boundary":{textAlign:"center",padding:"32px 0",button:{cursor:"pointer",fontSize:"14px",padding:"4px 10px"}},"@media (max-width: 768px)":{".wv-tooltip-container":{".wv-tooltip":{display:"none !important"}}}})()}var u=typeof navigator=="object"&&navigator.product==="ReactNative",f=typeof window<"u"&&!u,m=f&&window.top!==window.self;function d(e,t){let i={...e||{}};for(let s of Object.keys(t))t[s]instanceof Object&&!Array.isArray(t[s])&&Object.assign(t[s],d(i[s],t[s]));return Object.assign(i||{},t),i}var o=class{constructor(t,i){this.listeners=new Set;this.ref={current:null};this.stitchesClass="";this._data={id:"",type:""};this._flags={};this.setData=t=>(this.data=Object.assign(this.data,t),this.triggerUpdate(),this.data);this.subscribe=t=>{this.listeners.add(t)};this.unsubscribe=t=>{this.listeners.delete(t)};this.triggerUpdate=()=>{this.listeners.forEach(t=>t(this.data))};let{type:s,id:a}=t;this.weaverse=i,a&&s&&(i.itemInstances.set(a,this),this.data={...t})}get _id(){return this._data.id}get _element(){return this.ref.current}get Element(){return this.weaverse.elementInstances.get(this._data.type)}set data(t){this._data={...this.data,...t}}get data(){let t=this.Element?.defaultCss||{},i=this._data.css||{},s=d(t,i);return{...{...this.Element?.Component?.defaultProps},...this._data,css:s}}},c=class{constructor({appUrl:t,projectKey:i,projectData:s,mediaBreakPoints:a,isDesignMode:n,ssrMode:r}={}){this.elementInstances=new Map;this.itemInstances=new Map;this.appUrl=process.env.NODE_ENV==="development"?"http://localhost:3000":"https://studio.weaverse.io";this.projectKey="";this.projectData={rootId:"",items:[],script:{css:"",js:""}};this.listeners=new Set;this.isDesignMode=!1;this.ssrMode=!1;this.mediaBreakPoints={desktop:"all",mobile:"(max-width: 767.98px)"};this.initialized=!1;this.initializeData=t=>{if(!this.initialized){let{data:i,published:s,id:a,projectKey:n,studioUrl:r}=t;this.projectKey=n||this.projectKey,this.appUrl=r||this.appUrl,this.projectData={...i,pageId:a},this.isDesignMode=!s,this.initProjectItemData(),this.isDesignMode&&(this.triggerUpdate(),this.loadStudio())}this.initialized=!0};this.initStitches=()=>{this.stitchesInstance=this.stitchesInstance||b.createStitches({prefix:"weaverse",media:this.mediaBreakPoints,utils:l}),h(this.stitchesInstance)};this.init({appUrl:t,projectKey:i,projectData:s,mediaBreakPoints:a,isDesignMode:n,ssrMode:r})}init({appUrl:t,projectKey:i,projectData:s,mediaBreakPoints:a,isDesignMode:n,ssrMode:r}={}){this.appUrl=t||this.appUrl,this.projectKey=i||this.projectKey,this.mediaBreakPoints=a||this.mediaBreakPoints,this.isDesignMode=n||this.isDesignMode,this.ssrMode=r||this.ssrMode,this.projectData=s||this.projectData,this.initStitches(),this.initProjectItemData()}loadStudio(){setTimeout(()=>{if(m&&this.isDesignMode&&!this.studioBridge){let t=()=>{this.studioBridge=new window.WeaverseStudioBridge(this),this.triggerUpdate()};if(window.WeaverseStudioBridge)t();else{let i=document.createElement("script"),s=new Date().getTime();i.src=`${this.appUrl}/assets/studio/studio-bridge.js?t=${s}`,i.type="module",i.onload=t,document.body.appendChild(i)}}},2e3)}registerElement(t){if(t?.type){if(this.elementInstances.has(t.type))throw new Error(`Weaverse: Element '${t.type}' already registered`);this.elementInstances.set(t?.type,t)}else throw new Error("Weaverse: registerElement: `type` is required")}subscribe(t){this.listeners.add(t)}unsubscribe(t){this.listeners.delete(t)}triggerUpdate(){this.listeners.forEach(t=>t())}static fetchProjectData({fetch:t=globalThis.fetch,appUrl:i,projectKey:s}){return t(i+`/api/public/project/${s}`).then(a=>a.json()).catch(a=>console.log("Error fetching project data:",a))}setProjectData(t){this.projectData=t,this.initProjectItemData(),this.triggerUpdate()}initProjectItemData(){let t=this.projectData;t?.items&&t.items.forEach(i=>{this.itemInstances.get(i.id)||new o(i,this)})}};c.WeaverseItemStore=o;0&&(module.exports={Weaverse,WeaverseItemStore,createGlobalStyles,isBrowser,isIframe,isReactNative,merge,stichesUtils});
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
22
+ mod
23
+ ));
24
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
25
+
26
+ // src/index.ts
27
+ var src_exports = {};
28
+ __export(src_exports, {
29
+ Weaverse: () => Weaverse,
30
+ WeaverseItemStore: () => WeaverseItemStore,
31
+ createGlobalStyles: () => createGlobalStyles,
32
+ isBrowser: () => isBrowser,
33
+ isIframe: () => isIframe,
34
+ isReactNative: () => isReactNative,
35
+ merge: () => merge,
36
+ stichesUtils: () => stichesUtils
37
+ });
38
+ module.exports = __toCommonJS(src_exports);
39
+
40
+ // src/core.ts
41
+ var stitches = __toESM(require("@stitches/core"));
42
+
43
+ // src/utils/styles.ts
44
+ var stichesUtils = {
45
+ m: (value) => ({
46
+ margin: value
47
+ }),
48
+ mt: (value) => ({
49
+ marginTop: value
50
+ }),
51
+ mr: (value) => ({
52
+ marginRight: value
53
+ }),
54
+ mb: (value) => ({
55
+ marginBottom: value
56
+ }),
57
+ ml: (value) => ({
58
+ marginLeft: value
59
+ }),
60
+ mx: (value) => ({
61
+ marginLeft: value,
62
+ marginRight: value
63
+ }),
64
+ my: (value) => ({
65
+ marginTop: value,
66
+ marginBottom: value
67
+ }),
68
+ size: (value) => ({
69
+ width: value,
70
+ height: value
71
+ }),
72
+ px: (value) => ({
73
+ paddingLeft: value,
74
+ paddingRight: value
75
+ }),
76
+ py: (value) => ({
77
+ paddingTop: value,
78
+ paddingBottom: value
79
+ })
80
+ };
81
+ function createGlobalStyles(stitches2) {
82
+ let globalStyles = stitches2.globalCss({
83
+ "@keyframes spin": {
84
+ from: { transform: "rotate(0deg)" },
85
+ to: { transform: "rotate(360deg)" }
86
+ },
87
+ "@keyframes pulse": {
88
+ "0%, 100%": { opacity: 1 },
89
+ "50%": { opacity: 0.5 }
90
+ },
91
+ ".wv-tooltip-container": {
92
+ position: "relative !important",
93
+ display: "inline-flex !important",
94
+ ".wv-tooltip": {
95
+ position: "absolute",
96
+ color: "#fff !important",
97
+ backgroundColor: "#000 !important",
98
+ fontSize: "13px",
99
+ textAlign: "center",
100
+ transition: ".3s all",
101
+ borderRadius: "5px !important",
102
+ lineHeight: "12px",
103
+ bottom: "calc(100% + 5px)",
104
+ left: "50%",
105
+ transform: "translateX(-50%)",
106
+ padding: "8px 12px",
107
+ opacity: 0,
108
+ visibility: "hidden",
109
+ textTransform: "initial",
110
+ width: "max-content !important",
111
+ maxWidth: "initial !important",
112
+ height: "auto !important",
113
+ display: "inline-block !important",
114
+ "&:after": {
115
+ content: '""',
116
+ position: "absolute",
117
+ width: "10px",
118
+ height: "10px",
119
+ backgroundColor: "#000",
120
+ bottom: "-4px",
121
+ left: "50%",
122
+ transform: "translateX(-50%) rotate(45deg)"
123
+ }
124
+ },
125
+ "&:hover": {
126
+ ".wv-tooltip": {
127
+ opacity: 1,
128
+ visibility: "visible",
129
+ bottom: "calc(100% + 10px)"
130
+ }
131
+ }
132
+ },
133
+ ".wv-spinner-wrapper": {
134
+ position: "absolute",
135
+ inset: "0px",
136
+ display: "flex",
137
+ alignItems: "center",
138
+ justifyContent: "center",
139
+ backgroundColor: "inherit",
140
+ ".wv-spinner": {
141
+ width: "20px",
142
+ height: "20px",
143
+ animation: "spin .75s linear infinite"
144
+ }
145
+ },
146
+ "[data-wv-placeholder]": {
147
+ height: "100%",
148
+ width: "100%",
149
+ display: "flex",
150
+ flexDirection: "column",
151
+ alignItems: "center",
152
+ justifyContent: "center",
153
+ backgroundColor: "rgba(236, 236, 236, 0.5)",
154
+ backgroundClip: "content-box",
155
+ padding: "10px"
156
+ },
157
+ ".wv-pcard__quickview": {
158
+ borderRadius: "0px !important",
159
+ width: "950px !important"
160
+ },
161
+ "[data-blink-src]": {
162
+ visibility: "hidden"
163
+ },
164
+ body: {
165
+ "&.wv-modal-open": {
166
+ ".weaverse-content-root": {
167
+ zIndex: 9999,
168
+ '[data-wv-type="product-details"]': {
169
+ zIndex: 999
170
+ }
171
+ }
172
+ }
173
+ },
174
+ ".weaverse-content-root": {
175
+ position: "relative",
176
+ zIndex: 0,
177
+ "*": {
178
+ WebkitFontSmoothing: "antialiased",
179
+ MozOsxFontSmoothing: "auto",
180
+ textRendering: "optimizeLegibility",
181
+ boxSizing: "border-box"
182
+ },
183
+ input: {
184
+ "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
185
+ "-webkit-appearance": "none",
186
+ margin: 0
187
+ },
188
+ "&[type=number]": {
189
+ "-moz-appearance": "textfield"
190
+ }
191
+ },
192
+ select: {
193
+ WebkitAppearance: "none",
194
+ MozAppearance: "none",
195
+ appearance: "none",
196
+ outline: "none",
197
+ boxShadow: "none",
198
+ color: "currentColor",
199
+ verticalAlign: "middle",
200
+ backgroundColor: "transparent",
201
+ backgroundPosition: "center",
202
+ backgroundRepeat: "no-repeat",
203
+ backgroundImage: "url(https://ucarecdn.com/4bb6a6e7-1ce8-4201-8f2d-da00a50105f3/)",
204
+ backgroundSize: "10px",
205
+ backgroundPositionX: "calc(100% - 12px)",
206
+ paddingLeft: "12px",
207
+ paddingRight: "35px !important",
208
+ cursor: "pointer"
209
+ },
210
+ button: {
211
+ outline: "none",
212
+ boxShadow: "none",
213
+ cursor: "pointer",
214
+ border: "none",
215
+ "&:focus": {
216
+ outline: "none",
217
+ boxShadow: "none"
218
+ }
219
+ },
220
+ ".animate-pulse": {
221
+ animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
222
+ }
223
+ },
224
+ ".wv-error-boundary": {
225
+ textAlign: "center",
226
+ padding: "32px 0",
227
+ button: {
228
+ cursor: "pointer",
229
+ fontSize: "14px",
230
+ padding: "4px 10px"
231
+ }
232
+ },
233
+ "@media (max-width: 768px)": {
234
+ ".wv-tooltip-container": {
235
+ ".wv-tooltip": {
236
+ display: "none !important"
237
+ }
238
+ }
239
+ }
240
+ });
241
+ globalStyles();
242
+ }
243
+
244
+ // src/utils/index.ts
245
+ var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
246
+ var isBrowser = typeof window !== "undefined" && !isReactNative;
247
+ var isIframe = isBrowser && window.top !== window.self;
248
+ function merge(target, source) {
249
+ const t = { ...target || {} };
250
+ for (const key of Object.keys(source)) {
251
+ if (source[key] instanceof Object && !Array.isArray(source[key])) {
252
+ Object.assign(source[key], merge(t[key], source[key]));
253
+ }
254
+ }
255
+ Object.assign(t || {}, source);
256
+ return t;
257
+ }
258
+
259
+ // src/core.ts
260
+ var WeaverseItemStore = class {
261
+ constructor(itemData, weaverse) {
262
+ this.listeners = /* @__PURE__ */ new Set();
263
+ this.ref = {
264
+ current: null
265
+ };
266
+ this.stitchesClass = "";
267
+ this._data = { id: "", type: "" };
268
+ this._flags = {};
269
+ this.setData = (data) => {
270
+ this.data = Object.assign(this.data, data);
271
+ this.triggerUpdate();
272
+ return this.data;
273
+ };
274
+ this.subscribe = (fn) => {
275
+ this.listeners.add(fn);
276
+ };
277
+ this.unsubscribe = (fn) => {
278
+ this.listeners.delete(fn);
279
+ };
280
+ this.triggerUpdate = () => {
281
+ this.listeners.forEach((fn) => {
282
+ return fn(this.data);
283
+ });
284
+ };
285
+ let { type, id } = itemData;
286
+ this.weaverse = weaverse;
287
+ if (id && type) {
288
+ weaverse.itemInstances.set(id, this);
289
+ this.data = { ...itemData };
290
+ }
291
+ }
292
+ get _id() {
293
+ return this._data.id;
294
+ }
295
+ get _element() {
296
+ return this.ref.current;
297
+ }
298
+ get Element() {
299
+ return this.weaverse.elementInstances.get(this._data.type);
300
+ }
301
+ set data(data) {
302
+ this._data = { ...this.data, ...data };
303
+ }
304
+ get data() {
305
+ let defaultCss = this.Element?.defaultCss || {};
306
+ let currentCss = this._data.css || {};
307
+ let css = merge(defaultCss, currentCss);
308
+ let defaultData = { ...this.Element?.Component?.defaultProps };
309
+ return { ...defaultData, ...this._data, css };
310
+ }
311
+ };
312
+ var Weaverse = class {
313
+ constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
314
+ this.elementInstances = /* @__PURE__ */ new Map();
315
+ this.itemInstances = /* @__PURE__ */ new Map();
316
+ this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://studio.weaverse.io";
317
+ this.projectKey = "";
318
+ this.projectData = {
319
+ rootId: "",
320
+ items: [],
321
+ script: { css: "", js: "" }
322
+ };
323
+ this.listeners = /* @__PURE__ */ new Set();
324
+ this.isDesignMode = false;
325
+ this.ssrMode = false;
326
+ this.mediaBreakPoints = {
327
+ desktop: "all",
328
+ mobile: "(max-width: 767.98px)"
329
+ };
330
+ this.initialized = false;
331
+ this.initializeData = (data) => {
332
+ if (!this.initialized) {
333
+ let { data: pageData, published, id, projectKey, studioUrl } = data;
334
+ this.projectKey = projectKey || this.projectKey;
335
+ this.appUrl = studioUrl || this.appUrl;
336
+ this.projectData = { ...pageData, pageId: id };
337
+ this.isDesignMode = !published;
338
+ this.initProjectItemData();
339
+ if (this.isDesignMode) {
340
+ this.triggerUpdate();
341
+ this.loadStudio();
342
+ }
343
+ }
344
+ this.initialized = true;
345
+ };
346
+ this.initStitches = () => {
347
+ this.stitchesInstance = this.stitchesInstance || stitches.createStitches({
348
+ prefix: "weaverse",
349
+ media: this.mediaBreakPoints,
350
+ utils: stichesUtils
351
+ });
352
+ createGlobalStyles(this.stitchesInstance);
353
+ };
354
+ this.init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode });
355
+ }
356
+ init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
357
+ this.appUrl = appUrl || this.appUrl;
358
+ this.projectKey = projectKey || this.projectKey;
359
+ this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
360
+ this.isDesignMode = isDesignMode || this.isDesignMode;
361
+ this.ssrMode = ssrMode || this.ssrMode;
362
+ this.projectData = projectData || this.projectData;
363
+ this.initStitches();
364
+ this.initProjectItemData();
365
+ }
366
+ loadStudio() {
367
+ setTimeout(() => {
368
+ if (isIframe && this.isDesignMode && !this.studioBridge) {
369
+ const initStudio = () => {
370
+ this.studioBridge = new window.WeaverseStudioBridge(this);
371
+ this.triggerUpdate();
372
+ };
373
+ if (!window.WeaverseStudioBridge) {
374
+ let studioBridgeScript = document.createElement("script");
375
+ let timeStamp = new Date().getTime();
376
+ studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js?t=${timeStamp}`;
377
+ studioBridgeScript.type = "module";
378
+ studioBridgeScript.onload = initStudio;
379
+ document.body.appendChild(studioBridgeScript);
380
+ } else {
381
+ initStudio();
382
+ }
383
+ }
384
+ }, 2e3);
385
+ }
386
+ registerElement(element) {
387
+ if (element?.type) {
388
+ if (this.elementInstances.has(element.type)) {
389
+ throw new Error(`Weaverse: Element '${element.type}' already registered`);
390
+ }
391
+ this.elementInstances.set(element?.type, element);
392
+ } else {
393
+ throw new Error("Weaverse: registerElement: `type` is required");
394
+ }
395
+ }
396
+ subscribe(fn) {
397
+ this.listeners.add(fn);
398
+ }
399
+ unsubscribe(fn) {
400
+ this.listeners.delete(fn);
401
+ }
402
+ triggerUpdate() {
403
+ this.listeners.forEach((fn) => fn());
404
+ }
405
+ static fetchProjectData({
406
+ fetch = globalThis.fetch,
407
+ appUrl,
408
+ projectKey
409
+ }) {
410
+ return fetch(appUrl + `/api/public/project/${projectKey}`).then((res) => res.json()).catch((err) => console.log("Error fetching project data:", err));
411
+ }
412
+ setProjectData(projectData) {
413
+ this.projectData = projectData;
414
+ this.initProjectItemData();
415
+ this.triggerUpdate();
416
+ }
417
+ initProjectItemData() {
418
+ const data = this.projectData;
419
+ if (data?.items) {
420
+ data.items.forEach((item) => {
421
+ if (!this.itemInstances.get(item.id)) {
422
+ new WeaverseItemStore(item, this);
423
+ }
424
+ });
425
+ }
426
+ }
427
+ };
428
+ Weaverse.WeaverseItemStore = WeaverseItemStore;
429
+ // Annotate the CommonJS export names for ESM import in node:
430
+ 0 && (module.exports = {
431
+ Weaverse,
432
+ WeaverseItemStore,
433
+ createGlobalStyles,
434
+ isBrowser,
435
+ isIframe,
436
+ isReactNative,
437
+ merge,
438
+ stichesUtils
439
+ });
package/dist/index.mjs CHANGED
@@ -1 +1,399 @@
1
- import*as m from"@stitches/core";var c={m:e=>({margin:e}),mt:e=>({marginTop:e}),mr:e=>({marginRight:e}),mb:e=>({marginBottom:e}),ml:e=>({marginLeft:e}),mx:e=>({marginLeft:e,marginRight:e}),my:e=>({marginTop:e,marginBottom:e}),size:e=>({width:e,height:e}),px:e=>({paddingLeft:e,paddingRight:e}),py:e=>({paddingTop:e,paddingBottom:e})};function l(e){e.globalCss({"@keyframes spin":{from:{transform:"rotate(0deg)"},to:{transform:"rotate(360deg)"}},"@keyframes pulse":{"0%, 100%":{opacity:1},"50%":{opacity:.5}},".wv-tooltip-container":{position:"relative !important",display:"inline-flex !important",".wv-tooltip":{position:"absolute",color:"#fff !important",backgroundColor:"#000 !important",fontSize:"13px",textAlign:"center",transition:".3s all",borderRadius:"5px !important",lineHeight:"12px",bottom:"calc(100% + 5px)",left:"50%",transform:"translateX(-50%)",padding:"8px 12px",opacity:0,visibility:"hidden",textTransform:"initial",width:"max-content !important",maxWidth:"initial !important",height:"auto !important",display:"inline-block !important","&:after":{content:'""',position:"absolute",width:"10px",height:"10px",backgroundColor:"#000",bottom:"-4px",left:"50%",transform:"translateX(-50%) rotate(45deg)"}},"&:hover":{".wv-tooltip":{opacity:1,visibility:"visible",bottom:"calc(100% + 10px)"}}},".wv-spinner-wrapper":{position:"absolute",inset:"0px",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"inherit",".wv-spinner":{width:"20px",height:"20px",animation:"spin .75s linear infinite"}},"[data-wv-placeholder]":{height:"100%",width:"100%",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",backgroundColor:"rgba(236, 236, 236, 0.5)",backgroundClip:"content-box",padding:"10px"},".wv-pcard__quickview":{borderRadius:"0px !important",width:"950px !important"},"[data-blink-src]":{visibility:"hidden"},body:{"&.wv-modal-open":{".weaverse-content-root":{zIndex:9999,'[data-wv-type="product-details"]':{zIndex:999}}}},".weaverse-content-root":{position:"relative",zIndex:0,"*":{WebkitFontSmoothing:"antialiased",MozOsxFontSmoothing:"auto",textRendering:"optimizeLegibility",boxSizing:"border-box"},input:{"&::-webkit-outer-spin-button, &::-webkit-inner-spin-button":{"-webkit-appearance":"none",margin:0},"&[type=number]":{"-moz-appearance":"textfield"}},select:{WebkitAppearance:"none",MozAppearance:"none",appearance:"none",outline:"none",boxShadow:"none",color:"currentColor",verticalAlign:"middle",backgroundColor:"transparent",backgroundPosition:"center",backgroundRepeat:"no-repeat",backgroundImage:"url(https://ucarecdn.com/4bb6a6e7-1ce8-4201-8f2d-da00a50105f3/)",backgroundSize:"10px",backgroundPositionX:"calc(100% - 12px)",paddingLeft:"12px",paddingRight:"35px !important",cursor:"pointer"},button:{outline:"none",boxShadow:"none",cursor:"pointer",border:"none","&:focus":{outline:"none",boxShadow:"none"}},".animate-pulse":{animation:"pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"}},".wv-error-boundary":{textAlign:"center",padding:"32px 0",button:{cursor:"pointer",fontSize:"14px",padding:"4px 10px"}},"@media (max-width: 768px)":{".wv-tooltip-container":{".wv-tooltip":{display:"none !important"}}}})()}var g=typeof navigator=="object"&&navigator.product==="ReactNative",u=typeof window<"u"&&!g,h=u&&window.top!==window.self;function p(e,t){let i={...e||{}};for(let s of Object.keys(t))t[s]instanceof Object&&!Array.isArray(t[s])&&Object.assign(t[s],p(i[s],t[s]));return Object.assign(i||{},t),i}var o=class{constructor(t,i){this.listeners=new Set;this.ref={current:null};this.stitchesClass="";this._data={id:"",type:""};this._flags={};this.setData=t=>(this.data=Object.assign(this.data,t),this.triggerUpdate(),this.data);this.subscribe=t=>{this.listeners.add(t)};this.unsubscribe=t=>{this.listeners.delete(t)};this.triggerUpdate=()=>{this.listeners.forEach(t=>t(this.data))};let{type:s,id:a}=t;this.weaverse=i,a&&s&&(i.itemInstances.set(a,this),this.data={...t})}get _id(){return this._data.id}get _element(){return this.ref.current}get Element(){return this.weaverse.elementInstances.get(this._data.type)}set data(t){this._data={...this.data,...t}}get data(){let t=this.Element?.defaultCss||{},i=this._data.css||{},s=p(t,i);return{...{...this.Element?.Component?.defaultProps},...this._data,css:s}}},d=class{constructor({appUrl:t,projectKey:i,projectData:s,mediaBreakPoints:a,isDesignMode:n,ssrMode:r}={}){this.elementInstances=new Map;this.itemInstances=new Map;this.appUrl=process.env.NODE_ENV==="development"?"http://localhost:3000":"https://studio.weaverse.io";this.projectKey="";this.projectData={rootId:"",items:[],script:{css:"",js:""}};this.listeners=new Set;this.isDesignMode=!1;this.ssrMode=!1;this.mediaBreakPoints={desktop:"all",mobile:"(max-width: 767.98px)"};this.initialized=!1;this.initializeData=t=>{if(!this.initialized){let{data:i,published:s,id:a,projectKey:n,studioUrl:r}=t;this.projectKey=n||this.projectKey,this.appUrl=r||this.appUrl,this.projectData={...i,pageId:a},this.isDesignMode=!s,this.initProjectItemData(),this.isDesignMode&&(this.triggerUpdate(),this.loadStudio())}this.initialized=!0};this.initStitches=()=>{this.stitchesInstance=this.stitchesInstance||m.createStitches({prefix:"weaverse",media:this.mediaBreakPoints,utils:c}),l(this.stitchesInstance)};this.init({appUrl:t,projectKey:i,projectData:s,mediaBreakPoints:a,isDesignMode:n,ssrMode:r})}init({appUrl:t,projectKey:i,projectData:s,mediaBreakPoints:a,isDesignMode:n,ssrMode:r}={}){this.appUrl=t||this.appUrl,this.projectKey=i||this.projectKey,this.mediaBreakPoints=a||this.mediaBreakPoints,this.isDesignMode=n||this.isDesignMode,this.ssrMode=r||this.ssrMode,this.projectData=s||this.projectData,this.initStitches(),this.initProjectItemData()}loadStudio(){setTimeout(()=>{if(h&&this.isDesignMode&&!this.studioBridge){let t=()=>{this.studioBridge=new window.WeaverseStudioBridge(this),this.triggerUpdate()};if(window.WeaverseStudioBridge)t();else{let i=document.createElement("script"),s=new Date().getTime();i.src=`${this.appUrl}/assets/studio/studio-bridge.js?t=${s}`,i.type="module",i.onload=t,document.body.appendChild(i)}}},2e3)}registerElement(t){if(t?.type){if(this.elementInstances.has(t.type))throw new Error(`Weaverse: Element '${t.type}' already registered`);this.elementInstances.set(t?.type,t)}else throw new Error("Weaverse: registerElement: `type` is required")}subscribe(t){this.listeners.add(t)}unsubscribe(t){this.listeners.delete(t)}triggerUpdate(){this.listeners.forEach(t=>t())}static fetchProjectData({fetch:t=globalThis.fetch,appUrl:i,projectKey:s}){return t(i+`/api/public/project/${s}`).then(a=>a.json()).catch(a=>console.log("Error fetching project data:",a))}setProjectData(t){this.projectData=t,this.initProjectItemData(),this.triggerUpdate()}initProjectItemData(){let t=this.projectData;t?.items&&t.items.forEach(i=>{this.itemInstances.get(i.id)||new o(i,this)})}};d.WeaverseItemStore=o;export{d as Weaverse,o as WeaverseItemStore,l as createGlobalStyles,u as isBrowser,h as isIframe,g as isReactNative,p as merge,c as stichesUtils};
1
+ // src/core.ts
2
+ import * as stitches from "@stitches/core";
3
+
4
+ // src/utils/styles.ts
5
+ var stichesUtils = {
6
+ m: (value) => ({
7
+ margin: value
8
+ }),
9
+ mt: (value) => ({
10
+ marginTop: value
11
+ }),
12
+ mr: (value) => ({
13
+ marginRight: value
14
+ }),
15
+ mb: (value) => ({
16
+ marginBottom: value
17
+ }),
18
+ ml: (value) => ({
19
+ marginLeft: value
20
+ }),
21
+ mx: (value) => ({
22
+ marginLeft: value,
23
+ marginRight: value
24
+ }),
25
+ my: (value) => ({
26
+ marginTop: value,
27
+ marginBottom: value
28
+ }),
29
+ size: (value) => ({
30
+ width: value,
31
+ height: value
32
+ }),
33
+ px: (value) => ({
34
+ paddingLeft: value,
35
+ paddingRight: value
36
+ }),
37
+ py: (value) => ({
38
+ paddingTop: value,
39
+ paddingBottom: value
40
+ })
41
+ };
42
+ function createGlobalStyles(stitches2) {
43
+ let globalStyles = stitches2.globalCss({
44
+ "@keyframes spin": {
45
+ from: { transform: "rotate(0deg)" },
46
+ to: { transform: "rotate(360deg)" }
47
+ },
48
+ "@keyframes pulse": {
49
+ "0%, 100%": { opacity: 1 },
50
+ "50%": { opacity: 0.5 }
51
+ },
52
+ ".wv-tooltip-container": {
53
+ position: "relative !important",
54
+ display: "inline-flex !important",
55
+ ".wv-tooltip": {
56
+ position: "absolute",
57
+ color: "#fff !important",
58
+ backgroundColor: "#000 !important",
59
+ fontSize: "13px",
60
+ textAlign: "center",
61
+ transition: ".3s all",
62
+ borderRadius: "5px !important",
63
+ lineHeight: "12px",
64
+ bottom: "calc(100% + 5px)",
65
+ left: "50%",
66
+ transform: "translateX(-50%)",
67
+ padding: "8px 12px",
68
+ opacity: 0,
69
+ visibility: "hidden",
70
+ textTransform: "initial",
71
+ width: "max-content !important",
72
+ maxWidth: "initial !important",
73
+ height: "auto !important",
74
+ display: "inline-block !important",
75
+ "&:after": {
76
+ content: '""',
77
+ position: "absolute",
78
+ width: "10px",
79
+ height: "10px",
80
+ backgroundColor: "#000",
81
+ bottom: "-4px",
82
+ left: "50%",
83
+ transform: "translateX(-50%) rotate(45deg)"
84
+ }
85
+ },
86
+ "&:hover": {
87
+ ".wv-tooltip": {
88
+ opacity: 1,
89
+ visibility: "visible",
90
+ bottom: "calc(100% + 10px)"
91
+ }
92
+ }
93
+ },
94
+ ".wv-spinner-wrapper": {
95
+ position: "absolute",
96
+ inset: "0px",
97
+ display: "flex",
98
+ alignItems: "center",
99
+ justifyContent: "center",
100
+ backgroundColor: "inherit",
101
+ ".wv-spinner": {
102
+ width: "20px",
103
+ height: "20px",
104
+ animation: "spin .75s linear infinite"
105
+ }
106
+ },
107
+ "[data-wv-placeholder]": {
108
+ height: "100%",
109
+ width: "100%",
110
+ display: "flex",
111
+ flexDirection: "column",
112
+ alignItems: "center",
113
+ justifyContent: "center",
114
+ backgroundColor: "rgba(236, 236, 236, 0.5)",
115
+ backgroundClip: "content-box",
116
+ padding: "10px"
117
+ },
118
+ ".wv-pcard__quickview": {
119
+ borderRadius: "0px !important",
120
+ width: "950px !important"
121
+ },
122
+ "[data-blink-src]": {
123
+ visibility: "hidden"
124
+ },
125
+ body: {
126
+ "&.wv-modal-open": {
127
+ ".weaverse-content-root": {
128
+ zIndex: 9999,
129
+ '[data-wv-type="product-details"]': {
130
+ zIndex: 999
131
+ }
132
+ }
133
+ }
134
+ },
135
+ ".weaverse-content-root": {
136
+ position: "relative",
137
+ zIndex: 0,
138
+ "*": {
139
+ WebkitFontSmoothing: "antialiased",
140
+ MozOsxFontSmoothing: "auto",
141
+ textRendering: "optimizeLegibility",
142
+ boxSizing: "border-box"
143
+ },
144
+ input: {
145
+ "&::-webkit-outer-spin-button, &::-webkit-inner-spin-button": {
146
+ "-webkit-appearance": "none",
147
+ margin: 0
148
+ },
149
+ "&[type=number]": {
150
+ "-moz-appearance": "textfield"
151
+ }
152
+ },
153
+ select: {
154
+ WebkitAppearance: "none",
155
+ MozAppearance: "none",
156
+ appearance: "none",
157
+ outline: "none",
158
+ boxShadow: "none",
159
+ color: "currentColor",
160
+ verticalAlign: "middle",
161
+ backgroundColor: "transparent",
162
+ backgroundPosition: "center",
163
+ backgroundRepeat: "no-repeat",
164
+ backgroundImage: "url(https://ucarecdn.com/4bb6a6e7-1ce8-4201-8f2d-da00a50105f3/)",
165
+ backgroundSize: "10px",
166
+ backgroundPositionX: "calc(100% - 12px)",
167
+ paddingLeft: "12px",
168
+ paddingRight: "35px !important",
169
+ cursor: "pointer"
170
+ },
171
+ button: {
172
+ outline: "none",
173
+ boxShadow: "none",
174
+ cursor: "pointer",
175
+ border: "none",
176
+ "&:focus": {
177
+ outline: "none",
178
+ boxShadow: "none"
179
+ }
180
+ },
181
+ ".animate-pulse": {
182
+ animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite"
183
+ }
184
+ },
185
+ ".wv-error-boundary": {
186
+ textAlign: "center",
187
+ padding: "32px 0",
188
+ button: {
189
+ cursor: "pointer",
190
+ fontSize: "14px",
191
+ padding: "4px 10px"
192
+ }
193
+ },
194
+ "@media (max-width: 768px)": {
195
+ ".wv-tooltip-container": {
196
+ ".wv-tooltip": {
197
+ display: "none !important"
198
+ }
199
+ }
200
+ }
201
+ });
202
+ globalStyles();
203
+ }
204
+
205
+ // src/utils/index.ts
206
+ var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
207
+ var isBrowser = typeof window !== "undefined" && !isReactNative;
208
+ var isIframe = isBrowser && window.top !== window.self;
209
+ function merge(target, source) {
210
+ const t = { ...target || {} };
211
+ for (const key of Object.keys(source)) {
212
+ if (source[key] instanceof Object && !Array.isArray(source[key])) {
213
+ Object.assign(source[key], merge(t[key], source[key]));
214
+ }
215
+ }
216
+ Object.assign(t || {}, source);
217
+ return t;
218
+ }
219
+
220
+ // src/core.ts
221
+ var WeaverseItemStore = class {
222
+ constructor(itemData, weaverse) {
223
+ this.listeners = /* @__PURE__ */ new Set();
224
+ this.ref = {
225
+ current: null
226
+ };
227
+ this.stitchesClass = "";
228
+ this._data = { id: "", type: "" };
229
+ this._flags = {};
230
+ this.setData = (data) => {
231
+ this.data = Object.assign(this.data, data);
232
+ this.triggerUpdate();
233
+ return this.data;
234
+ };
235
+ this.subscribe = (fn) => {
236
+ this.listeners.add(fn);
237
+ };
238
+ this.unsubscribe = (fn) => {
239
+ this.listeners.delete(fn);
240
+ };
241
+ this.triggerUpdate = () => {
242
+ this.listeners.forEach((fn) => {
243
+ return fn(this.data);
244
+ });
245
+ };
246
+ let { type, id } = itemData;
247
+ this.weaverse = weaverse;
248
+ if (id && type) {
249
+ weaverse.itemInstances.set(id, this);
250
+ this.data = { ...itemData };
251
+ }
252
+ }
253
+ get _id() {
254
+ return this._data.id;
255
+ }
256
+ get _element() {
257
+ return this.ref.current;
258
+ }
259
+ get Element() {
260
+ return this.weaverse.elementInstances.get(this._data.type);
261
+ }
262
+ set data(data) {
263
+ this._data = { ...this.data, ...data };
264
+ }
265
+ get data() {
266
+ let defaultCss = this.Element?.defaultCss || {};
267
+ let currentCss = this._data.css || {};
268
+ let css = merge(defaultCss, currentCss);
269
+ let defaultData = { ...this.Element?.Component?.defaultProps };
270
+ return { ...defaultData, ...this._data, css };
271
+ }
272
+ };
273
+ var Weaverse = class {
274
+ constructor({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
275
+ this.elementInstances = /* @__PURE__ */ new Map();
276
+ this.itemInstances = /* @__PURE__ */ new Map();
277
+ this.appUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://studio.weaverse.io";
278
+ this.projectKey = "";
279
+ this.projectData = {
280
+ rootId: "",
281
+ items: [],
282
+ script: { css: "", js: "" }
283
+ };
284
+ this.listeners = /* @__PURE__ */ new Set();
285
+ this.isDesignMode = false;
286
+ this.ssrMode = false;
287
+ this.mediaBreakPoints = {
288
+ desktop: "all",
289
+ mobile: "(max-width: 767.98px)"
290
+ };
291
+ this.initialized = false;
292
+ this.initializeData = (data) => {
293
+ if (!this.initialized) {
294
+ let { data: pageData, published, id, projectKey, studioUrl } = data;
295
+ this.projectKey = projectKey || this.projectKey;
296
+ this.appUrl = studioUrl || this.appUrl;
297
+ this.projectData = { ...pageData, pageId: id };
298
+ this.isDesignMode = !published;
299
+ this.initProjectItemData();
300
+ if (this.isDesignMode) {
301
+ this.triggerUpdate();
302
+ this.loadStudio();
303
+ }
304
+ }
305
+ this.initialized = true;
306
+ };
307
+ this.initStitches = () => {
308
+ this.stitchesInstance = this.stitchesInstance || stitches.createStitches({
309
+ prefix: "weaverse",
310
+ media: this.mediaBreakPoints,
311
+ utils: stichesUtils
312
+ });
313
+ createGlobalStyles(this.stitchesInstance);
314
+ };
315
+ this.init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode });
316
+ }
317
+ init({ appUrl, projectKey, projectData, mediaBreakPoints, isDesignMode, ssrMode } = {}) {
318
+ this.appUrl = appUrl || this.appUrl;
319
+ this.projectKey = projectKey || this.projectKey;
320
+ this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
321
+ this.isDesignMode = isDesignMode || this.isDesignMode;
322
+ this.ssrMode = ssrMode || this.ssrMode;
323
+ this.projectData = projectData || this.projectData;
324
+ this.initStitches();
325
+ this.initProjectItemData();
326
+ }
327
+ loadStudio() {
328
+ setTimeout(() => {
329
+ if (isIframe && this.isDesignMode && !this.studioBridge) {
330
+ const initStudio = () => {
331
+ this.studioBridge = new window.WeaverseStudioBridge(this);
332
+ this.triggerUpdate();
333
+ };
334
+ if (!window.WeaverseStudioBridge) {
335
+ let studioBridgeScript = document.createElement("script");
336
+ let timeStamp = new Date().getTime();
337
+ studioBridgeScript.src = `${this.appUrl}/assets/studio/studio-bridge.js?t=${timeStamp}`;
338
+ studioBridgeScript.type = "module";
339
+ studioBridgeScript.onload = initStudio;
340
+ document.body.appendChild(studioBridgeScript);
341
+ } else {
342
+ initStudio();
343
+ }
344
+ }
345
+ }, 2e3);
346
+ }
347
+ registerElement(element) {
348
+ if (element?.type) {
349
+ if (this.elementInstances.has(element.type)) {
350
+ throw new Error(`Weaverse: Element '${element.type}' already registered`);
351
+ }
352
+ this.elementInstances.set(element?.type, element);
353
+ } else {
354
+ throw new Error("Weaverse: registerElement: `type` is required");
355
+ }
356
+ }
357
+ subscribe(fn) {
358
+ this.listeners.add(fn);
359
+ }
360
+ unsubscribe(fn) {
361
+ this.listeners.delete(fn);
362
+ }
363
+ triggerUpdate() {
364
+ this.listeners.forEach((fn) => fn());
365
+ }
366
+ static fetchProjectData({
367
+ fetch = globalThis.fetch,
368
+ appUrl,
369
+ projectKey
370
+ }) {
371
+ return fetch(appUrl + `/api/public/project/${projectKey}`).then((res) => res.json()).catch((err) => console.log("Error fetching project data:", err));
372
+ }
373
+ setProjectData(projectData) {
374
+ this.projectData = projectData;
375
+ this.initProjectItemData();
376
+ this.triggerUpdate();
377
+ }
378
+ initProjectItemData() {
379
+ const data = this.projectData;
380
+ if (data?.items) {
381
+ data.items.forEach((item) => {
382
+ if (!this.itemInstances.get(item.id)) {
383
+ new WeaverseItemStore(item, this);
384
+ }
385
+ });
386
+ }
387
+ }
388
+ };
389
+ Weaverse.WeaverseItemStore = WeaverseItemStore;
390
+ export {
391
+ Weaverse,
392
+ WeaverseItemStore,
393
+ createGlobalStyles,
394
+ isBrowser,
395
+ isIframe,
396
+ isReactNative,
397
+ merge,
398
+ stichesUtils
399
+ };
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.7.51",
2
+ "version": "0.7.53",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
@@ -16,7 +16,7 @@
16
16
  "scripts": {
17
17
  "start": "npm run dev",
18
18
  "dev": "tsup src/index.ts --format esm,cjs --dts --outDir dist --watch --sourcemap",
19
- "build": "tsup src/index.ts --format esm,cjs --dts --outDir dist --minify",
19
+ "build": "tsup src/index.ts --format esm,cjs --dts --outDir dist",
20
20
  "clean": "rimraf dist",
21
21
  "prepublish": "npm run build"
22
22
  },