@shopify/hydrogen 0.20.0 → 0.22.1

package/CHANGELOG.md

@@ -1,5 +1,156 @@
 # Changelog
 
+## 0.22.1
+
+### Patch Changes
+
+- [#1394](https://github.com/Shopify/hydrogen/pull/1394) [`3a681ac2`](https://github.com/Shopify/hydrogen/commit/3a681ac289cc7850f79bc080a445bc6c0b6926fb) Thanks [@jplhomer](https://github.com/jplhomer)! - Make graphql-tag a dependency instead of a devDependency
+
+## 0.22.0
+
+### Minor Changes
+
+- [#930](https://github.com/Shopify/hydrogen/pull/930) [`750baf8f`](https://github.com/Shopify/hydrogen/commit/750baf8ff069d0e06fb92e78a142049a1ce2b1ae) Thanks [@michenly](https://github.com/michenly)! - With the introduction of authenticated pages, we also now provide the ability to prevent pages from being indexed by bots. You can do so by passing `noindex` to the `Seo` component:
+
+  ```jsx
+  <Seo type="noindex" data={{title: 'Login'}} />
+  ```
+
+* [#1313](https://github.com/Shopify/hydrogen/pull/1313) [`ed1933e3`](https://github.com/Shopify/hydrogen/commit/ed1933e339927322d8008034982b05ff4590e6d8) Thanks [@frandiox](https://github.com/frandiox)! - **Breaking change**: The `routes` property in `hydrogen.config.js` file has been simplified. It is now a string that represents the path to the routes from the project root:
+
+  ```diff
+  // hydrogen.config.js
+
+  export default defineConfig({
+  -  routes: import('./src/routes/**/*.server.[jt](s|sx)'),
+  +  routes: '/src/routes',
+  });
+  ```
+
+  Its default value is `/src/routes` so this property can be removed when using this directory.
+
+  In the object syntax version, `dirPrefix` is removed and `files` becomes a string:
+
+  ```diff
+  // hydrogen.config.js
+
+  export default defineConfig({
+    routes: {
+  -   files: import('./src/routes/**/*.server.[jt](s|sx)'),
+  -   dirPrefix: './src/routes',
+  +   files: '/src/routes',
+      basePath: '/',
+    },
+  });
+  ```
+
+- [#1332](https://github.com/Shopify/hydrogen/pull/1332) [`5ec1bc62`](https://github.com/Shopify/hydrogen/commit/5ec1bc62cf9e4348aa389d4154f8c80dccfb96bb) Thanks [@frandiox](https://github.com/frandiox)! - A new `gql` utility is exported from `@shopify/hydrogen` that replaces `graphql-tag` dependency when using `useShopQuery`. It helps reducing bundle size in production when compared to the original `graphql-tag`.
+
+  Before:
+
+  ```js
+  import gql from 'graphql-tag';
+
+  // ...
+
+  useShopQuery({
+    query: gql`...`,
+    // ...
+  });
+  ```
+
+  After:
+
+  ```js
+  import {gql} from '@shopify/hydrogen';
+
+  // ...
+
+  useShopQuery({
+    query: gql`...`,
+    // ...
+  });
+  ```
+
+* [#1340](https://github.com/Shopify/hydrogen/pull/1340) [`631832ec`](https://github.com/Shopify/hydrogen/commit/631832ecaef26b918e774515ada6b80668ec5e4e) Thanks [@jplhomer](https://github.com/jplhomer)! - **Breaking change**: The `response.send()` function has been removed. Use `export async function api()` to send custom responses instead.
+
+### Patch Changes
+
+- [#1371](https://github.com/Shopify/hydrogen/pull/1371) [`84a2fd09`](https://github.com/Shopify/hydrogen/commit/84a2fd09b7150b1d5e1f92b786f4a6af09e18739) Thanks [@frehner](https://github.com/frehner)! - Made updates to `<Image/>`:
+
+  - Fixed some TypeScript type issues with Image.
+  - `data.url` and `alt` are now required props in Typescript, but won't break the actual component if you don't pass them.
+
+* [#1348](https://github.com/Shopify/hydrogen/pull/1348) [`211093e5`](https://github.com/Shopify/hydrogen/commit/211093e5f1a9e2ad115eb667746bfa2c6dd05b82) Thanks [@developit](https://github.com/developit)! - Fix HTML double-decoding in flight response
+
+- [#1345](https://github.com/Shopify/hydrogen/pull/1345) [`331ff3c0`](https://github.com/Shopify/hydrogen/commit/331ff3c0f58143df3e7c542116f9a94838710352) Thanks [@frandiox](https://github.com/frandiox)! - Reduce the amount of user app files downloaded in the browser.
+
+* [#1322](https://github.com/Shopify/hydrogen/pull/1322) [`36bd77c4`](https://github.com/Shopify/hydrogen/commit/36bd77c4619ec071ea11b764bb16b5670b0afa6b) Thanks [@frandiox](https://github.com/frandiox)! - Fix server hanging in Node.js environment when not using Hydrogen Middleware.
+
+- [#1360](https://github.com/Shopify/hydrogen/pull/1360) [`d9b0d03b`](https://github.com/Shopify/hydrogen/commit/d9b0d03b64d2207b314d15fc0acf6a5143610b92) Thanks [@blittle](https://github.com/blittle)! - Fix a problem where encoded html content props passed from server to client components would get double decoded, and break hydration on app load.
+
+* [#1355](https://github.com/Shopify/hydrogen/pull/1355) [`c45a45e8`](https://github.com/Shopify/hydrogen/commit/c45a45e895b8407da04c6b4608e7f16170452c24) Thanks [@jplhomer](https://github.com/jplhomer)! - Ensure all Hydrogen components are exported properly
+
+- [#1339](https://github.com/Shopify/hydrogen/pull/1339) [`fef4cb84`](https://github.com/Shopify/hydrogen/commit/fef4cb8496d985d37b6113865ac1252f78058aaa) Thanks [@jplhomer](https://github.com/jplhomer)! - Use `import.meta.env.DEV` instead of `process.env.LOCAL_DEV` to hash asset filenames and show performance metrics debugging
+
+* [#1320](https://github.com/Shopify/hydrogen/pull/1320) [`7e9df897`](https://github.com/Shopify/hydrogen/commit/7e9df897465012cd0cf374a1a35deb2ca8a16fc3) Thanks [@jplhomer](https://github.com/jplhomer)! - Properly log errors during flight responses
+
+- [#1363](https://github.com/Shopify/hydrogen/pull/1363) [`0941d3be`](https://github.com/Shopify/hydrogen/commit/0941d3be12b52edc045b898864435f591fc2c42e) Thanks [@frandiox](https://github.com/frandiox)! - Remove some server utilities from client build.
+
+## 0.21.0
+
+### Minor Changes
+
+- [#1327](https://github.com/Shopify/hydrogen/pull/1327) [`ce56311f`](https://github.com/Shopify/hydrogen/commit/ce56311fc1b63df22f77b199980439548f76997a) Thanks [@frehner](https://github.com/frehner)! - **Breaking Change**: `<Money />` updates and `<UnitPrice />` Removed.
+
+  - `<UnitPrice/>` has been removed
+  - `<Money/>` has two new props: `measurement` and `measurementSeparator` which do the work that `UnitPrice` used to do
+  - The TypeScript types for `<Money/>` have been improved and should provide a better typed experience now
+
+* [#1216](https://github.com/Shopify/hydrogen/pull/1216) [`771786a6`](https://github.com/Shopify/hydrogen/commit/771786a6475c4caadb1abe5f6644e2b5c2abc021) Thanks [@wizardlyhel](https://github.com/wizardlyhel)! - Fixes an issue where cached sub-requests were not revalidating properly.
+
+- [#1304](https://github.com/Shopify/hydrogen/pull/1304) [`aa196150`](https://github.com/Shopify/hydrogen/commit/aa19615024de4fe16d548429665a863e9aae0248) Thanks [@frehner](https://github.com/frehner)! - Removed `<ProductTitle/>` and `<ProductDescription/>` components. To migrate, use `{product.title}` and `{product.description}` instead.
+
+* [#1335](https://github.com/Shopify/hydrogen/pull/1335) [`0d90f92b`](https://github.com/Shopify/hydrogen/commit/0d90f92b448b0c4d99be3e5f5fa25d0b70a8315e) Thanks [@blittle](https://github.com/blittle)! - **Breaking Change**
+
+  The `<ProductMetafield />` component has been removed. Instead, directly use the `<Metafield>` component.
+
+### Patch Changes
+
+- [#1311](https://github.com/Shopify/hydrogen/pull/1311) [`3e3fd72f`](https://github.com/Shopify/hydrogen/commit/3e3fd72f7016c0993deceefc121306cf957ef564) Thanks [@jplhomer](https://github.com/jplhomer)! - Client components no longer need to use `@shopify/hydrogen/client` as the import path. All Hydrogen components can now be imported from `@shopify/hydrogen` regardless of their context.
+
+* [#1259](https://github.com/Shopify/hydrogen/pull/1259) [`110e9aca`](https://github.com/Shopify/hydrogen/commit/110e9aca385d553e3a87fea406f8bd8a43a0788f) Thanks [@blittle](https://github.com/blittle)! - You can now easily disable streaming on any page conditionally with the `enableStreaming` option inside `hydrogen.config.js`:
+
+  ```ts
+  import {CookieSessionStorage} from '@shopify/hydrogen';
+  import {defineConfig} from '@shopify/hydrogen/config';
+
+  export default defineConfig({
+    routes: import.meta.globEager('./src/routes/**/*.server.[jt](s|sx)'),
+    shopify: {
+      defaultLocale: 'en-us',
+      storeDomain: 'hydrogen-preview.myshopify.com',
+      storefrontToken: '3b580e70970c4528da70c98e097c2fa0',
+      storefrontApiVersion: '2022-07',
+    },
+    enableStreaming: (req) => req.headers.get('user-agent') !== 'custom bot',
+  });
+  ```
+
+  By default all pages are stream rendered except for SEO bots. There shouldn't be many reasons to disable streaming, unless there is a custom bot not covered by Hydrogen's bot detection.
+
+- [#1318](https://github.com/Shopify/hydrogen/pull/1318) [`668a24da`](https://github.com/Shopify/hydrogen/commit/668a24daebf180747a002c8020c2e712f5d9a458) Thanks [@blittle](https://github.com/blittle)! - Buffer RSC flight responses. There isn't any benefit to streaming them, because we start a transition on page navigation. Buffering also fixes caching problems on the flight response.
+
+* [#1293](https://github.com/Shopify/hydrogen/pull/1293) [`e378ed61`](https://github.com/Shopify/hydrogen/commit/e378ed6199553f64d9e73ad27f9409ef501aa724) Thanks [@jplhomer](https://github.com/jplhomer)! - Reverts [#1272](https://github.com/Shopify/hydrogen/pull/1272) and properly escapes terminating script sequences
+
+- [#1283](https://github.com/Shopify/hydrogen/pull/1283) [`eea82cb0`](https://github.com/Shopify/hydrogen/commit/eea82cb02064471d274e534c557caa5d3527bc93) Thanks [@jplhomer](https://github.com/jplhomer)! - Hydrogen has been updated to use the latest stable version of React.
+
+  To update an existing Hydrogen app:
+
+  ```bash
+  yarn add react@latest react-dom@latest
+  ```
+
 ## 0.20.0
 
 ### Minor Changes

package/dist/esnext/client.d.ts

@@ -6,6 +6,7 @@ export * from './foundation/ServerPropsProvider';
 export * from './foundation/useUrl';
 export { Head } from './foundation/Head';
 export * from './utilities';
+export { gql } from './utilities/graphql-tag';
 export { ClientAnalytics } from './foundation/Analytics';
 export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
 export { useNavigate } from './foundation/useNavigate/useNavigate';

package/dist/esnext/client.js

@@ -6,6 +6,7 @@ export * from './foundation/ServerPropsProvider';
 export * from './foundation/useUrl';
 export { Head } from './foundation/Head';
 export * from './utilities';
+export { gql } from './utilities/graphql-tag';
 export { ClientAnalytics } from './foundation/Analytics';
 export { useRouteParams } from './foundation/useRouteParams/useRouteParams';
 export { useNavigate } from './foundation/useNavigate/useNavigate';

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

@@ -11,4 +11,4 @@ export interface CartEstimatedCostProps {
  * cost associated with the `amountType` prop. If no `amountType` prop is specified, then it defaults to `totalAmount`.
  * If `children` is a function, then it will pass down the render props provided by the parent component.
  */
-export declare function CartEstimatedCost<TTag extends keyof JSX.IntrinsicElements>(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartEstimatedCostProps): JSX.Element | null;
+export declare function CartEstimatedCost(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartEstimatedCostProps): JSX.Element | null;

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

@@ -8,5 +8,5 @@ interface CartLinePriceProps {
  * The `CartLinePrice` component renders a `Money` component for the cart line merchandise's price or
  * compare at price. It must be a descendent of a `CartLineProvider` component.
  */
-export declare function CartLinePrice<TTag extends keyof JSX.IntrinsicElements>(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartLinePriceProps): JSX.Element | null;
+export declare function CartLinePrice(props: Omit<React.ComponentProps<typeof Money>, 'data'> & CartLinePriceProps): JSX.Element | null;
 export {};

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { CartBuyerIdentityInput, CountryCode } from '../../storefront-api-types';
 import { CartFragmentFragment } from './graphql/CartFragment';
 /**
  * The `CartProvider` component creates a context for using a cart. It creates a cart object and callbacks
@@ -9,7 +10,7 @@ import { CartFragmentFragment } from './graphql/CartFragment';
  * The `CartProvider` component must be a descendent of the `ShopifyProvider` component.
  * You must use this component if you want to use the `useCart` hook or related hooks, or if you would like to use the `AddToCartButton` component.
  */
-export declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, cartFragment, }: {
+export declare function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, cartFragment, customerAccessToken, countryCode, }: {
     /** Any `ReactNode` elements. */
     children: React.ReactNode;
     numCartLines?: number;
@@ -29,10 +30,12 @@ export declare function CartProvider({ children, numCartLines, onCreate, onLineA
     onAttributesUpdate?: () => void;
     /** A callback that is invoked when the process to update the cart discount codes begins, but before the discount codes are updated in the Storefront API. */
     onDiscountCodesUpdate?: () => void;
-    /**
-     * An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart).
-     */
+    /** 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;
+    /** A customer access token that's accessible on the server if there's a customer login. */
+    customerAccessToken?: CartBuyerIdentityInput['customerAccessToken'];
+    /** The ISO country code for i18n. */
+    countryCode?: CountryCode;
 }): JSX.Element;

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

@@ -1,11 +1,11 @@
 import React, { useEffect, useCallback, useReducer, useMemo, useRef, } from 'react';
-import { flattenConnection } from '../../utilities';
+import { flattenConnection } from '../../utilities/flattenConnection';
 import { CartLineAdd, CartCreate, CartLineRemove, CartLineUpdate, CartNoteUpdate, CartBuyerIdentityUpdate, CartAttributesUpdate, CartDiscountCodesUpdate, CartQuery, defaultCartFragment, } from './cart-queries';
+import { CountryCode, } from '../../storefront-api-types';
 import { useCartFetch } from './hooks.client';
 import { CartContext } from './context';
 import { CART_ID_STORAGE_KEY } from './constants';
-import { useServerProps } from '../../foundation/useServerProps';
-import { ClientAnalytics } from '../../foundation/Analytics';
+import { ClientAnalytics } from '../../foundation/Analytics/ClientAnalytics';
 function cartReducer(state, action) {
     switch (action.type) {
         case 'cartFetch': {
@@ -150,10 +150,7 @@ function cartReducer(state, action) {
  * The `CartProvider` component must be a descendent of the `ShopifyProvider` component.
  * You must use this component if you want to use the `useCart` hook or related hooks, or if you would like to use the `AddToCartButton` component.
  */
-export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, cartFragment = defaultCartFragment, }) {
-    var _a;
-    const { serverProps } = useServerProps();
-    const countryCode = (_a = serverProps === null || serverProps === void 0 ? void 0 : serverProps.country) === null || _a === void 0 ? void 0 : _a.isoCode;
+export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLineRemove, onLineUpdate, onNoteUpdate, onBuyerIdentityUpdate, onAttributesUpdate, onDiscountCodesUpdate, data: cart, cartFragment = defaultCartFragment, customerAccessToken, countryCode = CountryCode.Us, }) {
     const initialStatus = cart
         ? { status: 'idle', cart: cartFromGraphQL(cart) }
         : { status: 'uninitialized' };
@@ -177,7 +174,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
         dispatch({ type: 'resolve', cart: cartFromGraphQL(data.cart) });
     }, [fetchCart, cartFragment, numCartLines, countryCode]);
     const cartCreate = useCallback(async (cart) => {
-        var _a, _b;
+        var _a, _b, _c;
         dispatch({ type: 'cartCreate' });
         onCreate === null || onCreate === void 0 ? void 0 : onCreate();
         if (countryCode && !((_a = cart.buyerIdentity) === null || _a === void 0 ? void 0 : _a.countryCode)) {
@@ -186,6 +183,12 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             }
             cart.buyerIdentity.countryCode = countryCode;
         }
+        if (customerAccessToken && !((_b = cart.buyerIdentity) === null || _b === void 0 ? void 0 : _b.customerAccessToken)) {
+            if (cart.buyerIdentity == null) {
+                cart.buyerIdentity = {};
+            }
+            cart.buyerIdentity.customerAccessToken = customerAccessToken;
+        }
         const { data, error } = await fetchCart({
             query: CartCreate(cartFragment),
             variables: {
@@ -200,7 +203,7 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
                 error,
             });
         }
-        if ((_b = data === null || data === void 0 ? void 0 : data.cartCreate) === null || _b === void 0 ? void 0 : _b.cart) {
+        if ((_c = data === null || data === void 0 ? void 0 : data.cartCreate) === null || _c === void 0 ? void 0 : _c.cart) {
             if (cart.lines) {
                 ClientAnalytics.publish(ClientAnalytics.eventNames.ADD_TO_CART, true, {
                     addedCartLines: cart.lines,
@@ -213,7 +216,14 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             });
             window.localStorage.setItem(CART_ID_STORAGE_KEY, data.cartCreate.cart.id);
         }
-    }, [onCreate, countryCode, fetchCart, cartFragment, numCartLines]);
+    }, [
+        onCreate,
+        countryCode,
+        fetchCart,
+        cartFragment,
+        numCartLines,
+        customerAccessToken,
+    ]);
     const addLineItem = useCallback(async (lines, state) => {
         var _a;
         if (state.status === 'idle') {
@@ -439,9 +449,9 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
         if (state.status !== 'idle') {
             return;
         }
-        buyerIdentityUpdate({ countryCode }, state);
+        buyerIdentityUpdate({ countryCode, customerAccessToken }, state);
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [countryCode]);
+    }, [countryCode, customerAccessToken]);
     const cartContextValue = useMemo(() => {
         return {
             ...('cart' in state

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 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> = Simplify<ShopifyImageProps | ExternalImageProps<GenericLoaderOpts>>;
+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';
@@ -19,7 +19,7 @@ export declare type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {
      * 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: PartialDeep<ImageType>;
+    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`.
@@ -62,7 +62,7 @@ declare type LoaderProps<GenericLoaderOpts> = {
      */
     loaderOptions?: GenericLoaderOpts;
 };
-declare type ExternalImageProps<GenericLoaderOpts> = SetRequired<HtmlImageProps, 'src' | 'width' | 'height'> & {
+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`.

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

@@ -4,7 +4,7 @@ export function Image(props) {
     if (!props.data && !props.src) {
         throw new Error(`<Image/>: requires either a 'data' or 'src' prop.`);
     }
-    if (props.data && props.src) {
+    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) {
@@ -15,16 +15,16 @@ export function Image(props) {
     }
 }
 function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoader, loaderOptions, ...rest }) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f;
     if (!data.url) {
         throw new Error(`<Image/>: the 'data' prop requires the 'url' property`);
     }
-    if (!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. ${data.id ? `Image ID: ${data.id}` : ''}`);
+    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 (!finalWidth || !finalHeight) {
-        console.warn(`<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties`);
+    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) {
@@ -34,17 +34,20 @@ function ShopifyImage({ data, width, height, loading, loader = shopifyImageLoade
             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 = data.id) !== null && _a !== void 0 ? _a : '', alt: (_c = (_b = data.altText) !== null && _b !== void 0 ? _b : rest.alt) !== null && _c !== void 0 ? _c : '', 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 }));
+    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 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 (!alt) {
-        console.warn(`<Image/>: when 'src' is provided, 'alt' should also be provided`);
+    if (__DEV__ && !alt) {
+        console.warn(`<Image/>: when 'src' is provided, 'alt' should also be provided. ${`Image: ${src}`}`);
     }
     let finalSrc = src;
     if (loader) {

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

@@ -12,8 +12,9 @@ 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;
             }

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/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,6 +1,6 @@
 /// <reference types="node" />
 import { Logger } from './utilities/log';
-import type { HydrogenConfig, ImportGlobEagerOutput } from './types';
+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';
@@ -22,7 +22,7 @@ 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;