@shopify/hydrogen-react/dist/dev/image-size.js

React components, hooks, and utilities for creating custom Shopify storefronts

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const PRODUCTION_CDN_HOSTNAMES = [
  "cdn.shopify.com",
  "cdn.shopifycdn.net",
  "shopify-assets.shopifycdn.com",
  "shopify-assets.shopifycdn.net"
];
const LOCAL_CDN_HOSTNAMES = ["spin.dev"];
const ALL_CDN_HOSTNAMES = [...PRODUCTION_CDN_HOSTNAMES, ...LOCAL_CDN_HOSTNAMES];
const IMG_SRC_SET_SIZES = [352, 832, 1200, 1920, 2560];
function addImageSizeParametersToUrl({
  src,
  width,
  height,
  crop,
  scale
}) {
  const newUrl = new URL(src);
  const multipliedScale = scale != null ? scale : 1;
  if (width) {
    let finalWidth;
    if (typeof width === "string") {
      finalWidth = (IMG_SRC_SET_SIZES[0] * multipliedScale).toString();
    } else {
      finalWidth = (Number(width) * multipliedScale).toString();
    }
    newUrl.searchParams.append("width", finalWidth);
  }
  if (height && typeof height === "number") {
    newUrl.searchParams.append("height", (height * multipliedScale).toString());
  }
  crop && newUrl.searchParams.append("crop", crop);
  return newUrl.toString();
}
function shopifyImageLoader(params) {
  const newSrc = new URL(params.src);
  const isShopifyServedImage = ALL_CDN_HOSTNAMES.some(
    (allowedHostname) => newSrc.hostname.endsWith(allowedHostname)
  );
  if (!isShopifyServedImage || !params.width && !params.height && !params.crop && !params.scale) {
    return params.src;
  }
  return addImageSizeParametersToUrl(params);
}
function getShopifyImageDimensions({
  data: sfapiImage,
  loaderOptions,
  elementProps
}) {
  var _a, _b, _c, _d, _e, _f;
  let aspectRatio = null;
  if ((sfapiImage == null ? void 0 : sfapiImage.width) && (sfapiImage == null ? void 0 : sfapiImage.height)) {
    aspectRatio = (sfapiImage == null ? void 0 : sfapiImage.width) / (sfapiImage == null ? void 0 : sfapiImage.height);
  }
  if ((loaderOptions == null ? void 0 : loaderOptions.width) || (loaderOptions == null ? void 0 : loaderOptions.height)) {
    return {
      width: (_a = loaderOptions == null ? void 0 : loaderOptions.width) != null ? _a : aspectRatio && typeof loaderOptions.height === "number" ? Math.round(aspectRatio * loaderOptions.height) : null,
      height: (_b = loaderOptions == null ? void 0 : loaderOptions.height) != null ? _b : aspectRatio && typeof loaderOptions.width === "number" ? Math.round(aspectRatio * loaderOptions.width) : null
    };
  }
  if ((elementProps == null ? void 0 : elementProps.width) || (elementProps == null ? void 0 : elementProps.height)) {
    return {
      width: (_c = elementProps == null ? void 0 : elementProps.width) != null ? _c : aspectRatio && typeof elementProps.height === "number" ? Math.round(aspectRatio * elementProps.height) : null,
      height: (_d = elementProps == null ? void 0 : elementProps.height) != null ? _d : aspectRatio && typeof elementProps.width === "number" ? Math.round(aspectRatio * elementProps.width) : null
    };
  }
  if ((sfapiImage == null ? void 0 : sfapiImage.width) || (sfapiImage == null ? void 0 : sfapiImage.height)) {
    return {
      width: (_e = sfapiImage == null ? void 0 : sfapiImage.width) != null ? _e : null,
      height: (_f = sfapiImage == null ? void 0 : sfapiImage.height) != null ? _f : null
    };
  }
  return { width: null, height: null };
}
exports.IMG_SRC_SET_SIZES = IMG_SRC_SET_SIZES;
exports.addImageSizeParametersToUrl = addImageSizeParametersToUrl;
exports.getShopifyImageDimensions = getShopifyImageDimensions;
exports.shopifyImageLoader = shopifyImageLoader;
//# sourceMappingURL=image-size.js.map