@shopify/hydrogen 0.19.0 → 0.22.0

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

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useShop } from '../../foundation';
 import { flattenConnection } from '../../utilities';
 import { CartCreate } from './cart-queries';
+import { useCart } from '../../hooks/useCart';
 export function useCartFetch() {
     const { storeDomain, storefrontApiVersion, storefrontToken } = useShop();
     return React.useCallback(({ query, variables, }) => {
@@ -28,6 +29,7 @@ export function useCartFetch() {
     }, [storeDomain, storefrontApiVersion, storefrontToken]);
 }
 export function useInstantCheckout() {
+    const { cartFragment } = useCart();
     const [cart, updateCart] = useState();
     const [checkoutUrl, updateCheckoutUrl] = useState();
     const [error, updateError] = useState();
@@ -35,7 +37,7 @@ export function useInstantCheckout() {
     const createInstantCheckout = React.useCallback(async (cartInput) => {
         var _a, _b;
         const { data, error } = await fetch({
-            query: CartCreate,
+            query: CartCreate(cartFragment),
             variables: {
                 input: cartInput,
             },
@@ -55,6 +57,6 @@ export function useInstantCheckout() {
             });
             updateCheckoutUrl(dataCart.checkoutUrl);
         }
-    }, [fetch]);
+    }, [cartFragment, fetch]);
     return { cart, checkoutUrl, error, createInstantCheckout };
 }

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

@@ -42,6 +42,8 @@ export interface CartWithActions extends Cart {
     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 = 
 /** A cart has not been created yet, or an error occurred when a cart was attempting to be created or fetched. */

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

@@ -1,46 +1,84 @@
-import React from 'react';
-import { ImageSizeOptions, ImageLoaderOptions } from '../../utilities';
+import * as React from 'react';
 import type { Image as ImageType } from '../../storefront-api-types';
-import type { PartialDeep, Merge, MergeExclusive } from 'type-fest';
-export interface BaseImageProps {
-    /** A custom function that generates the image URL. Parameters passed into this function includes
-     * `src` and an `options` object that contains the provided `width`, `height` and `loaderOptions` values.
+import type { PartialDeep, Simplify, SetRequired } from 'type-fest';
+declare type HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+declare type ImageProps<GenericLoaderOpts> = ShopifyImageProps | ExternalImageProps<GenericLoaderOpts>;
+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?(props: ImageLoaderOptions): 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}`).
+    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?: ImageLoaderOptions['options'];
+    loaderOptions?: ShopifyLoaderOptions;
     /**
-     * Whether the image will be immediately loaded. Defaults to `false`. This prop should be used only when
-     * the image is visible above the fold. For more information, refer to the
-     * [Image Embed element's loading attribute](https://developer.mozilla.org/enUS/docs/Web/HTML/Element/img#attr-loading).
+     * 'src' shouldn't be passed when 'data' is used.
      */
-    priority?: boolean;
-}
-interface MediaImagePropsBase extends BaseImageProps {
-    /** An object with fields that correspond to the Storefront API's
-     * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).
+    src?: never;
+};
+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: PartialDeep<ImageType>;
-    /** An object of image size options for Shopify CDN images. */
-    options?: ImageSizeOptions;
-}
-interface ExternalImagePropsBase extends BaseImageProps {
-    /** A URL string. This string can be an absolute path or a relative path depending on the `loader`. */
-    src: string;
-    /** The integer value for the width of the image. This is a required prop when `src` is present. */
-    width: number;
-    /** The integer value for the height of the image. This is a required prop when `src` is present. */
-    height: number;
-}
-declare type BaseElementProps = React.ImgHTMLAttributes<HTMLImageElement>;
-declare type MediaImageProps = Merge<BaseElementProps, MediaImagePropsBase>;
-declare type ExternalImageProps = Merge<BaseElementProps, ExternalImagePropsBase>;
-declare type ImageProps = MergeExclusive<MediaImageProps, ExternalImageProps>;
-/**
- * The `Image` component renders an image for the Storefront API's
- * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).
- */
-export declare function Image(props: ImageProps): JSX.Element;
+    data?: never;
+};
 export {};

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

@@ -1,59 +1,62 @@
-import React from 'react';
-import { shopifyImageLoader, getShopifyImageDimensions, } from '../../utilities';
-/**
- * The `Image` component renders an image for the Storefront API's
- * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).
- */
+import * as React from 'react';
+import { getShopifyImageDimensions, shopifyImageLoader } from '../../utilities';
 export function Image(props) {
-    var _a, _b, _c, _d;
-    const { data, options, src, id, alt, width, height, loader, loaderOptions, priority, ...passthroughProps } = props;
-    if (!data && !src) {
-        throw new Error('Image component: requires either an `data` or `src` prop.');
-    }
-    if (!data && src && (!width || !height)) {
-        throw new Error(`Image component: when 'src' is provided, 'width' and 'height' are required and needs to be valid values (i.e. greater than zero). Provided values: 'src': ${src}, 'width': ${width}, 'height': ${height}`);
-    }
-    const imgProps = data
-        ? convertShopifyImageData({
-            data,
-            options,
-            loader,
-            loaderOptions,
-            id,
-            alt,
-            priority,
-        })
-        : {
-            src,
-            id,
-            alt,
-            width,
-            height,
-            loader,
-            priority,
-            loaderOptions: { width, height, ...loaderOptions },
-        };
-    const srcPath = imgProps.loader
-        ? imgProps.loader({ src: imgProps.src, options: imgProps.loaderOptions })
-        : imgProps.src;
+    if (!props.data && !props.src) {
+        throw new Error(`<Image/>: requires either a 'data' or 'src' prop.`);
+    }
+    if (__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, ...rest }) {
+    var _a, _b, _c, _d, _e, _f;
+    if (!data.url) {
+        throw new Error(`<Image/>: the 'data' prop requires the 'url' property`);
+    }
+    if (__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: ${(_a = data.id) !== null && _a !== void 0 ? _a : data.url}`}`);
+    }
+    const { width: finalWidth, height: finalHeight } = getShopifyImageDimensions(data, loaderOptions);
+    if ((__DEV__ && !finalWidth) || !finalHeight) {
+        console.warn(`<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. ${`Image: ${(_b = data.id) !== null && _b !== void 0 ? _b : 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: ${(_c = data.id) !== null && _c !== void 0 ? _c : data.url}`}`);
+        }
+    }
     /* eslint-disable hydrogen/prefer-image-component */
-    return (React.createElement("img", { id: (_a = imgProps.id) !== null && _a !== void 0 ? _a : '', loading: imgProps.priority ? 'eager' : 'lazy', alt: (_b = imgProps.alt) !== null && _b !== void 0 ? _b : '', ...passthroughProps, src: srcPath, width: (_c = imgProps.width) !== null && _c !== void 0 ? _c : undefined, height: (_d = imgProps.height) !== null && _d !== void 0 ? _d : undefined }));
+    return (React.createElement("img", { id: (_d = data.id) !== null && _d !== void 0 ? _d : '', alt: (_f = (_e = data.altText) !== null && _e !== void 0 ? _e : rest.alt) !== null && _f !== void 0 ? _f : '', loading: loading !== null && loading !== void 0 ? loading : 'lazy', ...rest, src: finalSrc, width: finalWidth !== null && finalWidth !== void 0 ? finalWidth : undefined, height: finalHeight !== null && finalHeight !== void 0 ? finalHeight : undefined }));
     /* eslint-enable hydrogen/prefer-image-component */
 }
-function convertShopifyImageData({ data, options, loader, priority, loaderOptions, id: propId, alt, }) {
-    const { url: src, altText, id } = data;
-    if (!src) {
-        throw new Error(`<Image/> requires 'data.url' when using the 'data' prop`);
-    }
-    const { width, height } = getShopifyImageDimensions(data, options);
-    return {
-        src,
-        id: propId ? propId : id,
-        alt: alt ? alt : altText,
-        width,
-        height,
-        loader: loader ? loader : shopifyImageLoader,
-        loaderOptions: { ...options, ...loaderOptions },
-        priority,
-    };
+function ExternalImage({ src, width, height, alt, loader, loaderOptions, 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 (__DEV__ && !alt) {
+        console.warn(`<Image/>: when 'src' is provided, 'alt' should also be provided. ${`Image: ${src}`}`);
+    }
+    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`);
+        }
+    }
+    /* eslint-disable hydrogen/prefer-image-component */
+    return (React.createElement("img", { ...rest, src: finalSrc, width: width, height: height, alt: alt !== null && alt !== void 0 ? alt : '', loading: loading !== null && loading !== void 0 ? loading : 'lazy' }));
+    /* eslint-enable hydrogen/prefer-image-component */
 }

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

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

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Image } from '../Image';
+import { type ShopifyImageProps } from '../Image';
 import { Video } from '../Video';
 import { ExternalVideo } from '../ExternalVideo';
 import type { MediaEdge as MediaEdgeType } from '../../storefront-api-types';
@@ -8,7 +8,7 @@ export interface MediaFileProps {
     /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */
     data: PartialDeep<MediaEdgeType['node']>;
     /** The options for the `Image`, `Video`, or `ExternalVideo` components. */
-    options?: React.ComponentProps<typeof Image>['options'] | React.ComponentProps<typeof Video>['options'] | React.ComponentProps<typeof ExternalVideo>['options'];
+    options?: ShopifyImageProps | React.ComponentProps<typeof Video>['previewImageOptions'] | React.ComponentProps<typeof ExternalVideo>['options'];
 }
 /**
  * The `MediaFile` component renders the media for the Storefront API's

package/dist/esnext/components/MediaFile/MediaFile.js

@@ -12,15 +12,16 @@ import { ModelViewer } from '../ModelViewer';
 export function MediaFile({ data, options, ...passthroughProps }) {
     switch (data.mediaContentType) {
         case 'IMAGE': {
-            const dataImage = data.image;
-            if (!dataImage) {
+            const dataImage = data
+                .image;
+            if (!dataImage || !dataImage.url) {
                 console.warn(`No "image" property was found on the "data" prop for <MediaFile/>, for the "type='image'"`);
                 return null;
             }
-            return (React.createElement(Image, { ...passthroughProps, data: dataImage, options: options }));
+            return (React.createElement(Image, { ...passthroughProps, data: dataImage, loaderOptions: options }));
         }
         case 'VIDEO':
-            return (React.createElement(Video, { ...passthroughProps, data: data, options: options }));
+            return (React.createElement(Video, { ...passthroughProps, data: data, previewImageOptions: options }));
         case 'EXTERNAL_VIDEO':
             return (React.createElement(ExternalVideo, { ...passthroughProps, data: data, options: options }));
         case 'MODEL_3D':

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

@@ -1,19 +1,25 @@
-import type { MoneyV2 } from '../../storefront-api-types';
+import React, { type ReactNode } from 'react';
+import type { MoneyV2, UnitPriceMeasurement } from '../../storefront-api-types';
 import type { PartialDeep } from 'type-fest';
-interface MoneyProps<TTag> {
-    /** An HTML tag to be rendered as the base element wrapper. The default is `div`. */
-    as?: TTag;
+interface CustomProps<ComponentGeneric extends React.ElementType> {
+    /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */
+    as?: ComponentGeneric;
     /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */
     data: PartialDeep<MoneyV2>;
     /** Whether to remove the currency symbol from the output. */
     withoutCurrency?: boolean;
     /** Whether to remove trailing zeros (fractional money) from the output. */
     withoutTrailingZeros?: boolean;
+    /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/latest/objects/unitpricemeasurement). */
+    measurement?: PartialDeep<UnitPriceMeasurement>;
+    /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */
+    measurementSeparator?: ReactNode;
 }
+declare type MoneyProps<ComponentGeneric extends React.ElementType> = CustomProps<ComponentGeneric> & Omit<React.ComponentPropsWithoutRef<ComponentGeneric>, keyof CustomProps<ComponentGeneric>>;
 /**
  * The `Money` component renders a string of the Storefront API's
  * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the
  * `defaultLocale` in [the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
  */
-export declare function Money<TTag extends keyof JSX.IntrinsicElements = 'div'>(props: JSX.IntrinsicElements[TTag] & MoneyProps<TTag>): JSX.Element;
+export declare function Money<TTag extends React.ElementType>({ data, as, withoutCurrency, withoutTrailingZeros, measurement, measurementSeparator, ...passthroughProps }: MoneyProps<TTag>): JSX.Element;
 export {};

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

@@ -5,8 +5,10 @@ import { useMoney } from '../../hooks';
  * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2) according to the
  * `defaultLocale` in [the `hydrogen.config.js` file](https://shopify.dev/custom-storefronts/hydrogen/framework/hydrogen-config).
  */
-export function Money(props) {
-    const { data, as, withoutCurrency, withoutTrailingZeros, ...passthroughProps } = props;
+export function Money({ data, as, withoutCurrency, withoutTrailingZeros, measurement, measurementSeparator = '/', ...passthroughProps }) {
+    if (!isMoney(data)) {
+        throw new Error(`<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`);
+    }
     const moneyObject = useMoney(data);
     const Wrapper = as !== null && as !== void 0 ? as : 'div';
     let output = moneyObject.localizedString;
@@ -22,5 +24,16 @@ export function Money(props) {
             output = moneyObject.withoutTrailingZerosAndCurrency;
         }
     }
-    return React.createElement(Wrapper, { ...passthroughProps }, output);
+    return (React.createElement(Wrapper, { ...passthroughProps },
+        output,
+        measurement && measurement.referenceUnit && (React.createElement(React.Fragment, null,
+            measurementSeparator,
+            measurement.referenceUnit))));
+}
+// required in order to narrow the money object down and make TS happy
+function isMoney(maybeMoney) {
+    return (typeof maybeMoney.amount === 'string' &&
+        !!maybeMoney.amount &&
+        typeof maybeMoney.currencyCode === 'string' &&
+        !!maybeMoney.currencyCode);
 }

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Money } from '../Money';
-import { UnitPrice } from '../UnitPrice';
 export interface ProductPriceProps {
     /** The type of price. Valid values: `regular` (default) or `compareAt`. */
     priceType?: 'regular' | 'compareAt';
@@ -13,4 +12,4 @@ export interface ProductPriceProps {
  * The `ProductPrice` component renders a `Money` component with the product
  * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range. It must be a descendent of the `ProductProvider` component.
  */
-export declare function ProductPrice<TTag extends keyof JSX.IntrinsicElements>(props: (Omit<React.ComponentProps<typeof UnitPrice>, 'data' | 'measurement'> | Omit<React.ComponentProps<typeof Money>, 'data'>) & ProductPriceProps): JSX.Element | null;
+export declare function ProductPrice<TTag extends keyof JSX.IntrinsicElements>(props: Omit<React.ComponentProps<typeof Money>, 'data' | 'measurement'> & ProductPriceProps): JSX.Element | null;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { Money } from '../Money';
 import { useProduct } from '../ProductProvider';
-import { UnitPrice } from '../UnitPrice';
 /**
  * The `ProductPrice` component renders a `Money` component with the product
  * [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range. It must be a descendent of the `ProductProvider` component.
@@ -51,7 +50,7 @@ export function ProductPrice(props) {
         return null;
     }
     if (measurement) {
-        return (React.createElement(UnitPrice, { ...passthroughProps, data: price, measurement: measurement }));
+        return (React.createElement(Money, { ...passthroughProps, data: price, measurement: measurement }));
     }
     return React.createElement(Money, { ...passthroughProps, data: price });
 }

package/dist/esnext/components/Seo/NoIndexSeo.client.d.ts

@@ -0,0 +1,3 @@
+import type { DefaultPage } from './seo-types';
+import type { PartialDeep } from 'type-fest';
+export declare function NoIndexPageSeo({ title, titleTemplate, lang, }: PartialDeep<DefaultPage>): JSX.Element;

package/dist/esnext/components/Seo/NoIndexSeo.client.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { useShop } from '../../foundation';
+import { Head } from '../../client';
+export function NoIndexPageSeo({ title, titleTemplate, lang, }) {
+    const { languageCode: fallBacklang } = useShop();
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Head, { defaultTitle: title !== null && title !== void 0 ? title : '', titleTemplate: titleTemplate !== null && titleTemplate !== void 0 ? titleTemplate : `%s - ${title}` },
+            React.createElement("html", { lang: lang !== null && lang !== void 0 ? lang : fallBacklang }),
+            React.createElement("meta", { name: "robots", content: "noindex" }))));
+}

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

@@ -2,6 +2,7 @@ import { type ComponentProps } from 'react';
 import { ProductSeo } from './ProductSeo.client';
 import { CollectionSeo } from './CollectionSeo.client';
 import { PageSeo } from './PageSeo.client';
+import { NoIndexPageSeo } from './NoIndexSeo.client';
 import type { DefaultPage as DefaultPageType, HomePage as HomePageType } from './seo-types';
 declare type Props = {
     type: 'defaultSeo';
@@ -18,6 +19,9 @@ declare type Props = {
 } | {
     type: 'page';
     data: ComponentProps<typeof PageSeo>;
+} | {
+    type: 'noindex';
+    data: ComponentProps<typeof NoIndexPageSeo>;
 };
 /**
  * The `Seo` component renders SEO information on a webpage.

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

@@ -5,6 +5,7 @@ import { HomePageSeo } from './HomePageSeo.client';
 import { ProductSeo } from './ProductSeo.client';
 import { CollectionSeo } from './CollectionSeo.client';
 import { PageSeo } from './PageSeo.client';
+import { NoIndexPageSeo } from './NoIndexSeo.client';
 /**
  * The `Seo` component renders SEO information on a webpage.
  */
@@ -21,6 +22,8 @@ export function Seo(props) {
             return React.createElement(CollectionSeo, { ...props.data });
         case 'page':
             return React.createElement(PageSeo, { ...props.data });
+        case 'noindex':
+            return React.createElement(NoIndexPageSeo, { ...props.data });
         default:
             console.warn('The <Seo/> only accepts type prop with values of defaultSeo, homepage, product, collection, or page.');
             return null;

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

@@ -1,11 +1,11 @@
-import { ImageSizeOptions } from '../../utilities';
+import { shopifyImageLoader } from '../../utilities';
 import type { Video as VideoType } from '../../storefront-api-types';
 import type { PartialDeep } from 'type-fest';
 interface VideoProps {
     /** An object with fields that correspond to the Storefront API's [Video object](https://shopify.dev/api/storefront/latest/objects/video). */
     data: PartialDeep<VideoType>;
-    /** An object of image size options for the video's `previewImage`. */
-    options?: ImageSizeOptions;
+    /** An object of image size options for the video's `previewImage`. Uses `shopifyImageLoader` to generate the `poster` URL. */
+    previewImageOptions?: Parameters<typeof shopifyImageLoader>[0];
 }
 /**
  * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).

package/dist/esnext/components/Video/Video.js

@@ -1,12 +1,15 @@
 import React from 'react';
-import { useImageUrl } from '../../utilities';
+import { shopifyImageLoader } from '../../utilities';
 /**
  * The `Video` component renders a `video` for the Storefront API's [Video object](https://shopify.dev/api/storefront/reference/products/video).
  */
 export function Video(props) {
-    var _a;
-    const { data, options, id = data.id, playsInline = true, controls = true, ...passthroughProps } = props;
-    const posterUrl = useImageUrl((_a = data.previewImage) === null || _a === void 0 ? void 0 : _a.url, options);
+    var _a, _b;
+    const { data, previewImageOptions, id = data.id, playsInline = true, controls = true, ...passthroughProps } = props;
+    const posterUrl = shopifyImageLoader({
+        src: (_b = (_a = data.previewImage) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : '',
+        ...previewImageOptions,
+    });
     if (!data.sources) {
         throw new Error(`<Video/> requires a 'data.sources' array`);
     }

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

@@ -21,10 +21,7 @@ export { CartEstimatedCost } from './CartEstimatedCost';
 export { CartProvider, useCart, useInstantCheckout } from './CartProvider';
 export type { State, Status, Cart, CartWithActions, CartAction, } from './CartProvider';
 export { ProductProvider, useProduct } from './ProductProvider';
-export { ProductDescription } from './ProductDescription';
-export { ProductTitle } from './ProductTitle';
 export { ProductPrice } from './ProductPrice';
-export { ProductMetafield } from './ProductMetafield';
 export { BuyNowButton } from './BuyNowButton';
 export { ShopPayButton } from './ShopPayButton';
 export { useCountry } from '../hooks/useCountry';

package/dist/esnext/components/index.js

@@ -19,10 +19,7 @@ export { CartShopPayButton } from './CartShopPayButton';
 export { CartEstimatedCost } from './CartEstimatedCost';
 export { CartProvider, useCart, useInstantCheckout } from './CartProvider';
 export { ProductProvider, useProduct } from './ProductProvider';
-export { ProductDescription } from './ProductDescription';
-export { ProductTitle } from './ProductTitle';
 export { ProductPrice } from './ProductPrice';
-export { ProductMetafield } from './ProductMetafield';
 export { BuyNowButton } from './BuyNowButton';
 export { ShopPayButton } from './ShopPayButton';
 export { useCountry } from '../hooks/useCountry';

package/dist/esnext/config.d.ts

@@ -1,3 +1,3 @@
-import type { HydrogenConfig } from './types';
-export declare const defineConfig: (params: HydrogenConfig) => HydrogenConfig;
-export type { HydrogenConfig };
+import type { InlineHydrogenConfig } from './types';
+export declare const defineConfig: (params: InlineHydrogenConfig) => InlineHydrogenConfig;
+export type { InlineHydrogenConfig as HydrogenConfig };

package/dist/esnext/entry-client.js

@@ -1,6 +1,4 @@
-/* eslint-disable hydrogen/no-state-in-server-components */
 import React, { Suspense, useState, StrictMode, Fragment, } from 'react';
-// @ts-expect-error hydrateRoot isn't on the TS types yet, but we're using React 18 so it exists
 import { hydrateRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
 import { useServerResponse } from './framework/Hydration/rsc';
@@ -70,4 +68,3 @@ function Error({ error }) {
                 React.createElement("a", { href: "/", style: { textDecoration: 'underline' } }, "home page"),
                 "."))));
 }
-/* eslint-enable hydrogen/no-state-in-server-components */

package/dist/esnext/entry-server.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="node" />
-import type { HydrogenConfig } from './types';
+import { Logger } from './utilities/log';
+import type { ImportGlobEagerOutput } from './types';
+import { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
+import { ServerComponentRequest } from './framework/Hydration/ServerComponentRequest.server';
 import type { ServerResponse, IncomingMessage } from 'http';
 import { RuntimeContext } from './framework/runtime';
 declare global {
@@ -19,5 +22,14 @@ interface RequestHandlerOptions {
 export interface RequestHandler {
     (request: Request | IncomingMessage, options: RequestHandlerOptions): Promise<Response | undefined>;
 }
-export declare const renderHydrogen: (App: any, hydrogenConfig?: HydrogenConfig | undefined) => RequestHandler;
+export declare const renderHydrogen: (App: any) => RequestHandler;
+declare type SharedServerProps = {
+    state?: object | null;
+    request: ServerComponentRequest;
+    response: ServerComponentResponse;
+    log: Logger;
+};
+export declare type AppProps = SharedServerProps & {
+    routes?: ImportGlobEagerOutput;
+};
 export default renderHydrogen;