@shopify/hydrogen 1.3.2 → 1.4.1

package/dist/esnext/components/CartProvider/useCartAPIStateMachine.client.js

@@ -0,0 +1,251 @@
+import { useMachine } from '@xstate/react/fsm';
+import { createMachine, assign } from '@xstate/fsm';
+import { flattenConnection } from '../../utilities/flattenConnection/index.js';
+import { useCartActions } from './CartActions.client.js';
+import { useMemo } from 'react';
+function invokeCart(action, options) {
+    return {
+        entry: [
+            ...(options?.entryActions || []),
+            'onCartActionEntry',
+            'onCartActionOptimisticUI',
+            action,
+        ],
+        on: {
+            RESOLVE: {
+                target: options?.resolveTarget || 'idle',
+                actions: [
+                    assign({
+                        prevCart: (context) => context?.cart,
+                        cart: (_, event) => event?.payload?.cart,
+                        rawCartResult: (_, event) => event?.payload?.rawCartResult,
+                        errors: (_) => undefined,
+                    }),
+                ],
+            },
+            ERROR: {
+                target: options?.errorTarget || 'error',
+                actions: [
+                    assign({
+                        prevCart: (context) => context?.cart,
+                        cart: (context, _) => context?.lastValidCart,
+                        errors: (_, event) => event?.payload?.errors,
+                    }),
+                ],
+            },
+            CART_COMPLETED: {
+                target: 'cartCompleted',
+                actions: assign({
+                    prevCart: (_) => undefined,
+                    cart: (_) => undefined,
+                    lastValidCart: (_) => undefined,
+                    errors: (_) => undefined,
+                }),
+            },
+        },
+        exit: ['onCartActionComplete', ...(options?.exitActions || [])],
+    };
+}
+const INITIALIZING_CART_EVENTS = {
+    CART_FETCH: {
+        target: 'cartFetching',
+    },
+    CART_CREATE: {
+        target: 'cartCreating',
+    },
+};
+const UPDATING_CART_EVENTS = {
+    CARTLINE_ADD: {
+        target: 'cartLineAdding',
+    },
+    CARTLINE_UPDATE: {
+        target: 'cartLineUpdating',
+    },
+    CARTLINE_REMOVE: {
+        target: 'cartLineRemoving',
+    },
+    NOTE_UPDATE: {
+        target: 'noteUpdating',
+    },
+    BUYER_IDENTITY_UPDATE: {
+        target: 'buyerIdentityUpdating',
+    },
+    CART_ATTRIBUTES_UPDATE: {
+        target: 'cartAttributesUpdating',
+    },
+    DISCOUNT_CODES_UPDATE: {
+        target: 'discountCodesUpdating',
+    },
+};
+const cartMachine = createMachine({
+    id: 'Cart',
+    initial: 'uninitialized',
+    states: {
+        uninitialized: {
+            on: INITIALIZING_CART_EVENTS,
+        },
+        cartCompleted: {
+            on: INITIALIZING_CART_EVENTS,
+        },
+        initializationError: {
+            on: INITIALIZING_CART_EVENTS,
+        },
+        idle: {
+            on: UPDATING_CART_EVENTS,
+        },
+        error: {
+            on: UPDATING_CART_EVENTS,
+        },
+        cartFetching: invokeCart('cartFetchAction', {
+            errorTarget: 'initializationError',
+        }),
+        cartCreating: invokeCart('cartCreateAction', {
+            errorTarget: 'initializationError',
+        }),
+        cartLineRemoving: invokeCart('cartLineRemoveAction'),
+        cartLineUpdating: invokeCart('cartLineUpdateAction'),
+        cartLineAdding: invokeCart('cartLineAddAction'),
+        noteUpdating: invokeCart('noteUpdateAction'),
+        buyerIdentityUpdating: invokeCart('buyerIdentityUpdateAction'),
+        cartAttributesUpdating: invokeCart('cartAttributesUpdateAction'),
+        discountCodesUpdating: invokeCart('discountCodesUpdateAction'),
+    },
+});
+export function useCartAPIStateMachine({ numCartLines, onCartActionEntry, onCartActionOptimisticUI, onCartActionComplete, data: cart, cartFragment, countryCode, }) {
+    const { cartFetch, cartCreate, cartLineAdd, cartLineUpdate, cartLineRemove, noteUpdate, buyerIdentityUpdate, cartAttributesUpdate, discountCodesUpdate, } = useCartActions({
+        numCartLines,
+        cartFragment,
+        countryCode,
+    });
+    const [state, send, service] = useMachine(cartMachine, {
+        actions: {
+            cartFetchAction: async (_, event) => {
+                if (event.type !== 'CART_FETCH')
+                    return;
+                const { data, errors } = await cartFetch(event?.payload?.cartId);
+                const resultEvent = eventFromFetchResult(event, data?.cart, errors);
+                send(resultEvent);
+            },
+            cartCreateAction: async (_, event) => {
+                if (event.type !== 'CART_CREATE')
+                    return;
+                const { data, errors } = await cartCreate(event?.payload);
+                const resultEvent = eventFromFetchResult(event, data?.cartCreate?.cart, errors);
+                send(resultEvent);
+            },
+            cartLineAddAction: async (context, event) => {
+                if (event.type !== 'CARTLINE_ADD' || !context?.cart?.id)
+                    return;
+                const { data, errors } = await cartLineAdd(context.cart.id, event.payload.lines);
+                const resultEvent = eventFromFetchResult(event, data?.cartLinesAdd?.cart, errors);
+                send(resultEvent);
+            },
+            cartLineUpdateAction: async (context, event) => {
+                if (event.type !== 'CARTLINE_UPDATE' || !context?.cart?.id)
+                    return;
+                const { data, errors } = await cartLineUpdate(context.cart.id, event.payload.lines);
+                const resultEvent = eventFromFetchResult(event, data?.cartLinesUpdate?.cart, errors);
+                send(resultEvent);
+            },
+            cartLineRemoveAction: async (context, event) => {
+                if (event.type !== 'CARTLINE_REMOVE' || !context?.cart?.id)
+                    return;
+                const { data, errors } = await cartLineRemove(context.cart.id, event.payload.lines);
+                const resultEvent = eventFromFetchResult(event, data?.cartLinesRemove?.cart, errors);
+                send(resultEvent);
+            },
+            noteUpdateAction: async (context, event) => {
+                if (event.type !== 'NOTE_UPDATE' || !context?.cart?.id)
+                    return;
+                const { data, errors } = await noteUpdate(context.cart.id, event.payload.note);
+                const resultEvent = eventFromFetchResult(event, data?.cartNoteUpdate?.cart, errors);
+                send(resultEvent);
+            },
+            buyerIdentityUpdateAction: async (context, event) => {
+                if (event.type !== 'BUYER_IDENTITY_UPDATE' || !context?.cart?.id)
+                    return;
+                const { data, errors } = await buyerIdentityUpdate(context.cart.id, event.payload.buyerIdentity);
+                const resultEvent = eventFromFetchResult(event, data?.cartBuyerIdentityUpdate?.cart, errors);
+                send(resultEvent);
+            },
+            cartAttributesUpdateAction: async (context, event) => {
+                if (event.type !== 'CART_ATTRIBUTES_UPDATE' || !context?.cart?.id)
+                    return;
+                const { data, errors } = await cartAttributesUpdate(context.cart.id, event.payload.attributes);
+                const resultEvent = eventFromFetchResult(event, data?.cartAttributesUpdate?.cart, errors);
+                send(resultEvent);
+            },
+            discountCodesUpdateAction: async (context, event) => {
+                if (event.type !== 'DISCOUNT_CODES_UPDATE' || !context?.cart?.id)
+                    return;
+                const { data, errors } = await discountCodesUpdate(context.cart.id, event.payload.discountCodes);
+                const resultEvent = eventFromFetchResult(event, data?.cartDiscountCodesUpdate?.cart, errors);
+                send(resultEvent);
+            },
+            ...(onCartActionEntry && {
+                onCartActionEntry: (context, event) => {
+                    if (isCartActionEvent(event)) {
+                        onCartActionEntry(context, event);
+                    }
+                },
+            }),
+            ...(onCartActionOptimisticUI && {
+                onCartActionOptimisticUI: assign((context, event) => {
+                    return onCartActionOptimisticUI(context, event);
+                }),
+            }),
+            ...(onCartActionComplete && {
+                onCartActionComplete: (context, event) => {
+                    if (isCartFetchResultEvent(event)) {
+                        onCartActionComplete(context, event);
+                    }
+                },
+            }),
+        },
+    });
+    return useMemo(() => [state, send, service], [state, send, service]);
+}
+export function cartFromGraphQL(cart) {
+    return {
+        ...cart,
+        // @ts-expect-error While the cart still uses fragments, there will be a TS error here until we remove those fragments and get the type in-line
+        lines: flattenConnection(cart.lines),
+        note: cart.note ?? undefined,
+    };
+}
+function eventFromFetchResult(cartActionEvent, cart, errors) {
+    if (errors) {
+        return { type: 'ERROR', payload: { errors, cartActionEvent } };
+    }
+    if (!cart) {
+        return {
+            type: 'CART_COMPLETED',
+            payload: {
+                cartActionEvent,
+            },
+        };
+    }
+    return {
+        type: 'RESOLVE',
+        payload: {
+            cart: cartFromGraphQL(cart),
+            rawCartResult: cart,
+            cartActionEvent,
+        },
+    };
+}
+function isCartActionEvent(event) {
+    return (event.type === 'CART_CREATE' ||
+        event.type === 'CARTLINE_ADD' ||
+        event.type === 'CARTLINE_UPDATE' ||
+        event.type === 'CARTLINE_REMOVE' ||
+        event.type === 'NOTE_UPDATE' ||
+        event.type === 'BUYER_IDENTITY_UPDATE' ||
+        event.type === 'CART_ATTRIBUTES_UPDATE' ||
+        event.type === 'DISCOUNT_CODES_UPDATE');
+}
+function isCartFetchResultEvent(event) {
+    return (event.type === 'RESOLVE' ||
+        event.type === 'ERROR' ||
+        event.type === 'CART_COMPLETED');
+}

package/dist/esnext/entry-client.js

@@ -1,4 +1,4 @@
-import React, { Suspense, useState, StrictMode, Fragment, useEffect, } from 'react';
+import React, { Suspense, useState, StrictMode, Fragment, startTransition, useEffect, } from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary/dist/react-error-boundary.esm';
 import { createFromFetch, createFromReadableStream,
@@ -14,6 +14,20 @@ const cache = new Map();
 // Hydrate an SSR response from <meta> tags placed in the DOM.
 const flightChunks = [];
 const FLIGHT_ATTRIBUTE = 'data-flight';
+const requestIdleCallbackHydrogen = (typeof self !== 'undefined' &&
+    self.requestIdleCallback &&
+    self.requestIdleCallback.bind(window)) ||
+    function (cb) {
+        const start = Date.now();
+        return setTimeout(function () {
+            cb({
+                didTimeout: false,
+                timeRemaining() {
+                    return Math.max(0, 50 - (Date.now() - start));
+                },
+            });
+        }, 1);
+    };
 function addElementToFlightChunks(el) {
     // We don't need to decode, because `.getAttribute` already decodes
     const chunk = el.getAttribute(FLIGHT_ATTRIBUTE);
@@ -93,13 +107,17 @@ const renderHydrogen = async (ClientWrapper) => {
     config.strictMode !== false ? StrictMode : Fragment;
     // Fixes hydration in `useId`: https://github.com/Shopify/hydrogen/issues/1589
     const ServerRequestProviderMock = () => null;
-    hydrateRoot(root, React.createElement(RootComponent, null,
-        React.createElement(ServerRequestProviderMock, null),
-        React.createElement(ErrorBoundary, { FallbackComponent: CustomErrorPage
-                ? ({ error }) => (React.createElement(CustomErrorWrapper, { error: error, errorPage: CustomErrorPage }))
-                : DefaultError },
-            React.createElement(Suspense, { fallback: null },
-                React.createElement(Content, { clientWrapper: ClientWrapper })))));
+    requestIdleCallbackHydrogen(() => {
+        startTransition(() => {
+            hydrateRoot(root, React.createElement(RootComponent, null,
+                React.createElement(ServerRequestProviderMock, null),
+                React.createElement(ErrorBoundary, { FallbackComponent: CustomErrorPage
+                        ? ({ error }) => (React.createElement(CustomErrorWrapper, { error: error, errorPage: CustomErrorPage }))
+                        : DefaultError },
+                    React.createElement(Suspense, { fallback: null },
+                        React.createElement(Content, { clientWrapper: ClientWrapper })))));
+        });
+    });
 };
 export default renderHydrogen;
 function Content({ clientWrapper: ClientWrapper = ({ children }) => children, }) {

package/dist/esnext/experimental.d.ts

@@ -1,2 +1,3 @@
 export { Form } from './foundation/Form/Form.client.js';
 export { useFlashSession } from './foundation/useSession/useSession.js';
+export { CartProviderV2 } from './components/CartProvider/CartProviderV2.client.js';

package/dist/esnext/experimental.js

@@ -1,2 +1,3 @@
 export { Form } from './foundation/Form/Form.client.js';
 export { useFlashSession } from './foundation/useSession/useSession.js';
+export { CartProviderV2 } from './components/CartProvider/CartProviderV2.client.js';

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

@@ -1,4 +1,4 @@
-import type { ShopifyContextValue, LocalizationContextValue } from '../ShopifyProvider/types.js';
+import type { ShopifyContextServerValue, LocalizationContextValue } from '../ShopifyProvider/types.js';
 import type { QueryCacheControlHeaders } from '../../utilities/log/log-cache-header.js';
 import type { QueryTiming } from '../../utilities/log/log-query-timeline.js';
 import type { ResolvedHydrogenConfig, PreloadOptions, QueryKey, RuntimeContext } from '../../types.js';
@@ -38,7 +38,7 @@ export declare class HydrogenRequest extends Request {
         cache: Map<string, any>;
         head: HeadData;
         hydrogenConfig?: ResolvedHydrogenConfig;
-        shopifyConfig?: ShopifyContextValue;
+        shopifyConfig?: ShopifyContextServerValue;
         queryCacheControl: Array<QueryCacheControlHeaders>;
         queryTimings: Array<QueryTiming>;
         preloadQueries: PreloadQueriesByURL;
@@ -51,6 +51,7 @@ export declare class HydrogenRequest extends Request {
         scopes: Map<string, Record<string, any>>;
         localization?: LocalizationContextValue;
         [key: string]: any;
+        throttledRequests: Record<string, any>;
     };
     constructor(input: any);
     constructor(input: RequestInfo, init?: RequestInit);

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

@@ -61,6 +61,7 @@ export class HydrogenRequest extends Request {
             preloadQueries: new Map(),
             scopes: new Map(),
             flashSession: {},
+            throttledRequests: {},
         };
         this.cookies = this.parseCookies();
     }

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

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

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

@@ -1,5 +1,6 @@
 import type { ShopifyProviderProps, LocalizationContextValue } from './types.js';
 import type { CountryCode, LanguageCode } from '../../storefront-api-types.js';
+export declare const CLIENT_CONTEXT_ALLOW_LIST: readonly ["defaultCountryCode", "defaultLanguageCode", "storeDomain", "storefrontToken", "storefrontApiVersion", "storefrontId"];
 export declare const SHOPIFY_PROVIDER_CONTEXT_KEY: unique symbol;
 /**
  * The `ShopifyProvider` component wraps your entire app and provides support for hooks.

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

@@ -5,18 +5,33 @@ import { useRequestCacheData, useServerRequest, } from '../ServerRequestProvider
 import { getOxygenVariable } from '../../utilities/storefrontApi.js';
 import { SHOPIFY_STOREFRONT_ID_VARIABLE } from '../../constants.js';
 import { getLocale } from '../../utilities/locale/index.js';
+export const CLIENT_CONTEXT_ALLOW_LIST = [
+    'defaultCountryCode',
+    'defaultLanguageCode',
+    'storeDomain',
+    'storefrontToken',
+    'storefrontApiVersion',
+    'storefrontId',
+];
 function makeShopifyContext(shopifyConfig) {
     const countryCode = shopifyConfig.defaultCountryCode ?? DEFAULT_COUNTRY;
     const languageCode = shopifyConfig.defaultLanguageCode ?? DEFAULT_LANGUAGE;
     const storefrontId = getOxygenVariable(SHOPIFY_STOREFRONT_ID_VARIABLE);
-    return {
+    const shopifyProviderServerValue = {
         defaultCountryCode: countryCode.toUpperCase(),
         defaultLanguageCode: languageCode.toUpperCase(),
         storeDomain: shopifyConfig?.storeDomain?.replace(/^https?:\/\//, ''),
         storefrontToken: shopifyConfig.storefrontToken,
         storefrontApiVersion: shopifyConfig.storefrontApiVersion,
-        multipassSecret: shopifyConfig.multipassSecret,
         storefrontId,
+        privateStorefrontToken: shopifyConfig.privateStorefrontToken,
+    };
+    return {
+        shopifyProviderServerValue,
+        shopifyProviderClientValue: CLIENT_CONTEXT_ALLOW_LIST.reduce((clientConfigValue, key) => {
+            clientConfigValue[key] = shopifyProviderServerValue[key];
+            return clientConfigValue;
+        }, {}),
     };
 }
 export const SHOPIFY_PROVIDER_CONTEXT_KEY = Symbol.for('SHOPIFY_PROVIDER_RSC');
@@ -55,11 +70,11 @@ children, }) {
     else {
         actualShopifyConfig = shopifyConfig;
     }
-    const shopifyProviderValue = useMemo(() => makeShopifyContext(actualShopifyConfig), [actualShopifyConfig]);
-    const localization = getLocalizationContextValue(shopifyProviderValue.defaultLanguageCode, shopifyProviderValue.defaultCountryCode, languageCode, countryCode);
+    const { shopifyProviderServerValue, shopifyProviderClientValue } = useMemo(() => makeShopifyContext(actualShopifyConfig), [actualShopifyConfig]);
+    const localization = getLocalizationContextValue(shopifyProviderServerValue.defaultLanguageCode, shopifyProviderServerValue.defaultCountryCode, languageCode, countryCode);
     request.ctx.localization = localization;
-    request.ctx.shopifyConfig = shopifyProviderValue;
-    return (React.createElement(ShopifyProviderClient, { shopifyConfig: shopifyProviderValue, localization: localization }, children));
+    request.ctx.shopifyConfig = shopifyProviderServerValue;
+    return (React.createElement(ShopifyProviderClient, { shopifyConfig: shopifyProviderClientValue, localization: localization }, children));
 }
 export function getLocalizationContextValue(defaultLanguageCode, defaultCountryCode, languageCode, countryCode) {
     return useMemo(() => {

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

@@ -1,11 +1,13 @@
 import type { CountryCode, LanguageCode } from '../../storefront-api-types.js';
 import type { ReactNode } from 'react';
 import type { ShopifyConfigFetcher, ShopifyConfig } from '../../types.js';
-export interface ShopifyContextValue extends Omit<ShopifyConfig, 'defaultLanguageCode' | 'defaultCountryCode'> {
+import type { CLIENT_CONTEXT_ALLOW_LIST } from './ShopifyProvider.server.js';
+export interface ShopifyContextServerValue extends Omit<ShopifyConfig, 'defaultLanguageCode' | 'defaultCountryCode'> {
     defaultLanguageCode: `${LanguageCode}`;
     defaultCountryCode: `${CountryCode}`;
-    storefrontId: string | null;
 }
+declare type CLIENT_KEYS = typeof CLIENT_CONTEXT_ALLOW_LIST[number];
+export declare type ShopifyContextClientValue = Pick<ShopifyContextServerValue, CLIENT_KEYS>;
 export declare type Locale = string;
 export interface LocalizationContextValue {
     country: {
@@ -30,3 +32,4 @@ export declare type ShopifyProviderProps = {
      */
     languageCode?: `${LanguageCode}`;
 };
+export {};

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

@@ -3,4 +3,4 @@
  * [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.js").ShopifyContextValue;
+export declare function useShop(): import("../ShopifyProvider/types.js").ShopifyContextServerValue;

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-config.js

@@ -98,6 +98,7 @@ export default (pluginOptions) => {
                         // https://github.com/nfriedly/set-cookie-parser/issues/50
                         'set-cookie-parser',
                         'undici',
+                        '@xstate/react/fsm',
                     ],
                 },
                 define: {

package/dist/esnext/framework/plugins/vite-plugin-hydrogen-middleware.js

@@ -56,13 +56,5 @@ export default (pluginOptions) => {
 };
 async function polyfillOxygenEnv(config) {
     const env = await loadEnv(config.mode, config.root, '');
-    const publicPrefixes = Array.isArray(config.envPrefix)
-        ? config.envPrefix
-        : [config.envPrefix || ''];
-    for (const key of Object.keys(env)) {
-        if (publicPrefixes.some((prefix) => key.startsWith(prefix))) {
-            delete env[key];
-        }
-    }
     globalThis.Oxygen = { env };
 }

package/dist/esnext/hooks/useDelay/useDelay.d.ts

@@ -0,0 +1 @@
+export declare const useDelay: (data: unknown, time: number) => unknown;

package/dist/esnext/hooks/useDelay/useDelay.js

@@ -0,0 +1,17 @@
+import { useServerRequest } from '../../foundation/ServerRequestProvider/index.js';
+import { wrapPromise } from '../../utilities/index.js';
+import { log } from '../../utilities/log/log.js';
+export const useDelay = function (data, time) {
+    if (!__HYDROGEN_DEV__) {
+        log.warn(new Error('The `useDelay` hook introduces an artificial delay that should not be used in production!').stack);
+        return data;
+    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const serverRequest = useServerRequest();
+    const key = JSON.stringify(data);
+    if (!serverRequest.ctx.throttledRequests[key]) {
+        serverRequest.ctx.throttledRequests[key] = wrapPromise(new Promise((resolve) => setTimeout(resolve, time)));
+    }
+    serverRequest.ctx.throttledRequests[key].read();
+    return data;
+};

package/dist/esnext/hooks/useShopQuery/hooks.js

@@ -145,12 +145,14 @@ export function useShopQuery({ query, variables = {}, cache, preload = false, })
     return data;
 }
 function useCreateShopRequest(body) {
-    const { storeDomain, storefrontToken, storefrontApiVersion } = useShop();
+    const { storeDomain, storefrontToken, storefrontApiVersion, storefrontId, privateStorefrontToken, } = useShop();
     const request = useServerRequest();
     const buyerIp = request.getBuyerIp();
     const extraHeaders = getStorefrontApiRequestHeaders({
         buyerIp,
-        storefrontToken,
+        publicStorefrontToken: storefrontToken,
+        privateStorefrontToken,
+        storefrontId,
     });
     return {
         key: [storeDomain, storefrontApiVersion, body],

package/dist/esnext/index.d.ts

@@ -28,6 +28,7 @@ export { ShopifyAnalytics } from './foundation/Analytics/connectors/Shopify/Shop
 export { ShopifyAnalyticsConstants } from './foundation/Analytics/connectors/Shopify/const.js';
 export { useSession } from './foundation/useSession/useSession.js';
 export { Cookie } from './foundation/Cookie/Cookie.js';
+export { useDelay } from './hooks/useDelay/useDelay.js';
 /**
  * Export server-only CartQuery here instead of `CartProvider.client` to prevent
  * it from being bundled with other client components

package/dist/esnext/index.js

@@ -28,6 +28,7 @@ export { ShopifyAnalytics } from './foundation/Analytics/connectors/Shopify/Shop
 export { ShopifyAnalyticsConstants } from './foundation/Analytics/connectors/Shopify/const.js';
 export { useSession } from './foundation/useSession/useSession.js';
 export { Cookie } from './foundation/Cookie/Cookie.js';
+export { useDelay } from './hooks/useDelay/useDelay.js';
 /**
  * Export server-only CartQuery here instead of `CartProvider.client` to prevent
  * it from being bundled with other client components

package/dist/esnext/shared-types.d.ts

@@ -26,5 +26,6 @@ export declare type ShopifyConfig = {
     storeDomain: string;
     storefrontToken: string;
     storefrontApiVersion: string;
-    multipassSecret?: string;
+    privateStorefrontToken?: string;
+    storefrontId?: string;
 };

package/dist/esnext/utilities/apiRoutes.js

@@ -81,11 +81,13 @@ function queryShopBuilder(shopifyConfigGetter, request) {
         if (!shopifyConfig) {
             throw new Error('Shopify connection info was not found in Hydrogen config');
         }
-        const { storeDomain, storefrontApiVersion, storefrontToken } = shopifyConfig;
+        const { storeDomain, storefrontApiVersion, storefrontToken, privateStorefrontToken, storefrontId, } = shopifyConfig;
         const buyerIp = request.getBuyerIp();
         const extraHeaders = getStorefrontApiRequestHeaders({
             buyerIp,
-            storefrontToken,
+            publicStorefrontToken: storefrontToken,
+            privateStorefrontToken,
+            storefrontId,
         });
         const fetcher = fetchBuilder(`https://${storeDomain}/api/${storefrontApiVersion}/graphql.json`, {
             method: 'POST',

package/dist/esnext/utilities/object.d.ts

@@ -1,5 +1,5 @@
 declare type Descriptor = Parameters<typeof Object.defineProperty>[2];
-export declare function createObject<T = object>(properties: T, { prototype, ...descriptor }?: {
+export declare function createObject<T extends {} = object>(properties: T, { prototype, ...descriptor }?: {
     prototype?: any;
 } & Exclude<Descriptor, 'value'>): T;
 export {};

package/dist/esnext/utilities/storefrontApi.d.ts

@@ -1,5 +1,7 @@
-export declare function getStorefrontApiRequestHeaders({ buyerIp, storefrontToken, }: {
+export declare function getStorefrontApiRequestHeaders({ buyerIp, publicStorefrontToken, privateStorefrontToken, storefrontId, }: {
     buyerIp?: string | null;
-    storefrontToken: string;
+    publicStorefrontToken: string;
+    privateStorefrontToken: string | undefined;
+    storefrontId: string | undefined;
 }): Record<string, any>;
 export declare function getOxygenVariable(key: string): any;

package/dist/esnext/utilities/storefrontApi.js

@@ -1,17 +1,42 @@
 /* global Oxygen */
 import { OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE, STOREFRONT_API_SECRET_TOKEN_HEADER, STOREFRONT_API_PUBLIC_TOKEN_HEADER, STOREFRONT_API_BUYER_IP_HEADER, SHOPIFY_STOREFRONT_ID_VARIABLE, SHOPIFY_STOREFRONT_ID_HEADER, } from '../constants.js';
-export function getStorefrontApiRequestHeaders({ buyerIp, storefrontToken, }) {
+import { log } from './log/log.js';
+let secretTokenWarned = false;
+let storefrontIdWarned = false;
+export function getStorefrontApiRequestHeaders({ buyerIp, publicStorefrontToken, privateStorefrontToken, storefrontId, }) {
     const headers = {};
-    const secretToken = getOxygenVariable(OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE);
-    const storefrontId = getOxygenVariable(SHOPIFY_STOREFRONT_ID_VARIABLE);
+    if (!privateStorefrontToken) {
+        privateStorefrontToken = getOxygenVariable(OXYGEN_SECRET_TOKEN_ENVIRONMENT_VARIABLE);
+        if (!secretTokenWarned) {
+            secretTokenWarned = true;
+            if (!privateStorefrontToken && !__HYDROGEN_DEV__) {
+                log.error('No secret Shopify storefront API token was defined. This means your app will be rate limited!\nSee how to add the token: ');
+            }
+            else if (privateStorefrontToken) {
+                log.warn('The private shopify storefront API token was loaded implicitly by an environment variable. This is deprecated, and instead the variable should be defined directly in the Hydrogen Config.\nFor more information: ');
+            }
+        }
+    }
+    if (!storefrontId) {
+        storefrontId = getOxygenVariable(SHOPIFY_STOREFRONT_ID_VARIABLE);
+        if (!storefrontIdWarned) {
+            storefrontIdWarned = true;
+            if (!storefrontId && !__HYDROGEN_DEV__) {
+                log.warn('No storefrontId was defined. This means the analytics on your admin dashboard will be broken!\nSee how to fix it: ');
+            }
+            else if (storefrontId) {
+                log.warn('The storefrontId was loaded implicitly by an environment variable. This is deprecated, and instead the variable should be defined directly in the Hydrogen Config.\nFor more information: ');
+            }
+        }
+    }
     /**
      * Only pass one type of storefront token at a time.
      */
-    if (secretToken) {
-        headers[STOREFRONT_API_SECRET_TOKEN_HEADER] = secretToken;
+    if (privateStorefrontToken) {
+        headers[STOREFRONT_API_SECRET_TOKEN_HEADER] = privateStorefrontToken;
     }
     else {
-        headers[STOREFRONT_API_PUBLIC_TOKEN_HEADER] = storefrontToken;
+        headers[STOREFRONT_API_PUBLIC_TOKEN_HEADER] = publicStorefrontToken;
     }
     if (buyerIp) {
         headers[STOREFRONT_API_BUYER_IP_HEADER] = buyerIp;

package/dist/esnext/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.3.2";
+export declare const LIB_VERSION = "1.4.1";

package/dist/esnext/version.js

@@ -1 +1 @@
-export const LIB_VERSION = '1.3.2';
+export const LIB_VERSION = '1.4.1';

package/dist/node/framework/plugins/vite-plugin-hydrogen-config.js

@@ -103,6 +103,7 @@ exports.default = (pluginOptions) => {
                         // https://github.com/nfriedly/set-cookie-parser/issues/50
                         'set-cookie-parser',
                         'undici',
+                        '@xstate/react/fsm',
                     ],
                 },
                 define: {