@shopify/hydrogen 1.0.0-alpha.22 → 1.0.0

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

@@ -0,0 +1,16 @@
+import type { ShopifyProviderProps } from './types';
+export declare const SHOPIFY_PROVIDER_CONTEXT_KEY: unique symbol;
+/**
+ * The `ShopifyProvider` component wraps your entire app and provides support for hooks.
+ * You should place it in your app's entry point component. For example, `<App>`.
+ * 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({ 
+/**
+ * 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

@@ -0,0 +1,60 @@
+import React, { useMemo } from 'react';
+import { ShopifyProviderClient } from './ShopifyProvider.client';
+import { DEFAULT_COUNTRY, DEFAULT_LANGUAGE } from '../constants';
+import { useRequestCacheData, useServerRequest } from '../ServerRequestProvider';
+import { getOxygenVariable } from '../../utilities/storefrontApi';
+import { SHOPIFY_STOREFRONT_ID_VARIABLE } from '../../constants';
+function makeShopifyContext(shopifyConfig) {
+    const countryCode = shopifyConfig.defaultCountryCode ?? DEFAULT_COUNTRY;
+    const languageCode = shopifyConfig.defaultLanguageCode ?? DEFAULT_LANGUAGE;
+    const storefrontId = getOxygenVariable(SHOPIFY_STOREFRONT_ID_VARIABLE);
+    return {
+        defaultCountryCode: countryCode.toUpperCase(),
+        defaultLanguageCode: languageCode.toUpperCase(),
+        storeDomain: shopifyConfig?.storeDomain?.replace(/^https?:\/\//, ''),
+        storefrontToken: shopifyConfig.storefrontToken,
+        storefrontApiVersion: shopifyConfig.storefrontApiVersion,
+        multipassSecret: shopifyConfig.multipassSecret,
+        storefrontId,
+    };
+}
+export const SHOPIFY_PROVIDER_CONTEXT_KEY = Symbol.for('SHOPIFY_PROVIDER_RSC');
+/**
+ * The `ShopifyProvider` component wraps your entire app and provides support for hooks.
+ * You should place it in your app's entry point component. For example, `<App>`.
+ * 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({ 
+/**
+ * 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, }) {
+    const request = useServerRequest();
+    if (!shopifyConfig) {
+        shopifyConfig = request.ctx.hydrogenConfig?.shopify;
+        if (!shopifyConfig) {
+            throw new Error('The `shopifyConfig` prop should be passed to `ShopifyProvider`');
+        }
+    }
+    let actualShopifyConfig;
+    if (typeof shopifyConfig === 'function') {
+        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/index.d.ts

@@ -1,2 +1 @@
-export { ShopifyProvider, DEFAULT_API_VERSION } from './ShopifyProvider';
-export { useShop } from './hooks';
+export { ShopifyContext } from './ShopifyProvider.client';

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

@@ -1,2 +1 @@
-export { ShopifyProvider, DEFAULT_API_VERSION } from './ShopifyProvider';
-export { useShop } from './hooks';
+export { ShopifyContext } from './ShopifyProvider.client';

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

@@ -1,12 +1,14 @@
-import type { QueryClient } from 'react-query';
-import { ShopifyConfig } from '../../types';
-export declare type ShopifyProviderValue = ShopifyConfig;
+import type { CountryCode, LanguageCode } from '../../storefront-api-types';
+import type { ReactNode } from 'react';
+import type { ShopifyConfigFetcher, ShopifyConfig } from '../../types';
+export interface ShopifyContextValue extends Omit<ShopifyConfig, 'defaultLanguageCode' | 'defaultCountryCode'> {
+    defaultLanguageCode: `${LanguageCode}`;
+    defaultCountryCode: `${CountryCode}`;
+    storefrontId: string | null;
+}
 export declare type ShopifyProviderProps = {
-    shopifyConfig: ShopifyConfig;
-    children?: React.ReactNode;
-    manager?: any;
+    /** Shopify connection information. Defaults to the `shopify` property in the `hydrogen.config.js` file. */
+    shopifyConfig?: ShopifyConfig | ShopifyConfigFetcher;
+    /** Any `ReactNode` elements. */
+    children?: ReactNode;
 };
-export interface ReactQueryHydrationContext {
-    queryClient?: QueryClient;
-    dehydratedState?: any;
-}

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

@@ -0,0 +1,2 @@
+export declare const DEFAULT_COUNTRY = "US";
+export declare const DEFAULT_LANGUAGE = "EN";

package/dist/esnext/foundation/constants.js

@@ -0,0 +1,4 @@
+// Note: do not mix this export with other app-only logic
+// to avoid importing unnecessary code in the plugins.
+export const DEFAULT_COUNTRY = 'US';
+export const DEFAULT_LANGUAGE = 'EN';

package/dist/esnext/foundation/fetchSync/client/fetchSync.d.ts

@@ -0,0 +1,10 @@
+import type { FetchResponse } from '../types';
+/**
+ * Fetch a URL for use in a client component Suspense boundary.
+ */
+export declare function fetchSync(url: string, options?: RequestInit): FetchResponse;
+/**
+ * Preload a URL for use in  a client component Suspense boundary.
+ * Useful for placing higher in the tree to avoid waterfalls.
+ */
+export declare function preload(url: string, options?: RequestInit): void;

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

@@ -0,0 +1,28 @@
+import { parseJSON } from '../../../utilities/parse';
+import { suspendFunction, preloadFunction } from '../../../utilities/suspense';
+/**
+ * Fetch a URL for use in a client component Suspense boundary.
+ */
+export function fetchSync(url, options) {
+    const [text, response] = suspendFunction([url, options], async () => {
+        const response = await globalThis.fetch(url, options);
+        const text = await response.text();
+        return [text, response];
+    });
+    return {
+        response,
+        json: () => parseJSON(text),
+        text: () => text,
+    };
+}
+/**
+ * Preload a URL for use in  a client component Suspense boundary.
+ * Useful for placing higher in the tree to avoid waterfalls.
+ */
+export function preload(url, options) {
+    preloadFunction([url, options], async () => {
+        const response = await globalThis.fetch(url, options);
+        const text = await response.text();
+        return [text, response];
+    });
+}

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

@@ -0,0 +1,8 @@
+import { type HydrogenUseQueryOptions } from '../../useQuery/hooks';
+import type { FetchResponse } from '../types';
+/**
+ * The `fetchSync` hook makes API requests and is the recommended way to make simple fetch calls on the server and the client.
+ * It's designed similar to the [Web API's `fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch), only in a way
+ * that supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html).
+ */
+export declare function fetchSync(url: string, options?: Omit<RequestInit, 'cache'> & HydrogenUseQueryOptions): FetchResponse;

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

@@ -0,0 +1,29 @@
+import { parseJSON } from '../../../utilities/parse';
+import { useQuery } from '../../useQuery/hooks';
+/**
+ * The `fetchSync` hook makes API requests and is the recommended way to make simple fetch calls on the server and the client.
+ * It's designed similar to the [Web API's `fetch`](https://developer.mozilla.org/en-US/docs/Web/API/fetch), only in a way
+ * that supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html).
+ */
+export function fetchSync(url, options) {
+    const { cache, preload, shouldCacheResponse, ...requestInit } = options ?? {};
+    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];
+    }, {
+        cache,
+        preload,
+        shouldCacheResponse,
+    });
+    if (error) {
+        throw error;
+    }
+    const [data, response] = useQueryResponse;
+    return {
+        response,
+        json: () => parseJSON(data),
+        text: () => data,
+    };
+}

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

@@ -0,0 +1,5 @@
+export interface FetchResponse {
+    response: Response;
+    json: () => any;
+    text: () => any;
+}

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

@@ -1,4 +1,3 @@
-export { ShopifyProvider, useShop, DEFAULT_API_VERSION } from './ShopifyProvider';
-export { ShopifyServerProvider } from './ShopifyProvider/ShopifyServerProvider.server';
-export { DefaultRoutes } from './Router';
-export { ClientMarker } from './ClientMarker';
+export { ServerPropsProvider, ServerPropsContext, type ServerProps, type ServerPropsContextValue, } from './ServerPropsProvider';
+export { useShop } from './useShop';
+export { useUrl } from './useUrl';

package/dist/esnext/foundation/index.js

@@ -1,4 +1,3 @@
-export { ShopifyProvider, useShop, DEFAULT_API_VERSION } from './ShopifyProvider';
-export { ShopifyServerProvider } from './ShopifyProvider/ShopifyServerProvider.server';
-export { DefaultRoutes } from './Router';
-export { ClientMarker } from './ClientMarker';
+export { ServerPropsProvider, ServerPropsContext, } from './ServerPropsProvider';
+export { useShop } from './useShop';
+export { useUrl } from './useUrl';

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

@@ -0,0 +1,2 @@
+export declare function setCache(cache?: Cache): void;
+export declare function getCache(): Cache | undefined;

package/dist/esnext/foundation/runtime.js

@@ -0,0 +1,6 @@
+export function setCache(cache) {
+    globalThis.__cache = cache;
+}
+export function getCache() {
+    return globalThis.__cache;
+}

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

@@ -0,0 +1,27 @@
+import { Logger } from '../../utilities/log';
+import type { HydrogenResponse } from '../HydrogenResponse/HydrogenResponse.server';
+import type { HydrogenRequest } from '../HydrogenRequest/HydrogenRequest.server';
+export declare type SessionSyncApi = {
+    get: () => Record<string, string>;
+};
+export declare type SessionApi = {
+    get: () => Promise<Record<string, string>>;
+    set: (key: string, value: string) => Promise<void>;
+    destroy: () => Promise<void>;
+};
+export declare type SessionStorageAdapter = {
+    get: (request: Request) => Promise<Record<string, string>>;
+    set: (request: Request, value: Record<string, string>) => Promise<string>;
+    destroy: (request: Request) => Promise<string>;
+};
+export declare function getSyncSessionApi(request: HydrogenRequest, componentResponse: HydrogenResponse, log: Logger, session?: SessionStorageAdapter): {
+    get(): any;
+};
+export declare const emptySessionImplementation: (log: Logger) => {
+    get(): Promise<{}>;
+    set(key: string, value: string): Promise<void>;
+    destroy(): Promise<void>;
+};
+export declare const emptySyncSessionImplementation: (log: Logger) => {
+    get(): {};
+};

package/dist/esnext/foundation/session/session.js

@@ -0,0 +1,37 @@
+import { wrapPromise } from '../../utilities/suspense';
+export function getSyncSessionApi(request, componentResponse, log, session) {
+    const sessionPromises = {};
+    return session
+        ? {
+            get() {
+                if (!sessionPromises.getPromise) {
+                    sessionPromises.getPromise = wrapPromise(session.get(request));
+                }
+                return sessionPromises.getPromise.read();
+            },
+        }
+        : emptySyncSessionImplementation(log);
+}
+export const emptySessionImplementation = function (log) {
+    return {
+        async get() {
+            log.warn('No session adapter has been configured!');
+            return {};
+        },
+        async set(key, value) {
+            log.warn('No session adapter has been configured!');
+        },
+        async destroy() {
+            log.warn('No session adapter has been configured!');
+            return;
+        },
+    };
+};
+export const emptySyncSessionImplementation = function (log) {
+    return {
+        get() {
+            log.warn('No session adapter has been configured!');
+            return {};
+        },
+    };
+};

package/dist/esnext/foundation/ssr-interop.d.ts

@@ -0,0 +1,29 @@
+/**
+ * This file is used for compatibility between browser and server environments.
+ * The browser loads this file as is, without leaking server logic.
+ * In the server, this file is transformed by Vite to inject server logic.
+ * NOTE: Do not remove SSR-prefixed comments in this file.
+ */
+import type { HydrogenRequest } from './HydrogenRequest/HydrogenRequest.server';
+export declare const META_ENV_SSR = false;
+declare type ServerGetter<T> = (request: HydrogenRequest) => T;
+/**
+ * Isomorphic hook to access context data. It gives access to the current request
+ * when running on the server, and returns the provided client fallback in the browser.
+ * This can be used in server components (RSC) as a Context/Provider replacement. In client
+ * components, it uses the server getter in SSR and the client fallback in the browser.
+ * @param serverGetter - A function that gets the current server request and returns any
+ * desired request property. It only runs in the server (both in RSC and SSR).
+ * @param clientFallback - An optional raw value or a React.Context to be consumed that will be
+ * returned if the current environment is not the server. Note that, if this is a React.Context,
+ * there must be a React.Provider parent in the app tree.
+ * @returns A value retrieved from the current server request or a fallback value in the client.
+ * The returned type depends on what the server getter returns.
+ * @example
+ * ```js
+ * import {MyClientContext} from './my-client-react-context-provider';
+ * useEnvContext(req => req.ctx.myServerContext, MyClientContext)
+ * ```
+ */
+export declare function useEnvContext<T>(serverGetter: ServerGetter<T>, clientFallback?: any): T;
+export {};

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

@@ -0,0 +1,35 @@
+/**
+ * This file is used for compatibility between browser and server environments.
+ * The browser loads this file as is, without leaking server logic.
+ * In the server, this file is transformed by Vite to inject server logic.
+ * NOTE: Do not remove SSR-prefixed comments in this file.
+ */
+import { useContext } from 'react';
+//@SSR import {useServerRequest} from './ServerRequestProvider';
+// This is replaced by Vite to import.meta.env.SSR
+export const META_ENV_SSR = false;
+const reactContextType = Symbol.for('react.context');
+/**
+ * Isomorphic hook to access context data. It gives access to the current request
+ * when running on the server, and returns the provided client fallback in the browser.
+ * This can be used in server components (RSC) as a Context/Provider replacement. In client
+ * components, it uses the server getter in SSR and the client fallback in the browser.
+ * @param serverGetter - A function that gets the current server request and returns any
+ * desired request property. It only runs in the server (both in RSC and SSR).
+ * @param clientFallback - An optional raw value or a React.Context to be consumed that will be
+ * returned if the current environment is not the server. Note that, if this is a React.Context,
+ * there must be a React.Provider parent in the app tree.
+ * @returns A value retrieved from the current server request or a fallback value in the client.
+ * The returned type depends on what the server getter returns.
+ * @example
+ * ```js
+ * import {MyClientContext} from './my-client-react-context-provider';
+ * useEnvContext(req => req.ctx.myServerContext, MyClientContext)
+ * ```
+ */
+export function useEnvContext(serverGetter, clientFallback) {
+    //@SSR if (META_ENV_SSR) return serverGetter(useServerRequest());
+    return clientFallback && clientFallback.$$typeof === reactContextType
+        ? useContext(clientFallback) // eslint-disable-line react-hooks/rules-of-hooks
+        : clientFallback;
+}

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

@@ -0,0 +1,17 @@
+declare type NavigationOptions = {
+    /** Whether to update the state object or URL of the current history entry. Defaults to false. */
+    replace?: boolean;
+    /** Whether to reload the whole document on navigation. */
+    reloadDocument?: boolean;
+    /** The custom client state with the navigation. */
+    clientState?: any;
+    /** Whether to emulate natural browser behavior and restore scroll position on navigation. Defaults to true. */
+    scroll?: any;
+    basePath?: string;
+};
+/**
+ * The useNavigate hook imperatively navigates between routes.
+ */
+export declare function useNavigate(): (path: string, options?: NavigationOptions) => void;
+export declare function buildPath(basePath: string, path: string): string;
+export {};

package/dist/esnext/foundation/useNavigate/useNavigate.js

@@ -0,0 +1,39 @@
+import { useRouter } from '../Router/BrowserRouter.client';
+import { useBasePath } from '../useRouteParams/RouteParamsProvider.client';
+/**
+ * The useNavigate hook imperatively navigates between routes.
+ */
+export function useNavigate() {
+    const router = useRouter();
+    const routeBasePath = useBasePath();
+    return (path, options = { replace: false, reloadDocument: false }) => {
+        path = buildPath(options.basePath ?? routeBasePath, path);
+        const state = {
+            ...options?.clientState,
+            scroll: options?.scroll ?? true,
+        };
+        // @todo wait for RSC and then change focus for a11y?
+        if (options?.replace) {
+            router.history.replace(path, state);
+        }
+        else {
+            router.history.push(path, state);
+        }
+    };
+}
+export function buildPath(basePath, path) {
+    if (path.startsWith('http') || path.startsWith('//'))
+        return path;
+    let builtPath = path;
+    if (basePath !== '/') {
+        const pathFirstChar = path.charAt(0);
+        const basePathLastChar = basePath.charAt(basePath.length - 1);
+        builtPath =
+            pathFirstChar === '/' && basePathLastChar === '/'
+                ? basePath + path.substring(1)
+                : basePathLastChar !== '/' && pathFirstChar !== '/'
+                    ? basePath + '/' + path
+                    : basePath + path;
+    }
+    return builtPath;
+}

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

@@ -0,0 +1,37 @@
+import type { CachingStrategy, PreloadOptions, QueryKey } from '../../types';
+export interface HydrogenUseQueryOptions {
+    /** The [caching strategy](https://shopify.dev/custom-storefronts/hydrogen/framework/cache#caching-strategies) to help you
+     * determine which cache control header to set.
+     */
+    cache?: CachingStrategy;
+    /** Whether to [preload the query](https://shopify.dev/custom-storefronts/hydrogen/framework/preloaded-queries).
+     * Defaults to `false`. Specify `true` to preload the query for the URL or `'*'`
+     * to preload the query for all requests.
+     */
+    preload?: PreloadOptions;
+    /** A function that inspects the response body to determine if it should be cached.
+     */
+    shouldCacheResponse?: (body: any) => boolean;
+}
+/**
+ * The `useQuery` hook executes an asynchronous operation like `fetch` in a way that
+ * supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). You can use this
+ * hook to call any third-party APIs from a server component.
+ *
+ * \> Note:
+ * \> If you're making a simple fetch call on the server, then we recommend using the [`fetchSync`](https://shopify.dev/api/hydrogen/hooks/global/fetchsync) hook instead.
+ */
+export declare function useQuery<T>(
+/** A string or array to uniquely identify the current query. */
+key: QueryKey, 
+/** An asynchronous query function like `fetch` which returns data. */
+queryFn: () => Promise<T>, 
+/** The options to manage the cache behavior of the sub-request. */
+queryOptions?: HydrogenUseQueryOptions): {
+    data?: undefined;
+    error: Error | Response;
+} | {
+    data: T;
+    error?: undefined;
+};
+export declare function shouldPreloadQuery(queryOptions?: HydrogenUseQueryOptions): boolean;

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

@@ -0,0 +1,105 @@
+import { getLoggerWithContext, collectQueryCacheControlHeaders, collectQueryTimings, } from '../../utilities/log';
+import { deleteItemFromCache, generateSubRequestCacheControlHeader, getItemFromCache, isStale, setItemInCache, } from '../Cache/cache-sub-request';
+import { useRequestCacheData, useServerRequest } from '../ServerRequestProvider';
+import { CacheShort, NO_STORE } from '../Cache/strategies';
+/**
+ * The `useQuery` hook executes an asynchronous operation like `fetch` in a way that
+ * supports [Suspense](https://reactjs.org/docs/concurrent-mode-suspense.html). You can use this
+ * hook to call any third-party APIs from a server component.
+ *
+ * \> Note:
+ * \> If you're making a simple fetch call on the server, then we recommend using the [`fetchSync`](https://shopify.dev/api/hydrogen/hooks/global/fetchsync) hook instead.
+ */
+export function useQuery(
+/** A string or array to uniquely identify the current query. */
+key, 
+/** An asynchronous query function like `fetch` which returns data. */
+queryFn, 
+/** The options to manage the cache behavior of the sub-request. */
+queryOptions) {
+    const request = useServerRequest();
+    const withCacheIdKey = [
+        '__QUERY_CACHE_ID__',
+        ...(typeof key === 'string' ? [key] : key),
+    ];
+    const fetcher = cachedQueryFnBuilder(withCacheIdKey, queryFn, queryOptions);
+    collectQueryTimings(request, withCacheIdKey, 'requested');
+    if (shouldPreloadQuery(queryOptions)) {
+        request.savePreloadQuery({
+            preload: queryOptions?.preload,
+            key: withCacheIdKey,
+            fetcher,
+        });
+    }
+    return useRequestCacheData(withCacheIdKey, fetcher);
+}
+export function shouldPreloadQuery(queryOptions) {
+    if (!queryOptions)
+        return true;
+    const hasCacheOverride = typeof queryOptions?.cache?.mode !== 'undefined';
+    const hasPreloadOverride = typeof queryOptions?.preload !== 'undefined';
+    const cacheValue = queryOptions?.cache?.mode;
+    const preloadValue = queryOptions?.preload;
+    // If preload is explicitly defined, then it takes precedence
+    if (hasPreloadOverride) {
+        return !!preloadValue;
+    }
+    return hasCacheOverride ? cacheValue !== NO_STORE : true;
+}
+function cachedQueryFnBuilder(key, generateNewOutput, queryOptions) {
+    const resolvedQueryOptions = {
+        ...(queryOptions ?? {}),
+    };
+    const shouldCacheResponse = queryOptions?.shouldCacheResponse ?? (() => true);
+    /**
+     * Attempt to read the query from cache. If it doesn't exist or if it's stale, regenerate it.
+     */
+    async function useCachedQueryFn(request) {
+        const log = getLoggerWithContext(request);
+        const cacheResponse = await getItemFromCache(key);
+        if (cacheResponse) {
+            const [output, response] = cacheResponse;
+            collectQueryCacheControlHeaders(request, key, response.headers.get('cache-control'));
+            /**
+             * Important: Do this async
+             */
+            if (isStale(key, response)) {
+                const lockKey = ['lock', ...(typeof key === 'string' ? [key] : key)];
+                // Run revalidation asynchronously
+                const revalidatingPromise = getItemFromCache(lockKey).then(async (lockExists) => {
+                    if (lockExists)
+                        return;
+                    await setItemInCache(lockKey, true, CacheShort({
+                        maxAge: 10,
+                    }));
+                    try {
+                        const output = await generateNewOutput();
+                        if (shouldCacheResponse(output)) {
+                            await setItemInCache(key, output, resolvedQueryOptions?.cache);
+                        }
+                    }
+                    catch (e) {
+                        log.error(`Error generating async response: ${e.message}`);
+                    }
+                    finally {
+                        await deleteItemFromCache(lockKey);
+                    }
+                });
+                // Asynchronously wait for it in workers
+                request.ctx.runtime?.waitUntil?.(revalidatingPromise);
+            }
+            return output;
+        }
+        const newOutput = await generateNewOutput();
+        /**
+         * Important: Do this async
+         */
+        if (shouldCacheResponse(newOutput)) {
+            const setItemInCachePromise = setItemInCache(key, newOutput, resolvedQueryOptions?.cache);
+            request.ctx.runtime?.waitUntil?.(setItemInCachePromise);
+        }
+        collectQueryCacheControlHeaders(request, key, generateSubRequestCacheControlHeader(resolvedQueryOptions?.cache));
+        return newOutput;
+    }
+    return useCachedQueryFn;
+}

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

@@ -0,0 +1 @@
+export { useQuery } from './hooks';

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

@@ -0,0 +1 @@
+export { useQuery } from './hooks';

package/dist/esnext/foundation/useRequestContext/index.d.ts

@@ -0,0 +1,15 @@
+declare type ScopedContext = Record<string, any>;
+/**
+ * Provides access to the current request context.
+ * @param scope - An optional string used to scope the request context. It is recommended to
+ * prevent modifying the properties added by other plugins.
+ * @returns A request-scoped object that can be modified to provide and consume information
+ * across different React components in the tree.
+ * @example
+ * ```js
+ * import {useRequestContext} from '@shopify/hydrogen';
+ * useRequestContext('my-plugin-name');
+ * ```
+ */
+export declare function useRequestContext<T extends ScopedContext>(scope?: string): T;
+export {};

package/dist/esnext/foundation/useRequestContext/index.js

@@ -0,0 +1,23 @@
+import { META_ENV_SSR, useEnvContext } from '../ssr-interop';
+/**
+ * Provides access to the current request context.
+ * @param scope - An optional string used to scope the request context. It is recommended to
+ * prevent modifying the properties added by other plugins.
+ * @returns A request-scoped object that can be modified to provide and consume information
+ * across different React components in the tree.
+ * @example
+ * ```js
+ * import {useRequestContext} from '@shopify/hydrogen';
+ * useRequestContext('my-plugin-name');
+ * ```
+ */
+export function useRequestContext(scope = 'default') {
+    if (__HYDROGEN_DEV__ && !META_ENV_SSR) {
+        throw new Error('useRequestContext can only be used in the server');
+    }
+    const scopes = useEnvContext((req) => req.ctx.scopes);
+    if (!scopes.has(scope)) {
+        scopes.set(scope, Object.create(null));
+    }
+    return scopes.get(scope);
+}

package/dist/esnext/foundation/useRouteParams/RouteParamsProvider.client.d.ts

@@ -0,0 +1,13 @@
+import React, { FC, ReactNode } from 'react';
+declare type RouteParamsContextValue = {
+    routeParams: Record<string, string>;
+    basePath: string;
+};
+export declare const RouteParamsContext: React.Context<RouteParamsContextValue>;
+export declare const RouteParamsProvider: FC<{
+    routeParams: Record<string, string>;
+    basePath: string;
+    children: ReactNode;
+}>;
+export declare function useBasePath(): string;
+export {};