@shopify/hydrogen 0.6.3 → 0.8.0

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

@@ -7,7 +7,7 @@ export interface AddToCartButtonProps {
         value: string;
     }[];
     /** The ID of the variant. */
-    variantID: string;
+    variantId: string;
     /** The item quantity. */
     quantity?: number;
     /** Any ReactNode elements. */

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

@@ -6,7 +6,7 @@ import { useCartLinesAddCallback, useCart, useCartCreateCallback, } from '../Car
  */
 export function AddToCartButton(props) {
     const [addingItem, setAddingItem] = useState(false);
-    const { variantID, quantity = 1, attributes, children, onAdd, accessibleAddingToCartLabel, ...passthroughProps } = props;
+    const { variantId, quantity = 1, attributes, children, onAdd, accessibleAddingToCartLabel, ...passthroughProps } = props;
     const { status, id } = useCart();
     const createCart = useCartCreateCallback();
     const addLines = useCartLinesAddCallback();
@@ -23,7 +23,7 @@ export function AddToCartButton(props) {
                         lines: [
                             {
                                 quantity: quantity,
-                                merchandiseId: variantID,
+                                merchandiseId: variantId,
                                 attributes: attributes,
                             },
                         ],
@@ -33,7 +33,7 @@ export function AddToCartButton(props) {
                     addLines([
                         {
                             quantity: quantity,
-                            merchandiseId: variantID,
+                            merchandiseId: variantId,
                             attributes: attributes,
                         },
                     ]);

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

@@ -7,7 +7,7 @@ export interface CartEstimatedCostProps {
     children?: React.ReactNode;
 }
 /**
- * The [CartEstimatedCost](/api/storefront/reference/cart/cartestimatedcost) component renders a `Money` component with the
+ * The `CartEstimatedCost` component renders a `Money` component with the
  * 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.
  */

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useCart } from '../CartProvider';
 import { Money } from '../Money';
 /**
- * The [CartEstimatedCost](/api/storefront/reference/cart/cartestimatedcost) component renders a `Money` component with the
+ * The `CartEstimatedCost` component renders a `Money` component with the
  * 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.
  */

package/dist/esnext/components/CartLineProvider/context.d.ts

@@ -6,7 +6,7 @@ export declare const CartLineContext: import("react").Context<({
     } & Pick<import("../../graphql/types/types").Attribute, "key" | "value">)[];
     merchandise: {
         __typename?: "ProductVariant" | undefined;
-    } & Pick<import("../../graphql/types/types").ProductVariant, "title" | "id" | "availableForSale" | "requiresShipping"> & {
+    } & Pick<import("../../graphql/types/types").ProductVariant, "id" | "title" | "availableForSale" | "requiresShipping"> & {
         compareAtPriceV2?: import("../../graphql/types/types").Maybe<{
             __typename?: "MoneyV2" | undefined;
         } & {
@@ -21,12 +21,12 @@ export declare const CartLineContext: import("react").Context<({
             __typename?: "Image" | undefined;
         } & {
             __typename?: "Image" | undefined;
-        } & Pick<import("../../graphql/types/types").Image, "height" | "width" | "url" | "id" | "altText">> | undefined;
+        } & Pick<import("../../graphql/types/types").Image, "id" | "height" | "width" | "url" | "altText">> | undefined;
         product: {
             __typename?: "Product" | undefined;
         } & Pick<import("../../graphql/types/types").Product, "title" | "handle">;
         selectedOptions: ({
             __typename?: "SelectedOption" | undefined;
-        } & Pick<import("../../graphql/types/types").SelectedOption, "value" | "name">)[];
+        } & Pick<import("../../graphql/types/types").SelectedOption, "name" | "value">)[];
     };
 }) | null>;

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

@@ -417,7 +417,6 @@ export function CartProvider({ children, numCartLines, onCreate, onLineAdd, onLi
             return;
         }
         buyerIdentityUpdate({ countryCode }, state);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [countryCode]);
     const cartContextValue = useMemo(() => {
         return {

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

@@ -22,5 +22,5 @@ export declare function ExternalVideo<TTag extends React.ElementType = 'iframe'>
 export declare namespace ExternalVideo {
     var Fragment: string;
 }
-export declare const ExternalVideoFragment: string;
+export declare const ExternalVideoFragment = "fragment ExternalVideoFragment on ExternalVideo {\n  id\n  embeddedUrl\n  host\n}\n\n";
 export {};

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

@@ -38,5 +38,5 @@ export declare function Image<TTag extends React.ElementType = 'img'>(props: Pro
 export declare namespace Image {
     var Fragment: string;
 }
-export declare const ImageFragment: string;
+export declare const ImageFragment = "fragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n\n";
 export {};

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

@@ -1,2 +1,3 @@
+export { LocalizationProvider } from './LocalizationProvider.server';
 export { useCountry } from '../../hooks/useCountry/useCountry';
 export { useAvailableCountries } from '../../hooks/useAvailableCountries/useAvailableCountries';

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

@@ -1,2 +1,3 @@
+export { LocalizationProvider } from './LocalizationProvider.server';
 export { useCountry } from '../../hooks/useCountry/useCountry';
 export { useAvailableCountries } from '../../hooks/useAvailableCountries/useAvailableCountries';

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

@@ -24,5 +24,5 @@ export declare function MediaFile({ media, options, ...passthroughProps }: Media
 export declare namespace MediaFile {
     var Fragment: string;
 }
-export declare const MediaFileFragment: string;
+export declare const MediaFileFragment = "\nfragment MediaFileFragment on Media {\n  ... on MediaImage {\n    mediaContentType\n    image {\n      ...ImageFragment\n    }\n  }\n  ... on Video {\n    mediaContentType\n    ...VideoFragment\n  }\n  ... on ExternalVideo {\n    mediaContentType\n    ...ExternalVideoFragment\n  }\n  ... on Model3d {\n    mediaContentType\n    ...Model3DFragment\n  }\n}\n\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n\nfragment VideoFragment on Video {\n  id\n  previewImage {\n    url\n  }\n  sources {\n    mimeType\n    url\n  }\n}\n\nfragment ExternalVideoFragment on ExternalVideo {\n  id\n  embeddedUrl\n  host\n}\n\nfragment Model3DFragment on Model3d {\n  id\n  alt\n  mediaContentType\n  previewImage {\n    url\n  }\n  sources {\n    url\n  }\n}\n";
 export {};

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

@@ -22,4 +22,4 @@ export declare function Metafield<TTag extends ElementType>(props: Props<TTag> &
 export declare namespace Metafield {
     var Fragment: string;
 }
-export declare const MetafieldFragment: string;
+export declare const MetafieldFragment = "\nfragment MetafieldFragment on Metafield {\n  id\n  type\n  namespace\n  key\n  value\n  createdAt\n  updatedAt\n  description\n  reference @include(if: $includeReferenceMetafieldDetails) {\n    __typename\n    ... on MediaImage {\n      id\n      mediaContentType\n      image {\n        ...ImageFragment\n      }\n    }\n  }\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n";

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

@@ -4,6 +4,7 @@ import { getMeasurementAsString } from '../../utilities';
 import { StarRating } from './components/StarRating';
 import { RawHtml } from '../RawHtml';
 import { MetafieldFragment as Fragment } from '../../graphql/graphql-constants';
+import { Image } from '../Image';
 /**
  * The `Metafield` component renders the value of a Storefront
  * API's [Metafield object](/api/storefront/reference/common-objects/metafield).
@@ -16,6 +17,7 @@ import { MetafieldFragment as Fragment } from '../../graphql/graphql-constants';
  * Metafield's `value`. For more information, refer to the [Default Output](#default-output) section.
  */
 export function Metafield(props) {
+    var _a;
     const { metafield, children, as, ...passthroughProps } = props;
     const { locale } = useShop();
     if (metafield.value == null) {
@@ -54,6 +56,12 @@ export function Metafield(props) {
         case 'json':
             const Wrapper = as !== null && as !== void 0 ? as : 'span';
             return (React.createElement(Wrapper, { ...passthroughProps }, JSON.stringify(metafield.value)));
+        case 'file_reference': {
+            if (((_a = metafield.reference) === null || _a === void 0 ? void 0 : _a.__typename) === 'MediaImage') {
+                const ref = metafield.reference;
+                return ref.image ? (React.createElement(Image, { image: ref.image, ...passthroughProps })) : null;
+            }
+        }
         default: {
             const Wrapper = as !== null && as !== void 0 ? as : 'span';
             return (React.createElement(Wrapper, { ...passthroughProps }, metafield.value.toString()));

package/dist/esnext/components/Metafield/MetafieldFragment.d.ts

@@ -1,4 +1,19 @@
 import * as Types from '../../graphql/types/types';
+import { ImageFragmentFragment } from '../Image/ImageFragment';
 export declare type MetafieldFragmentFragment = {
     __typename?: 'Metafield';
-} & Pick<Types.Metafield, 'id' | 'type' | 'namespace' | 'key' | 'value' | 'createdAt' | 'updatedAt' | 'description'>;
+} & Pick<Types.Metafield, 'id' | 'type' | 'namespace' | 'key' | 'value' | 'createdAt' | 'updatedAt' | 'description'> & {
+    reference?: Types.Maybe<({
+        __typename: 'MediaImage';
+    } & Pick<Types.MediaImage, 'id' | 'mediaContentType'> & {
+        image?: Types.Maybe<{
+            __typename?: 'Image';
+        } & ImageFragmentFragment>;
+    }) | {
+        __typename: 'Page';
+    } | {
+        __typename: 'Product';
+    } | {
+        __typename: 'ProductVariant';
+    }>;
+};

package/dist/esnext/components/Metafield/components/StarRating/StarRating.d.ts

@@ -8,5 +8,5 @@ export interface StarRatingProps {
 }
 export declare function StarRating<TTag extends ElementType>(props: Props<TTag> & StarRatingProps): JSX.Element;
 export declare function Star({ percentFilled }: {
-    percentFilled: Number;
+    percentFilled: number;
 }): JSX.Element;

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

@@ -1,3 +1,3 @@
 export { Metafield, MetafieldFragment } from './Metafield.client';
-export { MetafieldType } from './types';
-export { MetafieldFragmentFragment } from './MetafieldFragment';
+export type { MetafieldType } from './types';
+export type { MetafieldFragmentFragment } from './MetafieldFragment';

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

@@ -15,6 +15,8 @@ export interface Model3DProps {
     };
     /** A string of either `auto`, `lazy`, or `eager` to indicate the conditions for preloading. Refer to [`loading` in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-attributes-loading). */
     loading?: 'auto' | 'lazy' | 'eager';
+    /** A url to display an image instead of the model, useful for showing the user something before a model is loaded and ready to render. If none is provided, [Model3d.previewImage](https://shopify.dev/api/storefront/reference/products/model3d#previewimage-2021-10) is used. Refer to [`poster` in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-attributes-poster). */
+    poster?: string;
     /** A string of either `auto`, `interaction`, or `manual` to indicate when the model should be revealed. Refer to [`reveal` in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-attributes-reveal). */
     reveal?: 'auto' | 'interaction' | 'manual';
     /** A boolean to enable an AR experience. Refer to [`ar` in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-ar). */
@@ -132,5 +134,5 @@ export declare function Model3D<TTag extends ElementType>(props: Props<TTag, Pro
 export declare namespace Model3D {
     var Fragment: string;
 }
-export declare const Model3DFragment: string;
+export declare const Model3DFragment = "fragment Model3DFragment on Model3d {\n  id\n  alt\n  mediaContentType\n  previewImage {\n    url\n  }\n  sources {\n    url\n  }\n}\n\n";
 export {};

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

@@ -109,7 +109,7 @@ export function Model3D(props) {
         // TODO: What do we want to display while the model-viewer library loads?
         return null;
     }
-    return (React.createElement("model-viewer", { ref: callbackRef, ...passthroughProps, class: className, id: id, src: model.sources[0].url, alt: model.alt, "camera-controls": (_a = passthroughProps.cameraControls) !== null && _a !== void 0 ? _a : true, poster: (_b = model.previewImage) === null || _b === void 0 ? void 0 : _b.url, autoplay: (_c = passthroughProps.autoplay) !== null && _c !== void 0 ? _c : true, loading: passthroughProps.loading, reveal: passthroughProps.reveal, ar: passthroughProps.ar, "ar-modes": passthroughProps.arModes, "ar-scale": passthroughProps.arScale, "ar-placement": passthroughProps.arPlacement, "ios-src": passthroughProps.iosSrc, "touch-action": passthroughProps.touchAction, "disable-zoom": passthroughProps.disableZoom, "orbit-sensitivity": passthroughProps.orbitSensitivity, "auto-rotate": passthroughProps.autoRotate, "auto-rotate-delay": passthroughProps.autoRotateDelay, "rotation-per-second": passthroughProps.rotationPerSecond, "interaction-policy": passthroughProps.interactionPolicy, "interaction-prompt": passthroughProps.interactionPrompt, "interaction-prompt-style": passthroughProps.interactionPromptStyle, "interaction-prompt-threshold": passthroughProps.interactionPromptThreshold, "camera-orbit": passthroughProps.cameraOrbit, "camera-target": passthroughProps.cameraTarget, "field-of-view": passthroughProps.fieldOfView, "max-camera-orbit": passthroughProps.maxCameraOrbit, "min-camera-orbit": passthroughProps.minCameraOrbit, "max-field-of-view": passthroughProps.maxFieldOfView, "min-field-of-view": passthroughProps.minFieldOfView, bounds: passthroughProps.bounds, "interpolation-decay": (_d = passthroughProps.interpolationDecay) !== null && _d !== void 0 ? _d : 100, "skybox-image": passthroughProps.skyboxImage, "environment-image": passthroughProps.environmentImage, exposure: passthroughProps.exposure, "shadow-intensity": (_e = passthroughProps.shadowIntensity) !== null && _e !== void 0 ? _e : 0, "shadow-softness": (_f = passthroughProps.shadowSoftness) !== null && _f !== void 0 ? _f : 0, "animation-name": passthroughProps.animationName, "animation-crossfade-duration": passthroughProps.animationCrossfadeDuration, "variant-name": passthroughProps.variantName, orientation: passthroughProps.orientation, scale: passthroughProps.scale }, children));
+    return (React.createElement("model-viewer", { ref: callbackRef, ...passthroughProps, class: className, id: id, src: model.sources[0].url, alt: model.alt, "camera-controls": (_a = passthroughProps.cameraControls) !== null && _a !== void 0 ? _a : true, poster: passthroughProps.poster || ((_b = model.previewImage) === null || _b === void 0 ? void 0 : _b.url), autoplay: (_c = passthroughProps.autoplay) !== null && _c !== void 0 ? _c : true, loading: passthroughProps.loading, reveal: passthroughProps.reveal, ar: passthroughProps.ar, "ar-modes": passthroughProps.arModes, "ar-scale": passthroughProps.arScale, "ar-placement": passthroughProps.arPlacement, "ios-src": passthroughProps.iosSrc, "touch-action": passthroughProps.touchAction, "disable-zoom": passthroughProps.disableZoom, "orbit-sensitivity": passthroughProps.orbitSensitivity, "auto-rotate": passthroughProps.autoRotate, "auto-rotate-delay": passthroughProps.autoRotateDelay, "rotation-per-second": passthroughProps.rotationPerSecond, "interaction-policy": passthroughProps.interactionPolicy, "interaction-prompt": passthroughProps.interactionPrompt, "interaction-prompt-style": passthroughProps.interactionPromptStyle, "interaction-prompt-threshold": passthroughProps.interactionPromptThreshold, "camera-orbit": passthroughProps.cameraOrbit, "camera-target": passthroughProps.cameraTarget, "field-of-view": passthroughProps.fieldOfView, "max-camera-orbit": passthroughProps.maxCameraOrbit, "min-camera-orbit": passthroughProps.minCameraOrbit, "max-field-of-view": passthroughProps.maxFieldOfView, "min-field-of-view": passthroughProps.minFieldOfView, bounds: passthroughProps.bounds, "interpolation-decay": (_d = passthroughProps.interpolationDecay) !== null && _d !== void 0 ? _d : 100, "skybox-image": passthroughProps.skyboxImage, "environment-image": passthroughProps.environmentImage, exposure: passthroughProps.exposure, "shadow-intensity": (_e = passthroughProps.shadowIntensity) !== null && _e !== void 0 ? _e : 0, "shadow-softness": (_f = passthroughProps.shadowSoftness) !== null && _f !== void 0 ? _f : 0, "animation-name": passthroughProps.animationName, "animation-crossfade-duration": passthroughProps.animationCrossfadeDuration, "variant-name": passthroughProps.variantName, orientation: passthroughProps.orientation, scale: passthroughProps.scale }, children));
 }
 Model3D.Fragment = Fragment;
 export const Model3DFragment = Fragment;

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

@@ -19,4 +19,4 @@ export declare function Money<TTag extends ElementType>(props: Props<TTag> & Mon
 export declare namespace Money {
     var Fragment: string;
 }
-export declare const MoneyFragment: string;
+export declare const MoneyFragment = "fragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\n";

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

@@ -8,8 +8,6 @@ export interface ProductPriceProps {
 }
 /**
  * The `ProductPrice` component renders a `Money` component with the product
- * [`priceRange`](/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.
+ * [`priceRange`](/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 ElementType>(props: Props<TTag> & ProductPriceProps): JSX.Element | null;

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

@@ -3,9 +3,7 @@ import { Money } from '../Money';
 import { useProduct } from '../ProductProvider';
 /**
  * The `ProductPrice` component renders a `Money` component with the product
- * [`priceRange`](/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.
+ * [`priceRange`](/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 function ProductPrice(props) {
     var _a, _b, _c, _d;

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

@@ -15,4 +15,4 @@ export declare function ProductProvider({ children, product, initialVariantId, }
 export declare namespace ProductProvider {
     var Fragment: string;
 }
-export declare const ProductProviderFragment: string;
+export declare const ProductProviderFragment = "\nfragment ProductProviderFragment on Product  {\n  compareAtPriceRange {\n    maxVariantPrice {\n      ...MoneyFragment\n    }\n    minVariantPrice {\n      ...MoneyFragment\n    }\n  }\n  descriptionHtml\n  handle\n  id\n  media(first: $numProductMedia) {\n    edges {\n      node {\n        ...MediaFileFragment\n      }\n    }\n  }\n  metafields(first: $numProductMetafields) {\n    edges {\n      node {\n        ...MetafieldFragment\n      }\n    }\n  }\n  priceRange {\n    maxVariantPrice {\n      ...MoneyFragment\n    }\n    minVariantPrice {\n      ...MoneyFragment\n    }\n  }\n  title\n  variants(first: $numProductVariants) {\n    edges {\n      node {\n        ...VariantFragment\n      }\n    }\n  }\n  sellingPlanGroups(first: $numProductSellingPlanGroups) {\n    edges {\n      node {\n        ...SellingPlanGroupsFragment\n      }\n    }\n  }\n}\n\n\nfragment MediaFileFragment on Media {\n  ... on MediaImage {\n    mediaContentType\n    image {\n      ...ImageFragment\n    }\n  }\n  ... on Video {\n    mediaContentType\n    ...VideoFragment\n  }\n  ... on ExternalVideo {\n    mediaContentType\n    ...ExternalVideoFragment\n  }\n  ... on Model3d {\n    mediaContentType\n    ...Model3DFragment\n  }\n}\n\n\nfragment MetafieldFragment on Metafield {\n  id\n  type\n  namespace\n  key\n  value\n  createdAt\n  updatedAt\n  description\n  reference @include(if: $includeReferenceMetafieldDetails) {\n    __typename\n    ... on MediaImage {\n      id\n      mediaContentType\n      image {\n        ...ImageFragment\n      }\n    }\n  }\n}\n\nfragment VariantFragment on ProductVariant {\n  id\n  title\n  availableForSale\n  image {\n    ...ImageFragment\n  }\n  ...UnitPriceFragment\n  priceV2 {\n    ...MoneyFragment\n  }\n  compareAtPriceV2 {\n    ...MoneyFragment\n  }\n  selectedOptions {\n    name\n    value\n  }\n  metafields(first: $numProductVariantMetafields) {\n    edges {\n      node {\n        ...MetafieldFragment\n      }\n    }\n  }\n  sellingPlanAllocations(first: $numProductVariantSellingPlanAllocations) {\n    edges {\n      node {\n        priceAdjustments {\n          compareAtPrice {\n            ...MoneyFragment\n          }\n          perDeliveryPrice {\n            ...MoneyFragment\n          }\n          price {\n            ...MoneyFragment\n          }\n          unitPrice {\n            ...MoneyFragment\n          }\n        }\n        sellingPlan {\n          ...SellingPlanFragment\n        }\n      }\n    }\n  }\n}\n\n\nfragment SellingPlanGroupsFragment on SellingPlanGroup {\n  sellingPlans(first:$numProductSellingPlans) {\n    edges {\n      node {\n        ...SellingPlanFragment\n      }\n    }\n  }\n  appName\n  name\n  options {\n    name\n    values\n  }\n}\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n\nfragment VideoFragment on Video {\n  id\n  previewImage {\n    url\n  }\n  sources {\n    mimeType\n    url\n  }\n}\n\nfragment ExternalVideoFragment on ExternalVideo {\n  id\n  embeddedUrl\n  host\n}\n\nfragment Model3DFragment on Model3d {\n  id\n  alt\n  mediaContentType\n  previewImage {\n    url\n  }\n  sources {\n    url\n  }\n}\n\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n\n\nfragment SellingPlanFragment on SellingPlan {\n  id\n  description\n  name\n  options {\n    name\n    value\n  }\n  priceAdjustments {\n    orderCount\n    adjustmentValue {\n      ...on SellingPlanFixedAmountPriceAdjustment {\n        adjustmentAmount {\n          ...MoneyFragment\n        }\n      }\n      ...on SellingPlanFixedPriceAdjustment {\n        price {\n          ...MoneyFragment\n        }\n      }\n      ...on SellingPlanPercentagePriceAdjustment {\n        adjustmentPercentage\n      }\n    }\n  }\n  recurringDeliveries\n}\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment ImageFragment on Image {\n  id\n  url\n  altText\n  width\n  height\n}\n\n\nfragment UnitPriceFragment on ProductVariant {\n  unitPriceMeasurement {\n    measuredType\n    quantityUnit\n    quantityValue\n    referenceUnit\n    referenceValue\n  }\n  unitPrice {\n    ...MoneyFragment\n  }\n}\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}\n\nfragment SellingPlanFragment on SellingPlan {\n  id\n  description\n  name\n  options {\n    name\n    value\n  }\n  priceAdjustments {\n    orderCount\n    adjustmentValue {\n      ...on SellingPlanFixedAmountPriceAdjustment {\n        adjustmentAmount {\n          ...MoneyFragment\n        }\n      }\n      ...on SellingPlanFixedPriceAdjustment {\n        price {\n          ...MoneyFragment\n        }\n      }\n      ...on SellingPlanPercentagePriceAdjustment {\n        adjustmentPercentage\n      }\n    }\n  }\n  recurringDeliveries\n}\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}";

package/dist/esnext/components/ProductProvider/context.d.ts

@@ -1,5 +1,5 @@
 import { ProductOptionsHookValue } from '../../hooks';
-import { GraphQLConnection, ParsedMetafield } from '../../types';
+import { GraphQLConnection, ParsedMetafield, RawMetafield } from '../../types';
 import { ProductProviderFragmentFragment } from './ProductProviderFragment';
 import { Product } from './types';
 import { Collection, Image } from '../../graphql/types/types';
@@ -8,7 +8,7 @@ export declare type ProductContextType = Omit<Product, 'media' | 'metafields' |
     media?: ProductProviderFragmentFragment['media']['edges'][0]['node'][];
     mediaConnection?: ProductProviderFragmentFragment['media'];
     metafields?: ParsedMetafield[];
-    metafieldsConnection?: ProductProviderFragmentFragment['metafields'];
+    metafieldsConnection?: GraphQLConnection<RawMetafield>;
     images?: Partial<Image>[];
     imagesConnection?: GraphQLConnection<Partial<Image>>;
     collections?: Partial<Collection>[];

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

@@ -1,5 +1,5 @@
 import { SellingPlanGroup, Variant } from '../../hooks/useProductOptions';
-import { GraphQLConnection } from '../../types';
+import { GraphQLConnection, RawMetafield } from '../../types';
 import { ProductProviderFragmentFragment } from './ProductProviderFragment';
 import { ImageFragmentFragment } from '../Image/ImageFragment';
 import { Collection } from '../../graphql/types/types';
@@ -9,7 +9,7 @@ export interface Product {
     handle?: ProductProviderFragmentFragment['descriptionHtml'];
     id?: ProductProviderFragmentFragment['id'];
     media?: ProductProviderFragmentFragment['media'];
-    metafields?: ProductProviderFragmentFragment['metafields'];
+    metafields?: GraphQLConnection<RawMetafield>;
     priceRange?: Partial<ProductProviderFragmentFragment['priceRange']>;
     title?: ProductProviderFragmentFragment['title'];
     variants?: GraphQLConnection<Variant>;

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

@@ -7,5 +7,5 @@ declare type PropsWeControl = 'disabled';
  * selected variant. Clicking this button automatically adds the selected variant to the cart.
  * It must be a descendent of a `ProductProvider` and `CartProvider` component.
  */
-export declare function SelectedVariantAddToCartButton<TTag extends React.ElementType = 'button'>(props: Props<TTag, PropsWeControl> & Omit<AddToCartButtonProps, 'variantID'>): JSX.Element;
+export declare function SelectedVariantAddToCartButton<TTag extends React.ElementType = 'button'>(props: Props<TTag, PropsWeControl> & Omit<AddToCartButtonProps, 'variantId'>): JSX.Element;
 export {};

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

@@ -13,5 +13,5 @@ export function SelectedVariantAddToCartButton(props) {
         throw new Error('Expected a Product context, but none was found');
     }
     const { children, quantity, attributes, ...passthroughProps } = props;
-    return (React.createElement(CartButton, { ...passthroughProps, variantID: (_b = (_a = product.selectedVariant) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '', quantity: quantity !== null && quantity !== void 0 ? quantity : 1, disabled: !product.selectedVariant || passthroughProps.disabled, attributes: attributes }, children));
+    return (React.createElement(CartButton, { ...passthroughProps, variantId: (_b = (_a = product.selectedVariant) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '', quantity: quantity !== null && quantity !== void 0 ? quantity : 1, disabled: !product.selectedVariant || passthroughProps.disabled, attributes: attributes }, children));
 }

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

@@ -13,8 +13,7 @@ export interface UnitPriceProps {
 }
 /**
  * The `UnitPrice` component renders a string with a [UnitPrice](/themes/pricing-payments/unit-pricing) as the
- * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from
- * the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
+ * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
  *
  * If `children` is a function, then it will provide render props for the `children` corresponding to the object
  * returned by the `useMoney` hook and the `UnitPriceMeasurement` object.
@@ -23,4 +22,4 @@ export declare function UnitPrice<TTag extends ElementType>(props: Props<TTag> &
 export declare namespace UnitPrice {
     var Fragment: string;
 }
-export declare const UnitPriceFragment: string;
+export declare const UnitPriceFragment = "\nfragment UnitPriceFragment on ProductVariant {\n  unitPriceMeasurement {\n    measuredType\n    quantityUnit\n    quantityValue\n    referenceUnit\n    referenceValue\n  }\n  unitPrice {\n    ...MoneyFragment\n  }\n}\nfragment MoneyFragment on MoneyV2 {\n  currencyCode\n  amount\n}";

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

@@ -4,8 +4,7 @@ import { Money } from '../Money';
 import { UnitPriceFragment as Fragment } from '../../graphql/graphql-constants';
 /**
  * The `UnitPrice` component renders a string with a [UnitPrice](/themes/pricing-payments/unit-pricing) as the
- * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from
- * the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
+ * [Storefront API's `MoneyV2` object](/api/storefront/reference/common-objects/moneyv2) with a reference unit from the [Storefront API's `UnitPriceMeasurement` object](/api/storefront/reference/products/unitpricemeasurement).
  *
  * If `children` is a function, then it will provide render props for the `children` corresponding to the object
  * returned by the `useMoney` hook and the `UnitPriceMeasurement` object.

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

@@ -19,4 +19,4 @@ export declare function Video<TTag extends React.ElementType = 'video'>(props: P
 export declare namespace Video {
     var Fragment: string;
 }
-export declare const VideoFragment: string;
+export declare const VideoFragment = "fragment VideoFragment on Video {\n  id\n  previewImage {\n    url\n  }\n  sources {\n    mimeType\n    url\n  }\n}\n\n";

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

@@ -15,8 +15,8 @@ export type { Model3DProps } from './Model3D';
 export { Model3D } from './Model3D';
 export type { MoneyProps } from './Money';
 export { Money } from './Money';
-export { Metafield, MetafieldFragmentFragment } from './Metafield';
-export type { MetafieldType } from './Metafield';
+export { Metafield } from './Metafield';
+export type { MetafieldType, MetafieldFragmentFragment } from './Metafield';
 export { CartLineProvider, useCartLine } from './CartLineProvider';
 export { CartLineImage } from './CartLineImage';
 export { CartLinePrice } from './CartLinePrice';
@@ -28,6 +28,7 @@ export { CartLines } from './CartLines';
 export { CartCheckoutButton } from './CartCheckoutButton';
 export { CartShopPayButton } from './CartShopPayButton';
 export { CartEstimatedCost } from './CartEstimatedCost';
+export { CartLineSelectedOptions } from './CartLineSelectedOptions';
 export { CartProvider, useCart, useCartAttributesUpdateCallback, useCartBuyerIdentityUpdateCallback, useCartNoteUpdateCallback, useCartCheckoutUrl, useCartCreateCallback, useCartDiscountCodesUpdateCallback, useCartFetch, useCartLinesAddCallback, useCartLinesRemoveCallback, useCartLinesTotalQuantity, useCartLinesUpdateCallback, useInstantCheckout, } from './CartProvider';
 export type { State, Status, Cart, CartWithActions, CartAction, } from './CartProvider';
 export { ProductProvider, useProduct, ProductProviderFragment, } from './ProductProvider';

package/dist/esnext/components/index.js

@@ -19,6 +19,7 @@ export { CartLines } from './CartLines';
 export { CartCheckoutButton } from './CartCheckoutButton';
 export { CartShopPayButton } from './CartShopPayButton';
 export { CartEstimatedCost } from './CartEstimatedCost';
+export { CartLineSelectedOptions } from './CartLineSelectedOptions';
 export { CartProvider, useCart, useCartAttributesUpdateCallback, useCartBuyerIdentityUpdateCallback, useCartNoteUpdateCallback, useCartCheckoutUrl, useCartCreateCallback, useCartDiscountCodesUpdateCallback, useCartFetch, useCartLinesAddCallback, useCartLinesRemoveCallback, useCartLinesTotalQuantity, useCartLinesUpdateCallback, useInstantCheckout, } from './CartProvider';
 export { ProductProvider, useProduct, ProductProviderFragment, } from './ProductProvider';
 export { ProductDescription } from './ProductDescription';

package/dist/esnext/entry-client.js

@@ -6,7 +6,6 @@ import { ErrorBoundary } from 'react-error-boundary';
 import { HelmetProvider } from 'react-helmet-async';
 import { useServerResponse } from './framework/Hydration/Cache.client';
 import { ServerStateProvider, ServerStateRouter } from './client';
-import { QueryProvider } from './hooks';
 const renderHydrogen = async (ClientWrapper) => {
     const root = document.getElementById('root');
     if (!root) {
@@ -25,11 +24,10 @@ function Content({ clientWrapper: ClientWrapper }) {
     });
     const response = useServerResponse(serverState);
     return (React.createElement(ServerStateProvider, { serverState: serverState, setServerState: setServerState },
-        React.createElement(QueryProvider, null,
-            React.createElement(HelmetProvider, null,
-                React.createElement(BrowserRouter, null,
-                    React.createElement(ServerStateRouter, null),
-                    React.createElement(ClientWrapper, null, response.read()))))));
+        React.createElement(HelmetProvider, null,
+            React.createElement(BrowserRouter, null,
+                React.createElement(ServerStateRouter, null),
+                React.createElement(ClientWrapper, null, response.read())))));
 }
 function Error({ error }) {
     return (React.createElement("div", { style: { padding: '1em' } },

package/dist/esnext/entry-server.js

@@ -12,8 +12,8 @@ import { HelmetProvider } from 'react-helmet-async';
 import { Html } from './framework/Hydration/Html';
 import { HydrationWriter } from './framework/Hydration/writer.server';
 import { ServerComponentResponse } from './framework/Hydration/ServerComponentResponse.server';
-import { dehydrate } from 'react-query/hydration';
 import { getCacheControlHeader } from './framework/cache';
+import { RenderCacheProvider } from './foundation/RenderCacheProvider';
 /**
  * react-dom/unstable-fizz provides different entrypoints based on runtime:
  * - `renderToReadableStream` for "browser" (aka worker)
@@ -84,26 +84,23 @@ const renderHydrogen = (App, hook) => {
                  * additional checks downstream?
                  */
                 response.setHeader(getCacheControlHeader({ dev }), componentResponse.cacheControlHeader);
+                writeHeadToServerResponse(response, componentResponse, didError);
+                if (isRedirect(response)) {
+                    // Return redirects early without further rendering/streaming
+                    return response.end();
+                }
                 if (!componentResponse.canStream())
                     return;
-                response.statusCode = didError ? 500 : 200;
-                response.setHeader('Content-type', 'text/html');
-                response.write('<!DOCTYPE html>');
-                startWriting();
-                if (dev && didError) {
-                    // This error was delayed until the headers were properly sent.
-                    response.write(getErrorMarkup(didError));
-                }
+                startWritingHtmlToServerResponse(response, startWriting, dev ? didError : undefined);
             },
             onCompleteAll() {
-                var _a;
-                if (componentResponse.canStream())
+                if (componentResponse.canStream() || response.writableEnded)
                     return;
-                response.statusCode =
-                    (_a = componentResponse.status) !== null && _a !== void 0 ? _a : (didError ? 500 : 200);
-                componentResponse.headers.forEach((value, header) => {
-                    response.setHeader(header, value);
-                });
+                writeHeadToServerResponse(response, componentResponse, didError);
+                if (isRedirect(response)) {
+                    // Redirects found after any async code
+                    return response.end();
+                }
                 if (componentResponse.customBody) {
                     if (componentResponse.customBody instanceof Promise) {
                         componentResponse.customBody.then((body) => response.end(body));
@@ -113,9 +110,7 @@ const renderHydrogen = (App, hook) => {
                     }
                 }
                 else {
-                    response.setHeader('Content-type', 'text/html');
-                    response.write('<!DOCTYPE html>');
-                    startWriting();
+                    startWritingHtmlToServerResponse(response, startWriting, dev ? didError : undefined);
                 }
             },
             onError(error) {
@@ -178,9 +173,11 @@ const renderHydrogen = (App, hook) => {
 function buildReactApp({ App, state, context, request, dev, }) {
     const helmetContext = {};
     const componentResponse = new ServerComponentResponse();
-    const ReactApp = (props) => (React.createElement(StaticRouter, { location: { pathname: state.pathname, search: state.search }, context: context },
-        React.createElement(HelmetProvider, { context: helmetContext },
-            React.createElement(App, { request: request, response: componentResponse, ...props }))));
+    const renderCache = {};
+    const ReactApp = (props) => (React.createElement(RenderCacheProvider, { cache: renderCache },
+        React.createElement(StaticRouter, { location: { pathname: state.pathname, search: state.search }, context: context },
+            React.createElement(HelmetProvider, { context: helmetContext },
+                React.createElement(App, { ...props, request: request, response: componentResponse })))));
     return { helmetContext, ReactApp, componentResponse };
 }
 function extractHeadElements(helmetContext) {
@@ -292,21 +289,41 @@ function renderAppFromBufferedStream(app, isReactHydrationRequest) {
  * the results in a context object, and re-render.
  */
 async function renderAppFromStringWithPrepass(ReactApp, state, isReactHydrationRequest) {
-    const hydrationContext = {};
     const app = isReactHydrationRequest ? (React.createElement(HydrationContext.Provider, { value: true },
-        React.createElement(ReactApp, { hydrationContext: hydrationContext, ...state }))) : (React.createElement(ReactApp, { hydrationContext: hydrationContext, ...state }));
+        React.createElement(ReactApp, { ...state }))) : (React.createElement(ReactApp, { ...state }));
     await ssrPrepass(app);
-    /**
-     * Dehydrate all the queries made during the prepass above and store
-     * them in the context object to be used for the next render pass.
-     * This prevents rendering the Suspense fallback in `renderToString`.
-     */
-    if (hydrationContext.queryClient) {
-        hydrationContext.dehydratedState = dehydrate(hydrationContext.queryClient);
-    }
     const body = renderToString(app);
     return isReactHydrationRequest
         ? generateWireSyntaxFromRenderedHtml(body)
         : body;
 }
 export default renderHydrogen;
+function startWritingHtmlToServerResponse(response, startWriting, error) {
+    if (!response.headersSent) {
+        response.setHeader('Content-type', 'text/html');
+        response.write('<!DOCTYPE html>');
+    }
+    startWriting();
+    if (error) {
+        // This error was delayed until the headers were properly sent.
+        response.write(getErrorMarkup(error));
+    }
+}
+function writeHeadToServerResponse(response, { headers, status, customStatus }, error) {
+    var _a, _b;
+    if (response.headersSent)
+        return;
+    headers.forEach((value, key) => response.setHeader(key, value));
+    if (error) {
+        response.statusCode = 500;
+    }
+    else {
+        response.statusCode = (_b = (_a = customStatus === null || customStatus === void 0 ? void 0 : customStatus.code) !== null && _a !== void 0 ? _a : status) !== null && _b !== void 0 ? _b : 200;
+        if (customStatus === null || customStatus === void 0 ? void 0 : customStatus.text) {
+            response.statusMessage = customStatus.text;
+        }
+    }
+}
+function isRedirect(response) {
+    return response.statusCode >= 300 && response.statusCode < 400;
+}

package/dist/esnext/foundation/RenderCacheProvider/RenderCacheContext.d.ts

@@ -0,0 +1,2 @@
+import type { RenderCacheProviderProps } from './types';
+export declare const RenderCacheContext: import("react").Context<RenderCacheProviderProps>;

package/dist/esnext/foundation/RenderCacheProvider/RenderCacheContext.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+export const RenderCacheContext = createContext({
+    cache: {},
+});

package/dist/esnext/foundation/RenderCacheProvider/RenderCacheProvider.d.ts

@@ -0,0 +1,2 @@
+import type { RenderCacheProviderProps } from './types';
+export declare function RenderCacheProvider({ cache, children, }: RenderCacheProviderProps): JSX.Element;

package/dist/esnext/foundation/RenderCacheProvider/RenderCacheProvider.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { RenderCacheContext } from './RenderCacheContext';
+export function RenderCacheProvider({ cache, children, }) {
+    return (React.createElement(RenderCacheContext.Provider, { value: { cache } }, children));
+}

package/dist/esnext/foundation/RenderCacheProvider/hook.d.ts

@@ -0,0 +1,11 @@
+import type { QueryKey } from '../../types';
+import type { RenderCacheProviderProps, RenderCacheResult } from './types';
+/**
+ * Returns the unique identifier for the current rendering request
+ */
+export declare function useRenderCache(): RenderCacheProviderProps;
+/**
+ * Returns data stored in the render cache
+ * It will throw the promise if data is not ready
+ */
+export declare function useRenderCacheData<T>(key: QueryKey, fetcher: () => Promise<T>): RenderCacheResult<T>;