@shopify/hydrogen-react 2022.10.0 → 2022.10.2

package/dist/dev/Image.js

@@ -1,11 +1,13 @@
-import { getShopifyImageDimensions, shopifyImageLoader, IMG_SRC_SET_SIZES, addImageSizeParametersToUrl } from "./image-size.js";
-import { jsx } from "react/jsx-runtime";
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const imageSize = require("./image-size.js");
+const jsxRuntime = require("react/jsx-runtime");
 function Image({
   data,
   width,
   height,
   loading,
-  loader = shopifyImageLoader,
+  loader = imageSize.shopifyImageLoader,
   loaderOptions,
   widths,
   decoding = "async",
@@ -24,7 +26,7 @@ function Image({
   const {
     width: imgElementWidth,
     height: imgElementHeight
-  } = getShopifyImageDimensions({
+  } = imageSize.getShopifyImageDimensions({
     data,
     loaderOptions,
     elementProps: {
@@ -56,7 +58,7 @@ function Image({
     height: imgElementHeight,
     loader
   });
-  return /* @__PURE__ */ jsx("img", {
+  return /* @__PURE__ */ jsxRuntime.jsx("img", {
     id: (_f = data.id) != null ? _f : "",
     alt: (_h = (_g = data.altText) != null ? _g : rest.alt) != null ? _h : "",
     loading: loading != null ? loading : "lazy",
@@ -85,11 +87,11 @@ function internalImageSrcSet({
   if (width && height) {
     aspectRatio = Number(height) / Number(width);
   }
-  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);
+  let setSizes = hasCustomWidths ? widths : imageSize.IMG_SRC_SET_SIZES;
+  if (!hasCustomWidths && width && width < imageSize.IMG_SRC_SET_SIZES[imageSize.IMG_SRC_SET_SIZES.length - 1]) {
+    setSizes = imageSize.IMG_SRC_SET_SIZES.filter((size) => size <= width);
   }
-  const srcGenerator = loader ? loader : addImageSizeParametersToUrl;
+  const srcGenerator = loader ? loader : imageSize.addImageSizeParametersToUrl;
   return setSizes.map((size) => `${srcGenerator({
     src,
     width: size,
@@ -98,7 +100,5 @@ function internalImageSrcSet({
     scale
   })} ${size}w`).join(", ");
 }
-export {
-  Image
-};
+exports.Image = Image;
 //# sourceMappingURL=Image.js.map

package/dist/dev/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../src/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getShopifyImageDimensions,\n  shopifyImageLoader,\n  addImageSizeParametersToUrl,\n  IMG_SRC_SET_SIZES,\n} from './image-size.js';\nimport type {Image as ImageType} from './storefront-api-types.js';\nimport type {PartialDeep, Simplify} from 'type-fest';\n\ntype HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nexport type ShopifyLoaderOptions = {\n  crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';\n  scale?: 2 | 3;\n  width?: HtmlImageProps['width'] | ImageType['width'];\n  height?: HtmlImageProps['height'] | ImageType['height'];\n};\nexport type ShopifyLoaderParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n  }\n>;\nexport type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {\n  /** An object with fields that correspond to the Storefront API's\n   * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).\n   * The `data` prop is required.\n   */\n  data: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n  /** A custom function that generates the image URL. Parameters passed in\n   * are `ShopifyLoaderParams`\n   */\n  loader?: (params: ShopifyLoaderParams) => string;\n  /** An object of `loader` function options. For example, if the `loader` function\n   * requires a `scale` option, then the value can be a property of the\n   * `loaderOptions` object (for example, `{scale: 2}`). The object shape is `ShopifyLoaderOptions`.\n   */\n  loaderOptions?: ShopifyLoaderOptions;\n  /**\n   * `src` isn't used, and should instead be passed as part of the `data` object\n   */\n  src?: never;\n  /**\n   * An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.\n   */\n  widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n};\n\n/**\n * The `Image` component renders an image for the Storefront API's\n * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.\n *\n * An image's width and height are determined using the following priority list:\n * 1. The width and height values for the `loaderOptions` prop\n * 2. The width and height values for bare props\n * 3. The width and height values for the `data` prop\n *\n * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the image's aspect ratio,\n * provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing\n * value will remain as `null`\n */\nexport function Image({\n  data,\n  width,\n  height,\n  loading,\n  loader = shopifyImageLoader,\n  loaderOptions,\n  widths,\n  decoding = 'async',\n  ...rest\n}: ShopifyImageProps) {\n  if (!data.url) {\n    const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${\n      data.id ?? 'no ID provided'\n    }`;\n\n    if (__HYDROGEN_DEV__) {\n      throw new Error(missingUrlError);\n    } else {\n      console.error(missingUrlError);\n    }\n\n    return null;\n  }\n\n  if (__HYDROGEN_DEV__ && !data.altText && !rest.alt) {\n    console.warn(\n      `<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  const {width: imgElementWidth, height: imgElementHeight} =\n    getShopifyImageDimensions({\n      data,\n      loaderOptions,\n      elementProps: {\n        width,\n        height,\n      },\n    });\n\n  if (__HYDROGEN_DEV__ && (!imgElementWidth || !imgElementHeight)) {\n    console.warn(\n      `<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  let finalSrc = data.url;\n\n  if (loader) {\n    finalSrc = loader({\n      ...loaderOptions,\n      src: data.url,\n      width: imgElementWidth,\n      height: imgElementHeight,\n    });\n    if (typeof finalSrc !== 'string' || !finalSrc) {\n      throw new Error(\n        `<Image/>: 'loader' did not return a valid string. Image: ${\n          data.id ?? data.url\n        }`\n      );\n    }\n  }\n\n  // determining what the intended width of the image is. For example, if the width is specified and lower than the image width, then that is the maximum image width\n  // to prevent generating a srcset with widths bigger than needed or to generate images that would distort because of being larger than original\n  const maxWidth =\n    width && imgElementWidth && width < imgElementWidth\n      ? width\n      : imgElementWidth;\n  const finalSrcset =\n    rest.srcSet ??\n    internalImageSrcSet({\n      ...loaderOptions,\n      widths,\n      src: data.url,\n      width: maxWidth,\n      height: imgElementHeight,\n      loader,\n    });\n\n  /* eslint-disable hydrogen/prefer-image-component */\n  return (\n    <img\n      id={data.id ?? ''}\n      alt={data.altText ?? rest.alt ?? ''}\n      loading={loading ?? 'lazy'}\n      {...rest}\n      src={finalSrc}\n      width={imgElementWidth ?? undefined}\n      height={imgElementHeight ?? undefined}\n      srcSet={finalSrcset}\n      decoding={decoding}\n    />\n  );\n  /* eslint-enable hydrogen/prefer-image-component */\n}\n\ntype InternalShopifySrcSetGeneratorsParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n    widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n    loader?: (params: ShopifyLoaderParams) => string;\n  }\n>;\nfunction internalImageSrcSet({\n  src,\n  width,\n  crop,\n  scale,\n  widths,\n  loader,\n  height,\n}: InternalShopifySrcSetGeneratorsParams) {\n  const hasCustomWidths = widths && Array.isArray(widths);\n  if (hasCustomWidths && widths.some((size) => isNaN(size as number))) {\n    throw new Error(\n      `<Image/>: the 'widths' must be an array of numbers. Image: ${src}`\n    );\n  }\n\n  let aspectRatio = 1;\n  if (width && height) {\n    aspectRatio = Number(height) / Number(width);\n  }\n\n  let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;\n  if (\n    !hasCustomWidths &&\n    width &&\n    width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]\n  ) {\n    setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);\n  }\n  const srcGenerator = loader ? loader : addImageSizeParametersToUrl;\n  return setSizes\n    .map(\n      (size) =>\n        `${srcGenerator({\n          src,\n          width: size,\n          // height is not applied if there is no crop\n          // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size\n          height: crop ? Number(size) * aspectRatio : undefined,\n          crop,\n          scale,\n        })} ${size}w`\n    )\n    .join(', ');\n}\n"],"names":["Image","data","width","height","loading","loader","shopifyImageLoader","loaderOptions","widths","decoding","rest","url","missingUrlError","id","Error","altText","alt","console","warn","imgElementWidth","imgElementHeight","getShopifyImageDimensions","elementProps","finalSrc","src","maxWidth","finalSrcset","srcSet","internalImageSrcSet","undefined","crop","scale","hasCustomWidths","Array","isArray","some","size","isNaN","aspectRatio","Number","setSizes","IMG_SRC_SET_SIZES","length","filter","srcGenerator","addImageSizeParametersToUrl","map","join"],"mappings":"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"}
+{"version":3,"file":"Image.js","sources":["../../src/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getShopifyImageDimensions,\n  shopifyImageLoader,\n  addImageSizeParametersToUrl,\n  IMG_SRC_SET_SIZES,\n} from './image-size.js';\nimport type {Image as ImageType} from './storefront-api-types.js';\nimport type {PartialDeep, Simplify} from 'type-fest';\n\ntype HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nexport type ShopifyLoaderOptions = {\n  crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';\n  scale?: 2 | 3;\n  width?: HtmlImageProps['width'] | ImageType['width'];\n  height?: HtmlImageProps['height'] | ImageType['height'];\n};\nexport type ShopifyLoaderParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n  }\n>;\nexport type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {\n  /** An object with fields that correspond to the Storefront API's\n   * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).\n   * The `data` prop is required.\n   */\n  data: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n  /** A custom function that generates the image URL. Parameters passed in\n   * are `ShopifyLoaderParams`\n   */\n  loader?: (params: ShopifyLoaderParams) => string;\n  /** An object of `loader` function options. For example, if the `loader` function\n   * requires a `scale` option, then the value can be a property of the\n   * `loaderOptions` object (for example, `{scale: 2}`). The object shape is `ShopifyLoaderOptions`.\n   */\n  loaderOptions?: ShopifyLoaderOptions;\n  /**\n   * `src` isn't used, and should instead be passed as part of the `data` object\n   */\n  src?: never;\n  /**\n   * An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.\n   */\n  widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n};\n\n/**\n * The `Image` component renders an image for the Storefront API's\n * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.\n *\n * An image's width and height are determined using the following priority list:\n * 1. The width and height values for the `loaderOptions` prop\n * 2. The width and height values for bare props\n * 3. The width and height values for the `data` prop\n *\n * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the image's aspect ratio,\n * provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing\n * value will remain as `null`\n */\nexport function Image({\n  data,\n  width,\n  height,\n  loading,\n  loader = shopifyImageLoader,\n  loaderOptions,\n  widths,\n  decoding = 'async',\n  ...rest\n}: ShopifyImageProps) {\n  if (!data.url) {\n    const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${\n      data.id ?? 'no ID provided'\n    }`;\n\n    if (__HYDROGEN_DEV__) {\n      throw new Error(missingUrlError);\n    } else {\n      console.error(missingUrlError);\n    }\n\n    return null;\n  }\n\n  if (__HYDROGEN_DEV__ && !data.altText && !rest.alt) {\n    console.warn(\n      `<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  const {width: imgElementWidth, height: imgElementHeight} =\n    getShopifyImageDimensions({\n      data,\n      loaderOptions,\n      elementProps: {\n        width,\n        height,\n      },\n    });\n\n  if (__HYDROGEN_DEV__ && (!imgElementWidth || !imgElementHeight)) {\n    console.warn(\n      `<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  let finalSrc = data.url;\n\n  if (loader) {\n    finalSrc = loader({\n      ...loaderOptions,\n      src: data.url,\n      width: imgElementWidth,\n      height: imgElementHeight,\n    });\n    if (typeof finalSrc !== 'string' || !finalSrc) {\n      throw new Error(\n        `<Image/>: 'loader' did not return a valid string. Image: ${\n          data.id ?? data.url\n        }`\n      );\n    }\n  }\n\n  // determining what the intended width of the image is. For example, if the width is specified and lower than the image width, then that is the maximum image width\n  // to prevent generating a srcset with widths bigger than needed or to generate images that would distort because of being larger than original\n  const maxWidth =\n    width && imgElementWidth && width < imgElementWidth\n      ? width\n      : imgElementWidth;\n  const finalSrcset =\n    rest.srcSet ??\n    internalImageSrcSet({\n      ...loaderOptions,\n      widths,\n      src: data.url,\n      width: maxWidth,\n      height: imgElementHeight,\n      loader,\n    });\n\n  /* eslint-disable hydrogen/prefer-image-component */\n  return (\n    <img\n      id={data.id ?? ''}\n      alt={data.altText ?? rest.alt ?? ''}\n      loading={loading ?? 'lazy'}\n      {...rest}\n      src={finalSrc}\n      width={imgElementWidth ?? undefined}\n      height={imgElementHeight ?? undefined}\n      srcSet={finalSrcset}\n      decoding={decoding}\n    />\n  );\n  /* eslint-enable hydrogen/prefer-image-component */\n}\n\ntype InternalShopifySrcSetGeneratorsParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n    widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n    loader?: (params: ShopifyLoaderParams) => string;\n  }\n>;\nfunction internalImageSrcSet({\n  src,\n  width,\n  crop,\n  scale,\n  widths,\n  loader,\n  height,\n}: InternalShopifySrcSetGeneratorsParams) {\n  const hasCustomWidths = widths && Array.isArray(widths);\n  if (hasCustomWidths && widths.some((size) => isNaN(size as number))) {\n    throw new Error(\n      `<Image/>: the 'widths' must be an array of numbers. Image: ${src}`\n    );\n  }\n\n  let aspectRatio = 1;\n  if (width && height) {\n    aspectRatio = Number(height) / Number(width);\n  }\n\n  let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;\n  if (\n    !hasCustomWidths &&\n    width &&\n    width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]\n  ) {\n    setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);\n  }\n  const srcGenerator = loader ? loader : addImageSizeParametersToUrl;\n  return setSizes\n    .map(\n      (size) =>\n        `${srcGenerator({\n          src,\n          width: size,\n          // height is not applied if there is no crop\n          // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size\n          height: crop ? Number(size) * aspectRatio : undefined,\n          crop,\n          scale,\n        })} ${size}w`\n    )\n    .join(', ');\n}\n"],"names":["Image","data","width","height","loading","loader","shopifyImageLoader","loaderOptions","widths","decoding","rest","url","missingUrlError","id","Error","altText","alt","console","warn","imgElementWidth","imgElementHeight","getShopifyImageDimensions","elementProps","finalSrc","src","maxWidth","finalSrcset","srcSet","internalImageSrcSet","undefined","crop","scale","hasCustomWidths","Array","isArray","some","size","isNaN","aspectRatio","Number","setSizes","IMG_SRC_SET_SIZES","length","filter","srcGenerator","addImageSizeParametersToUrl","map","join"],"mappings":"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"}

package/dist/dev/{Image.cjs → Image.mjs}

@@ -1,13 +1,11 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const imageSize = require("./image-size.cjs");
-const jsxRuntime = require("react/jsx-runtime");
+import { getShopifyImageDimensions, shopifyImageLoader, IMG_SRC_SET_SIZES, addImageSizeParametersToUrl } from "./image-size.mjs";
+import { jsx } from "react/jsx-runtime";
 function Image({
   data,
   width,
   height,
   loading,
-  loader = imageSize.shopifyImageLoader,
+  loader = shopifyImageLoader,
   loaderOptions,
   widths,
   decoding = "async",
@@ -26,7 +24,7 @@ function Image({
   const {
     width: imgElementWidth,
     height: imgElementHeight
-  } = imageSize.getShopifyImageDimensions({
+  } = getShopifyImageDimensions({
     data,
     loaderOptions,
     elementProps: {
@@ -58,7 +56,7 @@ function Image({
     height: imgElementHeight,
     loader
   });
-  return /* @__PURE__ */ jsxRuntime.jsx("img", {
+  return /* @__PURE__ */ jsx("img", {
     id: (_f = data.id) != null ? _f : "",
     alt: (_h = (_g = data.altText) != null ? _g : rest.alt) != null ? _h : "",
     loading: loading != null ? loading : "lazy",
@@ -87,11 +85,11 @@ function internalImageSrcSet({
   if (width && height) {
     aspectRatio = Number(height) / Number(width);
   }
-  let setSizes = hasCustomWidths ? widths : imageSize.IMG_SRC_SET_SIZES;
-  if (!hasCustomWidths && width && width < imageSize.IMG_SRC_SET_SIZES[imageSize.IMG_SRC_SET_SIZES.length - 1]) {
-    setSizes = imageSize.IMG_SRC_SET_SIZES.filter((size) => size <= width);
+  let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;
+  if (!hasCustomWidths && width && width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]) {
+    setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);
   }
-  const srcGenerator = loader ? loader : imageSize.addImageSizeParametersToUrl;
+  const srcGenerator = loader ? loader : addImageSizeParametersToUrl;
   return setSizes.map((size) => `${srcGenerator({
     src,
     width: size,
@@ -100,5 +98,7 @@ function internalImageSrcSet({
     scale
   })} ${size}w`).join(", ");
 }
-exports.Image = Image;
-//# sourceMappingURL=Image.cjs.map
+export {
+  Image
+};
+//# sourceMappingURL=Image.mjs.map

package/dist/dev/{Image.cjs.map → Image.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Image.cjs","sources":["../../src/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getShopifyImageDimensions,\n  shopifyImageLoader,\n  addImageSizeParametersToUrl,\n  IMG_SRC_SET_SIZES,\n} from './image-size.js';\nimport type {Image as ImageType} from './storefront-api-types.js';\nimport type {PartialDeep, Simplify} from 'type-fest';\n\ntype HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nexport type ShopifyLoaderOptions = {\n  crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';\n  scale?: 2 | 3;\n  width?: HtmlImageProps['width'] | ImageType['width'];\n  height?: HtmlImageProps['height'] | ImageType['height'];\n};\nexport type ShopifyLoaderParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n  }\n>;\nexport type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {\n  /** An object with fields that correspond to the Storefront API's\n   * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).\n   * The `data` prop is required.\n   */\n  data: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n  /** A custom function that generates the image URL. Parameters passed in\n   * are `ShopifyLoaderParams`\n   */\n  loader?: (params: ShopifyLoaderParams) => string;\n  /** An object of `loader` function options. For example, if the `loader` function\n   * requires a `scale` option, then the value can be a property of the\n   * `loaderOptions` object (for example, `{scale: 2}`). The object shape is `ShopifyLoaderOptions`.\n   */\n  loaderOptions?: ShopifyLoaderOptions;\n  /**\n   * `src` isn't used, and should instead be passed as part of the `data` object\n   */\n  src?: never;\n  /**\n   * An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.\n   */\n  widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n};\n\n/**\n * The `Image` component renders an image for the Storefront API's\n * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.\n *\n * An image's width and height are determined using the following priority list:\n * 1. The width and height values for the `loaderOptions` prop\n * 2. The width and height values for bare props\n * 3. The width and height values for the `data` prop\n *\n * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the image's aspect ratio,\n * provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing\n * value will remain as `null`\n */\nexport function Image({\n  data,\n  width,\n  height,\n  loading,\n  loader = shopifyImageLoader,\n  loaderOptions,\n  widths,\n  decoding = 'async',\n  ...rest\n}: ShopifyImageProps) {\n  if (!data.url) {\n    const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${\n      data.id ?? 'no ID provided'\n    }`;\n\n    if (__HYDROGEN_DEV__) {\n      throw new Error(missingUrlError);\n    } else {\n      console.error(missingUrlError);\n    }\n\n    return null;\n  }\n\n  if (__HYDROGEN_DEV__ && !data.altText && !rest.alt) {\n    console.warn(\n      `<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  const {width: imgElementWidth, height: imgElementHeight} =\n    getShopifyImageDimensions({\n      data,\n      loaderOptions,\n      elementProps: {\n        width,\n        height,\n      },\n    });\n\n  if (__HYDROGEN_DEV__ && (!imgElementWidth || !imgElementHeight)) {\n    console.warn(\n      `<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  let finalSrc = data.url;\n\n  if (loader) {\n    finalSrc = loader({\n      ...loaderOptions,\n      src: data.url,\n      width: imgElementWidth,\n      height: imgElementHeight,\n    });\n    if (typeof finalSrc !== 'string' || !finalSrc) {\n      throw new Error(\n        `<Image/>: 'loader' did not return a valid string. Image: ${\n          data.id ?? data.url\n        }`\n      );\n    }\n  }\n\n  // determining what the intended width of the image is. For example, if the width is specified and lower than the image width, then that is the maximum image width\n  // to prevent generating a srcset with widths bigger than needed or to generate images that would distort because of being larger than original\n  const maxWidth =\n    width && imgElementWidth && width < imgElementWidth\n      ? width\n      : imgElementWidth;\n  const finalSrcset =\n    rest.srcSet ??\n    internalImageSrcSet({\n      ...loaderOptions,\n      widths,\n      src: data.url,\n      width: maxWidth,\n      height: imgElementHeight,\n      loader,\n    });\n\n  /* eslint-disable hydrogen/prefer-image-component */\n  return (\n    <img\n      id={data.id ?? ''}\n      alt={data.altText ?? rest.alt ?? ''}\n      loading={loading ?? 'lazy'}\n      {...rest}\n      src={finalSrc}\n      width={imgElementWidth ?? undefined}\n      height={imgElementHeight ?? undefined}\n      srcSet={finalSrcset}\n      decoding={decoding}\n    />\n  );\n  /* eslint-enable hydrogen/prefer-image-component */\n}\n\ntype InternalShopifySrcSetGeneratorsParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n    widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n    loader?: (params: ShopifyLoaderParams) => string;\n  }\n>;\nfunction internalImageSrcSet({\n  src,\n  width,\n  crop,\n  scale,\n  widths,\n  loader,\n  height,\n}: InternalShopifySrcSetGeneratorsParams) {\n  const hasCustomWidths = widths && Array.isArray(widths);\n  if (hasCustomWidths && widths.some((size) => isNaN(size as number))) {\n    throw new Error(\n      `<Image/>: the 'widths' must be an array of numbers. Image: ${src}`\n    );\n  }\n\n  let aspectRatio = 1;\n  if (width && height) {\n    aspectRatio = Number(height) / Number(width);\n  }\n\n  let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;\n  if (\n    !hasCustomWidths &&\n    width &&\n    width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]\n  ) {\n    setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);\n  }\n  const srcGenerator = loader ? loader : addImageSizeParametersToUrl;\n  return setSizes\n    .map(\n      (size) =>\n        `${srcGenerator({\n          src,\n          width: size,\n          // height is not applied if there is no crop\n          // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size\n          height: crop ? Number(size) * aspectRatio : undefined,\n          crop,\n          scale,\n        })} ${size}w`\n    )\n    .join(', ');\n}\n"],"names":["Image","data","width","height","loading","loader","shopifyImageLoader","loaderOptions","widths","decoding","rest","url","missingUrlError","id","Error","altText","alt","console","warn","imgElementWidth","imgElementHeight","getShopifyImageDimensions","elementProps","finalSrc","src","maxWidth","finalSrcset","srcSet","internalImageSrcSet","undefined","crop","scale","hasCustomWidths","Array","isArray","some","size","isNaN","aspectRatio","Number","setSizes","IMG_SRC_SET_SIZES","length","filter","srcGenerator","addImageSizeParametersToUrl","map","join"],"mappings":"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"}
+{"version":3,"file":"Image.mjs","sources":["../../src/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getShopifyImageDimensions,\n  shopifyImageLoader,\n  addImageSizeParametersToUrl,\n  IMG_SRC_SET_SIZES,\n} from './image-size.js';\nimport type {Image as ImageType} from './storefront-api-types.js';\nimport type {PartialDeep, Simplify} from 'type-fest';\n\ntype HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nexport type ShopifyLoaderOptions = {\n  crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';\n  scale?: 2 | 3;\n  width?: HtmlImageProps['width'] | ImageType['width'];\n  height?: HtmlImageProps['height'] | ImageType['height'];\n};\nexport type ShopifyLoaderParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n  }\n>;\nexport type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {\n  /** An object with fields that correspond to the Storefront API's\n   * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).\n   * The `data` prop is required.\n   */\n  data: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n  /** A custom function that generates the image URL. Parameters passed in\n   * are `ShopifyLoaderParams`\n   */\n  loader?: (params: ShopifyLoaderParams) => string;\n  /** An object of `loader` function options. For example, if the `loader` function\n   * requires a `scale` option, then the value can be a property of the\n   * `loaderOptions` object (for example, `{scale: 2}`). The object shape is `ShopifyLoaderOptions`.\n   */\n  loaderOptions?: ShopifyLoaderOptions;\n  /**\n   * `src` isn't used, and should instead be passed as part of the `data` object\n   */\n  src?: never;\n  /**\n   * An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.\n   */\n  widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n};\n\n/**\n * The `Image` component renders an image for the Storefront API's\n * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.\n *\n * An image's width and height are determined using the following priority list:\n * 1. The width and height values for the `loaderOptions` prop\n * 2. The width and height values for bare props\n * 3. The width and height values for the `data` prop\n *\n * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the image's aspect ratio,\n * provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing\n * value will remain as `null`\n */\nexport function Image({\n  data,\n  width,\n  height,\n  loading,\n  loader = shopifyImageLoader,\n  loaderOptions,\n  widths,\n  decoding = 'async',\n  ...rest\n}: ShopifyImageProps) {\n  if (!data.url) {\n    const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${\n      data.id ?? 'no ID provided'\n    }`;\n\n    if (__HYDROGEN_DEV__) {\n      throw new Error(missingUrlError);\n    } else {\n      console.error(missingUrlError);\n    }\n\n    return null;\n  }\n\n  if (__HYDROGEN_DEV__ && !data.altText && !rest.alt) {\n    console.warn(\n      `<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  const {width: imgElementWidth, height: imgElementHeight} =\n    getShopifyImageDimensions({\n      data,\n      loaderOptions,\n      elementProps: {\n        width,\n        height,\n      },\n    });\n\n  if (__HYDROGEN_DEV__ && (!imgElementWidth || !imgElementHeight)) {\n    console.warn(\n      `<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  let finalSrc = data.url;\n\n  if (loader) {\n    finalSrc = loader({\n      ...loaderOptions,\n      src: data.url,\n      width: imgElementWidth,\n      height: imgElementHeight,\n    });\n    if (typeof finalSrc !== 'string' || !finalSrc) {\n      throw new Error(\n        `<Image/>: 'loader' did not return a valid string. Image: ${\n          data.id ?? data.url\n        }`\n      );\n    }\n  }\n\n  // determining what the intended width of the image is. For example, if the width is specified and lower than the image width, then that is the maximum image width\n  // to prevent generating a srcset with widths bigger than needed or to generate images that would distort because of being larger than original\n  const maxWidth =\n    width && imgElementWidth && width < imgElementWidth\n      ? width\n      : imgElementWidth;\n  const finalSrcset =\n    rest.srcSet ??\n    internalImageSrcSet({\n      ...loaderOptions,\n      widths,\n      src: data.url,\n      width: maxWidth,\n      height: imgElementHeight,\n      loader,\n    });\n\n  /* eslint-disable hydrogen/prefer-image-component */\n  return (\n    <img\n      id={data.id ?? ''}\n      alt={data.altText ?? rest.alt ?? ''}\n      loading={loading ?? 'lazy'}\n      {...rest}\n      src={finalSrc}\n      width={imgElementWidth ?? undefined}\n      height={imgElementHeight ?? undefined}\n      srcSet={finalSrcset}\n      decoding={decoding}\n    />\n  );\n  /* eslint-enable hydrogen/prefer-image-component */\n}\n\ntype InternalShopifySrcSetGeneratorsParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n    widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n    loader?: (params: ShopifyLoaderParams) => string;\n  }\n>;\nfunction internalImageSrcSet({\n  src,\n  width,\n  crop,\n  scale,\n  widths,\n  loader,\n  height,\n}: InternalShopifySrcSetGeneratorsParams) {\n  const hasCustomWidths = widths && Array.isArray(widths);\n  if (hasCustomWidths && widths.some((size) => isNaN(size as number))) {\n    throw new Error(\n      `<Image/>: the 'widths' must be an array of numbers. Image: ${src}`\n    );\n  }\n\n  let aspectRatio = 1;\n  if (width && height) {\n    aspectRatio = Number(height) / Number(width);\n  }\n\n  let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;\n  if (\n    !hasCustomWidths &&\n    width &&\n    width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]\n  ) {\n    setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);\n  }\n  const srcGenerator = loader ? loader : addImageSizeParametersToUrl;\n  return setSizes\n    .map(\n      (size) =>\n        `${srcGenerator({\n          src,\n          width: size,\n          // height is not applied if there is no crop\n          // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size\n          height: crop ? Number(size) * aspectRatio : undefined,\n          crop,\n          scale,\n        })} ${size}w`\n    )\n    .join(', ');\n}\n"],"names":["Image","data","width","height","loading","loader","shopifyImageLoader","loaderOptions","widths","decoding","rest","url","missingUrlError","id","Error","altText","alt","console","warn","imgElementWidth","imgElementHeight","getShopifyImageDimensions","elementProps","finalSrc","src","maxWidth","finalSrcset","srcSet","internalImageSrcSet","undefined","crop","scale","hasCustomWidths","Array","isArray","some","size","isNaN","aspectRatio","Number","setSizes","IMG_SRC_SET_SIZES","length","filter","srcGenerator","addImageSizeParametersToUrl","map","join"],"mappings":"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"}

package/dist/dev/MediaFile.js

@@ -1,8 +1,10 @@
-import { Image } from "./Image.js";
-import { Video } from "./Video.js";
-import { ExternalVideo } from "./ExternalVideo.js";
-import { ModelViewer } from "./ModelViewer.js";
-import { jsx } from "react/jsx-runtime";
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Image = require("./Image.js");
+const Video = require("./Video.js");
+const ExternalVideo = require("./ExternalVideo.js");
+const ModelViewer = require("./ModelViewer.js");
+const jsxRuntime = require("react/jsx-runtime");
 function MediaFile({
   data,
   mediaOptions,
@@ -16,28 +18,28 @@ function MediaFile({
           throw new Error(noDataImage);
         }
       }
-      return /* @__PURE__ */ jsx(Image, {
+      return /* @__PURE__ */ jsxRuntime.jsx(Image.Image, {
         ...passthroughProps,
         ...mediaOptions == null ? void 0 : mediaOptions.image,
         data: data.image
       });
     }
     case "Video": {
-      return /* @__PURE__ */ jsx(Video, {
+      return /* @__PURE__ */ jsxRuntime.jsx(Video.Video, {
         ...passthroughProps,
         ...mediaOptions == null ? void 0 : mediaOptions.video,
         data
       });
     }
     case "ExternalVideo": {
-      return /* @__PURE__ */ jsx(ExternalVideo, {
+      return /* @__PURE__ */ jsxRuntime.jsx(ExternalVideo.ExternalVideo, {
         ...passthroughProps,
         ...mediaOptions == null ? void 0 : mediaOptions.externalVideo,
         data
       });
     }
     case "Model3d": {
-      return /* @__PURE__ */ jsx(ModelViewer, {
+      return /* @__PURE__ */ jsxRuntime.jsx(ModelViewer.ModelViewer, {
         ...passthroughProps,
         ...mediaOptions == null ? void 0 : mediaOptions.modelViewer,
         data
@@ -51,7 +53,5 @@ function MediaFile({
     }
   }
 }
-export {
-  MediaFile
-};
+exports.MediaFile = MediaFile;
 //# sourceMappingURL=MediaFile.js.map

package/dist/dev/MediaFile.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaFile.js","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {Image, type ShopifyImageProps} from './Image.js';\nimport {Video} from './Video.js';\nimport {ExternalVideo} from './ExternalVideo.js';\nimport {ModelViewer} from './ModelViewer.js';\nimport type {MediaEdge as MediaEdgeType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ninterface MediaFileProps {\n  /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */\n  data: PartialDeep<MediaEdgeType['node'], {recurseIntoArrays: true}>;\n  /** The options for the `Image`, `Video`, or `ExternalVideo` components. */\n  mediaOptions?: {\n    /** Props that will only apply when an `<Image />` is rendered */\n    image: Omit<ShopifyImageProps, 'data'>;\n    /** Props that will only apply when a `<Video />` is rendered */\n    video: Omit<React.ComponentProps<typeof Video>, 'data'>;\n    /** Props that will only apply when an `<ExternalVideo />` is rendered */\n    externalVideo: Omit<\n      React.ComponentProps<typeof ExternalVideo>['options'],\n      'data'\n    >;\n    /** Props that will only apply when a `<ModelViewer />` is rendered */\n    modelViewer: Omit<typeof ModelViewer, 'data'>;\n  };\n}\n\n/**\n * The `MediaFile` component renders the media for the Storefront API's\n * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a\n * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.\n */\nexport function MediaFile({\n  data,\n  mediaOptions,\n  ...passthroughProps\n}: MediaFileProps) {\n  switch (data.__typename) {\n    case 'MediaImage': {\n      if (!data.image) {\n        const noDataImage = `<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`;\n        if (__HYDROGEN_DEV__) {\n          throw new Error(noDataImage);\n        } else {\n          console.warn(noDataImage);\n          return null;\n        }\n      }\n\n      return (\n        <Image\n          {...passthroughProps}\n          {...mediaOptions?.image}\n          data={data.image}\n        />\n      );\n    }\n    case 'Video': {\n      return (\n        <Video {...passthroughProps} {...mediaOptions?.video} data={data} />\n      );\n    }\n    case 'ExternalVideo': {\n      return (\n        <ExternalVideo\n          {...passthroughProps}\n          {...mediaOptions?.externalVideo}\n          data={data}\n        />\n      );\n    }\n    case 'Model3d': {\n      return (\n        <ModelViewer\n          {...passthroughProps}\n          {...mediaOptions?.modelViewer}\n          data={data}\n        />\n      );\n    }\n    default: {\n      const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to correctly render the correct component for this media. Rendering 'null' by default`;\n      if (__HYDROGEN_DEV__) {\n        throw new Error(typenameMissingMessage);\n      } else {\n        console.error(typenameMissingMessage);\n        return null;\n      }\n    }\n  }\n}\n"],"names":["MediaFile","data","mediaOptions","passthroughProps","__typename","image","noDataImage","Error","video","externalVideo","modelViewer","typenameMissingMessage"],"mappings":";;;;;AA+BO,SAASA,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAAAA,KACGC;AAHqB,GAIP;AACjB,UAAQF,KAAKG,YAAb;AAAA,IACE,KAAK,cAAc;AACb,UAAA,CAACH,KAAKI,OAAO;AACf,cAAMC,cAAe;AACC;AACd,gBAAA,IAAIC,MAAMD,WAAV;AAAA,QAIP;AAAA,MACF;AAED,iCACG,OAAD;AAAA,QAAA,GACMH;AAAAA,QADN,GAEMD,6CAAcG;AAAAA,QAClB,MAAMJ,KAAKI;AAAAA,MAAAA,CAJf;AAAA,IAOD;AAAA,IACD,KAAK,SAAS;AACZ,iCACG,OAAD;AAAA,QAAA,GAAWF;AAAAA,QAAX,GAAiCD,6CAAcM;AAAAA,QAAO;AAAA,MAAA,CADxD;AAAA,IAGD;AAAA,IACD,KAAK,iBAAiB;AACpB,iCACG,eAAD;AAAA,QAAA,GACML;AAAAA,QADN,GAEMD,6CAAcO;AAAAA,QAClB;AAAA,MAAA,CAJJ;AAAA,IAOD;AAAA,IACD,KAAK,WAAW;AACd,iCACG,aAAD;AAAA,QAAA,GACMN;AAAAA,QADN,GAEMD,6CAAcQ;AAAAA,QAClB;AAAA,MAAA,CAJJ;AAAA,IAOD;AAAA,IACD,SAAS;AACP,YAAMC,yBAA0B;AACV;AACd,cAAA,IAAIJ,MAAMI,sBAAV;AAAA,MAIP;AAAA,IACF;AAAA,EAnDH;AAqDD;"}
+{"version":3,"file":"MediaFile.js","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {Image, type ShopifyImageProps} from './Image.js';\nimport {Video} from './Video.js';\nimport {ExternalVideo} from './ExternalVideo.js';\nimport {ModelViewer} from './ModelViewer.js';\nimport type {MediaEdge as MediaEdgeType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n  HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\n  /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */\n  data: PartialDeep<MediaEdgeType['node'], {recurseIntoArrays: true}>;\n  /** The options for the `Image`, `Video`, or `ExternalVideo` components. */\n  mediaOptions?: {\n    /** Props that will only apply when an `<Image />` is rendered */\n    image: Omit<ShopifyImageProps, 'data'>;\n    /** Props that will only apply when a `<Video />` is rendered */\n    video: Omit<React.ComponentProps<typeof Video>, 'data'>;\n    /** Props that will only apply when an `<ExternalVideo />` is rendered */\n    externalVideo: Omit<\n      React.ComponentProps<typeof ExternalVideo>['options'],\n      'data'\n    >;\n    /** Props that will only apply when a `<ModelViewer />` is rendered */\n    modelViewer: Omit<typeof ModelViewer, 'data'>;\n  };\n}\n\n/**\n * The `MediaFile` component renders the media for the Storefront API's\n * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a\n * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.\n */\nexport function MediaFile({\n  data,\n  mediaOptions,\n  ...passthroughProps\n}: MediaFileProps) {\n  switch (data.__typename) {\n    case 'MediaImage': {\n      if (!data.image) {\n        const noDataImage = `<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`;\n        if (__HYDROGEN_DEV__) {\n          throw new Error(noDataImage);\n        } else {\n          console.warn(noDataImage);\n          return null;\n        }\n      }\n\n      return (\n        <Image\n          {...passthroughProps}\n          {...mediaOptions?.image}\n          data={data.image}\n        />\n      );\n    }\n    case 'Video': {\n      return (\n        <Video {...passthroughProps} {...mediaOptions?.video} data={data} />\n      );\n    }\n    case 'ExternalVideo': {\n      return (\n        <ExternalVideo\n          {...passthroughProps}\n          {...mediaOptions?.externalVideo}\n          data={data}\n        />\n      );\n    }\n    case 'Model3d': {\n      return (\n        // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment\n        <ModelViewer\n          {...passthroughProps}\n          {...mediaOptions?.modelViewer}\n          data={data}\n        />\n      );\n    }\n    default: {\n      const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to correctly render the correct component for this media. Rendering 'null' by default`;\n      if (__HYDROGEN_DEV__) {\n        throw new Error(typenameMissingMessage);\n      } else {\n        console.error(typenameMissingMessage);\n        return null;\n      }\n    }\n  }\n}\n"],"names":["MediaFile","data","mediaOptions","passthroughProps","__typename","image","noDataImage","Error","Image","Video","video","ExternalVideo","externalVideo","ModelViewer","modelViewer","typenameMissingMessage"],"mappings":";;;;;;;AAmCO,SAASA,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAAAA,KACGC;AAHqB,GAIP;AACjB,UAAQF,KAAKG,YAAb;AAAA,IACE,KAAK,cAAc;AACb,UAAA,CAACH,KAAKI,OAAO;AACf,cAAMC,cAAe;AACC;AACd,gBAAA,IAAIC,MAAMD,WAAV;AAAA,QAIP;AAAA,MACF;AAED,4CACGE,MAAAA,OAAD;AAAA,QAAA,GACML;AAAAA,QADN,GAEMD,6CAAcG;AAAAA,QAClB,MAAMJ,KAAKI;AAAAA,MAAAA,CAJf;AAAA,IAOD;AAAA,IACD,KAAK,SAAS;AACZ,4CACGI,MAAAA,OAAD;AAAA,QAAA,GAAWN;AAAAA,QAAX,GAAiCD,6CAAcQ;AAAAA,QAAO;AAAA,MAAA,CADxD;AAAA,IAGD;AAAA,IACD,KAAK,iBAAiB;AACpB,4CACGC,cAAAA,eAAD;AAAA,QAAA,GACMR;AAAAA,QADN,GAEMD,6CAAcU;AAAAA,QAClB;AAAA,MAAA,CAJJ;AAAA,IAOD;AAAA,IACD,KAAK,WAAW;AACd,4CAEGC,YAAAA;WACKV;AAAAA,QADN,GAEMD,6CAAcY;AAAAA,QAClB;AAAA,MAAA,CAHF;AAAA,IAMH;AAAA,IACD,SAAS;AACP,YAAMC,yBAA0B;AACV;AACd,cAAA,IAAIR,MAAMQ,sBAAV;AAAA,MAIP;AAAA,IACF;AAAA,EApDH;AAsDD;;"}

package/dist/dev/{MediaFile.cjs → MediaFile.mjs}

@@ -1,10 +1,8 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const Image = require("./Image.cjs");
-const Video = require("./Video.cjs");
-const ExternalVideo = require("./ExternalVideo.cjs");
-const ModelViewer = require("./ModelViewer.cjs");
-const jsxRuntime = require("react/jsx-runtime");
+import { Image } from "./Image.mjs";
+import { Video } from "./Video.mjs";
+import { ExternalVideo } from "./ExternalVideo.mjs";
+import { ModelViewer } from "./ModelViewer.mjs";
+import { jsx } from "react/jsx-runtime";
 function MediaFile({
   data,
   mediaOptions,
@@ -18,28 +16,28 @@ function MediaFile({
           throw new Error(noDataImage);
         }
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(Image.Image, {
+      return /* @__PURE__ */ jsx(Image, {
         ...passthroughProps,
         ...mediaOptions == null ? void 0 : mediaOptions.image,
         data: data.image
       });
     }
     case "Video": {
-      return /* @__PURE__ */ jsxRuntime.jsx(Video.Video, {
+      return /* @__PURE__ */ jsx(Video, {
         ...passthroughProps,
         ...mediaOptions == null ? void 0 : mediaOptions.video,
         data
       });
     }
     case "ExternalVideo": {
-      return /* @__PURE__ */ jsxRuntime.jsx(ExternalVideo.ExternalVideo, {
+      return /* @__PURE__ */ jsx(ExternalVideo, {
         ...passthroughProps,
         ...mediaOptions == null ? void 0 : mediaOptions.externalVideo,
         data
       });
     }
     case "Model3d": {
-      return /* @__PURE__ */ jsxRuntime.jsx(ModelViewer.ModelViewer, {
+      return /* @__PURE__ */ jsx(ModelViewer, {
         ...passthroughProps,
         ...mediaOptions == null ? void 0 : mediaOptions.modelViewer,
         data
@@ -53,5 +51,7 @@ function MediaFile({
     }
   }
 }
-exports.MediaFile = MediaFile;
-//# sourceMappingURL=MediaFile.cjs.map
+export {
+  MediaFile
+};
+//# sourceMappingURL=MediaFile.mjs.map

package/dist/dev/MediaFile.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaFile.mjs","sources":["../../src/MediaFile.tsx"],"sourcesContent":["import {Image, type ShopifyImageProps} from './Image.js';\nimport {Video} from './Video.js';\nimport {ExternalVideo} from './ExternalVideo.js';\nimport {ModelViewer} from './ModelViewer.js';\nimport type {MediaEdge as MediaEdgeType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ntype BaseProps = React.HTMLAttributes<\n  HTMLImageElement | HTMLVideoElement | HTMLIFrameElement | ModelViewerElement\n>;\nexport interface MediaFileProps extends BaseProps {\n  /** An object with fields that correspond to the Storefront API's [Media object](https://shopify.dev/api/storefront/reference/products/media). */\n  data: PartialDeep<MediaEdgeType['node'], {recurseIntoArrays: true}>;\n  /** The options for the `Image`, `Video`, or `ExternalVideo` components. */\n  mediaOptions?: {\n    /** Props that will only apply when an `<Image />` is rendered */\n    image: Omit<ShopifyImageProps, 'data'>;\n    /** Props that will only apply when a `<Video />` is rendered */\n    video: Omit<React.ComponentProps<typeof Video>, 'data'>;\n    /** Props that will only apply when an `<ExternalVideo />` is rendered */\n    externalVideo: Omit<\n      React.ComponentProps<typeof ExternalVideo>['options'],\n      'data'\n    >;\n    /** Props that will only apply when a `<ModelViewer />` is rendered */\n    modelViewer: Omit<typeof ModelViewer, 'data'>;\n  };\n}\n\n/**\n * The `MediaFile` component renders the media for the Storefront API's\n * [Media object](https://shopify.dev/api/storefront/reference/products/media). It renders an `Image`, a\n * `Video`, an `ExternalVideo`, or a `ModelViewer` depending on the `__typename` of the `data` prop.\n */\nexport function MediaFile({\n  data,\n  mediaOptions,\n  ...passthroughProps\n}: MediaFileProps) {\n  switch (data.__typename) {\n    case 'MediaImage': {\n      if (!data.image) {\n        const noDataImage = `<MediaFile/>: 'data.image' does not exist for __typename of 'MediaImage'; rendering 'null' by default.`;\n        if (__HYDROGEN_DEV__) {\n          throw new Error(noDataImage);\n        } else {\n          console.warn(noDataImage);\n          return null;\n        }\n      }\n\n      return (\n        <Image\n          {...passthroughProps}\n          {...mediaOptions?.image}\n          data={data.image}\n        />\n      );\n    }\n    case 'Video': {\n      return (\n        <Video {...passthroughProps} {...mediaOptions?.video} data={data} />\n      );\n    }\n    case 'ExternalVideo': {\n      return (\n        <ExternalVideo\n          {...passthroughProps}\n          {...mediaOptions?.externalVideo}\n          data={data}\n        />\n      );\n    }\n    case 'Model3d': {\n      return (\n        // @ts-expect-error There are issues with the inferred HTML attribute types here for ModelViewer (and contentEditable), but I think that's a little bit beyond me at the moment\n        <ModelViewer\n          {...passthroughProps}\n          {...mediaOptions?.modelViewer}\n          data={data}\n        />\n      );\n    }\n    default: {\n      const typenameMissingMessage = `<MediaFile /> requires the '__typename' property to exist on the 'data' prop in order to correctly render the correct component for this media. Rendering 'null' by default`;\n      if (__HYDROGEN_DEV__) {\n        throw new Error(typenameMissingMessage);\n      } else {\n        console.error(typenameMissingMessage);\n        return null;\n      }\n    }\n  }\n}\n"],"names":["MediaFile","data","mediaOptions","passthroughProps","__typename","image","noDataImage","Error","video","externalVideo","modelViewer","typenameMissingMessage"],"mappings":";;;;;AAmCO,SAASA,UAAU;AAAA,EACxBC;AAAAA,EACAC;AAAAA,KACGC;AAHqB,GAIP;AACjB,UAAQF,KAAKG,YAAb;AAAA,IACE,KAAK,cAAc;AACb,UAAA,CAACH,KAAKI,OAAO;AACf,cAAMC,cAAe;AACC;AACd,gBAAA,IAAIC,MAAMD,WAAV;AAAA,QAIP;AAAA,MACF;AAED,iCACG,OAAD;AAAA,QAAA,GACMH;AAAAA,QADN,GAEMD,6CAAcG;AAAAA,QAClB,MAAMJ,KAAKI;AAAAA,MAAAA,CAJf;AAAA,IAOD;AAAA,IACD,KAAK,SAAS;AACZ,iCACG,OAAD;AAAA,QAAA,GAAWF;AAAAA,QAAX,GAAiCD,6CAAcM;AAAAA,QAAO;AAAA,MAAA,CADxD;AAAA,IAGD;AAAA,IACD,KAAK,iBAAiB;AACpB,iCACG,eAAD;AAAA,QAAA,GACML;AAAAA,QADN,GAEMD,6CAAcO;AAAAA,QAClB;AAAA,MAAA,CAJJ;AAAA,IAOD;AAAA,IACD,KAAK,WAAW;AACd,iCAEG;WACKN;AAAAA,QADN,GAEMD,6CAAcQ;AAAAA,QAClB;AAAA,MAAA,CAHF;AAAA,IAMH;AAAA,IACD,SAAS;AACP,YAAMC,yBAA0B;AACV;AACd,cAAA,IAAIJ,MAAMI,sBAAV;AAAA,MAIP;AAAA,IACF;AAAA,EApDH;AAsDD;"}

package/dist/dev/Metafield.js

@@ -1,9 +1,11 @@
-import { useMemo } from "react";
-import { useShop } from "./ShopifyProvider.js";
-import { Image } from "./Image.js";
-import { Video } from "./Video.js";
-import { flattenConnection } from "./flatten-connection.js";
-import { jsx } from "react/jsx-runtime";
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const require$$0 = require("react");
+const ShopifyProvider = require("./ShopifyProvider.js");
+const Image = require("./Image.js");
+const Video = require("./Video.js");
+const flattenConnection = require("./flatten-connection.js");
+const jsxRuntime = require("react/jsx-runtime");
 function Metafield(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const {
@@ -13,8 +15,8 @@ function Metafield(props) {
   } = props;
   const {
     locale
-  } = useShop();
-  const parsedMetafield = useMemo(() => parseMetafield(data), [data]);
+  } = ShopifyProvider.useShop();
+  const parsedMetafield = require$$0.useMemo(() => parseMetafield(data), [data]);
   if (!parsedMetafield) {
     const noDataPropWarning = `<Metafield/>: nothing was passed to the data prop 'data'. Rendering 'null'`;
     {
@@ -30,14 +32,14 @@ function Metafield(props) {
   switch (parsedMetafield.type) {
     case "date": {
       const Wrapper2 = as != null ? as : "time";
-      return /* @__PURE__ */ jsx(Wrapper2, {
+      return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
         ...passthroughProps,
         children: parsedMetafield.value.toLocaleDateString(locale)
       });
     }
     case "date_time": {
       const Wrapper2 = as != null ? as : "time";
-      return /* @__PURE__ */ jsx(Wrapper2, {
+      return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
         ...passthroughProps,
         children: parsedMetafield.value.toLocaleString(locale)
       });
@@ -46,21 +48,21 @@ function Metafield(props) {
     case "dimension":
     case "volume": {
       const Wrapper2 = as != null ? as : "span";
-      return /* @__PURE__ */ jsx(Wrapper2, {
+      return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
         ...passthroughProps,
         children: getMeasurementAsString(parsedMetafield.value, locale)
       });
     }
     case "rating": {
       const Wrapper2 = as != null ? as : "span";
-      return /* @__PURE__ */ jsx(Wrapper2, {
+      return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
         ...passthroughProps,
         children: parsedMetafield.value.value
       });
     }
     case "single_line_text_field": {
       const Wrapper2 = as != null ? as : "span";
-      return /* @__PURE__ */ jsx(Wrapper2, {
+      return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
         ...passthroughProps,
         dangerouslySetInnerHTML: {
           __html: parsedMetafield.value
@@ -69,7 +71,7 @@ function Metafield(props) {
     }
     case "multi_line_text_field": {
       const Wrapper2 = as != null ? as : "div";
-      return /* @__PURE__ */ jsx(Wrapper2, {
+      return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
         ...passthroughProps,
         dangerouslySetInnerHTML: {
           __html: parsedMetafield.value.split("\n").join("<br/>")
@@ -78,7 +80,7 @@ function Metafield(props) {
     }
     case "url": {
       const protocolLessUrl = new URL(parsedMetafield.value);
-      return /* @__PURE__ */ jsx("a", {
+      return /* @__PURE__ */ jsxRuntime.jsx("a", {
         href: protocolLessUrl.href.replace(protocolLessUrl.protocol, ""),
         ...passthroughProps,
         children: parsedMetafield.value
@@ -86,7 +88,7 @@ function Metafield(props) {
     }
     case "json": {
       const Wrapper2 = as != null ? as : "span";
-      return /* @__PURE__ */ jsx(Wrapper2, {
+      return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
         ...passthroughProps,
         children: JSON.stringify(parsedMetafield.value)
       });
@@ -96,17 +98,17 @@ function Metafield(props) {
     case "page_reference": {
       const Wrapper2 = as != null ? as : "span";
       const ref = parsedMetafield.reference;
-      return /* @__PURE__ */ jsx(Wrapper2, {
+      return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
         ...passthroughProps,
         children: (_c = (_b = ref == null ? void 0 : ref.title) != null ? _b : ref == null ? void 0 : ref.id) != null ? _c : ""
       });
     }
     case "list.single_line_text_field": {
       const Wrapper2 = as != null ? as : "ul";
-      const refArray = parsedMetafield.references ? flattenConnection(parsedMetafield.references) : [];
-      return /* @__PURE__ */ jsx(Wrapper2, {
+      const refArray = parsedMetafield.references ? flattenConnection.flattenConnection(parsedMetafield.references) : [];
+      return /* @__PURE__ */ jsxRuntime.jsx(Wrapper2, {
         ...passthroughProps,
-        children: refArray.map((ref, index) => /* @__PURE__ */ jsx("li", {
+        children: refArray.map((ref, index) => /* @__PURE__ */ jsxRuntime.jsx("li", {
           children: ref
         }, `${ref != null ? ref : ""}-${index}`))
       });
@@ -114,22 +116,22 @@ function Metafield(props) {
     case "file_reference": {
       if (((_d = parsedMetafield.reference) == null ? void 0 : _d.__typename) === "MediaImage") {
         const ref = parsedMetafield.reference;
-        return ref.image ? /* @__PURE__ */ jsx(Image, {
+        return ref.image ? /* @__PURE__ */ jsxRuntime.jsx(Image.Image, {
           data: ref.image,
           ...passthroughProps
         }) : null;
       } else if (((_e = parsedMetafield.reference) == null ? void 0 : _e.__typename) === "GenericFile") {
         const ref = parsedMetafield.reference;
-        return ref.previewImage ? /* @__PURE__ */ jsx("a", {
+        return ref.previewImage ? /* @__PURE__ */ jsxRuntime.jsx("a", {
           href: (_g = (_f = parsedMetafield.reference) == null ? void 0 : _f.url) != null ? _g : "",
           ...passthroughProps,
-          children: /* @__PURE__ */ jsx(Image, {
+          children: /* @__PURE__ */ jsxRuntime.jsx(Image.Image, {
             data: ref.previewImage
           })
         }) : null;
       } else if (((_h = parsedMetafield.reference) == null ? void 0 : _h.__typename) === "Video") {
         const ref = parsedMetafield.reference;
-        return /* @__PURE__ */ jsx(Video, {
+        return /* @__PURE__ */ jsxRuntime.jsx(Video.Video, {
           ...passthroughProps,
           data: ref
         });
@@ -137,12 +139,15 @@ function Metafield(props) {
     }
   }
   const Wrapper = as != null ? as : "span";
-  return /* @__PURE__ */ jsx(Wrapper, {
+  return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, {
     ...passthroughProps,
     children: (_i = parsedMetafield.value) == null ? void 0 : _i.toString()
   });
 }
 function parseMetafield(metafield) {
+  {
+    console.info(`'parseMetafield()' will have a breaking change in a future version; its behavior will match that of 'metafieldParser()'`);
+  }
   if (!metafield) {
     {
       console.warn(`'parseMetafield' was not passed any value for the 'metafield' argument`);
@@ -158,6 +163,9 @@ function parseMetafield(metafield) {
   };
 }
 function parseMetafieldValue(metafield) {
+  {
+    console.info(`'parseMetafieldValue()' will be removed in a future version`);
+  }
   if (!metafield) {
     return null;
   }
@@ -285,11 +293,9 @@ function convertToSupportedUnit(value, unit) {
       throw new Error(`Unit not supported: ${unit}`);
   }
 }
-export {
-  Metafield,
-  getMeasurementAsString,
-  parseJSON,
-  parseMetafield,
-  parseMetafieldValue
-};
+exports.Metafield = Metafield;
+exports.getMeasurementAsString = getMeasurementAsString;
+exports.parseJSON = parseJSON;
+exports.parseMetafield = parseMetafield;
+exports.parseMetafieldValue = parseMetafieldValue;
 //# sourceMappingURL=Metafield.js.map