@weaverse/hydrogen 5.8.7 → 5.8.8

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
@@ -57,6 +57,27 @@ declare class WeaverseHydrogen extends Weaverse {
57
57
  static elementRegistry: Map<string, HydrogenElement>;
58
58
  constructor(params: WeaverseHydrogenParams);
59
59
  }
60
+ /**
61
+ * Register a Weaverse component with the global element registry.
62
+ * Must be called before rendering components in WeaverseHydrogenRoot.
63
+ *
64
+ * @param element - Component configuration with schema, Component, and optional loader
65
+ *
66
+ * @example
67
+ * ```typescript
68
+ * import Hero from './sections/Hero'
69
+ * import { schema } from './sections/Hero'
70
+ *
71
+ * registerComponent({
72
+ * type: 'hero',
73
+ * Component: Hero,
74
+ * schema,
75
+ * loader: async ({ data, weaverse }) => {
76
+ * return { someData: 'value' }
77
+ * }
78
+ * })
79
+ * ```
80
+ */
60
81
  declare function registerComponent(element: HydrogenElement): void;
61
82
  declare const WeaverseHydrogenRoot: React$1.MemoExoticComponent<({ components, errorComponent: ErrorComponent, }: {
62
83
  components: HydrogenComponent[];
@@ -64,7 +85,41 @@ declare const WeaverseHydrogenRoot: React$1.MemoExoticComponent<({ components, e
64
85
  error: Error | unknown;
65
86
  }>;
66
87
  }) => react_jsx_runtime.JSX.Element>;
88
+ /**
89
+ * Higher-order component that wraps your app with Weaverse theme settings context.
90
+ * Provides theme settings to all child components via React context.
91
+ *
92
+ * @param Component - The root component to wrap
93
+ * @returns Wrapped component with theme settings provider
94
+ *
95
+ * @example
96
+ * ```typescript
97
+ * import { withWeaverse } from '@weaverse/hydrogen'
98
+ *
99
+ * function App() {
100
+ * return <div>My App</div>
101
+ * }
102
+ *
103
+ * export default withWeaverse(App)
104
+ * ```
105
+ */
67
106
  declare function withWeaverse(Component: ComponentType<any>): (props: JSX.IntrinsicAttributes) => react_jsx_runtime.JSX.Element;
107
+ /**
108
+ * React hook to access Weaverse theme settings from anywhere in your component tree.
109
+ * Must be used within a component wrapped by `withWeaverse` or inside `WeaverseHydrogenRoot`.
110
+ *
111
+ * @returns Current theme settings object
112
+ *
113
+ * @example
114
+ * ```typescript
115
+ * function MyComponent() {
116
+ * const theme = useThemeSettings()
117
+ * const primaryColor = theme.colors?.primary
118
+ *
119
+ * return <div style={{ color: primaryColor }}>Styled content</div>
120
+ * }
121
+ * ```
122
+ */
68
123
  declare function useThemeSettings<T = HydrogenThemeSettings>(): T;
69
124
 
70
125
  declare class WeaverseClient {
@@ -169,11 +224,76 @@ declare class WeaverseClient {
169
224
  */
170
225
  private readonly directFetch;
171
226
  private getApiUrl;
227
+ /**
228
+ * Fetch data with caching support for both design mode and production.
229
+ * Uses direct fetch in design mode, Hydrogen's withCache in production.
230
+ * Automatically includes projectId in cache key for multi-project isolation.
231
+ *
232
+ * @param url - The URL to fetch from
233
+ * @param options - Fetch options including optional cache strategy
234
+ * @returns Promise resolving to the fetched data
235
+ *
236
+ * @example
237
+ * ```typescript
238
+ * const data = await weaverse.fetchWithCache<MyData>(
239
+ * 'https://api.example.com/data',
240
+ * { method: 'POST', body: JSON.stringify({ key: 'value' }) }
241
+ * )
242
+ * ```
243
+ */
172
244
  fetchWithCache: <T = unknown>(url: string, options?: RequestInit & {
173
245
  strategy?: CachingStrategy;
174
246
  }) => Promise<T>;
247
+ /**
248
+ * Load theme settings from Weaverse API with fallback to schema defaults.
249
+ * Merges remote settings with local theme schema and handles design mode serialization.
250
+ *
251
+ * @param strategy - Optional cache strategy override
252
+ * @returns Promise resolving to theme settings response
253
+ *
254
+ * @example
255
+ * ```typescript
256
+ * const settings = await weaverse.loadThemeSettings()
257
+ * const primaryColor = settings.theme.colors?.primary
258
+ * ```
259
+ */
175
260
  loadThemeSettings: (strategy?: CachingStrategy) => Promise<ThemeSettingsResponse>;
261
+ /**
262
+ * Generate fallback page with default structure when page data is unavailable.
263
+ * Used internally when API returns no page or when page needs default content.
264
+ *
265
+ * @param message - Custom message to display in the fallback page
266
+ * @returns HydrogenPageData with single main component containing the message
267
+ */
176
268
  generateFallbackPage: (message: string) => HydrogenPageData;
269
+ /**
270
+ * Load page data from Weaverse API with optional route-level project override.
271
+ * Fetches page content, executes component loaders, and handles empty items fallback.
272
+ *
273
+ * @param params - Optional page loading parameters
274
+ * @param params.type - Page type (HOME, PAGE, PRODUCT, COLLECTION, etc.)
275
+ * @param params.handle - Page handle for dynamic routes
276
+ * @param params.locale - Locale override
277
+ * @param params.projectId - Route-level project ID override (for multi-project)
278
+ * @param params.strategy - Custom cache strategy override
279
+ * @returns Promise resolving to page data or null on error
280
+ *
281
+ * @example
282
+ * ```typescript
283
+ * // Basic usage
284
+ * const data = await weaverse.loadPage()
285
+ *
286
+ * // With page type
287
+ * const data = await weaverse.loadPage({ type: 'HOME' })
288
+ *
289
+ * // Route-level project override
290
+ * const data = await weaverse.loadPage({
291
+ * type: 'PAGE',
292
+ * handle: 'about',
293
+ * projectId: 'campaign-project-123'
294
+ * })
295
+ * ```
296
+ */
177
297
  loadPage: (params?: LoadPageParams) => Promise<WeaverseLoaderData | null>;
178
298
  execComponentLoader: (item: HydrogenComponentData) => Promise<HydrogenComponentData>;
179
299
  }
@@ -756,6 +876,21 @@ declare function getWeaverseConfigs(request: Request, env: HydrogenEnv): Weavers
756
876
  declare function generateDataFromSchema(schema: HydrogenComponentSchema | HydrogenThemeSchema): Record<string, any>;
757
877
  declare function getPreviewData(type: string, components: HydrogenComponent[], weaverseHost: string): WeaverseLoaderData;
758
878
 
879
+ /**
880
+ * Filter out Weaverse-specific query parameters from product options.
881
+ * Removes `isDesignMode` and any parameters starting with `weaverse` prefix.
882
+ *
883
+ * @param request - The incoming HTTP request
884
+ * @returns Filtered product options for Shopify Hydrogen
885
+ *
886
+ * @example
887
+ * ```typescript
888
+ * export async function loader({ request }: LoaderFunctionArgs) {
889
+ * const selectedOptions = getSelectedProductOptions(request)
890
+ * // Use selectedOptions for product queries without Weaverse params
891
+ * }
892
+ * ```
893
+ */
759
894
  declare function getSelectedProductOptions(request: Request): SelectedOptionInput[];
760
895
  declare const IMAGES_PLACEHOLDERS: {
761
896
  logo_white: string;
package/dist/index.d.ts CHANGED
@@ -57,6 +57,27 @@ declare class WeaverseHydrogen extends Weaverse {
57
57
  static elementRegistry: Map<string, HydrogenElement>;
58
58
  constructor(params: WeaverseHydrogenParams);
59
59
  }
60
+ /**
61
+ * Register a Weaverse component with the global element registry.
62
+ * Must be called before rendering components in WeaverseHydrogenRoot.
63
+ *
64
+ * @param element - Component configuration with schema, Component, and optional loader
65
+ *
66
+ * @example
67
+ * ```typescript
68
+ * import Hero from './sections/Hero'
69
+ * import { schema } from './sections/Hero'
70
+ *
71
+ * registerComponent({
72
+ * type: 'hero',
73
+ * Component: Hero,
74
+ * schema,
75
+ * loader: async ({ data, weaverse }) => {
76
+ * return { someData: 'value' }
77
+ * }
78
+ * })
79
+ * ```
80
+ */
60
81
  declare function registerComponent(element: HydrogenElement): void;
61
82
  declare const WeaverseHydrogenRoot: React$1.MemoExoticComponent<({ components, errorComponent: ErrorComponent, }: {
62
83
  components: HydrogenComponent[];
@@ -64,7 +85,41 @@ declare const WeaverseHydrogenRoot: React$1.MemoExoticComponent<({ components, e
64
85
  error: Error | unknown;
65
86
  }>;
66
87
  }) => react_jsx_runtime.JSX.Element>;
88
+ /**
89
+ * Higher-order component that wraps your app with Weaverse theme settings context.
90
+ * Provides theme settings to all child components via React context.
91
+ *
92
+ * @param Component - The root component to wrap
93
+ * @returns Wrapped component with theme settings provider
94
+ *
95
+ * @example
96
+ * ```typescript
97
+ * import { withWeaverse } from '@weaverse/hydrogen'
98
+ *
99
+ * function App() {
100
+ * return <div>My App</div>
101
+ * }
102
+ *
103
+ * export default withWeaverse(App)
104
+ * ```
105
+ */
67
106
  declare function withWeaverse(Component: ComponentType<any>): (props: JSX.IntrinsicAttributes) => react_jsx_runtime.JSX.Element;
107
+ /**
108
+ * React hook to access Weaverse theme settings from anywhere in your component tree.
109
+ * Must be used within a component wrapped by `withWeaverse` or inside `WeaverseHydrogenRoot`.
110
+ *
111
+ * @returns Current theme settings object
112
+ *
113
+ * @example
114
+ * ```typescript
115
+ * function MyComponent() {
116
+ * const theme = useThemeSettings()
117
+ * const primaryColor = theme.colors?.primary
118
+ *
119
+ * return <div style={{ color: primaryColor }}>Styled content</div>
120
+ * }
121
+ * ```
122
+ */
68
123
  declare function useThemeSettings<T = HydrogenThemeSettings>(): T;
69
124
 
70
125
  declare class WeaverseClient {
@@ -169,11 +224,76 @@ declare class WeaverseClient {
169
224
  */
170
225
  private readonly directFetch;
171
226
  private getApiUrl;
227
+ /**
228
+ * Fetch data with caching support for both design mode and production.
229
+ * Uses direct fetch in design mode, Hydrogen's withCache in production.
230
+ * Automatically includes projectId in cache key for multi-project isolation.
231
+ *
232
+ * @param url - The URL to fetch from
233
+ * @param options - Fetch options including optional cache strategy
234
+ * @returns Promise resolving to the fetched data
235
+ *
236
+ * @example
237
+ * ```typescript
238
+ * const data = await weaverse.fetchWithCache<MyData>(
239
+ * 'https://api.example.com/data',
240
+ * { method: 'POST', body: JSON.stringify({ key: 'value' }) }
241
+ * )
242
+ * ```
243
+ */
172
244
  fetchWithCache: <T = unknown>(url: string, options?: RequestInit & {
173
245
  strategy?: CachingStrategy;
174
246
  }) => Promise<T>;
247
+ /**
248
+ * Load theme settings from Weaverse API with fallback to schema defaults.
249
+ * Merges remote settings with local theme schema and handles design mode serialization.
250
+ *
251
+ * @param strategy - Optional cache strategy override
252
+ * @returns Promise resolving to theme settings response
253
+ *
254
+ * @example
255
+ * ```typescript
256
+ * const settings = await weaverse.loadThemeSettings()
257
+ * const primaryColor = settings.theme.colors?.primary
258
+ * ```
259
+ */
175
260
  loadThemeSettings: (strategy?: CachingStrategy) => Promise<ThemeSettingsResponse>;
261
+ /**
262
+ * Generate fallback page with default structure when page data is unavailable.
263
+ * Used internally when API returns no page or when page needs default content.
264
+ *
265
+ * @param message - Custom message to display in the fallback page
266
+ * @returns HydrogenPageData with single main component containing the message
267
+ */
176
268
  generateFallbackPage: (message: string) => HydrogenPageData;
269
+ /**
270
+ * Load page data from Weaverse API with optional route-level project override.
271
+ * Fetches page content, executes component loaders, and handles empty items fallback.
272
+ *
273
+ * @param params - Optional page loading parameters
274
+ * @param params.type - Page type (HOME, PAGE, PRODUCT, COLLECTION, etc.)
275
+ * @param params.handle - Page handle for dynamic routes
276
+ * @param params.locale - Locale override
277
+ * @param params.projectId - Route-level project ID override (for multi-project)
278
+ * @param params.strategy - Custom cache strategy override
279
+ * @returns Promise resolving to page data or null on error
280
+ *
281
+ * @example
282
+ * ```typescript
283
+ * // Basic usage
284
+ * const data = await weaverse.loadPage()
285
+ *
286
+ * // With page type
287
+ * const data = await weaverse.loadPage({ type: 'HOME' })
288
+ *
289
+ * // Route-level project override
290
+ * const data = await weaverse.loadPage({
291
+ * type: 'PAGE',
292
+ * handle: 'about',
293
+ * projectId: 'campaign-project-123'
294
+ * })
295
+ * ```
296
+ */
177
297
  loadPage: (params?: LoadPageParams) => Promise<WeaverseLoaderData | null>;
178
298
  execComponentLoader: (item: HydrogenComponentData) => Promise<HydrogenComponentData>;
179
299
  }
@@ -756,6 +876,21 @@ declare function getWeaverseConfigs(request: Request, env: HydrogenEnv): Weavers
756
876
  declare function generateDataFromSchema(schema: HydrogenComponentSchema | HydrogenThemeSchema): Record<string, any>;
757
877
  declare function getPreviewData(type: string, components: HydrogenComponent[], weaverseHost: string): WeaverseLoaderData;
758
878
 
879
+ /**
880
+ * Filter out Weaverse-specific query parameters from product options.
881
+ * Removes `isDesignMode` and any parameters starting with `weaverse` prefix.
882
+ *
883
+ * @param request - The incoming HTTP request
884
+ * @returns Filtered product options for Shopify Hydrogen
885
+ *
886
+ * @example
887
+ * ```typescript
888
+ * export async function loader({ request }: LoaderFunctionArgs) {
889
+ * const selectedOptions = getSelectedProductOptions(request)
890
+ * // Use selectedOptions for product queries without Weaverse params
891
+ * }
892
+ * ```
893
+ */
759
894
  declare function getSelectedProductOptions(request: Request): SelectedOptionInput[];
760
895
  declare const IMAGES_PLACEHOLDERS: {
761
896
  logo_white: string;
package/dist/index.js CHANGED
@@ -914,6 +914,23 @@ var WeaverseClient = class {
914
914
  }
915
915
  return `${weaverseHost}/api/public/${endpoint}`;
916
916
  }
917
+ /**
918
+ * Fetch data with caching support for both design mode and production.
919
+ * Uses direct fetch in design mode, Hydrogen's withCache in production.
920
+ * Automatically includes projectId in cache key for multi-project isolation.
921
+ *
922
+ * @param url - The URL to fetch from
923
+ * @param options - Fetch options including optional cache strategy
924
+ * @returns Promise resolving to the fetched data
925
+ *
926
+ * @example
927
+ * ```typescript
928
+ * const data = await weaverse.fetchWithCache<MyData>(
929
+ * 'https://api.example.com/data',
930
+ * { method: 'POST', body: JSON.stringify({ key: 'value' }) }
931
+ * )
932
+ * ```
933
+ */
917
934
  fetchWithCache = async (url, options = {}) => {
918
935
  const strategy = options.strategy || hydrogen.CacheCustom(DEFAULT_CACHE_STRATEGY);
919
936
  const cacheKey = [
@@ -938,6 +955,19 @@ var WeaverseClient = class {
938
955
  }
939
956
  return result.data;
940
957
  };
958
+ /**
959
+ * Load theme settings from Weaverse API with fallback to schema defaults.
960
+ * Merges remote settings with local theme schema and handles design mode serialization.
961
+ *
962
+ * @param strategy - Optional cache strategy override
963
+ * @returns Promise resolving to theme settings response
964
+ *
965
+ * @example
966
+ * ```typescript
967
+ * const settings = await weaverse.loadThemeSettings()
968
+ * const primaryColor = settings.theme.colors?.primary
969
+ * ```
970
+ */
941
971
  loadThemeSettings = async (strategy) => {
942
972
  const defaultThemeSettings = generateDataFromSchema(this.themeSchema);
943
973
  try {
@@ -1013,6 +1043,13 @@ var WeaverseClient = class {
1013
1043
  };
1014
1044
  }
1015
1045
  };
1046
+ /**
1047
+ * Generate fallback page with default structure when page data is unavailable.
1048
+ * Used internally when API returns no page or when page needs default content.
1049
+ *
1050
+ * @param message - Custom message to display in the fallback page
1051
+ * @returns HydrogenPageData with single main component containing the message
1052
+ */
1016
1053
  generateFallbackPage = (message) => {
1017
1054
  const rootId = crypto.randomUUID();
1018
1055
  return {
@@ -1028,6 +1065,34 @@ var WeaverseClient = class {
1028
1065
  ]
1029
1066
  };
1030
1067
  };
1068
+ /**
1069
+ * Load page data from Weaverse API with optional route-level project override.
1070
+ * Fetches page content, executes component loaders, and handles empty items fallback.
1071
+ *
1072
+ * @param params - Optional page loading parameters
1073
+ * @param params.type - Page type (HOME, PAGE, PRODUCT, COLLECTION, etc.)
1074
+ * @param params.handle - Page handle for dynamic routes
1075
+ * @param params.locale - Locale override
1076
+ * @param params.projectId - Route-level project ID override (for multi-project)
1077
+ * @param params.strategy - Custom cache strategy override
1078
+ * @returns Promise resolving to page data or null on error
1079
+ *
1080
+ * @example
1081
+ * ```typescript
1082
+ * // Basic usage
1083
+ * const data = await weaverse.loadPage()
1084
+ *
1085
+ * // With page type
1086
+ * const data = await weaverse.loadPage({ type: 'HOME' })
1087
+ *
1088
+ * // Route-level project override
1089
+ * const data = await weaverse.loadPage({
1090
+ * type: 'PAGE',
1091
+ * handle: 'about',
1092
+ * projectId: 'campaign-project-123'
1093
+ * })
1094
+ * ```
1095
+ */
1031
1096
  loadPage = async (params = {}) => {
1032
1097
  try {
1033
1098
  const { request, storefront, basePageRequestBody, basePageConfigs } = this;