File: //home/arjun/projects/propbase/propbase_website/node_modules/next/dist/shared/lib/get-img-props.js
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "getImgProps", {
enumerable: true,
get: function() {
return getImgProps;
}
});
const _warnonce = require("./utils/warn-once");
const _imageblursvg = require("./image-blur-svg");
const _imageconfig = require("./image-config");
const VALID_LOADING_VALUES = [
"lazy",
"eager",
undefined
];
function isStaticRequire(src) {
return src.default !== undefined;
}
function isStaticImageData(src) {
return src.src !== undefined;
}
function isStaticImport(src) {
return typeof src === "object" && (isStaticRequire(src) || isStaticImageData(src));
}
const allImgs = new Map();
let perfObserver;
function getInt(x) {
if (typeof x === "undefined") {
return x;
}
if (typeof x === "number") {
return Number.isFinite(x) ? x : NaN;
}
if (typeof x === "string" && /^[0-9]+$/.test(x)) {
return parseInt(x, 10);
}
return NaN;
}
function getWidths(param, width, sizes) {
let { deviceSizes, allSizes } = param;
if (sizes) {
// Find all the "vw" percent sizes used in the sizes prop
const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g;
const percentSizes = [];
for(let match; match = viewportWidthRe.exec(sizes); match){
percentSizes.push(parseInt(match[2]));
}
if (percentSizes.length) {
const smallestRatio = Math.min(...percentSizes) * 0.01;
return {
widths: allSizes.filter((s)=>s >= deviceSizes[0] * smallestRatio),
kind: "w"
};
}
return {
widths: allSizes,
kind: "w"
};
}
if (typeof width !== "number") {
return {
widths: deviceSizes,
kind: "w"
};
}
const widths = [
...new Set(// > This means that most OLED screens that say they are 3x resolution,
// > are actually 3x in the green color, but only 1.5x in the red and
// > blue colors. Showing a 3x resolution image in the app vs a 2x
// > resolution image will be visually the same, though the 3x image
// > takes significantly more data. Even true 3x resolution screens are
// > wasteful as the human eye cannot see that level of detail without
// > something like a magnifying glass.
// https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html
[
width,
width * 2 /*, width * 3*/
].map((w)=>allSizes.find((p)=>p >= w) || allSizes[allSizes.length - 1]))
];
return {
widths,
kind: "x"
};
}
function generateImgAttrs(param) {
let { config, src, unoptimized, width, quality, sizes, loader } = param;
if (unoptimized) {
return {
src,
srcSet: undefined,
sizes: undefined
};
}
const { widths, kind } = getWidths(config, width, sizes);
const last = widths.length - 1;
return {
sizes: !sizes && kind === "w" ? "100vw" : sizes,
srcSet: widths.map((w, i)=>loader({
config,
src,
quality,
width: w
}) + " " + (kind === "w" ? w : i + 1) + kind).join(", "),
// It's intended to keep `src` the last attribute because React updates
// attributes in order. If we keep `src` the first one, Safari will
// immediately start to fetch `src`, before `sizes` and `srcSet` are even
// updated by React. That causes multiple unnecessary requests if `srcSet`
// and `sizes` are defined.
// This bug cannot be reproduced in Chrome or Firefox.
src: loader({
config,
src,
quality,
width: widths[last]
})
};
}
function getImgProps(param, _state) {
let { src, sizes, unoptimized = false, priority = false, loading, className, quality, width, height, fill = false, style, overrideSrc, onLoad, onLoadingComplete, placeholder = "empty", blurDataURL, fetchPriority, decoding = "async", layout, objectFit, objectPosition, lazyBoundary, lazyRoot, ...rest } = param;
const { imgConf, showAltText, blurComplete, defaultLoader } = _state;
let config;
let c = imgConf || _imageconfig.imageConfigDefault;
if ("allSizes" in c) {
config = c;
} else {
const allSizes = [
...c.deviceSizes,
...c.imageSizes
].sort((a, b)=>a - b);
const deviceSizes = c.deviceSizes.sort((a, b)=>a - b);
config = {
...c,
allSizes,
deviceSizes
};
}
if (typeof defaultLoader === "undefined") {
throw new Error("images.loaderFile detected but the file is missing default export.\nRead more: https://nextjs.org/docs/messages/invalid-images-config");
}
let loader = rest.loader || defaultLoader;
// Remove property so it's not spread on <img> element
delete rest.loader;
delete rest.srcSet;
// This special value indicates that the user
// didn't define a "loader" prop or "loader" config.
const isDefaultLoader = "__next_img_default" in loader;
if (isDefaultLoader) {
if (config.loader === "custom") {
throw new Error('Image with src "' + src + '" is missing "loader" prop.' + "\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader");
}
} else {
// The user defined a "loader" prop or config.
// Since the config object is internal only, we
// must not pass it to the user-defined "loader".
const customImageLoader = loader;
loader = (obj)=>{
const { config: _, ...opts } = obj;
return customImageLoader(opts);
};
}
if (layout) {
if (layout === "fill") {
fill = true;
}
const layoutToStyle = {
intrinsic: {
maxWidth: "100%",
height: "auto"
},
responsive: {
width: "100%",
height: "auto"
}
};
const layoutToSizes = {
responsive: "100vw",
fill: "100vw"
};
const layoutStyle = layoutToStyle[layout];
if (layoutStyle) {
style = {
...style,
...layoutStyle
};
}
const layoutSizes = layoutToSizes[layout];
if (layoutSizes && !sizes) {
sizes = layoutSizes;
}
}
let staticSrc = "";
let widthInt = getInt(width);
let heightInt = getInt(height);
let blurWidth;
let blurHeight;
if (isStaticImport(src)) {
const staticImageData = isStaticRequire(src) ? src.default : src;
if (!staticImageData.src) {
throw new Error("An object should only be passed to the image component src parameter if it comes from a static image import. It must include src. Received " + JSON.stringify(staticImageData));
}
if (!staticImageData.height || !staticImageData.width) {
throw new Error("An object should only be passed to the image component src parameter if it comes from a static image import. It must include height and width. Received " + JSON.stringify(staticImageData));
}
blurWidth = staticImageData.blurWidth;
blurHeight = staticImageData.blurHeight;
blurDataURL = blurDataURL || staticImageData.blurDataURL;
staticSrc = staticImageData.src;
if (!fill) {
if (!widthInt && !heightInt) {
widthInt = staticImageData.width;
heightInt = staticImageData.height;
} else if (widthInt && !heightInt) {
const ratio = widthInt / staticImageData.width;
heightInt = Math.round(staticImageData.height * ratio);
} else if (!widthInt && heightInt) {
const ratio = heightInt / staticImageData.height;
widthInt = Math.round(staticImageData.width * ratio);
}
}
}
src = typeof src === "string" ? src : staticSrc;
let isLazy = !priority && (loading === "lazy" || typeof loading === "undefined");
if (!src || src.startsWith("data:") || src.startsWith("blob:")) {
// https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
unoptimized = true;
isLazy = false;
}
if (config.unoptimized) {
unoptimized = true;
}
if (isDefaultLoader && src.endsWith(".svg") && !config.dangerouslyAllowSVG) {
// Special case to make svg serve as-is to avoid proxying
// through the built-in Image Optimization API.
unoptimized = true;
}
if (priority) {
fetchPriority = "high";
}
const qualityInt = getInt(quality);
if (process.env.NODE_ENV !== "production") {
if (config.output === "export" && isDefaultLoader && !unoptimized) {
throw new Error("Image Optimization using the default loader is not compatible with `{ output: 'export' }`.\n Possible solutions:\n - Remove `{ output: 'export' }` and run \"next start\" to run server mode including the Image Optimization API.\n - Configure `{ images: { unoptimized: true } }` in `next.config.js` to disable the Image Optimization API.\n Read more: https://nextjs.org/docs/messages/export-image-api");
}
if (!src) {
// React doesn't show the stack trace and there's
// no `src` to help identify which image, so we
// instead console.error(ref) during mount.
unoptimized = true;
} else {
if (fill) {
if (width) {
throw new Error('Image with src "' + src + '" has both "width" and "fill" properties. Only one should be used.');
}
if (height) {
throw new Error('Image with src "' + src + '" has both "height" and "fill" properties. Only one should be used.');
}
if ((style == null ? void 0 : style.position) && style.position !== "absolute") {
throw new Error('Image with src "' + src + '" has both "fill" and "style.position" properties. Images with "fill" always use position absolute - it cannot be modified.');
}
if ((style == null ? void 0 : style.width) && style.width !== "100%") {
throw new Error('Image with src "' + src + '" has both "fill" and "style.width" properties. Images with "fill" always use width 100% - it cannot be modified.');
}
if ((style == null ? void 0 : style.height) && style.height !== "100%") {
throw new Error('Image with src "' + src + '" has both "fill" and "style.height" properties. Images with "fill" always use height 100% - it cannot be modified.');
}
} else {
if (typeof widthInt === "undefined") {
throw new Error('Image with src "' + src + '" is missing required "width" property.');
} else if (isNaN(widthInt)) {
throw new Error('Image with src "' + src + '" has invalid "width" property. Expected a numeric value in pixels but received "' + width + '".');
}
if (typeof heightInt === "undefined") {
throw new Error('Image with src "' + src + '" is missing required "height" property.');
} else if (isNaN(heightInt)) {
throw new Error('Image with src "' + src + '" has invalid "height" property. Expected a numeric value in pixels but received "' + height + '".');
}
}
}
if (!VALID_LOADING_VALUES.includes(loading)) {
throw new Error('Image with src "' + src + '" has invalid "loading" property. Provided "' + loading + '" should be one of ' + VALID_LOADING_VALUES.map(String).join(",") + ".");
}
if (priority && loading === "lazy") {
throw new Error('Image with src "' + src + '" has both "priority" and "loading=\'lazy\'" properties. Only one should be used.');
}
if (placeholder !== "empty" && placeholder !== "blur" && !placeholder.startsWith("data:image/")) {
throw new Error('Image with src "' + src + '" has invalid "placeholder" property "' + placeholder + '".');
}
if (placeholder !== "empty") {
if (widthInt && heightInt && widthInt * heightInt < 1600) {
(0, _warnonce.warnOnce)('Image with src "' + src + '" is smaller than 40x40. Consider removing the "placeholder" property to improve performance.');
}
}
if (placeholder === "blur" && !blurDataURL) {
const VALID_BLUR_EXT = [
"jpeg",
"png",
"webp",
"avif"
] // should match next-image-loader
;
throw new Error('Image with src "' + src + '" has "placeholder=\'blur\'" property but is missing the "blurDataURL" property.\n Possible solutions:\n - Add a "blurDataURL" property, the contents should be a small Data URL to represent the image\n - Change the "src" property to a static import with one of the supported file types: ' + VALID_BLUR_EXT.join(",") + ' (animated images not supported)\n - Remove the "placeholder" property, effectively no blur effect\n Read more: https://nextjs.org/docs/messages/placeholder-blur-data-url');
}
if ("ref" in rest) {
(0, _warnonce.warnOnce)('Image with src "' + src + '" is using unsupported "ref" property. Consider using the "onLoad" property instead.');
}
if (!unoptimized && !isDefaultLoader) {
const urlStr = loader({
config,
src,
width: widthInt || 400,
quality: qualityInt || 75
});
let url;
try {
url = new URL(urlStr);
} catch (err) {}
if (urlStr === src || url && url.pathname === src && !url.search) {
(0, _warnonce.warnOnce)('Image with src "' + src + '" has a "loader" property that does not implement width. Please implement it or use the "unoptimized" property instead.' + "\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader-width");
}
}
if (onLoadingComplete) {
(0, _warnonce.warnOnce)('Image with src "' + src + '" is using deprecated "onLoadingComplete" property. Please use the "onLoad" property instead.');
}
for (const [legacyKey, legacyValue] of Object.entries({
layout,
objectFit,
objectPosition,
lazyBoundary,
lazyRoot
})){
if (legacyValue) {
(0, _warnonce.warnOnce)('Image with src "' + src + '" has legacy prop "' + legacyKey + '". Did you forget to run the codemod?' + "\nRead more: https://nextjs.org/docs/messages/next-image-upgrade-to-13");
}
}
if (typeof window !== "undefined" && !perfObserver && window.PerformanceObserver) {
perfObserver = new PerformanceObserver((entryList)=>{
for (const entry of entryList.getEntries()){
var _entry_element;
// @ts-ignore - missing "LargestContentfulPaint" class with "element" prop
const imgSrc = (entry == null ? void 0 : (_entry_element = entry.element) == null ? void 0 : _entry_element.src) || "";
const lcpImage = allImgs.get(imgSrc);
if (lcpImage && !lcpImage.priority && lcpImage.placeholder === "empty" && !lcpImage.src.startsWith("data:") && !lcpImage.src.startsWith("blob:")) {
// https://web.dev/lcp/#measure-lcp-in-javascript
(0, _warnonce.warnOnce)('Image with src "' + lcpImage.src + '" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.' + "\nRead more: https://nextjs.org/docs/api-reference/next/image#priority");
}
}
});
try {
perfObserver.observe({
type: "largest-contentful-paint",
buffered: true
});
} catch (err) {
// Log error but don't crash the app
console.error(err);
}
}
}
const imgStyle = Object.assign(fill ? {
position: "absolute",
height: "100%",
width: "100%",
left: 0,
top: 0,
right: 0,
bottom: 0,
objectFit,
objectPosition
} : {}, showAltText ? {} : {
color: "transparent"
}, style);
const backgroundImage = !blurComplete && placeholder !== "empty" ? placeholder === "blur" ? 'url("data:image/svg+xml;charset=utf-8,' + (0, _imageblursvg.getImageBlurSvg)({
widthInt,
heightInt,
blurWidth,
blurHeight,
blurDataURL: blurDataURL || "",
objectFit: imgStyle.objectFit
}) + '")' : 'url("' + placeholder + '")' // assume `data:image/`
: null;
let placeholderStyle = backgroundImage ? {
backgroundSize: imgStyle.objectFit || "cover",
backgroundPosition: imgStyle.objectPosition || "50% 50%",
backgroundRepeat: "no-repeat",
backgroundImage
} : {};
if (process.env.NODE_ENV === "development") {
if (placeholderStyle.backgroundImage && placeholder === "blur" && (blurDataURL == null ? void 0 : blurDataURL.startsWith("/"))) {
// During `next dev`, we don't want to generate blur placeholders with webpack
// because it can delay starting the dev server. Instead, `next-image-loader.js`
// will inline a special url to lazily generate the blur placeholder at request time.
placeholderStyle.backgroundImage = 'url("' + blurDataURL + '")';
}
}
const imgAttributes = generateImgAttrs({
config,
src,
unoptimized,
width: widthInt,
quality: qualityInt,
sizes,
loader
});
if (process.env.NODE_ENV !== "production") {
if (typeof window !== "undefined") {
let fullUrl;
try {
fullUrl = new URL(imgAttributes.src);
} catch (e) {
fullUrl = new URL(imgAttributes.src, window.location.href);
}
allImgs.set(fullUrl.href, {
src,
priority,
placeholder
});
}
}
const props = {
...rest,
loading: isLazy ? "lazy" : loading,
fetchPriority,
width: widthInt,
height: heightInt,
decoding,
className,
style: {
...imgStyle,
...placeholderStyle
},
sizes: imgAttributes.sizes,
srcSet: imgAttributes.srcSet,
src: overrideSrc || imgAttributes.src
};
const meta = {
unoptimized,
priority,
placeholder,
fill
};
return {
props,
meta
};
}
//# sourceMappingURL=get-img-props.js.map