@weaverse/hydrogen 2.3.0 → 2.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.
Files changed (5) hide show
  1. package/dist/index.d.mts +12 -8
  2. package/dist/index.d.ts +12 -8
  3. package/dist/index.js +114 -54
  4. package/dist/index.mjs +95 -29
  5. package/package.json +4 -4
package/dist/index.d.mts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ElementData, ElementSchema, BasicInput, WeaverseElement, WeaverseCoreParams, WeaverseProjectDataType, WeaverseResourcePickerData, Weaverse, PlatformTypeEnum, WeaverseItemStore } from '@weaverse/react';
2
- export { WeaverseImage } from '@weaverse/react';
2
+ export { WeaverseImage, useItemInstance, useWeaverse } from '@weaverse/react';
3
3
  import { NavigateFunction } from '@remix-run/react';
4
4
  import { createWithCache, Storefront } from '@shopify/hydrogen';
5
5
  import { LanguageCode, CountryCode, CurrencyCode } from '@shopify/hydrogen/storefront-api-types';
@@ -31,6 +31,11 @@ declare let STORE_PAGES: {
31
31
  PAGE: string;
32
32
  BLOG: string;
33
33
  ARTICLE: string;
34
+ CART: string;
35
+ CUSTOMER: string;
36
+ SEARCH: string;
37
+ NOT_FOUND: string;
38
+ PASSWORD: string;
34
39
  CUSTOM: string;
35
40
  };
36
41
 
@@ -51,6 +56,8 @@ declare class WeaverseClient {
51
56
  countries?: WeaverseClientArgs['countries'];
52
57
  constructor(args: WeaverseClientArgs);
53
58
  fetchWithCache: <T>(url: string, options: FetchWithCacheOptions) => Promise<T>;
59
+ incrementCacheHits: () => Promise<string>;
60
+ resetCacheHits: () => Promise<void>;
54
61
  loadThemeSettings: (strategy?: AllCacheOptions) => Promise<any>;
55
62
  loadPage: (params?: LoadPageParams) => Promise<WeaverseLoaderData | null>;
56
63
  execComponentLoader: (item: HydrogenComponentData) => Promise<HydrogenComponentData>;
@@ -72,9 +79,7 @@ interface AllCacheOptions {
72
79
  sMaxAge?: number;
73
80
  staleIfError?: number;
74
81
  }
75
- type ComponentLoaderArgs<T = {
76
- [key: string]: any;
77
- }> = {
82
+ type ComponentLoaderArgs<T = any> = {
78
83
  data: T;
79
84
  weaverse: WeaverseClient;
80
85
  };
@@ -314,11 +319,10 @@ declare class WeaverseHydrogen extends Weaverse {
314
319
  requestInfo: WeaverseLoaderRequestInfo;
315
320
  ItemConstructor: typeof WeaverseHydrogenItem;
316
321
  data: HydrogenPageData;
317
- itemInstances: Map<string | number, WeaverseHydrogenItem>;
318
- elementRegistry: Map<string, HydrogenElement>;
322
+ static itemInstances: Map<string, WeaverseHydrogenItem>;
323
+ static elementRegistry: Map<string, HydrogenElement>;
319
324
  constructor(params: WeaverseHydrogenParams, components: HydrogenComponent[]);
320
- registerElement(element: HydrogenElement): void;
321
- registerComponents(components: HydrogenComponent[]): void;
325
+ registerComponents: (components: HydrogenComponent[]) => void;
322
326
  }
323
327
  declare class WeaverseHydrogenItem extends WeaverseItemStore {
324
328
  weaverse: WeaverseHydrogen;
package/dist/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { ElementData, ElementSchema, BasicInput, WeaverseElement, WeaverseCoreParams, WeaverseProjectDataType, WeaverseResourcePickerData, Weaverse, PlatformTypeEnum, WeaverseItemStore } from '@weaverse/react';
2
- export { WeaverseImage } from '@weaverse/react';
2
+ export { WeaverseImage, useItemInstance, useWeaverse } from '@weaverse/react';
3
3
  import { NavigateFunction } from '@remix-run/react';
4
4
  import { createWithCache, Storefront } from '@shopify/hydrogen';
5
5
  import { LanguageCode, CountryCode, CurrencyCode } from '@shopify/hydrogen/storefront-api-types';
@@ -31,6 +31,11 @@ declare let STORE_PAGES: {
31
31
  PAGE: string;
32
32
  BLOG: string;
33
33
  ARTICLE: string;
34
+ CART: string;
35
+ CUSTOMER: string;
36
+ SEARCH: string;
37
+ NOT_FOUND: string;
38
+ PASSWORD: string;
34
39
  CUSTOM: string;
35
40
  };
36
41
 
@@ -51,6 +56,8 @@ declare class WeaverseClient {
51
56
  countries?: WeaverseClientArgs['countries'];
52
57
  constructor(args: WeaverseClientArgs);
53
58
  fetchWithCache: <T>(url: string, options: FetchWithCacheOptions) => Promise<T>;
59
+ incrementCacheHits: () => Promise<string>;
60
+ resetCacheHits: () => Promise<void>;
54
61
  loadThemeSettings: (strategy?: AllCacheOptions) => Promise<any>;
55
62
  loadPage: (params?: LoadPageParams) => Promise<WeaverseLoaderData | null>;
56
63
  execComponentLoader: (item: HydrogenComponentData) => Promise<HydrogenComponentData>;
@@ -72,9 +79,7 @@ interface AllCacheOptions {
72
79
  sMaxAge?: number;
73
80
  staleIfError?: number;
74
81
  }
75
- type ComponentLoaderArgs<T = {
76
- [key: string]: any;
77
- }> = {
82
+ type ComponentLoaderArgs<T = any> = {
78
83
  data: T;
79
84
  weaverse: WeaverseClient;
80
85
  };
@@ -314,11 +319,10 @@ declare class WeaverseHydrogen extends Weaverse {
314
319
  requestInfo: WeaverseLoaderRequestInfo;
315
320
  ItemConstructor: typeof WeaverseHydrogenItem;
316
321
  data: HydrogenPageData;
317
- itemInstances: Map<string | number, WeaverseHydrogenItem>;
318
- elementRegistry: Map<string, HydrogenElement>;
322
+ static itemInstances: Map<string, WeaverseHydrogenItem>;
323
+ static elementRegistry: Map<string, HydrogenElement>;
319
324
  constructor(params: WeaverseHydrogenParams, components: HydrogenComponent[]);
320
- registerElement(element: HydrogenElement): void;
321
- registerComponents(components: HydrogenComponent[]): void;
325
+ registerComponents: (components: HydrogenComponent[]) => void;
322
326
  }
323
327
  declare class WeaverseHydrogenItem extends WeaverseItemStore {
324
328
  weaverse: WeaverseHydrogen;
package/dist/index.js CHANGED
@@ -38,23 +38,45 @@ __export(src_exports, {
38
38
  getRequestQueries: () => getRequestQueries,
39
39
  getSelectedProductOptions: () => getSelectedProductOptions,
40
40
  getWeaverseConfigs: () => getWeaverseConfigs,
41
+ useItemInstance: () => import_react13.useItemInstance,
41
42
  useThemeSettings: () => useThemeSettings,
43
+ useWeaverse: () => import_react13.useWeaverse,
42
44
  withWeaverse: () => withWeaverse
43
45
  });
44
46
  module.exports = __toCommonJS(src_exports);
45
- var import_react12 = require("@weaverse/react");
47
+ var import_react13 = require("@weaverse/react");
48
+
49
+ // src/components/main.tsx
50
+ var main_exports = {};
51
+ __export(main_exports, {
52
+ default: () => main_default,
53
+ schema: () => schema
54
+ });
55
+ var import_react = __toESM(require("react"));
56
+ var Main = (0, import_react.forwardRef)((props, ref) => {
57
+ return /* @__PURE__ */ import_react.default.createElement("div", { ref, ...props });
58
+ });
59
+ var main_default = Main;
60
+ var schema = {
61
+ type: "main",
62
+ title: "Main",
63
+ inspector: []
64
+ };
65
+
66
+ // src/components/index.ts
67
+ var defaultComponents = [main_exports];
46
68
 
47
69
  // src/WeaverseHydrogenRoot.tsx
48
- var import_react9 = require("@remix-run/react");
49
- var import_react10 = require("@weaverse/react");
50
- var import_react11 = __toESM(require("react"));
70
+ var import_react10 = require("@remix-run/react");
71
+ var import_react11 = require("@weaverse/react");
72
+ var import_react12 = __toESM(require("react"));
51
73
  var import_react_error_boundary = require("react-error-boundary");
52
74
 
53
75
  // src/context.ts
54
- var import_react = require("@weaverse/react");
55
- var import_react2 = require("react");
76
+ var import_react2 = require("@weaverse/react");
77
+ var import_react3 = require("react");
56
78
  function createCachedWeaverseInstance(params, components) {
57
- if (import_react.isBrowser) {
79
+ if (import_react2.isBrowser) {
58
80
  window.__weaverses = window.__weaverses || [];
59
81
  let weaverse = window.__weaverses.find((w) => {
60
82
  let { pathname, search } = w.requestInfo;
@@ -83,18 +105,18 @@ function createWeaverseInstance(weaverseData, components) {
83
105
  components
84
106
  );
85
107
  }
86
- var ThemeProvider = (0, import_react2.createContext)(null);
108
+ var ThemeProvider = (0, import_react3.createContext)(null);
87
109
  ThemeProvider.displayName = "WeaverseThemeProvider";
88
110
 
89
111
  // src/hooks/use-studio.ts
90
- var import_react4 = require("@remix-run/react");
91
- var import_react5 = require("@weaverse/react");
92
- var import_react6 = require("react");
112
+ var import_react5 = require("@remix-run/react");
113
+ var import_react6 = require("@weaverse/react");
114
+ var import_react7 = require("react");
93
115
 
94
116
  // src/hooks/use-theme-context.ts
95
- var import_react3 = require("react");
117
+ var import_react4 = require("react");
96
118
  function useThemeContext() {
97
- let themeContext = (0, import_react3.useContext)(ThemeProvider);
119
+ let themeContext = (0, import_react4.useContext)(ThemeProvider);
98
120
  if (!themeContext) {
99
121
  throw new Error(
100
122
  `useThemeContext must be used within a ThemeProvider. Make sure to wrap your app in the withWeaverse HoC.`
@@ -105,12 +127,12 @@ function useThemeContext() {
105
127
 
106
128
  // src/hooks/use-studio.ts
107
129
  function useStudio(weaverse) {
108
- let { revalidate } = (0, import_react4.useRevalidator)();
109
- let navigate = (0, import_react4.useNavigate)();
130
+ let { revalidate } = (0, import_react5.useRevalidator)();
131
+ let navigate = (0, import_react5.useNavigate)();
110
132
  let themeSettingsStore = useThemeContext();
111
133
  let { isDesignMode, weaverseHost, weaverseVersion } = weaverse;
112
- let isStudio = import_react5.isIframe && isDesignMode && weaverseHost && weaverseVersion;
113
- (0, import_react6.useEffect)(() => {
134
+ let isStudio = import_react6.isIframe && isDesignMode && weaverseHost && weaverseVersion;
135
+ (0, import_react7.useEffect)(() => {
114
136
  if (isStudio) {
115
137
  weaverse.internal = {
116
138
  ...weaverse.internal,
@@ -123,15 +145,15 @@ function useStudio(weaverse) {
123
145
  window.weaverseStudio.init(weaverse);
124
146
  } else {
125
147
  let studioSrc = `${weaverseHost}/assets/studio/hydrogen/index.js?v=${weaverseVersion}`;
126
- (0, import_react5.loadScript)(studioSrc);
148
+ (0, import_react6.loadScript)(studioSrc);
127
149
  }
128
150
  }
129
151
  }, [weaverse.requestInfo]);
130
152
  }
131
153
 
132
154
  // src/hooks/use-theme-settings.ts
133
- var import_react7 = require("react");
134
- var import_react8 = require("@weaverse/react");
155
+ var import_react8 = require("react");
156
+ var import_react9 = require("@weaverse/react");
135
157
  var ThemeSettingsStore = class _ThemeSettingsStore {
136
158
  static settings = null;
137
159
  listeners = [];
@@ -139,8 +161,8 @@ var ThemeSettingsStore = class _ThemeSettingsStore {
139
161
  schema;
140
162
  publicEnv;
141
163
  constructor(data) {
142
- let { theme, countries, schema, publicEnv } = data || {};
143
- if (import_react8.isBrowser && _ThemeSettingsStore.settings) {
164
+ let { theme, countries, schema: schema2, publicEnv } = data || {};
165
+ if (import_react9.isBrowser && _ThemeSettingsStore.settings) {
144
166
  _ThemeSettingsStore.settings = {
145
167
  ...theme,
146
168
  ..._ThemeSettingsStore.settings
@@ -149,7 +171,7 @@ var ThemeSettingsStore = class _ThemeSettingsStore {
149
171
  _ThemeSettingsStore.settings = theme || {};
150
172
  }
151
173
  this.countries = countries;
152
- this.schema = schema;
174
+ this.schema = schema2;
153
175
  this.publicEnv = publicEnv;
154
176
  }
155
177
  updateThemeSettings = (newSettings) => {
@@ -179,7 +201,7 @@ var ThemeSettingsStore = class _ThemeSettingsStore {
179
201
  };
180
202
  function useThemeSettings() {
181
203
  let themeSettingsStore = useThemeContext();
182
- let settings = (0, import_react7.useSyncExternalStore)(
204
+ let settings = (0, import_react8.useSyncExternalStore)(
183
205
  themeSettingsStore.subscribe,
184
206
  themeSettingsStore.getSnapshot,
185
207
  themeSettingsStore.getServerSnapshot
@@ -188,22 +210,22 @@ function useThemeSettings() {
188
210
  }
189
211
 
190
212
  // src/WeaverseHydrogenRoot.tsx
191
- var WeaverseHydrogenRoot = (0, import_react11.memo)(
213
+ var WeaverseHydrogenRoot = (0, import_react12.memo)(
192
214
  ({
193
215
  errorComponent: ErrorComponent = FallbackError,
194
216
  components
195
217
  }) => {
196
- let loaderData = (0, import_react9.useLoaderData)();
218
+ let loaderData = (0, import_react10.useLoaderData)();
197
219
  let data = loaderData?.weaverseData;
198
220
  if (data) {
199
221
  if (data instanceof Promise) {
200
- return /* @__PURE__ */ import_react11.default.createElement(import_react_error_boundary.ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ import_react11.default.createElement(import_react11.Suspense, null, /* @__PURE__ */ import_react11.default.createElement(import_react9.Await, { resolve: data }, (resolvedData) => {
201
- return /* @__PURE__ */ import_react11.default.createElement(RenderRoot, { data: resolvedData, components });
222
+ return /* @__PURE__ */ import_react12.default.createElement(import_react_error_boundary.ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ import_react12.default.createElement(import_react12.Suspense, null, /* @__PURE__ */ import_react12.default.createElement(import_react10.Await, { resolve: data }, (resolvedData) => {
223
+ return /* @__PURE__ */ import_react12.default.createElement(RenderRoot, { data: resolvedData, components });
202
224
  })));
203
225
  }
204
- return /* @__PURE__ */ import_react11.default.createElement(RenderRoot, { data, components });
226
+ return /* @__PURE__ */ import_react12.default.createElement(RenderRoot, { data, components });
205
227
  }
206
- return /* @__PURE__ */ import_react11.default.createElement(
228
+ return /* @__PURE__ */ import_react12.default.createElement(
207
229
  ErrorComponent,
208
230
  {
209
231
  error: { message: "No Weaverse data return from route loader!" }
@@ -215,17 +237,17 @@ function RenderRoot(props) {
215
237
  let { data, components } = props;
216
238
  let weaverse = createWeaverseInstance(data, components);
217
239
  useStudio(weaverse);
218
- return /* @__PURE__ */ import_react11.default.createElement(import_react10.WeaverseRoot, { context: weaverse });
240
+ return /* @__PURE__ */ import_react12.default.createElement(import_react11.WeaverseRoot, { context: weaverse });
219
241
  }
220
242
  function withWeaverse(Component) {
221
243
  return (props) => {
222
- let loaderData = (0, import_react9.useRouteLoaderData)("root");
244
+ let loaderData = (0, import_react10.useRouteLoaderData)("root");
223
245
  let themeSettingsStore = new ThemeSettingsStore(loaderData?.weaverseTheme);
224
- return /* @__PURE__ */ import_react11.default.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ import_react11.default.createElement(Component, { ...props }));
246
+ return /* @__PURE__ */ import_react12.default.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ import_react12.default.createElement(Component, { ...props }));
225
247
  };
226
248
  }
227
249
  function FallbackError({ error }) {
228
- return /* @__PURE__ */ import_react11.default.createElement("div", null, error?.message || "An unexpected error occurred");
250
+ return /* @__PURE__ */ import_react12.default.createElement("div", null, error?.message || "An unexpected error occurred");
229
251
  }
230
252
 
231
253
  // src/weaverse-client.ts
@@ -233,7 +255,7 @@ var import_hydrogen = require("@shopify/hydrogen");
233
255
 
234
256
  // package.json
235
257
  var package_default = {
236
- version: "2.3.0",
258
+ version: "2.4.0",
237
259
  license: "MIT",
238
260
  main: "dist/index.js",
239
261
  typings: "dist/index.d.ts",
@@ -267,12 +289,12 @@ var package_default = {
267
289
  author: "Weaverse Team",
268
290
  dependencies: {
269
291
  "@remix-run/react": "1.19.1",
270
- "@shopify/hydrogen": "2023.7.11",
271
- "@weaverse/react": "2.3.0",
292
+ "@shopify/hydrogen": "^2023.7.13",
293
+ "@weaverse/react": "2.4.0",
272
294
  "react-error-boundary": "^4.0.11"
273
295
  },
274
296
  devDependencies: {
275
- "@shopify/remix-oxygen": "^1.1.7"
297
+ "@shopify/remix-oxygen": "^1.1.8"
276
298
  }
277
299
  };
278
300
 
@@ -309,6 +331,7 @@ function getWeaverseConfigs(request, env) {
309
331
  }
310
332
 
311
333
  // src/weaverse-client.ts
334
+ var CACHE_HITS_KEY = "https://weaverse.io/__CACHE_HITS_COUNT__";
312
335
  var WeaverseClient = class {
313
336
  API = "api/public/project";
314
337
  clientVersion = package_default.version;
@@ -359,18 +382,44 @@ var WeaverseClient = class {
359
382
  }
360
383
  fetchWithCache = (url, options) => {
361
384
  let cacheKey = [url, options.body];
362
- let { strategy = this.storefront.CacheShort(), ...reqInit } = options;
385
+ let {
386
+ strategy = this.storefront.CacheCustom({
387
+ maxAge: 5,
388
+ staleWhileRevalidate: 82800
389
+ }),
390
+ ...reqInit
391
+ } = options;
363
392
  let res = this.withCache(cacheKey, strategy, async () => {
364
393
  let response = await fetch(url, reqInit);
365
394
  if (!response.ok) {
366
395
  let error = await response.text();
367
396
  let { status, statusText } = response;
368
397
  throw new Error(`${status} ${statusText} ${error}`);
398
+ } else {
399
+ if (!url.includes("/configs")) {
400
+ await this.resetCacheHits().catch(console.error);
401
+ }
369
402
  }
370
403
  return await response.json();
371
404
  });
372
405
  return res;
373
406
  };
407
+ incrementCacheHits = async () => {
408
+ const currentHitsResponse = await this.cache.match(CACHE_HITS_KEY);
409
+ const currentHits = currentHitsResponse ? parseInt(await currentHitsResponse.text()) : 0;
410
+ const newHitsCount = currentHits + 1;
411
+ const newHitsResponse = new Response(newHitsCount.toString(), {
412
+ headers: {
413
+ "Cache-Control": "max-age=3600"
414
+ }
415
+ });
416
+ await this.cache.put(CACHE_HITS_KEY, newHitsResponse);
417
+ return newHitsCount.toString();
418
+ };
419
+ resetCacheHits = async () => {
420
+ const resetHitsResponse = new Response("0");
421
+ await this.cache.put(CACHE_HITS_KEY, resetHitsResponse);
422
+ };
374
423
  loadThemeSettings = async (strategy) => {
375
424
  try {
376
425
  let { API, configs } = this;
@@ -380,9 +429,12 @@ var WeaverseClient = class {
380
429
  }
381
430
  let res;
382
431
  if (isDesignMode) {
383
- res = await fetch(`${weaverseHost}/${API}/${projectId}/configs`, {
384
- method: "POST"
385
- }).then((res2) => res2.json());
432
+ res = await fetch(
433
+ `${weaverseHost}/${API}/${projectId}/configs?isDesignMode=true`,
434
+ {
435
+ method: "POST"
436
+ }
437
+ ).then((res2) => res2.json());
386
438
  } else {
387
439
  res = await this.fetchWithCache(
388
440
  `${weaverseHost}/${API}/${projectId}/configs`,
@@ -394,7 +446,7 @@ var WeaverseClient = class {
394
446
  let defaultThemeSettings = {};
395
447
  this.themeSchema.inspector.forEach(({ inputs }) => {
396
448
  inputs.forEach(({ name, defaultValue }) => {
397
- if (typeof name === "string" && defaultValue) {
449
+ if (name && defaultValue) {
398
450
  defaultThemeSettings[name] = defaultValue;
399
451
  }
400
452
  });
@@ -441,8 +493,16 @@ var WeaverseClient = class {
441
493
  if (isDesignMode) {
442
494
  payload = await fetch(url, reqInit).then((res) => res.json());
443
495
  } else {
496
+ let cacheHitsToSend = await this.incrementCacheHits().catch(
497
+ console.error
498
+ );
499
+ let headers = {
500
+ "X-Cache-Hits": cacheHitsToSend || "0"
501
+ // Send cache hits as a custom header
502
+ };
444
503
  payload = await this.fetchWithCache(url, {
445
504
  ...reqInit,
505
+ headers,
446
506
  strategy
447
507
  });
448
508
  }
@@ -482,8 +542,8 @@ var WeaverseClient = class {
482
542
  };
483
543
  execComponentLoader = async (item) => {
484
544
  let { data = {}, type, id } = item;
485
- let schema = this.components.find(({ schema: schema2 }) => schema2?.type === type);
486
- let { loader } = schema || {};
545
+ let schema2 = this.components.find(({ schema: schema3 }) => schema3?.type === type);
546
+ let { loader } = schema2 || {};
487
547
  if (loader && typeof loader === "function") {
488
548
  try {
489
549
  return {
@@ -512,7 +572,7 @@ function getSelectedProductOptions(request) {
512
572
  }
513
573
 
514
574
  // src/index.ts
515
- var WeaverseHydrogen = class extends import_react12.Weaverse {
575
+ var WeaverseHydrogen = class extends import_react13.Weaverse {
516
576
  platformType = "shopify-hydrogen";
517
577
  pageId;
518
578
  internal;
@@ -524,22 +584,20 @@ var WeaverseHydrogen = class extends import_react12.Weaverse {
524
584
  this.pageId = pageId;
525
585
  this.requestInfo = requestInfo;
526
586
  this.registerComponents(components);
587
+ this.registerComponents(defaultComponents);
527
588
  }
528
- registerElement(element) {
529
- super.registerElement(element);
530
- }
531
- registerComponents(components) {
589
+ registerComponents = (components) => {
532
590
  components.forEach((comp) => {
533
- this.registerElement({
591
+ import_react13.Weaverse.registerElement({
534
592
  type: comp?.schema?.type,
535
593
  Component: comp?.default,
536
594
  schema: comp?.schema,
537
595
  loader: comp?.loader
538
596
  });
539
597
  });
540
- }
598
+ };
541
599
  };
542
- var WeaverseHydrogenItem = class extends import_react12.WeaverseItemStore {
600
+ var WeaverseHydrogenItem = class extends import_react13.WeaverseItemStore {
543
601
  constructor(initialData, weaverse) {
544
602
  super(initialData, weaverse);
545
603
  let { data, ...rest } = initialData;
@@ -549,7 +607,7 @@ var WeaverseHydrogenItem = class extends import_react12.WeaverseItemStore {
549
607
  return super.Element;
550
608
  }
551
609
  get data() {
552
- let defaultData = this.Element?.schema?.inspector?.flatMap((group) => group.inputs)?.reduce((a, { defaultValue, name }) => {
610
+ let defaultData = this.Element?.schema?.inspector?.flatMap((group) => group.inputs).reduce((a, { defaultValue, name }) => {
553
611
  if (name && defaultValue !== null && defaultValue !== void 0) {
554
612
  a[name] = defaultValue;
555
613
  }
@@ -571,6 +629,8 @@ var WeaverseHydrogenItem = class extends import_react12.WeaverseItemStore {
571
629
  getRequestQueries,
572
630
  getSelectedProductOptions,
573
631
  getWeaverseConfigs,
632
+ useItemInstance,
574
633
  useThemeSettings,
634
+ useWeaverse,
575
635
  withWeaverse
576
636
  });
package/dist/index.mjs CHANGED
@@ -1,13 +1,41 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __export = (target, all) => {
3
+ for (var name in all)
4
+ __defProp(target, name, { get: all[name], enumerable: true });
5
+ };
6
+
1
7
  // src/index.ts
2
8
  import {
3
9
  Weaverse,
4
- WeaverseItemStore
10
+ WeaverseItemStore,
11
+ useItemInstance,
12
+ useWeaverse
5
13
  } from "@weaverse/react";
6
14
 
15
+ // src/components/main.tsx
16
+ var main_exports = {};
17
+ __export(main_exports, {
18
+ default: () => main_default,
19
+ schema: () => schema
20
+ });
21
+ import React, { forwardRef } from "react";
22
+ var Main = forwardRef((props, ref) => {
23
+ return /* @__PURE__ */ React.createElement("div", { ref, ...props });
24
+ });
25
+ var main_default = Main;
26
+ var schema = {
27
+ type: "main",
28
+ title: "Main",
29
+ inspector: []
30
+ };
31
+
32
+ // src/components/index.ts
33
+ var defaultComponents = [main_exports];
34
+
7
35
  // src/WeaverseHydrogenRoot.tsx
8
36
  import { Await, useLoaderData, useRouteLoaderData } from "@remix-run/react";
9
37
  import { WeaverseRoot } from "@weaverse/react";
10
- import React, { memo, Suspense } from "react";
38
+ import React2, { memo, Suspense } from "react";
11
39
  import { ErrorBoundary } from "react-error-boundary";
12
40
 
13
41
  // src/context.ts
@@ -99,7 +127,7 @@ var ThemeSettingsStore = class _ThemeSettingsStore {
99
127
  schema;
100
128
  publicEnv;
101
129
  constructor(data) {
102
- let { theme, countries, schema, publicEnv } = data || {};
130
+ let { theme, countries, schema: schema2, publicEnv } = data || {};
103
131
  if (isBrowser2 && _ThemeSettingsStore.settings) {
104
132
  _ThemeSettingsStore.settings = {
105
133
  ...theme,
@@ -109,7 +137,7 @@ var ThemeSettingsStore = class _ThemeSettingsStore {
109
137
  _ThemeSettingsStore.settings = theme || {};
110
138
  }
111
139
  this.countries = countries;
112
- this.schema = schema;
140
+ this.schema = schema2;
113
141
  this.publicEnv = publicEnv;
114
142
  }
115
143
  updateThemeSettings = (newSettings) => {
@@ -157,13 +185,13 @@ var WeaverseHydrogenRoot = memo(
157
185
  let data = loaderData?.weaverseData;
158
186
  if (data) {
159
187
  if (data instanceof Promise) {
160
- return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ React.createElement(Suspense, null, /* @__PURE__ */ React.createElement(Await, { resolve: data }, (resolvedData) => {
161
- return /* @__PURE__ */ React.createElement(RenderRoot, { data: resolvedData, components });
188
+ return /* @__PURE__ */ React2.createElement(ErrorBoundary, { fallbackRender: ErrorComponent }, /* @__PURE__ */ React2.createElement(Suspense, null, /* @__PURE__ */ React2.createElement(Await, { resolve: data }, (resolvedData) => {
189
+ return /* @__PURE__ */ React2.createElement(RenderRoot, { data: resolvedData, components });
162
190
  })));
163
191
  }
164
- return /* @__PURE__ */ React.createElement(RenderRoot, { data, components });
192
+ return /* @__PURE__ */ React2.createElement(RenderRoot, { data, components });
165
193
  }
166
- return /* @__PURE__ */ React.createElement(
194
+ return /* @__PURE__ */ React2.createElement(
167
195
  ErrorComponent,
168
196
  {
169
197
  error: { message: "No Weaverse data return from route loader!" }
@@ -175,17 +203,17 @@ function RenderRoot(props) {
175
203
  let { data, components } = props;
176
204
  let weaverse = createWeaverseInstance(data, components);
177
205
  useStudio(weaverse);
178
- return /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse });
206
+ return /* @__PURE__ */ React2.createElement(WeaverseRoot, { context: weaverse });
179
207
  }
180
208
  function withWeaverse(Component) {
181
209
  return (props) => {
182
210
  let loaderData = useRouteLoaderData("root");
183
211
  let themeSettingsStore = new ThemeSettingsStore(loaderData?.weaverseTheme);
184
- return /* @__PURE__ */ React.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ React.createElement(Component, { ...props }));
212
+ return /* @__PURE__ */ React2.createElement(ThemeProvider.Provider, { value: themeSettingsStore }, /* @__PURE__ */ React2.createElement(Component, { ...props }));
185
213
  };
186
214
  }
187
215
  function FallbackError({ error }) {
188
- return /* @__PURE__ */ React.createElement("div", null, error?.message || "An unexpected error occurred");
216
+ return /* @__PURE__ */ React2.createElement("div", null, error?.message || "An unexpected error occurred");
189
217
  }
190
218
 
191
219
  // src/weaverse-client.ts
@@ -193,7 +221,7 @@ import { createWithCache } from "@shopify/hydrogen";
193
221
 
194
222
  // package.json
195
223
  var package_default = {
196
- version: "2.3.0",
224
+ version: "2.4.0",
197
225
  license: "MIT",
198
226
  main: "dist/index.js",
199
227
  typings: "dist/index.d.ts",
@@ -227,12 +255,12 @@ var package_default = {
227
255
  author: "Weaverse Team",
228
256
  dependencies: {
229
257
  "@remix-run/react": "1.19.1",
230
- "@shopify/hydrogen": "2023.7.11",
231
- "@weaverse/react": "2.3.0",
258
+ "@shopify/hydrogen": "^2023.7.13",
259
+ "@weaverse/react": "2.4.0",
232
260
  "react-error-boundary": "^4.0.11"
233
261
  },
234
262
  devDependencies: {
235
- "@shopify/remix-oxygen": "^1.1.7"
263
+ "@shopify/remix-oxygen": "^1.1.8"
236
264
  }
237
265
  };
238
266
 
@@ -269,6 +297,7 @@ function getWeaverseConfigs(request, env) {
269
297
  }
270
298
 
271
299
  // src/weaverse-client.ts
300
+ var CACHE_HITS_KEY = "https://weaverse.io/__CACHE_HITS_COUNT__";
272
301
  var WeaverseClient = class {
273
302
  API = "api/public/project";
274
303
  clientVersion = package_default.version;
@@ -319,18 +348,44 @@ var WeaverseClient = class {
319
348
  }
320
349
  fetchWithCache = (url, options) => {
321
350
  let cacheKey = [url, options.body];
322
- let { strategy = this.storefront.CacheShort(), ...reqInit } = options;
351
+ let {
352
+ strategy = this.storefront.CacheCustom({
353
+ maxAge: 5,
354
+ staleWhileRevalidate: 82800
355
+ }),
356
+ ...reqInit
357
+ } = options;
323
358
  let res = this.withCache(cacheKey, strategy, async () => {
324
359
  let response = await fetch(url, reqInit);
325
360
  if (!response.ok) {
326
361
  let error = await response.text();
327
362
  let { status, statusText } = response;
328
363
  throw new Error(`${status} ${statusText} ${error}`);
364
+ } else {
365
+ if (!url.includes("/configs")) {
366
+ await this.resetCacheHits().catch(console.error);
367
+ }
329
368
  }
330
369
  return await response.json();
331
370
  });
332
371
  return res;
333
372
  };
373
+ incrementCacheHits = async () => {
374
+ const currentHitsResponse = await this.cache.match(CACHE_HITS_KEY);
375
+ const currentHits = currentHitsResponse ? parseInt(await currentHitsResponse.text()) : 0;
376
+ const newHitsCount = currentHits + 1;
377
+ const newHitsResponse = new Response(newHitsCount.toString(), {
378
+ headers: {
379
+ "Cache-Control": "max-age=3600"
380
+ }
381
+ });
382
+ await this.cache.put(CACHE_HITS_KEY, newHitsResponse);
383
+ return newHitsCount.toString();
384
+ };
385
+ resetCacheHits = async () => {
386
+ const resetHitsResponse = new Response("0");
387
+ await this.cache.put(CACHE_HITS_KEY, resetHitsResponse);
388
+ };
334
389
  loadThemeSettings = async (strategy) => {
335
390
  try {
336
391
  let { API, configs } = this;
@@ -340,9 +395,12 @@ var WeaverseClient = class {
340
395
  }
341
396
  let res;
342
397
  if (isDesignMode) {
343
- res = await fetch(`${weaverseHost}/${API}/${projectId}/configs`, {
344
- method: "POST"
345
- }).then((res2) => res2.json());
398
+ res = await fetch(
399
+ `${weaverseHost}/${API}/${projectId}/configs?isDesignMode=true`,
400
+ {
401
+ method: "POST"
402
+ }
403
+ ).then((res2) => res2.json());
346
404
  } else {
347
405
  res = await this.fetchWithCache(
348
406
  `${weaverseHost}/${API}/${projectId}/configs`,
@@ -354,7 +412,7 @@ var WeaverseClient = class {
354
412
  let defaultThemeSettings = {};
355
413
  this.themeSchema.inspector.forEach(({ inputs }) => {
356
414
  inputs.forEach(({ name, defaultValue }) => {
357
- if (typeof name === "string" && defaultValue) {
415
+ if (name && defaultValue) {
358
416
  defaultThemeSettings[name] = defaultValue;
359
417
  }
360
418
  });
@@ -401,8 +459,16 @@ var WeaverseClient = class {
401
459
  if (isDesignMode) {
402
460
  payload = await fetch(url, reqInit).then((res) => res.json());
403
461
  } else {
462
+ let cacheHitsToSend = await this.incrementCacheHits().catch(
463
+ console.error
464
+ );
465
+ let headers = {
466
+ "X-Cache-Hits": cacheHitsToSend || "0"
467
+ // Send cache hits as a custom header
468
+ };
404
469
  payload = await this.fetchWithCache(url, {
405
470
  ...reqInit,
471
+ headers,
406
472
  strategy
407
473
  });
408
474
  }
@@ -442,8 +508,8 @@ var WeaverseClient = class {
442
508
  };
443
509
  execComponentLoader = async (item) => {
444
510
  let { data = {}, type, id } = item;
445
- let schema = this.components.find(({ schema: schema2 }) => schema2?.type === type);
446
- let { loader } = schema || {};
511
+ let schema2 = this.components.find(({ schema: schema3 }) => schema3?.type === type);
512
+ let { loader } = schema2 || {};
447
513
  if (loader && typeof loader === "function") {
448
514
  try {
449
515
  return {
@@ -484,20 +550,18 @@ var WeaverseHydrogen = class extends Weaverse {
484
550
  this.pageId = pageId;
485
551
  this.requestInfo = requestInfo;
486
552
  this.registerComponents(components);
553
+ this.registerComponents(defaultComponents);
487
554
  }
488
- registerElement(element) {
489
- super.registerElement(element);
490
- }
491
- registerComponents(components) {
555
+ registerComponents = (components) => {
492
556
  components.forEach((comp) => {
493
- this.registerElement({
557
+ Weaverse.registerElement({
494
558
  type: comp?.schema?.type,
495
559
  Component: comp?.default,
496
560
  schema: comp?.schema,
497
561
  loader: comp?.loader
498
562
  });
499
563
  });
500
- }
564
+ };
501
565
  };
502
566
  var WeaverseHydrogenItem = class extends WeaverseItemStore {
503
567
  constructor(initialData, weaverse) {
@@ -509,7 +573,7 @@ var WeaverseHydrogenItem = class extends WeaverseItemStore {
509
573
  return super.Element;
510
574
  }
511
575
  get data() {
512
- let defaultData = this.Element?.schema?.inspector?.flatMap((group) => group.inputs)?.reduce((a, { defaultValue, name }) => {
576
+ let defaultData = this.Element?.schema?.inspector?.flatMap((group) => group.inputs).reduce((a, { defaultValue, name }) => {
513
577
  if (name && defaultValue !== null && defaultValue !== void 0) {
514
578
  a[name] = defaultValue;
515
579
  }
@@ -530,6 +594,8 @@ export {
530
594
  getRequestQueries,
531
595
  getSelectedProductOptions,
532
596
  getWeaverseConfigs,
597
+ useItemInstance,
533
598
  useThemeSettings,
599
+ useWeaverse,
534
600
  withWeaverse
535
601
  };
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "2.3.0",
2
+ "version": "2.4.0",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
@@ -33,11 +33,11 @@
33
33
  "author": "Weaverse Team",
34
34
  "dependencies": {
35
35
  "@remix-run/react": "1.19.1",
36
- "@shopify/hydrogen": "2023.7.11",
37
- "@weaverse/react": "2.3.0",
36
+ "@shopify/hydrogen": "^2023.7.13",
37
+ "@weaverse/react": "2.4.0",
38
38
  "react-error-boundary": "^4.0.11"
39
39
  },
40
40
  "devDependencies": {
41
- "@shopify/remix-oxygen": "^1.1.7"
41
+ "@shopify/remix-oxygen": "^1.1.8"
42
42
  }
43
43
  }