npm - @shopify/hydrogen-react - Versions diffs - 2023.4.5 → 2023.7.0 - Mend

@shopify/hydrogen-react 2023.4.5 → 2023.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (294) hide show

package/dist/node-dev/Image.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.js","sources":["../../src/Image.tsx"],"sourcesContent":["/* eslint-disable eslint-comments/disable-enable-pair /\n/ eslint-disable @typescript-eslint/explicit-function-return-type /\n/ eslint-disable hydrogen/prefer-image-component /\nimport as React from 'react';\nimport type {PartialDeep} from 'type-fest';\nimport type {Image as ImageType} from './storefront-api-types.js';\n\n/\n An optional prop you can use to change the\n * default srcSet generation behaviour\n /\ntype SrcSetOptions = {\n intervals: number;\n startingWidth: number;\n incrementSize: number;\n placeholderWidth: number;\n};\n\ntype HtmlImageProps = React.DetailedHTMLProps<\n React.ImgHTMLAttributes<HTMLImageElement>,\n HTMLImageElement\n>;\n\ntype NormalizedProps = {\n alt: string;\n aspectRatio: string \| undefined;\n height: string;\n src: string \| undefined;\n width: string;\n};\n\nexport type LoaderParams = {\n /* The base URL of the image /\n src?: ImageType['url'];\n /* The URL param that controls width /\n width?: number;\n /* The URL param that controls height /\n height?: number;\n /* The URL param that controls the cropping region /\n crop?: Crop;\n};\n\nexport type Loader = (params: LoaderParams) => string;\n\n/* Legacy type for backwards compatibility \n @deprecated Use `crop`, `width`, `height`, and `src` props, and/or `data` prop. Or pass a custom `loader` with `LoaderParams` /\nexport type ShopifyLoaderOptions = {\n /* The base URL of the image /\n src?: ImageType['url'];\n /* The URL param that controls width /\n width?: HtmlImageProps['width'] \| ImageType['width'];\n /* The URL param that controls height /\n height?: HtmlImageProps['height'] \| ImageType['height'];\n /* The URL param that controls the cropping region /\n crop?: Crop;\n};\n\n/\n * @TODO: Expand to include focal point support; and/or switch this to be an SF API type\n /\ntype Crop = 'center' \| 'top' \| 'bottom' \| 'left' \| 'right';\n\nexport type HydrogenImageProps = React.ComponentPropsWithRef<'img'> &\n HydrogenImageBaseProps;\n\ntype HydrogenImageBaseProps = {\n /* The aspect ratio of the image, in the format of `width/height`.\n \n @example\n * ```\n * <Image data={productImage} aspectRatio=\"4/5\" />\n * ```\n /\n aspectRatio?: string;\n /* The crop position of the image.\n \n @remarks\n * In the event that AspectRatio is set, without specifying a crop,\n * the Shopify CDN won't return the expected image.\n \n @defaultValue `center`\n /\n crop?: Crop;\n /* Data mapping to the [Storefront API `Image`](https://shopify.dev/docs/api/storefront/2023-04/objects/Image) object. Must be an Image object.\n \n @example\n * ```\n * import {IMAGE_FRAGMENT, Image} from '@shopify/hydrogen';\n \n export const IMAGE_QUERY = `#graphql\n * ${IMAGE_FRAGMENT}\n * query {\n * product {\n * featuredImage {\n * ...Image\n * }\n * }\n * }`\n \n <Image\n * data={productImage}\n * sizes=\"(min-width: 45em) 50vw, 100vw\"\n * aspectRatio=\"4/5\"\n * />\n * ```\n \n Image: {@link https://shopify.dev/api/storefront/reference/common-objects/image}\n /\n data?: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n /* A function that returns a URL string for an image.\n \n @remarks\n * By default, this uses Shopify’s CDN {@link https://cdn.shopify.com/} but you can provide\n * your own function to use a another provider, as long as they support URL based image transformations.\n /\n loader?: Loader;\n /* An optional prop you can use to change the default srcSet generation behaviour /\n srcSetOptions?: SrcSetOptions;\n /* @deprecated Use `crop`, `width`, `height`, and `src` props, and/or `data` prop /\n loaderOptions?: ShopifyLoaderOptions;\n /* @deprecated Autocalculated, use only `width` prop, or srcSetOptions /\n widths?: (HtmlImageProps['width'] \| ImageType['width'])[];\n};\n\n/\n A Storefront API GraphQL fragment that can be used to query for an image.\n /\nexport const IMAGE_FRAGMENT = `#graphql\n fragment Image on Image {\n altText\n url\n width\n height\n }\n`;\n\n/\n Hydrgen’s Image component is a wrapper around the HTML image element.\n * It supports the same props as the HTML `img` element, but automatically\n * generates the srcSet and sizes attributes for you. For most use cases,\n * you’ll want to set the `aspectRatio` prop to ensure the image is sized\n * correctly.\n \n @remarks\n * - `decoding` is set to `async` by default.\n * - `loading` is set to `lazy` by default.\n * - `alt` will automatically be set to the `altText` from the Storefront API if passed in the `data` prop\n * - `src` will automatically be set to the `url` from the Storefront API if passed in the `data` prop\n \n @example\n * A responsive image with a 4:5 aspect ratio:\n * ```\n * <Image\n * data={product.featuredImage}\n * aspectRatio=\"4/5\"\n * sizes=\"(min-width: 45em) 40vw, 100vw\"\n * />\n * ```\n * @example\n * A fixed size image:\n * ```\n * <Image\n * data={product.featuredImage}\n * width={100}\n * height={100}\n * />\n * ```\n \n {@link https://shopify.dev/docs/api/hydrogen-react/components/image}\n /\nexport const Image = React.forwardRef<HTMLImageElement, HydrogenImageProps>(\n (\n {\n alt,\n aspectRatio,\n crop = 'center',\n data,\n decoding = 'async',\n height = 'auto',\n loader = shopifyLoader,\n loaderOptions,\n loading = 'lazy',\n sizes,\n src,\n srcSetOptions = {\n intervals: 15,\n startingWidth: 200,\n incrementSize: 200,\n placeholderWidth: 100,\n },\n width = '100%',\n widths,\n ...passthroughProps\n },\n ref,\n ) => {\n /\n * Deprecated Props from original Image component\n /\n if (__HYDROGEN_DEV__) {\n if (loaderOptions) {\n console.warn(\n [\n `Deprecated property from original Image component in use:`,\n `Use the \\`crop\\`, \\`width\\`, \\`height\\`, and src props, or`,\n `the \\`data\\` prop to achieve the same result. Image used is ${\n src \|\| data?.url \|\| passthroughProps?.key \|\| 'unknown'\n }`,\n ].join(' '),\n );\n }\n\n if (widths) {\n console.warn(\n [\n `Deprecated property from original Image component in use:`,\n `\\`widths\\` are now calculated automatically based on the`,\n `config and width props. Image used is ${\n src \|\| data?.url \|\| passthroughProps?.key \|\| 'unknown'\n }`,\n ].join(' '),\n );\n }\n }\n\n /\n * Gets normalized values for width, height from data prop\n /\n const normalizedData = React.useMemo(() => {\n / Only use data width if height is also set /\n const dataWidth: number \| undefined =\n data?.width && data?.height ? data?.width : undefined;\n\n const dataHeight: number \| undefined =\n data?.width && data?.height ? data?.height : undefined;\n\n return {\n width: dataWidth,\n height: dataHeight,\n unitsMatch: Boolean(unitsMatch(dataWidth, dataHeight)),\n };\n }, [data]);\n\n /\n * Gets normalized values for width, height, src, alt, and aspectRatio props\n * supporting the presence of `data` in addition to flat props.\n /\n const normalizedProps = React.useMemo(() => {\n const nWidthProp: string \| number = width \|\| '100%';\n const widthParts = getUnitValueParts(nWidthProp.toString());\n const nWidth = `${widthParts.number}${widthParts.unit}`;\n\n const autoHeight = height === undefined \|\| height === null;\n const heightParts = autoHeight\n ? null\n : getUnitValueParts(height.toString());\n\n const fixedHeight = heightParts\n ? `${heightParts.number}${heightParts.unit}`\n : '';\n\n const nHeight = autoHeight ? 'auto' : fixedHeight;\n\n const nSrc: string \| undefined = src \|\| data?.url;\n\n if (__HYDROGEN_DEV__ && !nSrc) {\n console.warn(\n `No src or data.url provided to Image component.`,\n passthroughProps?.key \|\| '',\n );\n }\n\n const nAlt: string = data?.altText && !alt ? data?.altText : alt \|\| '';\n\n const nAspectRatio: string \| undefined = aspectRatio\n ? aspectRatio\n : normalizedData.unitsMatch\n ? [\n getNormalizedFixedUnit(normalizedData.width),\n getNormalizedFixedUnit(normalizedData.height),\n ].join('/')\n : undefined;\n\n return {\n width: nWidth,\n height: nHeight,\n src: nSrc,\n alt: nAlt,\n aspectRatio: nAspectRatio,\n };\n }, [\n width,\n height,\n src,\n data,\n alt,\n aspectRatio,\n normalizedData,\n passthroughProps?.key,\n ]);\n\n const {intervals, startingWidth, incrementSize, placeholderWidth} =\n srcSetOptions;\n\n /\n * This function creates an array of widths to be used in srcSet\n /\n const imageWidths = React.useMemo(() => {\n return generateImageWidths(\n width,\n intervals,\n startingWidth,\n incrementSize,\n );\n }, [width, intervals, startingWidth, incrementSize]);\n\n const fixedWidth = isFixedWidth(normalizedProps.width);\n\n if (__HYDROGEN_DEV__ && !sizes && !fixedWidth) {\n console.warn(\n [\n 'No sizes prop provided to Image component,',\n 'you may be loading unnecessarily large images.',\n `Image used is ${\n src \|\| data?.url \|\| passthroughProps?.key \|\| 'unknown'\n }`,\n ].join(' '),\n );\n }\n\n /\n * We check to see whether the image is fixed width or not,\n * if fixed, we still provide a srcSet, but only to account for\n * different pixel densities.\n /\n if (fixedWidth) {\n return (\n <FixedWidthImage\n aspectRatio={aspectRatio}\n crop={crop}\n decoding={decoding}\n height={height}\n imageWidths={imageWidths}\n loader={loader}\n loading={loading}\n normalizedProps={normalizedProps}\n passthroughProps={passthroughProps}\n ref={ref}\n width={width}\n />\n );\n } else {\n return (\n <FluidImage\n aspectRatio={aspectRatio}\n crop={crop}\n decoding={decoding}\n imageWidths={imageWidths}\n loader={loader}\n loading={loading}\n normalizedProps={normalizedProps}\n passthroughProps={passthroughProps}\n placeholderWidth={placeholderWidth}\n ref={ref}\n sizes={sizes}\n />\n );\n }\n },\n);\n\ntype FixedImageExludedProps =\n \| 'data'\n \| 'loader'\n \| 'loaderOptions'\n \| 'sizes'\n \| 'srcSetOptions'\n \| 'widths';\n\ntype FixedWidthImageProps = Omit<HydrogenImageProps, FixedImageExludedProps> & {\n loader: Loader;\n passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n normalizedProps: NormalizedProps;\n imageWidths: number[];\n ref: React.Ref<HTMLImageElement>;\n};\n\nfunction FixedWidthImage({\n aspectRatio,\n crop,\n decoding,\n height,\n imageWidths,\n loader = shopifyLoader,\n loading,\n normalizedProps,\n passthroughProps,\n ref,\n width,\n}: FixedWidthImageProps) {\n const fixed = React.useMemo(() => {\n const intWidth: number \| undefined = getNormalizedFixedUnit(width);\n const intHeight: number \| undefined = getNormalizedFixedUnit(height);\n\n /\n * The aspect ratio for fixed width images is taken from the explicitly\n * set prop, but if that's not present, and both width and height are\n * set, we calculate the aspect ratio from the width and height—as\n * long as they share the same unit type (e.g. both are 'px').\n /\n const fixedAspectRatio = aspectRatio\n ? aspectRatio\n : unitsMatch(normalizedProps.width, normalizedProps.height)\n ? [intWidth, intHeight].join('/')\n : normalizedProps.aspectRatio\n ? normalizedProps.aspectRatio\n : undefined;\n\n /\n * The Sizes Array generates an array of all of the parts\n * that make up the srcSet, including the width, height, and crop\n /\n const sizesArray =\n imageWidths === undefined\n ? undefined\n : generateSizes(imageWidths, fixedAspectRatio, crop);\n\n const fixedHeight = intHeight\n ? intHeight\n : fixedAspectRatio && intWidth\n ? intWidth (parseAspectRatio(fixedAspectRatio) ?? 1)\n : undefined;\n\n const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);\n const src = loader({\n src: normalizedProps.src,\n width: intWidth,\n height: fixedHeight,\n crop: normalizedProps.height === 'auto' ? undefined : crop,\n });\n\n return {\n width: intWidth,\n aspectRatio: fixedAspectRatio,\n height: fixedHeight,\n srcSet,\n src,\n };\n }, [aspectRatio, crop, height, imageWidths, loader, normalizedProps, width]);\n\n return (\n <img\n ref={ref}\n alt={normalizedProps.alt}\n decoding={decoding}\n height={fixed.height}\n loading={loading}\n src={fixed.src}\n srcSet={fixed.srcSet}\n width={fixed.width}\n style={{\n aspectRatio: fixed.aspectRatio,\n ...passthroughProps.style,\n }}\n {...passthroughProps}\n />\n );\n}\n\ntype FluidImageExcludedProps =\n \| 'data'\n \| 'width'\n \| 'height'\n \| 'loader'\n \| 'loaderOptions'\n \| 'srcSetOptions';\n\ntype FluidImageProps = Omit<HydrogenImageProps, FluidImageExcludedProps> & {\n imageWidths: number[];\n loader: Loader;\n normalizedProps: NormalizedProps;\n passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n placeholderWidth: number;\n ref: React.Ref<HTMLImageElement>;\n};\n\nfunction FluidImage({\n crop,\n decoding,\n imageWidths,\n loader = shopifyLoader,\n loading,\n normalizedProps,\n passthroughProps,\n placeholderWidth,\n ref,\n sizes,\n}: FluidImageProps) {\n const fluid = React.useMemo(() => {\n const sizesArray =\n imageWidths === undefined\n ? undefined\n : generateSizes(imageWidths, normalizedProps.aspectRatio, crop);\n\n const placeholderHeight =\n normalizedProps.aspectRatio && placeholderWidth\n ? placeholderWidth \n (parseAspectRatio(normalizedProps.aspectRatio) ?? 1)\n : undefined;\n\n const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);\n\n const src = loader({\n src: normalizedProps.src,\n width: placeholderWidth,\n height: placeholderHeight,\n crop,\n });\n\n return {\n placeholderHeight,\n srcSet,\n src,\n };\n }, [crop, imageWidths, loader, normalizedProps, placeholderWidth]);\n\n return (\n <img\n ref={ref}\n alt={normalizedProps.alt}\n decoding={decoding}\n height={fluid.placeholderHeight}\n loading={loading}\n sizes={sizes}\n src={fluid.src}\n srcSet={fluid.srcSet}\n width={placeholderWidth}\n {...passthroughProps}\n style={{\n width: normalizedProps.width,\n aspectRatio: normalizedProps.aspectRatio,\n ...passthroughProps.style,\n }}\n />\n );\n}\n\n/\n The shopifyLoader function is a simple utility function that takes a src, width,\n * height, and crop and returns a string that can be used as the src for an image.\n * It can be used with the Hydrogen Image component or with the next/image component.\n * (or any others that accept equivalent configuration)\n * @param src - The source URL of the image, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg`\n * @param width - The width of the image, e.g. `100`\n * @param height - The height of the image, e.g. `100`\n * @param crop - The crop of the image, e.g. `center`\n * @returns A Shopify image URL with the correct query parameters, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=100&height=100&crop=center`\n \n @example\n * ```\n * shopifyLoader({\n * src: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',\n * width: 100,\n * height: 100,\n * crop: 'center',\n * })\n * ```\n /\nexport function shopifyLoader({src, width, height, crop}: LoaderParams) {\n if (!src) {\n return '';\n }\n\n const url = new URL(src);\n\n if (width) {\n url.searchParams.append('width', Math.round(width).toString());\n }\n\n if (height) {\n url.searchParams.append('height', Math.round(height).toString());\n }\n\n if (crop) {\n url.searchParams.append('crop', crop);\n }\n return url.href;\n}\n\n/\n Checks whether the width and height share the same unit type\n * @param width - The width of the image, e.g. 100% \| 10px\n * @param height - The height of the image, e.g. auto \| 100px\n * @returns Whether the width and height share the same unit type (boolean)\n /\nfunction unitsMatch(\n width: string \| number = '100%',\n height: string \| number = 'auto',\n): boolean {\n return (\n getUnitValueParts(width.toString()).unit ===\n getUnitValueParts(height.toString()).unit\n );\n}\n\n/\n Given a CSS size, returns the unit and number parts of the value\n * @param value - The CSS size, e.g. 100px\n * @returns The unit and number parts of the value, e.g. \\{unit: 'px', number: 100\\}\n /\nfunction getUnitValueParts(value: string): {unit: string; number: number} {\n const unit = value.replace(/[0-9.]/g, '');\n const number = parseFloat(value.replace(unit, ''));\n\n return {\n unit: unit === '' ? (number === undefined ? 'auto' : 'px') : unit,\n number,\n };\n}\n\n/\n Given a value, returns the width of the image as an integer in pixels\n * @param value - The width of the image, e.g. 16px \| 1rem \| 1em \| 16\n * @returns The width of the image in pixels, e.g. 16, or undefined if the value is not a fixed unit\n /\nfunction getNormalizedFixedUnit(value?: string \| number): number \| undefined {\n if (value === undefined) {\n return;\n }\n\n const {unit, number} = getUnitValueParts(value.toString());\n\n switch (unit) {\n case 'em':\n return number 16;\n case 'rem':\n return number * 16;\n case 'px':\n return number;\n case '':\n return number;\n default:\n return;\n }\n}\n\n/*\n This function checks whether a width is fixed or not.\n * @param width - The width of the image, e.g. 100 \| '100px' \| '100em' \| '100rem'\n * @returns Whether the width is fixed or not\n /\nfunction isFixedWidth(width: string \| number): boolean {\n const fixedEndings = /\\d(px\|em\|rem)$/;\n return (\n typeof width === 'number' \|\|\n (typeof width === 'string' && fixedEndings.test(width))\n );\n}\n\n/\n This function generates a srcSet for Shopify images.\n * @param src - The source URL of the image, e.g. https://cdn.shopify.com/static/sample-images/garnished.jpeg\n * @param sizesArray - An array of objects containing the `width`, `height`, and `crop` of the image, e.g. [\\{width: 200, height: 200, crop: 'center'\\}, \\{width: 400, height: 400, crop: 'center'\\}]\n * @param loader - A function that takes a Shopify image URL and returns a Shopify image URL with the correct query parameters\n * @returns A srcSet for Shopify images, e.g. 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=200&height=200&crop=center 200w, https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=400&height=400&crop=center 400w'\n /\nexport function generateSrcSet(\n src?: string,\n sizesArray?: Array<{width?: number; height?: number; crop?: Crop}>,\n loader: Loader = shopifyLoader,\n): string {\n if (!src) {\n return '';\n }\n\n if (sizesArray?.length === 0 \|\| !sizesArray) {\n return src;\n }\n\n return sizesArray\n .map(\n (size, i) =>\n `${loader({\n src,\n width: size.width,\n height: size.height,\n crop: size.crop,\n })} ${sizesArray.length === 3 ? `${i + 1}x` : `${size.width ?? 0}w`}`,\n )\n .join(`, `);\n}\n\n/\n This function generates an array of sizes for Shopify images, for both fixed and responsive images.\n * @param width - The CSS width of the image\n * @param intervals - The number of intervals to generate\n * @param startingWidth - The starting width of the image\n * @param incrementSize - The size of each interval\n * @returns An array of widths\n /\nexport function generateImageWidths(\n width: string \| number = '100%',\n intervals: number,\n startingWidth: number,\n incrementSize: number,\n): number[] {\n const responsive = Array.from(\n {length: intervals},\n (_, i) => i incrementSize + startingWidth,\n );\n\n const fixed = Array.from(\n {length: 3},\n (_, i) => (i + 1) * (getNormalizedFixedUnit(width) ?? 0),\n );\n\n return isFixedWidth(width) ? fixed : responsive;\n}\n\n/*\n Simple utility function to convert an aspect ratio CSS string to a decimal, currently only supports values like `1/1`, not `0.5`, or `auto`\n * @param aspectRatio - The aspect ratio of the image, e.g. `1/1`\n * @returns The aspect ratio as a number, e.g. `0.5`\n \n {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio}\n /\nexport function parseAspectRatio(aspectRatio?: string): number \| undefined {\n if (!aspectRatio) return;\n const [width, height] = aspectRatio.split('/');\n return 1 / (Number(width) / Number(height));\n}\n\n// Generate data needed for Imagery loader\nexport function generateSizes(\n imageWidths?: number[],\n aspectRatio?: string,\n crop: Crop = 'center',\n):\n \| {\n width: number;\n height: number \| undefined;\n crop: Crop;\n }[]\n \| undefined {\n if (!imageWidths) return;\n const sizes = imageWidths.map((width: number) => {\n return {\n width,\n height: aspectRatio\n ? width (parseAspectRatio(aspectRatio) ?? 1)\n : undefined,\n crop,\n };\n });\n return sizes;\n /\n Given:\n ([100, 200], 1/1, 'center')\n Returns:\n [{width: 100, height: 100, crop: 'center'},\n {width: 200, height: 200, crop: 'center'}]\n /\n}\n"],"names":["React","jsx"],"mappings":"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"}
1	+ {"version":3,"file":"Image.js","sources":["../../src/Image.tsx"],"sourcesContent":["/* eslint-disable eslint-comments/disable-enable-pair /\n/ eslint-disable @typescript-eslint/explicit-function-return-type /\n/ eslint-disable hydrogen/prefer-image-component /\nimport as React from 'react';\nimport type {PartialDeep} from 'type-fest';\nimport type {Image as ImageType} from './storefront-api-types.js';\n\n/\n An optional prop you can use to change the\n * default srcSet generation behaviour\n /\ntype SrcSetOptions = {\n /* The number of sizes to generate /\n intervals: number;\n /* The smallest image size /\n startingWidth: number;\n /* The increment by which to increase for each size, in pixels /\n incrementSize: number;\n /* The size used for placeholder fallback images /\n placeholderWidth: number;\n};\n\ntype HtmlImageProps = React.DetailedHTMLProps<\n React.ImgHTMLAttributes<HTMLImageElement>,\n HTMLImageElement\n>;\n\ntype NormalizedProps = {\n alt: string;\n aspectRatio: string \| undefined;\n height: string;\n src: string \| undefined;\n width: string;\n};\n\nexport type LoaderParams = {\n /* The base URL of the image /\n src?: ImageType['url'];\n /* The URL param that controls width /\n width?: number;\n /* The URL param that controls height /\n height?: number;\n /* The URL param that controls the cropping region /\n crop?: Crop;\n};\n\nexport type Loader = (params: LoaderParams) => string;\n\n/* Legacy type for backwards compatibility \n @deprecated Use `crop`, `width`, `height`, and `src` props, and/or `data` prop. Or pass a custom `loader` with `LoaderParams` /\nexport type ShopifyLoaderOptions = {\n /* The base URL of the image /\n src?: ImageType['url'];\n /* The URL param that controls width /\n width?: HtmlImageProps['width'] \| ImageType['width'];\n /* The URL param that controls height /\n height?: HtmlImageProps['height'] \| ImageType['height'];\n /* The URL param that controls the cropping region /\n crop?: Crop;\n};\n\n/\n * @TODO: Expand to include focal point support; and/or switch this to be an SF API type\n /\ntype Crop = 'center' \| 'top' \| 'bottom' \| 'left' \| 'right';\n\nexport type HydrogenImageProps = React.ComponentPropsWithRef<'img'> &\n HydrogenImageBaseProps;\n\ntype HydrogenImageBaseProps = {\n /* The aspect ratio of the image, in the format of `width/height`.\n \n @example\n * ```\n * <Image data={productImage} aspectRatio=\"4/5\" />\n * ```\n /\n aspectRatio?: string;\n /* The crop position of the image.\n \n @remarks\n * In the event that AspectRatio is set, without specifying a crop,\n * the Shopify CDN won't return the expected image.\n \n @defaultValue `center`\n /\n crop?: Crop;\n /* Data mapping to the [Storefront API `Image`](https://shopify.dev/docs/api/storefront/2023-07/objects/Image) object. Must be an Image object.\n \n @example\n * ```\n * import {IMAGE_FRAGMENT, Image} from '@shopify/hydrogen';\n \n export const IMAGE_QUERY = `#graphql\n * ${IMAGE_FRAGMENT}\n * query {\n * product {\n * featuredImage {\n * ...Image\n * }\n * }\n * }`\n \n <Image\n * data={productImage}\n * sizes=\"(min-width: 45em) 50vw, 100vw\"\n * aspectRatio=\"4/5\"\n * />\n * ```\n \n Image: {@link https://shopify.dev/api/storefront/reference/common-objects/image}\n /\n data?: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n /* A function that returns a URL string for an image.\n \n @remarks\n * By default, this uses Shopify’s CDN {@link https://cdn.shopify.com/} but you can provide\n * your own function to use a another provider, as long as they support URL based image transformations.\n /\n loader?: Loader;\n /* An optional prop you can use to change the default srcSet generation behaviour /\n srcSetOptions?: SrcSetOptions;\n /* @deprecated Use `crop`, `width`, `height`, and `src` props, and/or `data` prop /\n loaderOptions?: ShopifyLoaderOptions;\n /* @deprecated Autocalculated, use only `width` prop, or srcSetOptions /\n widths?: (HtmlImageProps['width'] \| ImageType['width'])[];\n};\n\n/\n A Storefront API GraphQL fragment that can be used to query for an image.\n /\nexport const IMAGE_FRAGMENT = `#graphql\n fragment Image on Image {\n altText\n url\n width\n height\n }\n`;\n\n/\n Hydrgen’s Image component is a wrapper around the HTML image element.\n * It supports the same props as the HTML `img` element, but automatically\n * generates the srcSet and sizes attributes for you. For most use cases,\n * you’ll want to set the `aspectRatio` prop to ensure the image is sized\n * correctly.\n \n @remarks\n * - `decoding` is set to `async` by default.\n * - `loading` is set to `lazy` by default.\n * - `alt` will automatically be set to the `altText` from the Storefront API if passed in the `data` prop\n * - `src` will automatically be set to the `url` from the Storefront API if passed in the `data` prop\n \n @example\n * A responsive image with a 4:5 aspect ratio:\n * ```\n * <Image\n * data={product.featuredImage}\n * aspectRatio=\"4/5\"\n * sizes=\"(min-width: 45em) 40vw, 100vw\"\n * />\n * ```\n * @example\n * A fixed size image:\n * ```\n * <Image\n * data={product.featuredImage}\n * width={100}\n * height={100}\n * />\n * ```\n \n {@link https://shopify.dev/docs/api/hydrogen-react/components/image}\n /\nexport const Image = React.forwardRef<HTMLImageElement, HydrogenImageProps>(\n (\n {\n alt,\n aspectRatio,\n crop = 'center',\n data,\n decoding = 'async',\n height = 'auto',\n loader = shopifyLoader,\n loaderOptions,\n loading = 'lazy',\n sizes,\n src,\n srcSetOptions = {\n intervals: 15,\n startingWidth: 200,\n incrementSize: 200,\n placeholderWidth: 100,\n },\n width = '100%',\n widths,\n ...passthroughProps\n },\n ref,\n ) => {\n /\n * Deprecated Props from original Image component\n /\n if (__HYDROGEN_DEV__) {\n if (loaderOptions) {\n console.warn(\n [\n `Deprecated property from original Image component in use:`,\n `Use the \\`crop\\`, \\`width\\`, \\`height\\`, and src props, or`,\n `the \\`data\\` prop to achieve the same result. Image used is ${\n src \|\| data?.url \|\| passthroughProps?.key \|\| 'unknown'\n }`,\n ].join(' '),\n );\n }\n\n if (widths) {\n console.warn(\n [\n `Deprecated property from original Image component in use:`,\n `\\`widths\\` are now calculated automatically based on the`,\n `config and width props. Image used is ${\n src \|\| data?.url \|\| passthroughProps?.key \|\| 'unknown'\n }`,\n ].join(' '),\n );\n }\n }\n\n /\n * Gets normalized values for width, height from data prop\n /\n const normalizedData = React.useMemo(() => {\n / Only use data width if height is also set /\n const dataWidth: number \| undefined =\n data?.width && data?.height ? data?.width : undefined;\n\n const dataHeight: number \| undefined =\n data?.width && data?.height ? data?.height : undefined;\n\n return {\n width: dataWidth,\n height: dataHeight,\n unitsMatch: Boolean(unitsMatch(dataWidth, dataHeight)),\n };\n }, [data]);\n\n /\n * Gets normalized values for width, height, src, alt, and aspectRatio props\n * supporting the presence of `data` in addition to flat props.\n /\n const normalizedProps = React.useMemo(() => {\n const nWidthProp: string \| number = width \|\| '100%';\n const widthParts = getUnitValueParts(nWidthProp.toString());\n const nWidth = `${widthParts.number}${widthParts.unit}`;\n\n const autoHeight = height === undefined \|\| height === null;\n const heightParts = autoHeight\n ? null\n : getUnitValueParts(height.toString());\n\n const fixedHeight = heightParts\n ? `${heightParts.number}${heightParts.unit}`\n : '';\n\n const nHeight = autoHeight ? 'auto' : fixedHeight;\n\n const nSrc: string \| undefined = src \|\| data?.url;\n\n if (__HYDROGEN_DEV__ && !nSrc) {\n console.warn(\n `No src or data.url provided to Image component.`,\n passthroughProps?.key \|\| '',\n );\n }\n\n const nAlt: string = data?.altText && !alt ? data?.altText : alt \|\| '';\n\n const nAspectRatio: string \| undefined = aspectRatio\n ? aspectRatio\n : normalizedData.unitsMatch\n ? [\n getNormalizedFixedUnit(normalizedData.width),\n getNormalizedFixedUnit(normalizedData.height),\n ].join('/')\n : undefined;\n\n return {\n width: nWidth,\n height: nHeight,\n src: nSrc,\n alt: nAlt,\n aspectRatio: nAspectRatio,\n };\n }, [\n width,\n height,\n src,\n data,\n alt,\n aspectRatio,\n normalizedData,\n passthroughProps?.key,\n ]);\n\n const {intervals, startingWidth, incrementSize, placeholderWidth} =\n srcSetOptions;\n\n /\n * This function creates an array of widths to be used in srcSet\n /\n const imageWidths = React.useMemo(() => {\n return generateImageWidths(\n width,\n intervals,\n startingWidth,\n incrementSize,\n );\n }, [width, intervals, startingWidth, incrementSize]);\n\n const fixedWidth = isFixedWidth(normalizedProps.width);\n\n if (__HYDROGEN_DEV__ && !sizes && !fixedWidth) {\n console.warn(\n [\n 'No sizes prop provided to Image component,',\n 'you may be loading unnecessarily large images.',\n `Image used is ${\n src \|\| data?.url \|\| passthroughProps?.key \|\| 'unknown'\n }`,\n ].join(' '),\n );\n }\n\n /\n * We check to see whether the image is fixed width or not,\n * if fixed, we still provide a srcSet, but only to account for\n * different pixel densities.\n /\n if (fixedWidth) {\n return (\n <FixedWidthImage\n aspectRatio={aspectRatio}\n crop={crop}\n decoding={decoding}\n height={height}\n imageWidths={imageWidths}\n loader={loader}\n loading={loading}\n normalizedProps={normalizedProps}\n passthroughProps={passthroughProps}\n ref={ref}\n width={width}\n />\n );\n } else {\n return (\n <FluidImage\n aspectRatio={aspectRatio}\n crop={crop}\n decoding={decoding}\n imageWidths={imageWidths}\n loader={loader}\n loading={loading}\n normalizedProps={normalizedProps}\n passthroughProps={passthroughProps}\n placeholderWidth={placeholderWidth}\n ref={ref}\n sizes={sizes}\n />\n );\n }\n },\n);\n\ntype FixedImageExludedProps =\n \| 'data'\n \| 'loader'\n \| 'loaderOptions'\n \| 'sizes'\n \| 'srcSetOptions'\n \| 'widths';\n\ntype FixedWidthImageProps = Omit<HydrogenImageProps, FixedImageExludedProps> & {\n loader: Loader;\n passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n normalizedProps: NormalizedProps;\n imageWidths: number[];\n ref: React.Ref<HTMLImageElement>;\n};\n\nfunction FixedWidthImage({\n aspectRatio,\n crop,\n decoding,\n height,\n imageWidths,\n loader = shopifyLoader,\n loading,\n normalizedProps,\n passthroughProps,\n ref,\n width,\n}: FixedWidthImageProps) {\n const fixed = React.useMemo(() => {\n const intWidth: number \| undefined = getNormalizedFixedUnit(width);\n const intHeight: number \| undefined = getNormalizedFixedUnit(height);\n\n /\n * The aspect ratio for fixed width images is taken from the explicitly\n * set prop, but if that's not present, and both width and height are\n * set, we calculate the aspect ratio from the width and height—as\n * long as they share the same unit type (e.g. both are 'px').\n /\n const fixedAspectRatio = aspectRatio\n ? aspectRatio\n : unitsMatch(normalizedProps.width, normalizedProps.height)\n ? [intWidth, intHeight].join('/')\n : normalizedProps.aspectRatio\n ? normalizedProps.aspectRatio\n : undefined;\n\n /\n * The Sizes Array generates an array of all of the parts\n * that make up the srcSet, including the width, height, and crop\n /\n const sizesArray =\n imageWidths === undefined\n ? undefined\n : generateSizes(imageWidths, fixedAspectRatio, crop);\n\n const fixedHeight = intHeight\n ? intHeight\n : fixedAspectRatio && intWidth\n ? intWidth (parseAspectRatio(fixedAspectRatio) ?? 1)\n : undefined;\n\n const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);\n const src = loader({\n src: normalizedProps.src,\n width: intWidth,\n height: fixedHeight,\n crop: normalizedProps.height === 'auto' ? undefined : crop,\n });\n\n return {\n width: intWidth,\n aspectRatio: fixedAspectRatio,\n height: fixedHeight,\n srcSet,\n src,\n };\n }, [aspectRatio, crop, height, imageWidths, loader, normalizedProps, width]);\n\n return (\n <img\n ref={ref}\n alt={normalizedProps.alt}\n decoding={decoding}\n height={fixed.height}\n loading={loading}\n src={fixed.src}\n srcSet={fixed.srcSet}\n width={fixed.width}\n style={{\n aspectRatio: fixed.aspectRatio,\n ...passthroughProps.style,\n }}\n {...passthroughProps}\n />\n );\n}\n\ntype FluidImageExcludedProps =\n \| 'data'\n \| 'width'\n \| 'height'\n \| 'loader'\n \| 'loaderOptions'\n \| 'srcSetOptions';\n\ntype FluidImageProps = Omit<HydrogenImageProps, FluidImageExcludedProps> & {\n imageWidths: number[];\n loader: Loader;\n normalizedProps: NormalizedProps;\n passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n placeholderWidth: number;\n ref: React.Ref<HTMLImageElement>;\n};\n\nfunction FluidImage({\n crop,\n decoding,\n imageWidths,\n loader = shopifyLoader,\n loading,\n normalizedProps,\n passthroughProps,\n placeholderWidth,\n ref,\n sizes,\n}: FluidImageProps) {\n const fluid = React.useMemo(() => {\n const sizesArray =\n imageWidths === undefined\n ? undefined\n : generateSizes(imageWidths, normalizedProps.aspectRatio, crop);\n\n const placeholderHeight =\n normalizedProps.aspectRatio && placeholderWidth\n ? placeholderWidth \n (parseAspectRatio(normalizedProps.aspectRatio) ?? 1)\n : undefined;\n\n const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);\n\n const src = loader({\n src: normalizedProps.src,\n width: placeholderWidth,\n height: placeholderHeight,\n crop,\n });\n\n return {\n placeholderHeight,\n srcSet,\n src,\n };\n }, [crop, imageWidths, loader, normalizedProps, placeholderWidth]);\n\n return (\n <img\n ref={ref}\n alt={normalizedProps.alt}\n decoding={decoding}\n height={fluid.placeholderHeight}\n loading={loading}\n sizes={sizes}\n src={fluid.src}\n srcSet={fluid.srcSet}\n width={placeholderWidth}\n {...passthroughProps}\n style={{\n width: normalizedProps.width,\n aspectRatio: normalizedProps.aspectRatio,\n ...passthroughProps.style,\n }}\n />\n );\n}\n\n/\n The shopifyLoader function is a simple utility function that takes a src, width,\n * height, and crop and returns a string that can be used as the src for an image.\n * It can be used with the Hydrogen Image component or with the next/image component.\n * (or any others that accept equivalent configuration)\n * @param src - The source URL of the image, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg`\n * @param width - The width of the image, e.g. `100`\n * @param height - The height of the image, e.g. `100`\n * @param crop - The crop of the image, e.g. `center`\n * @returns A Shopify image URL with the correct query parameters, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=100&height=100&crop=center`\n \n @example\n * ```\n * shopifyLoader({\n * src: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',\n * width: 100,\n * height: 100,\n * crop: 'center',\n * })\n * ```\n /\nexport function shopifyLoader({src, width, height, crop}: LoaderParams) {\n if (!src) {\n return '';\n }\n\n const url = new URL(src);\n\n if (width) {\n url.searchParams.append('width', Math.round(width).toString());\n }\n\n if (height) {\n url.searchParams.append('height', Math.round(height).toString());\n }\n\n if (crop) {\n url.searchParams.append('crop', crop);\n }\n return url.href;\n}\n\n/\n Checks whether the width and height share the same unit type\n * @param width - The width of the image, e.g. 100% \| 10px\n * @param height - The height of the image, e.g. auto \| 100px\n * @returns Whether the width and height share the same unit type (boolean)\n /\nfunction unitsMatch(\n width: string \| number = '100%',\n height: string \| number = 'auto',\n): boolean {\n return (\n getUnitValueParts(width.toString()).unit ===\n getUnitValueParts(height.toString()).unit\n );\n}\n\n/\n Given a CSS size, returns the unit and number parts of the value\n * @param value - The CSS size, e.g. 100px\n * @returns The unit and number parts of the value, e.g. \\{unit: 'px', number: 100\\}\n /\nfunction getUnitValueParts(value: string): {unit: string; number: number} {\n const unit = value.replace(/[0-9.]/g, '');\n const number = parseFloat(value.replace(unit, ''));\n\n return {\n unit: unit === '' ? (number === undefined ? 'auto' : 'px') : unit,\n number,\n };\n}\n\n/\n Given a value, returns the width of the image as an integer in pixels\n * @param value - The width of the image, e.g. 16px \| 1rem \| 1em \| 16\n * @returns The width of the image in pixels, e.g. 16, or undefined if the value is not a fixed unit\n /\nfunction getNormalizedFixedUnit(value?: string \| number): number \| undefined {\n if (value === undefined) {\n return;\n }\n\n const {unit, number} = getUnitValueParts(value.toString());\n\n switch (unit) {\n case 'em':\n return number 16;\n case 'rem':\n return number * 16;\n case 'px':\n return number;\n case '':\n return number;\n default:\n return;\n }\n}\n\n/*\n This function checks whether a width is fixed or not.\n * @param width - The width of the image, e.g. 100 \| '100px' \| '100em' \| '100rem'\n * @returns Whether the width is fixed or not\n /\nfunction isFixedWidth(width: string \| number): boolean {\n const fixedEndings = /\\d(px\|em\|rem)$/;\n return (\n typeof width === 'number' \|\|\n (typeof width === 'string' && fixedEndings.test(width))\n );\n}\n\n/\n This function generates a srcSet for Shopify images.\n * @param src - The source URL of the image, e.g. https://cdn.shopify.com/static/sample-images/garnished.jpeg\n * @param sizesArray - An array of objects containing the `width`, `height`, and `crop` of the image, e.g. [\\{width: 200, height: 200, crop: 'center'\\}, \\{width: 400, height: 400, crop: 'center'\\}]\n * @param loader - A function that takes a Shopify image URL and returns a Shopify image URL with the correct query parameters\n * @returns A srcSet for Shopify images, e.g. 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=200&height=200&crop=center 200w, https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=400&height=400&crop=center 400w'\n /\nexport function generateSrcSet(\n src?: string,\n sizesArray?: Array<{width?: number; height?: number; crop?: Crop}>,\n loader: Loader = shopifyLoader,\n): string {\n if (!src) {\n return '';\n }\n\n if (sizesArray?.length === 0 \|\| !sizesArray) {\n return src;\n }\n\n return sizesArray\n .map(\n (size, i) =>\n `${loader({\n src,\n width: size.width,\n height: size.height,\n crop: size.crop,\n })} ${sizesArray.length === 3 ? `${i + 1}x` : `${size.width ?? 0}w`}`,\n )\n .join(`, `);\n}\n\n/\n This function generates an array of sizes for Shopify images, for both fixed and responsive images.\n * @param width - The CSS width of the image\n * @param intervals - The number of intervals to generate\n * @param startingWidth - The starting width of the image\n * @param incrementSize - The size of each interval\n * @returns An array of widths\n /\nexport function generateImageWidths(\n width: string \| number = '100%',\n intervals: number,\n startingWidth: number,\n incrementSize: number,\n): number[] {\n const responsive = Array.from(\n {length: intervals},\n (_, i) => i incrementSize + startingWidth,\n );\n\n const fixed = Array.from(\n {length: 3},\n (_, i) => (i + 1) * (getNormalizedFixedUnit(width) ?? 0),\n );\n\n return isFixedWidth(width) ? fixed : responsive;\n}\n\n/*\n Simple utility function to convert an aspect ratio CSS string to a decimal, currently only supports values like `1/1`, not `0.5`, or `auto`\n * @param aspectRatio - The aspect ratio of the image, e.g. `1/1`\n * @returns The aspect ratio as a number, e.g. `0.5`\n \n {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio}\n /\nexport function parseAspectRatio(aspectRatio?: string): number \| undefined {\n if (!aspectRatio) return;\n const [width, height] = aspectRatio.split('/');\n return 1 / (Number(width) / Number(height));\n}\n\n// Generate data needed for Imagery loader\nexport function generateSizes(\n imageWidths?: number[],\n aspectRatio?: string,\n crop: Crop = 'center',\n):\n \| {\n width: number;\n height: number \| undefined;\n crop: Crop;\n }[]\n \| undefined {\n if (!imageWidths) return;\n const sizes = imageWidths.map((width: number) => {\n return {\n width,\n height: aspectRatio\n ? width (parseAspectRatio(aspectRatio) ?? 1)\n : undefined,\n crop,\n };\n });\n return sizes;\n /\n Given:\n ([100, 200], 1/1, 'center')\n Returns:\n [{width: 100, height: 100, crop: 'center'},\n {width: 200, height: 200, crop: 'center'}]\n /\n}\n"],"names":["React","jsx"],"mappings":"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"}

package/dist/node-dev/Image.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Image.mjs","sources":["../../src/Image.tsx"],"sourcesContent":["/* eslint-disable eslint-comments/disable-enable-pair /\n/ eslint-disable @typescript-eslint/explicit-function-return-type /\n/ eslint-disable hydrogen/prefer-image-component /\nimport as React from 'react';\nimport type {PartialDeep} from 'type-fest';\nimport type {Image as ImageType} from './storefront-api-types.js';\n\n/\n An optional prop you can use to change the\n * default srcSet generation behaviour\n /\ntype SrcSetOptions = {\n intervals: number;\n startingWidth: number;\n incrementSize: number;\n placeholderWidth: number;\n};\n\ntype HtmlImageProps = React.DetailedHTMLProps<\n React.ImgHTMLAttributes<HTMLImageElement>,\n HTMLImageElement\n>;\n\ntype NormalizedProps = {\n alt: string;\n aspectRatio: string \| undefined;\n height: string;\n src: string \| undefined;\n width: string;\n};\n\nexport type LoaderParams = {\n /* The base URL of the image /\n src?: ImageType['url'];\n /* The URL param that controls width /\n width?: number;\n /* The URL param that controls height /\n height?: number;\n /* The URL param that controls the cropping region /\n crop?: Crop;\n};\n\nexport type Loader = (params: LoaderParams) => string;\n\n/* Legacy type for backwards compatibility \n @deprecated Use `crop`, `width`, `height`, and `src` props, and/or `data` prop. Or pass a custom `loader` with `LoaderParams` /\nexport type ShopifyLoaderOptions = {\n /* The base URL of the image /\n src?: ImageType['url'];\n /* The URL param that controls width /\n width?: HtmlImageProps['width'] \| ImageType['width'];\n /* The URL param that controls height /\n height?: HtmlImageProps['height'] \| ImageType['height'];\n /* The URL param that controls the cropping region /\n crop?: Crop;\n};\n\n/\n * @TODO: Expand to include focal point support; and/or switch this to be an SF API type\n /\ntype Crop = 'center' \| 'top' \| 'bottom' \| 'left' \| 'right';\n\nexport type HydrogenImageProps = React.ComponentPropsWithRef<'img'> &\n HydrogenImageBaseProps;\n\ntype HydrogenImageBaseProps = {\n /* The aspect ratio of the image, in the format of `width/height`.\n \n @example\n * ```\n * <Image data={productImage} aspectRatio=\"4/5\" />\n * ```\n /\n aspectRatio?: string;\n /* The crop position of the image.\n \n @remarks\n * In the event that AspectRatio is set, without specifying a crop,\n * the Shopify CDN won't return the expected image.\n \n @defaultValue `center`\n /\n crop?: Crop;\n /* Data mapping to the [Storefront API `Image`](https://shopify.dev/docs/api/storefront/2023-04/objects/Image) object. Must be an Image object.\n \n @example\n * ```\n * import {IMAGE_FRAGMENT, Image} from '@shopify/hydrogen';\n \n export const IMAGE_QUERY = `#graphql\n * ${IMAGE_FRAGMENT}\n * query {\n * product {\n * featuredImage {\n * ...Image\n * }\n * }\n * }`\n \n <Image\n * data={productImage}\n * sizes=\"(min-width: 45em) 50vw, 100vw\"\n * aspectRatio=\"4/5\"\n * />\n * ```\n \n Image: {@link https://shopify.dev/api/storefront/reference/common-objects/image}\n /\n data?: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n /* A function that returns a URL string for an image.\n \n @remarks\n * By default, this uses Shopify’s CDN {@link https://cdn.shopify.com/} but you can provide\n * your own function to use a another provider, as long as they support URL based image transformations.\n /\n loader?: Loader;\n /* An optional prop you can use to change the default srcSet generation behaviour /\n srcSetOptions?: SrcSetOptions;\n /* @deprecated Use `crop`, `width`, `height`, and `src` props, and/or `data` prop /\n loaderOptions?: ShopifyLoaderOptions;\n /* @deprecated Autocalculated, use only `width` prop, or srcSetOptions /\n widths?: (HtmlImageProps['width'] \| ImageType['width'])[];\n};\n\n/\n A Storefront API GraphQL fragment that can be used to query for an image.\n /\nexport const IMAGE_FRAGMENT = `#graphql\n fragment Image on Image {\n altText\n url\n width\n height\n }\n`;\n\n/\n Hydrgen’s Image component is a wrapper around the HTML image element.\n * It supports the same props as the HTML `img` element, but automatically\n * generates the srcSet and sizes attributes for you. For most use cases,\n * you’ll want to set the `aspectRatio` prop to ensure the image is sized\n * correctly.\n \n @remarks\n * - `decoding` is set to `async` by default.\n * - `loading` is set to `lazy` by default.\n * - `alt` will automatically be set to the `altText` from the Storefront API if passed in the `data` prop\n * - `src` will automatically be set to the `url` from the Storefront API if passed in the `data` prop\n \n @example\n * A responsive image with a 4:5 aspect ratio:\n * ```\n * <Image\n * data={product.featuredImage}\n * aspectRatio=\"4/5\"\n * sizes=\"(min-width: 45em) 40vw, 100vw\"\n * />\n * ```\n * @example\n * A fixed size image:\n * ```\n * <Image\n * data={product.featuredImage}\n * width={100}\n * height={100}\n * />\n * ```\n \n {@link https://shopify.dev/docs/api/hydrogen-react/components/image}\n /\nexport const Image = React.forwardRef<HTMLImageElement, HydrogenImageProps>(\n (\n {\n alt,\n aspectRatio,\n crop = 'center',\n data,\n decoding = 'async',\n height = 'auto',\n loader = shopifyLoader,\n loaderOptions,\n loading = 'lazy',\n sizes,\n src,\n srcSetOptions = {\n intervals: 15,\n startingWidth: 200,\n incrementSize: 200,\n placeholderWidth: 100,\n },\n width = '100%',\n widths,\n ...passthroughProps\n },\n ref,\n ) => {\n /\n * Deprecated Props from original Image component\n /\n if (__HYDROGEN_DEV__) {\n if (loaderOptions) {\n console.warn(\n [\n `Deprecated property from original Image component in use:`,\n `Use the \\`crop\\`, \\`width\\`, \\`height\\`, and src props, or`,\n `the \\`data\\` prop to achieve the same result. Image used is ${\n src \|\| data?.url \|\| passthroughProps?.key \|\| 'unknown'\n }`,\n ].join(' '),\n );\n }\n\n if (widths) {\n console.warn(\n [\n `Deprecated property from original Image component in use:`,\n `\\`widths\\` are now calculated automatically based on the`,\n `config and width props. Image used is ${\n src \|\| data?.url \|\| passthroughProps?.key \|\| 'unknown'\n }`,\n ].join(' '),\n );\n }\n }\n\n /\n * Gets normalized values for width, height from data prop\n /\n const normalizedData = React.useMemo(() => {\n / Only use data width if height is also set /\n const dataWidth: number \| undefined =\n data?.width && data?.height ? data?.width : undefined;\n\n const dataHeight: number \| undefined =\n data?.width && data?.height ? data?.height : undefined;\n\n return {\n width: dataWidth,\n height: dataHeight,\n unitsMatch: Boolean(unitsMatch(dataWidth, dataHeight)),\n };\n }, [data]);\n\n /\n * Gets normalized values for width, height, src, alt, and aspectRatio props\n * supporting the presence of `data` in addition to flat props.\n /\n const normalizedProps = React.useMemo(() => {\n const nWidthProp: string \| number = width \|\| '100%';\n const widthParts = getUnitValueParts(nWidthProp.toString());\n const nWidth = `${widthParts.number}${widthParts.unit}`;\n\n const autoHeight = height === undefined \|\| height === null;\n const heightParts = autoHeight\n ? null\n : getUnitValueParts(height.toString());\n\n const fixedHeight = heightParts\n ? `${heightParts.number}${heightParts.unit}`\n : '';\n\n const nHeight = autoHeight ? 'auto' : fixedHeight;\n\n const nSrc: string \| undefined = src \|\| data?.url;\n\n if (__HYDROGEN_DEV__ && !nSrc) {\n console.warn(\n `No src or data.url provided to Image component.`,\n passthroughProps?.key \|\| '',\n );\n }\n\n const nAlt: string = data?.altText && !alt ? data?.altText : alt \|\| '';\n\n const nAspectRatio: string \| undefined = aspectRatio\n ? aspectRatio\n : normalizedData.unitsMatch\n ? [\n getNormalizedFixedUnit(normalizedData.width),\n getNormalizedFixedUnit(normalizedData.height),\n ].join('/')\n : undefined;\n\n return {\n width: nWidth,\n height: nHeight,\n src: nSrc,\n alt: nAlt,\n aspectRatio: nAspectRatio,\n };\n }, [\n width,\n height,\n src,\n data,\n alt,\n aspectRatio,\n normalizedData,\n passthroughProps?.key,\n ]);\n\n const {intervals, startingWidth, incrementSize, placeholderWidth} =\n srcSetOptions;\n\n /\n * This function creates an array of widths to be used in srcSet\n /\n const imageWidths = React.useMemo(() => {\n return generateImageWidths(\n width,\n intervals,\n startingWidth,\n incrementSize,\n );\n }, [width, intervals, startingWidth, incrementSize]);\n\n const fixedWidth = isFixedWidth(normalizedProps.width);\n\n if (__HYDROGEN_DEV__ && !sizes && !fixedWidth) {\n console.warn(\n [\n 'No sizes prop provided to Image component,',\n 'you may be loading unnecessarily large images.',\n `Image used is ${\n src \|\| data?.url \|\| passthroughProps?.key \|\| 'unknown'\n }`,\n ].join(' '),\n );\n }\n\n /\n * We check to see whether the image is fixed width or not,\n * if fixed, we still provide a srcSet, but only to account for\n * different pixel densities.\n /\n if (fixedWidth) {\n return (\n <FixedWidthImage\n aspectRatio={aspectRatio}\n crop={crop}\n decoding={decoding}\n height={height}\n imageWidths={imageWidths}\n loader={loader}\n loading={loading}\n normalizedProps={normalizedProps}\n passthroughProps={passthroughProps}\n ref={ref}\n width={width}\n />\n );\n } else {\n return (\n <FluidImage\n aspectRatio={aspectRatio}\n crop={crop}\n decoding={decoding}\n imageWidths={imageWidths}\n loader={loader}\n loading={loading}\n normalizedProps={normalizedProps}\n passthroughProps={passthroughProps}\n placeholderWidth={placeholderWidth}\n ref={ref}\n sizes={sizes}\n />\n );\n }\n },\n);\n\ntype FixedImageExludedProps =\n \| 'data'\n \| 'loader'\n \| 'loaderOptions'\n \| 'sizes'\n \| 'srcSetOptions'\n \| 'widths';\n\ntype FixedWidthImageProps = Omit<HydrogenImageProps, FixedImageExludedProps> & {\n loader: Loader;\n passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n normalizedProps: NormalizedProps;\n imageWidths: number[];\n ref: React.Ref<HTMLImageElement>;\n};\n\nfunction FixedWidthImage({\n aspectRatio,\n crop,\n decoding,\n height,\n imageWidths,\n loader = shopifyLoader,\n loading,\n normalizedProps,\n passthroughProps,\n ref,\n width,\n}: FixedWidthImageProps) {\n const fixed = React.useMemo(() => {\n const intWidth: number \| undefined = getNormalizedFixedUnit(width);\n const intHeight: number \| undefined = getNormalizedFixedUnit(height);\n\n /\n * The aspect ratio for fixed width images is taken from the explicitly\n * set prop, but if that's not present, and both width and height are\n * set, we calculate the aspect ratio from the width and height—as\n * long as they share the same unit type (e.g. both are 'px').\n /\n const fixedAspectRatio = aspectRatio\n ? aspectRatio\n : unitsMatch(normalizedProps.width, normalizedProps.height)\n ? [intWidth, intHeight].join('/')\n : normalizedProps.aspectRatio\n ? normalizedProps.aspectRatio\n : undefined;\n\n /\n * The Sizes Array generates an array of all of the parts\n * that make up the srcSet, including the width, height, and crop\n /\n const sizesArray =\n imageWidths === undefined\n ? undefined\n : generateSizes(imageWidths, fixedAspectRatio, crop);\n\n const fixedHeight = intHeight\n ? intHeight\n : fixedAspectRatio && intWidth\n ? intWidth (parseAspectRatio(fixedAspectRatio) ?? 1)\n : undefined;\n\n const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);\n const src = loader({\n src: normalizedProps.src,\n width: intWidth,\n height: fixedHeight,\n crop: normalizedProps.height === 'auto' ? undefined : crop,\n });\n\n return {\n width: intWidth,\n aspectRatio: fixedAspectRatio,\n height: fixedHeight,\n srcSet,\n src,\n };\n }, [aspectRatio, crop, height, imageWidths, loader, normalizedProps, width]);\n\n return (\n <img\n ref={ref}\n alt={normalizedProps.alt}\n decoding={decoding}\n height={fixed.height}\n loading={loading}\n src={fixed.src}\n srcSet={fixed.srcSet}\n width={fixed.width}\n style={{\n aspectRatio: fixed.aspectRatio,\n ...passthroughProps.style,\n }}\n {...passthroughProps}\n />\n );\n}\n\ntype FluidImageExcludedProps =\n \| 'data'\n \| 'width'\n \| 'height'\n \| 'loader'\n \| 'loaderOptions'\n \| 'srcSetOptions';\n\ntype FluidImageProps = Omit<HydrogenImageProps, FluidImageExcludedProps> & {\n imageWidths: number[];\n loader: Loader;\n normalizedProps: NormalizedProps;\n passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n placeholderWidth: number;\n ref: React.Ref<HTMLImageElement>;\n};\n\nfunction FluidImage({\n crop,\n decoding,\n imageWidths,\n loader = shopifyLoader,\n loading,\n normalizedProps,\n passthroughProps,\n placeholderWidth,\n ref,\n sizes,\n}: FluidImageProps) {\n const fluid = React.useMemo(() => {\n const sizesArray =\n imageWidths === undefined\n ? undefined\n : generateSizes(imageWidths, normalizedProps.aspectRatio, crop);\n\n const placeholderHeight =\n normalizedProps.aspectRatio && placeholderWidth\n ? placeholderWidth \n (parseAspectRatio(normalizedProps.aspectRatio) ?? 1)\n : undefined;\n\n const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);\n\n const src = loader({\n src: normalizedProps.src,\n width: placeholderWidth,\n height: placeholderHeight,\n crop,\n });\n\n return {\n placeholderHeight,\n srcSet,\n src,\n };\n }, [crop, imageWidths, loader, normalizedProps, placeholderWidth]);\n\n return (\n <img\n ref={ref}\n alt={normalizedProps.alt}\n decoding={decoding}\n height={fluid.placeholderHeight}\n loading={loading}\n sizes={sizes}\n src={fluid.src}\n srcSet={fluid.srcSet}\n width={placeholderWidth}\n {...passthroughProps}\n style={{\n width: normalizedProps.width,\n aspectRatio: normalizedProps.aspectRatio,\n ...passthroughProps.style,\n }}\n />\n );\n}\n\n/\n The shopifyLoader function is a simple utility function that takes a src, width,\n * height, and crop and returns a string that can be used as the src for an image.\n * It can be used with the Hydrogen Image component or with the next/image component.\n * (or any others that accept equivalent configuration)\n * @param src - The source URL of the image, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg`\n * @param width - The width of the image, e.g. `100`\n * @param height - The height of the image, e.g. `100`\n * @param crop - The crop of the image, e.g. `center`\n * @returns A Shopify image URL with the correct query parameters, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=100&height=100&crop=center`\n \n @example\n * ```\n * shopifyLoader({\n * src: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',\n * width: 100,\n * height: 100,\n * crop: 'center',\n * })\n * ```\n /\nexport function shopifyLoader({src, width, height, crop}: LoaderParams) {\n if (!src) {\n return '';\n }\n\n const url = new URL(src);\n\n if (width) {\n url.searchParams.append('width', Math.round(width).toString());\n }\n\n if (height) {\n url.searchParams.append('height', Math.round(height).toString());\n }\n\n if (crop) {\n url.searchParams.append('crop', crop);\n }\n return url.href;\n}\n\n/\n Checks whether the width and height share the same unit type\n * @param width - The width of the image, e.g. 100% \| 10px\n * @param height - The height of the image, e.g. auto \| 100px\n * @returns Whether the width and height share the same unit type (boolean)\n /\nfunction unitsMatch(\n width: string \| number = '100%',\n height: string \| number = 'auto',\n): boolean {\n return (\n getUnitValueParts(width.toString()).unit ===\n getUnitValueParts(height.toString()).unit\n );\n}\n\n/\n Given a CSS size, returns the unit and number parts of the value\n * @param value - The CSS size, e.g. 100px\n * @returns The unit and number parts of the value, e.g. \\{unit: 'px', number: 100\\}\n /\nfunction getUnitValueParts(value: string): {unit: string; number: number} {\n const unit = value.replace(/[0-9.]/g, '');\n const number = parseFloat(value.replace(unit, ''));\n\n return {\n unit: unit === '' ? (number === undefined ? 'auto' : 'px') : unit,\n number,\n };\n}\n\n/\n Given a value, returns the width of the image as an integer in pixels\n * @param value - The width of the image, e.g. 16px \| 1rem \| 1em \| 16\n * @returns The width of the image in pixels, e.g. 16, or undefined if the value is not a fixed unit\n /\nfunction getNormalizedFixedUnit(value?: string \| number): number \| undefined {\n if (value === undefined) {\n return;\n }\n\n const {unit, number} = getUnitValueParts(value.toString());\n\n switch (unit) {\n case 'em':\n return number 16;\n case 'rem':\n return number * 16;\n case 'px':\n return number;\n case '':\n return number;\n default:\n return;\n }\n}\n\n/*\n This function checks whether a width is fixed or not.\n * @param width - The width of the image, e.g. 100 \| '100px' \| '100em' \| '100rem'\n * @returns Whether the width is fixed or not\n /\nfunction isFixedWidth(width: string \| number): boolean {\n const fixedEndings = /\\d(px\|em\|rem)$/;\n return (\n typeof width === 'number' \|\|\n (typeof width === 'string' && fixedEndings.test(width))\n );\n}\n\n/\n This function generates a srcSet for Shopify images.\n * @param src - The source URL of the image, e.g. https://cdn.shopify.com/static/sample-images/garnished.jpeg\n * @param sizesArray - An array of objects containing the `width`, `height`, and `crop` of the image, e.g. [\\{width: 200, height: 200, crop: 'center'\\}, \\{width: 400, height: 400, crop: 'center'\\}]\n * @param loader - A function that takes a Shopify image URL and returns a Shopify image URL with the correct query parameters\n * @returns A srcSet for Shopify images, e.g. 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=200&height=200&crop=center 200w, https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=400&height=400&crop=center 400w'\n /\nexport function generateSrcSet(\n src?: string,\n sizesArray?: Array<{width?: number; height?: number; crop?: Crop}>,\n loader: Loader = shopifyLoader,\n): string {\n if (!src) {\n return '';\n }\n\n if (sizesArray?.length === 0 \|\| !sizesArray) {\n return src;\n }\n\n return sizesArray\n .map(\n (size, i) =>\n `${loader({\n src,\n width: size.width,\n height: size.height,\n crop: size.crop,\n })} ${sizesArray.length === 3 ? `${i + 1}x` : `${size.width ?? 0}w`}`,\n )\n .join(`, `);\n}\n\n/\n This function generates an array of sizes for Shopify images, for both fixed and responsive images.\n * @param width - The CSS width of the image\n * @param intervals - The number of intervals to generate\n * @param startingWidth - The starting width of the image\n * @param incrementSize - The size of each interval\n * @returns An array of widths\n /\nexport function generateImageWidths(\n width: string \| number = '100%',\n intervals: number,\n startingWidth: number,\n incrementSize: number,\n): number[] {\n const responsive = Array.from(\n {length: intervals},\n (_, i) => i incrementSize + startingWidth,\n );\n\n const fixed = Array.from(\n {length: 3},\n (_, i) => (i + 1) * (getNormalizedFixedUnit(width) ?? 0),\n );\n\n return isFixedWidth(width) ? fixed : responsive;\n}\n\n/*\n Simple utility function to convert an aspect ratio CSS string to a decimal, currently only supports values like `1/1`, not `0.5`, or `auto`\n * @param aspectRatio - The aspect ratio of the image, e.g. `1/1`\n * @returns The aspect ratio as a number, e.g. `0.5`\n \n {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio}\n /\nexport function parseAspectRatio(aspectRatio?: string): number \| undefined {\n if (!aspectRatio) return;\n const [width, height] = aspectRatio.split('/');\n return 1 / (Number(width) / Number(height));\n}\n\n// Generate data needed for Imagery loader\nexport function generateSizes(\n imageWidths?: number[],\n aspectRatio?: string,\n crop: Crop = 'center',\n):\n \| {\n width: number;\n height: number \| undefined;\n crop: Crop;\n }[]\n \| undefined {\n if (!imageWidths) return;\n const sizes = imageWidths.map((width: number) => {\n return {\n width,\n height: aspectRatio\n ? width (parseAspectRatio(aspectRatio) ?? 1)\n : undefined,\n crop,\n };\n });\n return sizes;\n /\n Given:\n ([100, 200], 1/1, 'center')\n Returns:\n [{width: 100, height: 100, crop: 'center'},\n {width: 200, height: 200, crop: 'center'}]\n /\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"Image.mjs","sources":["../../src/Image.tsx"],"sourcesContent":["/* eslint-disable eslint-comments/disable-enable-pair /\n/ eslint-disable @typescript-eslint/explicit-function-return-type /\n/ eslint-disable hydrogen/prefer-image-component /\nimport as React from 'react';\nimport type {PartialDeep} from 'type-fest';\nimport type {Image as ImageType} from './storefront-api-types.js';\n\n/\n An optional prop you can use to change the\n * default srcSet generation behaviour\n /\ntype SrcSetOptions = {\n /* The number of sizes to generate /\n intervals: number;\n /* The smallest image size /\n startingWidth: number;\n /* The increment by which to increase for each size, in pixels /\n incrementSize: number;\n /* The size used for placeholder fallback images /\n placeholderWidth: number;\n};\n\ntype HtmlImageProps = React.DetailedHTMLProps<\n React.ImgHTMLAttributes<HTMLImageElement>,\n HTMLImageElement\n>;\n\ntype NormalizedProps = {\n alt: string;\n aspectRatio: string \| undefined;\n height: string;\n src: string \| undefined;\n width: string;\n};\n\nexport type LoaderParams = {\n /* The base URL of the image /\n src?: ImageType['url'];\n /* The URL param that controls width /\n width?: number;\n /* The URL param that controls height /\n height?: number;\n /* The URL param that controls the cropping region /\n crop?: Crop;\n};\n\nexport type Loader = (params: LoaderParams) => string;\n\n/* Legacy type for backwards compatibility \n @deprecated Use `crop`, `width`, `height`, and `src` props, and/or `data` prop. Or pass a custom `loader` with `LoaderParams` /\nexport type ShopifyLoaderOptions = {\n /* The base URL of the image /\n src?: ImageType['url'];\n /* The URL param that controls width /\n width?: HtmlImageProps['width'] \| ImageType['width'];\n /* The URL param that controls height /\n height?: HtmlImageProps['height'] \| ImageType['height'];\n /* The URL param that controls the cropping region /\n crop?: Crop;\n};\n\n/\n * @TODO: Expand to include focal point support; and/or switch this to be an SF API type\n /\ntype Crop = 'center' \| 'top' \| 'bottom' \| 'left' \| 'right';\n\nexport type HydrogenImageProps = React.ComponentPropsWithRef<'img'> &\n HydrogenImageBaseProps;\n\ntype HydrogenImageBaseProps = {\n /* The aspect ratio of the image, in the format of `width/height`.\n \n @example\n * ```\n * <Image data={productImage} aspectRatio=\"4/5\" />\n * ```\n /\n aspectRatio?: string;\n /* The crop position of the image.\n \n @remarks\n * In the event that AspectRatio is set, without specifying a crop,\n * the Shopify CDN won't return the expected image.\n \n @defaultValue `center`\n /\n crop?: Crop;\n /* Data mapping to the [Storefront API `Image`](https://shopify.dev/docs/api/storefront/2023-07/objects/Image) object. Must be an Image object.\n \n @example\n * ```\n * import {IMAGE_FRAGMENT, Image} from '@shopify/hydrogen';\n \n export const IMAGE_QUERY = `#graphql\n * ${IMAGE_FRAGMENT}\n * query {\n * product {\n * featuredImage {\n * ...Image\n * }\n * }\n * }`\n \n <Image\n * data={productImage}\n * sizes=\"(min-width: 45em) 50vw, 100vw\"\n * aspectRatio=\"4/5\"\n * />\n * ```\n \n Image: {@link https://shopify.dev/api/storefront/reference/common-objects/image}\n /\n data?: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n /* A function that returns a URL string for an image.\n \n @remarks\n * By default, this uses Shopify’s CDN {@link https://cdn.shopify.com/} but you can provide\n * your own function to use a another provider, as long as they support URL based image transformations.\n /\n loader?: Loader;\n /* An optional prop you can use to change the default srcSet generation behaviour /\n srcSetOptions?: SrcSetOptions;\n /* @deprecated Use `crop`, `width`, `height`, and `src` props, and/or `data` prop /\n loaderOptions?: ShopifyLoaderOptions;\n /* @deprecated Autocalculated, use only `width` prop, or srcSetOptions /\n widths?: (HtmlImageProps['width'] \| ImageType['width'])[];\n};\n\n/\n A Storefront API GraphQL fragment that can be used to query for an image.\n /\nexport const IMAGE_FRAGMENT = `#graphql\n fragment Image on Image {\n altText\n url\n width\n height\n }\n`;\n\n/\n Hydrgen’s Image component is a wrapper around the HTML image element.\n * It supports the same props as the HTML `img` element, but automatically\n * generates the srcSet and sizes attributes for you. For most use cases,\n * you’ll want to set the `aspectRatio` prop to ensure the image is sized\n * correctly.\n \n @remarks\n * - `decoding` is set to `async` by default.\n * - `loading` is set to `lazy` by default.\n * - `alt` will automatically be set to the `altText` from the Storefront API if passed in the `data` prop\n * - `src` will automatically be set to the `url` from the Storefront API if passed in the `data` prop\n \n @example\n * A responsive image with a 4:5 aspect ratio:\n * ```\n * <Image\n * data={product.featuredImage}\n * aspectRatio=\"4/5\"\n * sizes=\"(min-width: 45em) 40vw, 100vw\"\n * />\n * ```\n * @example\n * A fixed size image:\n * ```\n * <Image\n * data={product.featuredImage}\n * width={100}\n * height={100}\n * />\n * ```\n \n {@link https://shopify.dev/docs/api/hydrogen-react/components/image}\n /\nexport const Image = React.forwardRef<HTMLImageElement, HydrogenImageProps>(\n (\n {\n alt,\n aspectRatio,\n crop = 'center',\n data,\n decoding = 'async',\n height = 'auto',\n loader = shopifyLoader,\n loaderOptions,\n loading = 'lazy',\n sizes,\n src,\n srcSetOptions = {\n intervals: 15,\n startingWidth: 200,\n incrementSize: 200,\n placeholderWidth: 100,\n },\n width = '100%',\n widths,\n ...passthroughProps\n },\n ref,\n ) => {\n /\n * Deprecated Props from original Image component\n /\n if (__HYDROGEN_DEV__) {\n if (loaderOptions) {\n console.warn(\n [\n `Deprecated property from original Image component in use:`,\n `Use the \\`crop\\`, \\`width\\`, \\`height\\`, and src props, or`,\n `the \\`data\\` prop to achieve the same result. Image used is ${\n src \|\| data?.url \|\| passthroughProps?.key \|\| 'unknown'\n }`,\n ].join(' '),\n );\n }\n\n if (widths) {\n console.warn(\n [\n `Deprecated property from original Image component in use:`,\n `\\`widths\\` are now calculated automatically based on the`,\n `config and width props. Image used is ${\n src \|\| data?.url \|\| passthroughProps?.key \|\| 'unknown'\n }`,\n ].join(' '),\n );\n }\n }\n\n /\n * Gets normalized values for width, height from data prop\n /\n const normalizedData = React.useMemo(() => {\n / Only use data width if height is also set /\n const dataWidth: number \| undefined =\n data?.width && data?.height ? data?.width : undefined;\n\n const dataHeight: number \| undefined =\n data?.width && data?.height ? data?.height : undefined;\n\n return {\n width: dataWidth,\n height: dataHeight,\n unitsMatch: Boolean(unitsMatch(dataWidth, dataHeight)),\n };\n }, [data]);\n\n /\n * Gets normalized values for width, height, src, alt, and aspectRatio props\n * supporting the presence of `data` in addition to flat props.\n /\n const normalizedProps = React.useMemo(() => {\n const nWidthProp: string \| number = width \|\| '100%';\n const widthParts = getUnitValueParts(nWidthProp.toString());\n const nWidth = `${widthParts.number}${widthParts.unit}`;\n\n const autoHeight = height === undefined \|\| height === null;\n const heightParts = autoHeight\n ? null\n : getUnitValueParts(height.toString());\n\n const fixedHeight = heightParts\n ? `${heightParts.number}${heightParts.unit}`\n : '';\n\n const nHeight = autoHeight ? 'auto' : fixedHeight;\n\n const nSrc: string \| undefined = src \|\| data?.url;\n\n if (__HYDROGEN_DEV__ && !nSrc) {\n console.warn(\n `No src or data.url provided to Image component.`,\n passthroughProps?.key \|\| '',\n );\n }\n\n const nAlt: string = data?.altText && !alt ? data?.altText : alt \|\| '';\n\n const nAspectRatio: string \| undefined = aspectRatio\n ? aspectRatio\n : normalizedData.unitsMatch\n ? [\n getNormalizedFixedUnit(normalizedData.width),\n getNormalizedFixedUnit(normalizedData.height),\n ].join('/')\n : undefined;\n\n return {\n width: nWidth,\n height: nHeight,\n src: nSrc,\n alt: nAlt,\n aspectRatio: nAspectRatio,\n };\n }, [\n width,\n height,\n src,\n data,\n alt,\n aspectRatio,\n normalizedData,\n passthroughProps?.key,\n ]);\n\n const {intervals, startingWidth, incrementSize, placeholderWidth} =\n srcSetOptions;\n\n /\n * This function creates an array of widths to be used in srcSet\n /\n const imageWidths = React.useMemo(() => {\n return generateImageWidths(\n width,\n intervals,\n startingWidth,\n incrementSize,\n );\n }, [width, intervals, startingWidth, incrementSize]);\n\n const fixedWidth = isFixedWidth(normalizedProps.width);\n\n if (__HYDROGEN_DEV__ && !sizes && !fixedWidth) {\n console.warn(\n [\n 'No sizes prop provided to Image component,',\n 'you may be loading unnecessarily large images.',\n `Image used is ${\n src \|\| data?.url \|\| passthroughProps?.key \|\| 'unknown'\n }`,\n ].join(' '),\n );\n }\n\n /\n * We check to see whether the image is fixed width or not,\n * if fixed, we still provide a srcSet, but only to account for\n * different pixel densities.\n /\n if (fixedWidth) {\n return (\n <FixedWidthImage\n aspectRatio={aspectRatio}\n crop={crop}\n decoding={decoding}\n height={height}\n imageWidths={imageWidths}\n loader={loader}\n loading={loading}\n normalizedProps={normalizedProps}\n passthroughProps={passthroughProps}\n ref={ref}\n width={width}\n />\n );\n } else {\n return (\n <FluidImage\n aspectRatio={aspectRatio}\n crop={crop}\n decoding={decoding}\n imageWidths={imageWidths}\n loader={loader}\n loading={loading}\n normalizedProps={normalizedProps}\n passthroughProps={passthroughProps}\n placeholderWidth={placeholderWidth}\n ref={ref}\n sizes={sizes}\n />\n );\n }\n },\n);\n\ntype FixedImageExludedProps =\n \| 'data'\n \| 'loader'\n \| 'loaderOptions'\n \| 'sizes'\n \| 'srcSetOptions'\n \| 'widths';\n\ntype FixedWidthImageProps = Omit<HydrogenImageProps, FixedImageExludedProps> & {\n loader: Loader;\n passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n normalizedProps: NormalizedProps;\n imageWidths: number[];\n ref: React.Ref<HTMLImageElement>;\n};\n\nfunction FixedWidthImage({\n aspectRatio,\n crop,\n decoding,\n height,\n imageWidths,\n loader = shopifyLoader,\n loading,\n normalizedProps,\n passthroughProps,\n ref,\n width,\n}: FixedWidthImageProps) {\n const fixed = React.useMemo(() => {\n const intWidth: number \| undefined = getNormalizedFixedUnit(width);\n const intHeight: number \| undefined = getNormalizedFixedUnit(height);\n\n /\n * The aspect ratio for fixed width images is taken from the explicitly\n * set prop, but if that's not present, and both width and height are\n * set, we calculate the aspect ratio from the width and height—as\n * long as they share the same unit type (e.g. both are 'px').\n /\n const fixedAspectRatio = aspectRatio\n ? aspectRatio\n : unitsMatch(normalizedProps.width, normalizedProps.height)\n ? [intWidth, intHeight].join('/')\n : normalizedProps.aspectRatio\n ? normalizedProps.aspectRatio\n : undefined;\n\n /\n * The Sizes Array generates an array of all of the parts\n * that make up the srcSet, including the width, height, and crop\n /\n const sizesArray =\n imageWidths === undefined\n ? undefined\n : generateSizes(imageWidths, fixedAspectRatio, crop);\n\n const fixedHeight = intHeight\n ? intHeight\n : fixedAspectRatio && intWidth\n ? intWidth (parseAspectRatio(fixedAspectRatio) ?? 1)\n : undefined;\n\n const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);\n const src = loader({\n src: normalizedProps.src,\n width: intWidth,\n height: fixedHeight,\n crop: normalizedProps.height === 'auto' ? undefined : crop,\n });\n\n return {\n width: intWidth,\n aspectRatio: fixedAspectRatio,\n height: fixedHeight,\n srcSet,\n src,\n };\n }, [aspectRatio, crop, height, imageWidths, loader, normalizedProps, width]);\n\n return (\n <img\n ref={ref}\n alt={normalizedProps.alt}\n decoding={decoding}\n height={fixed.height}\n loading={loading}\n src={fixed.src}\n srcSet={fixed.srcSet}\n width={fixed.width}\n style={{\n aspectRatio: fixed.aspectRatio,\n ...passthroughProps.style,\n }}\n {...passthroughProps}\n />\n );\n}\n\ntype FluidImageExcludedProps =\n \| 'data'\n \| 'width'\n \| 'height'\n \| 'loader'\n \| 'loaderOptions'\n \| 'srcSetOptions';\n\ntype FluidImageProps = Omit<HydrogenImageProps, FluidImageExcludedProps> & {\n imageWidths: number[];\n loader: Loader;\n normalizedProps: NormalizedProps;\n passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n placeholderWidth: number;\n ref: React.Ref<HTMLImageElement>;\n};\n\nfunction FluidImage({\n crop,\n decoding,\n imageWidths,\n loader = shopifyLoader,\n loading,\n normalizedProps,\n passthroughProps,\n placeholderWidth,\n ref,\n sizes,\n}: FluidImageProps) {\n const fluid = React.useMemo(() => {\n const sizesArray =\n imageWidths === undefined\n ? undefined\n : generateSizes(imageWidths, normalizedProps.aspectRatio, crop);\n\n const placeholderHeight =\n normalizedProps.aspectRatio && placeholderWidth\n ? placeholderWidth \n (parseAspectRatio(normalizedProps.aspectRatio) ?? 1)\n : undefined;\n\n const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);\n\n const src = loader({\n src: normalizedProps.src,\n width: placeholderWidth,\n height: placeholderHeight,\n crop,\n });\n\n return {\n placeholderHeight,\n srcSet,\n src,\n };\n }, [crop, imageWidths, loader, normalizedProps, placeholderWidth]);\n\n return (\n <img\n ref={ref}\n alt={normalizedProps.alt}\n decoding={decoding}\n height={fluid.placeholderHeight}\n loading={loading}\n sizes={sizes}\n src={fluid.src}\n srcSet={fluid.srcSet}\n width={placeholderWidth}\n {...passthroughProps}\n style={{\n width: normalizedProps.width,\n aspectRatio: normalizedProps.aspectRatio,\n ...passthroughProps.style,\n }}\n />\n );\n}\n\n/\n The shopifyLoader function is a simple utility function that takes a src, width,\n * height, and crop and returns a string that can be used as the src for an image.\n * It can be used with the Hydrogen Image component or with the next/image component.\n * (or any others that accept equivalent configuration)\n * @param src - The source URL of the image, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg`\n * @param width - The width of the image, e.g. `100`\n * @param height - The height of the image, e.g. `100`\n * @param crop - The crop of the image, e.g. `center`\n * @returns A Shopify image URL with the correct query parameters, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=100&height=100&crop=center`\n \n @example\n * ```\n * shopifyLoader({\n * src: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',\n * width: 100,\n * height: 100,\n * crop: 'center',\n * })\n * ```\n /\nexport function shopifyLoader({src, width, height, crop}: LoaderParams) {\n if (!src) {\n return '';\n }\n\n const url = new URL(src);\n\n if (width) {\n url.searchParams.append('width', Math.round(width).toString());\n }\n\n if (height) {\n url.searchParams.append('height', Math.round(height).toString());\n }\n\n if (crop) {\n url.searchParams.append('crop', crop);\n }\n return url.href;\n}\n\n/\n Checks whether the width and height share the same unit type\n * @param width - The width of the image, e.g. 100% \| 10px\n * @param height - The height of the image, e.g. auto \| 100px\n * @returns Whether the width and height share the same unit type (boolean)\n /\nfunction unitsMatch(\n width: string \| number = '100%',\n height: string \| number = 'auto',\n): boolean {\n return (\n getUnitValueParts(width.toString()).unit ===\n getUnitValueParts(height.toString()).unit\n );\n}\n\n/\n Given a CSS size, returns the unit and number parts of the value\n * @param value - The CSS size, e.g. 100px\n * @returns The unit and number parts of the value, e.g. \\{unit: 'px', number: 100\\}\n /\nfunction getUnitValueParts(value: string): {unit: string; number: number} {\n const unit = value.replace(/[0-9.]/g, '');\n const number = parseFloat(value.replace(unit, ''));\n\n return {\n unit: unit === '' ? (number === undefined ? 'auto' : 'px') : unit,\n number,\n };\n}\n\n/\n Given a value, returns the width of the image as an integer in pixels\n * @param value - The width of the image, e.g. 16px \| 1rem \| 1em \| 16\n * @returns The width of the image in pixels, e.g. 16, or undefined if the value is not a fixed unit\n /\nfunction getNormalizedFixedUnit(value?: string \| number): number \| undefined {\n if (value === undefined) {\n return;\n }\n\n const {unit, number} = getUnitValueParts(value.toString());\n\n switch (unit) {\n case 'em':\n return number 16;\n case 'rem':\n return number * 16;\n case 'px':\n return number;\n case '':\n return number;\n default:\n return;\n }\n}\n\n/*\n This function checks whether a width is fixed or not.\n * @param width - The width of the image, e.g. 100 \| '100px' \| '100em' \| '100rem'\n * @returns Whether the width is fixed or not\n /\nfunction isFixedWidth(width: string \| number): boolean {\n const fixedEndings = /\\d(px\|em\|rem)$/;\n return (\n typeof width === 'number' \|\|\n (typeof width === 'string' && fixedEndings.test(width))\n );\n}\n\n/\n This function generates a srcSet for Shopify images.\n * @param src - The source URL of the image, e.g. https://cdn.shopify.com/static/sample-images/garnished.jpeg\n * @param sizesArray - An array of objects containing the `width`, `height`, and `crop` of the image, e.g. [\\{width: 200, height: 200, crop: 'center'\\}, \\{width: 400, height: 400, crop: 'center'\\}]\n * @param loader - A function that takes a Shopify image URL and returns a Shopify image URL with the correct query parameters\n * @returns A srcSet for Shopify images, e.g. 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=200&height=200&crop=center 200w, https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=400&height=400&crop=center 400w'\n /\nexport function generateSrcSet(\n src?: string,\n sizesArray?: Array<{width?: number; height?: number; crop?: Crop}>,\n loader: Loader = shopifyLoader,\n): string {\n if (!src) {\n return '';\n }\n\n if (sizesArray?.length === 0 \|\| !sizesArray) {\n return src;\n }\n\n return sizesArray\n .map(\n (size, i) =>\n `${loader({\n src,\n width: size.width,\n height: size.height,\n crop: size.crop,\n })} ${sizesArray.length === 3 ? `${i + 1}x` : `${size.width ?? 0}w`}`,\n )\n .join(`, `);\n}\n\n/\n This function generates an array of sizes for Shopify images, for both fixed and responsive images.\n * @param width - The CSS width of the image\n * @param intervals - The number of intervals to generate\n * @param startingWidth - The starting width of the image\n * @param incrementSize - The size of each interval\n * @returns An array of widths\n /\nexport function generateImageWidths(\n width: string \| number = '100%',\n intervals: number,\n startingWidth: number,\n incrementSize: number,\n): number[] {\n const responsive = Array.from(\n {length: intervals},\n (_, i) => i incrementSize + startingWidth,\n );\n\n const fixed = Array.from(\n {length: 3},\n (_, i) => (i + 1) * (getNormalizedFixedUnit(width) ?? 0),\n );\n\n return isFixedWidth(width) ? fixed : responsive;\n}\n\n/*\n Simple utility function to convert an aspect ratio CSS string to a decimal, currently only supports values like `1/1`, not `0.5`, or `auto`\n * @param aspectRatio - The aspect ratio of the image, e.g. `1/1`\n * @returns The aspect ratio as a number, e.g. `0.5`\n \n {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio}\n /\nexport function parseAspectRatio(aspectRatio?: string): number \| undefined {\n if (!aspectRatio) return;\n const [width, height] = aspectRatio.split('/');\n return 1 / (Number(width) / Number(height));\n}\n\n// Generate data needed for Imagery loader\nexport function generateSizes(\n imageWidths?: number[],\n aspectRatio?: string,\n crop: Crop = 'center',\n):\n \| {\n width: number;\n height: number \| undefined;\n crop: Crop;\n }[]\n \| undefined {\n if (!imageWidths) return;\n const sizes = imageWidths.map((width: number) => {\n return {\n width,\n height: aspectRatio\n ? width (parseAspectRatio(aspectRatio) ?? 1)\n : undefined,\n crop,\n };\n });\n return sizes;\n /\n Given:\n ([100, 200], 1/1, 'center')\n Returns:\n [{width: 100, height: 100, crop: 'center'},\n {width: 200, height: 200, crop: 'center'}]\n /\n}\n"],"names":[],"mappings":"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"}

package/dist/node-dev/ModelViewer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModelViewer.js","sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'model-viewer': PartialDeep<\n ModelViewerElement,\n {recurseIntoArrays: true}\n >;\n }\n }\n}\n\ntype ModelViewerProps = Omit<\n PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n 'src'\n> &\n ModelViewerBaseProps;\n\ntype ModelViewerBaseProps = {\n /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/2023-04/objects/model3d). /\n data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n /* The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). /\n onError?: (event: Event) => void;\n /* The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). /\n onLoad?: (event: Event) => void;\n /* The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). /\n onPreload?: (event: Event) => void;\n /* The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). /\n onModelVisibility?: (event: Event) => void;\n /* The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). /\n onProgress?: (event: Event) => void;\n /* The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). /\n onArStatus?: (event: Event) => void;\n /* The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). /\n onArTracking?: (event: Event) => void;\n /* The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). /\n onQuickLookButtonTapped?: (event: Event) => void;\n /* The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). /\n onCameraChange?: (event: Event) => void;\n /* The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange). /\n onEnvironmentChange?: (event: Event) => void;\n /* The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). /\n onPlay?: (event: Event) => void;\n /* The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). /\n onPause?: (event: Event) => void;\n /* The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). /\n onSceneGraphReady?: (event: Event) => void;\n};\n\n/\n The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n \n The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n \n ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n */\nexport function ModelViewer(props: ModelViewerProps): JSX.Element \| null {\n const [modelViewer, setModelViewer] = useState<undefined \| HTMLElement>(\n undefined,\n );\n const callbackRef = useCallback((node: HTMLElement) => {\n setModelViewer(node);\n }, []);\n const {data, children, className, ...passthroughProps} = props;\n\n const modelViewerLoadedStatus = useLoadScript(\n 'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n {\n module: true,\n },\n );\n\n useEffect(() => {\n if (!modelViewer) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.addEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.addEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.addEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.addEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility,\n );\n if (passthroughProps.onProgress)\n modelViewer.addEventListener('progress', passthroughProps.onProgress);\n if (passthroughProps.onArStatus)\n modelViewer.addEventListener('ar-status', passthroughProps.onArStatus);\n if (passthroughProps.onArTracking)\n modelViewer.addEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking,\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.addEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped,\n );\n if (passthroughProps.onCameraChange)\n modelViewer.addEventListener(\n 'camera-change',\n passthroughProps.onCameraChange,\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.addEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange,\n );\n if (passthroughProps.onPlay)\n modelViewer.addEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.addEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.addEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady,\n );\n\n return () => {\n if (modelViewer == null) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.removeEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.removeEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.removeEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.removeEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility,\n );\n if (passthroughProps.onProgress)\n modelViewer.removeEventListener(\n 'progress',\n passthroughProps.onProgress,\n );\n if (passthroughProps.onArStatus)\n modelViewer.removeEventListener(\n 'ar-status',\n passthroughProps.onArStatus,\n );\n if (passthroughProps.onArTracking)\n modelViewer.removeEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking,\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.removeEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped,\n );\n if (passthroughProps.onCameraChange)\n modelViewer.removeEventListener(\n 'camera-change',\n passthroughProps.onCameraChange,\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.removeEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange,\n );\n if (passthroughProps.onPlay)\n modelViewer.removeEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.removeEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.removeEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady,\n );\n };\n }, [\n modelViewer,\n passthroughProps.onArStatus,\n passthroughProps.onArTracking,\n passthroughProps.onCameraChange,\n passthroughProps.onEnvironmentChange,\n passthroughProps.onError,\n passthroughProps.onLoad,\n passthroughProps.onModelVisibility,\n passthroughProps.onPause,\n passthroughProps.onPlay,\n passthroughProps.onPreload,\n passthroughProps.onProgress,\n passthroughProps.onQuickLookButtonTapped,\n passthroughProps.onSceneGraphReady,\n ]);\n\n if (modelViewerLoadedStatus !== 'done') {\n // TODO: What do we want to display while the model-viewer library loads?\n return null;\n }\n\n if (!data.sources?.[0]?.url) {\n const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n if (__HYDROGEN_DEV__) {\n throw new Error(sourcesUrlError);\n } else {\n console.error(sourcesUrlError);\n return null;\n }\n }\n\n if (__HYDROGEN_DEV__ && !data.alt) {\n console.warn(\n `<ModelViewer/> requires the 'data.alt' prop for accessibility`,\n );\n }\n\n return (\n <model-viewer\n ref={callbackRef}\n {...passthroughProps}\n // @ts-expect-error src should exist\n // @eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n class={className}\n id={passthroughProps.id ?? data.id}\n src={data.sources[0].url}\n alt={data.alt ?? null}\n camera-controls={passthroughProps.cameraControls ?? true}\n poster={(passthroughProps.poster \|\| data.previewImage?.url) ?? null}\n autoplay={passthroughProps.autoplay ?? true}\n loading={passthroughProps.loading}\n reveal={passthroughProps.reveal}\n ar={passthroughProps.ar}\n ar-modes={passthroughProps.arModes}\n ar-scale={passthroughProps.arScale}\n // @ts-expect-error arPlacement should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arPlacement\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n ar-placement={passthroughProps.arPlacement}\n ios-src={passthroughProps.iosSrc}\n touch-action={passthroughProps.touchAction}\n disable-zoom={passthroughProps.disableZoom}\n orbit-sensitivity={passthroughProps.orbitSensitivity}\n auto-rotate={passthroughProps.autoRotate}\n auto-rotate-delay={passthroughProps.autoRotateDelay}\n // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n rotation-per-second={passthroughProps.rotationPerSecond}\n interaction-policy={passthroughProps.interactionPolicy}\n interaction-prompt={passthroughProps.interactionPrompt}\n interaction-prompt-style={passthroughProps.interactionPromptStyle}\n interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n camera-orbit={passthroughProps.cameraOrbit}\n camera-target={passthroughProps.cameraTarget}\n field-of-view={passthroughProps.fieldOfView}\n max-camera-orbit={passthroughProps.maxCameraOrbit}\n min-camera-orbit={passthroughProps.minCameraOrbit}\n max-field-of-view={passthroughProps.maxFieldOfView}\n min-field-of-view={passthroughProps.minFieldOfView}\n bounds={passthroughProps.bounds}\n interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n skybox-image={passthroughProps.skyboxImage}\n environment-image={passthroughProps.environmentImage}\n exposure={passthroughProps.exposure}\n shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n shadow-softness={passthroughProps.shadowSoftness ?? 0}\n animation-name={passthroughProps.animationName}\n animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n variant-name={passthroughProps.variantName}\n orientation={passthroughProps.orientation}\n scale={passthroughProps.scale}\n >\n {children}\n </model-viewer>\n );\n}\n"],"names":["useState","useCallback","useLoadScript","useEffect","jsx"],"mappings":"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"}
1	+ {"version":3,"file":"ModelViewer.js","sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'model-viewer': PartialDeep<\n ModelViewerElement,\n {recurseIntoArrays: true}\n >;\n }\n }\n}\n\ntype ModelViewerProps = Omit<\n PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n 'src'\n> &\n ModelViewerBaseProps;\n\ntype ModelViewerBaseProps = {\n /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/2023-07/objects/model3d). /\n data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n /* The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). /\n onError?: (event: Event) => void;\n /* The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). /\n onLoad?: (event: Event) => void;\n /* The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). /\n onPreload?: (event: Event) => void;\n /* The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). /\n onModelVisibility?: (event: Event) => void;\n /* The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). /\n onProgress?: (event: Event) => void;\n /* The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). /\n onArStatus?: (event: Event) => void;\n /* The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). /\n onArTracking?: (event: Event) => void;\n /* The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). /\n onQuickLookButtonTapped?: (event: Event) => void;\n /* The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). /\n onCameraChange?: (event: Event) => void;\n /* The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange). /\n onEnvironmentChange?: (event: Event) => void;\n /* The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). /\n onPlay?: (event: Event) => void;\n /* The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). /\n onPause?: (event: Event) => void;\n /* The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). /\n onSceneGraphReady?: (event: Event) => void;\n};\n\n/\n The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n \n The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n \n ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n */\nexport function ModelViewer(props: ModelViewerProps): JSX.Element \| null {\n const [modelViewer, setModelViewer] = useState<undefined \| HTMLElement>(\n undefined,\n );\n const callbackRef = useCallback((node: HTMLElement) => {\n setModelViewer(node);\n }, []);\n const {data, children, className, ...passthroughProps} = props;\n\n const modelViewerLoadedStatus = useLoadScript(\n 'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n {\n module: true,\n },\n );\n\n useEffect(() => {\n if (!modelViewer) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.addEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.addEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.addEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.addEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility,\n );\n if (passthroughProps.onProgress)\n modelViewer.addEventListener('progress', passthroughProps.onProgress);\n if (passthroughProps.onArStatus)\n modelViewer.addEventListener('ar-status', passthroughProps.onArStatus);\n if (passthroughProps.onArTracking)\n modelViewer.addEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking,\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.addEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped,\n );\n if (passthroughProps.onCameraChange)\n modelViewer.addEventListener(\n 'camera-change',\n passthroughProps.onCameraChange,\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.addEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange,\n );\n if (passthroughProps.onPlay)\n modelViewer.addEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.addEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.addEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady,\n );\n\n return () => {\n if (modelViewer == null) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.removeEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.removeEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.removeEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.removeEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility,\n );\n if (passthroughProps.onProgress)\n modelViewer.removeEventListener(\n 'progress',\n passthroughProps.onProgress,\n );\n if (passthroughProps.onArStatus)\n modelViewer.removeEventListener(\n 'ar-status',\n passthroughProps.onArStatus,\n );\n if (passthroughProps.onArTracking)\n modelViewer.removeEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking,\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.removeEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped,\n );\n if (passthroughProps.onCameraChange)\n modelViewer.removeEventListener(\n 'camera-change',\n passthroughProps.onCameraChange,\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.removeEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange,\n );\n if (passthroughProps.onPlay)\n modelViewer.removeEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.removeEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.removeEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady,\n );\n };\n }, [\n modelViewer,\n passthroughProps.onArStatus,\n passthroughProps.onArTracking,\n passthroughProps.onCameraChange,\n passthroughProps.onEnvironmentChange,\n passthroughProps.onError,\n passthroughProps.onLoad,\n passthroughProps.onModelVisibility,\n passthroughProps.onPause,\n passthroughProps.onPlay,\n passthroughProps.onPreload,\n passthroughProps.onProgress,\n passthroughProps.onQuickLookButtonTapped,\n passthroughProps.onSceneGraphReady,\n ]);\n\n if (modelViewerLoadedStatus !== 'done') {\n // TODO: What do we want to display while the model-viewer library loads?\n return null;\n }\n\n if (!data.sources?.[0]?.url) {\n const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n if (__HYDROGEN_DEV__) {\n throw new Error(sourcesUrlError);\n } else {\n console.error(sourcesUrlError);\n return null;\n }\n }\n\n if (__HYDROGEN_DEV__ && !data.alt) {\n console.warn(\n `<ModelViewer/> requires the 'data.alt' prop for accessibility`,\n );\n }\n\n return (\n <model-viewer\n ref={callbackRef}\n {...passthroughProps}\n // @ts-expect-error src should exist\n // @eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n class={className}\n id={passthroughProps.id ?? data.id}\n src={data.sources[0].url}\n alt={data.alt ?? null}\n camera-controls={passthroughProps.cameraControls ?? true}\n poster={(passthroughProps.poster \|\| data.previewImage?.url) ?? null}\n autoplay={passthroughProps.autoplay ?? true}\n loading={passthroughProps.loading}\n reveal={passthroughProps.reveal}\n ar={passthroughProps.ar}\n ar-modes={passthroughProps.arModes}\n ar-scale={passthroughProps.arScale}\n // @ts-expect-error arPlacement should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arPlacement\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n ar-placement={passthroughProps.arPlacement}\n ios-src={passthroughProps.iosSrc}\n touch-action={passthroughProps.touchAction}\n disable-zoom={passthroughProps.disableZoom}\n orbit-sensitivity={passthroughProps.orbitSensitivity}\n auto-rotate={passthroughProps.autoRotate}\n auto-rotate-delay={passthroughProps.autoRotateDelay}\n // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n rotation-per-second={passthroughProps.rotationPerSecond}\n interaction-policy={passthroughProps.interactionPolicy}\n interaction-prompt={passthroughProps.interactionPrompt}\n interaction-prompt-style={passthroughProps.interactionPromptStyle}\n interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n camera-orbit={passthroughProps.cameraOrbit}\n camera-target={passthroughProps.cameraTarget}\n field-of-view={passthroughProps.fieldOfView}\n max-camera-orbit={passthroughProps.maxCameraOrbit}\n min-camera-orbit={passthroughProps.minCameraOrbit}\n max-field-of-view={passthroughProps.maxFieldOfView}\n min-field-of-view={passthroughProps.minFieldOfView}\n bounds={passthroughProps.bounds}\n interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n skybox-image={passthroughProps.skyboxImage}\n environment-image={passthroughProps.environmentImage}\n exposure={passthroughProps.exposure}\n shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n shadow-softness={passthroughProps.shadowSoftness ?? 0}\n animation-name={passthroughProps.animationName}\n animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n variant-name={passthroughProps.variantName}\n orientation={passthroughProps.orientation}\n scale={passthroughProps.scale}\n >\n {children}\n </model-viewer>\n );\n}\n"],"names":["useState","useCallback","useLoadScript","useEffect","jsx"],"mappings":"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"}

package/dist/node-dev/ModelViewer.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModelViewer.mjs","sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'model-viewer': PartialDeep<\n ModelViewerElement,\n {recurseIntoArrays: true}\n >;\n }\n }\n}\n\ntype ModelViewerProps = Omit<\n PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n 'src'\n> &\n ModelViewerBaseProps;\n\ntype ModelViewerBaseProps = {\n /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/2023-04/objects/model3d). /\n data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n /* The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). /\n onError?: (event: Event) => void;\n /* The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). /\n onLoad?: (event: Event) => void;\n /* The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). /\n onPreload?: (event: Event) => void;\n /* The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). /\n onModelVisibility?: (event: Event) => void;\n /* The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). /\n onProgress?: (event: Event) => void;\n /* The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). /\n onArStatus?: (event: Event) => void;\n /* The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). /\n onArTracking?: (event: Event) => void;\n /* The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). /\n onQuickLookButtonTapped?: (event: Event) => void;\n /* The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). /\n onCameraChange?: (event: Event) => void;\n /* The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange). /\n onEnvironmentChange?: (event: Event) => void;\n /* The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). /\n onPlay?: (event: Event) => void;\n /* The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). /\n onPause?: (event: Event) => void;\n /* The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). /\n onSceneGraphReady?: (event: Event) => void;\n};\n\n/\n The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n \n The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n \n ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n */\nexport function ModelViewer(props: ModelViewerProps): JSX.Element \| null {\n const [modelViewer, setModelViewer] = useState<undefined \| HTMLElement>(\n undefined,\n );\n const callbackRef = useCallback((node: HTMLElement) => {\n setModelViewer(node);\n }, []);\n const {data, children, className, ...passthroughProps} = props;\n\n const modelViewerLoadedStatus = useLoadScript(\n 'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n {\n module: true,\n },\n );\n\n useEffect(() => {\n if (!modelViewer) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.addEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.addEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.addEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.addEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility,\n );\n if (passthroughProps.onProgress)\n modelViewer.addEventListener('progress', passthroughProps.onProgress);\n if (passthroughProps.onArStatus)\n modelViewer.addEventListener('ar-status', passthroughProps.onArStatus);\n if (passthroughProps.onArTracking)\n modelViewer.addEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking,\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.addEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped,\n );\n if (passthroughProps.onCameraChange)\n modelViewer.addEventListener(\n 'camera-change',\n passthroughProps.onCameraChange,\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.addEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange,\n );\n if (passthroughProps.onPlay)\n modelViewer.addEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.addEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.addEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady,\n );\n\n return () => {\n if (modelViewer == null) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.removeEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.removeEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.removeEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.removeEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility,\n );\n if (passthroughProps.onProgress)\n modelViewer.removeEventListener(\n 'progress',\n passthroughProps.onProgress,\n );\n if (passthroughProps.onArStatus)\n modelViewer.removeEventListener(\n 'ar-status',\n passthroughProps.onArStatus,\n );\n if (passthroughProps.onArTracking)\n modelViewer.removeEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking,\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.removeEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped,\n );\n if (passthroughProps.onCameraChange)\n modelViewer.removeEventListener(\n 'camera-change',\n passthroughProps.onCameraChange,\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.removeEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange,\n );\n if (passthroughProps.onPlay)\n modelViewer.removeEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.removeEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.removeEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady,\n );\n };\n }, [\n modelViewer,\n passthroughProps.onArStatus,\n passthroughProps.onArTracking,\n passthroughProps.onCameraChange,\n passthroughProps.onEnvironmentChange,\n passthroughProps.onError,\n passthroughProps.onLoad,\n passthroughProps.onModelVisibility,\n passthroughProps.onPause,\n passthroughProps.onPlay,\n passthroughProps.onPreload,\n passthroughProps.onProgress,\n passthroughProps.onQuickLookButtonTapped,\n passthroughProps.onSceneGraphReady,\n ]);\n\n if (modelViewerLoadedStatus !== 'done') {\n // TODO: What do we want to display while the model-viewer library loads?\n return null;\n }\n\n if (!data.sources?.[0]?.url) {\n const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n if (__HYDROGEN_DEV__) {\n throw new Error(sourcesUrlError);\n } else {\n console.error(sourcesUrlError);\n return null;\n }\n }\n\n if (__HYDROGEN_DEV__ && !data.alt) {\n console.warn(\n `<ModelViewer/> requires the 'data.alt' prop for accessibility`,\n );\n }\n\n return (\n <model-viewer\n ref={callbackRef}\n {...passthroughProps}\n // @ts-expect-error src should exist\n // @eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n class={className}\n id={passthroughProps.id ?? data.id}\n src={data.sources[0].url}\n alt={data.alt ?? null}\n camera-controls={passthroughProps.cameraControls ?? true}\n poster={(passthroughProps.poster \|\| data.previewImage?.url) ?? null}\n autoplay={passthroughProps.autoplay ?? true}\n loading={passthroughProps.loading}\n reveal={passthroughProps.reveal}\n ar={passthroughProps.ar}\n ar-modes={passthroughProps.arModes}\n ar-scale={passthroughProps.arScale}\n // @ts-expect-error arPlacement should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arPlacement\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n ar-placement={passthroughProps.arPlacement}\n ios-src={passthroughProps.iosSrc}\n touch-action={passthroughProps.touchAction}\n disable-zoom={passthroughProps.disableZoom}\n orbit-sensitivity={passthroughProps.orbitSensitivity}\n auto-rotate={passthroughProps.autoRotate}\n auto-rotate-delay={passthroughProps.autoRotateDelay}\n // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n rotation-per-second={passthroughProps.rotationPerSecond}\n interaction-policy={passthroughProps.interactionPolicy}\n interaction-prompt={passthroughProps.interactionPrompt}\n interaction-prompt-style={passthroughProps.interactionPromptStyle}\n interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n camera-orbit={passthroughProps.cameraOrbit}\n camera-target={passthroughProps.cameraTarget}\n field-of-view={passthroughProps.fieldOfView}\n max-camera-orbit={passthroughProps.maxCameraOrbit}\n min-camera-orbit={passthroughProps.minCameraOrbit}\n max-field-of-view={passthroughProps.maxFieldOfView}\n min-field-of-view={passthroughProps.minFieldOfView}\n bounds={passthroughProps.bounds}\n interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n skybox-image={passthroughProps.skyboxImage}\n environment-image={passthroughProps.environmentImage}\n exposure={passthroughProps.exposure}\n shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n shadow-softness={passthroughProps.shadowSoftness ?? 0}\n animation-name={passthroughProps.animationName}\n animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n variant-name={passthroughProps.variantName}\n orientation={passthroughProps.orientation}\n scale={passthroughProps.scale}\n >\n {children}\n </model-viewer>\n );\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"ModelViewer.mjs","sources":["../../src/ModelViewer.tsx"],"sourcesContent":["import {useState, useEffect, useCallback} from 'react';\nimport {useLoadScript} from './load-script.js';\nimport type {Model3d} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\nimport type {ModelViewerElement} from '@google/model-viewer/lib/model-viewer.js';\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'model-viewer': PartialDeep<\n ModelViewerElement,\n {recurseIntoArrays: true}\n >;\n }\n }\n}\n\ntype ModelViewerProps = Omit<\n PartialDeep<JSX.IntrinsicElements['model-viewer'], {recurseIntoArrays: true}>,\n 'src'\n> &\n ModelViewerBaseProps;\n\ntype ModelViewerBaseProps = {\n /** An object with fields that correspond to the Storefront API's [Model3D object](https://shopify.dev/api/storefront/2023-07/objects/model3d). /\n data: PartialDeep<Model3d, {recurseIntoArrays: true}>;\n /* The callback to invoke when the 'error' event is triggered. Refer to [error in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-error). /\n onError?: (event: Event) => void;\n /* The callback to invoke when the `load` event is triggered. Refer to [load in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-load). /\n onLoad?: (event: Event) => void;\n /* The callback to invoke when the 'preload' event is triggered. Refer to [preload in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-preload). /\n onPreload?: (event: Event) => void;\n /* The callback to invoke when the 'model-visibility' event is triggered. Refer to [model-visibility in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-modelVisibility). /\n onModelVisibility?: (event: Event) => void;\n /* The callback to invoke when the 'progress' event is triggered. Refer to [progress in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-loading-events-progress). /\n onProgress?: (event: Event) => void;\n /* The callback to invoke when the 'ar-status' event is triggered. Refer to [ar-status in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arStatus). /\n onArStatus?: (event: Event) => void;\n /* The callback to invoke when the 'ar-tracking' event is triggered. Refer to [ar-tracking in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-arTracking). /\n onArTracking?: (event: Event) => void;\n /* The callback to invoke when the 'quick-look-button-tapped' event is triggered. Refer to [quick-look-button-tapped in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-events-quickLookButtonTapped). /\n onQuickLookButtonTapped?: (event: Event) => void;\n /* The callback to invoke when the 'camera-change' event is triggered. Refer to [camera-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-events-cameraChange). /\n onCameraChange?: (event: Event) => void;\n /* The callback to invoke when the 'environment-change' event is triggered. Refer to [environment-change in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-lightingandenv-events-environmentChange). /\n onEnvironmentChange?: (event: Event) => void;\n /* The callback to invoke when the 'play' event is triggered. Refer to [play in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-play). /\n onPlay?: (event: Event) => void;\n /* The callback to invoke when the 'pause' event is triggered. Refer to [pause in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-animation-events-pause). /\n onPause?: (event: Event) => void;\n /* The callback to invoke when the 'scene-graph-ready' event is triggered. Refer to [scene-graph-ready in the <model-viewer> documentation](https://modelviewer.dev/docs/index.html#entrydocs-scenegraph-events-sceneGraphReady). /\n onSceneGraphReady?: (event: Event) => void;\n};\n\n/\n The `ModelViewer` component renders a 3D model (with the `model-viewer` custom element) for\n * the Storefront API's [Model3d object](https://shopify.dev/api/storefront/reference/products/model3d).\n \n The `model-viewer` custom element is lazily downloaded through a dynamically-injected `<script type=\"module\">` tag when the `<ModelViewer />` component is rendered\n \n ModelViewer is using version `1.21.1` of the `@google/model-viewer` library.\n */\nexport function ModelViewer(props: ModelViewerProps): JSX.Element \| null {\n const [modelViewer, setModelViewer] = useState<undefined \| HTMLElement>(\n undefined,\n );\n const callbackRef = useCallback((node: HTMLElement) => {\n setModelViewer(node);\n }, []);\n const {data, children, className, ...passthroughProps} = props;\n\n const modelViewerLoadedStatus = useLoadScript(\n 'https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js',\n {\n module: true,\n },\n );\n\n useEffect(() => {\n if (!modelViewer) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.addEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.addEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.addEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.addEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility,\n );\n if (passthroughProps.onProgress)\n modelViewer.addEventListener('progress', passthroughProps.onProgress);\n if (passthroughProps.onArStatus)\n modelViewer.addEventListener('ar-status', passthroughProps.onArStatus);\n if (passthroughProps.onArTracking)\n modelViewer.addEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking,\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.addEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped,\n );\n if (passthroughProps.onCameraChange)\n modelViewer.addEventListener(\n 'camera-change',\n passthroughProps.onCameraChange,\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.addEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange,\n );\n if (passthroughProps.onPlay)\n modelViewer.addEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.addEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.addEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady,\n );\n\n return () => {\n if (modelViewer == null) {\n return;\n }\n if (passthroughProps.onError)\n modelViewer.removeEventListener('error', passthroughProps.onError);\n if (passthroughProps.onLoad)\n modelViewer.removeEventListener('load', passthroughProps.onLoad);\n if (passthroughProps.onPreload)\n modelViewer.removeEventListener('preload', passthroughProps.onPreload);\n if (passthroughProps.onModelVisibility)\n modelViewer.removeEventListener(\n 'model-visibility',\n passthroughProps.onModelVisibility,\n );\n if (passthroughProps.onProgress)\n modelViewer.removeEventListener(\n 'progress',\n passthroughProps.onProgress,\n );\n if (passthroughProps.onArStatus)\n modelViewer.removeEventListener(\n 'ar-status',\n passthroughProps.onArStatus,\n );\n if (passthroughProps.onArTracking)\n modelViewer.removeEventListener(\n 'ar-tracking',\n passthroughProps.onArTracking,\n );\n if (passthroughProps.onQuickLookButtonTapped)\n modelViewer.removeEventListener(\n 'quick-look-button-tapped',\n passthroughProps.onQuickLookButtonTapped,\n );\n if (passthroughProps.onCameraChange)\n modelViewer.removeEventListener(\n 'camera-change',\n passthroughProps.onCameraChange,\n );\n if (passthroughProps.onEnvironmentChange)\n modelViewer.removeEventListener(\n 'environment-change',\n passthroughProps.onEnvironmentChange,\n );\n if (passthroughProps.onPlay)\n modelViewer.removeEventListener('play', passthroughProps.onPlay);\n if (passthroughProps.onPause)\n modelViewer.removeEventListener('ar-status', passthroughProps.onPause);\n if (passthroughProps.onSceneGraphReady)\n modelViewer.removeEventListener(\n 'scene-graph-ready',\n passthroughProps.onSceneGraphReady,\n );\n };\n }, [\n modelViewer,\n passthroughProps.onArStatus,\n passthroughProps.onArTracking,\n passthroughProps.onCameraChange,\n passthroughProps.onEnvironmentChange,\n passthroughProps.onError,\n passthroughProps.onLoad,\n passthroughProps.onModelVisibility,\n passthroughProps.onPause,\n passthroughProps.onPlay,\n passthroughProps.onPreload,\n passthroughProps.onProgress,\n passthroughProps.onQuickLookButtonTapped,\n passthroughProps.onSceneGraphReady,\n ]);\n\n if (modelViewerLoadedStatus !== 'done') {\n // TODO: What do we want to display while the model-viewer library loads?\n return null;\n }\n\n if (!data.sources?.[0]?.url) {\n const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;\n if (__HYDROGEN_DEV__) {\n throw new Error(sourcesUrlError);\n } else {\n console.error(sourcesUrlError);\n return null;\n }\n }\n\n if (__HYDROGEN_DEV__ && !data.alt) {\n console.warn(\n `<ModelViewer/> requires the 'data.alt' prop for accessibility`,\n );\n }\n\n return (\n <model-viewer\n ref={callbackRef}\n {...passthroughProps}\n // @ts-expect-error src should exist\n // @eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n class={className}\n id={passthroughProps.id ?? data.id}\n src={data.sources[0].url}\n alt={data.alt ?? null}\n camera-controls={passthroughProps.cameraControls ?? true}\n poster={(passthroughProps.poster \|\| data.previewImage?.url) ?? null}\n autoplay={passthroughProps.autoplay ?? true}\n loading={passthroughProps.loading}\n reveal={passthroughProps.reveal}\n ar={passthroughProps.ar}\n ar-modes={passthroughProps.arModes}\n ar-scale={passthroughProps.arScale}\n // @ts-expect-error arPlacement should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-augmentedreality-attributes-arPlacement\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n ar-placement={passthroughProps.arPlacement}\n ios-src={passthroughProps.iosSrc}\n touch-action={passthroughProps.touchAction}\n disable-zoom={passthroughProps.disableZoom}\n orbit-sensitivity={passthroughProps.orbitSensitivity}\n auto-rotate={passthroughProps.autoRotate}\n auto-rotate-delay={passthroughProps.autoRotateDelay}\n // @ts-expect-error rotationPerSecond should exist as a type, not sure why it doesn't. https://modelviewer.dev/docs/index.html#entrydocs-stagingandcameras-attributes-rotationPerSecond\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n rotation-per-second={passthroughProps.rotationPerSecond}\n interaction-policy={passthroughProps.interactionPolicy}\n interaction-prompt={passthroughProps.interactionPrompt}\n interaction-prompt-style={passthroughProps.interactionPromptStyle}\n interaction-prompt-threshold={passthroughProps.interactionPromptThreshold}\n camera-orbit={passthroughProps.cameraOrbit}\n camera-target={passthroughProps.cameraTarget}\n field-of-view={passthroughProps.fieldOfView}\n max-camera-orbit={passthroughProps.maxCameraOrbit}\n min-camera-orbit={passthroughProps.minCameraOrbit}\n max-field-of-view={passthroughProps.maxFieldOfView}\n min-field-of-view={passthroughProps.minFieldOfView}\n bounds={passthroughProps.bounds}\n interpolation-decay={passthroughProps.interpolationDecay ?? 100}\n skybox-image={passthroughProps.skyboxImage}\n environment-image={passthroughProps.environmentImage}\n exposure={passthroughProps.exposure}\n shadow-intensity={passthroughProps.shadowIntensity ?? 0}\n shadow-softness={passthroughProps.shadowSoftness ?? 0}\n animation-name={passthroughProps.animationName}\n animation-crossfade-duration={passthroughProps.animationCrossfadeDuration}\n variant-name={passthroughProps.variantName}\n orientation={passthroughProps.orientation}\n scale={passthroughProps.scale}\n >\n {children}\n </model-viewer>\n );\n}\n"],"names":[],"mappings":"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"}

package/dist/node-dev/Money.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Money.js","sources":["../../src/Money.tsx"],"sourcesContent":["import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\nexport interface MoneyPropsBase<ComponentGeneric extends React.ElementType> {\n /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. /\n as?: ComponentGeneric;\n /* An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). /\n data: PartialDeep<MoneyV2, {recurseIntoArrays: true}>;\n /* Whether to remove the currency symbol from the output. /\n withoutCurrency?: boolean;\n /* Whether to remove trailing zeros (fractional money) from the output. /\n withoutTrailingZeros?: boolean;\n /* A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2023-04/objects/unitpricemeasurement). /\n measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;\n /* Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. /\n measurementSeparator?: ReactNode;\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type MoneyProps<ComponentGeneric extends React.ElementType> =\n MoneyPropsBase<ComponentGeneric> &\n Omit<\n React.ComponentPropsWithoutRef<ComponentGeneric>,\n keyof MoneyPropsBase<ComponentGeneric>\n >;\n\n/\n The `Money` component renders a string of the Storefront API's\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2)\n * according to the `locale` in the `ShopifyProvider` component.\n *  \n * @see {@link https://shopify.dev/api/hydrogen/components/money}\n * @example basic usage, outputs: $100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} />\n * ```\n *  \n \n @example without currency, outputs: 100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutCurrency />\n * ```\n *  \n \n @example without trailing zeros, outputs: $100\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutTrailingZeros />\n * ```\n *  \n \n @example with per-unit measurement, outputs: $100.00 per G\n * ```ts\n * <Money\n * data={{amount: '100.00', currencyCode: 'USD'}}\n * measurement={{referenceUnit: 'G'}}\n * measurementSeparator=\" per \"\n * />\n * ```\n */\nexport function Money<ComponentGeneric extends React.ElementType = 'div'>({\n data,\n as,\n withoutCurrency,\n withoutTrailingZeros,\n measurement,\n measurementSeparator = '/',\n ...passthroughProps\n}: MoneyProps<ComponentGeneric>): JSX.Element {\n if (!isMoney(data)) {\n throw new Error(\n `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`,\n );\n }\n const moneyObject = useMoney(data);\n const Wrapper = as ?? 'div';\n\n let output = moneyObject.localizedString;\n\n if (withoutCurrency \|\| withoutTrailingZeros) {\n if (withoutCurrency && !withoutTrailingZeros) {\n output = moneyObject.amount;\n } else if (!withoutCurrency && withoutTrailingZeros) {\n output = moneyObject.withoutTrailingZeros;\n } else {\n // both\n output = moneyObject.withoutTrailingZerosAndCurrency;\n }\n }\n\n return (\n <Wrapper {...passthroughProps}>\n {output}\n {measurement && measurement.referenceUnit && (\n <>\n {measurementSeparator}\n {measurement.referenceUnit}\n </>\n )}\n </Wrapper>\n );\n}\n\n// required in order to narrow the money object down and make TS happy\nfunction isMoney(\n maybeMoney: PartialDeep<MoneyV2, {recurseIntoArrays: true}>,\n): maybeMoney is MoneyV2 {\n return (\n typeof maybeMoney.amount === 'string' &&\n !!maybeMoney.amount &&\n typeof maybeMoney.currencyCode === 'string' &&\n !!maybeMoney.currencyCode\n );\n}\n"],"names":["useMoney","jsxs","Fragment"],"mappings":";;;;AA6DO,SAAS,MAA0D;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,GAAG;AACL,GAA8C;AACxC,MAAA,CAAC,QAAQ,IAAI,GAAG;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACM,QAAA,cAAcA,kBAAS,IAAI;AACjC,QAAM,UAAU,MAAM;AAEtB,MAAI,SAAS,YAAY;AAEzB,MAAI,mBAAmB,sBAAsB;AACvC,QAAA,mBAAmB,CAAC,sBAAsB;AAC5C,eAAS,YAAY;AAAA,IAAA,WACZ,CAAC,mBAAmB,sBAAsB;AACnD,eAAS,YAAY;AAAA,IAAA,OAChB;AAEL,eAAS,YAAY;AAAA,IACvB;AAAA,EACF;AAGE,SAAAC,2BAAA,KAAC,SAAS,EAAA,GAAG,kBACV,UAAA;AAAA,IAAA;AAAA,IACA,eAAe,YAAY,iBAEvBA,2BAAA,KAAAC,WAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,MACA,YAAY;AAAA,IAAA,GACf;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAGA,SAAS,QACP,YACuB;AACvB,SACE,OAAO,WAAW,WAAW,YAC7B,CAAC,CAAC,WAAW,UACb,OAAO,WAAW,iBAAiB,YACnC,CAAC,CAAC,WAAW;AAEjB;;"}
1	+ {"version":3,"file":"Money.js","sources":["../../src/Money.tsx"],"sourcesContent":["import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\nexport interface MoneyPropsBase<ComponentGeneric extends React.ElementType> {\n /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. /\n as?: ComponentGeneric;\n /* An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). /\n data: PartialDeep<MoneyV2, {recurseIntoArrays: true}>;\n /* Whether to remove the currency symbol from the output. /\n withoutCurrency?: boolean;\n /* Whether to remove trailing zeros (fractional money) from the output. /\n withoutTrailingZeros?: boolean;\n /* A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2023-07/objects/unitpricemeasurement). /\n measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;\n /* Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. /\n measurementSeparator?: ReactNode;\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type MoneyProps<ComponentGeneric extends React.ElementType> =\n MoneyPropsBase<ComponentGeneric> &\n Omit<\n React.ComponentPropsWithoutRef<ComponentGeneric>,\n keyof MoneyPropsBase<ComponentGeneric>\n >;\n\n/\n The `Money` component renders a string of the Storefront API's\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2)\n * according to the `locale` in the `ShopifyProvider` component.\n *  \n * @see {@link https://shopify.dev/api/hydrogen/components/money}\n * @example basic usage, outputs: $100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} />\n * ```\n *  \n \n @example without currency, outputs: 100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutCurrency />\n * ```\n *  \n \n @example without trailing zeros, outputs: $100\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutTrailingZeros />\n * ```\n *  \n \n @example with per-unit measurement, outputs: $100.00 per G\n * ```ts\n * <Money\n * data={{amount: '100.00', currencyCode: 'USD'}}\n * measurement={{referenceUnit: 'G'}}\n * measurementSeparator=\" per \"\n * />\n * ```\n */\nexport function Money<ComponentGeneric extends React.ElementType = 'div'>({\n data,\n as,\n withoutCurrency,\n withoutTrailingZeros,\n measurement,\n measurementSeparator = '/',\n ...passthroughProps\n}: MoneyProps<ComponentGeneric>): JSX.Element {\n if (!isMoney(data)) {\n throw new Error(\n `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`,\n );\n }\n const moneyObject = useMoney(data);\n const Wrapper = as ?? 'div';\n\n let output = moneyObject.localizedString;\n\n if (withoutCurrency \|\| withoutTrailingZeros) {\n if (withoutCurrency && !withoutTrailingZeros) {\n output = moneyObject.amount;\n } else if (!withoutCurrency && withoutTrailingZeros) {\n output = moneyObject.withoutTrailingZeros;\n } else {\n // both\n output = moneyObject.withoutTrailingZerosAndCurrency;\n }\n }\n\n return (\n <Wrapper {...passthroughProps}>\n {output}\n {measurement && measurement.referenceUnit && (\n <>\n {measurementSeparator}\n {measurement.referenceUnit}\n </>\n )}\n </Wrapper>\n );\n}\n\n// required in order to narrow the money object down and make TS happy\nfunction isMoney(\n maybeMoney: PartialDeep<MoneyV2, {recurseIntoArrays: true}>,\n): maybeMoney is MoneyV2 {\n return (\n typeof maybeMoney.amount === 'string' &&\n !!maybeMoney.amount &&\n typeof maybeMoney.currencyCode === 'string' &&\n !!maybeMoney.currencyCode\n );\n}\n"],"names":["useMoney","jsxs","Fragment"],"mappings":";;;;AA6DO,SAAS,MAA0D;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,GAAG;AACL,GAA8C;AACxC,MAAA,CAAC,QAAQ,IAAI,GAAG;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACM,QAAA,cAAcA,kBAAS,IAAI;AACjC,QAAM,UAAU,MAAM;AAEtB,MAAI,SAAS,YAAY;AAEzB,MAAI,mBAAmB,sBAAsB;AACvC,QAAA,mBAAmB,CAAC,sBAAsB;AAC5C,eAAS,YAAY;AAAA,IAAA,WACZ,CAAC,mBAAmB,sBAAsB;AACnD,eAAS,YAAY;AAAA,IAAA,OAChB;AAEL,eAAS,YAAY;AAAA,IACvB;AAAA,EACF;AAGE,SAAAC,2BAAA,KAAC,SAAS,EAAA,GAAG,kBACV,UAAA;AAAA,IAAA;AAAA,IACA,eAAe,YAAY,iBAEvBA,2BAAA,KAAAC,WAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,MACA,YAAY;AAAA,IAAA,GACf;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAGA,SAAS,QACP,YACuB;AACvB,SACE,OAAO,WAAW,WAAW,YAC7B,CAAC,CAAC,WAAW,UACb,OAAO,WAAW,iBAAiB,YACnC,CAAC,CAAC,WAAW;AAEjB;;"}

package/dist/node-dev/Money.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Money.mjs","sources":["../../src/Money.tsx"],"sourcesContent":["import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\nexport interface MoneyPropsBase<ComponentGeneric extends React.ElementType> {\n /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. /\n as?: ComponentGeneric;\n /* An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). /\n data: PartialDeep<MoneyV2, {recurseIntoArrays: true}>;\n /* Whether to remove the currency symbol from the output. /\n withoutCurrency?: boolean;\n /* Whether to remove trailing zeros (fractional money) from the output. /\n withoutTrailingZeros?: boolean;\n /* A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2023-04/objects/unitpricemeasurement). /\n measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;\n /* Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. /\n measurementSeparator?: ReactNode;\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type MoneyProps<ComponentGeneric extends React.ElementType> =\n MoneyPropsBase<ComponentGeneric> &\n Omit<\n React.ComponentPropsWithoutRef<ComponentGeneric>,\n keyof MoneyPropsBase<ComponentGeneric>\n >;\n\n/\n The `Money` component renders a string of the Storefront API's\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2)\n * according to the `locale` in the `ShopifyProvider` component.\n *  \n * @see {@link https://shopify.dev/api/hydrogen/components/money}\n * @example basic usage, outputs: $100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} />\n * ```\n *  \n \n @example without currency, outputs: 100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutCurrency />\n * ```\n *  \n \n @example without trailing zeros, outputs: $100\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutTrailingZeros />\n * ```\n *  \n \n @example with per-unit measurement, outputs: $100.00 per G\n * ```ts\n * <Money\n * data={{amount: '100.00', currencyCode: 'USD'}}\n * measurement={{referenceUnit: 'G'}}\n * measurementSeparator=\" per \"\n * />\n * ```\n */\nexport function Money<ComponentGeneric extends React.ElementType = 'div'>({\n data,\n as,\n withoutCurrency,\n withoutTrailingZeros,\n measurement,\n measurementSeparator = '/',\n ...passthroughProps\n}: MoneyProps<ComponentGeneric>): JSX.Element {\n if (!isMoney(data)) {\n throw new Error(\n `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`,\n );\n }\n const moneyObject = useMoney(data);\n const Wrapper = as ?? 'div';\n\n let output = moneyObject.localizedString;\n\n if (withoutCurrency \|\| withoutTrailingZeros) {\n if (withoutCurrency && !withoutTrailingZeros) {\n output = moneyObject.amount;\n } else if (!withoutCurrency && withoutTrailingZeros) {\n output = moneyObject.withoutTrailingZeros;\n } else {\n // both\n output = moneyObject.withoutTrailingZerosAndCurrency;\n }\n }\n\n return (\n <Wrapper {...passthroughProps}>\n {output}\n {measurement && measurement.referenceUnit && (\n <>\n {measurementSeparator}\n {measurement.referenceUnit}\n </>\n )}\n </Wrapper>\n );\n}\n\n// required in order to narrow the money object down and make TS happy\nfunction isMoney(\n maybeMoney: PartialDeep<MoneyV2, {recurseIntoArrays: true}>,\n): maybeMoney is MoneyV2 {\n return (\n typeof maybeMoney.amount === 'string' &&\n !!maybeMoney.amount &&\n typeof maybeMoney.currencyCode === 'string' &&\n !!maybeMoney.currencyCode\n );\n}\n"],"names":[],"mappings":";;AA6DO,SAAS,MAA0D;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,GAAG;AACL,GAA8C;AACxC,MAAA,CAAC,QAAQ,IAAI,GAAG;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACM,QAAA,cAAc,SAAS,IAAI;AACjC,QAAM,UAAU,MAAM;AAEtB,MAAI,SAAS,YAAY;AAEzB,MAAI,mBAAmB,sBAAsB;AACvC,QAAA,mBAAmB,CAAC,sBAAsB;AAC5C,eAAS,YAAY;AAAA,IAAA,WACZ,CAAC,mBAAmB,sBAAsB;AACnD,eAAS,YAAY;AAAA,IAAA,OAChB;AAEL,eAAS,YAAY;AAAA,IACvB;AAAA,EACF;AAGE,SAAA,qBAAC,SAAS,EAAA,GAAG,kBACV,UAAA;AAAA,IAAA;AAAA,IACA,eAAe,YAAY,iBAEvB,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,MACA,YAAY;AAAA,IAAA,GACf;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAGA,SAAS,QACP,YACuB;AACvB,SACE,OAAO,WAAW,WAAW,YAC7B,CAAC,CAAC,WAAW,UACb,OAAO,WAAW,iBAAiB,YACnC,CAAC,CAAC,WAAW;AAEjB;"}
1	+ {"version":3,"file":"Money.mjs","sources":["../../src/Money.tsx"],"sourcesContent":["import {type ReactNode} from 'react';\nimport {useMoney} from './useMoney.js';\nimport type {MoneyV2, UnitPriceMeasurement} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\nexport interface MoneyPropsBase<ComponentGeneric extends React.ElementType> {\n /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. /\n as?: ComponentGeneric;\n /* An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). /\n data: PartialDeep<MoneyV2, {recurseIntoArrays: true}>;\n /* Whether to remove the currency symbol from the output. /\n withoutCurrency?: boolean;\n /* Whether to remove trailing zeros (fractional money) from the output. /\n withoutTrailingZeros?: boolean;\n /* A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2023-07/objects/unitpricemeasurement). /\n measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;\n /* Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. /\n measurementSeparator?: ReactNode;\n}\n\n// This article helps understand the typing here https://www.benmvp.com/blog/polymorphic-react-components-typescript/ Ben is the best :)\nexport type MoneyProps<ComponentGeneric extends React.ElementType> =\n MoneyPropsBase<ComponentGeneric> &\n Omit<\n React.ComponentPropsWithoutRef<ComponentGeneric>,\n keyof MoneyPropsBase<ComponentGeneric>\n >;\n\n/\n The `Money` component renders a string of the Storefront API's\n * [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2)\n * according to the `locale` in the `ShopifyProvider` component.\n *  \n * @see {@link https://shopify.dev/api/hydrogen/components/money}\n * @example basic usage, outputs: $100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} />\n * ```\n *  \n \n @example without currency, outputs: 100.00\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutCurrency />\n * ```\n *  \n \n @example without trailing zeros, outputs: $100\n * ```ts\n * <Money data={{amount: '100.00', currencyCode: 'USD'}} withoutTrailingZeros />\n * ```\n *  \n \n @example with per-unit measurement, outputs: $100.00 per G\n * ```ts\n * <Money\n * data={{amount: '100.00', currencyCode: 'USD'}}\n * measurement={{referenceUnit: 'G'}}\n * measurementSeparator=\" per \"\n * />\n * ```\n */\nexport function Money<ComponentGeneric extends React.ElementType = 'div'>({\n data,\n as,\n withoutCurrency,\n withoutTrailingZeros,\n measurement,\n measurementSeparator = '/',\n ...passthroughProps\n}: MoneyProps<ComponentGeneric>): JSX.Element {\n if (!isMoney(data)) {\n throw new Error(\n `<Money/> needs a valid 'data' prop that has 'amount' and 'currencyCode'`,\n );\n }\n const moneyObject = useMoney(data);\n const Wrapper = as ?? 'div';\n\n let output = moneyObject.localizedString;\n\n if (withoutCurrency \|\| withoutTrailingZeros) {\n if (withoutCurrency && !withoutTrailingZeros) {\n output = moneyObject.amount;\n } else if (!withoutCurrency && withoutTrailingZeros) {\n output = moneyObject.withoutTrailingZeros;\n } else {\n // both\n output = moneyObject.withoutTrailingZerosAndCurrency;\n }\n }\n\n return (\n <Wrapper {...passthroughProps}>\n {output}\n {measurement && measurement.referenceUnit && (\n <>\n {measurementSeparator}\n {measurement.referenceUnit}\n </>\n )}\n </Wrapper>\n );\n}\n\n// required in order to narrow the money object down and make TS happy\nfunction isMoney(\n maybeMoney: PartialDeep<MoneyV2, {recurseIntoArrays: true}>,\n): maybeMoney is MoneyV2 {\n return (\n typeof maybeMoney.amount === 'string' &&\n !!maybeMoney.amount &&\n typeof maybeMoney.currencyCode === 'string' &&\n !!maybeMoney.currencyCode\n );\n}\n"],"names":[],"mappings":";;AA6DO,SAAS,MAA0D;AAAA,EACxE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,uBAAuB;AAAA,EACvB,GAAG;AACL,GAA8C;AACxC,MAAA,CAAC,QAAQ,IAAI,GAAG;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IAAA;AAAA,EAEJ;AACM,QAAA,cAAc,SAAS,IAAI;AACjC,QAAM,UAAU,MAAM;AAEtB,MAAI,SAAS,YAAY;AAEzB,MAAI,mBAAmB,sBAAsB;AACvC,QAAA,mBAAmB,CAAC,sBAAsB;AAC5C,eAAS,YAAY;AAAA,IAAA,WACZ,CAAC,mBAAmB,sBAAsB;AACnD,eAAS,YAAY;AAAA,IAAA,OAChB;AAEL,eAAS,YAAY;AAAA,IACvB;AAAA,EACF;AAGE,SAAA,qBAAC,SAAS,EAAA,GAAG,kBACV,UAAA;AAAA,IAAA;AAAA,IACA,eAAe,YAAY,iBAEvB,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,MACA,YAAY;AAAA,IAAA,GACf;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAGA,SAAS,QACP,YACuB;AACvB,SACE,OAAO,WAAW,WAAW,YAC7B,CAAC,CAAC,WAAW,UACb,OAAO,WAAW,iBAAiB,YACnC,CAAC,CAAC,WAAW;AAEjB;"}

package/dist/node-dev/ShopPayButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ShopPayButton.js","sources":["../../src/ShopPayButton.tsx"],"sourcesContent":["import {defaultShopifyContext, useShop} from './ShopifyProvider.js';\nimport {useLoadScript} from './load-script.js';\nimport {parseGid} from './analytics-utils.js';\n\n// By using 'never' in the \"or\" cases below, it makes these props \"exclusive\" and means that you cannot pass both of them; you must pass either one OR the other.\ntype ShopPayButtonProps = ShopPayButtonStyleProps &\n ShopPayDomainProps &\n (ShopPayVariantIds \| ShopPayVariantAndQuantities);\n\ntype ShopPayButtonStyleProps = {\n /** A string of classes to apply to the `div` that wraps the Shop Pay button. /\n className?: string;\n /* A string that's applied to the [CSS custom property (variable)](https://developer.mozilla.org/en-US/docs/Web/CSS/--) `--shop-pay-button-width` for the [Buy with Shop Pay component](https://shopify.dev/custom-storefronts/tools/web-components#buy-with-shop-pay-component). /\n width?: string;\n};\n\ntype ShopPayDomainProps = {\n /** The domain of your Shopify storefront URL (eg: `your-store.myshopify.com`). /\n storeDomain?: string;\n};\n\ntype ShopPayVariantIds = {\n /* An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use `variantIdsAndQuantities`. /\n variantIds: string[];\n /* An array of variant IDs and quantities to purchase with Shop Pay. /\n variantIdsAndQuantities?: never;\n};\n\ntype ShopPayVariantAndQuantities = {\n /* An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use `variantIdsAndQuantities`. /\n variantIds?: never;\n /* An array of variant IDs and quantities to purchase with Shop Pay. /\n variantIdsAndQuantities: Array<{\n id: string;\n quantity: number;\n }>;\n};\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'shop-pay-button': {\n variants: string;\n 'store-url': string;\n };\n }\n }\n}\n\nconst SHOPJS_URL =\n 'https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js';\n\n/\n The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.\n * It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.\n * It relies on the `<ShopProvider>` context provider.\n */\nexport function ShopPayButton({\n variantIds,\n className,\n variantIdsAndQuantities,\n width,\n storeDomain: _storeDomain,\n}: ShopPayButtonProps): JSX.Element {\n const shop = useShop();\n const storeDomain = _storeDomain \|\| shop?.storeDomain;\n const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);\n\n let ids: string[] = [];\n\n if (!storeDomain \|\| storeDomain === defaultShopifyContext.storeDomain) {\n throw new Error(MissingStoreDomainErrorMessage);\n }\n\n if (variantIds && variantIdsAndQuantities) {\n throw new Error(DoublePropsErrorMessage);\n }\n\n if (!variantIds && !variantIdsAndQuantities) {\n throw new Error(MissingPropsErrorMessage);\n }\n\n if (variantIds) {\n ids = variantIds.reduce<string[]>((prev, curr) => {\n const bareId = parseGid(curr).id;\n if (bareId) {\n prev.push(bareId);\n }\n return prev;\n }, []);\n } else if (variantIdsAndQuantities) {\n ids = variantIdsAndQuantities.reduce<string[]>((prev, curr) => {\n const bareId = parseGid(curr?.id).id;\n if (bareId) {\n prev.push(`${bareId}:${curr?.quantity ?? 1}`);\n }\n return prev;\n }, []);\n } else {\n throw new Error(MissingPropsErrorMessage);\n }\n\n if (ids.length === 0) {\n throw new Error(InvalidPropsErrorMessage);\n }\n\n const style = width\n ? ({\n '--shop-pay-button-width': width,\n } as React.CSSProperties)\n : undefined;\n\n return (\n <div className={className} style={style}>\n {shopPayLoadedStatus === 'done' && (\n <shop-pay-button store-url={storeDomain} variants={ids.join(',')} />\n )}\n </div>\n );\n}\n\nexport const MissingStoreDomainErrorMessage =\n 'You must pass a \"storeDomain\" prop to the \"ShopPayButton\" component, or wrap it in a \"ShopifyProvider\" component.';\nexport const InvalidPropsErrorMessage = `You must pass in \"variantIds\" in the form of [\"gid://shopify/ProductVariant/1\"]`;\nexport const MissingPropsErrorMessage = `You must pass in either \"variantIds\" or \"variantIdsAndQuantities\" to ShopPayButton`;\nexport const DoublePropsErrorMessage = `You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component`;\n"],"names":["useShop","useLoadScript","defaultShopifyContext","parseGid","jsx"],"mappings":";;;;;;AAkDA,MAAM,aACJ;AAOK,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,GAAoC;AAClC,QAAM,OAAOA,gBAAAA;AACP,QAAA,cAAc,iBAAgB,6BAAM;AACpC,QAAA,sBAAsBC,yBAAc,UAAU;AAEpD,MAAI,MAAgB,CAAA;AAEpB,MAAI,CAAC,eAAe,gBAAgBC,gBAAAA,sBAAsB,aAAa;AAC/D,UAAA,IAAI,MAAM,8BAA8B;AAAA,EAChD;AAEA,MAAI,cAAc,yBAAyB;AACnC,UAAA,IAAI,MAAM,uBAAuB;AAAA,EACzC;AAEI,MAAA,CAAC,cAAc,CAAC,yBAAyB;AACrC,UAAA,IAAI,MAAM,wBAAwB;AAAA,EAC1C;AAEA,MAAI,YAAY;AACd,UAAM,WAAW,OAAiB,CAAC,MAAM,SAAS;AAC1C,YAAA,SAASC,eAAAA,SAAS,IAAI,EAAE;AAC9B,UAAI,QAAQ;AACV,aAAK,KAAK,MAAM;AAAA,MAClB;AACO,aAAA;AAAA,IACT,GAAG,CAAE,CAAA;AAAA,aACI,yBAAyB;AAClC,UAAM,wBAAwB,OAAiB,CAAC,MAAM,SAAS;AAC7D,YAAM,SAASA,eAAA,SAAS,6BAAM,EAAE,EAAE;AAClC,UAAI,QAAQ;AACV,aAAK,KAAK,GAAG,~~WAAU~~,6BAAM,aAAY,~~GAAG~~;AAAA,MAC9C;AACO,aAAA;AAAA,IACT,GAAG,CAAE,CAAA;AAAA,EAAA,OACA;AACC,UAAA,IAAI,MAAM,wBAAwB;AAAA,EAC1C;AAEI,MAAA,IAAI,WAAW,GAAG;AACd,UAAA,IAAI,MAAM,wBAAwB;AAAA,EAC1C;AAEA,QAAM,QAAQ,QACT;AAAA,IACC,2BAA2B;AAAA,EAE7B,IAAA;AAEJ,SACGC,2BAAA,IAAA,OAAA,EAAI,WAAsB,OACxB,kCAAwB,UACvBA,2BAAA,IAAC,mBAAgB,EAAA,aAAW,aAAa,UAAU,IAAI,KAAK,GAAG,GAAG,EAEtE,CAAA;AAEJ;AAEO,MAAM,iCACX;AACK,MAAM,2BAA2B;AACjC,MAAM,2BAA2B;AACjC,MAAM,0BAA0B;;;;;;"}
1	+ {"version":3,"file":"ShopPayButton.js","sources":["../../src/ShopPayButton.tsx"],"sourcesContent":["import {defaultShopifyContext, useShop} from './ShopifyProvider.js';\nimport {useLoadScript} from './load-script.js';\nimport {parseGid} from './analytics-utils.js';\n\n// By using 'never' in the \"or\" cases below, it makes these props \"exclusive\" and means that you cannot pass both of them; you must pass either one OR the other.\ntype ShopPayButtonProps = ShopPayButtonStyleProps &\n ShopPayDomainProps &\n (ShopPayVariantIds \| ShopPayVariantAndQuantities);\n\ntype ShopPayButtonStyleProps = {\n /** A string of classes to apply to the `div` that wraps the Shop Pay button. /\n className?: string;\n /* A string that's applied to the [CSS custom property (variable)](https://developer.mozilla.org/en-US/docs/Web/CSS/--) `--shop-pay-button-width` for the [Buy with Shop Pay component](https://shopify.dev/custom-storefronts/tools/web-components#buy-with-shop-pay-component). /\n width?: string;\n};\n\ntype ShopPayDomainProps = {\n /** The domain of your Shopify storefront URL (eg: `your-store.myshopify.com`). /\n storeDomain?: string;\n};\n\ntype ShopPayVariantIds = {\n /* An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use `variantIdsAndQuantities`. /\n variantIds: string[];\n /* An array of variant IDs and quantities to purchase with Shop Pay. /\n variantIdsAndQuantities?: never;\n};\n\ntype ShopPayVariantAndQuantities = {\n /* An array of IDs of the variants to purchase with Shop Pay. This will only ever have a quantity of 1 for each variant. If you want to use other quantities, then use `variantIdsAndQuantities`. /\n variantIds?: never;\n /* An array of variant IDs and quantities to purchase with Shop Pay. /\n variantIdsAndQuantities: Array<{\n id: string;\n quantity: number;\n }>;\n};\n\ndeclare global {\n // eslint-disable-next-line @typescript-eslint/no-namespace\n namespace JSX {\n interface IntrinsicElements {\n 'shop-pay-button': {\n variants: string;\n 'store-url': string;\n };\n }\n }\n}\n\nconst SHOPJS_URL =\n 'https://cdn.shopify.com/shopifycloud/shop-js/v1.0/client.js';\n\n/\n The `ShopPayButton` component renders a button that redirects to the Shop Pay checkout.\n * It renders a [`<shop-pay-button>`](https://shopify.dev/custom-storefronts/tools/web-components) custom element, for which it will lazy-load the source code automatically.\n * It relies on the `<ShopProvider>` context provider.\n */\nexport function ShopPayButton({\n variantIds,\n className,\n variantIdsAndQuantities,\n width,\n storeDomain: _storeDomain,\n}: ShopPayButtonProps): JSX.Element {\n const shop = useShop();\n const storeDomain = _storeDomain \|\| shop?.storeDomain;\n const shopPayLoadedStatus = useLoadScript(SHOPJS_URL);\n\n let ids: string[] = [];\n\n if (!storeDomain \|\| storeDomain === defaultShopifyContext.storeDomain) {\n throw new Error(MissingStoreDomainErrorMessage);\n }\n\n if (variantIds && variantIdsAndQuantities) {\n throw new Error(DoublePropsErrorMessage);\n }\n\n if (!variantIds && !variantIdsAndQuantities) {\n throw new Error(MissingPropsErrorMessage);\n }\n\n if (variantIds) {\n ids = variantIds.reduce<string[]>((prev, curr) => {\n const bareId = parseGid(curr).id;\n if (bareId) {\n prev.push(bareId);\n }\n return prev;\n }, []);\n } else if (variantIdsAndQuantities) {\n ids = variantIdsAndQuantities.reduce<string[]>((prev, curr) => {\n const bareId = parseGid(curr?.id).id;\n if (bareId) {\n prev.push(`${bareId}:${curr?.quantity ?? 1}`);\n }\n return prev;\n }, []);\n } else {\n throw new Error(MissingPropsErrorMessage);\n }\n\n if (ids.length === 0) {\n throw new Error(InvalidPropsErrorMessage);\n }\n\n const style = width\n ? ({\n '--shop-pay-button-width': width,\n } as React.CSSProperties)\n : undefined;\n\n return (\n <div className={className} style={style}>\n {shopPayLoadedStatus === 'done' && (\n <shop-pay-button store-url={storeDomain} variants={ids.join(',')} />\n )}\n </div>\n );\n}\n\nexport const MissingStoreDomainErrorMessage =\n 'You must pass a \"storeDomain\" prop to the \"ShopPayButton\" component, or wrap it in a \"ShopifyProvider\" component.';\nexport const InvalidPropsErrorMessage = `You must pass in \"variantIds\" in the form of [\"gid://shopify/ProductVariant/1\"]`;\nexport const MissingPropsErrorMessage = `You must pass in either \"variantIds\" or \"variantIdsAndQuantities\" to ShopPayButton`;\nexport const DoublePropsErrorMessage = `You must provide either a variantIds or variantIdsAndQuantities prop, but not both in the ShopPayButton component`;\n"],"names":["useShop","useLoadScript","defaultShopifyContext","parseGid","jsx"],"mappings":";;;;;;AAkDA,MAAM,aACJ;AAOK,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,GAAoC;AAClC,QAAM,OAAOA,gBAAAA;AACP,QAAA,cAAc,iBAAgB,6BAAM;AACpC,QAAA,sBAAsBC,yBAAc,UAAU;AAEpD,MAAI,MAAgB,CAAA;AAEpB,MAAI,CAAC,eAAe,gBAAgBC,gBAAAA,sBAAsB,aAAa;AAC/D,UAAA,IAAI,MAAM,8BAA8B;AAAA,EAChD;AAEA,MAAI,cAAc,yBAAyB;AACnC,UAAA,IAAI,MAAM,uBAAuB;AAAA,EACzC;AAEI,MAAA,CAAC,cAAc,CAAC,yBAAyB;AACrC,UAAA,IAAI,MAAM,wBAAwB;AAAA,EAC1C;AAEA,MAAI,YAAY;AACd,UAAM,WAAW,OAAiB,CAAC,MAAM,SAAS;AAC1C,YAAA,SAASC,eAAAA,SAAS,IAAI,EAAE;AAC9B,UAAI,QAAQ;AACV,aAAK,KAAK,MAAM;AAAA,MAClB;AACO,aAAA;AAAA,IACT,GAAG,CAAE,CAAA;AAAA,aACI,yBAAyB;AAClC,UAAM,wBAAwB,OAAiB,CAAC,MAAM,SAAS;AAC7D,YAAM,SAASA,eAAA,SAAS,6BAAM,EAAE,EAAE;AAClC,UAAI,QAAQ;AACV,aAAK,KAAK,GAAG,MAAM,KAAI,6BAAM,aAAY,CAAC,EAAE;AAAA,MAC9C;AACO,aAAA;AAAA,IACT,GAAG,CAAE,CAAA;AAAA,EAAA,OACA;AACC,UAAA,IAAI,MAAM,wBAAwB;AAAA,EAC1C;AAEI,MAAA,IAAI,WAAW,GAAG;AACd,UAAA,IAAI,MAAM,wBAAwB;AAAA,EAC1C;AAEA,QAAM,QAAQ,QACT;AAAA,IACC,2BAA2B;AAAA,EAE7B,IAAA;AAEJ,SACGC,2BAAA,IAAA,OAAA,EAAI,WAAsB,OACxB,kCAAwB,UACvBA,2BAAA,IAAC,mBAAgB,EAAA,aAAW,aAAa,UAAU,IAAI,KAAK,GAAG,GAAG,EAEtE,CAAA;AAEJ;AAEO,MAAM,iCACX;AACK,MAAM,2BAA2B;AACjC,MAAM,2BAA2B;AACjC,MAAM,0BAA0B;;;;;;"}