@shopify/hydrogen 0.0.0-experimental-20220526194818

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

@@ -0,0 +1,128 @@
+import React, { createContext, useContext } from 'react';
+import { getTime } from '../../utilities/timing';
+import { hashKey } from '../../utilities/hash';
+import { collectQueryTimings } from '../../utilities/log';
+// Context to inject current request in SSR
+const RequestContextSSR = createContext(null);
+// Cache to inject current request in RSC
+function requestCacheRSC() {
+    return new Map();
+}
+requestCacheRSC.key = Symbol.for('HYDROGEN_REQUEST');
+// Note: use this only during RSC/Flight rendering. The React dispatcher
+// for SSR/Fizz rendering does not implement getCacheForType.
+function getCacheForType(resource) {
+    var _a;
+    const dispatcher = 
+    // @ts-ignore
+    React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+        .ReactCurrentDispatcher.current;
+    // @ts-ignore
+    if (__DEV__ && typeof jest !== 'undefined' && !dispatcher.getCacheForType) {
+        // Jest does not have access to the RSC runtime, mock it here:
+        // @ts-ignore
+        return ((_a = globalThis.__jestRscCache) !== null && _a !== void 0 ? _a : (globalThis.__jestRscCache = resource()));
+    }
+    return dispatcher.getCacheForType(resource);
+}
+export function ServerRequestProvider({ isRSC, request, children, }) {
+    if (isRSC) {
+        // Save the request object in a React cache that is
+        // scoped to this current rendering.
+        const requestCache = getCacheForType(requestCacheRSC);
+        requestCache.set(requestCacheRSC.key, request);
+        return children;
+    }
+    // Use a normal provider in SSR to make the request object
+    // available in the current rendering.
+    return (React.createElement(RequestContextSSR.Provider, { value: request }, children));
+}
+export function useServerRequest() {
+    let request;
+    try {
+        // This cache only works during RSC rendering:
+        // @ts-ignore
+        const cache = getCacheForType(requestCacheRSC);
+        request = cache ? cache.get(requestCacheRSC.key) : null;
+    }
+    catch (_a) {
+        // If RSC cache failed it means this is not an RSC request.
+        // Try getting SSR context instead:
+        request = useContext(RequestContextSSR); // eslint-disable-line react-hooks/rules-of-hooks
+    }
+    if (!request) {
+        // @ts-ignore
+        if (__DEV__ && typeof jest !== 'undefined') {
+            // Unit tests are not wrapped in ServerRequestProvider.
+            // This mocks it, instead of providing it in every test.
+            return { ctx: {} };
+        }
+        throw new Error('No ServerRequest Context found');
+    }
+    return request;
+}
+/**
+ * Returns data stored in the request cache.
+ * It will throw the promise if data is not ready.
+ */
+export function useRequestCacheData(key, fetcher) {
+    const request = useServerRequest();
+    const cache = request.ctx.cache;
+    const cacheKey = hashKey(key);
+    if (!cache.has(cacheKey)) {
+        let result;
+        let promise;
+        cache.set(cacheKey, () => {
+            if (result !== undefined) {
+                collectQueryTimings(request, key, 'rendered');
+                return result;
+            }
+            if (!promise) {
+                const startApiTime = getTime();
+                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 }));
+            }
+            throw promise;
+        });
+    }
+    // Making sure the promise has returned data because it can be initated by a preload request,
+    // otherwise, we throw the promise
+    const result = cache.get(cacheKey).call();
+    if (result instanceof Promise)
+        throw result;
+    return result;
+}
+export function preloadRequestCacheData(request, preloadQueries) {
+    const cache = request.ctx.cache;
+    preloadQueries === null || preloadQueries === void 0 ? void 0 : preloadQueries.forEach((preloadQuery, cacheKey) => {
+        collectQueryTimings(request, preloadQuery.key, 'preload');
+        if (!cache.has(cacheKey)) {
+            let result;
+            let promise;
+            cache.set(cacheKey, () => {
+                if (result !== undefined) {
+                    collectQueryTimings(request, preloadQuery.key, 'rendered');
+                    return result;
+                }
+                if (!promise) {
+                    const startApiTime = getTime();
+                    promise = preloadQuery.fetcher().then((data) => {
+                        result = { data };
+                        collectQueryTimings(request, preloadQuery.key, 'resolved', getTime() - startApiTime);
+                    }, (error) => {
+                        result = { error };
+                    });
+                }
+                return promise;
+            });
+        }
+        cache.get(cacheKey).call();
+    });
+}

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

@@ -0,0 +1 @@
+export * from './ServerRequestProvider';

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

@@ -0,0 +1 @@
+export * from './ServerRequestProvider';

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

@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+declare global {
+    var __DEV__: boolean;
+}
+export interface ServerState {
+    pathname: string;
+    search: string;
+    [key: string]: any;
+}
+declare type ServerStateSetterInput = ((prev: ServerState) => Partial<ServerState>) | Partial<ServerState> | string;
+export interface ServerStateSetter {
+    (input: ServerStateSetterInput, propValue?: any): void;
+}
+interface ProposedServerStateSetter {
+    (input: ServerStateSetterInput, propValue?: any): ServerState;
+}
+export interface ServerStateContextValue {
+    pending: boolean;
+    serverState: ServerState;
+    setServerState: ServerStateSetter;
+    getProposedServerState: ProposedServerStateSetter;
+}
+export declare const ServerStateContext: React.Context<ServerStateContextValue>;
+interface ServerStateProviderProps {
+    serverState: ServerState;
+    setServerState: React.Dispatch<React.SetStateAction<ServerState>>;
+    children: ReactNode;
+}
+export declare function ServerStateProvider({ serverState, setServerState, children, }: ServerStateProviderProps): JSX.Element;
+export {};

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

@@ -0,0 +1,59 @@
+import React, { createContext, useMemo, useCallback, 
+// @ts-ignore
+useTransition, } from 'react';
+const PRIVATE_PROPS = ['request', 'response'];
+export const ServerStateContext = createContext(null);
+export function ServerStateProvider({ serverState, setServerState, children, }) {
+    const [pending, startTransition] = useTransition();
+    const setServerStateCallback = useCallback((input, propValue) => {
+        /**
+         * By wrapping this state change in a transition, React renders the new state
+         * concurrently in a new "tree" instead of Suspending and showing the (blank)
+         * fallback. This is preferred behavior, though we may want to revisit how
+         * we make this decision globally for the developer - and consider providing
+         * the `pending` flag also provided by the hook to display in the UI.
+         */
+        startTransition(() => {
+            return setServerState((prev) => getNewServerState(prev, input, propValue));
+        });
+    }, [setServerState, startTransition]);
+    const getProposedServerStateCallback = useCallback((input, propValue) => {
+        return getNewServerState(serverState, input, propValue);
+    }, [serverState]);
+    function getNewServerState(prev, input, propValue) {
+        let newValue;
+        if (typeof input === 'function') {
+            newValue = input(prev);
+        }
+        else if (typeof input === 'string') {
+            newValue = { [input]: propValue };
+        }
+        else {
+            newValue = input;
+        }
+        if (!newValue)
+            return { ...prev };
+        if (__DEV__) {
+            const privateProp = PRIVATE_PROPS.find((prop) => prop in newValue);
+            if (privateProp) {
+                console.warn(`Custom "${privateProp}" property in server state is ignored. Use a different name.`);
+            }
+        }
+        return {
+            ...prev,
+            ...newValue,
+        };
+    }
+    const value = useMemo(() => ({
+        pending,
+        serverState,
+        setServerState: setServerStateCallback,
+        getProposedServerState: getProposedServerStateCallback,
+    }), [
+        serverState,
+        getProposedServerStateCallback,
+        setServerStateCallback,
+        pending,
+    ]);
+    return (React.createElement(ServerStateContext.Provider, { value: value }, children));
+}

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

@@ -0,0 +1,7 @@
+import type { ShopifyContextValue } from './types';
+import React, { ReactNode } from 'react';
+export declare const ShopifyContext: React.Context<ShopifyContextValue | null>;
+export declare function ShopifyProviderClient({ children, shopifyConfig, }: {
+    children: ReactNode;
+    shopifyConfig: ShopifyContextValue;
+}): JSX.Element;

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

@@ -0,0 +1,8 @@
+import React, { createContext } from 'react';
+export const ShopifyContext = createContext(null);
+export function ShopifyProviderClient({ children, shopifyConfig, }) {
+    if (!shopifyConfig) {
+        throw new Error('The `shopifyConfig` prop should be passed to `ShopifyProvider`');
+    }
+    return (React.createElement(ShopifyContext.Provider, { value: shopifyConfig }, children));
+}

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,58 @@
+import React, { useMemo } from 'react';
+import { ShopifyProviderClient } from './ShopifyProvider.client';
+import { DEFAULT_LOCALE } from '../constants';
+import { useRequestCacheData, useServerRequest } from '../ServerRequestProvider';
+function makeShopifyContext(shopifyConfig) {
+    var _a, _b;
+    const locale = (_a = shopifyConfig.defaultLocale) !== null && _a !== void 0 ? _a : DEFAULT_LOCALE;
+    const languageCode = locale.split(/[-_]/)[0];
+    return {
+        locale: locale.toUpperCase(),
+        languageCode: languageCode.toUpperCase(),
+        storeDomain: (_b = shopifyConfig === null || shopifyConfig === void 0 ? void 0 : shopifyConfig.storeDomain) === null || _b === void 0 ? void 0 : _b.replace(/^https?:\/\//, ''),
+        storefrontToken: shopifyConfig.storefrontToken,
+        storefrontApiVersion: shopifyConfig.storefrontApiVersion,
+    };
+}
+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, }) {
+    var _a;
+    const request = useServerRequest();
+    if (!shopifyConfig) {
+        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`');
+        }
+    }
+    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/index.d.ts

@@ -0,0 +1 @@
+export { ShopifyContext } from './ShopifyProvider.client';

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

@@ -0,0 +1 @@
+export { ShopifyContext } from './ShopifyProvider.client';

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

@@ -0,0 +1,13 @@
+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, 'defaultLocale'> {
+    locale: `${LanguageCode}-${CountryCode}`;
+    languageCode: `${LanguageCode}`;
+}
+export declare type ShopifyProviderProps = {
+    /** Shopify connection information. Defaults to the `shopify` property in the `hydrogen.config.js` file. */
+    shopifyConfig?: ShopifyConfig | ShopifyConfigFetcher;
+    /** Any `ReactNode` elements. */
+    children?: ReactNode;
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export declare const DEFAULT_LOCALE = "EN-US";

package/dist/esnext/foundation/constants.js

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

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 !== null && options !== void 0 ? 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/fetchSync/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+export * from './ServerPropsProvider';
+export { useShop } from './useShop';
+export { useUrl } from './useUrl';

package/dist/esnext/foundation/index.js

@@ -0,0 +1,3 @@
+export * from './ServerPropsProvider';
+export { useShop } from './useShop';
+export { useUrl } from './useUrl';

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

@@ -0,0 +1,27 @@
+import { Logger } from '../../utilities/log';
+import type { ServerComponentResponse } from '../../framework/Hydration/ServerComponentResponse.server';
+import type { ServerComponentRequest } from '../../framework/Hydration/ServerComponentRequest.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: ServerComponentRequest, componentResponse: ServerComponentResponse, 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 { ServerComponentRequest } from '../framework/Hydration/ServerComponentRequest.server';
+export declare const META_ENV_SSR = false;
+declare type ServerGetter<T> = (request: ServerComponentRequest) => 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,13 @@
+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;
+};
+/**
+ * The useNavigate hook imperatively navigates between routes.
+ */
+export declare function useNavigate(): (path: string, options?: NavigationOptions) => void;
+export {};

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

@@ -0,0 +1,14 @@
+import { useRouter } from '../Router/BrowserRouter.client';
+/**
+ * The useNavigate hook imperatively navigates between routes.
+ */
+export function useNavigate() {
+    const router = useRouter();
+    return (path, options = { replace: false, reloadDocument: false }) => {
+        // @todo wait for RSC and then change focus for a11y?
+        if (options === null || options === void 0 ? void 0 : options.replace)
+            router.history.replace(path, (options === null || options === void 0 ? void 0 : options.clientState) || {});
+        else
+            router.history.push(path, (options === null || options === void 0 ? void 0 : options.clientState) || {});
+    };
+}

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

@@ -0,0 +1,36 @@
+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;
+};