@shopify/hydrogen 1.6.4 → 2.0.0-alpha.1

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

@@ -1,21 +0,0 @@
-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: 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. */
-    onCartActionEntry?: (context: CartMachineContext, event: CartMachineActionEvent) => void;
-    /** A callback that is invoked after executing the entry actions for optimistic UI changes.  */
-    onCartActionOptimisticUI?: (context: CartMachineContext, event: CartMachineEvent) => Partial<CartMachineContext>;
-    /** A callback that is invoked after a Cart API completes. */
-    onCartActionComplete?: (context: CartMachineContext, event: CartMachineFetchResultEvent) => void;
-    /** 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;
-    /** The ISO country code for i18n. */
-    countryCode?: CountryCode;
-}): 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

@@ -1,266 +0,0 @@
-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',
-    },
-    CART_SET: {
-        target: 'idle',
-        actions: [
-            assign({
-                rawCartResult: (_, event) => event.payload.cart,
-                cart: (_, event) => cartFromGraphQL(event.payload.cart),
-            }),
-        ],
-    },
-};
-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',
-    },
-};
-function createCartMachine(initialCart) {
-    return createMachine({
-        id: 'Cart',
-        initial: initialCart ? 'idle' : 'uninitialized',
-        context: {
-            cart: initialCart && cartFromGraphQL(initialCart),
-        },
-        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'),
-        },
-    });
-}
-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) => {
-                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/components/CartShopPayButton/CartShopPayButton.client.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { ShopPayButton } from '../ShopPayButton/index.js';
-/**
- * The `CartShopPayButton` component renders a `ShopPayButton` for the items in the cart.
- * It must be a descendent of a `CartProvider` component.
- */
-export declare function CartShopPayButton(props: Omit<React.ComponentProps<typeof ShopPayButton>, 'variantIds'>): JSX.Element;

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

@@ -1,17 +0,0 @@
-import React, { useMemo } from 'react';
-import { useCart } from '../CartProvider/index.js';
-import { ShopPayButton } from '../ShopPayButton/index.js';
-/**
- * The `CartShopPayButton` component renders a `ShopPayButton` for the items in the cart.
- * It must be a descendent of a `CartProvider` component.
- */
-export function CartShopPayButton(props) {
-    const { lines } = useCart();
-    const idsAndQuantities = useMemo(() => {
-        return lines.map((line) => ({
-            id: line.merchandise.id,
-            quantity: line.quantity,
-        }));
-    }, [lines]);
-    return (React.createElement(ShopPayButton, { variantIdsAndQuantities: idsAndQuantities, ...props }));
-}

package/dist/esnext/components/CartShopPayButton/index.d.ts

@@ -1 +0,0 @@
-export { CartShopPayButton } from './CartShopPayButton.client.js';

package/dist/esnext/components/CartShopPayButton/index.js

@@ -1 +0,0 @@
-export { CartShopPayButton } from './CartShopPayButton.client.js';

package/dist/esnext/components/ExternalVideo/ExternalVideo.d.ts

@@ -1,21 +0,0 @@
-import { YouTube, Vimeo } from '../../utilities/index.js';
-import type { ExternalVideo as ExternalVideoType } from '../../storefront-api-types.js';
-import type { PartialDeep } from 'type-fest';
-interface ExternalVideoProps {
-    /**
-     * An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
-     */
-    data: PartialDeep<ExternalVideoType>;
-    /** An object containing the options available for either
-     * [YouTube](https://developers.google.com/youtube/player_parameters#Parameters) or
-     * [Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters).
-     */
-    options?: YouTube | Vimeo;
-}
-declare type PropsWeControl = 'src';
-/**
- * The `ExternalVideo` component renders an embedded video for the Storefront
- * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
- */
-export declare function ExternalVideo(props: Omit<JSX.IntrinsicElements['iframe'], PropsWeControl> & ExternalVideoProps): JSX.Element;
-export {};

package/dist/esnext/components/ExternalVideo/ExternalVideo.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import { useEmbeddedVideoUrl } from '../../utilities/index.js';
-/**
- * The `ExternalVideo` component renders an embedded video for the Storefront
- * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).
- */
-export function ExternalVideo(props) {
-    const { data, options, id = data.id, frameBorder = '0', allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture', allowFullScreen = true, loading = 'lazy', ...passthroughProps } = props;
-    if (!data.embedUrl) {
-        throw new Error(`<ExternalVideo/> requires the 'embedUrl' property`);
-    }
-    const url = useEmbeddedVideoUrl(data.embedUrl, options);
-    return (React.createElement("iframe", { ...passthroughProps, id: id ?? data.embedUrl, frameBorder: frameBorder, allow: allow, allowFullScreen: allowFullScreen, src: url, loading: loading }));
-}

package/dist/esnext/components/ExternalVideo/index.d.ts

@@ -1 +0,0 @@
-export { ExternalVideo } from './ExternalVideo.js';

package/dist/esnext/components/ExternalVideo/index.js

@@ -1 +0,0 @@
-export { ExternalVideo } from './ExternalVideo.js';

package/dist/esnext/components/Image/Image.d.ts

@@ -1,105 +0,0 @@
-import * as React from 'react';
-import type { Image as ImageType } from '../../storefront-api-types.js';
-import type { PartialDeep, Simplify, SetRequired } from 'type-fest';
-declare type HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
-declare type ImageProps<GenericLoaderOpts> = ShopifyImageProps | ExternalImageProps<GenericLoaderOpts>;
-/**
- * The `Image` component renders an image for the Storefront API's
- * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop, or a custom location by using the `src` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- *
- * An image's width and height are determined using the following priority list:
- * 1. The width and height values for the `loaderOptions` prop
- * 2. The width and height values for bare props
- * 3. The width and height values for the `data` prop
- *
- * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the image's aspect ratio,
- * provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing
- * value will remain as `null`
- */
-export declare function Image<GenericLoaderOpts>(props: ImageProps<GenericLoaderOpts>): JSX.Element;
-export declare type ShopifyLoaderOptions = {
-    crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';
-    scale?: 2 | 3;
-    width?: HtmlImageProps['width'] | ImageType['width'];
-    height?: HtmlImageProps['height'] | ImageType['height'];
-};
-export declare type ShopifyLoaderParams = Simplify<ShopifyLoaderOptions & {
-    src: ImageType['url'];
-}>;
-export declare type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {
-    /** An object with fields that correspond to the Storefront API's
-     * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).
-     * The `data` prop is required if `src` isn't used, but both props shouldn't be used
-     * at the same time. If both `src` and `data` are passed, then `data` takes priority.
-     */
-    data: SetRequired<PartialDeep<ImageType>, 'url'>;
-    /** A custom function that generates the image URL. Parameters passed in
-     * are either `ShopifyLoaderParams` if using the `data` prop, or the
-     * `LoaderOptions` object that you pass to `loaderOptions`.
-     */
-    loader?: (params: ShopifyLoaderParams) => string;
-    /** An object of `loader` function options. For example, if the `loader` function
-     * requires a `scale` option, then the value can be a property of the
-     * `loaderOptions` object (for example, `{scale: 2}`). When the `data` prop
-     * is used, the object shape will be `ShopifyLoaderOptions`. When the `src`
-     * prop is used, the data shape is whatever you define it to be, and this shape
-     * will be passed to `loader`.
-     */
-    loaderOptions?: ShopifyLoaderOptions;
-    /**
-     * 'src' shouldn't be passed when 'data' is used.
-     */
-    src?: never;
-    /**
-     * An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.
-     */
-    widths?: (HtmlImageProps['width'] | ImageType['width'])[];
-};
-declare type LoaderProps<GenericLoaderOpts> = {
-    /** A URL string. This string can be an absolute path or a relative path depending
-     * on the `loader`. The `src` prop is required if `data` isn't used, but both
-     * props shouldn't be used at the same time. If both `src` and `data` are passed,
-     * then `data` takes priority.
-     */
-    src: HtmlImageProps['src'];
-    /** The integer or string value for the width of the image. This is a required prop
-     * when `src` is present.
-     */
-    width: HtmlImageProps['width'];
-    /** The integer or string value for the height of the image. This is a required prop
-     * when `src` is present.
-     */
-    height: HtmlImageProps['height'];
-    /** An object of `loader` function options. For example, if the `loader` function
-     * requires a `scale` option, then the value can be a property of the
-     * `loaderOptions` object (for example, `{scale: 2}`). When the `data` prop
-     * is used, the object shape will be `ShopifyLoaderOptions`. When the `src`
-     * prop is used, the data shape is whatever you define it to be, and this shape
-     * will be passed to `loader`.
-     */
-    loaderOptions?: GenericLoaderOpts;
-};
-export declare type ExternalImageProps<GenericLoaderOpts> = SetRequired<HtmlImageProps, 'src' | 'width' | 'height' | 'alt'> & {
-    /** A custom function that generates the image URL. Parameters passed in
-     * are either `ShopifyLoaderParams` if using the `data` prop, or the
-     * `LoaderOptions` object that you pass to `loaderOptions`.
-     */
-    loader?: (params: LoaderProps<GenericLoaderOpts>) => string;
-    /** An object of `loader` function options. For example, if the `loader` function
-     * requires a `scale` option, then the value can be a property of the
-     * `loaderOptions` object (for example, `{scale: 2}`). When the `data` prop
-     * is used, the object shape will be `ShopifyLoaderOptions`. When the `src`
-     * prop is used, the data shape is whatever you define it to be, and this shape
-     * will be passed to `loader`.
-     */
-    loaderOptions?: GenericLoaderOpts;
-    /**
-     * 'data' shouldn't be passed when 'src' is used.
-     */
-    data?: never;
-    /**
-     * An array of pixel widths to generate a srcset. For example, `[300, 600, 800]`.
-     */
-    widths?: HtmlImageProps['width'][];
-};
-export {};

package/dist/esnext/components/Image/Image.js

@@ -1,145 +0,0 @@
-import * as React from 'react';
-import { getShopifyImageDimensions, shopifyImageLoader, addImageSizeParametersToUrl, IMG_SRC_SET_SIZES, } from '../../utilities/index.js';
-/**
- * The `Image` component renders an image for the Storefront API's
- * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop, or a custom location by using the `src` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.
- *
- * An image's width and height are determined using the following priority list:
- * 1. The width and height values for the `loaderOptions` prop
- * 2. The width and height values for bare props
- * 3. The width and height values for the `data` prop
- *
- * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the image's aspect ratio,
- * provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing
- * value will remain as `null`
- */
-export function Image(props) {
-    if (!props.data && !props.src) {
-        throw new Error(`<Image/>: requires either a 'data' or 'src' prop.`);
-    }
-    if (__HYDROGEN_DEV__ && props.data && props.src) {
-        console.warn(`<Image/>: using both 'data' and 'src' props is not supported; using the 'data' prop by default`);
-    }
-    if (props.data) {
-        return React.createElement(ShopifyImage, { ...props });
-    }
-    else {
-        return React.createElement(ExternalImage, { ...props });
-    }
-}
-function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoader, loaderOptions, widths, decoding = 'async', ...rest }) {
-    if (!data.url) {
-        throw new Error(`<Image/>: the 'data' prop requires the 'url' property`);
-    }
-    if (__HYDROGEN_DEV__ && !data.altText && !rest.alt) {
-        console.warn(`<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. ${`Image: ${data.id ?? data.url}`}`);
-    }
-    const { width: imgElementWidth, height: imgElementHeight } = getShopifyImageDimensions({
-        data,
-        loaderOptions,
-        elementProps: {
-            width,
-            height,
-        },
-    });
-    if (__HYDROGEN_DEV__ && (!imgElementWidth || !imgElementHeight)) {
-        console.warn(`<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. ${`Image: ${data.id ?? data.url}`}`);
-    }
-    let finalSrc = data.url;
-    if (loader) {
-        finalSrc = loader({
-            ...loaderOptions,
-            src: data.url,
-            width: imgElementWidth,
-            height: imgElementHeight,
-        });
-        if (typeof finalSrc !== 'string' || !finalSrc) {
-            throw new Error(`<Image/>: 'loader' did not return a valid string. ${`Image: ${data.id ?? data.url}`}`);
-        }
-    }
-    // determining what the intended width of the image is. For example, if the width is specified and lower than the image width, then that is the maximum image width
-    // to prevent generating a srcset with widths bigger than needed or to generate images that would distort because of being larger than original
-    const maxWidth = width && imgElementWidth && width < imgElementWidth
-        ? width
-        : imgElementWidth;
-    const finalSrcset = rest.srcSet ??
-        internalImageSrcSet({
-            ...loaderOptions,
-            widths,
-            src: data.url,
-            width: maxWidth,
-            height: imgElementHeight,
-            loader,
-        });
-    /* eslint-disable hydrogen/prefer-image-component */
-    return (React.createElement("img", { id: data.id ?? '', alt: data.altText ?? rest.alt ?? '', loading: loading ?? 'lazy', ...rest, src: finalSrc, width: imgElementWidth ?? undefined, height: imgElementHeight ?? undefined, srcSet: finalSrcset, decoding: decoding }));
-    /* eslint-enable hydrogen/prefer-image-component */
-}
-function ExternalImage({ src, width, height, alt, loader, loaderOptions, widths, loading, decoding = 'async', ...rest }) {
-    if (!width || !height) {
-        throw new Error(`<Image/>: when 'src' is provided, 'width' and 'height' are required and need to be valid values (i.e. greater than zero). Provided values: 'src': ${src}, 'width': ${width}, 'height': ${height}`);
-    }
-    if (__HYDROGEN_DEV__ && !alt) {
-        console.warn(`<Image/>: when 'src' is provided, 'alt' should also be provided. ${`Image: ${src}`}`);
-    }
-    if (widths &&
-        Array.isArray(widths) &&
-        widths.some((size) => isNaN(size)))
-        throw new Error(`<Image/>: the 'widths' property must be an array of numbers`);
-    let finalSrc = src;
-    if (loader) {
-        finalSrc = loader({ src, width, height, ...loaderOptions });
-        if (typeof finalSrc !== 'string' || !finalSrc) {
-            throw new Error(`<Image/>: 'loader' did not return a valid string`);
-        }
-    }
-    let finalSrcset = rest.srcSet ?? undefined;
-    if (!finalSrcset && loader && widths) {
-        // Height is a requirement in the LoaderProps, so  to keep the aspect ratio, we must determine the height based on the default values
-        const heightToWidthRatio = parseInt(height.toString()) / parseInt(width.toString());
-        finalSrcset = widths
-            ?.map((width) => parseInt(width, 10))
-            ?.map((width) => `${loader({
-            ...loaderOptions,
-            src,
-            width,
-            height: Math.floor(width * heightToWidthRatio),
-        })} ${width}w`)
-            .join(', ');
-    }
-    /* eslint-disable hydrogen/prefer-image-component */
-    return (React.createElement("img", { ...rest, src: finalSrc, 
-        // @ts-expect-error TS doesn't understand that it could exist
-        width: loaderOptions?.width ?? width, 
-        // @ts-expect-error TS doesn't understand that it could exist
-        height: loaderOptions?.height ?? height, alt: alt ?? '', loading: loading ?? 'lazy', srcSet: finalSrcset, decoding: decoding }));
-    /* eslint-enable hydrogen/prefer-image-component */
-}
-function internalImageSrcSet({ src, width, crop, scale, widths, loader, height, }) {
-    const hasCustomWidths = widths && Array.isArray(widths);
-    if (hasCustomWidths && widths.some((size) => isNaN(size))) {
-        throw new Error(`<Image/>: the 'widths' must be an array of numbers`);
-    }
-    let aspectRatio = 1;
-    if (width && height) {
-        aspectRatio = Number(height) / Number(width);
-    }
-    let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;
-    if (!hasCustomWidths &&
-        width &&
-        width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]) {
-        setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);
-    }
-    const srcGenerator = loader ? loader : addImageSizeParametersToUrl;
-    return setSizes
-        .map((size) => `${srcGenerator({
-        src,
-        width: size,
-        // height is not applied if there is no crop
-        // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size
-        height: crop ? Number(size) * aspectRatio : undefined,
-        crop,
-        scale,
-    })} ${size}w`)
-        .join(', ');
-}

package/dist/esnext/components/Image/index.d.ts

@@ -1,2 +0,0 @@
-export { Image } from './Image.js';
-export type { ShopifyLoaderParams, ShopifyLoaderOptions, ShopifyImageProps, ExternalImageProps, } from './Image.js';

package/dist/esnext/components/Image/index.js

@@ -1 +0,0 @@
-export { Image } from './Image.js';

package/dist/esnext/components/Link/Link.client.d.ts

@@ -1,27 +0,0 @@
-import React from 'react';
-export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
-    /** The destination URL that the link points to. This is the `href` attribute of the underlying `<a>` element. */
-    to: string;
-    /** Whether to update the state object or URL of the current history entry. Refer to the [history.replaceState documentation](https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState). */
-    replace?: boolean;
-    /** The custom client state with the navigation. */
-    clientState?: any;
-    /** Whether to reload the whole document on navigation. */
-    reloadDocument?: boolean;
-    /** Whether to prefetch the link source when the user signals intent. Defaults to `true`. For more information, refer to [Prefetching a link source](https://shopify.dev/custom-storefronts/hydrogen/routing/manage-routes/#prefetching-a-link-source). */
-    prefetch?: boolean;
-    /** Whether to emulate natural browser behavior and restore scroll position on navigation. Defaults to `true`. */
-    scroll?: boolean;
-    /** Override the `basePath` inherited from the Route */
-    basePath?: string;
-}
-/**
- * The `Link` component is used to navigate between routes. Because it renders an underlying `<a>` element, all
- * properties available to the `<a>` element are also available to the `Link` component.
- * For more information, refer to the [`<a>` element documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes).
- */
-export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
-/**
- * Credit: Remix's <Link> component.
- */
-export declare function composeEventHandlers<EventType extends React.SyntheticEvent | Event>(theirHandler: ((event: EventType) => any) | undefined, ourHandler: (event: EventType) => any): (event: EventType) => any;