create project
This commit is contained in:
ismailsosic
48
kitabcitab/node_modules/next/dist/client/legacy/image.d.ts
generated
vendored
Normal file
48
kitabcitab/node_modules/next/dist/client/legacy/image.d.ts
generated
vendored
Normal file
@@ -0,0 +1,48 @@
|
||||
import React from 'react';
|
||||
declare const VALID_LOADING_VALUES: readonly ["lazy", "eager", undefined];
|
||||
declare type LoadingValue = typeof VALID_LOADING_VALUES[number];
|
||||
export declare type ImageLoader = (resolverProps: ImageLoaderProps) => string;
|
||||
export declare type ImageLoaderProps = {
|
||||
src: string;
|
||||
width: number;
|
||||
quality?: number;
|
||||
};
|
||||
declare const VALID_LAYOUT_VALUES: readonly ["fill", "fixed", "intrinsic", "responsive", undefined];
|
||||
declare type LayoutValue = typeof VALID_LAYOUT_VALUES[number];
|
||||
declare type PlaceholderValue = 'blur' | 'empty';
|
||||
declare type OnLoadingComplete = (result: {
|
||||
naturalWidth: number;
|
||||
naturalHeight: number;
|
||||
}) => void;
|
||||
declare type ImgElementStyle = NonNullable<JSX.IntrinsicElements['img']['style']>;
|
||||
export interface StaticImageData {
|
||||
src: string;
|
||||
height: number;
|
||||
width: number;
|
||||
blurDataURL?: string;
|
||||
}
|
||||
interface StaticRequire {
|
||||
default: StaticImageData;
|
||||
}
|
||||
declare type StaticImport = StaticRequire | StaticImageData;
|
||||
declare type SafeNumber = number | `${number}`;
|
||||
export declare type ImageProps = Omit<JSX.IntrinsicElements['img'], 'src' | 'srcSet' | 'ref' | 'width' | 'height' | 'loading'> & {
|
||||
src: string | StaticImport;
|
||||
width?: SafeNumber;
|
||||
height?: SafeNumber;
|
||||
layout?: LayoutValue;
|
||||
loader?: ImageLoader;
|
||||
quality?: SafeNumber;
|
||||
priority?: boolean;
|
||||
loading?: LoadingValue;
|
||||
lazyRoot?: React.RefObject<HTMLElement> | null;
|
||||
lazyBoundary?: string;
|
||||
placeholder?: PlaceholderValue;
|
||||
blurDataURL?: string;
|
||||
unoptimized?: boolean;
|
||||
objectFit?: ImgElementStyle['objectFit'];
|
||||
objectPosition?: ImgElementStyle['objectPosition'];
|
||||
onLoadingComplete?: OnLoadingComplete;
|
||||
};
|
||||
export default function Image({ src, sizes, unoptimized, priority, loading, lazyRoot, lazyBoundary, className, quality, width, height, style, objectFit, objectPosition, onLoadingComplete, placeholder, blurDataURL, ...all }: ImageProps): JSX.Element;
|
||||
export {};
|
||||
768
kitabcitab/node_modules/next/dist/client/legacy/image.js
generated
vendored
Normal file
768
kitabcitab/node_modules/next/dist/client/legacy/image.js
generated
vendored
Normal file
@@ -0,0 +1,768 @@
|
||||
"use client";
|
||||
"use strict";
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.default = Image;
|
||||
var _extends = require("@swc/helpers/lib/_extends.js").default;
|
||||
var _interop_require_default = require("@swc/helpers/lib/_interop_require_default.js").default;
|
||||
var _interop_require_wildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
||||
var _object_without_properties_loose = require("@swc/helpers/lib/_object_without_properties_loose.js").default;
|
||||
var _react = _interop_require_wildcard(require("react"));
|
||||
var _head = _interop_require_default(require("../../shared/lib/head"));
|
||||
var _imageConfig = require("../../shared/lib/image-config");
|
||||
var _useIntersection = require("../use-intersection");
|
||||
var _imageConfigContext = require("../../shared/lib/image-config-context");
|
||||
var _warnOnce = require("../../shared/lib/utils/warn-once");
|
||||
var _normalizeTrailingSlash = require("../normalize-trailing-slash");
|
||||
function Image(_param) {
|
||||
var { src , sizes , unoptimized =false , priority =false , loading , lazyRoot =null , lazyBoundary , className , quality , width , height , style , objectFit , objectPosition , onLoadingComplete , placeholder ='empty' , blurDataURL } = _param, all = _object_without_properties_loose(_param, [
|
||||
"src",
|
||||
"sizes",
|
||||
"unoptimized",
|
||||
"priority",
|
||||
"loading",
|
||||
"lazyRoot",
|
||||
"lazyBoundary",
|
||||
"className",
|
||||
"quality",
|
||||
"width",
|
||||
"height",
|
||||
"style",
|
||||
"objectFit",
|
||||
"objectPosition",
|
||||
"onLoadingComplete",
|
||||
"placeholder",
|
||||
"blurDataURL"
|
||||
]);
|
||||
const configContext = (0, _react).useContext(_imageConfigContext.ImageConfigContext);
|
||||
const config = (0, _react).useMemo(()=>{
|
||||
const c = configEnv || configContext || _imageConfig.imageConfigDefault;
|
||||
const allSizes = [
|
||||
...c.deviceSizes,
|
||||
...c.imageSizes
|
||||
].sort((a, b)=>a - b);
|
||||
const deviceSizes = c.deviceSizes.sort((a, b)=>a - b);
|
||||
return _extends({}, c, {
|
||||
allSizes,
|
||||
deviceSizes
|
||||
});
|
||||
}, [
|
||||
configContext
|
||||
]);
|
||||
let rest = all;
|
||||
let layout = sizes ? 'responsive' : 'intrinsic';
|
||||
if ('layout' in rest) {
|
||||
// Override default layout if the user specified one:
|
||||
if (rest.layout) layout = rest.layout;
|
||||
// Remove property so it's not spread on <img>:
|
||||
delete rest.layout;
|
||||
}
|
||||
let loader = defaultImageLoader;
|
||||
if ('loader' in rest) {
|
||||
if (rest.loader) {
|
||||
const customImageLoader = rest.loader;
|
||||
var _tmp;
|
||||
_tmp = (obj)=>{
|
||||
const { config: _ } = obj, opts = _object_without_properties_loose(obj, [
|
||||
"config"
|
||||
]);
|
||||
// The config object is internal only so we must
|
||||
// not pass it to the user-defined loader()
|
||||
return customImageLoader(opts);
|
||||
}, loader = _tmp, _tmp;
|
||||
}
|
||||
// Remove property so it's not spread on <img>
|
||||
delete rest.loader;
|
||||
}
|
||||
let staticSrc = '';
|
||||
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)}`);
|
||||
}
|
||||
blurDataURL = blurDataURL || staticImageData.blurDataURL;
|
||||
staticSrc = staticImageData.src;
|
||||
if (!layout || layout !== 'fill') {
|
||||
height = height || staticImageData.height;
|
||||
width = width || staticImageData.width;
|
||||
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)}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
src = typeof src === 'string' ? src : staticSrc;
|
||||
let isLazy = !priority && (loading === 'lazy' || typeof loading === 'undefined');
|
||||
if (src.startsWith('data:') || src.startsWith('blob:')) {
|
||||
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
|
||||
unoptimized = true;
|
||||
isLazy = false;
|
||||
}
|
||||
if (typeof window !== 'undefined' && loadedImageURLs.has(src)) {
|
||||
isLazy = false;
|
||||
}
|
||||
if (config.unoptimized) {
|
||||
unoptimized = true;
|
||||
}
|
||||
const [blurComplete, setBlurComplete] = (0, _react).useState(false);
|
||||
const [setIntersection, isIntersected, resetIntersected] = (0, _useIntersection).useIntersection({
|
||||
rootRef: lazyRoot,
|
||||
rootMargin: lazyBoundary || '200px',
|
||||
disabled: !isLazy
|
||||
});
|
||||
const isVisible = !isLazy || isIntersected;
|
||||
const wrapperStyle = {
|
||||
boxSizing: 'border-box',
|
||||
display: 'block',
|
||||
overflow: 'hidden',
|
||||
width: 'initial',
|
||||
height: 'initial',
|
||||
background: 'none',
|
||||
opacity: 1,
|
||||
border: 0,
|
||||
margin: 0,
|
||||
padding: 0
|
||||
};
|
||||
const sizerStyle = {
|
||||
boxSizing: 'border-box',
|
||||
display: 'block',
|
||||
width: 'initial',
|
||||
height: 'initial',
|
||||
background: 'none',
|
||||
opacity: 1,
|
||||
border: 0,
|
||||
margin: 0,
|
||||
padding: 0
|
||||
};
|
||||
let hasSizer = false;
|
||||
let sizerSvgUrl;
|
||||
const layoutStyle = {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
boxSizing: 'border-box',
|
||||
padding: 0,
|
||||
border: 'none',
|
||||
margin: 'auto',
|
||||
display: 'block',
|
||||
width: 0,
|
||||
height: 0,
|
||||
minWidth: '100%',
|
||||
maxWidth: '100%',
|
||||
minHeight: '100%',
|
||||
maxHeight: '100%',
|
||||
objectFit,
|
||||
objectPosition
|
||||
};
|
||||
let widthInt = getInt(width);
|
||||
let heightInt = getInt(height);
|
||||
const qualityInt = getInt(quality);
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
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.
|
||||
widthInt = widthInt || 1;
|
||||
heightInt = heightInt || 1;
|
||||
unoptimized = true;
|
||||
} else {
|
||||
if (!VALID_LAYOUT_VALUES.includes(layout)) {
|
||||
throw new Error(`Image with src "${src}" has invalid "layout" property. Provided "${layout}" should be one of ${VALID_LAYOUT_VALUES.map(String).join(',')}.`);
|
||||
}
|
||||
if (typeof widthInt !== 'undefined' && isNaN(widthInt) || typeof heightInt !== 'undefined' && isNaN(heightInt)) {
|
||||
throw new Error(`Image with src "${src}" has invalid "width" or "height" property. These should be numeric values.`);
|
||||
}
|
||||
if (layout === 'fill' && (width || height)) {
|
||||
(0, _warnOnce).warnOnce(`Image with src "${src}" and "layout='fill'" has unused properties assigned. Please remove "width" and "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 (sizes && layout !== 'fill' && layout !== 'responsive') {
|
||||
(0, _warnOnce).warnOnce(`Image with src "${src}" has "sizes" property but it will be ignored. Only use "sizes" with "layout='fill'" or "layout='responsive'"`);
|
||||
}
|
||||
if (placeholder === 'blur') {
|
||||
if (layout !== 'fill' && (widthInt || 0) * (heightInt || 0) < 1600) {
|
||||
(0, _warnOnce).warnOnce(`Image with src "${src}" is smaller than 40x40. Consider removing the "placeholder='blur'" property to improve performance.`);
|
||||
}
|
||||
if (!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.
|
||||
Possible solutions:
|
||||
- Add a "blurDataURL" property, the contents should be a small Data URL to represent the image
|
||||
- Change the "src" property to a static import with one of the supported file types: ${VALID_BLUR_EXT.join(',')}
|
||||
- Remove the "placeholder" property, effectively no blur effect
|
||||
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 "onLoadingComplete" property instead.`);
|
||||
}
|
||||
if (!unoptimized && loader !== defaultImageLoader) {
|
||||
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 (style) {
|
||||
let overwrittenStyles = Object.keys(style).filter((key)=>key in layoutStyle);
|
||||
if (overwrittenStyles.length) {
|
||||
(0, _warnOnce).warnOnce(`Image with src ${src} is assigned the following styles, which are overwritten by automatically-generated styles: ${overwrittenStyles.join(', ')}`);
|
||||
}
|
||||
}
|
||||
if (typeof window !== 'undefined' && !perfObserver && window.PerformanceObserver) {
|
||||
perfObserver = new PerformanceObserver((entryList)=>{
|
||||
for (const entry of entryList.getEntries()){
|
||||
var ref;
|
||||
// @ts-ignore - missing "LargestContentfulPaint" class with "element" prop
|
||||
const imgSrc = (entry == null ? void 0 : (ref = entry.element) == null ? void 0 : ref.src) || '';
|
||||
const lcpImage = allImgs.get(imgSrc);
|
||||
if (lcpImage && !lcpImage.priority && lcpImage.placeholder !== 'blur' && !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/legacy/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({}, style, layoutStyle);
|
||||
const blurStyle = placeholder === 'blur' && !blurComplete ? {
|
||||
backgroundSize: objectFit || 'cover',
|
||||
backgroundPosition: objectPosition || '0% 0%',
|
||||
filter: 'blur(20px)',
|
||||
backgroundImage: `url("${blurDataURL}")`
|
||||
} : {};
|
||||
if (layout === 'fill') {
|
||||
// <Image src="i.png" layout="fill" />
|
||||
wrapperStyle.display = 'block';
|
||||
wrapperStyle.position = 'absolute';
|
||||
wrapperStyle.top = 0;
|
||||
wrapperStyle.left = 0;
|
||||
wrapperStyle.bottom = 0;
|
||||
wrapperStyle.right = 0;
|
||||
} else if (typeof widthInt !== 'undefined' && typeof heightInt !== 'undefined') {
|
||||
// <Image src="i.png" width="100" height="100" />
|
||||
const quotient = heightInt / widthInt;
|
||||
const paddingTop = isNaN(quotient) ? '100%' : `${quotient * 100}%`;
|
||||
if (layout === 'responsive') {
|
||||
// <Image src="i.png" width="100" height="100" layout="responsive" />
|
||||
wrapperStyle.display = 'block';
|
||||
wrapperStyle.position = 'relative';
|
||||
hasSizer = true;
|
||||
sizerStyle.paddingTop = paddingTop;
|
||||
} else if (layout === 'intrinsic') {
|
||||
// <Image src="i.png" width="100" height="100" layout="intrinsic" />
|
||||
wrapperStyle.display = 'inline-block';
|
||||
wrapperStyle.position = 'relative';
|
||||
wrapperStyle.maxWidth = '100%';
|
||||
hasSizer = true;
|
||||
sizerStyle.maxWidth = '100%';
|
||||
sizerSvgUrl = `data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%27${widthInt}%27%20height=%27${heightInt}%27/%3e`;
|
||||
} else if (layout === 'fixed') {
|
||||
// <Image src="i.png" width="100" height="100" layout="fixed" />
|
||||
wrapperStyle.display = 'inline-block';
|
||||
wrapperStyle.position = 'relative';
|
||||
wrapperStyle.width = widthInt;
|
||||
wrapperStyle.height = heightInt;
|
||||
}
|
||||
} else {
|
||||
// <Image src="i.png" />
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
throw new Error(`Image with src "${src}" must use "width" and "height" properties or "layout='fill'" property.`);
|
||||
}
|
||||
}
|
||||
let imgAttributes = {
|
||||
src: emptyDataURL,
|
||||
srcSet: undefined,
|
||||
sizes: undefined
|
||||
};
|
||||
if (isVisible) {
|
||||
imgAttributes = generateImgAttrs({
|
||||
config,
|
||||
src,
|
||||
unoptimized,
|
||||
layout,
|
||||
width: widthInt,
|
||||
quality: qualityInt,
|
||||
sizes,
|
||||
loader
|
||||
});
|
||||
}
|
||||
let srcString = src;
|
||||
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 linkProps = {
|
||||
// @ts-expect-error upgrade react types to react 18
|
||||
imageSrcSet: imgAttributes.srcSet,
|
||||
imageSizes: imgAttributes.sizes,
|
||||
crossOrigin: rest.crossOrigin
|
||||
};
|
||||
const useLayoutEffect = typeof window === 'undefined' ? _react.default.useEffect : _react.default.useLayoutEffect;
|
||||
const onLoadingCompleteRef = (0, _react).useRef(onLoadingComplete);
|
||||
const previousImageSrc = (0, _react).useRef(src);
|
||||
(0, _react).useEffect(()=>{
|
||||
onLoadingCompleteRef.current = onLoadingComplete;
|
||||
}, [
|
||||
onLoadingComplete
|
||||
]);
|
||||
useLayoutEffect(()=>{
|
||||
if (previousImageSrc.current !== src) {
|
||||
resetIntersected();
|
||||
previousImageSrc.current = src;
|
||||
}
|
||||
}, [
|
||||
resetIntersected,
|
||||
src
|
||||
]);
|
||||
const imgElementArgs = _extends({
|
||||
isLazy,
|
||||
imgAttributes,
|
||||
heightInt,
|
||||
widthInt,
|
||||
qualityInt,
|
||||
layout,
|
||||
className,
|
||||
imgStyle,
|
||||
blurStyle,
|
||||
loading,
|
||||
config,
|
||||
unoptimized,
|
||||
placeholder,
|
||||
loader,
|
||||
srcString,
|
||||
onLoadingCompleteRef,
|
||||
setBlurComplete,
|
||||
setIntersection,
|
||||
isVisible,
|
||||
noscriptSizes: sizes
|
||||
}, rest);
|
||||
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("span", {
|
||||
style: wrapperStyle
|
||||
}, hasSizer ? /*#__PURE__*/ _react.default.createElement("span", {
|
||||
style: sizerStyle
|
||||
}, sizerSvgUrl ? /*#__PURE__*/ _react.default.createElement("img", {
|
||||
style: {
|
||||
display: 'block',
|
||||
maxWidth: '100%',
|
||||
width: 'initial',
|
||||
height: 'initial',
|
||||
background: 'none',
|
||||
opacity: 1,
|
||||
border: 0,
|
||||
margin: 0,
|
||||
padding: 0
|
||||
},
|
||||
alt: "",
|
||||
"aria-hidden": true,
|
||||
src: sizerSvgUrl
|
||||
}) : null) : null, /*#__PURE__*/ _react.default.createElement(ImageElement, Object.assign({}, imgElementArgs))), priority ? // Note how we omit the `href` attribute, as it would only be relevant
|
||||
// for browsers that do not support `imagesrcset`, and in those cases
|
||||
// it would likely cause the incorrect image to be preloaded.
|
||||
//
|
||||
// https://html.spec.whatwg.org/multipage/semantics.html#attr-link-imagesrcset
|
||||
/*#__PURE__*/ _react.default.createElement(_head.default, null, /*#__PURE__*/ _react.default.createElement("link", Object.assign({
|
||||
key: '__nimg-' + imgAttributes.src + imgAttributes.srcSet + imgAttributes.sizes,
|
||||
rel: "preload",
|
||||
as: "image",
|
||||
href: imgAttributes.srcSet ? undefined : imgAttributes.src
|
||||
}, linkProps))) : null);
|
||||
}
|
||||
|
||||
function normalizeSrc(src) {
|
||||
return src[0] === '/' ? src.slice(1) : src;
|
||||
}
|
||||
const configEnv = process.env.__NEXT_IMAGE_OPTS;
|
||||
const loadedImageURLs = new Set();
|
||||
const allImgs = new Map();
|
||||
let perfObserver;
|
||||
const emptyDataURL = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
|
||||
if (typeof window === 'undefined') {
|
||||
globalThis.__NEXT_IMAGE_IMPORTED = true;
|
||||
}
|
||||
const VALID_LOADING_VALUES = [
|
||||
'lazy',
|
||||
'eager',
|
||||
undefined
|
||||
];
|
||||
function imgixLoader({ config , src , width , quality }) {
|
||||
// Demo: https://static.imgix.net/daisy.png?auto=format&fit=max&w=300
|
||||
const url = new URL(`${config.path}${normalizeSrc(src)}`);
|
||||
const params = url.searchParams;
|
||||
// auto params can be combined with comma separation, or reiteration
|
||||
params.set('auto', params.getAll('auto').join(',') || 'format');
|
||||
params.set('fit', params.get('fit') || 'max');
|
||||
params.set('w', params.get('w') || width.toString());
|
||||
if (quality) {
|
||||
params.set('q', quality.toString());
|
||||
}
|
||||
return url.href;
|
||||
}
|
||||
function akamaiLoader({ config , src , width }) {
|
||||
return `${config.path}${normalizeSrc(src)}?imwidth=${width}`;
|
||||
}
|
||||
function cloudinaryLoader({ config , src , width , quality }) {
|
||||
// Demo: https://res.cloudinary.com/demo/image/upload/w_300,c_limit,q_auto/turtles.jpg
|
||||
const params = [
|
||||
'f_auto',
|
||||
'c_limit',
|
||||
'w_' + width,
|
||||
'q_' + (quality || 'auto')
|
||||
];
|
||||
const paramsString = params.join(',') + '/';
|
||||
return `${config.path}${paramsString}${normalizeSrc(src)}`;
|
||||
}
|
||||
function customLoader({ src }) {
|
||||
throw new Error(`Image with src "${src}" is missing "loader" prop.` + `\nRead more: https://nextjs.org/docs/messages/next-image-missing-loader`);
|
||||
}
|
||||
function defaultLoader({ config , src , width , quality }) {
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
const missingValues = [];
|
||||
// these should always be provided but make sure they are
|
||||
if (!src) missingValues.push('src');
|
||||
if (!width) missingValues.push('width');
|
||||
if (missingValues.length > 0) {
|
||||
throw new Error(`Next Image Optimization requires ${missingValues.join(', ')} to be provided. Make sure you pass them as props to the \`next/image\` component. Received: ${JSON.stringify({
|
||||
src,
|
||||
width,
|
||||
quality
|
||||
})}`);
|
||||
}
|
||||
if (src.startsWith('//')) {
|
||||
throw new Error(`Failed to parse src "${src}" on \`next/image\`, protocol-relative URL (//) must be changed to an absolute URL (http:// or https://)`);
|
||||
}
|
||||
if (!src.startsWith('/') && (config.domains || config.remotePatterns)) {
|
||||
let parsedSrc;
|
||||
try {
|
||||
parsedSrc = new URL(src);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
throw new Error(`Failed to parse src "${src}" on \`next/image\`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)`);
|
||||
}
|
||||
if (process.env.NODE_ENV !== 'test') {
|
||||
// We use dynamic require because this should only error in development
|
||||
const { hasMatch } = require('../../shared/lib/match-remote-pattern');
|
||||
if (!hasMatch(config.domains, config.remotePatterns, parsedSrc)) {
|
||||
throw new Error(`Invalid src prop (${src}) on \`next/image\`, hostname "${parsedSrc.hostname}" is not configured under images in your \`next.config.js\`\n` + `See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host`);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if (src.endsWith('.svg') && !config.dangerouslyAllowSVG) {
|
||||
// Special case to make svg serve as-is to avoid proxying
|
||||
// through the built-in Image Optimization API.
|
||||
return src;
|
||||
}
|
||||
return `${(0, _normalizeTrailingSlash).normalizePathTrailingSlash(config.path)}?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`;
|
||||
}
|
||||
const loaders = new Map([
|
||||
[
|
||||
'default',
|
||||
defaultLoader
|
||||
],
|
||||
[
|
||||
'imgix',
|
||||
imgixLoader
|
||||
],
|
||||
[
|
||||
'cloudinary',
|
||||
cloudinaryLoader
|
||||
],
|
||||
[
|
||||
'akamai',
|
||||
akamaiLoader
|
||||
],
|
||||
[
|
||||
'custom',
|
||||
customLoader
|
||||
],
|
||||
]);
|
||||
const VALID_LAYOUT_VALUES = [
|
||||
'fill',
|
||||
'fixed',
|
||||
'intrinsic',
|
||||
'responsive',
|
||||
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));
|
||||
}
|
||||
function getWidths({ deviceSizes , allSizes }, width, layout, sizes) {
|
||||
if (sizes && (layout === 'fill' || layout === 'responsive')) {
|
||||
// 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' || layout === 'fill' || layout === 'responsive') {
|
||||
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({ config , src , unoptimized , layout , width , quality , sizes , loader }) {
|
||||
if (unoptimized) {
|
||||
return {
|
||||
src,
|
||||
srcSet: undefined,
|
||||
sizes: undefined
|
||||
};
|
||||
}
|
||||
const { widths , kind } = getWidths(config, width, layout, 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 getInt(x) {
|
||||
if (typeof x === 'number') {
|
||||
return x;
|
||||
}
|
||||
if (typeof x === 'string') {
|
||||
return parseInt(x, 10);
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
function defaultImageLoader(loaderProps) {
|
||||
var ref;
|
||||
const loaderKey = ((ref = loaderProps.config) == null ? void 0 : ref.loader) || 'default';
|
||||
const load = loaders.get(loaderKey);
|
||||
if (load) {
|
||||
return load(loaderProps);
|
||||
}
|
||||
throw new Error(`Unknown "loader" found in "next.config.js". Expected: ${_imageConfig.VALID_LOADERS.join(', ')}. Received: ${loaderKey}`);
|
||||
}
|
||||
// See https://stackoverflow.com/q/39777833/266535 for why we use this ref
|
||||
// handler instead of the img's onLoad attribute.
|
||||
function handleLoading(img, src, layout, placeholder, onLoadingCompleteRef, setBlurComplete) {
|
||||
if (!img || img.src === emptyDataURL || img['data-loaded-src'] === src) {
|
||||
return;
|
||||
}
|
||||
img['data-loaded-src'] = src;
|
||||
const p = 'decode' in img ? img.decode() : Promise.resolve();
|
||||
p.catch(()=>{}).then(()=>{
|
||||
if (!img.parentNode) {
|
||||
// Exit early in case of race condition:
|
||||
// - onload() is called
|
||||
// - decode() is called but incomplete
|
||||
// - unmount is called
|
||||
// - decode() completes
|
||||
return;
|
||||
}
|
||||
loadedImageURLs.add(src);
|
||||
if (placeholder === 'blur') {
|
||||
setBlurComplete(true);
|
||||
}
|
||||
if (onLoadingCompleteRef == null ? void 0 : onLoadingCompleteRef.current) {
|
||||
const { naturalWidth , naturalHeight } = img;
|
||||
// Pass back read-only primitive values but not the
|
||||
// underlying DOM element because it could be misused.
|
||||
onLoadingCompleteRef.current({
|
||||
naturalWidth,
|
||||
naturalHeight
|
||||
});
|
||||
}
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
var ref;
|
||||
if ((ref = img.parentElement) == null ? void 0 : ref.parentElement) {
|
||||
const parent = getComputedStyle(img.parentElement.parentElement);
|
||||
if (!parent.position) {
|
||||
// The parent has not been rendered to the dom yet and therefore it has no position. Skip the warnings for such cases.
|
||||
} else if (layout === 'responsive' && parent.display === 'flex') {
|
||||
(0, _warnOnce).warnOnce(`Image with src "${src}" may not render properly as a child of a flex container. Consider wrapping the image with a div to configure the width.`);
|
||||
} else if (layout === 'fill' && parent.position !== 'relative' && parent.position !== 'fixed' && parent.position !== 'absolute') {
|
||||
(0, _warnOnce).warnOnce(`Image with src "${src}" may not render properly with a parent using position:"${parent.position}". Consider changing the parent style to position:"relative" with a width and height.`);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
const ImageElement = (_param)=>{
|
||||
var { imgAttributes , heightInt , widthInt , qualityInt , layout , className , imgStyle , blurStyle , isLazy , placeholder , loading , srcString , config , unoptimized , loader , onLoadingCompleteRef , setBlurComplete , setIntersection , onLoad , onError , isVisible , noscriptSizes } = _param, rest = _object_without_properties_loose(_param, [
|
||||
"imgAttributes",
|
||||
"heightInt",
|
||||
"widthInt",
|
||||
"qualityInt",
|
||||
"layout",
|
||||
"className",
|
||||
"imgStyle",
|
||||
"blurStyle",
|
||||
"isLazy",
|
||||
"placeholder",
|
||||
"loading",
|
||||
"srcString",
|
||||
"config",
|
||||
"unoptimized",
|
||||
"loader",
|
||||
"onLoadingCompleteRef",
|
||||
"setBlurComplete",
|
||||
"setIntersection",
|
||||
"onLoad",
|
||||
"onError",
|
||||
"isVisible",
|
||||
"noscriptSizes"
|
||||
]);
|
||||
loading = isLazy ? 'lazy' : loading;
|
||||
return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/ _react.default.createElement("img", Object.assign({}, rest, imgAttributes, {
|
||||
decoding: "async",
|
||||
"data-nimg": layout,
|
||||
className: className,
|
||||
style: _extends({}, imgStyle, blurStyle),
|
||||
ref: (0, _react).useCallback((img)=>{
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (img && !srcString) {
|
||||
console.error(`Image is missing required "src" property:`, img);
|
||||
}
|
||||
}
|
||||
setIntersection(img);
|
||||
if (img == null ? void 0 : img.complete) {
|
||||
handleLoading(img, srcString, layout, placeholder, onLoadingCompleteRef, setBlurComplete);
|
||||
}
|
||||
}, [
|
||||
setIntersection,
|
||||
srcString,
|
||||
layout,
|
||||
placeholder,
|
||||
onLoadingCompleteRef,
|
||||
setBlurComplete,
|
||||
]),
|
||||
onLoad: (event)=>{
|
||||
const img = event.currentTarget;
|
||||
handleLoading(img, srcString, layout, placeholder, onLoadingCompleteRef, setBlurComplete);
|
||||
if (onLoad) {
|
||||
onLoad(event);
|
||||
}
|
||||
},
|
||||
onError: (event)=>{
|
||||
if (placeholder === 'blur') {
|
||||
// If the real image fails to load, this will still remove the placeholder.
|
||||
setBlurComplete(true);
|
||||
}
|
||||
if (onError) {
|
||||
onError(event);
|
||||
}
|
||||
}
|
||||
})), (isLazy || placeholder === 'blur') && /*#__PURE__*/ _react.default.createElement("noscript", null, /*#__PURE__*/ _react.default.createElement("img", Object.assign({}, rest, generateImgAttrs({
|
||||
config,
|
||||
src: srcString,
|
||||
unoptimized,
|
||||
layout,
|
||||
width: widthInt,
|
||||
quality: qualityInt,
|
||||
sizes: noscriptSizes,
|
||||
loader
|
||||
}), {
|
||||
decoding: "async",
|
||||
"data-nimg": layout,
|
||||
style: imgStyle,
|
||||
className: className,
|
||||
// @ts-ignore - TODO: upgrade to `@types/react@17`
|
||||
loading: loading
|
||||
}))));
|
||||
};
|
||||
|
||||
if ((typeof exports.default === 'function' || (typeof exports.default === 'object' && exports.default !== null)) && typeof exports.default.__esModule === 'undefined') {
|
||||
Object.defineProperty(exports.default, '__esModule', { value: true });
|
||||
Object.assign(exports.default, exports);
|
||||
module.exports = exports.default;
|
||||
}
|
||||
|
||||
//# sourceMappingURL=image.js.map
|
||||
1
kitabcitab/node_modules/next/dist/client/legacy/image.js.map
generated
vendored
Normal file
1
kitabcitab/node_modules/next/dist/client/legacy/image.js.map
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user