@shopify/hydrogen 1.4.3 → 1.5.0

package/dist/esnext/components/CartLineProvider/tests/fixtures.d.ts

@@ -0,0 +1,86 @@
+import { CurrencyCode } from '../../../storefront-api-types.js';
+import { CartFragmentFragment } from '../../CartProvider/graphql/CartFragment.js';
+export declare const CART_LINE: {
+    attributes: {
+        key: string;
+        value: string;
+    }[];
+    quantity: number;
+    id: string;
+    merchandise: {
+        id: string;
+        availableForSale: boolean;
+        priceV2: {
+            amount: string;
+            currencyCode: CurrencyCode;
+        };
+        product: {
+            handle: string;
+            title: string;
+        };
+        requiresShipping: boolean;
+        selectedOptions: {
+            name: string;
+            value: string;
+        }[];
+        title: string;
+    };
+    cost: {
+        totalAmount: {
+            amount: string;
+            currencyCode: CurrencyCode;
+        };
+        compareAtAmount: {
+            amount: string;
+            currencyCode: CurrencyCode;
+        };
+    };
+};
+export declare function getCartLineMock(options?: Partial<CartFragmentFragment['lines']['edges'][0]['node']>): {
+    __typename?: "CartLine" | undefined;
+    id: string;
+    quantity: number;
+    attributes: ({
+        __typename?: "Attribute" | undefined;
+    } & Pick<import("../../../storefront-api-types.js").Attribute, "key" | "value">)[] | {
+        key: string;
+        value: string;
+    }[];
+    cost: ({
+        __typename?: "CartLineCost" | undefined;
+    } & {
+        totalAmount: {
+            __typename?: "MoneyV2" | undefined;
+        } & Pick<import("../../../storefront-api-types.js").MoneyV2, "currencyCode" | "amount">;
+        compareAtAmountPerQuantity?: import("../../../storefront-api-types.js").Maybe<{
+            __typename?: "MoneyV2" | undefined;
+        } & Pick<import("../../../storefront-api-types.js").MoneyV2, "currencyCode" | "amount">> | undefined;
+    }) | {
+        totalAmount: {
+            amount: string;
+            currencyCode: CurrencyCode;
+        };
+        compareAtAmount: {
+            amount: string;
+            currencyCode: CurrencyCode;
+        };
+    };
+    merchandise: {
+        id: string;
+        availableForSale: boolean;
+        priceV2: {
+            amount: string;
+            currencyCode: CurrencyCode;
+        };
+        product: {
+            handle: string;
+            title: string;
+        };
+        requiresShipping: boolean;
+        selectedOptions: {
+            name: string;
+            value: string;
+        }[];
+        title: string;
+    };
+};

package/dist/esnext/components/CartLineProvider/tests/fixtures.js

@@ -0,0 +1,34 @@
+import { CurrencyCode } from '../../../storefront-api-types.js';
+export const CART_LINE = {
+    attributes: [{ key: 'color', value: 'red' }],
+    quantity: 1,
+    id: 'abc',
+    merchandise: {
+        id: 'def',
+        availableForSale: true,
+        priceV2: {
+            amount: '123',
+            currencyCode: CurrencyCode.Usd,
+        },
+        product: {
+            handle: 'foo',
+            title: 'Product Name',
+        },
+        requiresShipping: true,
+        selectedOptions: [{ name: 'size', value: 'large' }],
+        title: 'Product Name - Large',
+    },
+    cost: {
+        totalAmount: {
+            amount: '123',
+            currencyCode: CurrencyCode.Usd,
+        },
+        compareAtAmount: {
+            amount: '125',
+            currencyCode: CurrencyCode.Usd,
+        },
+    },
+};
+export function getCartLineMock(options) {
+    return { ...CART_LINE, ...options };
+}

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, useTransition, } from 'react';
 import { CountryCode, } from '../../storefront-api-types.js';
 import { CartContext } from './context.js';
 import { useCartAPIStateMachine } from './useCartAPIStateMachine.client.js';
@@ -125,14 +125,16 @@ export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, on
         cartState.value === 'cartCompleted') &&
         countryCode !== cartState?.context?.cart?.buyerIdentity?.countryCode &&
         !cartState.context.errors;
+    const fetchingFromStorage = useRef(false);
     /**
      * Initializes cart with priority in this order:
      * 1. cart props
      * 2. localStorage cartId
      */
     useEffect(() => {
-        if (!cartReady.current) {
+        if (!cartReady.current && !fetchingFromStorage.current) {
             if (!cart && storageAvailable('localStorage')) {
+                fetchingFromStorage.current = true;
                 try {
                     const cartId = window.localStorage.getItem(CART_ID_STORAGE_KEY);
                     if (cartId) {
@@ -210,15 +212,18 @@ export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, on
             payload: cartInput,
         });
     }, [countryCode, customerAccessToken, onCartReadySend]);
+    // Delays the cart state in the context if the page is hydrating
+    // preventing suspense boundary errors.
+    const cartDisplayState = useDelayedStateUntilHydration(cartState);
     const cartContextValue = useMemo(() => {
         return {
-            ...(cartState?.context?.cart ?? { lines: [], attributes: [] }),
-            status: transposeStatus(cartState.value),
-            error: cartState?.context?.errors,
-            totalQuantity: cartState?.context?.cart?.totalQuantity ?? 0,
+            ...(cartDisplayState?.context?.cart ?? { lines: [], attributes: [] }),
+            status: transposeStatus(cartDisplayState.value),
+            error: cartDisplayState?.context?.errors,
+            totalQuantity: cartDisplayState?.context?.cart?.totalQuantity ?? 0,
             cartCreate,
             linesAdd(lines) {
-                if (cartState?.context?.cart?.id) {
+                if (cartDisplayState?.context?.cart?.id) {
                     onCartReadySend({
                         type: 'CARTLINE_ADD',
                         payload: { lines },
@@ -280,10 +285,10 @@ export function CartProviderV2({ children, numCartLines, onCreate, onLineAdd, on
         };
     }, [
         cartCreate,
+        cartDisplayState?.context?.cart,
+        cartDisplayState?.context?.errors,
+        cartDisplayState.value,
         cartFragment,
-        cartState?.context?.cart,
-        cartState?.context?.errors,
-        cartState.value,
         onCartReadySend,
     ]);
     return (React.createElement(CartContext.Provider, { value: cartContextValue }, children));
@@ -311,6 +316,31 @@ function transposeStatus(status) {
             return 'updating';
     }
 }
+/**
+ * Delays a state update until hydration finishes. Useful for preventing suspense boundaries errors when updating a context
+ * @remarks this uses startTransition and waits for it to finish.
+ */
+function useDelayedStateUntilHydration(state) {
+    const [isPending, startTransition] = useTransition();
+    const [delayedState, setDelayedState] = useState(state);
+    const firstTimePending = useRef(false);
+    if (isPending) {
+        firstTimePending.current = true;
+    }
+    const firstTimePendingFinished = useRef(false);
+    if (!isPending && firstTimePending.current) {
+        firstTimePendingFinished.current = true;
+    }
+    useEffect(() => {
+        startTransition(() => {
+            if (!firstTimePendingFinished.current) {
+                setDelayedState(state);
+            }
+        });
+    }, [state]);
+    const displayState = firstTimePendingFinished.current ? state : delayedState;
+    return displayState;
+}
 /** Check for storage availability funciton obtained from
  * https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API
  */

package/dist/esnext/components/CartProvider/tests/fixtures.d.ts

@@ -0,0 +1,254 @@
+import type { CartWithActions } from '../types.js';
+import { CartFragmentFragment } from '../graphql/CartFragment.js';
+export declare const CART: {
+    id: string;
+    checkoutUrl: string;
+    attributes: never[];
+    buyerIdentity: {};
+    discountCodes: never[];
+    totalQuantity: number;
+    cost: {
+        subtotalAmount: {
+            currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            amount: string;
+        };
+        totalAmount: {
+            currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            amount: string;
+        };
+        totalTaxAmount: {
+            currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            amount: string;
+        };
+        totalDutyAmount: {
+            currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            amount: string;
+        };
+    };
+    lines: {
+        edges: never[];
+    };
+};
+export declare function getCartMock(options?: Partial<CartFragmentFragment>): {
+    __typename?: "Cart" | undefined;
+    id: string;
+    note?: import("../../../storefront-api-types.js").Maybe<string> | undefined;
+    checkoutUrl: string;
+    totalQuantity: number;
+    buyerIdentity: {};
+    lines: ({
+        __typename?: "CartLineConnection" | undefined;
+    } & {
+        edges: ({
+            __typename?: "CartLineEdge" | undefined;
+        } & {
+            node: {
+                __typename?: "CartLine" | undefined;
+            } & Pick<import("../../../storefront-api-types.js").CartLine, "id" | "quantity"> & {
+                attributes: ({
+                    __typename?: "Attribute" | undefined;
+                } & Pick<import("../../../storefront-api-types.js").Attribute, "key" | "value">)[];
+                cost: {
+                    __typename?: "CartLineCost" | undefined;
+                } & {
+                    totalAmount: {
+                        __typename?: "MoneyV2" | undefined;
+                    } & Pick<import("../../../storefront-api-types.js").MoneyV2, "currencyCode" | "amount">;
+                    compareAtAmountPerQuantity?: import("../../../storefront-api-types.js").Maybe<{
+                        __typename?: "MoneyV2" | undefined;
+                    } & Pick<import("../../../storefront-api-types.js").MoneyV2, "currencyCode" | "amount">> | undefined;
+                };
+                merchandise: {
+                    __typename?: "ProductVariant" | undefined;
+                } & Pick<import("../../../storefront-api-types.js").ProductVariant, "id" | "title" | "availableForSale" | "requiresShipping"> & {
+                    compareAtPriceV2?: import("../../../storefront-api-types.js").Maybe<{
+                        __typename?: "MoneyV2" | undefined;
+                    } & Pick<import("../../../storefront-api-types.js").MoneyV2, "currencyCode" | "amount">> | undefined;
+                    priceV2: {
+                        __typename?: "MoneyV2" | undefined;
+                    } & Pick<import("../../../storefront-api-types.js").MoneyV2, "currencyCode" | "amount">;
+                    image?: import("../../../storefront-api-types.js").Maybe<{
+                        __typename?: "Image" | undefined;
+                    } & Pick<import("../../../storefront-api-types.js").Image, "id" | "height" | "width" | "url" | "altText">> | undefined;
+                    product: {
+                        __typename?: "Product" | undefined;
+                    } & Pick<import("../../../storefront-api-types.js").Product, "title" | "handle">;
+                    selectedOptions: ({
+                        __typename?: "SelectedOption" | undefined;
+                    } & Pick<import("../../../storefront-api-types.js").SelectedOption, "name" | "value">)[];
+                };
+            };
+        })[];
+    }) | {
+        edges: never[];
+    };
+    cost: ({
+        __typename?: "CartCost" | undefined;
+    } & {
+        subtotalAmount: {
+            __typename?: "MoneyV2" | undefined;
+        } & Pick<import("../../../storefront-api-types.js").MoneyV2, "currencyCode" | "amount">;
+        totalAmount: {
+            __typename?: "MoneyV2" | undefined;
+        } & Pick<import("../../../storefront-api-types.js").MoneyV2, "currencyCode" | "amount">;
+        totalDutyAmount?: import("../../../storefront-api-types.js").Maybe<{
+            __typename?: "MoneyV2" | undefined;
+        } & Pick<import("../../../storefront-api-types.js").MoneyV2, "currencyCode" | "amount">> | undefined;
+        totalTaxAmount?: import("../../../storefront-api-types.js").Maybe<{
+            __typename?: "MoneyV2" | undefined;
+        } & Pick<import("../../../storefront-api-types.js").MoneyV2, "currencyCode" | "amount">> | undefined;
+    }) | {
+        subtotalAmount: {
+            currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            amount: string;
+        };
+        totalAmount: {
+            currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            amount: string;
+        };
+        totalTaxAmount: {
+            currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            amount: string;
+        };
+        totalDutyAmount: {
+            currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            amount: string;
+        };
+    };
+    attributes: ({
+        __typename?: "Attribute" | undefined;
+    } & Pick<import("../../../storefront-api-types.js").Attribute, "key" | "value">)[];
+    discountCodes: ({
+        __typename?: "CartDiscountCode" | undefined;
+    } & Pick<import("../../../storefront-api-types.js").CartDiscountCode, "code" | "applicable">)[];
+};
+export declare const CART_WITH_LINES: {
+    lines: {
+        edges: {
+            node: {
+                attributes: {
+                    key: string;
+                    value: string;
+                }[];
+                quantity: number;
+                id: string;
+                merchandise: {
+                    id: string;
+                    availableForSale: boolean;
+                    priceV2: {
+                        amount: string;
+                        currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+                    };
+                    product: {
+                        handle: string;
+                        title: string;
+                    };
+                    requiresShipping: boolean;
+                    selectedOptions: {
+                        name: string;
+                        value: string;
+                    }[];
+                    title: string;
+                };
+                cost: {
+                    totalAmount: {
+                        amount: string;
+                        currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+                    };
+                    compareAtAmount: {
+                        amount: string;
+                        currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+                    };
+                };
+            };
+        }[];
+    };
+    id: string;
+    checkoutUrl: string;
+    attributes: never[];
+    buyerIdentity: {};
+    discountCodes: never[];
+    totalQuantity: number;
+    cost: {
+        subtotalAmount: {
+            currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            amount: string;
+        };
+        totalAmount: {
+            currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            amount: string;
+        };
+        totalTaxAmount: {
+            currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            amount: string;
+        };
+        totalDutyAmount: {
+            currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            amount: string;
+        };
+    };
+};
+export declare const CART_WITH_LINES_FLATTENED: {
+    lines: import("type-fest/source/partial-deep.js").PartialObjectDeep<{
+        attributes: {
+            key: string;
+            value: string;
+        }[];
+        quantity: number;
+        id: string;
+        merchandise: {
+            id: string;
+            availableForSale: boolean;
+            priceV2: {
+                amount: string;
+                currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            };
+            product: {
+                handle: string;
+                title: string;
+            };
+            requiresShipping: boolean;
+            selectedOptions: {
+                name: string;
+                value: string;
+            }[];
+            title: string;
+        };
+        cost: {
+            totalAmount: {
+                amount: string;
+                currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            };
+            compareAtAmount: {
+                amount: string;
+                currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            };
+        };
+    }>[];
+    id: string;
+    checkoutUrl: string;
+    attributes: never[];
+    buyerIdentity: {};
+    discountCodes: never[];
+    totalQuantity: number;
+    cost: {
+        subtotalAmount: {
+            currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            amount: string;
+        };
+        totalAmount: {
+            currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            amount: string;
+        };
+        totalTaxAmount: {
+            currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            amount: string;
+        };
+        totalDutyAmount: {
+            currencyCode: import("../../../storefront-api-types.js").CurrencyCode;
+            amount: string;
+        };
+    };
+};
+export declare const CART_ACTIONS: CartWithActions;
+export declare const CART_WITH_ACTIONS: CartWithActions;

package/dist/esnext/components/CartProvider/tests/fixtures.js

@@ -0,0 +1,53 @@
+import { CART_LINE } from '../../CartLineProvider/tests/fixtures.js';
+import { getPrice } from '../../../utilities/tests/price.js';
+import { flattenConnection } from '../../../utilities/index.js';
+import { defaultCartFragment } from '../cart-queries.js';
+export const CART = {
+    id: 'abc',
+    checkoutUrl: 'https://shopify.com/checkout',
+    attributes: [],
+    buyerIdentity: {},
+    discountCodes: [],
+    totalQuantity: 0,
+    cost: {
+        subtotalAmount: getPrice(),
+        totalAmount: getPrice(),
+        totalTaxAmount: getPrice(),
+        totalDutyAmount: getPrice(),
+    },
+    lines: { edges: [] },
+};
+export function getCartMock(options) {
+    return { ...CART, ...options };
+}
+export const CART_WITH_LINES = {
+    ...CART,
+    lines: { edges: [{ node: CART_LINE }] },
+};
+export const CART_WITH_LINES_FLATTENED = {
+    ...CART,
+    lines: flattenConnection(CART_WITH_LINES.lines),
+};
+export const CART_ACTIONS = {
+    // @ts-ignore
+    lines: [],
+    attributes: [],
+    status: 'idle',
+    cartCreate: () => { },
+    linesAdd: () => { },
+    linesRemove: () => { },
+    linesUpdate: () => { },
+    noteUpdate: () => { },
+    buyerIdentityUpdate: () => { },
+    cartAttributesUpdate: () => { },
+    discountCodesUpdate: () => { },
+    totalQuantity: CART_WITH_LINES_FLATTENED.lines.reduce((prev, curr) => {
+        return prev + (curr?.quantity ?? 0);
+    }, 0),
+    cartFragment: defaultCartFragment,
+};
+// @ts-ignore
+export const CART_WITH_ACTIONS = {
+    ...CART_ACTIONS,
+    ...CART_WITH_LINES_FLATTENED,
+};

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

@@ -73,10 +73,8 @@ export function Metafield(props) {
         }
         case 'list.single_line_text_field': {
             const Wrapper = as ?? 'ul';
-            // @ts-expect-error references currently only exists on 'unstable' SFAPI, but as soon as it does exist we can remove this ts-expect-error because I believe 'list.single_line_text_field' will also only be availabe in the same setting and we also handle if it doesn't exist
             const refArray = parsedMetafield.references
-                ? // @ts-expect-error references currently only exists on 'unstable' SFAPI, but as soon as it does exist we can remove this ts-expect-error
-                    flattenConnection(parsedMetafield.references)
+                ? flattenConnection(parsedMetafield.references)
                 : [];
             return (React.createElement(Wrapper, { ...passthroughProps }, refArray.map((ref, index) => (
             // there's no unique way to identify these strings, so we do our best by combining the string with the index for the key

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

@@ -108,7 +108,13 @@ function useScrollRestoration({ location, pending, serverProps, scrollNeedsResto
         }
         // If there is a location hash, scroll to it
         if (location.hash) {
-            const element = document.querySelector(location.hash);
+            let element;
+            try {
+                element = document.querySelector(location.hash);
+            }
+            catch (err) {
+                // Do nothing, hash may not be a valid selector
+            }
             if (element) {
                 element.scrollIntoView();
                 onFinishNavigating();

package/dist/esnext/framework/plugins/vite-plugin-css-rsc.d.ts

@@ -1,2 +1,2 @@
-import { Plugin } from 'vite';
+import { type Plugin } from 'vite';
 export default function cssRsc(): Plugin;