@shopify/hydrogen-react 2023.1.7 → 2023.4.0

package/dist/types/useCartAPIStateMachine.d.ts

@@ -11,11 +11,11 @@ export declare function useCartAPIStateMachine({ numCartLines, onCartActionEntry
     onCartActionOptimisticUI?: (context: CartMachineContext, event: CartMachineEvent) => Partial<CartMachineContext>;
     /** A callback that is invoked after a Cart API completes. */
     onCartActionComplete?: (context: CartMachineContext, event: CartMachineFetchResultEvent) => void;
-    /** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart). */
+    /** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/2023-04/objects/cart). */
     data?: PartialDeep<CartType, {
         recurseIntoArrays: true;
     }>;
-    /** 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. */
+    /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2023-04/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
     cartFragment: string;
     /** The ISO country code for i18n. */
     countryCode?: CountryCode;

package/dist/types/useCartActions.d.ts

@@ -6,12 +6,12 @@ type CartResponse = PartialDeep<CartType, {
 /**
  * The `useCartActions` hook returns helper graphql functions for Storefront Cart API
  *
- * See [cart API graphql mutations](https://shopify.dev/api/storefront/2023-01/objects/Cart)
+ * See [cart API graphql mutations](https://shopify.dev/api/storefront/2023-04/objects/Cart)
  */
 export declare function useCartActions({ numCartLines, cartFragment, countryCode, }: {
     /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */
     numCartLines?: number;
-    /** 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. */
+    /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/2023-04/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */
     cartFragment: string;
     /** The ISO country code for i18n. */
     countryCode?: CountryCode;

package/dist/umd/hydrogen-react.dev.js

@@ -804,7 +804,7 @@
   }
 `
   );
-  const SFAPI_VERSION = "2023-01";
+  const SFAPI_VERSION = "2023-04";
   function createStorefrontClient(props) {
     const {
       storeDomain,
@@ -2031,6 +2031,7 @@
     }, [selectedVariant, selectedSellingPlan]);
     const value = React.useMemo(
       () => ({
+        product,
         variants,
         variantsConnection: product.variants,
         options,
@@ -2047,10 +2048,9 @@
         sellingPlanGroupsConnection: product.sellingPlanGroups
       }),
       [
+        product,
         isOptionInStock,
         options,
-        product.sellingPlanGroups,
-        product.variants,
         selectedOptions,
         selectedSellingPlan,
         selectedSellingPlanAllocation,
@@ -2270,7 +2270,7 @@
     if (typeof gid !== "string") {
       return defaultReturn;
     }
-    const matches = gid.match(/^gid:\/\/shopify\/(\w+)\/([a-z0-9]+)/);
+    const matches = gid.match(/^gid:\/\/shopify\/(\w+)\/([^/]+)/);
     if (!matches || matches.length === 1) {
       return defaultReturn;
     }
@@ -2834,21 +2834,6 @@
     }
     return /* @__PURE__ */ React.createElement(Money, { ...passthroughProps, data: amount }, children);
   }
-  function CartLinePrice(props) {
-    var _a, _b;
-    {
-      console.warn(`<CartLinePrice/> is deprecated; use <Money/> instead.`);
-    }
-    const { data: cartLine, priceType = "regular", ...passthroughProps } = props;
-    if (cartLine == null) {
-      throw new Error(`<CartLinePrice/> requires a cart line as the 'data' prop`);
-    }
-    const moneyV2 = priceType === "regular" ? (_a = cartLine.cost) == null ? void 0 : _a.totalAmount : (_b = cartLine.cost) == null ? void 0 : _b.compareAtAmountPerQuantity;
-    if (moneyV2 == null) {
-      return null;
-    }
-    return /* @__PURE__ */ React.createElement(Money, { ...passthroughProps, data: moneyV2 });
-  }
   const CartLineContext = React.createContext(null);
   function useCartLine() {
     const context = React.useContext(CartLineContext);
@@ -2953,187 +2938,354 @@
       }
     );
   }
-  const PRODUCTION_CDN_HOSTNAMES = [
-    "cdn.shopify.com",
-    "cdn.shopifycdn.net",
-    "shopify-assets.shopifycdn.com",
-    "shopify-assets.shopifycdn.net"
-  ];
-  const LOCAL_CDN_HOSTNAMES = ["spin.dev"];
-  const ALL_CDN_HOSTNAMES = [...PRODUCTION_CDN_HOSTNAMES, ...LOCAL_CDN_HOSTNAMES];
-  const IMG_SRC_SET_SIZES = [352, 832, 1200, 1920, 2560];
-  function addImageSizeParametersToUrl({
-    src,
-    width,
-    height,
-    crop,
-    scale
-  }) {
-    const newUrl = new URL(src);
-    const multipliedScale = scale ?? 1;
-    if (width) {
-      let finalWidth;
-      if (typeof width === "string") {
-        finalWidth = (IMG_SRC_SET_SIZES[0] * multipliedScale).toString();
-      } else {
-        finalWidth = (Number(width) * multipliedScale).toString();
-      }
-      newUrl.searchParams.append("width", finalWidth);
-    }
-    if (height && typeof height === "number") {
-      newUrl.searchParams.append("height", (height * multipliedScale).toString());
-    }
-    crop && newUrl.searchParams.append("crop", crop);
-    return newUrl.toString();
-  }
-  function shopifyImageLoader(params) {
-    const newSrc = new URL(params.src);
-    const isShopifyServedImage = ALL_CDN_HOSTNAMES.some(
-      (allowedHostname) => newSrc.hostname.endsWith(allowedHostname)
-    );
-    if (!isShopifyServedImage || !params.width && !params.height && !params.crop && !params.scale) {
-      return params.src;
-    }
-    return addImageSizeParametersToUrl(params);
-  }
-  function getShopifyImageDimensions({
-    data: sfapiImage,
-    loaderOptions,
-    elementProps
-  }) {
-    let aspectRatio = null;
-    if ((sfapiImage == null ? void 0 : sfapiImage.width) && (sfapiImage == null ? void 0 : sfapiImage.height)) {
-      aspectRatio = (sfapiImage == null ? void 0 : sfapiImage.width) / (sfapiImage == null ? void 0 : sfapiImage.height);
-    }
-    if ((loaderOptions == null ? void 0 : loaderOptions.width) || (loaderOptions == null ? void 0 : loaderOptions.height)) {
-      return {
-        width: (loaderOptions == null ? void 0 : loaderOptions.width) ?? (aspectRatio && typeof loaderOptions.height === "number" ? Math.round(aspectRatio * loaderOptions.height) : null),
-        height: (loaderOptions == null ? void 0 : loaderOptions.height) ?? (aspectRatio && typeof loaderOptions.width === "number" ? Math.round(aspectRatio * loaderOptions.width) : null)
-      };
-    }
-    if ((elementProps == null ? void 0 : elementProps.width) || (elementProps == null ? void 0 : elementProps.height)) {
-      return {
-        width: (elementProps == null ? void 0 : elementProps.width) ?? (aspectRatio && typeof elementProps.height === "number" ? Math.round(aspectRatio * elementProps.height) : null),
-        height: (elementProps == null ? void 0 : elementProps.height) ?? (aspectRatio && typeof elementProps.width === "number" ? Math.round(aspectRatio * elementProps.width) : null)
-      };
-    }
-    if ((sfapiImage == null ? void 0 : sfapiImage.width) || (sfapiImage == null ? void 0 : sfapiImage.height)) {
-      return {
-        // can't calculate the aspect ratio here
-        width: (sfapiImage == null ? void 0 : sfapiImage.width) ?? null,
-        height: (sfapiImage == null ? void 0 : sfapiImage.height) ?? null
-      };
-    }
-    return { width: null, height: null };
+  const IMAGE_FRAGMENT = `#graphql
+  fragment Image on Image {
+    altText
+    url
+    width
+    height
   }
-  function Image({
-    data,
-    width,
-    height,
-    loading,
-    loader = shopifyImageLoader,
-    loaderOptions,
-    widths,
-    decoding = "async",
-    ...rest
-  }) {
-    if (!data.url) {
-      const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${data.id ?? "no ID provided"}`;
-      {
-        throw new Error(missingUrlError);
-      }
-    }
-    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. Image: ${data.id ?? data.url}`
-      );
-    }
-    const { width: imgElementWidth, height: imgElementHeight } = getShopifyImageDimensions({
+`;
+  const Image = React__namespace.forwardRef(
+    ({
+      alt,
+      aspectRatio,
+      crop = "center",
       data,
+      decoding = "async",
+      height = "auto",
+      loader = shopifyLoader,
       loaderOptions,
-      elementProps: {
+      loading = "lazy",
+      sizes,
+      src,
+      srcSetOptions = {
+        intervals: 15,
+        startingWidth: 200,
+        incrementSize: 200,
+        placeholderWidth: 100
+      },
+      width = "100%",
+      widths,
+      ...passthroughProps
+    }, ref) => {
+      {
+        if (loaderOptions) {
+          console.warn(
+            [
+              `Deprecated property from original Image component in use:`,
+              `Use the \`crop\`, \`width\`, \`height\`, and src props, or`,
+              `the \`data\` prop to achieve the same result. Image used is ${src || (data == null ? void 0 : data.url) || (passthroughProps == null ? void 0 : passthroughProps.key) || "unknown"}`
+            ].join(" ")
+          );
+        }
+        if (widths) {
+          console.warn(
+            [
+              `Deprecated property from original Image component in use:`,
+              `\`widths\` are now calculated automatically based on the`,
+              `config and width props. Image used is ${src || (data == null ? void 0 : data.url) || (passthroughProps == null ? void 0 : passthroughProps.key) || "unknown"}`
+            ].join(" ")
+          );
+        }
+      }
+      const normalizedData = React__namespace.useMemo(() => {
+        const dataWidth = (data == null ? void 0 : data.width) && (data == null ? void 0 : data.height) ? data == null ? void 0 : data.width : void 0;
+        const dataHeight = (data == null ? void 0 : data.width) && (data == null ? void 0 : data.height) ? data == null ? void 0 : data.height : void 0;
+        return {
+          width: dataWidth,
+          height: dataHeight,
+          unitsMatch: Boolean(unitsMatch(dataWidth, dataHeight))
+        };
+      }, [data]);
+      const normalizedProps = React__namespace.useMemo(() => {
+        const nWidthProp = width || "100%";
+        const widthParts = getUnitValueParts(nWidthProp.toString());
+        const nWidth = `${widthParts.number}${widthParts.unit}`;
+        const autoHeight = height === void 0 || height === null;
+        const heightParts = autoHeight ? null : getUnitValueParts(height.toString());
+        const fixedHeight = heightParts ? `${heightParts.number}${heightParts.unit}` : "";
+        const nHeight = autoHeight ? "auto" : fixedHeight;
+        const nSrc = src || (data == null ? void 0 : data.url);
+        if (!nSrc) {
+          console.warn(
+            `No src or data.url provided to Image component.`,
+            (passthroughProps == null ? void 0 : passthroughProps.key) || ""
+          );
+        }
+        const nAlt = (data == null ? void 0 : data.altText) && !alt ? data == null ? void 0 : data.altText : alt || "";
+        const nAspectRatio = aspectRatio ? aspectRatio : normalizedData.unitsMatch ? [
+          getNormalizedFixedUnit(normalizedData.width),
+          getNormalizedFixedUnit(normalizedData.height)
+        ].join("/") : void 0;
+        return {
+          width: nWidth,
+          height: nHeight,
+          src: nSrc,
+          alt: nAlt,
+          aspectRatio: nAspectRatio
+        };
+      }, [
         width,
-        height
+        height,
+        src,
+        data,
+        alt,
+        aspectRatio,
+        normalizedData,
+        passthroughProps == null ? void 0 : passthroughProps.key
+      ]);
+      const { intervals, startingWidth, incrementSize, placeholderWidth } = srcSetOptions;
+      const imageWidths = React__namespace.useMemo(() => {
+        return generateImageWidths(
+          width,
+          intervals,
+          startingWidth,
+          incrementSize
+        );
+      }, [width, intervals, startingWidth, incrementSize]);
+      const fixedWidth = isFixedWidth(normalizedProps.width);
+      if (!sizes && !fixedWidth) {
+        console.warn(
+          [
+            "No sizes prop provided to Image component,",
+            "you may be loading unnecessarily large images.",
+            `Image used is ${src || (data == null ? void 0 : data.url) || (passthroughProps == null ? void 0 : passthroughProps.key) || "unknown"}`
+          ].join(" ")
+        );
       }
-    });
-    if (!imgElementWidth || !imgElementHeight) {
-      console.warn(
-        `<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${data.id ?? data.url}`
-      );
-    }
-    let finalSrc = data.url;
-    if (loader) {
-      finalSrc = loader({
-        ...loaderOptions,
-        src: data.url,
-        width: imgElementWidth,
-        height: imgElementHeight
-      });
-      if (typeof finalSrc !== "string" || !finalSrc) {
-        throw new Error(
-          `<Image/>: 'loader' did not return a valid string. Image: ${data.id ?? data.url}`
+      if (fixedWidth) {
+        return /* @__PURE__ */ React__namespace.createElement(
+          FixedWidthImage,
+          {
+            aspectRatio,
+            crop,
+            decoding,
+            height,
+            imageWidths,
+            loader,
+            loading,
+            normalizedProps,
+            passthroughProps,
+            ref,
+            width
+          }
+        );
+      } else {
+        return /* @__PURE__ */ React__namespace.createElement(
+          FluidImage,
+          {
+            aspectRatio,
+            crop,
+            decoding,
+            imageWidths,
+            loader,
+            loading,
+            normalizedProps,
+            passthroughProps,
+            placeholderWidth,
+            ref,
+            sizes
+          }
         );
       }
     }
-    const maxWidth = width && imgElementWidth && width < imgElementWidth ? width : imgElementWidth;
-    const finalSrcset = rest.srcSet ?? internalImageSrcSet({
-      ...loaderOptions,
-      widths,
-      src: data.url,
-      width: maxWidth,
-      height: imgElementHeight,
-      loader
-    });
+  );
+  function FixedWidthImage({
+    aspectRatio,
+    crop,
+    decoding,
+    height,
+    imageWidths,
+    loader = shopifyLoader,
+    loading,
+    normalizedProps,
+    passthroughProps,
+    ref,
+    width
+  }) {
+    const fixed = React__namespace.useMemo(() => {
+      const intWidth = getNormalizedFixedUnit(width);
+      const intHeight = getNormalizedFixedUnit(height);
+      const fixedAspectRatio = aspectRatio ? aspectRatio : unitsMatch(normalizedProps.width, normalizedProps.height) ? [intWidth, intHeight].join("/") : normalizedProps.aspectRatio ? normalizedProps.aspectRatio : void 0;
+      const sizesArray = imageWidths === void 0 ? void 0 : generateSizes(imageWidths, fixedAspectRatio, crop);
+      const fixedHeight = intHeight ? intHeight : fixedAspectRatio && intWidth ? intWidth * (parseAspectRatio(fixedAspectRatio) ?? 1) : void 0;
+      const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);
+      const src = loader({
+        src: normalizedProps.src,
+        width: intWidth,
+        height: fixedHeight,
+        crop: normalizedProps.height === "auto" ? void 0 : crop
+      });
+      return {
+        width: intWidth,
+        aspectRatio: fixedAspectRatio,
+        height: fixedHeight,
+        srcSet,
+        src
+      };
+    }, [aspectRatio, crop, height, imageWidths, loader, normalizedProps, width]);
     return /* @__PURE__ */ React__namespace.createElement(
       "img",
       {
-        id: data.id ?? "",
-        alt: data.altText ?? rest.alt ?? "",
-        loading: loading ?? "lazy",
-        ...rest,
-        src: finalSrc,
-        width: imgElementWidth ?? void 0,
-        height: imgElementHeight ?? void 0,
-        srcSet: finalSrcset,
-        decoding
+        ref,
+        alt: normalizedProps.alt,
+        decoding,
+        height: fixed.height,
+        loading,
+        src: fixed.src,
+        srcSet: fixed.srcSet,
+        width: fixed.width,
+        style: {
+          aspectRatio: fixed.aspectRatio,
+          ...passthroughProps.style
+        },
+        ...passthroughProps
       }
     );
   }
-  function internalImageSrcSet({
-    src,
-    width,
+  function FluidImage({
     crop,
-    scale,
-    widths,
-    loader,
-    height
+    decoding,
+    imageWidths,
+    loader = shopifyLoader,
+    loading,
+    normalizedProps,
+    passthroughProps,
+    placeholderWidth,
+    ref,
+    sizes
   }) {
-    const hasCustomWidths = widths && Array.isArray(widths);
-    if (hasCustomWidths && widths.some((size) => isNaN(size))) {
-      throw new Error(
-        `<Image/>: the 'widths' must be an array of numbers. Image: ${src}`
-      );
+    const fluid = React__namespace.useMemo(() => {
+      const sizesArray = imageWidths === void 0 ? void 0 : generateSizes(imageWidths, normalizedProps.aspectRatio, crop);
+      const placeholderHeight = normalizedProps.aspectRatio && placeholderWidth ? placeholderWidth * (parseAspectRatio(normalizedProps.aspectRatio) ?? 1) : void 0;
+      const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);
+      const src = loader({
+        src: normalizedProps.src,
+        width: placeholderWidth,
+        height: placeholderHeight,
+        crop
+      });
+      return {
+        placeholderHeight,
+        srcSet,
+        src
+      };
+    }, [crop, imageWidths, loader, normalizedProps, placeholderWidth]);
+    return /* @__PURE__ */ React__namespace.createElement(
+      "img",
+      {
+        ref,
+        alt: normalizedProps.alt,
+        decoding,
+        height: fluid.placeholderHeight,
+        loading,
+        sizes,
+        src: fluid.src,
+        srcSet: fluid.srcSet,
+        width: placeholderWidth,
+        ...passthroughProps,
+        style: {
+          width: normalizedProps.width,
+          aspectRatio: normalizedProps.aspectRatio,
+          ...passthroughProps.style
+        }
+      }
+    );
+  }
+  function shopifyLoader({ src, width, height, crop }) {
+    if (!src) {
+      return "";
+    }
+    const url = new URL(src);
+    if (width) {
+      url.searchParams.append("width", Math.round(width).toString());
+    }
+    if (height) {
+      url.searchParams.append("height", Math.round(height).toString());
+    }
+    if (crop) {
+      url.searchParams.append("crop", crop);
+    }
+    return url.href;
+  }
+  function unitsMatch(width = "100%", height = "auto") {
+    return getUnitValueParts(width.toString()).unit === getUnitValueParts(height.toString()).unit;
+  }
+  function getUnitValueParts(value) {
+    const unit = value.replace(/[0-9.]/g, "");
+    const number = parseFloat(value.replace(unit, ""));
+    return {
+      unit: unit === "" ? number === void 0 ? "auto" : "px" : unit,
+      number
+    };
+  }
+  function getNormalizedFixedUnit(value) {
+    if (value === void 0) {
+      return;
     }
-    let aspectRatio = 1;
-    if (width && height) {
-      aspectRatio = Number(height) / Number(width);
+    const { unit, number } = getUnitValueParts(value.toString());
+    switch (unit) {
+      case "em":
+        return number * 16;
+      case "rem":
+        return number * 16;
+      case "px":
+        return number;
+      case "":
+        return number;
+      default:
+        return;
     }
-    let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;
-    if (!hasCustomWidths && width && width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]) {
-      setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);
+  }
+  function isFixedWidth(width) {
+    const fixedEndings = /\d(px|em|rem)$/;
+    return typeof width === "number" || typeof width === "string" && fixedEndings.test(width);
+  }
+  function generateSrcSet(src, sizesArray, loader = shopifyLoader) {
+    if (!src) {
+      return "";
+    }
+    if ((sizesArray == null ? void 0 : sizesArray.length) === 0 || !sizesArray) {
+      return src;
     }
-    const srcGenerator = loader ? loader : addImageSizeParametersToUrl;
-    return setSizes.map(
-      (size) => `${srcGenerator({
+    return sizesArray.map(
+      (size, i2) => `${loader({
         src,
-        width: size,
-        // height is not applied if there is no crop
-        // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size
-        height: crop ? Number(size) * aspectRatio : void 0,
-        crop,
-        scale
-      })} ${size ?? ""}w`
-    ).join(", ");
+        width: size.width,
+        height: size.height,
+        crop: size.crop
+      })} ${sizesArray.length === 3 ? `${i2 + 1}x` : `${size.width ?? 0}w`}`
+    ).join(`, `);
+  }
+  function generateImageWidths(width = "100%", intervals, startingWidth, incrementSize) {
+    const responsive = Array.from(
+      { length: intervals },
+      (_, i2) => i2 * incrementSize + startingWidth
+    );
+    const fixed = Array.from(
+      { length: 3 },
+      (_, i2) => (i2 + 1) * (getNormalizedFixedUnit(width) ?? 0)
+    );
+    return isFixedWidth(width) ? fixed : responsive;
+  }
+  function parseAspectRatio(aspectRatio) {
+    if (!aspectRatio)
+      return;
+    const [width, height] = aspectRatio.split("/");
+    return 1 / (Number(width) / Number(height));
+  }
+  function generateSizes(imageWidths, aspectRatio, crop = "center") {
+    if (!imageWidths)
+      return;
+    const sizes = imageWidths.map((width) => {
+      return {
+        width,
+        height: aspectRatio ? width * (parseAspectRatio(aspectRatio) ?? 1) : void 0,
+        crop
+      };
+    });
+    return sizes;
   }
   function Video(props) {
     var _a;
@@ -3146,7 +3298,7 @@
       sourceProps = {},
       ...passthroughProps
     } = props;
-    const posterUrl = shopifyImageLoader({
+    const posterUrl = shopifyLoader({
       src: ((_a = data.previewImage) == null ? void 0 : _a.url) ?? "",
       ...previewImageOptions
     });
@@ -3730,12 +3882,12 @@
   exports2.BuyNowButton = BuyNowButton;
   exports2.CartCheckoutButton = CartCheckoutButton;
   exports2.CartCost = CartCost;
-  exports2.CartLinePrice = CartLinePrice;
   exports2.CartLineProvider = CartLineProvider;
   exports2.CartLineQuantity = CartLineQuantity;
   exports2.CartLineQuantityAdjustButton = CartLineQuantityAdjustButton;
   exports2.CartProvider = CartProvider;
   exports2.ExternalVideo = ExternalVideo;
+  exports2.IMAGE_FRAGMENT = IMAGE_FRAGMENT;
   exports2.Image = Image;
   exports2.MediaFile = MediaFile;
   exports2.ModelViewer = ModelViewer;