@shopify/hydrogen-react 2022.10.8 → 2023.1.5

package/dist/node-dev/CartProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CartProvider.mjs","sources":["../../src/CartProvider.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useTransition,\n  createContext,\n  useContext,\n} from 'react';\nimport {\n  AttributeInput,\n  CartBuyerIdentityInput,\n  CartInput,\n  CartLineInput,\n  CartLineUpdateInput,\n  CountryCode,\n  Cart as CartType,\n  MutationCartNoteUpdateArgs,\n} from './storefront-api-types.js';\nimport {\n  BuyerIdentityUpdateEvent,\n  CartMachineContext,\n  CartMachineEvent,\n  CartMachineTypeState,\n  CartWithActions,\n} from './cart-types.js';\nimport {useCartAPIStateMachine} from './useCartAPIStateMachine.js';\nimport {CART_ID_STORAGE_KEY} from './cart-constants.js';\nimport {PartialDeep} from 'type-fest';\nimport {defaultCartFragment} from './cart-queries.js';\n\nexport const CartContext = createContext<CartWithActions | null>(null);\n\n/**\n * The `useCart` hook provides access to the cart object. It must be a descendent of a `CartProvider` component.\n */\nexport function useCart() {\n  const context = useContext(CartContext);\n\n  if (!context) {\n    throw new Error('Expected a Cart Context, but no Cart Context was found');\n  }\n\n  return context;\n}\n\nexport function CartProvider({\n  children,\n  numCartLines,\n  onCreate,\n  onLineAdd,\n  onLineRemove,\n  onLineUpdate,\n  onNoteUpdate,\n  onBuyerIdentityUpdate,\n  onAttributesUpdate,\n  onDiscountCodesUpdate,\n  onCreateComplete,\n  onLineAddComplete,\n  onLineRemoveComplete,\n  onLineUpdateComplete,\n  onNoteUpdateComplete,\n  onBuyerIdentityUpdateComplete,\n  onAttributesUpdateComplete,\n  onDiscountCodesUpdateComplete,\n  data: cart,\n  cartFragment = defaultCartFragment,\n  customerAccessToken,\n  countryCode = 'US',\n}: {\n  /** Any `ReactNode` elements. */\n  children: React.ReactNode;\n  /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */\n  numCartLines?: number;\n  /** A callback that is invoked when the process to create a cart begins, but before the cart is created in the Storefront API. */\n  onCreate?: () => void;\n  /** A callback that is invoked when the process to add a line item to the cart begins, but before the line item is added to the Storefront API. */\n  onLineAdd?: () => void;\n  /** A callback that is invoked when the process to remove a line item to the cart begins, but before the line item is removed from the Storefront API. */\n  onLineRemove?: () => void;\n  /** A callback that is invoked when the process to update a line item in the cart begins, but before the line item is updated in the Storefront API. */\n  onLineUpdate?: () => void;\n  /** A callback that is invoked when the process to add or update a note in the cart begins, but before the note is added or updated in the Storefront API. */\n  onNoteUpdate?: () => void;\n  /** A callback that is invoked when the process to update the buyer identity begins, but before the buyer identity is updated in the Storefront API. */\n  onBuyerIdentityUpdate?: () => void;\n  /** A callback that is invoked when the process to update the cart attributes begins, but before the attributes are updated in the Storefront API. */\n  onAttributesUpdate?: () => void;\n  /** A callback that is invoked when the process to update the cart discount codes begins, but before the discount codes are updated in the Storefront API. */\n  onDiscountCodesUpdate?: () => void;\n  /** A callback that is invoked when the process to create a cart completes */\n  onCreateComplete?: () => void;\n  /** A callback that is invoked when the process to add a line item to the cart completes */\n  onLineAddComplete?: () => void;\n  /** A callback that is invoked when the process to remove a line item to the cart completes */\n  onLineRemoveComplete?: () => void;\n  /** A callback that is invoked when the process to update a line item in the cart completes */\n  onLineUpdateComplete?: () => void;\n  /** A callback that is invoked when the process to add or update a note in the cart completes */\n  onNoteUpdateComplete?: () => void;\n  /** A callback that is invoked when the process to update the buyer identity completes */\n  onBuyerIdentityUpdateComplete?: () => void;\n  /** A callback that is invoked when the process to update the cart attributes completes */\n  onAttributesUpdateComplete?: () => void;\n  /** A callback that is invoked when the process to update the cart discount codes completes */\n  onDiscountCodesUpdateComplete?: () => void;\n  /** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart). */\n  data?: PartialDeep<CartType, {recurseIntoArrays: true}>;\n  /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */\n  cartFragment?: string;\n  /** A customer access token that's accessible on the server if there's a customer login. */\n  customerAccessToken?: CartBuyerIdentityInput['customerAccessToken'];\n  /** The ISO country code for i18n. */\n  countryCode?: CountryCode;\n}) {\n  if (countryCode) countryCode = countryCode.toUpperCase() as CountryCode;\n  const [prevCountryCode, setPrevCountryCode] = useState(countryCode);\n  const [prevCustomerAccessToken, setPrevCustomerAccessToken] =\n    useState(customerAccessToken);\n  const customerOverridesCountryCode = useRef(false);\n\n  if (\n    prevCountryCode !== countryCode ||\n    prevCustomerAccessToken !== customerAccessToken\n  ) {\n    setPrevCountryCode(countryCode);\n    setPrevCustomerAccessToken(customerAccessToken);\n    customerOverridesCountryCode.current = false;\n  }\n\n  const [cartState, cartSend] = useCartAPIStateMachine({\n    numCartLines,\n    data: cart,\n    cartFragment,\n    countryCode,\n    onCartActionEntry(_, event) {\n      try {\n        switch (event.type) {\n          case 'CART_CREATE':\n            return onCreate?.();\n          case 'CARTLINE_ADD':\n            return onLineAdd?.();\n          case 'CARTLINE_REMOVE':\n            return onLineRemove?.();\n          case 'CARTLINE_UPDATE':\n            return onLineUpdate?.();\n          case 'NOTE_UPDATE':\n            return onNoteUpdate?.();\n          case 'BUYER_IDENTITY_UPDATE':\n            return onBuyerIdentityUpdate?.();\n          case 'CART_ATTRIBUTES_UPDATE':\n            return onAttributesUpdate?.();\n          case 'DISCOUNT_CODES_UPDATE':\n            return onDiscountCodesUpdate?.();\n        }\n      } catch (error) {\n        console.error('Cart entry action failed', error);\n      }\n    },\n    onCartActionOptimisticUI(context, event) {\n      if (!context.cart) return {...context};\n      switch (event.type) {\n        case 'CARTLINE_REMOVE':\n          return {\n            ...context,\n            cart: {\n              ...context.cart,\n              lines: context?.cart?.lines?.filter(\n                (line) => line?.id && !event.payload.lines.includes(line?.id)\n              ),\n            },\n          };\n        case 'CARTLINE_UPDATE':\n          return {\n            ...context,\n            cart: {\n              ...context.cart,\n              lines: context?.cart?.lines?.map((line) => {\n                const updatedLine = event.payload.lines.find(\n                  ({id}) => id === line?.id\n                );\n\n                if (updatedLine && updatedLine.quantity) {\n                  return {\n                    ...line,\n                    quantity: updatedLine.quantity,\n                  };\n                }\n\n                return line;\n              }),\n            },\n          };\n      }\n      return {...context};\n    },\n    onCartActionComplete(context, event) {\n      const cartActionEvent = event.payload.cartActionEvent;\n      try {\n        switch (event.type) {\n          case 'RESOLVE':\n            switch (cartActionEvent.type) {\n              case 'CART_CREATE':\n                return onCreateComplete?.();\n              case 'CARTLINE_ADD':\n                return onLineAddComplete?.();\n              case 'CARTLINE_REMOVE':\n                return onLineRemoveComplete?.();\n              case 'CARTLINE_UPDATE':\n                return onLineUpdateComplete?.();\n              case 'NOTE_UPDATE':\n                return onNoteUpdateComplete?.();\n              case 'BUYER_IDENTITY_UPDATE':\n                if (countryCodeNotUpdated(context, cartActionEvent)) {\n                  customerOverridesCountryCode.current = true;\n                }\n                return onBuyerIdentityUpdateComplete?.();\n              case 'CART_ATTRIBUTES_UPDATE':\n                return onAttributesUpdateComplete?.();\n              case 'DISCOUNT_CODES_UPDATE':\n                return onDiscountCodesUpdateComplete?.();\n            }\n        }\n      } catch (error) {\n        console.error('onCartActionComplete failed', error);\n      }\n    },\n  });\n\n  const cartReady = useRef(false);\n  const cartCompleted = cartState.matches('cartCompleted');\n\n  const countryChanged =\n    (cartState.value === 'idle' ||\n      cartState.value === 'error' ||\n      cartState.value === 'cartCompleted') &&\n    countryCode !== cartState?.context?.cart?.buyerIdentity?.countryCode &&\n    !cartState.context.errors;\n\n  const fetchingFromStorage = useRef(false);\n\n  /**\n   * Initializes cart with priority in this order:\n   * 1. cart props\n   * 2. localStorage cartId\n   */\n  useEffect(() => {\n    if (!cartReady.current && !fetchingFromStorage.current) {\n      if (!cart && storageAvailable('localStorage')) {\n        fetchingFromStorage.current = true;\n        try {\n          const cartId = window.localStorage.getItem(CART_ID_STORAGE_KEY);\n          if (cartId) {\n            cartSend({type: 'CART_FETCH', payload: {cartId}});\n          }\n        } catch (error) {\n          console.warn('error fetching cartId');\n          console.warn(error);\n        }\n      }\n      cartReady.current = true;\n    }\n  }, [cart, cartReady, cartSend]);\n\n  // Update cart country code if cart and props countryCode's as different\n  useEffect(() => {\n    if (!countryChanged || customerOverridesCountryCode.current) return;\n    cartSend({\n      type: 'BUYER_IDENTITY_UPDATE',\n      payload: {buyerIdentity: {countryCode, customerAccessToken}},\n    });\n  }, [\n    countryCode,\n    customerAccessToken,\n    countryChanged,\n    customerOverridesCountryCode,\n    cartSend,\n  ]);\n\n  // send cart events when ready\n  const onCartReadySend = useCallback(\n    (cartEvent: CartMachineEvent) => {\n      if (!cartReady.current) {\n        return console.warn(\"Cart isn't ready yet\");\n      }\n      cartSend(cartEvent);\n    },\n    [cartSend]\n  );\n\n  // save cart id to local storage\n  useEffect(() => {\n    if (cartState?.context?.cart?.id && storageAvailable('localStorage')) {\n      try {\n        window.localStorage.setItem(\n          CART_ID_STORAGE_KEY,\n          cartState.context.cart?.id\n        );\n      } catch (error) {\n        console.warn('Failed to save cartId to localStorage', error);\n      }\n    }\n  }, [cartState?.context?.cart?.id]);\n\n  // delete cart from local storage if cart fetched has been completed\n  useEffect(() => {\n    if (cartCompleted && storageAvailable('localStorage')) {\n      try {\n        window.localStorage.removeItem(CART_ID_STORAGE_KEY);\n      } catch (error) {\n        console.warn('Failed to delete cartId from localStorage', error);\n      }\n    }\n  }, [cartCompleted]);\n\n  const cartCreate = useCallback(\n    (cartInput: CartInput) => {\n      if (countryCode && !cartInput.buyerIdentity?.countryCode) {\n        if (cartInput.buyerIdentity == null) {\n          cartInput.buyerIdentity = {};\n        }\n        cartInput.buyerIdentity.countryCode = countryCode;\n      }\n\n      if (\n        customerAccessToken &&\n        !cartInput.buyerIdentity?.customerAccessToken\n      ) {\n        if (cartInput.buyerIdentity == null) {\n          cartInput.buyerIdentity = {};\n        }\n        cartInput.buyerIdentity.customerAccessToken = customerAccessToken;\n      }\n      onCartReadySend({\n        type: 'CART_CREATE',\n        payload: cartInput,\n      });\n    },\n    [countryCode, customerAccessToken, onCartReadySend]\n  );\n\n  // Delays the cart state in the context if the page is hydrating\n  // preventing suspense boundary errors.\n  const cartDisplayState = useDelayedStateUntilHydration(cartState);\n\n  const cartContextValue = useMemo<CartWithActions>(() => {\n    return {\n      ...(cartDisplayState?.context?.cart ?? {lines: [], attributes: []}),\n      status: transposeStatus(cartDisplayState.value),\n      error: cartDisplayState?.context?.errors,\n      totalQuantity: cartDisplayState?.context?.cart?.totalQuantity ?? 0,\n      cartCreate,\n      linesAdd(lines: CartLineInput[]) {\n        if (cartDisplayState?.context?.cart?.id) {\n          onCartReadySend({\n            type: 'CARTLINE_ADD',\n            payload: {lines},\n          });\n        } else {\n          cartCreate({lines});\n        }\n      },\n      linesRemove(lines: string[]) {\n        onCartReadySend({\n          type: 'CARTLINE_REMOVE',\n          payload: {\n            lines,\n          },\n        });\n      },\n      linesUpdate(lines: CartLineUpdateInput[]) {\n        onCartReadySend({\n          type: 'CARTLINE_UPDATE',\n          payload: {\n            lines,\n          },\n        });\n      },\n      noteUpdate(note: MutationCartNoteUpdateArgs['note']) {\n        onCartReadySend({\n          type: 'NOTE_UPDATE',\n          payload: {\n            note,\n          },\n        });\n      },\n      buyerIdentityUpdate(buyerIdentity: CartBuyerIdentityInput) {\n        onCartReadySend({\n          type: 'BUYER_IDENTITY_UPDATE',\n          payload: {\n            buyerIdentity,\n          },\n        });\n      },\n      cartAttributesUpdate(attributes: AttributeInput[]) {\n        onCartReadySend({\n          type: 'CART_ATTRIBUTES_UPDATE',\n          payload: {\n            attributes,\n          },\n        });\n      },\n      discountCodesUpdate(discountCodes: string[]) {\n        onCartReadySend({\n          type: 'DISCOUNT_CODES_UPDATE',\n          payload: {\n            discountCodes,\n          },\n        });\n      },\n      cartFragment,\n    };\n  }, [\n    cartCreate,\n    cartDisplayState?.context?.cart,\n    cartDisplayState?.context?.errors,\n    cartDisplayState.value,\n    cartFragment,\n    onCartReadySend,\n  ]);\n\n  return (\n    <CartContext.Provider value={cartContextValue}>\n      {children}\n    </CartContext.Provider>\n  );\n}\n\nfunction transposeStatus(\n  status: CartMachineTypeState['value']\n): CartWithActions['status'] {\n  switch (status) {\n    case 'uninitialized':\n    case 'initializationError':\n      return 'uninitialized';\n    case 'idle':\n    case 'cartCompleted':\n    case 'error':\n      return 'idle';\n    case 'cartFetching':\n      return 'fetching';\n    case 'cartCreating':\n      return 'creating';\n    case 'cartLineAdding':\n    case 'cartLineRemoving':\n    case 'cartLineUpdating':\n    case 'noteUpdating':\n    case 'buyerIdentityUpdating':\n    case 'cartAttributesUpdating':\n    case 'discountCodesUpdating':\n      return 'updating';\n  }\n}\n\n/**\n * Delays a state update until hydration finishes. Useful for preventing suspense boundaries errors when updating a context\n * @remarks this uses startTransition and waits for it to finish.\n */\nfunction useDelayedStateUntilHydration<T>(state: T) {\n  const [isPending, startTransition] = useTransition();\n  const [delayedState, setDelayedState] = useState(state);\n\n  const firstTimePending = useRef(false);\n  if (isPending) {\n    firstTimePending.current = true;\n  }\n\n  const firstTimePendingFinished = useRef(false);\n  if (!isPending && firstTimePending.current) {\n    firstTimePendingFinished.current = true;\n  }\n\n  useEffect(() => {\n    startTransition(() => {\n      if (!firstTimePendingFinished.current) {\n        setDelayedState(state);\n      }\n    });\n  }, [state]);\n\n  const displayState = firstTimePendingFinished.current ? state : delayedState;\n\n  return displayState;\n}\n\n/** Check for storage availability funciton obtained from\n * https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API\n */\nexport function storageAvailable(type: 'localStorage' | 'sessionStorage') {\n  let storage;\n  try {\n    storage = window[type];\n    const x = '__storage_test__';\n    storage.setItem(x, x);\n    storage.removeItem(x);\n    return true;\n  } catch (e) {\n    return (\n      e instanceof DOMException &&\n      // everything except Firefox\n      (e.code === 22 ||\n        // Firefox\n        e.code === 1014 ||\n        // test name field too, because code might not be present\n        // everything except Firefox\n        e.name === 'QuotaExceededError' ||\n        // Firefox\n        e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&\n      // acknowledge QuotaExceededError only if there's something already stored\n      storage &&\n      storage.length !== 0\n    );\n  }\n}\n\nfunction countryCodeNotUpdated(\n  context: CartMachineContext,\n  event: BuyerIdentityUpdateEvent\n) {\n  return (\n    event.payload.buyerIdentity.countryCode &&\n    context.cart?.buyerIdentity?.countryCode !==\n      event.payload.buyerIdentity.countryCode\n  );\n}\n"],"names":["CartContext","createContext","useCart","context","useContext","Error","CartProvider","children","numCartLines","onCreate","onLineAdd","onLineRemove","onLineUpdate","onNoteUpdate","onBuyerIdentityUpdate","onAttributesUpdate","onDiscountCodesUpdate","onCreateComplete","onLineAddComplete","onLineRemoveComplete","onLineUpdateComplete","onNoteUpdateComplete","onBuyerIdentityUpdateComplete","onAttributesUpdateComplete","onDiscountCodesUpdateComplete","data","cart","cartFragment","defaultCartFragment","customerAccessToken","countryCode","toUpperCase","prevCountryCode","setPrevCountryCode","useState","prevCustomerAccessToken","setPrevCustomerAccessToken","customerOverridesCountryCode","useRef","current","cartState","cartSend","useCartAPIStateMachine","onCartActionEntry","_","event","type","error","onCartActionOptimisticUI","lines","filter","line","id","payload","includes","map","updatedLine","find","quantity","onCartActionComplete","cartActionEvent","countryCodeNotUpdated","cartReady","cartCompleted","matches","countryChanged","value","buyerIdentity","errors","fetchingFromStorage","useEffect","storageAvailable","cartId","window","localStorage","getItem","CART_ID_STORAGE_KEY","console","warn","onCartReadySend","useCallback","cartEvent","setItem","removeItem","cartCreate","cartInput","cartDisplayState","useDelayedStateUntilHydration","cartContextValue","useMemo","attributes","status","transposeStatus","totalQuantity","linesAdd","linesRemove","linesUpdate","noteUpdate","note","buyerIdentityUpdate","cartAttributesUpdate","discountCodesUpdate","discountCodes","_jsx","state","isPending","startTransition","useTransition","delayedState","setDelayedState","firstTimePending","firstTimePendingFinished","displayState","storage","x","e","DOMException","code","name","length"],"mappings":"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"}
+{"version":3,"file":"CartProvider.mjs","sources":["../../src/CartProvider.tsx"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  useTransition,\n  createContext,\n  useContext,\n} from 'react';\nimport {\n  AttributeInput,\n  CartBuyerIdentityInput,\n  CartInput,\n  CartLineInput,\n  CartLineUpdateInput,\n  CountryCode,\n  Cart as CartType,\n  MutationCartNoteUpdateArgs,\n} from './storefront-api-types.js';\nimport {\n  BuyerIdentityUpdateEvent,\n  CartMachineContext,\n  CartMachineEvent,\n  CartMachineTypeState,\n  CartWithActions,\n} from './cart-types.js';\nimport {useCartAPIStateMachine} from './useCartAPIStateMachine.js';\nimport {CART_ID_STORAGE_KEY} from './cart-constants.js';\nimport {PartialDeep} from 'type-fest';\nimport {defaultCartFragment} from './cart-queries.js';\n\nexport const CartContext = createContext<CartWithActions | null>(null);\n\n/**\n * The `useCart` hook provides access to the cart object. It must be a descendent of a `CartProvider` component.\n */\nexport function useCart(): CartWithActions {\n  const context = useContext(CartContext);\n\n  if (!context) {\n    throw new Error('Expected a Cart Context, but no Cart Context was found');\n  }\n\n  return context;\n}\n\ntype CartProviderProps = {\n  /** Any `ReactNode` elements. */\n  children: React.ReactNode;\n  /**  Maximum number of cart lines to fetch. Defaults to 250 cart lines. */\n  numCartLines?: number;\n  /** A callback that is invoked when the process to create a cart begins, but before the cart is created in the Storefront API. */\n  onCreate?: () => void;\n  /** A callback that is invoked when the process to add a line item to the cart begins, but before the line item is added to the Storefront API. */\n  onLineAdd?: () => void;\n  /** A callback that is invoked when the process to remove a line item to the cart begins, but before the line item is removed from the Storefront API. */\n  onLineRemove?: () => void;\n  /** A callback that is invoked when the process to update a line item in the cart begins, but before the line item is updated in the Storefront API. */\n  onLineUpdate?: () => void;\n  /** A callback that is invoked when the process to add or update a note in the cart begins, but before the note is added or updated in the Storefront API. */\n  onNoteUpdate?: () => void;\n  /** A callback that is invoked when the process to update the buyer identity begins, but before the buyer identity is updated in the Storefront API. */\n  onBuyerIdentityUpdate?: () => void;\n  /** A callback that is invoked when the process to update the cart attributes begins, but before the attributes are updated in the Storefront API. */\n  onAttributesUpdate?: () => void;\n  /** A callback that is invoked when the process to update the cart discount codes begins, but before the discount codes are updated in the Storefront API. */\n  onDiscountCodesUpdate?: () => void;\n  /** A callback that is invoked when the process to create a cart completes */\n  onCreateComplete?: () => void;\n  /** A callback that is invoked when the process to add a line item to the cart completes */\n  onLineAddComplete?: () => void;\n  /** A callback that is invoked when the process to remove a line item to the cart completes */\n  onLineRemoveComplete?: () => void;\n  /** A callback that is invoked when the process to update a line item in the cart completes */\n  onLineUpdateComplete?: () => void;\n  /** A callback that is invoked when the process to add or update a note in the cart completes */\n  onNoteUpdateComplete?: () => void;\n  /** A callback that is invoked when the process to update the buyer identity completes */\n  onBuyerIdentityUpdateComplete?: () => void;\n  /** A callback that is invoked when the process to update the cart attributes completes */\n  onAttributesUpdateComplete?: () => void;\n  /** A callback that is invoked when the process to update the cart discount codes completes */\n  onDiscountCodesUpdateComplete?: () => void;\n  /** An object with fields that correspond to the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart). */\n  data?: PartialDeep<CartType, {recurseIntoArrays: true}>;\n  /** A fragment used to query the Storefront API's [Cart object](https://shopify.dev/api/storefront/latest/objects/cart) for all queries and mutations. A default value is used if no argument is provided. */\n  cartFragment?: string;\n  /** A customer access token that's accessible on the server if there's a customer login. */\n  customerAccessToken?: CartBuyerIdentityInput['customerAccessToken'];\n  /** The ISO country code for i18n. */\n  countryCode?: CountryCode;\n};\n\n/**\n * The `CartProvider` component synchronizes the state of the Storefront API Cart and a customer's cart,\n * and allows you to more easily manipulate the cart by adding, removing, and updating it.\n * It could be placed at the root of your app so that your whole app is able to use the `useCart()` hook anywhere.\n *\n * There are props that trigger when a call to the Storefront API is made, such as `onLineAdd={}` when a line is added to the cart.\n * There are also props that trigger when a call to the Storefront API is completed, such as `onLineAddComplete={}` when the fetch request for adding a line to the cart completes.\n */\nexport function CartProvider({\n  children,\n  numCartLines,\n  onCreate,\n  onLineAdd,\n  onLineRemove,\n  onLineUpdate,\n  onNoteUpdate,\n  onBuyerIdentityUpdate,\n  onAttributesUpdate,\n  onDiscountCodesUpdate,\n  onCreateComplete,\n  onLineAddComplete,\n  onLineRemoveComplete,\n  onLineUpdateComplete,\n  onNoteUpdateComplete,\n  onBuyerIdentityUpdateComplete,\n  onAttributesUpdateComplete,\n  onDiscountCodesUpdateComplete,\n  data: cart,\n  cartFragment = defaultCartFragment,\n  customerAccessToken,\n  countryCode = 'US',\n}: CartProviderProps): JSX.Element {\n  if (countryCode) countryCode = countryCode.toUpperCase() as CountryCode;\n  const [prevCountryCode, setPrevCountryCode] = useState(countryCode);\n  const [prevCustomerAccessToken, setPrevCustomerAccessToken] =\n    useState(customerAccessToken);\n  const customerOverridesCountryCode = useRef(false);\n\n  if (\n    prevCountryCode !== countryCode ||\n    prevCustomerAccessToken !== customerAccessToken\n  ) {\n    setPrevCountryCode(countryCode);\n    setPrevCustomerAccessToken(customerAccessToken);\n    customerOverridesCountryCode.current = false;\n  }\n\n  const [cartState, cartSend] = useCartAPIStateMachine({\n    numCartLines,\n    data: cart,\n    cartFragment,\n    countryCode,\n    onCartActionEntry(_, event) {\n      try {\n        switch (event.type) {\n          case 'CART_CREATE':\n            return onCreate?.();\n          case 'CARTLINE_ADD':\n            return onLineAdd?.();\n          case 'CARTLINE_REMOVE':\n            return onLineRemove?.();\n          case 'CARTLINE_UPDATE':\n            return onLineUpdate?.();\n          case 'NOTE_UPDATE':\n            return onNoteUpdate?.();\n          case 'BUYER_IDENTITY_UPDATE':\n            return onBuyerIdentityUpdate?.();\n          case 'CART_ATTRIBUTES_UPDATE':\n            return onAttributesUpdate?.();\n          case 'DISCOUNT_CODES_UPDATE':\n            return onDiscountCodesUpdate?.();\n        }\n      } catch (error) {\n        console.error('Cart entry action failed', error);\n      }\n    },\n    onCartActionOptimisticUI(context, event) {\n      if (!context.cart) return {...context};\n      switch (event.type) {\n        case 'CARTLINE_REMOVE':\n          return {\n            ...context,\n            cart: {\n              ...context.cart,\n              lines: context?.cart?.lines?.filter(\n                (line) => line?.id && !event.payload.lines.includes(line?.id)\n              ),\n            },\n          };\n        case 'CARTLINE_UPDATE':\n          return {\n            ...context,\n            cart: {\n              ...context.cart,\n              lines: context?.cart?.lines?.map((line) => {\n                const updatedLine = event.payload.lines.find(\n                  ({id}) => id === line?.id\n                );\n\n                if (updatedLine && updatedLine.quantity) {\n                  return {\n                    ...line,\n                    quantity: updatedLine.quantity,\n                  };\n                }\n\n                return line;\n              }),\n            },\n          };\n      }\n      return {...context};\n    },\n    onCartActionComplete(context, event) {\n      const cartActionEvent = event.payload.cartActionEvent;\n      try {\n        switch (event.type) {\n          case 'RESOLVE':\n            switch (cartActionEvent.type) {\n              case 'CART_CREATE':\n                return onCreateComplete?.();\n              case 'CARTLINE_ADD':\n                return onLineAddComplete?.();\n              case 'CARTLINE_REMOVE':\n                return onLineRemoveComplete?.();\n              case 'CARTLINE_UPDATE':\n                return onLineUpdateComplete?.();\n              case 'NOTE_UPDATE':\n                return onNoteUpdateComplete?.();\n              case 'BUYER_IDENTITY_UPDATE':\n                if (countryCodeNotUpdated(context, cartActionEvent)) {\n                  customerOverridesCountryCode.current = true;\n                }\n                return onBuyerIdentityUpdateComplete?.();\n              case 'CART_ATTRIBUTES_UPDATE':\n                return onAttributesUpdateComplete?.();\n              case 'DISCOUNT_CODES_UPDATE':\n                return onDiscountCodesUpdateComplete?.();\n            }\n        }\n      } catch (error) {\n        console.error('onCartActionComplete failed', error);\n      }\n    },\n  });\n\n  const cartReady = useRef(false);\n  const cartCompleted = cartState.matches('cartCompleted');\n\n  const countryChanged =\n    (cartState.value === 'idle' ||\n      cartState.value === 'error' ||\n      cartState.value === 'cartCompleted') &&\n    countryCode !== cartState?.context?.cart?.buyerIdentity?.countryCode &&\n    !cartState.context.errors;\n\n  const fetchingFromStorage = useRef(false);\n\n  /**\n   * Initializes cart with priority in this order:\n   * 1. cart props\n   * 2. localStorage cartId\n   */\n  useEffect(() => {\n    if (!cartReady.current && !fetchingFromStorage.current) {\n      if (!cart && storageAvailable('localStorage')) {\n        fetchingFromStorage.current = true;\n        try {\n          const cartId = window.localStorage.getItem(CART_ID_STORAGE_KEY);\n          if (cartId) {\n            cartSend({type: 'CART_FETCH', payload: {cartId}});\n          }\n        } catch (error) {\n          console.warn('error fetching cartId');\n          console.warn(error);\n        }\n      }\n      cartReady.current = true;\n    }\n  }, [cart, cartReady, cartSend]);\n\n  // Update cart country code if cart and props countryCode's as different\n  useEffect(() => {\n    if (!countryChanged || customerOverridesCountryCode.current) return;\n    cartSend({\n      type: 'BUYER_IDENTITY_UPDATE',\n      payload: {buyerIdentity: {countryCode, customerAccessToken}},\n    });\n  }, [\n    countryCode,\n    customerAccessToken,\n    countryChanged,\n    customerOverridesCountryCode,\n    cartSend,\n  ]);\n\n  // send cart events when ready\n  const onCartReadySend = useCallback(\n    (cartEvent: CartMachineEvent) => {\n      if (!cartReady.current) {\n        return console.warn(\"Cart isn't ready yet\");\n      }\n      cartSend(cartEvent);\n    },\n    [cartSend]\n  );\n\n  // save cart id to local storage\n  useEffect(() => {\n    if (cartState?.context?.cart?.id && storageAvailable('localStorage')) {\n      try {\n        window.localStorage.setItem(\n          CART_ID_STORAGE_KEY,\n          cartState.context.cart?.id\n        );\n      } catch (error) {\n        console.warn('Failed to save cartId to localStorage', error);\n      }\n    }\n  }, [cartState?.context?.cart?.id]);\n\n  // delete cart from local storage if cart fetched has been completed\n  useEffect(() => {\n    if (cartCompleted && storageAvailable('localStorage')) {\n      try {\n        window.localStorage.removeItem(CART_ID_STORAGE_KEY);\n      } catch (error) {\n        console.warn('Failed to delete cartId from localStorage', error);\n      }\n    }\n  }, [cartCompleted]);\n\n  const cartCreate = useCallback(\n    (cartInput: CartInput) => {\n      if (countryCode && !cartInput.buyerIdentity?.countryCode) {\n        if (cartInput.buyerIdentity == null) {\n          cartInput.buyerIdentity = {};\n        }\n        cartInput.buyerIdentity.countryCode = countryCode;\n      }\n\n      if (\n        customerAccessToken &&\n        !cartInput.buyerIdentity?.customerAccessToken\n      ) {\n        if (cartInput.buyerIdentity == null) {\n          cartInput.buyerIdentity = {};\n        }\n        cartInput.buyerIdentity.customerAccessToken = customerAccessToken;\n      }\n      onCartReadySend({\n        type: 'CART_CREATE',\n        payload: cartInput,\n      });\n    },\n    [countryCode, customerAccessToken, onCartReadySend]\n  );\n\n  // Delays the cart state in the context if the page is hydrating\n  // preventing suspense boundary errors.\n  const cartDisplayState = useDelayedStateUntilHydration(cartState);\n\n  const cartContextValue = useMemo<CartWithActions>(() => {\n    return {\n      ...(cartDisplayState?.context?.cart ?? {lines: [], attributes: []}),\n      status: transposeStatus(cartDisplayState.value),\n      error: cartDisplayState?.context?.errors,\n      totalQuantity: cartDisplayState?.context?.cart?.totalQuantity ?? 0,\n      cartCreate,\n      linesAdd(lines: CartLineInput[]): void {\n        if (cartDisplayState?.context?.cart?.id) {\n          onCartReadySend({\n            type: 'CARTLINE_ADD',\n            payload: {lines},\n          });\n        } else {\n          cartCreate({lines});\n        }\n      },\n      linesRemove(lines: string[]): void {\n        onCartReadySend({\n          type: 'CARTLINE_REMOVE',\n          payload: {\n            lines,\n          },\n        });\n      },\n      linesUpdate(lines: CartLineUpdateInput[]): void {\n        onCartReadySend({\n          type: 'CARTLINE_UPDATE',\n          payload: {\n            lines,\n          },\n        });\n      },\n      noteUpdate(note: MutationCartNoteUpdateArgs['note']): void {\n        onCartReadySend({\n          type: 'NOTE_UPDATE',\n          payload: {\n            note,\n          },\n        });\n      },\n      buyerIdentityUpdate(buyerIdentity: CartBuyerIdentityInput): void {\n        onCartReadySend({\n          type: 'BUYER_IDENTITY_UPDATE',\n          payload: {\n            buyerIdentity,\n          },\n        });\n      },\n      cartAttributesUpdate(attributes: AttributeInput[]): void {\n        onCartReadySend({\n          type: 'CART_ATTRIBUTES_UPDATE',\n          payload: {\n            attributes,\n          },\n        });\n      },\n      discountCodesUpdate(discountCodes: string[]): void {\n        onCartReadySend({\n          type: 'DISCOUNT_CODES_UPDATE',\n          payload: {\n            discountCodes,\n          },\n        });\n      },\n      cartFragment,\n    };\n  }, [\n    cartCreate,\n    cartDisplayState?.context?.cart,\n    cartDisplayState?.context?.errors,\n    cartDisplayState.value,\n    cartFragment,\n    onCartReadySend,\n  ]);\n\n  return (\n    <CartContext.Provider value={cartContextValue}>\n      {children}\n    </CartContext.Provider>\n  );\n}\n\nfunction transposeStatus(\n  status: CartMachineTypeState['value']\n): CartWithActions['status'] {\n  switch (status) {\n    case 'uninitialized':\n    case 'initializationError':\n      return 'uninitialized';\n    case 'idle':\n    case 'cartCompleted':\n    case 'error':\n      return 'idle';\n    case 'cartFetching':\n      return 'fetching';\n    case 'cartCreating':\n      return 'creating';\n    case 'cartLineAdding':\n    case 'cartLineRemoving':\n    case 'cartLineUpdating':\n    case 'noteUpdating':\n    case 'buyerIdentityUpdating':\n    case 'cartAttributesUpdating':\n    case 'discountCodesUpdating':\n      return 'updating';\n  }\n}\n\n/**\n * Delays a state update until hydration finishes. Useful for preventing suspense boundaries errors when updating a context\n * @remarks this uses startTransition and waits for it to finish.\n */\nfunction useDelayedStateUntilHydration<T>(state: T): T {\n  const [isPending, startTransition] = useTransition();\n  const [delayedState, setDelayedState] = useState(state);\n\n  const firstTimePending = useRef(false);\n  if (isPending) {\n    firstTimePending.current = true;\n  }\n\n  const firstTimePendingFinished = useRef(false);\n  if (!isPending && firstTimePending.current) {\n    firstTimePendingFinished.current = true;\n  }\n\n  useEffect(() => {\n    startTransition(() => {\n      if (!firstTimePendingFinished.current) {\n        setDelayedState(state);\n      }\n    });\n  }, [state]);\n\n  const displayState = firstTimePendingFinished.current ? state : delayedState;\n\n  return displayState;\n}\n\n/** Check for storage availability funciton obtained from\n * https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API\n */\nexport function storageAvailable(\n  type: 'localStorage' | 'sessionStorage'\n): boolean {\n  let storage;\n  try {\n    storage = window[type];\n    const x = '__storage_test__';\n    storage.setItem(x, x);\n    storage.removeItem(x);\n    return true;\n  } catch (e) {\n    return !!(\n      e instanceof DOMException &&\n      // everything except Firefox\n      (e.code === 22 ||\n        // Firefox\n        e.code === 1014 ||\n        // test name field too, because code might not be present\n        // everything except Firefox\n        e.name === 'QuotaExceededError' ||\n        // Firefox\n        e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&\n      // acknowledge QuotaExceededError only if there's something already stored\n      storage &&\n      storage.length !== 0\n    );\n  }\n}\n\nfunction countryCodeNotUpdated(\n  context: CartMachineContext,\n  event: BuyerIdentityUpdateEvent\n): boolean {\n  return !!(\n    event.payload.buyerIdentity.countryCode &&\n    context.cart?.buyerIdentity?.countryCode !==\n      event.payload.buyerIdentity.countryCode\n  );\n}\n"],"names":["_b","_a","_d","_c"],"mappings":"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"}

package/dist/node-dev/ExternalVideo.js

@@ -1,8 +1,7 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 function ExternalVideo(props) {
-  var _a, _b;
   const {
     data,
     options,
@@ -24,16 +23,19 @@ function ExternalVideo(props) {
     }
     finalUrl = urlObject.toString();
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("iframe", {
-    ...passthroughProps,
-    id: id != null ? id : data.embedUrl,
-    title: (_b = (_a = data.alt) != null ? _a : data.id) != null ? _b : "external video",
-    frameBorder,
-    allow,
-    allowFullScreen,
-    src: finalUrl,
-    loading
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "iframe",
+    {
+      ...passthroughProps,
+      id: id ?? data.embedUrl,
+      title: data.alt ?? data.id ?? "external video",
+      frameBorder,
+      allow,
+      allowFullScreen,
+      src: finalUrl,
+      loading
+    }
+  );
 }
 exports.ExternalVideo = ExternalVideo;
 //# sourceMappingURL=ExternalVideo.js.map

package/dist/node-dev/ExternalVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalVideo.js","sources":["../../src/ExternalVideo.tsx"],"sourcesContent":["import type {ExternalVideo as ExternalVideoType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ninterface BaseProps {\n  /**\n   * An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).\n   */\n  data: PartialDeep<ExternalVideoType, {recurseIntoArrays: true}>;\n  /** An object containing the options available for either\n   * [YouTube](https://developers.google.com/youtube/player_parameters#Parameters) or\n   * [Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters).\n   */\n  options?: YouTube | Vimeo;\n}\n\ntype PropsWeControl = 'src';\n\nexport type ExternalVideoProps = Omit<\n  JSX.IntrinsicElements['iframe'],\n  PropsWeControl\n> &\n  BaseProps;\n\n/**\n * The `ExternalVideo` component renders an embedded video for the Storefront\n * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).\n */\nexport function ExternalVideo(props: ExternalVideoProps) {\n  const {\n    data,\n    options,\n    id = data.id,\n    frameBorder = '0',\n    allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',\n    allowFullScreen = true,\n    loading = 'lazy',\n    ...passthroughProps\n  } = props;\n\n  if (!data.embedUrl) {\n    throw new Error(`<ExternalVideo/> requires the 'embedUrl' property`);\n  }\n\n  let finalUrl: string = data.embedUrl;\n\n  if (options) {\n    const urlObject = new URL(data.embedUrl);\n    for (const key of Object.keys(options)) {\n      // @ts-expect-error https://github.com/microsoft/TypeScript/issues/32951\n      urlObject.searchParams.set(key, options[key]);\n    }\n    finalUrl = urlObject.toString();\n  }\n\n  return (\n    <iframe\n      {...passthroughProps}\n      id={id ?? data.embedUrl}\n      title={data.alt ?? data.id ?? 'external video'}\n      frameBorder={frameBorder}\n      allow={allow}\n      allowFullScreen={allowFullScreen}\n      src={finalUrl}\n      loading={loading}\n    ></iframe>\n  );\n}\n\ninterface YouTube {\n  autoplay?: 0 | 1;\n  cc_lang_pref?: string;\n  cc_load_policy?: 1;\n  color?: 'red' | 'white';\n  controls?: 0 | 1;\n  disablekb?: 0 | 1;\n  enablejsapi?: 0 | 1;\n  end?: number;\n  fs?: 0 | 1;\n  hl?: string;\n  iv_load_policy?: 1 | 3;\n  list?: string;\n  list_type?: 'playlist' | 'user_uploads';\n  loop?: 0 | 1;\n  modest_branding?: 1;\n  origin?: string;\n  playlist?: string;\n  plays_inline?: 0 | 1;\n  rel?: 0 | 1;\n  start?: number;\n  widget_referrer?: string;\n}\n\ntype VimeoBoolean = 0 | 1 | boolean;\n\ninterface Vimeo {\n  autopause?: VimeoBoolean;\n  autoplay?: VimeoBoolean;\n  background?: VimeoBoolean;\n  byline?: VimeoBoolean;\n  color?: string;\n  controls?: VimeoBoolean;\n  dnt?: VimeoBoolean;\n  loop?: VimeoBoolean;\n  muted?: VimeoBoolean;\n  pip?: VimeoBoolean;\n  playsinline?: VimeoBoolean;\n  portrait?: VimeoBoolean;\n  quality?: '240p' | '360p' | '540p' | '720p' | '1080p' | '2k' | '4k';\n  speed?: VimeoBoolean;\n  '#t'?: string;\n  texttrack?: string;\n  title?: VimeoBoolean;\n  transparent?: VimeoBoolean;\n}\n"],"names":["ExternalVideo","props","data","options","id","frameBorder","allow","allowFullScreen","loading","passthroughProps","embedUrl","Error","finalUrl","urlObject","URL","key","Object","keys","searchParams","set","toString","alt"],"mappings":";;;AA2BO,SAASA,cAAcC,OAA2B;;AACjD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,KAAKF,KAAKE;AAAAA,IACVC,cAAc;AAAA,IACdC,QAAQ;AAAA,IACRC,kBAAkB;AAAA,IAClBC,UAAU;AAAA,OACPC;AAAAA,EACDR,IAAAA;AAEA,MAAA,CAACC,KAAKQ,UAAU;AACZ,UAAA,IAAIC,MAAO,mDAAkD;AAAA,EACrE;AAEA,MAAIC,WAAmBV,KAAKQ;AAE5B,MAAIP,SAAS;AACX,UAAMU,YAAY,IAAIC,IAAIZ,KAAKQ,QAAQ;AACvC,eAAWK,OAAOC,OAAOC,KAAKd,OAAO,GAAG;AAEtCU,gBAAUK,aAAaC,IAAIJ,KAAKZ,QAAQY,IAAI;AAAA,IAC9C;AACAH,eAAWC,UAAUO;EACvB;AAEA,wCACE,UAAA;AAAA,IAAA,GACMX;AAAAA,IACJ,IAAIL,kBAAMF,KAAKQ;AAAAA,IACf,QAAOR,gBAAKmB,QAALnB,YAAYA,KAAKE,OAAjBF,YAAuB;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAKU;AAAAA,IACL;AAAA,EAAA,CACQ;AAEd;;"}
+{"version":3,"file":"ExternalVideo.js","sources":["../../src/ExternalVideo.tsx"],"sourcesContent":["import type {ExternalVideo as ExternalVideoType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ninterface ExternalVideoBaseProps {\n  /**\n   * An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).\n   */\n  data: PartialDeep<ExternalVideoType, {recurseIntoArrays: true}>;\n  /** An object containing the options available for either\n   * [YouTube](https://developers.google.com/youtube/player_parameters#Parameters) or\n   * [Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters).\n   */\n  options?: YouTube | Vimeo;\n}\n\nexport type ExternalVideoProps = Omit<JSX.IntrinsicElements['iframe'], 'src'> &\n  ExternalVideoBaseProps;\n\n/**\n * The `ExternalVideo` component renders an embedded video for the Storefront\n * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).\n */\nexport function ExternalVideo(props: ExternalVideoProps): JSX.Element {\n  const {\n    data,\n    options,\n    id = data.id,\n    frameBorder = '0',\n    allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',\n    allowFullScreen = true,\n    loading = 'lazy',\n    ...passthroughProps\n  } = props;\n\n  if (!data.embedUrl) {\n    throw new Error(`<ExternalVideo/> requires the 'embedUrl' property`);\n  }\n\n  let finalUrl: string = data.embedUrl;\n\n  if (options) {\n    const urlObject = new URL(data.embedUrl);\n    for (const key of Object.keys(options) as (keyof typeof options)[]) {\n      // @ts-expect-error https://github.com/microsoft/TypeScript/issues/32951\n      urlObject.searchParams.set(key, options[key]);\n    }\n    finalUrl = urlObject.toString();\n  }\n\n  return (\n    <iframe\n      {...passthroughProps}\n      id={id ?? data.embedUrl}\n      title={data.alt ?? data.id ?? 'external video'}\n      frameBorder={frameBorder}\n      allow={allow}\n      allowFullScreen={allowFullScreen}\n      src={finalUrl}\n      loading={loading}\n    ></iframe>\n  );\n}\n\ninterface YouTube {\n  autoplay?: 0 | 1;\n  cc_lang_pref?: string;\n  cc_load_policy?: 1;\n  color?: 'red' | 'white';\n  controls?: 0 | 1;\n  disablekb?: 0 | 1;\n  enablejsapi?: 0 | 1;\n  end?: number;\n  fs?: 0 | 1;\n  hl?: string;\n  iv_load_policy?: 1 | 3;\n  list?: string;\n  list_type?: 'playlist' | 'user_uploads';\n  loop?: 0 | 1;\n  modest_branding?: 1;\n  origin?: string;\n  playlist?: string;\n  plays_inline?: 0 | 1;\n  rel?: 0 | 1;\n  start?: number;\n  widget_referrer?: string;\n}\n\ntype VimeoBoolean = 0 | 1 | boolean;\n\ninterface Vimeo {\n  autopause?: VimeoBoolean;\n  autoplay?: VimeoBoolean;\n  background?: VimeoBoolean;\n  byline?: VimeoBoolean;\n  color?: string;\n  controls?: VimeoBoolean;\n  dnt?: VimeoBoolean;\n  loop?: VimeoBoolean;\n  muted?: VimeoBoolean;\n  pip?: VimeoBoolean;\n  playsinline?: VimeoBoolean;\n  portrait?: VimeoBoolean;\n  quality?: '240p' | '360p' | '540p' | '720p' | '1080p' | '2k' | '4k';\n  speed?: VimeoBoolean;\n  '#t'?: string;\n  texttrack?: string;\n  title?: VimeoBoolean;\n  transparent?: VimeoBoolean;\n}\n"],"names":["jsx"],"mappings":";;;AAsBO,SAAS,cAAc,OAAwC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,KAAK,KAAK;AAAA,IACV,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,kBAAkB;AAAA,IAClB,UAAU;AAAA,IACV,GAAG;AAAA,EACD,IAAA;AAEA,MAAA,CAAC,KAAK,UAAU;AACZ,UAAA,IAAI,MAAM,mDAAmD;AAAA,EACrE;AAEA,MAAI,WAAmB,KAAK;AAE5B,MAAI,SAAS;AACX,UAAM,YAAY,IAAI,IAAI,KAAK,QAAQ;AACvC,eAAW,OAAO,OAAO,KAAK,OAAO,GAA+B;AAElE,gBAAU,aAAa,IAAI,KAAK,QAAQ,GAAG,CAAC;AAAA,IAC9C;AACA,eAAW,UAAU;EACvB;AAGE,SAAAA,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAI,MAAM,KAAK;AAAA,MACf,OAAO,KAAK,OAAO,KAAK,MAAM;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,IAAA;AAAA,EAAA;AAGN;;"}

package/dist/node-dev/ExternalVideo.mjs

@@ -1,6 +1,5 @@
 import { jsx } from "react/jsx-runtime";
 function ExternalVideo(props) {
-  var _a, _b;
   const {
     data,
     options,
@@ -22,16 +21,19 @@ function ExternalVideo(props) {
     }
     finalUrl = urlObject.toString();
   }
-  return /* @__PURE__ */ jsx("iframe", {
-    ...passthroughProps,
-    id: id != null ? id : data.embedUrl,
-    title: (_b = (_a = data.alt) != null ? _a : data.id) != null ? _b : "external video",
-    frameBorder,
-    allow,
-    allowFullScreen,
-    src: finalUrl,
-    loading
-  });
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      ...passthroughProps,
+      id: id ?? data.embedUrl,
+      title: data.alt ?? data.id ?? "external video",
+      frameBorder,
+      allow,
+      allowFullScreen,
+      src: finalUrl,
+      loading
+    }
+  );
 }
 export {
   ExternalVideo

package/dist/node-dev/ExternalVideo.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalVideo.mjs","sources":["../../src/ExternalVideo.tsx"],"sourcesContent":["import type {ExternalVideo as ExternalVideoType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ninterface BaseProps {\n  /**\n   * An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).\n   */\n  data: PartialDeep<ExternalVideoType, {recurseIntoArrays: true}>;\n  /** An object containing the options available for either\n   * [YouTube](https://developers.google.com/youtube/player_parameters#Parameters) or\n   * [Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters).\n   */\n  options?: YouTube | Vimeo;\n}\n\ntype PropsWeControl = 'src';\n\nexport type ExternalVideoProps = Omit<\n  JSX.IntrinsicElements['iframe'],\n  PropsWeControl\n> &\n  BaseProps;\n\n/**\n * The `ExternalVideo` component renders an embedded video for the Storefront\n * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).\n */\nexport function ExternalVideo(props: ExternalVideoProps) {\n  const {\n    data,\n    options,\n    id = data.id,\n    frameBorder = '0',\n    allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',\n    allowFullScreen = true,\n    loading = 'lazy',\n    ...passthroughProps\n  } = props;\n\n  if (!data.embedUrl) {\n    throw new Error(`<ExternalVideo/> requires the 'embedUrl' property`);\n  }\n\n  let finalUrl: string = data.embedUrl;\n\n  if (options) {\n    const urlObject = new URL(data.embedUrl);\n    for (const key of Object.keys(options)) {\n      // @ts-expect-error https://github.com/microsoft/TypeScript/issues/32951\n      urlObject.searchParams.set(key, options[key]);\n    }\n    finalUrl = urlObject.toString();\n  }\n\n  return (\n    <iframe\n      {...passthroughProps}\n      id={id ?? data.embedUrl}\n      title={data.alt ?? data.id ?? 'external video'}\n      frameBorder={frameBorder}\n      allow={allow}\n      allowFullScreen={allowFullScreen}\n      src={finalUrl}\n      loading={loading}\n    ></iframe>\n  );\n}\n\ninterface YouTube {\n  autoplay?: 0 | 1;\n  cc_lang_pref?: string;\n  cc_load_policy?: 1;\n  color?: 'red' | 'white';\n  controls?: 0 | 1;\n  disablekb?: 0 | 1;\n  enablejsapi?: 0 | 1;\n  end?: number;\n  fs?: 0 | 1;\n  hl?: string;\n  iv_load_policy?: 1 | 3;\n  list?: string;\n  list_type?: 'playlist' | 'user_uploads';\n  loop?: 0 | 1;\n  modest_branding?: 1;\n  origin?: string;\n  playlist?: string;\n  plays_inline?: 0 | 1;\n  rel?: 0 | 1;\n  start?: number;\n  widget_referrer?: string;\n}\n\ntype VimeoBoolean = 0 | 1 | boolean;\n\ninterface Vimeo {\n  autopause?: VimeoBoolean;\n  autoplay?: VimeoBoolean;\n  background?: VimeoBoolean;\n  byline?: VimeoBoolean;\n  color?: string;\n  controls?: VimeoBoolean;\n  dnt?: VimeoBoolean;\n  loop?: VimeoBoolean;\n  muted?: VimeoBoolean;\n  pip?: VimeoBoolean;\n  playsinline?: VimeoBoolean;\n  portrait?: VimeoBoolean;\n  quality?: '240p' | '360p' | '540p' | '720p' | '1080p' | '2k' | '4k';\n  speed?: VimeoBoolean;\n  '#t'?: string;\n  texttrack?: string;\n  title?: VimeoBoolean;\n  transparent?: VimeoBoolean;\n}\n"],"names":["ExternalVideo","props","data","options","id","frameBorder","allow","allowFullScreen","loading","passthroughProps","embedUrl","Error","finalUrl","urlObject","URL","key","Object","keys","searchParams","set","toString","alt"],"mappings":";AA2BO,SAASA,cAAcC,OAA2B;;AACjD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,KAAKF,KAAKE;AAAAA,IACVC,cAAc;AAAA,IACdC,QAAQ;AAAA,IACRC,kBAAkB;AAAA,IAClBC,UAAU;AAAA,OACPC;AAAAA,EACDR,IAAAA;AAEA,MAAA,CAACC,KAAKQ,UAAU;AACZ,UAAA,IAAIC,MAAO,mDAAkD;AAAA,EACrE;AAEA,MAAIC,WAAmBV,KAAKQ;AAE5B,MAAIP,SAAS;AACX,UAAMU,YAAY,IAAIC,IAAIZ,KAAKQ,QAAQ;AACvC,eAAWK,OAAOC,OAAOC,KAAKd,OAAO,GAAG;AAEtCU,gBAAUK,aAAaC,IAAIJ,KAAKZ,QAAQY,IAAI;AAAA,IAC9C;AACAH,eAAWC,UAAUO;EACvB;AAEA,6BACE,UAAA;AAAA,IAAA,GACMX;AAAAA,IACJ,IAAIL,kBAAMF,KAAKQ;AAAAA,IACf,QAAOR,gBAAKmB,QAALnB,YAAYA,KAAKE,OAAjBF,YAAuB;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAKU;AAAAA,IACL;AAAA,EAAA,CACQ;AAEd;"}
+{"version":3,"file":"ExternalVideo.mjs","sources":["../../src/ExternalVideo.tsx"],"sourcesContent":["import type {ExternalVideo as ExternalVideoType} from './storefront-api-types.js';\nimport type {PartialDeep} from 'type-fest';\n\ninterface ExternalVideoBaseProps {\n  /**\n   * An object with fields that correspond to the Storefront API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).\n   */\n  data: PartialDeep<ExternalVideoType, {recurseIntoArrays: true}>;\n  /** An object containing the options available for either\n   * [YouTube](https://developers.google.com/youtube/player_parameters#Parameters) or\n   * [Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters).\n   */\n  options?: YouTube | Vimeo;\n}\n\nexport type ExternalVideoProps = Omit<JSX.IntrinsicElements['iframe'], 'src'> &\n  ExternalVideoBaseProps;\n\n/**\n * The `ExternalVideo` component renders an embedded video for the Storefront\n * API's [ExternalVideo object](https://shopify.dev/api/storefront/reference/products/externalvideo).\n */\nexport function ExternalVideo(props: ExternalVideoProps): JSX.Element {\n  const {\n    data,\n    options,\n    id = data.id,\n    frameBorder = '0',\n    allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',\n    allowFullScreen = true,\n    loading = 'lazy',\n    ...passthroughProps\n  } = props;\n\n  if (!data.embedUrl) {\n    throw new Error(`<ExternalVideo/> requires the 'embedUrl' property`);\n  }\n\n  let finalUrl: string = data.embedUrl;\n\n  if (options) {\n    const urlObject = new URL(data.embedUrl);\n    for (const key of Object.keys(options) as (keyof typeof options)[]) {\n      // @ts-expect-error https://github.com/microsoft/TypeScript/issues/32951\n      urlObject.searchParams.set(key, options[key]);\n    }\n    finalUrl = urlObject.toString();\n  }\n\n  return (\n    <iframe\n      {...passthroughProps}\n      id={id ?? data.embedUrl}\n      title={data.alt ?? data.id ?? 'external video'}\n      frameBorder={frameBorder}\n      allow={allow}\n      allowFullScreen={allowFullScreen}\n      src={finalUrl}\n      loading={loading}\n    ></iframe>\n  );\n}\n\ninterface YouTube {\n  autoplay?: 0 | 1;\n  cc_lang_pref?: string;\n  cc_load_policy?: 1;\n  color?: 'red' | 'white';\n  controls?: 0 | 1;\n  disablekb?: 0 | 1;\n  enablejsapi?: 0 | 1;\n  end?: number;\n  fs?: 0 | 1;\n  hl?: string;\n  iv_load_policy?: 1 | 3;\n  list?: string;\n  list_type?: 'playlist' | 'user_uploads';\n  loop?: 0 | 1;\n  modest_branding?: 1;\n  origin?: string;\n  playlist?: string;\n  plays_inline?: 0 | 1;\n  rel?: 0 | 1;\n  start?: number;\n  widget_referrer?: string;\n}\n\ntype VimeoBoolean = 0 | 1 | boolean;\n\ninterface Vimeo {\n  autopause?: VimeoBoolean;\n  autoplay?: VimeoBoolean;\n  background?: VimeoBoolean;\n  byline?: VimeoBoolean;\n  color?: string;\n  controls?: VimeoBoolean;\n  dnt?: VimeoBoolean;\n  loop?: VimeoBoolean;\n  muted?: VimeoBoolean;\n  pip?: VimeoBoolean;\n  playsinline?: VimeoBoolean;\n  portrait?: VimeoBoolean;\n  quality?: '240p' | '360p' | '540p' | '720p' | '1080p' | '2k' | '4k';\n  speed?: VimeoBoolean;\n  '#t'?: string;\n  texttrack?: string;\n  title?: VimeoBoolean;\n  transparent?: VimeoBoolean;\n}\n"],"names":[],"mappings":";AAsBO,SAAS,cAAc,OAAwC;AAC9D,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,KAAK,KAAK;AAAA,IACV,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,kBAAkB;AAAA,IAClB,UAAU;AAAA,IACV,GAAG;AAAA,EACD,IAAA;AAEA,MAAA,CAAC,KAAK,UAAU;AACZ,UAAA,IAAI,MAAM,mDAAmD;AAAA,EACrE;AAEA,MAAI,WAAmB,KAAK;AAE5B,MAAI,SAAS;AACX,UAAM,YAAY,IAAI,IAAI,KAAK,QAAQ;AACvC,eAAW,OAAO,OAAO,KAAK,OAAO,GAA+B;AAElE,gBAAU,aAAa,IAAI,KAAK,QAAQ,GAAG,CAAC;AAAA,IAC9C;AACA,eAAW,UAAU;EACvB;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,IAAI,MAAM,KAAK;AAAA,MACf,OAAO,KAAK,OAAO,KAAK,MAAM;AAAA,MAC9B;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/node-dev/Image.js

@@ -1,7 +1,7 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const imageSize = require("./image-size.js");
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const imageSize = require("./image-size.js");
 function Image({
   data,
   width,
@@ -13,20 +13,18 @@ function Image({
   decoding = "async",
   ...rest
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
   if (!data.url) {
-    const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${(_a = data.id) != null ? _a : "no ID provided"}`;
+    const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${data.id ?? "no ID provided"}`;
     {
       throw new Error(missingUrlError);
     }
   }
   if (!data.altText && !rest.alt) {
-    console.warn(`<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${(_b = data.id) != null ? _b : data.url}`);
+    console.warn(
+      `<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${data.id ?? data.url}`
+    );
   }
-  const {
-    width: imgElementWidth,
-    height: imgElementHeight
-  } = imageSize.getShopifyImageDimensions({
+  const { width: imgElementWidth, height: imgElementHeight } = imageSize.getShopifyImageDimensions({
     data,
     loaderOptions,
     elementProps: {
@@ -35,7 +33,9 @@ function Image({
     }
   });
   if (!imgElementWidth || !imgElementHeight) {
-    console.warn(`<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${(_c = data.id) != null ? _c : data.url}`);
+    console.warn(
+      `<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${data.id ?? data.url}`
+    );
   }
   let finalSrc = data.url;
   if (loader) {
@@ -46,11 +46,13 @@ function Image({
       height: imgElementHeight
     });
     if (typeof finalSrc !== "string" || !finalSrc) {
-      throw new Error(`<Image/>: 'loader' did not return a valid string. Image: ${(_d = data.id) != null ? _d : data.url}`);
+      throw new Error(
+        `<Image/>: 'loader' did not return a valid string. Image: ${data.id ?? data.url}`
+      );
     }
   }
   const maxWidth = width && imgElementWidth && width < imgElementWidth ? width : imgElementWidth;
-  const finalSrcset = (_e = rest.srcSet) != null ? _e : internalImageSrcSet({
+  const finalSrcset = rest.srcSet ?? internalImageSrcSet({
     ...loaderOptions,
     widths,
     src: data.url,
@@ -58,17 +60,20 @@ function Image({
     height: imgElementHeight,
     loader
   });
-  return /* @__PURE__ */ jsxRuntime.jsx("img", {
-    id: (_f = data.id) != null ? _f : "",
-    alt: (_h = (_g = data.altText) != null ? _g : rest.alt) != null ? _h : "",
-    loading: loading != null ? loading : "lazy",
-    ...rest,
-    src: finalSrc,
-    width: imgElementWidth != null ? imgElementWidth : void 0,
-    height: imgElementHeight != null ? imgElementHeight : void 0,
-    srcSet: finalSrcset,
-    decoding
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      id: data.id ?? "",
+      alt: data.altText ?? rest.alt ?? "",
+      loading: loading ?? "lazy",
+      ...rest,
+      src: finalSrc,
+      width: imgElementWidth ?? void 0,
+      height: imgElementHeight ?? void 0,
+      srcSet: finalSrcset,
+      decoding
+    }
+  );
 }
 function internalImageSrcSet({
   src,
@@ -81,7 +86,9 @@ function internalImageSrcSet({
 }) {
   const hasCustomWidths = widths && Array.isArray(widths);
   if (hasCustomWidths && widths.some((size) => isNaN(size))) {
-    throw new Error(`<Image/>: the 'widths' must be an array of numbers. Image: ${src}`);
+    throw new Error(
+      `<Image/>: the 'widths' must be an array of numbers. Image: ${src}`
+    );
   }
   let aspectRatio = 1;
   if (width && height) {
@@ -92,13 +99,17 @@ function internalImageSrcSet({
     setSizes = imageSize.IMG_SRC_SET_SIZES.filter((size) => size <= width);
   }
   const srcGenerator = loader ? loader : imageSize.addImageSizeParametersToUrl;
-  return setSizes.map((size) => `${srcGenerator({
-    src,
-    width: size,
-    height: crop ? Number(size) * aspectRatio : void 0,
-    crop,
-    scale
-  })} ${size}w`).join(", ");
+  return setSizes.map(
+    (size) => `${srcGenerator({
+      src,
+      width: size,
+      // height is not applied if there is no crop
+      // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size
+      height: crop ? Number(size) * aspectRatio : void 0,
+      crop,
+      scale
+    })} ${size ?? ""}w`
+  ).join(", ");
 }
 exports.Image = Image;
 //# sourceMappingURL=Image.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../src/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getShopifyImageDimensions,\n  shopifyImageLoader,\n  addImageSizeParametersToUrl,\n  IMG_SRC_SET_SIZES,\n} from './image-size.js';\nimport type {Image as ImageType} from './storefront-api-types.js';\nimport type {PartialDeep, Simplify} from 'type-fest';\n\ntype HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nexport type ShopifyLoaderOptions = {\n  crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';\n  scale?: 2 | 3;\n  width?: HtmlImageProps['width'] | ImageType['width'];\n  height?: HtmlImageProps['height'] | ImageType['height'];\n};\nexport type ShopifyLoaderParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n  }\n>;\nexport type ShopifyImageProps = Omit<HtmlImageProps, 'src'> & {\n  /** An object with fields that correspond to the Storefront API's\n   * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).\n   * The `data` prop is required.\n   */\n  data: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n  /** A custom function that generates the image URL. Parameters passed in\n   * are `ShopifyLoaderParams`\n   */\n  loader?: (params: ShopifyLoaderParams) => string;\n  /** An object of `loader` function options. For example, if the `loader` function\n   * requires a `scale` option, then the value can be a property of the\n   * `loaderOptions` object (for example, `{scale: 2}`). The object shape is `ShopifyLoaderOptions`.\n   */\n  loaderOptions?: ShopifyLoaderOptions;\n  /**\n   * `src` isn't used, and should instead be passed as part of the `data` object\n   */\n  src?: never;\n  /**\n   * An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.\n   */\n  widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n};\n\n/**\n * The `Image` component renders an image for the Storefront API's\n * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.\n *\n * An image's width and height are determined using the following priority list:\n * 1. The width and height values for the `loaderOptions` prop\n * 2. The width and height values for bare props\n * 3. The width and height values for the `data` prop\n *\n * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the image's aspect ratio,\n * provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing\n * value will remain as `null`\n */\nexport function Image({\n  data,\n  width,\n  height,\n  loading,\n  loader = shopifyImageLoader,\n  loaderOptions,\n  widths,\n  decoding = 'async',\n  ...rest\n}: ShopifyImageProps) {\n  if (!data.url) {\n    const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${\n      data.id ?? 'no ID provided'\n    }`;\n\n    if (__HYDROGEN_DEV__) {\n      throw new Error(missingUrlError);\n    } else {\n      console.error(missingUrlError);\n    }\n\n    return null;\n  }\n\n  if (__HYDROGEN_DEV__ && !data.altText && !rest.alt) {\n    console.warn(\n      `<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  const {width: imgElementWidth, height: imgElementHeight} =\n    getShopifyImageDimensions({\n      data,\n      loaderOptions,\n      elementProps: {\n        width,\n        height,\n      },\n    });\n\n  if (__HYDROGEN_DEV__ && (!imgElementWidth || !imgElementHeight)) {\n    console.warn(\n      `<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  let finalSrc = data.url;\n\n  if (loader) {\n    finalSrc = loader({\n      ...loaderOptions,\n      src: data.url,\n      width: imgElementWidth,\n      height: imgElementHeight,\n    });\n    if (typeof finalSrc !== 'string' || !finalSrc) {\n      throw new Error(\n        `<Image/>: 'loader' did not return a valid string. Image: ${\n          data.id ?? data.url\n        }`\n      );\n    }\n  }\n\n  // determining what the intended width of the image is. For example, if the width is specified and lower than the image width, then that is the maximum image width\n  // to prevent generating a srcset with widths bigger than needed or to generate images that would distort because of being larger than original\n  const maxWidth =\n    width && imgElementWidth && width < imgElementWidth\n      ? width\n      : imgElementWidth;\n  const finalSrcset =\n    rest.srcSet ??\n    internalImageSrcSet({\n      ...loaderOptions,\n      widths,\n      src: data.url,\n      width: maxWidth,\n      height: imgElementHeight,\n      loader,\n    });\n\n  /* eslint-disable hydrogen/prefer-image-component */\n  return (\n    <img\n      id={data.id ?? ''}\n      alt={data.altText ?? rest.alt ?? ''}\n      loading={loading ?? 'lazy'}\n      {...rest}\n      src={finalSrc}\n      width={imgElementWidth ?? undefined}\n      height={imgElementHeight ?? undefined}\n      srcSet={finalSrcset}\n      decoding={decoding}\n    />\n  );\n  /* eslint-enable hydrogen/prefer-image-component */\n}\n\ntype InternalShopifySrcSetGeneratorsParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n    widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n    loader?: (params: ShopifyLoaderParams) => string;\n  }\n>;\nfunction internalImageSrcSet({\n  src,\n  width,\n  crop,\n  scale,\n  widths,\n  loader,\n  height,\n}: InternalShopifySrcSetGeneratorsParams) {\n  const hasCustomWidths = widths && Array.isArray(widths);\n  if (hasCustomWidths && widths.some((size) => isNaN(size as number))) {\n    throw new Error(\n      `<Image/>: the 'widths' must be an array of numbers. Image: ${src}`\n    );\n  }\n\n  let aspectRatio = 1;\n  if (width && height) {\n    aspectRatio = Number(height) / Number(width);\n  }\n\n  let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;\n  if (\n    !hasCustomWidths &&\n    width &&\n    width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]\n  ) {\n    setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);\n  }\n  const srcGenerator = loader ? loader : addImageSizeParametersToUrl;\n  return setSizes\n    .map(\n      (size) =>\n        `${srcGenerator({\n          src,\n          width: size,\n          // height is not applied if there is no crop\n          // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size\n          height: crop ? Number(size) * aspectRatio : undefined,\n          crop,\n          scale,\n        })} ${size}w`\n    )\n    .join(', ');\n}\n"],"names":["Image","data","width","height","loading","loader","shopifyImageLoader","loaderOptions","widths","decoding","rest","url","missingUrlError","id","Error","altText","alt","console","warn","imgElementWidth","imgElementHeight","getShopifyImageDimensions","elementProps","finalSrc","src","maxWidth","finalSrcset","srcSet","internalImageSrcSet","undefined","crop","scale","hasCustomWidths","Array","isArray","some","size","isNaN","aspectRatio","Number","setSizes","IMG_SRC_SET_SIZES","length","filter","srcGenerator","addImageSizeParametersToUrl","map","join"],"mappings":";;;;AA6DO,SAASA,MAAM;AAAA,EACpBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC,UAAAA;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,KACRC;AACc,GAAG;;AAChB,MAAA,CAACT,KAAKU,KAAK;AACPC,UAAAA,kBAAmB,kEACvBX,UAAKY,OAALZ,YAAW;AAGS;AACd,YAAA,IAAIa,MAAMF,eAAe;AAAA,IAGjC;AAAA,EAGF;AAEA,MAAwB,CAACX,KAAKc,WAAW,CAACL,KAAKM,KAAK;AAClDC,YAAQC,KACL,iIACCjB,UAAKY,OAALZ,YAAWA,KAAKU,KAChB;AAAA,EAEN;AAEM,QAAA;AAAA,IAACT,OAAOiB;AAAAA,IAAiBhB,QAAQiB;AAAAA,MACrCC,oCAA0B;AAAA,IACxBpB;AAAAA,IACAM;AAAAA,IACAe,cAAc;AAAA,MACZpB;AAAAA,MACAC;AAAAA,IACF;AAAA,EAAA,CACD;AAEH,MAAyB,CAACgB,mBAAmB,CAACC,kBAAmB;AAC/DH,YAAQC,KACL,wHACCjB,UAAKY,OAALZ,YAAWA,KAAKU,KAChB;AAAA,EAEN;AAEA,MAAIY,WAAWtB,KAAKU;AAEpB,MAAIN,QAAQ;AACVkB,eAAWlB,OAAO;AAAA,MAChB,GAAGE;AAAAA,MACHiB,KAAKvB,KAAKU;AAAAA,MACVT,OAAOiB;AAAAA,MACPhB,QAAQiB;AAAAA,IAAAA,CACT;AACD,QAAI,OAAOG,aAAa,YAAY,CAACA,UAAU;AAC7C,YAAM,IAAIT,MACP,6DACCb,UAAKY,OAALZ,YAAWA,KAAKU,KAChB;AAAA,IAEN;AAAA,EACF;AAIA,QAAMc,WACJvB,SAASiB,mBAAmBjB,QAAQiB,kBAChCjB,QACAiB;AACAO,QAAAA,eACJhB,UAAKiB,WAALjB,YACAkB,oBAAoB;AAAA,IAClB,GAAGrB;AAAAA,IACHC;AAAAA,IACAgB,KAAKvB,KAAKU;AAAAA,IACVT,OAAOuB;AAAAA,IACPtB,QAAQiB;AAAAA,IACRf;AAAAA,EAAAA,CACD;AAGH,wCACE,OAAA;AAAA,IACE,KAAIJ,UAAKY,OAALZ,YAAW;AAAA,IACf,MAAKA,gBAAKc,YAALd,YAAgBS,KAAKM,QAArBf,YAA4B;AAAA,IACjC,SAASG,4BAAW;AAAA,IAAO,GACvBM;AAAAA,IACJ,KAAKa;AAAAA,IACL,OAAOJ,4CAAmBU;AAAAA,IAC1B,QAAQT,8CAAoBS;AAAAA,IAC5B,QAAQH;AAAAA,IACR;AAAA,EAAA,CACA;AAGN;AASA,SAASE,oBAAoB;AAAA,EAC3BJ;AAAAA,EACAtB;AAAAA,EACA4B;AAAAA,EACAC;AAAAA,EACAvB;AAAAA,EACAH;AAAAA,EACAF;AACqC,GAAG;AACxC,QAAM6B,kBAAkBxB,UAAUyB,MAAMC,QAAQ1B,MAAM;AACtD,MAAIwB,mBAAmBxB,OAAO2B,KAAMC,UAASC,MAAMD,IAAc,CAAC,GAAG;AAC7D,UAAA,IAAItB,MACP,8DAA6DU,KAAK;AAAA,EAEvE;AAEA,MAAIc,cAAc;AAClB,MAAIpC,SAASC,QAAQ;AACnBmC,kBAAcC,OAAOpC,MAAM,IAAIoC,OAAOrC,KAAK;AAAA,EAC7C;AAEIsC,MAAAA,WAAWR,kBAAkBxB,SAASiC;AAC1C,MACE,CAACT,mBACD9B,SACAA,QAAQuC,UAAkBA,kBAAAA,4BAAkBC,SAAS,IACrD;AACAF,eAAWC,UAAkBE,kBAAAA,OAAQP,CAASA,SAAAA,QAAQlC,KAAK;AAAA,EAC7D;AACM0C,QAAAA,eAAevC,SAASA,SAASwC;AACvC,SAAOL,SACJM,IACEV,CACE,SAAA,GAAEQ,aAAa;AAAA,IACdpB;AAAAA,IACAtB,OAAOkC;AAAAA,IAGPjC,QAAQ2B,OAAOS,OAAOH,IAAI,IAAIE,cAAcT;AAAAA,IAC5CC;AAAAA,IACAC;AAAAA,EAAAA,CACD,KAAKK,OAAO,EAEhBW,KAAK,IAAI;AACd;;"}
+{"version":3,"file":"Image.js","sources":["../../src/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getShopifyImageDimensions,\n  shopifyImageLoader,\n  addImageSizeParametersToUrl,\n  IMG_SRC_SET_SIZES,\n} from './image-size.js';\nimport type {Image as ImageType} from './storefront-api-types.js';\nimport type {PartialDeep, Simplify} from 'type-fest';\n\ntype HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nexport type ShopifyLoaderOptions = {\n  crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';\n  scale?: 2 | 3;\n  width?: HtmlImageProps['width'] | ImageType['width'];\n  height?: HtmlImageProps['height'] | ImageType['height'];\n};\nexport type ShopifyLoaderParams = Simplify<ShopifyLoaderOptions & ImageSrc>;\n\ntype ImageSrc = {\n  src: ImageType['url'];\n};\n\nexport type ShopifyImageProps = Omit<HtmlImageProps, 'src'> &\n  ShopifyImageBaseProps;\n\ntype ShopifyImageBaseProps = {\n  /** An object with fields that correspond to the Storefront API's\n   * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).\n   * The `data` prop is required.\n   */\n  data: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n  /** A custom function that generates the image URL. Parameters passed in\n   * are `ShopifyLoaderParams`\n   */\n  loader?: (params: ShopifyLoaderParams) => string;\n  /** An object of `loader` function options. For example, if the `loader` function\n   * requires a `scale` option, then the value can be a property of the\n   * `loaderOptions` object (for example, `{scale: 2}`). The object shape is `ShopifyLoaderOptions`.\n   */\n  loaderOptions?: ShopifyLoaderOptions;\n  /**\n   * `src` isn't used, and should instead be passed as part of the `data` object\n   */\n  src?: never;\n  /**\n   * An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.\n   */\n  widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n};\n\n/**\n * The `Image` component renders an image for the Storefront API's\n * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.\n *\n * An image's width and height are determined using the following priority list:\n * 1. The width and height values for the `loaderOptions` prop\n * 2. The width and height values for bare props\n * 3. The width and height values for the `data` prop\n *\n * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the image's aspect ratio,\n * provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing\n * value will remain as `null`\n */\nexport function Image({\n  data,\n  width,\n  height,\n  loading,\n  loader = shopifyImageLoader,\n  loaderOptions,\n  widths,\n  decoding = 'async',\n  ...rest\n}: ShopifyImageProps): JSX.Element | null {\n  if (!data.url) {\n    const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${\n      data.id ?? 'no ID provided'\n    }`;\n\n    if (__HYDROGEN_DEV__) {\n      throw new Error(missingUrlError);\n    } else {\n      console.error(missingUrlError);\n    }\n\n    return null;\n  }\n\n  if (__HYDROGEN_DEV__ && !data.altText && !rest.alt) {\n    console.warn(\n      `<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  const {width: imgElementWidth, height: imgElementHeight} =\n    getShopifyImageDimensions({\n      data,\n      loaderOptions,\n      elementProps: {\n        width,\n        height,\n      },\n    });\n\n  if (__HYDROGEN_DEV__ && (!imgElementWidth || !imgElementHeight)) {\n    console.warn(\n      `<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${\n        data.id ?? data.url\n      }`\n    );\n  }\n\n  let finalSrc = data.url;\n\n  if (loader) {\n    finalSrc = loader({\n      ...loaderOptions,\n      src: data.url,\n      width: imgElementWidth,\n      height: imgElementHeight,\n    });\n    if (typeof finalSrc !== 'string' || !finalSrc) {\n      throw new Error(\n        `<Image/>: 'loader' did not return a valid string. Image: ${\n          data.id ?? data.url\n        }`\n      );\n    }\n  }\n\n  // determining what the intended width of the image is. For example, if the width is specified and lower than the image width, then that is the maximum image width\n  // to prevent generating a srcset with widths bigger than needed or to generate images that would distort because of being larger than original\n  const maxWidth =\n    width && imgElementWidth && width < imgElementWidth\n      ? width\n      : imgElementWidth;\n  const finalSrcset =\n    rest.srcSet ??\n    internalImageSrcSet({\n      ...loaderOptions,\n      widths,\n      src: data.url,\n      width: maxWidth,\n      height: imgElementHeight,\n      loader,\n    });\n\n  /* eslint-disable hydrogen/prefer-image-component */\n  return (\n    <img\n      id={data.id ?? ''}\n      alt={data.altText ?? rest.alt ?? ''}\n      loading={loading ?? 'lazy'}\n      {...rest}\n      src={finalSrc}\n      width={imgElementWidth ?? undefined}\n      height={imgElementHeight ?? undefined}\n      srcSet={finalSrcset}\n      decoding={decoding}\n    />\n  );\n  /* eslint-enable hydrogen/prefer-image-component */\n}\n\ntype InternalShopifySrcSetGeneratorsParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n    widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n    loader?: (params: ShopifyLoaderParams) => string;\n  }\n>;\nfunction internalImageSrcSet({\n  src,\n  width,\n  crop,\n  scale,\n  widths,\n  loader,\n  height,\n}: InternalShopifySrcSetGeneratorsParams): string {\n  const hasCustomWidths = widths && Array.isArray(widths);\n  if (hasCustomWidths && widths.some((size) => isNaN(size as number))) {\n    throw new Error(\n      `<Image/>: the 'widths' must be an array of numbers. Image: ${src}`\n    );\n  }\n\n  let aspectRatio = 1;\n  if (width && height) {\n    aspectRatio = Number(height) / Number(width);\n  }\n\n  let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;\n  if (\n    !hasCustomWidths &&\n    width &&\n    width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]\n  ) {\n    setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);\n  }\n  const srcGenerator = loader ? loader : addImageSizeParametersToUrl;\n  return setSizes\n    .map(\n      (size) =>\n        `${srcGenerator({\n          src,\n          width: size,\n          // height is not applied if there is no crop\n          // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size\n          height: crop ? Number(size) * aspectRatio : undefined,\n          crop,\n          scale,\n        })} ${size ?? ''}w`\n    )\n    .join(', ');\n}\n"],"names":["shopifyImageLoader","getShopifyImageDimensions","jsx","IMG_SRC_SET_SIZES","addImageSizeParametersToUrl"],"mappings":";;;;AAiEO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAASA,UAAA;AAAA,EACT;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,GAA0C;AACpC,MAAA,CAAC,KAAK,KAAK;AACP,UAAA,kBAAkB,iEACtB,KAAK,MAAM;AAGS;AACd,YAAA,IAAI,MAAM,eAAe;AAAA,IAGjC;AAAA,EAGF;AAEA,MAAwB,CAAC,KAAK,WAAW,CAAC,KAAK,KAAK;AAC1C,YAAA;AAAA,MACN,gIACE,KAAK,MAAM,KAAK;AAAA,IAAA;AAAA,EAGtB;AAEA,QAAM,EAAC,OAAO,iBAAiB,QAAQ,iBAAA,IACrCC,UAAAA,0BAA0B;AAAA,IACxB;AAAA,IACA;AAAA,IACA,cAAc;AAAA,MACZ;AAAA,MACA;AAAA,IACF;AAAA,EAAA,CACD;AAEH,MAAyB,CAAC,mBAAmB,CAAC,kBAAmB;AACvD,YAAA;AAAA,MACN,uHACE,KAAK,MAAM,KAAK;AAAA,IAAA;AAAA,EAGtB;AAEA,MAAI,WAAW,KAAK;AAEpB,MAAI,QAAQ;AACV,eAAW,OAAO;AAAA,MAChB,GAAG;AAAA,MACH,KAAK,KAAK;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA,CACT;AACD,QAAI,OAAO,aAAa,YAAY,CAAC,UAAU;AAC7C,YAAM,IAAI;AAAA,QACR,4DACE,KAAK,MAAM,KAAK;AAAA,MAAA;AAAA,IAGtB;AAAA,EACF;AAIA,QAAM,WACJ,SAAS,mBAAmB,QAAQ,kBAChC,QACA;AACA,QAAA,cACJ,KAAK,UACL,oBAAoB;AAAA,IAClB,GAAG;AAAA,IACH;AAAA,IACA,KAAK,KAAK;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,EAAA,CACD;AAID,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,KAAK,MAAM;AAAA,MACf,KAAK,KAAK,WAAW,KAAK,OAAO;AAAA,MACjC,SAAS,WAAW;AAAA,MACnB,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,OAAO,mBAAmB;AAAA,MAC1B,QAAQ,oBAAoB;AAAA,MAC5B,QAAQ;AAAA,MACR;AAAA,IAAA;AAAA,EAAA;AAIN;AASA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAkD;AAChD,QAAM,kBAAkB,UAAU,MAAM,QAAQ,MAAM;AAClD,MAAA,mBAAmB,OAAO,KAAK,CAAC,SAAS,MAAM,IAAc,CAAC,GAAG;AACnE,UAAM,IAAI;AAAA,MACR,8DAA8D;AAAA,IAAA;AAAA,EAElE;AAEA,MAAI,cAAc;AAClB,MAAI,SAAS,QAAQ;AACnB,kBAAc,OAAO,MAAM,IAAI,OAAO,KAAK;AAAA,EAC7C;AAEI,MAAA,WAAW,kBAAkB,SAASC;AAExC,MAAA,CAAC,mBACD,SACA,QAAQA,4BAAkBA,4BAAkB,SAAS,CAAC,GACtD;AACA,eAAWA,UAAkB,kBAAA,OAAO,CAAC,SAAS,QAAQ,KAAK;AAAA,EAC7D;AACM,QAAA,eAAe,SAAS,SAASC;AACvC,SAAO,SACJ;AAAA,IACC,CAAC,SACC,GAAG,aAAa;AAAA,MACd;AAAA,MACA,OAAO;AAAA;AAAA;AAAA,MAGP,QAAQ,OAAO,OAAO,IAAI,IAAI,cAAc;AAAA,MAC5C;AAAA,MACA;AAAA,IACD,CAAA,KAAK,QAAQ;AAAA,EAAA,EAEjB,KAAK,IAAI;AACd;;"}

package/dist/node-dev/Image.mjs

@@ -1,5 +1,5 @@
-import { getShopifyImageDimensions, shopifyImageLoader, IMG_SRC_SET_SIZES, addImageSizeParametersToUrl } from "./image-size.mjs";
 import { jsx } from "react/jsx-runtime";
+import { getShopifyImageDimensions, shopifyImageLoader, IMG_SRC_SET_SIZES, addImageSizeParametersToUrl } from "./image-size.mjs";
 function Image({
   data,
   width,
@@ -11,20 +11,18 @@ function Image({
   decoding = "async",
   ...rest
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
   if (!data.url) {
-    const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${(_a = data.id) != null ? _a : "no ID provided"}`;
+    const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${data.id ?? "no ID provided"}`;
     {
       throw new Error(missingUrlError);
     }
   }
   if (!data.altText && !rest.alt) {
-    console.warn(`<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${(_b = data.id) != null ? _b : data.url}`);
+    console.warn(
+      `<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${data.id ?? data.url}`
+    );
   }
-  const {
-    width: imgElementWidth,
-    height: imgElementHeight
-  } = getShopifyImageDimensions({
+  const { width: imgElementWidth, height: imgElementHeight } = getShopifyImageDimensions({
     data,
     loaderOptions,
     elementProps: {
@@ -33,7 +31,9 @@ function Image({
     }
   });
   if (!imgElementWidth || !imgElementHeight) {
-    console.warn(`<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${(_c = data.id) != null ? _c : data.url}`);
+    console.warn(
+      `<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${data.id ?? data.url}`
+    );
   }
   let finalSrc = data.url;
   if (loader) {
@@ -44,11 +44,13 @@ function Image({
       height: imgElementHeight
     });
     if (typeof finalSrc !== "string" || !finalSrc) {
-      throw new Error(`<Image/>: 'loader' did not return a valid string. Image: ${(_d = data.id) != null ? _d : data.url}`);
+      throw new Error(
+        `<Image/>: 'loader' did not return a valid string. Image: ${data.id ?? data.url}`
+      );
     }
   }
   const maxWidth = width && imgElementWidth && width < imgElementWidth ? width : imgElementWidth;
-  const finalSrcset = (_e = rest.srcSet) != null ? _e : internalImageSrcSet({
+  const finalSrcset = rest.srcSet ?? internalImageSrcSet({
     ...loaderOptions,
     widths,
     src: data.url,
@@ -56,17 +58,20 @@ function Image({
     height: imgElementHeight,
     loader
   });
-  return /* @__PURE__ */ jsx("img", {
-    id: (_f = data.id) != null ? _f : "",
-    alt: (_h = (_g = data.altText) != null ? _g : rest.alt) != null ? _h : "",
-    loading: loading != null ? loading : "lazy",
-    ...rest,
-    src: finalSrc,
-    width: imgElementWidth != null ? imgElementWidth : void 0,
-    height: imgElementHeight != null ? imgElementHeight : void 0,
-    srcSet: finalSrcset,
-    decoding
-  });
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      id: data.id ?? "",
+      alt: data.altText ?? rest.alt ?? "",
+      loading: loading ?? "lazy",
+      ...rest,
+      src: finalSrc,
+      width: imgElementWidth ?? void 0,
+      height: imgElementHeight ?? void 0,
+      srcSet: finalSrcset,
+      decoding
+    }
+  );
 }
 function internalImageSrcSet({
   src,
@@ -79,7 +84,9 @@ function internalImageSrcSet({
 }) {
   const hasCustomWidths = widths && Array.isArray(widths);
   if (hasCustomWidths && widths.some((size) => isNaN(size))) {
-    throw new Error(`<Image/>: the 'widths' must be an array of numbers. Image: ${src}`);
+    throw new Error(
+      `<Image/>: the 'widths' must be an array of numbers. Image: ${src}`
+    );
   }
   let aspectRatio = 1;
   if (width && height) {
@@ -90,13 +97,17 @@ function internalImageSrcSet({
     setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);
   }
   const srcGenerator = loader ? loader : addImageSizeParametersToUrl;
-  return setSizes.map((size) => `${srcGenerator({
-    src,
-    width: size,
-    height: crop ? Number(size) * aspectRatio : void 0,
-    crop,
-    scale
-  })} ${size}w`).join(", ");
+  return setSizes.map(
+    (size) => `${srcGenerator({
+      src,
+      width: size,
+      // height is not applied if there is no crop
+      // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size
+      height: crop ? Number(size) * aspectRatio : void 0,
+      crop,
+      scale
+    })} ${size ?? ""}w`
+  ).join(", ");
 }
 export {
   Image