@weaverse/hydrogen 5.0.0-next.0 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -1,11 +1,11 @@
1
1
  import { SelectedOptionInput } from '@shopify/hydrogen/storefront-api-types';
2
2
  import { EventEmitter, BasicInput as BasicInput$1, ElementData, WeaverseElement, ElementSchema, WeaverseProjectDataType, WeaverseCoreParams, WeaverseResourcePickerData, Weaverse, PlatformTypeEnum, WeaverseItemStore } from '@weaverse/react';
3
3
  export { InputType, PositionInputValue, WeaverseImage, WeaverseVideo, isBrowser, isIframe, useChildInstances, useItemInstance, useParentInstance, useWeaverse } from '@weaverse/react';
4
- import { NavigateFunction } from 'react-router';
5
4
  import { createWithCache, I18nBase, HydrogenContext } from '@shopify/hydrogen';
6
5
  import { LoaderFunctionArgs, AppLoadContext } from '@shopify/remix-oxygen';
7
- import * as react from 'react';
6
+ import * as React$1 from 'react';
8
7
  import { ForwardRefExoticComponent, ComponentType, JSX } from 'react';
8
+ import { NavigateFunction } from 'react-router';
9
9
  import * as react_jsx_runtime from 'react/jsx-runtime';
10
10
 
11
11
  type WeaverseThemeData = {
@@ -81,7 +81,8 @@ interface HydrogenComponentData extends ElementData {
81
81
  }
82
82
  interface HydrogenComponentSchema extends ElementSchema {
83
83
  childTypes?: string[];
84
- inspector: InspectorGroup[];
84
+ inspector?: InspectorGroup[];
85
+ settings?: InspectorGroup[];
85
86
  presets?: Omit<HydrogenComponentPresets, 'type'>;
86
87
  limit?: number;
87
88
  enabledOn?: {
@@ -106,7 +107,7 @@ interface InspectorGroup {
106
107
  interface HydrogenComponentProps<L = any> extends WeaverseElement {
107
108
  className?: string;
108
109
  loaderData?: L;
109
- children?: React.JSX.Element[];
110
+ children?: React$1.JSX.Element[];
110
111
  }
111
112
  type WeaverseLoaderRequestInfo = {
112
113
  search: string;
@@ -138,7 +139,7 @@ type HydrogenComponentPresets = {
138
139
  [key: string]: any;
139
140
  };
140
141
  interface HydrogenElement {
141
- Component: ForwardRefExoticComponent<HydrogenComponentProps>;
142
+ Component: ForwardRefExoticComponent<HydrogenComponentProps> | ((props: HydrogenComponentProps) => React$1.JSX.Element);
142
143
  type: string;
143
144
  schema?: HydrogenComponentSchema;
144
145
  loader?: (args: ComponentLoaderArgs) => Promise<unknown>;
@@ -150,7 +151,7 @@ interface WeaverseHydrogenParams extends Omit<WeaverseCoreParams, 'ItemConstruct
150
151
  requestInfo: WeaverseLoaderRequestInfo;
151
152
  }
152
153
  interface HydrogenComponent<T extends HydrogenComponentProps = any> {
153
- default: ForwardRefExoticComponent<T>;
154
+ default: ForwardRefExoticComponent<T> | ((props: T) => React$1.JSX.Element);
154
155
  schema: HydrogenComponentSchema;
155
156
  loader?: (args: ComponentLoaderArgs) => Promise<unknown>;
156
157
  }
@@ -212,7 +213,8 @@ interface HydrogenThemeSchema {
212
213
  documentationUrl: string;
213
214
  supportUrl: string;
214
215
  };
215
- inspector: InspectorGroup[];
216
+ inspector?: InspectorGroup[];
217
+ settings?: InspectorGroup[];
216
218
  i18n?: {
217
219
  urlStructure: 'url-path' | 'subdomain' | 'top-level-domain';
218
220
  defaultLocale: WeaverseI18n;
@@ -290,7 +292,7 @@ declare class WeaverseHydrogen extends Weaverse {
290
292
  constructor(params: WeaverseHydrogenParams);
291
293
  }
292
294
  declare function registerComponent(element: HydrogenElement): void;
293
- declare let WeaverseHydrogenRoot: react.MemoExoticComponent<({ components, errorComponent: ErrorComponent, }: {
295
+ declare let WeaverseHydrogenRoot: React$1.MemoExoticComponent<({ components, errorComponent: ErrorComponent, }: {
294
296
  components: HydrogenComponent[];
295
297
  errorComponent?: React.FC<{
296
298
  error: any;
package/dist/index.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  import { SelectedOptionInput } from '@shopify/hydrogen/storefront-api-types';
2
2
  import { EventEmitter, BasicInput as BasicInput$1, ElementData, WeaverseElement, ElementSchema, WeaverseProjectDataType, WeaverseCoreParams, WeaverseResourcePickerData, Weaverse, PlatformTypeEnum, WeaverseItemStore } from '@weaverse/react';
3
3
  export { InputType, PositionInputValue, WeaverseImage, WeaverseVideo, isBrowser, isIframe, useChildInstances, useItemInstance, useParentInstance, useWeaverse } from '@weaverse/react';
4
- import { NavigateFunction } from 'react-router';
5
4
  import { createWithCache, I18nBase, HydrogenContext } from '@shopify/hydrogen';
6
5
  import { LoaderFunctionArgs, AppLoadContext } from '@shopify/remix-oxygen';
7
- import * as react from 'react';
6
+ import * as React$1 from 'react';
8
7
  import { ForwardRefExoticComponent, ComponentType, JSX } from 'react';
8
+ import { NavigateFunction } from 'react-router';
9
9
  import * as react_jsx_runtime from 'react/jsx-runtime';
10
10
 
11
11
  type WeaverseThemeData = {
@@ -81,7 +81,8 @@ interface HydrogenComponentData extends ElementData {
81
81
  }
82
82
  interface HydrogenComponentSchema extends ElementSchema {
83
83
  childTypes?: string[];
84
- inspector: InspectorGroup[];
84
+ inspector?: InspectorGroup[];
85
+ settings?: InspectorGroup[];
85
86
  presets?: Omit<HydrogenComponentPresets, 'type'>;
86
87
  limit?: number;
87
88
  enabledOn?: {
@@ -106,7 +107,7 @@ interface InspectorGroup {
106
107
  interface HydrogenComponentProps<L = any> extends WeaverseElement {
107
108
  className?: string;
108
109
  loaderData?: L;
109
- children?: React.JSX.Element[];
110
+ children?: React$1.JSX.Element[];
110
111
  }
111
112
  type WeaverseLoaderRequestInfo = {
112
113
  search: string;
@@ -138,7 +139,7 @@ type HydrogenComponentPresets = {
138
139
  [key: string]: any;
139
140
  };
140
141
  interface HydrogenElement {
141
- Component: ForwardRefExoticComponent<HydrogenComponentProps>;
142
+ Component: ForwardRefExoticComponent<HydrogenComponentProps> | ((props: HydrogenComponentProps) => React$1.JSX.Element);
142
143
  type: string;
143
144
  schema?: HydrogenComponentSchema;
144
145
  loader?: (args: ComponentLoaderArgs) => Promise<unknown>;
@@ -150,7 +151,7 @@ interface WeaverseHydrogenParams extends Omit<WeaverseCoreParams, 'ItemConstruct
150
151
  requestInfo: WeaverseLoaderRequestInfo;
151
152
  }
152
153
  interface HydrogenComponent<T extends HydrogenComponentProps = any> {
153
- default: ForwardRefExoticComponent<T>;
154
+ default: ForwardRefExoticComponent<T> | ((props: T) => React$1.JSX.Element);
154
155
  schema: HydrogenComponentSchema;
155
156
  loader?: (args: ComponentLoaderArgs) => Promise<unknown>;
156
157
  }
@@ -212,7 +213,8 @@ interface HydrogenThemeSchema {
212
213
  documentationUrl: string;
213
214
  supportUrl: string;
214
215
  };
215
- inspector: InspectorGroup[];
216
+ inspector?: InspectorGroup[];
217
+ settings?: InspectorGroup[];
216
218
  i18n?: {
217
219
  urlStructure: 'url-path' | 'subdomain' | 'top-level-domain';
218
220
  defaultLocale: WeaverseI18n;
@@ -290,7 +292,7 @@ declare class WeaverseHydrogen extends Weaverse {
290
292
  constructor(params: WeaverseHydrogenParams);
291
293
  }
292
294
  declare function registerComponent(element: HydrogenElement): void;
293
- declare let WeaverseHydrogenRoot: react.MemoExoticComponent<({ components, errorComponent: ErrorComponent, }: {
295
+ declare let WeaverseHydrogenRoot: React$1.MemoExoticComponent<({ components, errorComponent: ErrorComponent, }: {
294
296
  components: HydrogenComponent[];
295
297
  errorComponent?: React.FC<{
296
298
  error: any;
package/dist/index.js CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  var hydrogen = require('@shopify/hydrogen');
4
4
  var react = require('@weaverse/react');
5
- var reactRouter = require('react-router');
6
5
  var react$1 = require('react');
7
6
  var reactErrorBoundary = require('react-error-boundary');
7
+ var reactRouter = require('react-router');
8
8
  var jsxRuntime = require('react/jsx-runtime');
9
9
 
10
10
  var __defProp = Object.defineProperty;
@@ -13,7 +13,52 @@ var __export = (target, all) => {
13
13
  __defProp(target, name, { get: all[name], enumerable: true });
14
14
  };
15
15
 
16
+ // src/components/main.tsx
17
+ var main_exports = {};
18
+ __export(main_exports, {
19
+ default: () => main_default,
20
+ schema: () => schema
21
+ });
22
+ function Main(props) {
23
+ let { children, dangerouslySetInnerHTML, ...rest } = props;
24
+ return /* @__PURE__ */ jsxRuntime.jsx(
25
+ "div",
26
+ {
27
+ ...rest,
28
+ children,
29
+ dangerouslySetInnerHTML: children ? void 0 : dangerouslySetInnerHTML
30
+ }
31
+ );
32
+ }
33
+ var main_default = Main;
34
+ var schema = {
35
+ type: "main",
36
+ title: "Main",
37
+ settings: []
38
+ };
39
+
40
+ // src/components/index.ts
41
+ var defaultComponents = [main_exports];
42
+
16
43
  // src/utils/index.ts
44
+ var warnedTypes = /* @__PURE__ */ new Set();
45
+ function logOnce(type, message) {
46
+ if (!warnedTypes.has(type)) {
47
+ console.warn(message);
48
+ warnedTypes.add(type);
49
+ }
50
+ }
51
+ function deepMergeArrays(target, source) {
52
+ return [...target, ...source];
53
+ }
54
+ function mergeInspectorSettings(settings, inspector, type) {
55
+ if (!inspector?.length) return settings;
56
+ if (!settings?.length) return inspector;
57
+ console.info(
58
+ `Schema "${type}": Both 'settings' and 'inspector' found. Using 'settings' with 'inspector' as fallback.`
59
+ );
60
+ return deepMergeArrays(settings, inspector);
61
+ }
17
62
  function getRequestQueries(request) {
18
63
  let url = new URL(request.url);
19
64
  return Array.from(url.searchParams.entries()).reduce(
@@ -59,9 +104,53 @@ function getWeaverseConfigs(request, env) {
59
104
  }
60
105
  function generateDataFromSchema(schema2) {
61
106
  let data = {};
62
- let inspector = schema2?.inspector;
63
- if (inspector) {
64
- for (let group of inspector) {
107
+ let inspectorGroups = [];
108
+ const isComponentSchema = (s) => {
109
+ return "type" in s && typeof s.type === "string";
110
+ };
111
+ if (isComponentSchema(schema2)) {
112
+ if (schema2.settings) {
113
+ inspectorGroups = schema2.settings;
114
+ }
115
+ if (schema2.inspector) {
116
+ if (schema2.settings?.length) {
117
+ inspectorGroups = mergeInspectorSettings(
118
+ schema2.settings,
119
+ schema2.inspector,
120
+ schema2.type || "unknown"
121
+ );
122
+ } else {
123
+ inspectorGroups = schema2.inspector;
124
+ if (schema2.type) {
125
+ logOnce(
126
+ schema2.type,
127
+ `\u26A0\uFE0F Schema "${schema2.type}": The 'inspector' property is deprecated. Please use 'settings' instead.`
128
+ );
129
+ }
130
+ }
131
+ }
132
+ } else {
133
+ if (schema2.settings) {
134
+ inspectorGroups = schema2.settings;
135
+ }
136
+ if (schema2.inspector) {
137
+ if (schema2.settings?.length) {
138
+ inspectorGroups = mergeInspectorSettings(
139
+ schema2.settings,
140
+ schema2.inspector,
141
+ "Theme Schema"
142
+ );
143
+ } else {
144
+ inspectorGroups = schema2.inspector;
145
+ logOnce(
146
+ "ThemeSchema",
147
+ `\u26A0\uFE0F Theme Schema: The 'inspector' property is deprecated. Please use 'settings' instead.`
148
+ );
149
+ }
150
+ }
151
+ }
152
+ if (inspectorGroups?.length) {
153
+ for (let group of inspectorGroups) {
65
154
  for (let input of group.inputs) {
66
155
  let { name, defaultValue } = input;
67
156
  if (name && defaultValue !== null && defaultValue !== void 0) {
@@ -133,8 +222,195 @@ function getPreviewData(type, components, weaverseHost) {
133
222
  }
134
223
  };
135
224
  }
225
+ var ThemeSettingsStore = class extends react.EventEmitter {
226
+ settings = {};
227
+ schema;
228
+ publicEnv;
229
+ constructor(data) {
230
+ super();
231
+ let { theme, schema: schema2, publicEnv } = data || {};
232
+ this.settings = { ...theme };
233
+ this.schema = schema2;
234
+ this.publicEnv = publicEnv;
235
+ if (react.isBrowser) {
236
+ window.__weaverseThemeSettingsStore = this;
237
+ }
238
+ }
239
+ updateThemeSettings = (newSettings) => {
240
+ this.settings = {
241
+ ...this.settings,
242
+ ...newSettings
243
+ };
244
+ this.emit(this.settings);
245
+ };
246
+ getSnapshot = () => {
247
+ return this.settings;
248
+ };
249
+ getServerSnapshot = () => {
250
+ return this.settings;
251
+ };
252
+ };
253
+ function useThemeSettingsStore() {
254
+ let data = reactRouter.useRouteLoaderData("root");
255
+ if (react.isBrowser && window.__weaverseThemeSettingsStore) {
256
+ return window.__weaverseThemeSettingsStore;
257
+ }
258
+ return new ThemeSettingsStore(data?.weaverseTheme);
259
+ }
136
260
 
137
- // src/weaverse-client.ts
261
+ // src/utils/use-studio.ts
262
+ function useStudio(weaverse) {
263
+ let { revalidate } = reactRouter.useRevalidator();
264
+ let navigation = reactRouter.useNavigation();
265
+ let { pathname, search } = reactRouter.useLocation();
266
+ let navigate = reactRouter.useNavigate();
267
+ let themeSettingsStore = useThemeSettingsStore();
268
+ let { isDesignMode, weaverseHost, weaverseVersion, isPreviewMode } = weaverse;
269
+ react$1.useEffect(() => {
270
+ if (navigation.state === "idle") {
271
+ if (isPreviewMode) {
272
+ let previewSrc = `${weaverseHost}/static/studio/hydrogen/preview.js?v=${weaverseVersion}`;
273
+ react.loadScript(previewSrc).catch(console.error);
274
+ } else if (isDesignMode) {
275
+ weaverse.internal = {
276
+ ...weaverse.internal,
277
+ navigate,
278
+ revalidate,
279
+ themeSettingsStore
280
+ };
281
+ let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
282
+ react.loadScript(studioSrc).then(() => {
283
+ window.weaverseStudio?.init(weaverse);
284
+ }).catch(console.error);
285
+ }
286
+ }
287
+ }, [pathname, search, navigation.state]);
288
+ usePixel(weaverse);
289
+ }
290
+ function usePixel(context) {
291
+ let { projectId, pageId, weaverseHost, isDesignMode } = context;
292
+ react$1.useEffect(() => {
293
+ if (!projectId || !pageId || !weaverseHost || isDesignMode) return;
294
+ let url = `${weaverseHost}/api/public/px`;
295
+ let img = new Image();
296
+ img.onload = () => img.remove();
297
+ img.src = `${url}?projectId=${projectId}&pageId=${pageId}`;
298
+ }, []);
299
+ }
300
+ var WeaverseHydrogenItem = class extends react.WeaverseItemStore {
301
+ constructor(initialData, weaverse) {
302
+ super(initialData, weaverse);
303
+ let { data, ...rest } = initialData;
304
+ if (!this.Element?.schema) {
305
+ console.error("Element is missing schema or not found!");
306
+ return;
307
+ }
308
+ let schemaData = generateDataFromSchema(this.Element.schema);
309
+ Object.assign(this._store, schemaData, data, rest);
310
+ }
311
+ get Element() {
312
+ return super.Element;
313
+ }
314
+ };
315
+ react.Weaverse.ItemConstructor = WeaverseHydrogenItem;
316
+ var WeaverseHydrogen = class extends react.Weaverse {
317
+ platformType = "shopify-hydrogen";
318
+ pageId;
319
+ internal;
320
+ requestInfo;
321
+ static itemInstances;
322
+ static elementRegistry;
323
+ constructor(params) {
324
+ let { internal, pageId, requestInfo, ...coreParams } = params;
325
+ super({ ...coreParams });
326
+ this.internal = internal;
327
+ this.pageId = pageId;
328
+ this.requestInfo = requestInfo;
329
+ }
330
+ };
331
+ function createWeaverseInstance(params) {
332
+ if (react.isBrowser) {
333
+ window.__weaverses = window.__weaverses || {};
334
+ let weaverse = window.__weaverses[params.pageId];
335
+ if (!weaverse || weaverse?.requestInfo?.pathname !== params.requestInfo.pathname || weaverse?.requestInfo?.search !== params.requestInfo.search) {
336
+ weaverse = new WeaverseHydrogen(params);
337
+ window.__weaverses[params.pageId] = weaverse;
338
+ }
339
+ if (weaverse?.isDesignMode) {
340
+ weaverse.requestInfo = params.requestInfo;
341
+ window.weaverseStudio?.refreshStudio(params);
342
+ }
343
+ return weaverse;
344
+ }
345
+ return new WeaverseHydrogen(params);
346
+ }
347
+ var StudioBridge = react$1.memo(({ context }) => {
348
+ useStudio(context);
349
+ return null;
350
+ });
351
+ function RenderRoot(props) {
352
+ let { data, components } = props;
353
+ for (let comp of [...components, ...defaultComponents]) {
354
+ comp?.schema?.type && registerComponent({
355
+ type: comp?.schema.type,
356
+ Component: comp.default,
357
+ schema: comp.schema,
358
+ loader: comp.loader
359
+ });
360
+ }
361
+ let { page, configs, project, pageAssignment } = data || {};
362
+ let weaverse = createWeaverseInstance({
363
+ ...configs,
364
+ data: page,
365
+ pageId: page?.id,
366
+ internal: { project, pageAssignment }
367
+ });
368
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
369
+ /* @__PURE__ */ jsxRuntime.jsx(react.WeaverseRoot, { context: weaverse }),
370
+ /* @__PURE__ */ jsxRuntime.jsx(StudioBridge, { context: weaverse })
371
+ ] });
372
+ }
373
+ function registerComponent(element) {
374
+ WeaverseHydrogen.registerElement(element);
375
+ }
376
+ var WeaverseHydrogenRoot = react$1.memo(
377
+ ({
378
+ components,
379
+ errorComponent: ErrorComponent = ({ error }) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: error?.message || "An unexpected error occurred" })
380
+ }) => {
381
+ let loaderData = reactRouter.useLoaderData();
382
+ let data = loaderData?.weaverseData;
383
+ if (data) {
384
+ if (data instanceof Promise) {
385
+ return /* @__PURE__ */ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, { fallbackRender: ErrorComponent, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Suspense, { children: /* @__PURE__ */ jsxRuntime.jsx(reactRouter.Await, { resolve: data, children: (resolvedData) => /* @__PURE__ */ jsxRuntime.jsx(RenderRoot, { data: resolvedData, components }) }) }) });
386
+ }
387
+ return /* @__PURE__ */ jsxRuntime.jsx(RenderRoot, { data, components });
388
+ }
389
+ return /* @__PURE__ */ jsxRuntime.jsx(
390
+ ErrorComponent,
391
+ {
392
+ error: { message: "No Weaverse data return from route loader!" }
393
+ }
394
+ );
395
+ }
396
+ );
397
+ var ThemeSettingsProvider = react$1.createContext(null);
398
+ ThemeSettingsProvider.displayName = "WeaverseThemeSettingsProvider";
399
+ function withWeaverse(Component) {
400
+ return (props) => {
401
+ let { settings } = useThemeSettingsStore();
402
+ return /* @__PURE__ */ jsxRuntime.jsx(ThemeSettingsProvider.Provider, { value: settings, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props }) });
403
+ };
404
+ }
405
+ function useThemeSettings() {
406
+ let themeSettingsStore = useThemeSettingsStore();
407
+ let settings = react.useSafeExternalStore(
408
+ themeSettingsStore.subscribe,
409
+ themeSettingsStore.getSnapshot,
410
+ themeSettingsStore.getServerSnapshot
411
+ );
412
+ return settings;
413
+ }
138
414
  var API_PATH = "api/public";
139
415
  var DEFAULT_CACHE_STRATEGY = {
140
416
  maxAge: 10,
@@ -383,223 +659,6 @@ var WeaverseClient = class {
383
659
  };
384
660
  };
385
661
 
386
- // src/components/main.tsx
387
- var main_exports = {};
388
- __export(main_exports, {
389
- default: () => main_default,
390
- schema: () => schema
391
- });
392
- var Main = react$1.forwardRef((props, ref) => {
393
- let { children, dangerouslySetInnerHTML, ...rest } = props;
394
- return /* @__PURE__ */ jsxRuntime.jsx(
395
- "div",
396
- {
397
- ref,
398
- ...rest,
399
- children,
400
- dangerouslySetInnerHTML: children ? void 0 : dangerouslySetInnerHTML
401
- }
402
- );
403
- });
404
- var main_default = Main;
405
- var schema = {
406
- type: "main",
407
- title: "Main",
408
- inspector: []
409
- };
410
-
411
- // src/components/index.ts
412
- var defaultComponents = [main_exports];
413
- var ThemeSettingsStore = class extends react.EventEmitter {
414
- settings = {};
415
- schema;
416
- publicEnv;
417
- constructor(data) {
418
- super();
419
- let { theme, schema: schema2, publicEnv } = data || {};
420
- this.settings = { ...theme };
421
- this.schema = schema2;
422
- this.publicEnv = publicEnv;
423
- if (react.isBrowser) {
424
- window.__weaverseThemeSettingsStore = this;
425
- }
426
- }
427
- updateThemeSettings = (newSettings) => {
428
- this.settings = {
429
- ...this.settings,
430
- ...newSettings
431
- };
432
- this.emit(this.settings);
433
- };
434
- getSnapshot = () => {
435
- return this.settings;
436
- };
437
- getServerSnapshot = () => {
438
- return this.settings;
439
- };
440
- };
441
- function useThemeSettingsStore() {
442
- let data = reactRouter.useRouteLoaderData("root");
443
- if (react.isBrowser && window.__weaverseThemeSettingsStore) {
444
- return window.__weaverseThemeSettingsStore;
445
- }
446
- return new ThemeSettingsStore(data?.weaverseTheme);
447
- }
448
-
449
- // src/utils/use-studio.ts
450
- function useStudio(weaverse) {
451
- let { revalidate } = reactRouter.useRevalidator();
452
- let navigation = reactRouter.useNavigation();
453
- let { pathname, search } = reactRouter.useLocation();
454
- let navigate = reactRouter.useNavigate();
455
- let themeSettingsStore = useThemeSettingsStore();
456
- let { isDesignMode, weaverseHost, weaverseVersion, isPreviewMode } = weaverse;
457
- react$1.useEffect(() => {
458
- if (navigation.state === "idle") {
459
- if (isPreviewMode) {
460
- let previewSrc = `${weaverseHost}/static/studio/hydrogen/preview.js?v=${weaverseVersion}`;
461
- react.loadScript(previewSrc).catch(console.error);
462
- } else if (isDesignMode) {
463
- weaverse.internal = {
464
- ...weaverse.internal,
465
- navigate,
466
- revalidate,
467
- themeSettingsStore
468
- };
469
- let studioSrc = `${weaverseHost}/static/studio/hydrogen/index.js?v=${weaverseVersion}`;
470
- react.loadScript(studioSrc).then(() => {
471
- window.weaverseStudio?.init(weaverse);
472
- }).catch(console.error);
473
- }
474
- }
475
- }, [pathname, search, navigation.state]);
476
- usePixel(weaverse);
477
- }
478
- function usePixel(context) {
479
- let { projectId, pageId, weaverseHost, isDesignMode } = context;
480
- react$1.useEffect(() => {
481
- if (!projectId || !pageId || !weaverseHost || isDesignMode) return;
482
- let url = `${weaverseHost}/api/public/px`;
483
- let img = new Image();
484
- img.onload = () => img.remove();
485
- img.src = `${url}?projectId=${projectId}&pageId=${pageId}`;
486
- }, []);
487
- }
488
- var WeaverseHydrogenItem = class extends react.WeaverseItemStore {
489
- constructor(initialData, weaverse) {
490
- super(initialData, weaverse);
491
- let { data, ...rest } = initialData;
492
- if (!this.Element?.schema) {
493
- console.error("Element is missing schema or not found!");
494
- return;
495
- }
496
- let schemaData = generateDataFromSchema(this.Element.schema);
497
- Object.assign(this._store, schemaData, data, rest);
498
- }
499
- get Element() {
500
- return super.Element;
501
- }
502
- };
503
- react.Weaverse.ItemConstructor = WeaverseHydrogenItem;
504
- var WeaverseHydrogen = class extends react.Weaverse {
505
- platformType = "shopify-hydrogen";
506
- pageId;
507
- internal;
508
- requestInfo;
509
- static itemInstances;
510
- static elementRegistry;
511
- constructor(params) {
512
- let { internal, pageId, requestInfo, ...coreParams } = params;
513
- super({ ...coreParams });
514
- this.internal = internal;
515
- this.pageId = pageId;
516
- this.requestInfo = requestInfo;
517
- }
518
- };
519
- function createWeaverseInstance(params) {
520
- if (react.isBrowser) {
521
- window.__weaverses = window.__weaverses || {};
522
- let weaverse = window.__weaverses[params.pageId];
523
- if (!weaverse || weaverse?.requestInfo?.pathname !== params.requestInfo.pathname || weaverse?.requestInfo?.search !== params.requestInfo.search) {
524
- weaverse = new WeaverseHydrogen(params);
525
- window.__weaverses[params.pageId] = weaverse;
526
- }
527
- if (weaverse?.isDesignMode) {
528
- weaverse.requestInfo = params.requestInfo;
529
- window.weaverseStudio?.refreshStudio(params);
530
- }
531
- return weaverse;
532
- }
533
- return new WeaverseHydrogen(params);
534
- }
535
- var StudioBridge = react$1.memo(({ context }) => {
536
- useStudio(context);
537
- return null;
538
- });
539
- function RenderRoot(props) {
540
- let { data, components } = props;
541
- for (let comp of [...components, ...defaultComponents]) {
542
- comp?.schema?.type && registerComponent({
543
- type: comp?.schema.type,
544
- Component: comp.default,
545
- schema: comp.schema,
546
- loader: comp.loader
547
- });
548
- }
549
- let { page, configs, project, pageAssignment } = data || {};
550
- let weaverse = createWeaverseInstance({
551
- ...configs,
552
- data: page,
553
- pageId: page?.id,
554
- internal: { project, pageAssignment }
555
- });
556
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
557
- /* @__PURE__ */ jsxRuntime.jsx(react.WeaverseRoot, { context: weaverse }),
558
- /* @__PURE__ */ jsxRuntime.jsx(StudioBridge, { context: weaverse })
559
- ] });
560
- }
561
- function registerComponent(element) {
562
- WeaverseHydrogen.registerElement(element);
563
- }
564
- var WeaverseHydrogenRoot = react$1.memo(
565
- ({
566
- components,
567
- errorComponent: ErrorComponent = ({ error }) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: error?.message || "An unexpected error occurred" })
568
- }) => {
569
- let loaderData = reactRouter.useLoaderData();
570
- let data = loaderData?.weaverseData;
571
- if (data) {
572
- if (data instanceof Promise) {
573
- return /* @__PURE__ */ jsxRuntime.jsx(reactErrorBoundary.ErrorBoundary, { fallbackRender: ErrorComponent, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Suspense, { children: /* @__PURE__ */ jsxRuntime.jsx(reactRouter.Await, { resolve: data, children: (resolvedData) => /* @__PURE__ */ jsxRuntime.jsx(RenderRoot, { data: resolvedData, components }) }) }) });
574
- }
575
- return /* @__PURE__ */ jsxRuntime.jsx(RenderRoot, { data, components });
576
- }
577
- return /* @__PURE__ */ jsxRuntime.jsx(
578
- ErrorComponent,
579
- {
580
- error: { message: "No Weaverse data return from route loader!" }
581
- }
582
- );
583
- }
584
- );
585
- var ThemeSettingsProvider = react$1.createContext(null);
586
- ThemeSettingsProvider.displayName = "WeaverseThemeSettingsProvider";
587
- function withWeaverse(Component) {
588
- return (props) => {
589
- let { settings } = useThemeSettingsStore();
590
- return /* @__PURE__ */ jsxRuntime.jsx(ThemeSettingsProvider.Provider, { value: settings, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props }) });
591
- };
592
- }
593
- function useThemeSettings() {
594
- let themeSettingsStore = useThemeSettingsStore();
595
- let settings = react.useSafeExternalStore(
596
- themeSettingsStore.subscribe,
597
- themeSettingsStore.getSnapshot,
598
- themeSettingsStore.getServerSnapshot
599
- );
600
- return settings;
601
- }
602
-
603
662
  // src/index.ts
604
663
  function getSelectedProductOptions(request) {
605
664
  let options = hydrogen.getSelectedProductOptions(request);