@shopify/hydrogen 1.0.0-alpha.22 → 1.0.0

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

@@ -1,50 +1,84 @@
-import { CartInput, CartLineInput, CartLineUpdateInput, MutationCartNoteUpdateArgs, CartBuyerIdentityInput, MutationCartAttributesUpdateArgs, AttributeInput } from '../../graphql/types/types';
-import { CartDiscountCodesUpdateMutationVariables } from './graphql/CartDiscountCodesUpdateMutation';
+import { CartInput, CartLineInput, CartLineUpdateInput, MutationCartNoteUpdateArgs, CartBuyerIdentityInput, MutationCartAttributesUpdateArgs } from '../../storefront-api-types';
 import { CartFragmentFragment } from './graphql/CartFragment';
-import { CartNoteUpdateMutationVariables } from './graphql/CartNoteUpdateMutation';
-export declare type Status = 'uninitialized' | 'creating' | 'updating' | 'idle';
+export declare type Status = State['status'];
 export interface Cart {
+    /** The cart's ID if it has been created through the Storefront API. */
     id?: string;
+    /** The cart lines. */
     lines: CartFragmentFragment['lines']['edges'][1]['node'][];
+    /** The checkout URL for the cart, if the cart has been created in the Storefront API. */
     checkoutUrl?: string;
+    /** The cart's note. */
     note?: string;
+    /** The cart's buyer identity. */
     buyerIdentity?: CartFragmentFragment['buyerIdentity'];
+    /** The cart's attributes. */
     attributes: CartFragmentFragment['attributes'];
+    /** The discount codes applied to the cart. */
     discountCodes?: CartFragmentFragment['discountCodes'];
-    estimatedCost?: CartFragmentFragment['estimatedCost'];
+    /** The cost for the cart, including the subtotal, total, taxes, and duties. */
+    cost?: CartFragmentFragment['cost'];
+    /** The total number of items in the cart, across all lines. If there are no lines, then the value is 0. */
+    totalQuantity: number;
 }
 export interface CartWithActions extends Cart {
+    /** The status of the cart. This returns 'uninitialized' when the cart is not yet created, `creating` when the cart is being created, `fetching` when an existing cart is being fetched, `updating` when the cart is updating, and `idle` when the cart isn't being created or updated. */
     status: Status;
+    /** If an error occurred on the previous cart action, then `error` will exist and `cart` will be put back into the last valid status it was in. */
     error?: string;
+    /** A callback that creates a cart. Expects the same input you would provide to the Storefront API's `cartCreate` mutation. */
     cartCreate: (cart: CartInput) => void;
+    /** A callback that adds lines to the cart. Expects the same `lines` input that you would provide to the Storefront API's `cartLinesAdd` mutation. If a cart doesn't already exist, then it will create the cart for you. */
     linesAdd: (lines: CartLineInput[]) => void;
+    /** A callback that removes lines from the cart. Expects the same `lines` input that you would provide to the Storefront API's `cartLinesRemove` mutation. Only lines that are included in the `lines` parameter will be in the cart afterwards. */
     linesRemove: (lines: string[]) => void;
+    /** A callback that updates lines in the cart. Expects the same `lines` input that you would provide to the Storefront API's `cartLinesUpdate` mutation. If a line item is not included in the `lines` parameter, it will still exist in the cart and will not be changed. */
     linesUpdate: (lines: CartLineUpdateInput[]) => void;
+    /** A callback that updates the note in the cart. Expects the same `note` input that you would provide to the Storefront API's `cartNoteUpdate` mutation. */
     noteUpdate: (note: MutationCartNoteUpdateArgs['note']) => void;
+    /** A callback that updates the buyer identity in the cart. Expects the same `buyerIdentity` input that you would provide to the Storefront API's `cartBuyerIdentityUpdate` mutation. */
     buyerIdentityUpdate: (buyerIdenity: CartBuyerIdentityInput) => void;
+    /** A callback that updates the cart attributes. Expects the same `attributes` input that you would provide to the Storefront API's `cartAttributesUpdate` mutation. */
     cartAttributesUpdate: (attributes: MutationCartAttributesUpdateArgs['attributes']) => void;
+    /** A callback that updates the cart's discount codes. Expects the same `codes` input that you would provide to the Storefront API's `cartDiscountCodesUpdate` mutation. */
     discountCodesUpdate: (discountCodes: string[]) => void;
+    /** The total number of items in the cart, across all lines. If there are no lines, then the value is 0. */
+    totalQuantity: number;
+    /** The fragment used to query the cart object for all queries and mutations. */
+    cartFragment: string;
 }
-export declare type State = {
+export declare type State = 
+/** A cart has not been created yet, or an error occurred when a cart was attempting to be created or fetched. */
+{
     status: 'uninitialized';
     error?: string;
-} | {
+}
+/** An existing cart is being fetched from the Storefront API. */
+ | {
+    status: 'fetching';
+}
+/** A new cart is being created through the Storefront API. */
+ | {
     status: 'creating';
-} | {
+}
+/** The cart is in the process of being updated. */
+ | {
     status: 'updating';
     cart: Cart;
     lastValidCart: Cart;
-} | {
+}
+/** The cart has been created and no action is currently happening. */
+ | {
     status: 'idle';
     cart: Cart;
     error?: string;
 };
-export declare type CartEvent = {
+export declare type CartAction = {
+    type: 'cartFetch';
+} | {
     type: 'cartCreate';
-    cart: CartInput;
 } | {
     type: 'addLineItem';
-    lines: CartLineInput[];
 } | {
     type: 'removeLineItem';
     lines: string[];
@@ -53,53 +87,18 @@ export declare type CartEvent = {
     lines: CartLineUpdateInput[];
 } | {
     type: 'noteUpdate';
-    note: CartNoteUpdateMutationVariables['note'];
 } | {
     type: 'buyerIdentityUpdate';
-    buyerIdentity: CartBuyerIdentityInput;
 } | {
     type: 'cartAttributesUpdate';
-    attributes: AttributeInput[];
 } | {
     type: 'discountCodesUpdate';
-    discountCodes: CartDiscountCodesUpdateMutationVariables['discountCodes'];
 } | {
     type: 'resolve';
     cart: Cart;
 } | {
     type: 'reject';
-    error: string;
-};
-export declare type CartEffect = {
-    type: 'cartCreate';
-    cart: CartInput;
+    errors: any;
 } | {
-    type: 'addLineItem';
-    cartId: string;
-    lines: CartLineInput[];
-} | {
-    type: 'removeLineItem';
-    cartId: string;
-    lines: string[];
-} | {
-    type: 'updateLineItem';
-    cartId: string;
-    lines: CartLineUpdateInput[];
-} | {
-    type: 'noteUpdate';
-    cartId: string;
-    note: CartNoteUpdateMutationVariables['note'];
-} | {
-    type: 'buyerIdentityUpdate';
-    cartId: string;
-    buyerIdentity: CartBuyerIdentityInput;
-} | {
-    type: 'cartAttributesUpdate';
-    cartId: string;
-    attributes: AttributeInput[];
-} | {
-    type: 'discountCodesUpdate';
-    cartId: string;
-    discountCodes: CartDiscountCodesUpdateMutationVariables['discountCodes'];
+    type: 'resetCart';
 };
-export declare type StateWithEffect = [State, CartEffect] | [State];

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

@@ -1,2 +1,7 @@
-import { ShopPayButtonProps } from '../ShopPayButton';
-export declare function CartShopPayButton({ className, }: Omit<ShopPayButtonProps, 'variantIds'>): JSX.Element;
+import React from 'react';
+import { ShopPayButton } from '../ShopPayButton';
+/**
+ * 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,10 +1,17 @@
 import React, { useMemo } from 'react';
 import { useCart } from '../CartProvider';
 import { ShopPayButton } from '../ShopPayButton';
-export function CartShopPayButton({ className, }) {
+/**
+ * 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 ids = useMemo(() => {
-        return lines.map((line) => line.merchandise.id);
+    const idsAndQuantities = useMemo(() => {
+        return lines.map((line) => ({
+            id: line.merchandise.id,
+            quantity: line.quantity,
+        }));
     }, [lines]);
-    return React.createElement(ShopPayButton, { className: className, variantIds: ids });
+    return (React.createElement(ShopPayButton, { variantIdsAndQuantities: idsAndQuantities, ...props }));
 }

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

@@ -1,14 +1,21 @@
-import * as React from 'react';
 import { YouTube, Vimeo } from '../../utilities';
-import { Props } from '../types';
-import { ExternalVideo as ExternalVideoType } from '../../graphql/types/types';
-export interface ExternalVideoProps {
-    video: Pick<ExternalVideoType, 'host' | 'embeddedUrl' | 'id'>;
+import type { ExternalVideo as ExternalVideoType } from '../../storefront-api-types';
+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';
-export declare function ExternalVideo<TTag extends React.ElementType = 'iframe'>(props: Props<TTag, PropsWeControl> & ExternalVideoProps): JSX.Element;
-export declare namespace ExternalVideo {
-    var Fragment: string;
-}
+/**
+ * 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,9 +1,14 @@
-import * as React from 'react';
+import React from 'react';
 import { useEmbeddedVideoUrl } from '../../utilities';
-import { ExternalVideoFragment } from '../../graphql/graphql-constants';
+/**
+ * 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 { video, options, id = video.id, frameBorder = '0', allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture', allowFullScreen = true, ...passthroughProps } = props;
-    const url = useEmbeddedVideoUrl(video.embeddedUrl, options);
-    return (React.createElement("iframe", { ...passthroughProps, id: id, frameBorder: frameBorder, allow: allow, allowFullScreen: allowFullScreen, src: url }));
+    const { data, options, id = data.id, frameBorder = '0', allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture', allowFullScreen = true, ...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 }));
 }
-ExternalVideo.Fragment = ExternalVideoFragment;

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

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

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

@@ -1,14 +1,105 @@
 import * as React from 'react';
-import { ImageSizeOptions } from '../../utilities';
-import { Props } from '../types';
-import { Image as ImageType } from '../../graphql/types/types';
-export interface ImageProps {
-    image: Pick<ImageType, 'altText' | 'originalSrc' | 'id'>;
-    options?: ImageSizeOptions;
-}
-declare type PropsWeControl = 'src' | 'alt';
-export declare function Image<TTag extends React.ElementType = 'img'>(props: Props<TTag, PropsWeControl> & ImageProps): JSX.Element;
-export declare namespace Image {
-    var Fragment: string;
-}
+import type { Image as ImageType } from '../../storefront-api-types';
+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;
+};
+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,10 +1,136 @@
 import * as React from 'react';
-import { useImageUrl } from '../../utilities';
-import { ImageFragment } from '../../graphql/graphql-constants';
+import { getShopifyImageDimensions, shopifyImageLoader, addImageSizeParametersToUrl, } from '../../utilities';
+/**
+ * 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) {
-    var _a;
-    const { options, image, id = image.id, ...passthroughProps } = props;
-    const url = useImageUrl(image.originalSrc, options);
-    return (React.createElement("img", { id: id !== null && id !== void 0 ? id : '', ...passthroughProps, src: url, alt: (_a = image.altText) !== null && _a !== void 0 ? _a : '' }));
+    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, ...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: finalWidth, height: finalHeight } = getShopifyImageDimensions({
+        data,
+        loaderOptions,
+        elementProps: {
+            width,
+            height,
+        },
+    });
+    if (__HYDROGEN_DEV__ && (!finalWidth || !finalHeight)) {
+        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: finalWidth,
+            height: finalHeight,
+        });
+        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 && finalWidth && width < finalWidth ? width : finalWidth;
+    const finalSrcset = rest.srcSet ??
+        internalImageSrcSet({
+            ...loaderOptions,
+            widths,
+            src: data.url,
+            width: maxWidth,
+            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: finalWidth ?? undefined, height: finalHeight ?? undefined, srcSet: finalSrcset }));
+    /* eslint-enable hydrogen/prefer-image-component */
+}
+function ExternalImage({ src, width, height, alt, loader, loaderOptions, widths, loading, ...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 }));
+    /* eslint-enable hydrogen/prefer-image-component */
+}
+// based on the default width sizes used by the Shopify liquid HTML tag img_tag plus a 2560 width to account for 2k resolutions
+// reference: https://shopify.dev/api/liquid/filters/html-filters#image_tag
+const IMG_SRC_SET_SIZES = [352, 832, 1200, 1920, 2560];
+function internalImageSrcSet({ src, width, crop, scale, widths, loader, }) {
+    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 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,
+        crop,
+        scale,
+    })} ${size}w`)
+        .join(', ');
 }
-Image.Fragment = ImageFragment;

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

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

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

@@ -0,0 +1,27 @@
+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/framework/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;