@shopify/hydrogen 0.17.2 → 0.19.0

package/dist/esnext/foundation/FileRoutes/FileRoutes.server.d.ts

@@ -1,22 +1,22 @@
 import type { ImportGlobEagerOutput } from '../../types';
 interface FileRoutesProps {
     /** The routes defined by Vite's [import.meta.globEager](https://vitejs.dev/guide/features.html#glob-import) method. */
-    routes: ImportGlobEagerOutput;
+    routes?: ImportGlobEagerOutput;
     /** A path that's prepended to all file routes. You can modify `basePath` if you want to prefix all file routes. For example, you can prefix all file routes with a locale. */
     basePath?: string;
     /** The portion of the file route path that shouldn't be a part of the URL. You need to modify this if you want to import routes from a location other than the default `src/routes`. */
-    dirPrefix?: string;
+    dirPrefix?: string | RegExp;
 }
 /**
  * The `FileRoutes` component builds a set of default Hydrogen routes based on the output provided by Vite's
  * [import.meta.globEager](https://vitejs.dev/guide/features.html#glob-import) method. You can have multiple
  * instances of this component to source file routes from multiple locations.
  */
-export declare function FileRoutes({ routes, basePath, dirPrefix, }: FileRoutesProps): JSX.Element | null;
+export declare function FileRoutes({ routes, basePath, dirPrefix }: FileRoutesProps): JSX.Element | null;
 interface HydrogenRoute {
     component: any;
     path: string;
     exact: boolean;
 }
-export declare function createPageRoutes(pages: ImportGlobEagerOutput, topLevelPath: string | undefined, dirPrefix: string): HydrogenRoute[];
+export declare function createPageRoutes(pages: ImportGlobEagerOutput, topLevelPath?: string, dirPrefix?: string | RegExp): HydrogenRoute[];
 export {};

package/dist/esnext/foundation/FileRoutes/FileRoutes.server.js

@@ -4,17 +4,28 @@ import { log } from '../../utilities/log';
 import { extractPathFromRoutesKey } from '../../utilities/apiRoutes';
 import { useServerRequest } from '../ServerRequestProvider';
 import { RouteParamsProvider } from '../useRouteParams/RouteParamsProvider.client';
+import { findRoutePrefix } from '../../utilities/findRoutePrefix';
 /**
  * The `FileRoutes` component builds a set of default Hydrogen routes based on the output provided by Vite's
  * [import.meta.globEager](https://vitejs.dev/guide/features.html#glob-import) method. You can have multiple
  * instances of this component to source file routes from multiple locations.
  */
-export function FileRoutes({ routes, basePath = '/', dirPrefix = './routes', }) {
+export function FileRoutes({ routes, basePath, dirPrefix }) {
+    var _a;
     const request = useServerRequest();
     const { routeRendered, serverProps } = request.ctx.router;
     if (routeRendered)
         return null;
-    const pageRoutes = useMemo(() => createPageRoutes(routes, basePath, dirPrefix), [routes, basePath]);
+    if (!routes) {
+        const fileRoutes = request.ctx.hydrogenConfig.routes;
+        routes = (_a = fileRoutes === null || fileRoutes === void 0 ? void 0 : fileRoutes.files) !== null && _a !== void 0 ? _a : fileRoutes;
+        dirPrefix !== null && dirPrefix !== void 0 ? dirPrefix : (dirPrefix = fileRoutes === null || fileRoutes === void 0 ? void 0 : fileRoutes.dirPrefix);
+        basePath !== null && basePath !== void 0 ? basePath : (basePath = fileRoutes === null || fileRoutes === void 0 ? void 0 : fileRoutes.basePath);
+    }
+    basePath !== null && basePath !== void 0 ? basePath : (basePath = '/');
+    /* eslint-disable react-hooks/rules-of-hooks */
+    const pageRoutes = useMemo(() => createPageRoutes(routes, basePath, dirPrefix), [routes, basePath, dirPrefix]);
+    /* eslint-enable react-hooks/rules-of-hooks */
     let foundRoute, foundRouteDetails;
     for (let i = 0; i < pageRoutes.length; i++) {
         foundRouteDetails = matchPath(serverProps.pathname, pageRoutes[i]);
@@ -33,9 +44,11 @@ export function FileRoutes({ routes, basePath = '/', dirPrefix = './routes', })
 }
 export function createPageRoutes(pages, topLevelPath = '*', dirPrefix) {
     const topLevelPrefix = topLevelPath.replace('*', '').replace(/\/$/, '');
-    const routes = Object.keys(pages)
+    const keys = Object.keys(pages);
+    const commonRoutePrefix = dirPrefix !== null && dirPrefix !== void 0 ? dirPrefix : findRoutePrefix(keys);
+    const routes = keys
         .map((key) => {
-        const path = extractPathFromRoutesKey(key, dirPrefix);
+        const path = extractPathFromRoutesKey(key, commonRoutePrefix);
         /**
          * Catch-all routes [...handle].jsx don't need an exact match
          * https://reactrouter.com/core/api/Route/exact-bool

package/dist/esnext/foundation/FileSessionStorage/FileSessionStorage.js

@@ -2,6 +2,7 @@ import { Cookie } from '../Cookie/Cookie';
 import { v4 as uid } from 'uuid';
 import path from 'path';
 import { promises as fsp } from 'fs';
+import { parseJSON } from '../../utilities/parse';
 async function wait() {
     return new Promise((resolve) => setTimeout(resolve));
 }
@@ -77,7 +78,7 @@ async function getFile(file, expires, log) {
         try {
             const textContent = await fsp.readFile(file, { encoding: 'utf-8' });
             try {
-                content = JSON.parse(textContent);
+                content = parseJSON(textContent);
             }
             catch (error) {
                 log.warn(`Cannot parse existing session file: ${file}`);

package/dist/esnext/foundation/Redirect/Redirect.client.js

@@ -9,6 +9,7 @@ export default function Redirect({ to }) {
         else {
             navigate(to);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return null;
 }

package/dist/esnext/foundation/Route/Route.server.js

@@ -1,15 +1,12 @@
 import React, { cloneElement } from 'react';
 import { useServerRequest } from '../ServerRequestProvider';
 import { matchPath } from '../../utilities/matchPath';
-import { Boomerang } from '../Boomerang/Boomerang.client';
 import { RouteParamsProvider } from '../useRouteParams/RouteParamsProvider.client';
-import { useServerAnalytics } from '../Analytics';
 /**
  * The `Route` component is used to set up a route in Hydrogen that's independent of the file system. Routes are
  * matched in the order that they're defined.
  */
 export function Route({ path, page }) {
-    var _a;
     const request = useServerRequest();
     const { routeRendered, serverProps } = request.ctx.router;
     if (routeRendered)
@@ -25,13 +22,7 @@ export function Route({ path, page }) {
     if (match) {
         request.ctx.router.routeRendered = true;
         request.ctx.router.routeParams = match.params;
-        const name = (_a = page === null || page === void 0 ? void 0 : page.type) === null || _a === void 0 ? void 0 : _a.name;
-        useServerAnalytics({
-            templateName: name,
-        });
-        return (React.createElement(RouteParamsProvider, { routeParams: match.params },
-            cloneElement(page, { params: match.params || {}, ...serverProps }),
-            name ? React.createElement(Boomerang, { pageTemplate: name }) : null));
+        return (React.createElement(RouteParamsProvider, { routeParams: match.params }, cloneElement(page, { params: match.params || {}, ...serverProps })));
     }
     return null;
 }

package/dist/esnext/foundation/Router/BrowserRouter.client.js

@@ -8,6 +8,7 @@ const positions = {};
 export const BrowserRouter = ({ history: pHistory, children, }) => {
     if (META_ENV_SSR)
         return React.createElement(React.Fragment, null, children);
+    /* eslint-disable react-hooks/rules-of-hooks */
     const history = useMemo(() => pHistory || createBrowserHistory(), [pHistory]);
     const [location, setLocation] = useState(history.location);
     const [locationChanged, setLocationChanged] = useState(false);
@@ -30,7 +31,14 @@ export const BrowserRouter = ({ history: pHistory, children, }) => {
             setLocationChanged(true);
         });
         return () => unlisten();
-    }, [history, location, setLocationChanged]);
+    }, [
+        history,
+        location,
+        setLocationChanged,
+        setLocation,
+        setLocationServerProps,
+    ]);
+    /* eslint-enable react-hooks/rules-of-hooks */
     return (React.createElement(RouterContext.Provider, { value: {
             history,
             location,
@@ -112,6 +120,7 @@ function useScrollRestoration({ location, pending, serverProps, locationChanged,
         location.pathname,
         location.search,
         location.hash,
+        location.key,
         pending,
         serverProps.pathname,
         serverProps.search,

package/dist/esnext/foundation/ServerPropsProvider/ServerPropsProvider.js

@@ -1,3 +1,4 @@
+/* eslint-disable hydrogen/no-state-in-server-components */
 import React, { createContext, useMemo, useCallback, 
 // @ts-ignore
 useTransition, useState, } from 'react';
@@ -12,7 +13,7 @@ export function ServerPropsProvider({ initialServerProps, setServerPropsForRsc,
             setServerProps((prev) => getNewValue(prev, input, propValue));
             setServerPropsForRsc((prev) => getNewValue(prev, input, propValue));
         });
-    }, []);
+    }, [setServerProps, setServerPropsForRsc]);
     const setLocationServerPropsCallback = useCallback((input, propValue) => {
         // Flush the existing user server state when location changes, leaving only the persisted state
         startTransition(() => {
@@ -20,7 +21,7 @@ export function ServerPropsProvider({ initialServerProps, setServerPropsForRsc,
             setServerProps({});
             setLocationServerProps((prev) => getNewValue(prev, input, propValue));
         });
-    }, []);
+    }, [setServerProps, setServerPropsForRsc, setLocationServerProps]);
     const getProposedLocationServerPropsCallback = useCallback((input, propValue) => {
         return getNewValue(locationServerProps, input, propValue);
     }, [locationServerProps]);
@@ -48,7 +49,7 @@ export function ServerPropsProvider({ initialServerProps, setServerPropsForRsc,
     }
     const value = useMemo(() => ({
         pending,
-        locationServerProps: locationServerProps,
+        locationServerProps,
         serverProps,
         setServerProps: setServerPropsCallback,
         setLocationServerProps: setLocationServerPropsCallback,
@@ -63,3 +64,4 @@ export function ServerPropsProvider({ initialServerProps, setServerPropsForRsc,
     ]);
     return (React.createElement(ServerPropsContext.Provider, { value: value }, children));
 }
+/* eslint-enable hydrogen/no-state-in-server-components */

package/dist/esnext/foundation/ServerRequestProvider/ServerRequestProvider.d.ts

@@ -12,12 +12,12 @@ declare type RequestCacheResult<T> = {
     error?: never;
 } | {
     data?: never;
-    error: Response;
+    error: Response | Error;
 };
 /**
  * Returns data stored in the request cache.
  * It will throw the promise if data is not ready.
  */
-export declare function useRequestCacheData<T>(key: QueryKey, fetcher: () => Promise<T>): RequestCacheResult<T>;
+export declare function useRequestCacheData<T>(key: QueryKey, fetcher: () => T | Promise<T>): RequestCacheResult<T>;
 export declare function preloadRequestCacheData(request: ServerComponentRequest, preloadQueries?: PreloadQueriesByURL): void;
 export {};

package/dist/esnext/foundation/ServerRequestProvider/ServerRequestProvider.js

@@ -33,7 +33,7 @@ export function useServerRequest() {
     catch (_a) {
         // If RSC cache failed it means this is not an RSC request.
         // Try getting SSR context instead:
-        request = useContext(RequestContextSSR);
+        request = useContext(RequestContextSSR); // eslint-disable-line react-hooks/rules-of-hooks
     }
     if (!request) {
         // @ts-ignore
@@ -64,7 +64,12 @@ export function useRequestCacheData(key, fetcher) {
             }
             if (!promise) {
                 const startApiTime = getTime();
-                promise = fetcher().then((data) => {
+                const maybePromise = fetcher();
+                if (!(maybePromise instanceof Promise)) {
+                    result = { data: maybePromise };
+                    return result;
+                }
+                promise = maybePromise.then((data) => {
                     result = { data };
                     collectQueryTimings(request, key, 'resolved', getTime() - startApiTime);
                 }, (error) => (result = { error }));

package/dist/esnext/foundation/ServerStateProvider/ServerStateProvider.js

@@ -31,6 +31,8 @@ export function ServerStateProvider({ serverState, setServerState, children, })
         else {
             newValue = input;
         }
+        if (!newValue)
+            return { ...prev };
         if (__DEV__) {
             const privateProp = PRIVATE_PROPS.find((prop) => prop in newValue);
             if (privateProp) {
@@ -47,6 +49,11 @@ export function ServerStateProvider({ serverState, setServerState, children, })
         serverState,
         setServerState: setServerStateCallback,
         getProposedServerState: getProposedServerStateCallback,
-    }), [serverState, setServerStateCallback, pending]);
+    }), [
+        serverState,
+        getProposedServerStateCallback,
+        setServerStateCallback,
+        pending,
+    ]);
     return (React.createElement(ServerStateContext.Provider, { value: value }, children));
 }

package/dist/esnext/foundation/ShopifyProvider/ShopifyProvider.server.d.ts

@@ -6,4 +6,11 @@ export declare const SHOPIFY_PROVIDER_CONTEXT_KEY: unique symbol;
  * If you're using the Hydrogen framework, you don't need to add this provider
  * because it's automatically wrapped around your app in `renderHydrogen()`.
  */
-export declare function ShopifyProvider({ shopifyConfig, children, }: ShopifyProviderProps): JSX.Element;
+export declare function ShopifyProvider({ 
+/**
+ * Shopify connection information. Defaults to
+ * [the `shopify` property in the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
+ */
+shopifyConfig, 
+/** Any `ReactNode` elements. */
+children, }: ShopifyProviderProps): JSX.Element;

package/dist/esnext/foundation/ShopifyProvider/ShopifyProvider.server.js

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { ShopifyProviderClient } from './ShopifyProvider.client';
 import { DEFAULT_LOCALE } from '../constants';
-import { useServerRequest } from '../ServerRequestProvider';
+import { useRequestCacheData, useServerRequest } from '../ServerRequestProvider';
 function makeShopifyContext(shopifyConfig) {
     var _a, _b;
     const locale = (_a = shopifyConfig.defaultLocale) !== null && _a !== void 0 ? _a : DEFAULT_LOCALE;
@@ -21,12 +21,38 @@ export const SHOPIFY_PROVIDER_CONTEXT_KEY = Symbol.for('SHOPIFY_PROVIDER_RSC');
  * If you're using the Hydrogen framework, you don't need to add this provider
  * because it's automatically wrapped around your app in `renderHydrogen()`.
  */
-export function ShopifyProvider({ shopifyConfig, children, }) {
+export function ShopifyProvider({ 
+/**
+ * Shopify connection information. Defaults to
+ * [the `shopify` property in the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
+ */
+shopifyConfig, 
+/** Any `ReactNode` elements. */
+children, }) {
+    var _a;
+    const request = useServerRequest();
     if (!shopifyConfig) {
-        throw new Error('The `shopifyConfig` prop should be passed to `ShopifyProvider`');
+        shopifyConfig = (_a = request.ctx.hydrogenConfig) === null || _a === void 0 ? void 0 : _a.shopify;
+        if (!shopifyConfig) {
+            throw new Error('The `shopifyConfig` prop should be passed to `ShopifyProvider`');
+        }
     }
-    const shopifyProviderValue = useMemo(() => makeShopifyContext(shopifyConfig), [shopifyConfig]);
-    const request = useServerRequest();
+    let actualShopifyConfig;
+    if (typeof shopifyConfig === 'function') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        const result = useRequestCacheData(['hydrogen-shopify-config'], () => shopifyConfig(request));
+        if (result.error) {
+            if (result.error instanceof Error) {
+                throw result.error;
+            }
+            throw new Error(`Failed to load Shopify config: ${result.error.statusText}`);
+        }
+        actualShopifyConfig = result.data;
+    }
+    else {
+        actualShopifyConfig = shopifyConfig;
+    }
+    const shopifyProviderValue = useMemo(() => makeShopifyContext(actualShopifyConfig), [actualShopifyConfig]);
     request.ctx.shopifyConfig = shopifyProviderValue;
     return (React.createElement(ShopifyProviderClient, { shopifyConfig: shopifyProviderValue }, children));
 }

package/dist/esnext/foundation/ShopifyProvider/types.d.ts

@@ -1,14 +1,13 @@
 import type { CountryCode, LanguageCode } from '../../storefront-api-types';
 import type { ReactNode } from 'react';
-import type { ShopifyConfig } from '../../types';
+import type { ShopifyConfigFetcher, ShopifyConfig } from '../../types';
 export interface ShopifyContextValue extends Omit<ShopifyConfig, 'defaultLocale'> {
     locale: `${LanguageCode}-${CountryCode}`;
     languageCode: `${LanguageCode}`;
 }
 export declare type ShopifyProviderProps = {
-    /** The contents of the `shopify.config.js` file. */
-    shopifyConfig: ShopifyConfig;
+    /** Shopify connection information. Defaults to the `shopify` property in the `hydrogen.config.js` file. */
+    shopifyConfig?: ShopifyConfig | ShopifyConfigFetcher;
     /** Any `ReactNode` elements. */
     children?: ReactNode;
-    manager?: any;
 };

package/dist/esnext/foundation/fetchSync/client/fetchSync.js

@@ -1,3 +1,4 @@
+import { parseJSON } from '../../../utilities/parse';
 import { suspendFunction, preloadFunction } from '../../../utilities/suspense';
 /**
  * Fetch a URL for use in a client component Suspense boundary.
@@ -10,7 +11,7 @@ export function fetchSync(url, options) {
     });
     return {
         response,
-        json: () => JSON.parse(text),
+        json: () => parseJSON(text),
         text: () => text,
     };
 }

package/dist/esnext/foundation/fetchSync/server/fetchSync.js

@@ -1,3 +1,4 @@
+import { parseJSON } from '../../../utilities/parse';
 import { useQuery } from '../../useQuery/hooks';
 /**
  * The `fetchSync` hook makes third-party API requests and is the recommended way to make simple fetch calls on the server.
@@ -6,7 +7,8 @@ import { useQuery } from '../../useQuery/hooks';
  */
 export function fetchSync(url, options) {
     const { cache, preload, shouldCacheResponse, ...requestInit } = options !== null && options !== void 0 ? options : {};
-    const { data: useQueryResponse, error } = useQuery([url, requestInit], async () => {
+    const { data: useQueryResponse, error } = useQuery(// eslint-disable-line react-hooks/rules-of-hooks
+    [url, requestInit], async () => {
         const response = await globalThis.fetch(url, requestInit);
         const text = await response.text();
         return [text, response];
@@ -21,7 +23,7 @@ export function fetchSync(url, options) {
     const [data, response] = useQueryResponse;
     return {
         response,
-        json: () => JSON.parse(data),
+        json: () => parseJSON(data),
         text: () => data,
     };
 }

package/dist/esnext/foundation/ssr-interop.js

@@ -30,6 +30,6 @@ const reactContextType = Symbol.for('react.context');
 export function useEnvContext(serverGetter, clientFallback) {
     //@SSR if (META_ENV_SSR) return serverGetter(useServerRequest());
     return clientFallback && clientFallback.$$typeof === reactContextType
-        ? useContext(clientFallback)
+        ? useContext(clientFallback) // eslint-disable-line react-hooks/rules-of-hooks
         : clientFallback;
 }

package/dist/esnext/foundation/useQuery/hooks.d.ts

@@ -29,7 +29,7 @@ queryFn: () => Promise<T>,
 /** The options to manage the cache behavior of the sub-request. */
 queryOptions?: HydrogenUseQueryOptions): {
     data?: undefined;
-    error: Response;
+    error: Error | Response;
 } | {
     data: T;
     error?: undefined;

package/dist/esnext/foundation/useQuery/hooks.js

@@ -43,7 +43,7 @@ function cachedQueryFnBuilder(key, queryFn, queryOptions) {
     /**
      * Attempt to read the query from cache. If it doesn't exist or if it's stale, regenerate it.
      */
-    async function cachedQueryFn() {
+    async function useCachedQueryFn() {
         // Call this hook before running any async stuff
         // to prevent losing the current React cycle.
         const request = useServerRequest();
@@ -94,5 +94,5 @@ function cachedQueryFnBuilder(key, queryFn, queryOptions) {
         collectQueryCacheControlHeaders(request, key, generateSubRequestCacheControlHeader(resolvedQueryOptions === null || resolvedQueryOptions === void 0 ? void 0 : resolvedQueryOptions.cache));
         return newOutput;
     }
-    return cachedQueryFn;
+    return useCachedQueryFn;
 }

package/dist/esnext/foundation/useSession/useSession.d.ts

@@ -1,2 +1,2 @@
 /** The `useSession` hook reads session data in server components. */
-export declare const useSession: () => Record<string, string> | undefined;
+export declare const useSession: () => Record<string, string>;

package/dist/esnext/foundation/useSession/useSession.js

@@ -3,6 +3,6 @@ import { useServerRequest } from '../ServerRequestProvider';
 export const useSession = function () {
     var _a;
     const request = useServerRequest();
-    const session = (_a = request.ctx.session) === null || _a === void 0 ? void 0 : _a.get();
+    const session = ((_a = request.ctx.session) === null || _a === void 0 ? void 0 : _a.get()) || {};
     return session;
 };

package/dist/esnext/foundation/useShop/use-shop.d.ts

@@ -1,4 +1,6 @@
 /**
- * The `useShop` hook provides access to values within `shopify.config.js`. It must be a descendent of a `ShopifyProvider` component.
+ * The `useShop` hook provides access to values within
+ * [the `shopify` property in the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
+ * The `useShop` hook must be a descendent of a `ShopifyProvider` component.
  */
 export declare function useShop(): import("../ShopifyProvider/types").ShopifyContextValue;

package/dist/esnext/foundation/useShop/use-shop.js

@@ -1,7 +1,9 @@
 import { ShopifyContext } from '../ShopifyProvider';
 import { useEnvContext } from '../ssr-interop';
 /**
- * The `useShop` hook provides access to values within `shopify.config.js`. It must be a descendent of a `ShopifyProvider` component.
+ * The `useShop` hook provides access to values within
+ * [the `shopify` property in the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
+ * The `useShop` hook must be a descendent of a `ShopifyProvider` component.
  */
 export function useShop() {
     const config = useEnvContext((req) => req.ctx.shopifyConfig, ShopifyContext);

package/dist/esnext/foundation/useUrl/useUrl.js

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { RSC_PATHNAME } from '../../constants';
+import { parseJSON } from '../../utilities/parse';
 import { useLocation } from '../Router/BrowserRouter.client';
 import { useEnvContext, META_ENV_SSR } from '../ssr-interop';
 /**
@@ -8,9 +9,10 @@ import { useEnvContext, META_ENV_SSR } from '../ssr-interop';
 export function useUrl() {
     var _a, _b;
     if (META_ENV_SSR) {
-        const serverUrl = new URL(useEnvContext((req) => req.url));
+        const serverUrl = new URL(useEnvContext((req) => req.url) // eslint-disable-line react-hooks/rules-of-hooks
+        );
         if (serverUrl.pathname === RSC_PATHNAME) {
-            const state = JSON.parse(serverUrl.searchParams.get('state') || '{}');
+            const state = parseJSON(serverUrl.searchParams.get('state') || '{}');
             const parsedUrl = `${serverUrl.origin}${(_a = state.pathname) !== null && _a !== void 0 ? _a : ''}${(_b = state.search) !== null && _b !== void 0 ? _b : ''}`;
             return new URL(parsedUrl);
         }
@@ -20,6 +22,7 @@ export function useUrl() {
      * We return a `URL` object instead of passing through `location` because
      * the URL object contains important info like hostname, etc.
      */
-    const location = useLocation();
-    return useMemo(() => new URL(window.location.href), [location]);
+    const location = useLocation(); // eslint-disable-line react-hooks/rules-of-hooks
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useMemo(() => new URL(window.location.href), [location]); // eslint-disable-line react-hooks/exhaustive-deps
 }

package/dist/esnext/framework/Hydration/Html.js

@@ -1,6 +1,6 @@
 /// <reference types="vite/client" />
 import React from 'react';
-const HTML_ATTR_SEP_RE = /(?<!\=)"\s+/gim;
+const HTML_ATTR_SEP_RE = /(?<!=)"\s+/gim;
 const getHtmlAttrs = (template) => { var _a; return ((_a = template.match(/<html\s+([^>]+?)\s*>/s)) === null || _a === void 0 ? void 0 : _a[1]) || ''; };
 const getBodyAttrs = (template) => { var _a; return ((_a = template.match(/<body\s+([^>]+?)\s*>/s)) === null || _a === void 0 ? void 0 : _a[1]) || ''; };
 const REACT_ATTR_MAP = Object.create(null);

package/dist/esnext/framework/Hydration/ServerComponentRequest.server.d.ts

@@ -1,7 +1,7 @@
 import type { ShopifyContextValue } from '../../foundation/ShopifyProvider/types';
 import type { QueryCacheControlHeaders } from '../../utilities/log/log-cache-header';
 import type { QueryTiming } from '../../utilities/log/log-query-timeline';
-import type { PreloadOptions, QueryKey } from '../../types';
+import type { HydrogenConfig, PreloadOptions, QueryKey } from '../../types';
 import { HelmetData as HeadData } from 'react-helmet-async';
 import { SessionSyncApi } from '../../foundation/session/session';
 export declare type PreloadQueryEntry = {
@@ -27,10 +27,11 @@ export declare class ServerComponentRequest extends Request {
     cookies: Map<string, string>;
     id: string;
     time: number;
-    preloadURL: string;
+    normalizedUrl: string;
     ctx: {
         cache: Map<string, any>;
         head: HeadData;
+        hydrogenConfig?: HydrogenConfig;
         shopifyConfig?: ShopifyContextValue;
         queryCacheControl: Array<QueryCacheControlHeaders>;
         queryTimings: Array<QueryTiming>;

package/dist/esnext/framework/Hydration/ServerComponentRequest.server.js

@@ -2,6 +2,7 @@ import { getTime } from '../../utilities/timing';
 import { hashKey } from '../../utilities/hash';
 import { HelmetData as HeadData } from 'react-helmet-async';
 import { RSC_PATHNAME } from '../../constants';
+import { parseJSON } from '../../utilities/parse';
 let reqCounter = 0; // For debugging
 const generateId = typeof crypto !== 'undefined' &&
     // @ts-ignore
@@ -27,11 +28,11 @@ export class ServerComponentRequest extends Request {
         else {
             super(getUrlFromNodeRequest(input), getInitFromNodeRequest(input));
         }
-        const referer = this.headers.get('referer');
         this.time = getTime();
         this.id = generateId();
-        this.preloadURL =
-            this.isRscRequest() && referer && referer !== '' ? referer : this.url;
+        this.normalizedUrl = this.isRscRequest()
+            ? normalizeUrl(this.url)
+            : this.url;
         this.ctx = {
             cache: new Map(),
             head: new HeadData({}),
@@ -44,7 +45,7 @@ export class ServerComponentRequest extends Request {
             queryTimings: [],
             analyticsData: {
                 url: this.url,
-                normalizedRscUrl: this.preloadURL,
+                normalizedRscUrl: this.normalizedUrl,
             },
             preloadQueries: new Map(),
         };
@@ -71,9 +72,9 @@ export class ServerComponentRequest extends Request {
         }
     }
     getPreloadQueries() {
-        if (preloadCache.has(this.preloadURL)) {
+        if (preloadCache.has(this.normalizedUrl)) {
             const combinedPreloadQueries = new Map();
-            const urlPreloadCache = preloadCache.get(this.preloadURL);
+            const urlPreloadCache = preloadCache.get(this.normalizedUrl);
             mergeMapEntries(combinedPreloadQueries, urlPreloadCache);
             mergeMapEntries(combinedPreloadQueries, preloadCache.get(PRELOAD_ALL));
             return combinedPreloadQueries;
@@ -83,7 +84,7 @@ export class ServerComponentRequest extends Request {
         }
     }
     savePreloadQueries() {
-        preloadCache.set(this.preloadURL, this.ctx.preloadQueries);
+        preloadCache.set(this.normalizedUrl, this.ctx.preloadQueries);
     }
     /**
      * Buyer IP varies by hosting provider and runtime. The developer should provide this
@@ -135,3 +136,11 @@ function getInitFromNodeRequest(request) {
     }
     return init;
 }
+function normalizeUrl(rawUrl) {
+    var _a, _b;
+    const url = new URL(rawUrl);
+    const state = parseJSON((_a = url.searchParams.get('state')) !== null && _a !== void 0 ? _a : '');
+    const normalizedUrl = new URL((_b = state === null || state === void 0 ? void 0 : state.pathname) !== null && _b !== void 0 ? _b : '', url.origin);
+    normalizedUrl.search = state === null || state === void 0 ? void 0 : state.search;
+    return normalizedUrl.toString();
+}

package/dist/esnext/framework/Hydration/rsc.d.ts

@@ -1,6 +1,3 @@
-declare global {
-    var __flight: Array<string>;
-}
 /**
  * Much of this is borrowed from React's demo implementation:
  * @see https://github.com/reactjs/server-components-demo/blob/main/src/Cache.client.js

package/dist/esnext/framework/Hydration/rsc.js

@@ -7,26 +7,6 @@ import { createFromFetch, createFromReadableStream,
  } from '@shopify/hydrogen/vendor/react-server-dom-vite';
 import { RSC_PATHNAME } from '../../constants';
 let rscReader;
-if (globalThis.__flight && __flight.length > 0) {
-    const contentLoaded = new Promise((resolve) => document.addEventListener('DOMContentLoaded', resolve));
-    try {
-        rscReader = new ReadableStream({
-            start(controller) {
-                const encoder = new TextEncoder();
-                const write = (chunk) => {
-                    controller.enqueue(encoder.encode(chunk));
-                    return 0;
-                };
-                __flight.forEach(write);
-                __flight.push = write;
-                contentLoaded.then(() => controller.close());
-            },
-        });
-    }
-    catch (_) {
-        // Old browser, will try a new hydration request later
-    }
-}
 function createResponseCache() {
     return new Map();
 }

package/dist/esnext/framework/middleware.d.ts

@@ -4,15 +4,14 @@ import type { ViteDevServer } from 'vite';
 import type { ShopifyConfig } from '../types';
 declare type HydrogenMiddlewareArgs = {
     dev?: boolean;
-    shopifyConfig?: ShopifyConfig;
     indexTemplate: string | ((url: string) => Promise<string>);
     getServerEntrypoint: () => any;
     devServer?: ViteDevServer;
     cache?: Cache;
 };
-export declare function graphiqlMiddleware({ shopifyConfig, dev, }: {
-    shopifyConfig: ShopifyConfig;
-    dev: boolean;
+export declare function graphiqlMiddleware({ getShopifyConfig, dev, }: {
+    getShopifyConfig: (request: IncomingMessage) => ShopifyConfig | Promise<ShopifyConfig>;
+    dev?: boolean;
 }): (request: IncomingMessage, response: ServerResponse, next: NextFunction) => Promise<void>;
 /**
  * Provides middleware to Node.js Express-like servers. Used by the Hydrogen