@weaverse/hydrogen 2.3.0 → 2.4.1

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 +116 -55
  4. package/dist/index.mjs +97 -30
  5. package/package.json +5 -5
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.1",
237
259
  license: "MIT",
238
260
  main: "dist/index.js",
239
261
  typings: "dist/index.d.ts",
@@ -266,13 +288,13 @@ var package_default = {
266
288
  name: "@weaverse/hydrogen",
267
289
  author: "Weaverse Team",
268
290
  dependencies: {
269
- "@remix-run/react": "1.19.1",
270
- "@shopify/hydrogen": "2023.7.11",
271
- "@weaverse/react": "2.3.0",
291
+ "@remix-run/react": "^1.19.1",
292
+ "@shopify/hydrogen": "^2023.7.13",
293
+ "@weaverse/react": "2.4.1",
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
 
@@ -296,6 +318,7 @@ function getWeaverseConfigs(request, env) {
296
318
  PUBLIC_STOREFRONT_API_TOKEN
297
319
  } = env || {};
298
320
  let { weaverseProjectId, weaverseHost, isDesignMode, weaverseVersion } = queries;
321
+ console.log("\u{1F527} Weaverse configs", queries);
299
322
  return {
300
323
  projectId: weaverseProjectId || WEAVERSE_PROJECT_ID || "",
301
324
  weaverseHost: weaverseHost || WEAVERSE_HOST || "https://weaverse.io",
@@ -309,6 +332,7 @@ function getWeaverseConfigs(request, env) {
309
332
  }
310
333
 
311
334
  // src/weaverse-client.ts
335
+ var CACHE_HITS_KEY = "https://weaverse.io/__CACHE_HITS_COUNT__";
312
336
  var WeaverseClient = class {
313
337
  API = "api/public/project";
314
338
  clientVersion = package_default.version;
@@ -359,18 +383,44 @@ var WeaverseClient = class {
359
383
  }
360
384
  fetchWithCache = (url, options) => {
361
385
  let cacheKey = [url, options.body];
362
- let { strategy = this.storefront.CacheShort(), ...reqInit } = options;
386
+ let {
387
+ strategy = this.storefront.CacheCustom({
388
+ maxAge: 5,
389
+ staleWhileRevalidate: 82800
390
+ }),
391
+ ...reqInit
392
+ } = options;
363
393
  let res = this.withCache(cacheKey, strategy, async () => {
364
394
  let response = await fetch(url, reqInit);
365
395
  if (!response.ok) {
366
396
  let error = await response.text();
367
397
  let { status, statusText } = response;
368
398
  throw new Error(`${status} ${statusText} ${error}`);
399
+ } else {
400
+ if (!url.includes("/configs")) {
401
+ await this.resetCacheHits().catch(console.error);
402
+ }
369
403
  }
370
404
  return await response.json();
371
405
  });
372
406
  return res;
373
407
  };
408
+ incrementCacheHits = async () => {
409
+ const currentHitsResponse = await this.cache.match(CACHE_HITS_KEY);
410
+ const currentHits = currentHitsResponse ? parseInt(await currentHitsResponse.text()) : 0;
411
+ const newHitsCount = currentHits + 1;
412
+ const newHitsResponse = new Response(newHitsCount.toString(), {
413
+ headers: {
414
+ "Cache-Control": "max-age=3600"
415
+ }
416
+ });
417
+ await this.cache.put(CACHE_HITS_KEY, newHitsResponse);
418
+ return newHitsCount.toString();
419
+ };
420
+ resetCacheHits = async () => {
421
+ const resetHitsResponse = new Response("0");
422
+ await this.cache.put(CACHE_HITS_KEY, resetHitsResponse);
423
+ };
374
424
  loadThemeSettings = async (strategy) => {
375
425
  try {
376
426
  let { API, configs } = this;
@@ -380,9 +430,12 @@ var WeaverseClient = class {
380
430
  }
381
431
  let res;
382
432
  if (isDesignMode) {
383
- res = await fetch(`${weaverseHost}/${API}/${projectId}/configs`, {
384
- method: "POST"
385
- }).then((res2) => res2.json());
433
+ res = await fetch(
434
+ `${weaverseHost}/${API}/${projectId}/configs?isDesignMode=true`,
435
+ {
436
+ method: "POST"
437
+ }
438
+ ).then((res2) => res2.json());
386
439
  } else {
387
440
  res = await this.fetchWithCache(
388
441
  `${weaverseHost}/${API}/${projectId}/configs`,
@@ -394,7 +447,7 @@ var WeaverseClient = class {
394
447
  let defaultThemeSettings = {};
395
448
  this.themeSchema.inspector.forEach(({ inputs }) => {
396
449
  inputs.forEach(({ name, defaultValue }) => {
397
- if (typeof name === "string" && defaultValue) {
450
+ if (name && defaultValue) {
398
451
  defaultThemeSettings[name] = defaultValue;
399
452
  }
400
453
  });
@@ -441,8 +494,16 @@ var WeaverseClient = class {
441
494
  if (isDesignMode) {
442
495
  payload = await fetch(url, reqInit).then((res) => res.json());
443
496
  } else {
497
+ let cacheHitsToSend = await this.incrementCacheHits().catch(
498
+ console.error
499
+ );
500
+ let headers = {
501
+ "X-Cache-Hits": cacheHitsToSend || "0"
502
+ // Send cache hits as a custom header
503
+ };
444
504
  payload = await this.fetchWithCache(url, {
445
505
  ...reqInit,
506
+ headers,
446
507
  strategy
447
508
  });
448
509
  }
@@ -482,8 +543,8 @@ var WeaverseClient = class {
482
543
  };
483
544
  execComponentLoader = async (item) => {
484
545
  let { data = {}, type, id } = item;
485
- let schema = this.components.find(({ schema: schema2 }) => schema2?.type === type);
486
- let { loader } = schema || {};
546
+ let schema2 = this.components.find(({ schema: schema3 }) => schema3?.type === type);
547
+ let { loader } = schema2 || {};
487
548
  if (loader && typeof loader === "function") {
488
549
  try {
489
550
  return {
@@ -512,7 +573,7 @@ function getSelectedProductOptions(request) {
512
573
  }
513
574
 
514
575
  // src/index.ts
515
- var WeaverseHydrogen = class extends import_react12.Weaverse {
576
+ var WeaverseHydrogen = class extends import_react13.Weaverse {
516
577
  platformType = "shopify-hydrogen";
517
578
  pageId;
518
579
  internal;
@@ -524,22 +585,20 @@ var WeaverseHydrogen = class extends import_react12.Weaverse {
524
585
  this.pageId = pageId;
525
586
  this.requestInfo = requestInfo;
526
587
  this.registerComponents(components);
588
+ this.registerComponents(defaultComponents);
527
589
  }
528
- registerElement(element) {
529
- super.registerElement(element);
530
- }
531
- registerComponents(components) {
590
+ registerComponents = (components) => {
532
591
  components.forEach((comp) => {
533
- this.registerElement({
592
+ import_react13.Weaverse.registerElement({
534
593
  type: comp?.schema?.type,
535
594
  Component: comp?.default,
536
595
  schema: comp?.schema,
537
596
  loader: comp?.loader
538
597
  });
539
598
  });
540
- }
599
+ };
541
600
  };
542
- var WeaverseHydrogenItem = class extends import_react12.WeaverseItemStore {
601
+ var WeaverseHydrogenItem = class extends import_react13.WeaverseItemStore {
543
602
  constructor(initialData, weaverse) {
544
603
  super(initialData, weaverse);
545
604
  let { data, ...rest } = initialData;
@@ -549,7 +608,7 @@ var WeaverseHydrogenItem = class extends import_react12.WeaverseItemStore {
549
608
  return super.Element;
550
609
  }
551
610
  get data() {
552
- let defaultData = this.Element?.schema?.inspector?.flatMap((group) => group.inputs)?.reduce((a, { defaultValue, name }) => {
611
+ let defaultData = this.Element?.schema?.inspector?.flatMap((group) => group.inputs).reduce((a, { defaultValue, name }) => {
553
612
  if (name && defaultValue !== null && defaultValue !== void 0) {
554
613
  a[name] = defaultValue;
555
614
  }
@@ -571,6 +630,8 @@ var WeaverseHydrogenItem = class extends import_react12.WeaverseItemStore {
571
630
  getRequestQueries,
572
631
  getSelectedProductOptions,
573
632
  getWeaverseConfigs,
633
+ useItemInstance,
574
634
  useThemeSettings,
635
+ useWeaverse,
575
636
  withWeaverse
576
637
  });
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.1",
197
225
  license: "MIT",
198
226
  main: "dist/index.js",
199
227
  typings: "dist/index.d.ts",
@@ -226,13 +254,13 @@ var package_default = {
226
254
  name: "@weaverse/hydrogen",
227
255
  author: "Weaverse Team",
228
256
  dependencies: {
229
- "@remix-run/react": "1.19.1",
230
- "@shopify/hydrogen": "2023.7.11",
231
- "@weaverse/react": "2.3.0",
257
+ "@remix-run/react": "^1.19.1",
258
+ "@shopify/hydrogen": "^2023.7.13",
259
+ "@weaverse/react": "2.4.1",
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
 
@@ -256,6 +284,7 @@ function getWeaverseConfigs(request, env) {
256
284
  PUBLIC_STOREFRONT_API_TOKEN
257
285
  } = env || {};
258
286
  let { weaverseProjectId, weaverseHost, isDesignMode, weaverseVersion } = queries;
287
+ console.log("\u{1F527} Weaverse configs", queries);
259
288
  return {
260
289
  projectId: weaverseProjectId || WEAVERSE_PROJECT_ID || "",
261
290
  weaverseHost: weaverseHost || WEAVERSE_HOST || "https://weaverse.io",
@@ -269,6 +298,7 @@ function getWeaverseConfigs(request, env) {
269
298
  }
270
299
 
271
300
  // src/weaverse-client.ts
301
+ var CACHE_HITS_KEY = "https://weaverse.io/__CACHE_HITS_COUNT__";
272
302
  var WeaverseClient = class {
273
303
  API = "api/public/project";
274
304
  clientVersion = package_default.version;
@@ -319,18 +349,44 @@ var WeaverseClient = class {
319
349
  }
320
350
  fetchWithCache = (url, options) => {
321
351
  let cacheKey = [url, options.body];
322
- let { strategy = this.storefront.CacheShort(), ...reqInit } = options;
352
+ let {
353
+ strategy = this.storefront.CacheCustom({
354
+ maxAge: 5,
355
+ staleWhileRevalidate: 82800
356
+ }),
357
+ ...reqInit
358
+ } = options;
323
359
  let res = this.withCache(cacheKey, strategy, async () => {
324
360
  let response = await fetch(url, reqInit);
325
361
  if (!response.ok) {
326
362
  let error = await response.text();
327
363
  let { status, statusText } = response;
328
364
  throw new Error(`${status} ${statusText} ${error}`);
365
+ } else {
366
+ if (!url.includes("/configs")) {
367
+ await this.resetCacheHits().catch(console.error);
368
+ }
329
369
  }
330
370
  return await response.json();
331
371
  });
332
372
  return res;
333
373
  };
374
+ incrementCacheHits = async () => {
375
+ const currentHitsResponse = await this.cache.match(CACHE_HITS_KEY);
376
+ const currentHits = currentHitsResponse ? parseInt(await currentHitsResponse.text()) : 0;
377
+ const newHitsCount = currentHits + 1;
378
+ const newHitsResponse = new Response(newHitsCount.toString(), {
379
+ headers: {
380
+ "Cache-Control": "max-age=3600"
381
+ }
382
+ });
383
+ await this.cache.put(CACHE_HITS_KEY, newHitsResponse);
384
+ return newHitsCount.toString();
385
+ };
386
+ resetCacheHits = async () => {
387
+ const resetHitsResponse = new Response("0");
388
+ await this.cache.put(CACHE_HITS_KEY, resetHitsResponse);
389
+ };
334
390
  loadThemeSettings = async (strategy) => {
335
391
  try {
336
392
  let { API, configs } = this;
@@ -340,9 +396,12 @@ var WeaverseClient = class {
340
396
  }
341
397
  let res;
342
398
  if (isDesignMode) {
343
- res = await fetch(`${weaverseHost}/${API}/${projectId}/configs`, {
344
- method: "POST"
345
- }).then((res2) => res2.json());
399
+ res = await fetch(
400
+ `${weaverseHost}/${API}/${projectId}/configs?isDesignMode=true`,
401
+ {
402
+ method: "POST"
403
+ }
404
+ ).then((res2) => res2.json());
346
405
  } else {
347
406
  res = await this.fetchWithCache(
348
407
  `${weaverseHost}/${API}/${projectId}/configs`,
@@ -354,7 +413,7 @@ var WeaverseClient = class {
354
413
  let defaultThemeSettings = {};
355
414
  this.themeSchema.inspector.forEach(({ inputs }) => {
356
415
  inputs.forEach(({ name, defaultValue }) => {
357
- if (typeof name === "string" && defaultValue) {
416
+ if (name && defaultValue) {
358
417
  defaultThemeSettings[name] = defaultValue;
359
418
  }
360
419
  });
@@ -401,8 +460,16 @@ var WeaverseClient = class {
401
460
  if (isDesignMode) {
402
461
  payload = await fetch(url, reqInit).then((res) => res.json());
403
462
  } else {
463
+ let cacheHitsToSend = await this.incrementCacheHits().catch(
464
+ console.error
465
+ );
466
+ let headers = {
467
+ "X-Cache-Hits": cacheHitsToSend || "0"
468
+ // Send cache hits as a custom header
469
+ };
404
470
  payload = await this.fetchWithCache(url, {
405
471
  ...reqInit,
472
+ headers,
406
473
  strategy
407
474
  });
408
475
  }
@@ -442,8 +509,8 @@ var WeaverseClient = class {
442
509
  };
443
510
  execComponentLoader = async (item) => {
444
511
  let { data = {}, type, id } = item;
445
- let schema = this.components.find(({ schema: schema2 }) => schema2?.type === type);
446
- let { loader } = schema || {};
512
+ let schema2 = this.components.find(({ schema: schema3 }) => schema3?.type === type);
513
+ let { loader } = schema2 || {};
447
514
  if (loader && typeof loader === "function") {
448
515
  try {
449
516
  return {
@@ -484,20 +551,18 @@ var WeaverseHydrogen = class extends Weaverse {
484
551
  this.pageId = pageId;
485
552
  this.requestInfo = requestInfo;
486
553
  this.registerComponents(components);
554
+ this.registerComponents(defaultComponents);
487
555
  }
488
- registerElement(element) {
489
- super.registerElement(element);
490
- }
491
- registerComponents(components) {
556
+ registerComponents = (components) => {
492
557
  components.forEach((comp) => {
493
- this.registerElement({
558
+ Weaverse.registerElement({
494
559
  type: comp?.schema?.type,
495
560
  Component: comp?.default,
496
561
  schema: comp?.schema,
497
562
  loader: comp?.loader
498
563
  });
499
564
  });
500
- }
565
+ };
501
566
  };
502
567
  var WeaverseHydrogenItem = class extends WeaverseItemStore {
503
568
  constructor(initialData, weaverse) {
@@ -509,7 +574,7 @@ var WeaverseHydrogenItem = class extends WeaverseItemStore {
509
574
  return super.Element;
510
575
  }
511
576
  get data() {
512
- let defaultData = this.Element?.schema?.inspector?.flatMap((group) => group.inputs)?.reduce((a, { defaultValue, name }) => {
577
+ let defaultData = this.Element?.schema?.inspector?.flatMap((group) => group.inputs).reduce((a, { defaultValue, name }) => {
513
578
  if (name && defaultValue !== null && defaultValue !== void 0) {
514
579
  a[name] = defaultValue;
515
580
  }
@@ -530,6 +595,8 @@ export {
530
595
  getRequestQueries,
531
596
  getSelectedProductOptions,
532
597
  getWeaverseConfigs,
598
+ useItemInstance,
533
599
  useThemeSettings,
600
+ useWeaverse,
534
601
  withWeaverse
535
602
  };
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "2.3.0",
2
+ "version": "2.4.1",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
@@ -32,12 +32,12 @@
32
32
  "name": "@weaverse/hydrogen",
33
33
  "author": "Weaverse Team",
34
34
  "dependencies": {
35
- "@remix-run/react": "1.19.1",
36
- "@shopify/hydrogen": "2023.7.11",
37
- "@weaverse/react": "2.3.0",
35
+ "@remix-run/react": "^1.19.1",
36
+ "@shopify/hydrogen": "^2023.7.13",
37
+ "@weaverse/react": "2.4.1",
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
  }