@shopify/hydrogen 1.4.1 → 1.4.3

package/dist/esnext/components/CartProvider/CartActions.client.d.ts

@@ -17,7 +17,7 @@ export declare function useCartActions({ numCartLines, cartFragment, countryCode
     /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */
     numCartLines?: number;
     /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
-    cartFragment?: string;
+    cartFragment: string;
     /** The ISO country code for i18n. */
     countryCode?: CountryCode;
 }): {
@@ -59,4 +59,3 @@ export declare function useCartActions({ numCartLines, cartFragment, countryCode
     }>;
     cartFragment: string;
 };
-export declare const defaultCartFragment = "\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\n  totalQuantity\n  buyerIdentity {\n    countryCode\n    customer {\n      id\n      email\n      firstName\n      lastName\n      displayName\n    }\n    email\n    phone\n  }\n  lines(first: $numCartLines) {\n    edges {\n      node {\n        id\n        quantity\n        attributes {\n          key\n          value\n        }\n        cost {\n          totalAmount {\n            amount\n            currencyCode\n          }\n          compareAtAmountPerQuantity {\n            amount\n            currencyCode\n          }\n        }\n        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  cost {\n    subtotalAmount {\n      ...MoneyFragment\n    }\n    totalAmount {\n      ...MoneyFragment\n    }\n    totalDutyAmount {\n      ...MoneyFragment\n    }\n    totalTaxAmount {\n      ...MoneyFragment\n    }\n  }\n  note\n  attributes {\n    key\n    value\n  }\n  discountCodes {\n    code\n  }\n}\n\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";

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

@@ -7,7 +7,7 @@ import { useCartFetch } from './hooks.client.js';
  *
  * See [cart API graphql mutations](https://shopify.dev/api/storefront/2022-07/objects/Cart)
  */
-export function useCartActions({ numCartLines, cartFragment = defaultCartFragment, countryCode = CountryCode.Us, }) {
+export function useCartActions({ numCartLines, cartFragment, countryCode = CountryCode.Us, }) {
     const fetchCart = useCartFetch();
     const cartFetch = useCallback((cartId) => {
         return fetchCart({
@@ -130,103 +130,3 @@ export function useCartActions({ numCartLines, cartFragment = defaultCartFragmen
         cartFragment,
     ]);
 }
-export const defaultCartFragment = `
-fragment CartFragment on Cart {
-  id
-  checkoutUrl
-  totalQuantity
-  buyerIdentity {
-    countryCode
-    customer {
-      id
-      email
-      firstName
-      lastName
-      displayName
-    }
-    email
-    phone
-  }
-  lines(first: $numCartLines) {
-    edges {
-      node {
-        id
-        quantity
-        attributes {
-          key
-          value
-        }
-        cost {
-          totalAmount {
-            amount
-            currencyCode
-          }
-          compareAtAmountPerQuantity {
-            amount
-            currencyCode
-          }
-        }
-        merchandise {
-          ... on ProductVariant {
-            id
-            availableForSale
-            compareAtPriceV2 {
-              ...MoneyFragment
-            }
-            priceV2 {
-              ...MoneyFragment
-            }
-            requiresShipping
-            title
-            image {
-              ...ImageFragment
-            }
-            product {
-              handle
-              title
-            }
-            selectedOptions {
-              name
-              value
-            }
-          }
-        }
-      }
-    }
-  }
-  cost {
-    subtotalAmount {
-      ...MoneyFragment
-    }
-    totalAmount {
-      ...MoneyFragment
-    }
-    totalDutyAmount {
-      ...MoneyFragment
-    }
-    totalTaxAmount {
-      ...MoneyFragment
-    }
-  }
-  note
-  attributes {
-    key
-    value
-  }
-  discountCodes {
-    code
-  }
-}
-
-fragment MoneyFragment on MoneyV2 {
-  currencyCode
-  amount
-}
-fragment ImageFragment on Image {
-  id
-  url
-  altText
-  width
-  height
-}
-`;

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

@@ -6,6 +6,28 @@ import { useCartFetch } from './hooks.client.js';
 import { CartContext } from './context.js';
 import { CART_ID_STORAGE_KEY } from './constants.js';
 import { ClientAnalytics } from '../../foundation/Analytics/ClientAnalytics.js';
+function getLocalStoragePolyfill() {
+    const storage = {};
+    return {
+        removeItem(key) {
+            delete storage[key];
+        },
+        setItem(key, value) {
+            storage[key] = value;
+        },
+        getItem(key) {
+            return storage[key];
+        },
+    };
+}
+const localStorage = (function () {
+    try {
+        return window.localStorage || getLocalStoragePolyfill();
+    }
+    catch (e) {
+        return getLocalStoragePolyfill();
+    }
+})();
 function cartReducer(state, action) {
     switch (action.type) {
         case 'cartFetch': {
@@ -179,7 +201,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             },
         });
         if (!data?.cart) {
-            window.localStorage.removeItem(CART_ID_STORAGE_KEY);
+            localStorage.removeItem(CART_ID_STORAGE_KEY);
             dispatch({ type: 'resetCart' });
             return;
         }
@@ -226,7 +248,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 type: 'resolve',
                 cart: cartFromGraphQL(data.cartCreate.cart),
             });
-            window.localStorage.setItem(CART_ID_STORAGE_KEY, data.cartCreate.cart.id);
+            localStorage.setItem(CART_ID_STORAGE_KEY, data.cartCreate.cart.id);
         }
     }, [
         onCreate,

package/dist/esnext/components/CartProvider/CartProviderV2.client.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CartFragmentFragment } from './graphql/CartFragment.js';
 import { CartBuyerIdentityInput, CountryCode } from '../../storefront-api-types.js';
-export declare function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, onCreateComplete, onLineAddComplete, onLineRemoveComplete, onLineUpdateComplete, onNoteUpdateComplete, onBuyerIdentityUpdateComplete, onAttributesUpdateComplete, onDiscountCodesUpdateComplete, data, cartFragment, customerAccessToken, countryCode, }: {
+export declare function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, onCreateComplete, onLineAddComplete, onLineRemoveComplete, onLineUpdateComplete, onNoteUpdateComplete, onBuyerIdentityUpdateComplete, onAttributesUpdateComplete, onDiscountCodesUpdateComplete, data: cart, cartFragment, customerAccessToken, countryCode, }: {
     /** Any `ReactNode` elements. */
     children: React.ReactNode;
     /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */
@@ -47,3 +47,4 @@ export declare function CartProviderV2({ children, numCartLines, onCreate, onLin
     /** The ISO country code for i18n. */
     countryCode?: CountryCode;
 }): JSX.Element;
+export declare const defaultCartFragment = "\nfragment CartFragment on Cart {\n  id\n  checkoutUrl\n  totalQuantity\n  buyerIdentity {\n    countryCode\n    customer {\n      id\n      email\n      firstName\n      lastName\n      displayName\n    }\n    email\n    phone\n  }\n  lines(first: $numCartLines) {\n    edges {\n      node {\n        id\n        quantity\n        attributes {\n          key\n          value\n        }\n        cost {\n          totalAmount {\n            amount\n            currencyCode\n          }\n          compareAtAmountPerQuantity {\n            amount\n            currencyCode\n          }\n        }\n        merchandise {\n          ... on ProductVariant {\n            id\n            availableForSale\n            compareAtPriceV2 {\n              ...MoneyFragment\n            }\n            priceV2 {\n              ...MoneyFragment\n            }\n            requiresShipping\n            title\n            image {\n              ...ImageFragment\n            }\n            product {\n              handle\n              title\n            }\n            selectedOptions {\n              name\n              value\n            }\n          }\n        }\n      }\n    }\n  }\n  cost {\n    subtotalAmount {\n      ...MoneyFragment\n    }\n    totalAmount {\n      ...MoneyFragment\n    }\n    totalDutyAmount {\n      ...MoneyFragment\n    }\n    totalTaxAmount {\n      ...MoneyFragment\n    }\n  }\n  note\n  attributes {\n    key\n    value\n  }\n  discountCodes {\n    code\n  }\n}\n\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";

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

@@ -1,11 +1,10 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CountryCode, } from '../../storefront-api-types.js';
 import { CartContext } from './context.js';
-import { useCartActions } from './CartActions.client.js';
 import { useCartAPIStateMachine } from './useCartAPIStateMachine.client.js';
 import { CART_ID_STORAGE_KEY } from './constants.js';
 import { ClientAnalytics } from '../../foundation/Analytics/ClientAnalytics.js';
-export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, onCreateComplete, onLineAddComplete, onLineRemoveComplete, onLineUpdateComplete, onNoteUpdateComplete, onBuyerIdentityUpdateComplete, onAttributesUpdateComplete, onDiscountCodesUpdateComplete, data: cart, cartFragment, customerAccessToken, countryCode = CountryCode.Us, }) {
+export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, onCreateComplete, onLineAddComplete, onLineRemoveComplete, onLineUpdateComplete, onNoteUpdateComplete, onBuyerIdentityUpdateComplete, onAttributesUpdateComplete, onDiscountCodesUpdateComplete, data: cart, cartFragment = defaultCartFragment, customerAccessToken, countryCode = CountryCode.Us, }) {
     if (countryCode)
         countryCode = countryCode.toUpperCase();
     const [prevCountryCode, setPrevCountryCode] = useState(countryCode);
@@ -17,32 +16,34 @@ export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, on
         setPrevCustomerAccessToken(customerAccessToken);
         customerOverridesCountryCode.current = false;
     }
-    const { cartFragment: usedCartFragment } = useCartActions({
-        numCartLines,
-        cartFragment,
-        countryCode,
-    });
     const [cartState, cartSend] = useCartAPIStateMachine({
         numCartLines,
+        data: cart,
         cartFragment,
+        countryCode,
         onCartActionEntry(context, event) {
-            switch (event.type) {
-                case 'CART_CREATE':
-                    return onCreate?.();
-                case 'CARTLINE_ADD':
-                    return onLineAdd?.();
-                case 'CARTLINE_REMOVE':
-                    return onLineRemove?.();
-                case 'CARTLINE_UPDATE':
-                    return onLineUpdate?.();
-                case 'NOTE_UPDATE':
-                    return onNoteUpdate?.();
-                case 'BUYER_IDENTITY_UPDATE':
-                    return onBuyerIdentityUpdate?.();
-                case 'CART_ATTRIBUTES_UPDATE':
-                    return onAttributesUpdate?.();
-                case 'DISCOUNT_CODES_UPDATE':
-                    return onDiscountCodesUpdate?.();
+            try {
+                switch (event.type) {
+                    case 'CART_CREATE':
+                        return onCreate?.();
+                    case 'CARTLINE_ADD':
+                        return onLineAdd?.();
+                    case 'CARTLINE_REMOVE':
+                        return onLineRemove?.();
+                    case 'CARTLINE_UPDATE':
+                        return onLineUpdate?.();
+                    case 'NOTE_UPDATE':
+                        return onNoteUpdate?.();
+                    case 'BUYER_IDENTITY_UPDATE':
+                        return onBuyerIdentityUpdate?.();
+                    case 'CART_ATTRIBUTES_UPDATE':
+                        return onAttributesUpdate?.();
+                    case 'DISCOUNT_CODES_UPDATE':
+                        return onDiscountCodesUpdate?.();
+                }
+            }
+            catch (error) {
+                console.error('Cart entry action failed', error);
             }
         },
         onCartActionOptimisticUI(context, event) {
@@ -81,44 +82,72 @@ export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, on
         },
         onCartActionComplete(context, event) {
             const cartActionEvent = event.payload.cartActionEvent;
-            switch (event.type) {
-                case 'RESOLVE':
-                    switch (cartActionEvent.type) {
-                        case 'CART_CREATE':
-                            publishCreateAnalytics(context, cartActionEvent);
-                            return onCreateComplete?.();
-                        case 'CARTLINE_ADD':
-                            publishLineAddAnalytics(context, cartActionEvent);
-                            return onLineAddComplete?.();
-                        case 'CARTLINE_REMOVE':
-                            publishLineRemoveAnalytics(context, cartActionEvent);
-                            return onLineRemoveComplete?.();
-                        case 'CARTLINE_UPDATE':
-                            publishLineUpdateAnalytics(context, cartActionEvent);
-                            return onLineUpdateComplete?.();
-                        case 'NOTE_UPDATE':
-                            return onNoteUpdateComplete?.();
-                        case 'BUYER_IDENTITY_UPDATE':
-                            if (countryCodeNotUpdated(context, cartActionEvent)) {
-                                customerOverridesCountryCode.current = true;
-                            }
-                            return onBuyerIdentityUpdateComplete?.();
-                        case 'CART_ATTRIBUTES_UPDATE':
-                            return onAttributesUpdateComplete?.();
-                        case 'DISCOUNT_CODES_UPDATE':
-                            publishDiscountCodesUpdateAnalytics(context, cartActionEvent);
-                            return onDiscountCodesUpdateComplete?.();
-                    }
+            try {
+                switch (event.type) {
+                    case 'RESOLVE':
+                        switch (cartActionEvent.type) {
+                            case 'CART_CREATE':
+                                publishCreateAnalytics(context, cartActionEvent);
+                                return onCreateComplete?.();
+                            case 'CARTLINE_ADD':
+                                publishLineAddAnalytics(context, cartActionEvent);
+                                return onLineAddComplete?.();
+                            case 'CARTLINE_REMOVE':
+                                publishLineRemoveAnalytics(context, cartActionEvent);
+                                return onLineRemoveComplete?.();
+                            case 'CARTLINE_UPDATE':
+                                publishLineUpdateAnalytics(context, cartActionEvent);
+                                return onLineUpdateComplete?.();
+                            case 'NOTE_UPDATE':
+                                return onNoteUpdateComplete?.();
+                            case 'BUYER_IDENTITY_UPDATE':
+                                if (countryCodeNotUpdated(context, cartActionEvent)) {
+                                    customerOverridesCountryCode.current = true;
+                                }
+                                return onBuyerIdentityUpdateComplete?.();
+                            case 'CART_ATTRIBUTES_UPDATE':
+                                return onAttributesUpdateComplete?.();
+                            case 'DISCOUNT_CODES_UPDATE':
+                                publishDiscountCodesUpdateAnalytics(context, cartActionEvent);
+                                return onDiscountCodesUpdateComplete?.();
+                        }
+                }
+            }
+            catch (error) {
+                console.error('onCartActionComplete failed', error);
             }
         },
     });
-    const [cartReady, setCartReady] = useState(false);
+    const cartReady = useRef(false);
     const cartCompleted = cartState.matches('cartCompleted');
     const countryChanged = (cartState.value === 'idle' ||
         cartState.value === 'error' ||
         cartState.value === 'cartCompleted') &&
         countryCode !== cartState?.context?.cart?.buyerIdentity?.countryCode &&
         !cartState.context.errors;
+    /**
+     * Initializes cart with priority in this order:
+     * 1. cart props
+     * 2. localStorage cartId
+     */
+    useEffect(() => {
+        if (!cartReady.current) {
+            if (!cart && storageAvailable('localStorage')) {
+                try {
+                    const cartId = window.localStorage.getItem(CART_ID_STORAGE_KEY);
+                    if (cartId) {
+                        cartSend({ type: 'CART_FETCH', payload: { cartId } });
+                    }
+                }
+                catch (error) {
+                    console.warn('error fetching cartId');
+                    console.warn(error);
+                }
+            }
+            cartReady.current = true;
+        }
+    }, [cart, cartReady, cartSend]);
+    // Update cart country code if cart and props countryCode's as different
     useEffect(() => {
         if (!countryChanged || customerOverridesCountryCode.current)
             return;
@@ -135,11 +164,11 @@ export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, on
     ]);
     // send cart events when ready
     const onCartReadySend = useCallback((cartEvent) => {
-        if (!cartReady) {
+        if (!cartReady.current) {
             return console.warn("Cart isn't ready yet");
         }
         cartSend(cartEvent);
-    }, [cartReady, cartSend]);
+    }, [cartSend]);
     // save cart id to local storage
     useEffect(() => {
         if (cartState?.context?.cart?.id && storageAvailable('localStorage')) {
@@ -162,22 +191,6 @@ export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, on
             }
         }
     }, [cartCompleted]);
-    // fetch cart from local storage if cart id present and set cart as ready for use
-    useEffect(() => {
-        if (!cartReady && storageAvailable('localStorage')) {
-            try {
-                const cartId = window.localStorage.getItem(CART_ID_STORAGE_KEY);
-                if (cartId) {
-                    cartSend({ type: 'CART_FETCH', payload: { cartId } });
-                }
-            }
-            catch (error) {
-                console.warn('error fetching cartId');
-                console.warn(error);
-            }
-            setCartReady(true);
-        }
-    }, [cartReady, cartSend]);
     const cartCreate = useCallback((cartInput) => {
         if (countryCode && !cartInput.buyerIdentity?.countryCode) {
             if (cartInput.buyerIdentity == null) {
@@ -263,15 +276,15 @@ export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, on
                     },
                 });
             },
-            cartFragment: usedCartFragment,
+            cartFragment,
         };
     }, [
         cartCreate,
+        cartFragment,
         cartState?.context?.cart,
         cartState?.context?.errors,
         cartState.value,
         onCartReadySend,
-        usedCartFragment,
     ]);
     return (React.createElement(CartContext.Provider, { value: cartContextValue }, children));
 }
@@ -368,3 +381,103 @@ function publishDiscountCodesUpdateAnalytics(context, event) {
         prevCart: context.prevCart,
     });
 }
+export const defaultCartFragment = `
+fragment CartFragment on Cart {
+  id
+  checkoutUrl
+  totalQuantity
+  buyerIdentity {
+    countryCode
+    customer {
+      id
+      email
+      firstName
+      lastName
+      displayName
+    }
+    email
+    phone
+  }
+  lines(first: $numCartLines) {
+    edges {
+      node {
+        id
+        quantity
+        attributes {
+          key
+          value
+        }
+        cost {
+          totalAmount {
+            amount
+            currencyCode
+          }
+          compareAtAmountPerQuantity {
+            amount
+            currencyCode
+          }
+        }
+        merchandise {
+          ... on ProductVariant {
+            id
+            availableForSale
+            compareAtPriceV2 {
+              ...MoneyFragment
+            }
+            priceV2 {
+              ...MoneyFragment
+            }
+            requiresShipping
+            title
+            image {
+              ...ImageFragment
+            }
+            product {
+              handle
+              title
+            }
+            selectedOptions {
+              name
+              value
+            }
+          }
+        }
+      }
+    }
+  }
+  cost {
+    subtotalAmount {
+      ...MoneyFragment
+    }
+    totalAmount {
+      ...MoneyFragment
+    }
+    totalDutyAmount {
+      ...MoneyFragment
+    }
+    totalTaxAmount {
+      ...MoneyFragment
+    }
+  }
+  note
+  attributes {
+    key
+    value
+  }
+  discountCodes {
+    code
+  }
+}
+
+fragment MoneyFragment on MoneyV2 {
+  currencyCode
+  amount
+}
+fragment ImageFragment on Image {
+  id
+  url
+  altText
+  width
+  height
+}
+`;

package/dist/esnext/components/CartProvider/types.d.ts

@@ -121,6 +121,12 @@ export declare type CartCreateEvent = {
     type: 'CART_CREATE';
     payload: CartInput;
 };
+export declare type CartSetEvent = {
+    type: 'CART_SET';
+    payload: {
+        cart: CartFragmentFragment;
+    };
+};
 export declare type CartLineAddEvent = {
     type: 'CARTLINE_ADD';
     payload: {
@@ -163,7 +169,7 @@ export declare type DiscountCodesUpdateEvent = {
         discountCodes: string[];
     };
 };
-export declare type CartMachineActionEvent = CartFetchEvent | CartCreateEvent | CartLineAddEvent | CartLineRemoveEvent | CartLineUpdateEvent | NoteUpdateEvent | BuyerIdentityUpdateEvent | CartAttributesUpdateEvent | DiscountCodesUpdateEvent;
+export declare type CartMachineActionEvent = CartFetchEvent | CartCreateEvent | CartSetEvent | CartLineAddEvent | CartLineRemoveEvent | CartLineUpdateEvent | NoteUpdateEvent | BuyerIdentityUpdateEvent | CartAttributesUpdateEvent | DiscountCodesUpdateEvent;
 export declare type CartMachineFetchResultEvent = {
     type: 'CART_COMPLETED';
     payload: {

package/dist/esnext/components/CartProvider/useCartAPIStateMachine.client.d.ts

@@ -2,7 +2,7 @@ import { StateMachine } from '@xstate/fsm';
 import { CartFragmentFragment } from './graphql/CartFragment.js';
 import { Cart, CartMachineActionEvent, CartMachineContext, CartMachineEvent, CartMachineFetchResultEvent, CartMachineTypeState } from './types.js';
 import { CountryCode } from '../../storefront-api-types.js';
-export declare function useCartAPIStateMachine({ numCartLines, onCartActionEntry, onCartActionOptimisticUI, onCartActionComplete, data, cartFragment, countryCode, }: {
+export declare function useCartAPIStateMachine({ numCartLines, onCartActionEntry, onCartActionOptimisticUI, onCartActionComplete, data: cart, cartFragment, countryCode, }: {
     /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */
     numCartLines?: number;
     /** A callback that is invoked just before a Cart API action executes. */
@@ -11,12 +11,11 @@ export declare function useCartAPIStateMachine({ numCartLines, onCartActionEntry
     onCartActionOptimisticUI?: (context: CartMachineContext, event: CartMachineEvent) => Partial<CartMachineContext>;
     /** A callback that is invoked after a Cart API completes. */
     onCartActionComplete?: (context: CartMachineContext, event: CartMachineFetchResultEvent) => void;
-    /** A callback that is invoked after a Cart API completes. */
     /** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart). */
     data?: CartFragmentFragment;
     /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
-    cartFragment?: string;
+    cartFragment: string;
     /** The ISO country code for i18n. */
     countryCode?: CountryCode;
-}): readonly [StateMachine.State<CartMachineContext, CartMachineEvent, CartMachineTypeState>, (event: "CART_FETCH" | "CART_CREATE" | "CARTLINE_ADD" | "CARTLINE_REMOVE" | "CARTLINE_UPDATE" | "NOTE_UPDATE" | "BUYER_IDENTITY_UPDATE" | "CART_ATTRIBUTES_UPDATE" | "DISCOUNT_CODES_UPDATE" | "CART_COMPLETED" | "RESOLVE" | "ERROR" | CartMachineEvent) => void, StateMachine.Service<CartMachineContext, CartMachineEvent, CartMachineTypeState>];
+}): readonly [StateMachine.State<CartMachineContext, CartMachineEvent, CartMachineTypeState>, (event: "CART_FETCH" | "CART_CREATE" | "CART_SET" | "CARTLINE_ADD" | "CARTLINE_REMOVE" | "CARTLINE_UPDATE" | "NOTE_UPDATE" | "BUYER_IDENTITY_UPDATE" | "CART_ATTRIBUTES_UPDATE" | "DISCOUNT_CODES_UPDATE" | "CART_COMPLETED" | "RESOLVE" | "ERROR" | CartMachineEvent) => void, StateMachine.Service<CartMachineContext, CartMachineEvent, CartMachineTypeState>];
 export declare function cartFromGraphQL(cart: CartFragmentFragment): Cart;

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

@@ -53,6 +53,15 @@ const INITIALIZING_CART_EVENTS = {
     CART_CREATE: {
         target: 'cartCreating',
     },
+    CART_SET: {
+        target: 'idle',
+        actions: [
+            assign({
+                rawCartResult: (_, event) => event.payload.cart,
+                cart: (_, event) => cartFromGraphQL(event.payload.cart),
+            }),
+        ],
+    },
 };
 const UPDATING_CART_EVENTS = {
     CARTLINE_ADD: {
@@ -77,46 +86,52 @@ const UPDATING_CART_EVENTS = {
         target: 'discountCodesUpdating',
     },
 };
-const cartMachine = createMachine({
-    id: 'Cart',
-    initial: 'uninitialized',
-    states: {
-        uninitialized: {
-            on: INITIALIZING_CART_EVENTS,
-        },
-        cartCompleted: {
-            on: INITIALIZING_CART_EVENTS,
+function createCartMachine(initialCart) {
+    return createMachine({
+        id: 'Cart',
+        initial: initialCart ? 'idle' : 'uninitialized',
+        context: {
+            cart: initialCart && cartFromGraphQL(initialCart),
         },
-        initializationError: {
-            on: INITIALIZING_CART_EVENTS,
-        },
-        idle: {
-            on: UPDATING_CART_EVENTS,
-        },
-        error: {
-            on: UPDATING_CART_EVENTS,
+        states: {
+            uninitialized: {
+                on: INITIALIZING_CART_EVENTS,
+            },
+            cartCompleted: {
+                on: INITIALIZING_CART_EVENTS,
+            },
+            initializationError: {
+                on: INITIALIZING_CART_EVENTS,
+            },
+            idle: {
+                on: { ...INITIALIZING_CART_EVENTS, ...UPDATING_CART_EVENTS },
+            },
+            error: {
+                on: { ...INITIALIZING_CART_EVENTS, ...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'),
         },
-        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 cartMachine = useMemo(() => createCartMachine(cart), [cart]);
     const [state, send, service] = useMachine(cartMachine, {
         actions: {
             cartFetchAction: async (_, event) => {

package/dist/esnext/entry-server.js

@@ -152,9 +152,12 @@ async function processRequest(handleRequest, App, url, request, sessionApi, opti
     const rsc = runRSC({ App, state, log, request, response });
     if (isRSCRequest) {
         const buffered = await bufferReadableStream(rsc.readable.getReader());
-        postRequestTasks('rsc', 200, request, response);
-        response.headers.set('cache-control', response.cacheControlHeader);
-        cacheResponse(response, request, [buffered], revalidate);
+        const rscDidError = !!rsc.didError();
+        postRequestTasks('rsc', rscDidError ? 500 : 200, request, response, rscDidError);
+        if (rscDidError) {
+            response.headers.set('cache-control', response.cacheControlHeader);
+            cacheResponse(response, request, [buffered], revalidate);
+        }
         return new Response(buffered, {
             headers: response.headers,
         });
@@ -319,7 +322,7 @@ async function runSSR({ rsc, state, request, response, nodeResponse, nonce, dev,
                 // Last SSR write might be pending, delay closing the writable one tick
                 setTimeout(() => {
                     writable.close();
-                    postRequestTasks('str', responseOptions.status, request, response);
+                    postRequestTasks('str', responseOptions.status, request, response, !!didError());
                     response.status = responseOptions.status;
                     cacheResponse(response, request, savedChunks, revalidate);
                 }, 0);
@@ -328,7 +331,7 @@ async function runSSR({ rsc, state, request, response, nodeResponse, nonce, dev,
         else {
             // Redirects do not write body
             writable.close();
-            postRequestTasks('str', responseOptions.status, request, response);
+            postRequestTasks('str', responseOptions.status, request, response, !!didError());
         }
         if (response.canStream()) {
             return new Response(transform.readable, responseOptions);
@@ -376,7 +379,7 @@ async function runSSR({ rsc, state, request, response, nodeResponse, nonce, dev,
                 log.trace('node complete ssr');
                 if (!revalidate &&
                     (response.canStream() || nodeResponse.writableEnded)) {
-                    postRequestTasks('str', nodeResponse.statusCode, request, response);
+                    postRequestTasks('str', nodeResponse.statusCode, request, response, !!didError());
                     return;
                 }
                 writeHeadToNodeResponse(nodeResponse, response, log, didError());
@@ -396,8 +399,8 @@ async function runSSR({ rsc, state, request, response, nodeResponse, nonce, dev,
                     let html = template;
                     if (!error) {
                         html = assembleHtml({ ssrHtml, rscPayload, request, template });
-                        postRequestTasks('ssr', nodeResponse.statusCode, request, response);
                     }
+                    postRequestTasks('ssr', nodeResponse.statusCode, request, response, !!didError());
                     if (!nodeResponse.writableEnded) {
                         nodeResponse.write(html);
                         nodeResponse.end();
@@ -506,8 +509,8 @@ function isRedirect(response) {
 function flightContainer(chunk) {
     return `<meta data-flight="${htmlEncode(chunk)}" />`;
 }
-function postRequestTasks(type, status, request, response) {
-    logServerResponse(type, request, status);
+function postRequestTasks(type, status, request, response, didError) {
+    logServerResponse(type, request, status, didError);
     logCacheControlHeaders(type, request, response);
     logQueryTimings(type, request);
     request.savePreloadQueries();

package/dist/esnext/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.client.js

@@ -74,7 +74,9 @@ function getCookieDomain(cookieDomain) {
 function trackPageView(payload) {
     microSessionCount += 1;
     try {
-        sendToServer(storefrontPageViewSchema(payload));
+        payload &&
+            payload.shopify &&
+            sendToServer(storefrontPageViewSchema(payload));
     }
     catch (error) {
         console.error(`Error Shopify analytics: ${ClientAnalytics.eventNames.PAGE_VIEW}`, error);
@@ -94,7 +96,7 @@ function buildStorefrontPageViewPayload(payload) {
     const shopify = payload.shopify;
     let formattedData = {
         appClientId: '6167201',
-        hydrogenSubchannelId: shopify.storefrontId,
+        hydrogenSubchannelId: shopify.storefrontId || '0',
         isPersistentCookie: shopify.isPersistentCookie,
         uniqToken: shopify.userId,
         visitToken: shopify.sessionId,

package/dist/esnext/foundation/Analytics/connectors/Shopify/ShopifyAnalytics.server.js

@@ -10,7 +10,7 @@ import { CacheLong } from '../../../Cache/strategies/index.js';
 import { gql } from '../../../../utilities/graphql-tag.js';
 import { SHOPIFY_Y, SHOPIFY_S } from '../../../../constants.js';
 export function ShopifyAnalytics({ cookieDomain }) {
-    const { storeDomain } = useShop();
+    const { storeDomain, storefrontId } = useShop();
     const request = useServerRequest();
     const cookies = parse(request.headers.get('Cookie') || '');
     const domain = cookieDomain || storeDomain;
@@ -23,7 +23,7 @@ export function ShopifyAnalytics({ cookieDomain }) {
         shopify: {
             shopId: id,
             currency: currencyCode,
-            storefrontId: globalThis.Oxygen?.env?.SHOPIFY_STOREFRONT_ID || '0',
+            storefrontId,
             acceptedLanguage: request.headers.get('Accept-Language')?.replace(/-.*/, '') || 'en',
             isPersistentCookie: !!cookies[SHOPIFY_S] || !!cookies[SHOPIFY_Y],
         },

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

@@ -16,7 +16,8 @@ export const CLIENT_CONTEXT_ALLOW_LIST = [
 function makeShopifyContext(shopifyConfig) {
     const countryCode = shopifyConfig.defaultCountryCode ?? DEFAULT_COUNTRY;
     const languageCode = shopifyConfig.defaultLanguageCode ?? DEFAULT_LANGUAGE;
-    const storefrontId = getOxygenVariable(SHOPIFY_STOREFRONT_ID_VARIABLE);
+    const storefrontId = shopifyConfig.storefrontId ??
+        getOxygenVariable(SHOPIFY_STOREFRONT_ID_VARIABLE);
     const shopifyProviderServerValue = {
         defaultCountryCode: countryCode.toUpperCase(),
         defaultLanguageCode: languageCode.toUpperCase(),

package/dist/esnext/index.d.ts

@@ -40,5 +40,5 @@ export { CartQuery } from './components/CartProvider/cart-queries.js';
 export { fetchSync } from './foundation/fetchSync/server/fetchSync.js';
 export { type HydrogenRequest } from './foundation/HydrogenRequest/HydrogenRequest.server.js';
 export { type HydrogenResponse } from './foundation/HydrogenResponse/HydrogenResponse.server.js';
-export { type HydrogenRouteProps } from './types.js';
+export { type HydrogenRouteProps, type CachingStrategy } from './types.js';
 export { type ResourceGetter as HydrogenApiRoute, RequestOptions as HydrogenApiRouteOptions, } from './utilities/apiRoutes.js';

package/dist/esnext/utilities/apiRoutes.js

@@ -161,7 +161,7 @@ export async function renderApiRoute(request, route, hydrogenConfig, { session,
         });
     }
     if (!suppressLog) {
-        logServerResponse('api', request, response.status ?? 200);
+        logServerResponse('api', request, response.status ?? 200, false);
     }
     if (response instanceof Request) {
         const url = new URL(request.url);

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

@@ -24,5 +24,5 @@ export declare type RenderType = 'str' | 'rsc' | 'ssr' | 'api';
 export declare function getLoggerWithContext(context: Partial<HydrogenRequest>): Logger;
 export declare const log: Logger;
 export declare function setLogger(config?: LoggerConfig): void;
-export declare function logServerResponse(type: RenderType, request: HydrogenRequest, responseStatus: number): void;
+export declare function logServerResponse(type: RenderType, request: HydrogenRequest, responseStatus: number, didError: boolean): void;
 export {};

package/dist/esnext/utilities/log/log.js

@@ -72,7 +72,7 @@ const SERVER_RESPONSE_MAP = {
     rsc: 'Server Components',
     ssr: 'buffered SSR',
 };
-export function logServerResponse(type, request, responseStatus) {
+export function logServerResponse(type, request, responseStatus, didError) {
     const log = getLoggerWithContext(request);
     const coloredResponseStatus = responseStatus >= 500
         ? red(responseStatus)
@@ -85,5 +85,5 @@ export function logServerResponse(type, request, responseStatus) {
     const styledType = italic(fullType.padEnd(17));
     const paddedTiming = ((getTime() - request.time).toFixed(2) + ' ms').padEnd(10);
     const url = parseUrl(type, request.url);
-    log.debug(`${request.method} ${styledType} ${coloredResponseStatus} ${paddedTiming} ${url}`);
+    log.debug(`${request.method} ${styledType} ${coloredResponseStatus} ${didError || responseStatus >= 400 ? red('error') : green('ok   ')} ${paddedTiming} ${url}`);
 }

package/dist/esnext/utilities/storefrontApi.js

@@ -13,7 +13,7 @@ export function getStorefrontApiRequestHeaders({ buyerIp, publicStorefrontToken,
                 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: ');
+                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: https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config');
             }
         }
     }
@@ -21,11 +21,8 @@ export function getStorefrontApiRequestHeaders({ buyerIp, publicStorefrontToken,
         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: ');
+            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: https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config');
             }
         }
     }

package/dist/esnext/version.d.ts

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

package/dist/esnext/version.js

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

package/package.json

@@ -7,7 +7,7 @@
   "engines": {
     "node": ">=14"
   },
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "Modern custom Shopify storefronts",
   "license": "MIT",
   "main": "dist/esnext/index.js",