@rebask/core 0.2.1 → 0.4.0

package/dist/lib/head/head-manager.js

@@ -0,0 +1,98 @@
+import { createElement } from "react";
+import { createPortal, flushSync } from "react-dom";
+import { createRoot } from "react-dom/client";
+const heads = new Map();
+let root = null;
+let titleElement = null;
+let scheduled = false;
+function getText(children) {
+    if (typeof children === "string" ||
+        typeof children === "number" ||
+        typeof children === "bigint") {
+        return String(children);
+    }
+    if (Array.isArray(children))
+        return children.map(getText).join("");
+    return "";
+}
+function updateTitle(entry) {
+    if (!entry) {
+        titleElement?.remove();
+        titleElement = null;
+        return;
+    }
+    if (!titleElement)
+        titleElement = document.createElement("title");
+    const firstTitle = document.head.querySelector("title");
+    if (firstTitle !== titleElement)
+        document.head.insertBefore(titleElement, firstTitle);
+    titleElement.textContent = getText(entry.children);
+}
+function updateHead() {
+    scheduled = false;
+    if (!root) {
+        for (const element of document.querySelectorAll("[data-rebask-head]")) {
+            element.remove();
+        }
+        new MutationObserver((mutations) => {
+            for (const mutation of mutations) {
+                for (const node of mutation.addedNodes) {
+                    if (node.nodeType !== 1)
+                        continue;
+                    const element = node;
+                    if (element.matches("[data-rebask-head]"))
+                        element.remove();
+                    else
+                        for (const child of element.querySelectorAll("[data-rebask-head]"))
+                            child.remove();
+                }
+            }
+        }).observe(document.documentElement, { childList: true, subtree: true });
+        root = createRoot(document.createElement("div"));
+    }
+    const keyed = new Map();
+    const elements = [];
+    let title;
+    for (const [id, entries] of heads) {
+        for (let i = 0; i < entries.length; i++) {
+            const entry = entries[i];
+            let key = entry.tag.toLowerCase();
+            if (key === "meta") {
+                const attr = entry.props.name || entry.props.property || entry.props.httpEquiv;
+                key = attr ? `${key}:${String(attr)}` : null;
+            }
+            else if (key === "link") {
+                key = entry.props.rel === "canonical" ? "link:canonical" : null;
+            }
+            if (key === null) {
+                elements.push(createElement(entry.tag, { key: `${id}:${i}`, ...entry.props }, entry.children));
+            }
+            else if (key === "title") {
+                title = entry;
+            }
+            else {
+                keyed.set(key, entry);
+            }
+        }
+    }
+    for (const [key, entry] of keyed) {
+        elements.push(createElement(entry.tag, { key, ...entry.props }, entry.children));
+    }
+    const headRoot = root;
+    flushSync(() => headRoot.render(createPortal(elements, document.head)));
+    updateTitle(title);
+}
+function scheduleUpdate() {
+    if (scheduled)
+        return;
+    scheduled = true;
+    queueMicrotask(updateHead);
+}
+export function registerHead(id, entries) {
+    heads.set(id, entries);
+    scheduleUpdate();
+}
+export function unregisterHead(id) {
+    if (heads.delete(id))
+        scheduleUpdate();
+}

package/dist/lib/head/head-script.js

@@ -1,7 +1,8 @@
-// This script is inlined in the browser when the `HeadScript` component is used.
+// This script is inlined in the document bootstrap.
 function dedupeHeadElements() {
-    const seen = new Map();
-    for (const element of document.querySelectorAll("[data-order]")) {
+    const seen = new Set();
+    // Keep the last element per key.
+    for (const element of Array.from(document.querySelectorAll("[data-rebask-head]")).reverse()) {
         let key = element.tagName.toLowerCase();
         if (key === "meta") {
             const attr = element.getAttribute("name") ||
@@ -16,23 +17,17 @@ function dedupeHeadElements() {
                 continue;
             key = "link:canonical";
         }
-        const order = Number(element.getAttribute("data-order")) || 0;
-        const previous = seen.get(key);
-        if (!previous || order > previous.order) {
-            if (previous)
-                previous.element.remove();
-            seen.set(key, { element, order });
-        }
-        else {
+        if (seen.has(key))
             element.remove();
-        }
+        else
+            seen.add(key);
     }
 }
 dedupeHeadElements();
 const observer = new MutationObserver((mutations) => {
     for (const mutation of mutations) {
         for (const node of mutation.addedNodes) {
-            if (node.nodeType === 1 && node.matches?.("[data-order]")) {
+            if (node.nodeType === 1 && node.matches?.("[data-rebask-head]")) {
                 dedupeHeadElements();
                 return;
             }

package/dist/lib/image-optimization/fetch-remote-image.d.ts

@@ -0,0 +1,17 @@
+import type { ImageConfigComplete } from "./image-config.js";
+type RemoteImageConfig = Pick<ImageConfigComplete, "remotePatterns" | "dangerouslyAllowLocalIP" | "maximumRedirects" | "maximumResponseBody">;
+export type RemoteImageCacheControl = {
+    maxAge: number | undefined;
+    browserMaxAge: number | undefined;
+    sharedMaxAge: number | undefined;
+    noStore: boolean;
+    private: boolean;
+    noCache: boolean;
+};
+export declare const PUBLIC_IMAGE_CACHE_CONTROL: RemoteImageCacheControl;
+export declare function fetchRemoteImage(href: string, config: RemoteImageConfig): Promise<{
+    buffer: Buffer;
+    cacheControl: RemoteImageCacheControl;
+}>;
+export {};
+//# sourceMappingURL=fetch-remote-image.d.ts.map

package/dist/lib/image-optimization/fetch-remote-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetch-remote-image.d.ts","sourceRoot":"","sources":["../../../src/lib/image-optimization/fetch-remote-image.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAS5D,KAAK,iBAAiB,GAAG,IAAI,CAC5B,mBAAmB,EACnB,gBAAgB,GAAG,yBAAyB,GAAG,kBAAkB,GAAG,qBAAqB,CACzF,CAAA;AAED,MAAM,MAAM,uBAAuB,GAAG;IACrC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,aAAa,EAAE,MAAM,GAAG,SAAS,CAAA;IACjC,YAAY,EAAE,MAAM,GAAG,SAAS,CAAA;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,OAAO,CAAA;IAChB,OAAO,EAAE,OAAO,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,0BAA0B,EAAE,uBAOxC,CAAA;AAwGD,wBAAsB,gBAAgB,CACrC,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,iBAAiB,GACvB,OAAO,CAAC;IAAE,MAAM,EAAE,MAAM,CAAC;IAAC,YAAY,EAAE,uBAAuB,CAAA;CAAE,CAAC,CAiEpE"}

package/dist/lib/image-optimization/fetch-remote-image.js

@@ -0,0 +1,157 @@
+import { lookup } from "node:dns/promises";
+import { request as httpRequest } from "node:http";
+import { request as httpsRequest } from "node:https";
+import { isIP } from "node:net";
+import { ImageError, INVALID_UPSTREAM, NOT_ALLOWED, TIMED_OUT } from "./image-error.js";
+import { isPrivateIp } from "./is-private-ip.js";
+import { hasRemoteMatch } from "./match-patterns.js";
+import { readBody } from "./read-body.js";
+const TIMEOUT_MS = 7000;
+const REDIRECT_STATUSES = new Set([301, 302, 303, 307, 308]);
+export const PUBLIC_IMAGE_CACHE_CONTROL = {
+    maxAge: undefined,
+    browserMaxAge: undefined,
+    sharedMaxAge: undefined,
+    noStore: false,
+    private: false,
+    noCache: false,
+};
+function parseCacheControl(cacheControl) {
+    let maxAge;
+    let sMaxAge;
+    let noStore = false;
+    let privateCache = false;
+    let noCache = false;
+    for (const directive of cacheControl?.split(",") ?? []) {
+        const [rawKey, rawValue] = directive.trim().split("=", 2);
+        if (!rawKey)
+            continue;
+        const key = rawKey.trim().toLowerCase();
+        const parsed = rawValue ? parseInt(rawValue.replace(/"/g, "").trim(), 10) : Number.NaN;
+        const validAge = !Number.isNaN(parsed);
+        if (key === "max-age" && validAge) {
+            maxAge = parsed;
+        }
+        else if (key === "s-maxage" && validAge) {
+            sMaxAge = parsed;
+        }
+        else if (key === "no-store") {
+            noStore = true;
+        }
+        else if (key === "private") {
+            privateCache = true;
+        }
+        else if (key === "no-cache") {
+            noCache = true;
+        }
+    }
+    return {
+        maxAge: sMaxAge ?? maxAge,
+        browserMaxAge: maxAge,
+        sharedMaxAge: sMaxAge,
+        noStore,
+        private: privateCache,
+        noCache,
+    };
+}
+async function resolveAddresses(hostname) {
+    const literalFamily = isIP(hostname);
+    if (literalFamily) {
+        return [{ address: hostname, family: literalFamily }];
+    }
+    try {
+        return await lookup(hostname, { all: true });
+    }
+    catch {
+        throw new ImageError(400, INVALID_UPSTREAM);
+    }
+}
+// Pin the connection to the addresses checked above so a second DNS lookup cannot rebind.
+function createPinnedLookup(hostname, addresses) {
+    return (name, options, callback) => {
+        if (name !== hostname) {
+            const error = new Error(`Unexpected lookup for ${name}`);
+            error.code = "ENOTFOUND";
+            callback(error, [], 0);
+            return;
+        }
+        const family = typeof options.family === "number" ? options.family : 0;
+        const matched = family ? addresses.filter((address) => address.family === family) : addresses;
+        if (matched.length === 0) {
+            const error = new Error(`No address available for ${hostname}`);
+            error.code = "ENOTFOUND";
+            callback(error, [], 0);
+            return;
+        }
+        if (options.all) {
+            callback(null, matched);
+        }
+        else {
+            callback(null, matched[0].address, matched[0].family);
+        }
+    };
+}
+function requestImage(url, hostname, addresses, signal) {
+    return new Promise((resolve, reject) => {
+        const request = url.protocol === "https:" ? httpsRequest : httpRequest;
+        const req = request(url, {
+            lookup: isIP(hostname) ? undefined : createPinnedLookup(hostname, addresses),
+            signal,
+            headers: { accept: "*/*", "accept-encoding": "identity", "user-agent": "rebask" },
+        }, resolve);
+        req.on("error", reject);
+        req.end();
+    });
+}
+export async function fetchRemoteImage(href, config) {
+    let current = new URL(href);
+    for (let redirects = 0; redirects <= config.maximumRedirects; redirects++) {
+        if (!hasRemoteMatch(config.remotePatterns, current)) {
+            throw new ImageError(400, NOT_ALLOWED);
+        }
+        const hostname = current.hostname.replace(/^\[|\]$/g, "");
+        const addresses = await resolveAddresses(hostname);
+        if (!config.dangerouslyAllowLocalIP &&
+            addresses.some((address) => isPrivateIp(address.address))) {
+            throw new ImageError(400, NOT_ALLOWED);
+        }
+        const signal = AbortSignal.timeout(TIMEOUT_MS);
+        let response;
+        try {
+            response = await requestImage(current, hostname, addresses, signal);
+        }
+        catch {
+            if (signal.aborted) {
+                throw new ImageError(504, TIMED_OUT);
+            }
+            throw new ImageError(400, INVALID_UPSTREAM);
+        }
+        const statusCode = response.statusCode ?? 0;
+        const location = response.headers.location;
+        if (REDIRECT_STATUSES.has(statusCode) && location) {
+            response.destroy();
+            if (redirects === config.maximumRedirects) {
+                throw new ImageError(508, INVALID_UPSTREAM);
+            }
+            let next;
+            try {
+                next = new URL(location, current);
+            }
+            catch {
+                throw new ImageError(400, INVALID_UPSTREAM);
+            }
+            if (next.protocol !== "http:" && next.protocol !== "https:") {
+                throw new ImageError(400, NOT_ALLOWED);
+            }
+            current = next;
+            continue;
+        }
+        if (statusCode < 200 || statusCode >= 300) {
+            response.destroy();
+            throw new ImageError(400, INVALID_UPSTREAM);
+        }
+        const buffer = await readBody(response, config.maximumResponseBody, signal);
+        return { buffer, cacheControl: parseCacheControl(response.headers["cache-control"]) };
+    }
+    throw new ImageError(508, INVALID_UPSTREAM);
+}

package/dist/lib/image-optimization/get-img-props.d.ts

@@ -1,12 +1,10 @@
 import type { CSSProperties, JSX } from "react";
-import type { ImageConfigComplete, ImageLoaderProps } from "./image-config.js";
+import type { ImageBlur, ImageConfigComplete, ImageLoaderProps } from "./image-config.js";
 export interface StaticImageData {
     src: string;
     height: number;
     width: number;
-    blurDataURL?: string;
-    blurWidth?: number;
-    blurHeight?: number;
+    blur?: ImageBlur;
 }
 export interface StaticRequire {
     default: StaticImageData;
@@ -44,7 +42,7 @@ export type PlaceholderStyle = Partial<Pick<CSSProperties, "backgroundSize" | "b
 /**
  * A shared function, used on both client and server, to generate the props for <img>.
  */
-export declare function getImgProps({ src, sizes, unoptimized, preload, loading, className, quality, width, height, fill, style, onLoad: _onLoad, placeholder, blurDataURL, fetchPriority, decoding, ...rest }: ImageProps, _state: {
+export declare function getImgProps({ src, sizes, unoptimized, preload, loading, className, quality, width, height, fill, style, loader: loaderProp, placeholder, blurDataURL, fetchPriority, decoding, ...rest }: ImageProps, _state: {
     imgConf: ImageConfigComplete;
     showAltText?: boolean;
     blurComplete?: boolean;

package/dist/lib/image-optimization/get-img-props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"get-img-props.d.ts","sourceRoot":"","sources":["../../../src/lib/image-optimization/get-img-props.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"get-img-props.d.ts","sourceRoot":"","sources":["../../../src/lib/image-optimization/get-img-props.ts"],"names":[],"mappings":"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"}

package/dist/lib/image-optimization/get-img-props.js

@@ -5,6 +5,9 @@ import { warnOnce } from "./warn-once.js";
 const VALID_LOADING_VALUES = ["lazy", "eager", undefined];
 // Object-fit values that are not valid background-size values
 const INVALID_BACKGROUND_SIZE_VALUES = ["-moz-initial", "fill", "none", "scale-down", undefined];
+const allImgs = new Map();
+let perfObserver;
+const preparedConfigs = new WeakMap();
 function isStaticRequire(src) {
     return src.default !== undefined;
 }
@@ -33,7 +36,8 @@ function getWidths({ deviceSizes, allSizes }, width, 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) {
+        let match;
+        while ((match = viewportWidthRe.exec(sizes))) {
             percentSizes.push(parseInt(match[2]));
         }
         if (percentSizes.length) {
@@ -58,14 +62,14 @@ function getWidths({ deviceSizes, allSizes }, width, sizes) {
         // > 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])),
+        [width, width * 2].map((w) => allSizes.find((p) => p >= w) || allSizes[allSizes.length - 1])),
     ];
     return { widths, kind: "x" };
 }
 /**
  * A shared function, used on both client and server, to generate the props for <img>.
  */
-export function getImgProps({ src, sizes, unoptimized = false, preload = false, loading, className, quality, width, height, fill = false, style, onLoad: _onLoad, placeholder = "empty", blurDataURL, fetchPriority, decoding = "async", ...rest }, _state) {
+export function getImgProps({ src, sizes, unoptimized = false, preload = false, loading, className, quality, width, height, fill = false, style, loader: loaderProp, placeholder = "empty", blurDataURL, fetchPriority, decoding = "async", ...rest }, _state) {
     const { imgConf, showAltText, blurComplete } = _state;
     let config;
     const c = imgConf || imageConfigDefault;
@@ -73,19 +77,22 @@ export function getImgProps({ src, sizes, unoptimized = false, preload = false,
         config = c;
     }
     else {
-        const allSizes = [...c.deviceSizes, ...c.imageSizes].sort((a, b) => a - b);
-        const deviceSizes = c.deviceSizes.sort((a, b) => a - b);
-        const qualities = c.qualities?.sort((a, b) => a - b);
-        config = { ...c, allSizes, deviceSizes, qualities };
+        const prepared = preparedConfigs.get(c);
+        if (prepared) {
+            config = prepared;
+        }
+        else {
+            const allSizes = [...c.deviceSizes, ...c.imageSizes].sort((a, b) => a - b);
+            const deviceSizes = [...c.deviceSizes].sort((a, b) => a - b);
+            const qualities = c.qualities ? [...c.qualities].sort((a, b) => a - b) : undefined;
+            config = { ...c, allSizes, deviceSizes, qualities };
+            preparedConfigs.set(c, config);
+        }
     }
-    const loader = rest.loader || defaultLoader;
-    // Remove property so it's not spread on <img> element
-    delete rest.loader;
-    delete rest.srcSet;
+    const loader = loaderProp || defaultLoader;
     // This special value indicates that the user
     // didn't define a "loader" prop.
     const isDefaultLoader = "__rebask_img_default" in loader;
-    let staticSrc = "";
     let widthInt = getInt(width);
     let heightInt = getInt(height);
     let blurWidth;
@@ -98,10 +105,10 @@ export function getImgProps({ src, sizes, unoptimized = false, preload = false,
         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;
+        blurWidth = staticImageData.blur?.width;
+        blurHeight = staticImageData.blur?.height;
+        blurDataURL = blurDataURL || staticImageData.blur?.dataURL;
+        src = staticImageData.src;
         if (!fill) {
             if (!widthInt && !heightInt) {
                 widthInt = staticImageData.width;
@@ -117,7 +124,6 @@ export function getImgProps({ src, sizes, unoptimized = false, preload = false,
             }
         }
     }
-    src = typeof src === "string" ? src : staticSrc;
     let isLazy = !preload && (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
@@ -133,13 +139,7 @@ export function getImgProps({ src, sizes, unoptimized = false, preload = false,
     }
     const qualityInt = getInt(quality);
     if (import.meta.env.DEV) {
-        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 (src) {
             if (fill) {
                 if (width) {
                     throw new Error(`Image with src "${src}" has both "width" and "fill" properties. Only one should be used.`);
@@ -170,12 +170,10 @@ export function getImgProps({ src, sizes, unoptimized = false, preload = false,
                 else if (isNaN(heightInt)) {
                     throw new Error(`Image with src "${src}" has invalid "height" property. Expected a numeric value in pixels but received "${height}".`);
                 }
-                const startsWithSpaceOrControl = src.length > 0 && src.charCodeAt(0) <= 0x20;
-                if (startsWithSpaceOrControl) {
+                if (src.length > 0 && src.charCodeAt(0) <= 0x20) {
                     throw new Error(`Image with src "${src}" cannot start with a space or control character. Use src.trimStart() to remove it or encodeURIComponent(src) to keep it.`);
                 }
-                const endsWithSpaceOrControl = src.length > 0 && src.charCodeAt(src.length - 1) <= 0x20;
-                if (endsWithSpaceOrControl) {
+                if (src.length > 0 && src.charCodeAt(src.length - 1) <= 0x20) {
                     throw new Error(`Image with src "${src}" cannot end with a space or control character. Use src.trimEnd() to remove it or encodeURIComponent(src) to keep it.`);
                 }
             }
@@ -191,12 +189,10 @@ export function getImgProps({ src, sizes, unoptimized = false, preload = false,
             !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) {
-                warnOnce(`Image with src "${src}" is smaller than 40x40. Consider removing the "placeholder" property to improve performance.`);
-            }
+        if (placeholder !== "empty" && widthInt && heightInt && widthInt * heightInt < 1600) {
+            warnOnce(`Image with src "${src}" is smaller than 40x40. Consider removing the "placeholder" property to improve performance.`);
         }
-        if (qualityInt && config.qualities && !config.qualities.includes(qualityInt)) {
+        if (qualityInt && config.qualities?.length && !config.qualities.includes(qualityInt)) {
             warnOnce(`Image with src "${src}" is using quality "${qualityInt}" which is not configured in images.qualities [${config.qualities.join(", ")}]. Please update your config to [${[...config.qualities, qualityInt].sort().join(", ")}].`);
         }
         if (placeholder === "blur" && !blurDataURL) {
@@ -205,6 +201,7 @@ export function getImgProps({ src, sizes, unoptimized = false, preload = false,
         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(",")} (animated images not supported)
+          - Install \`sharp\` so Rebask can generate the blur placeholder for static imports
           - Remove the "placeholder" property, effectively no blur effect`);
         }
     }
@@ -219,6 +216,7 @@ export function getImgProps({ src, sizes, unoptimized = false, preload = false,
             bottom: 0,
         }
         : {}, showAltText ? {} : { color: "transparent" }, style);
+    const objectFit = imgStyle.objectFit || "cover";
     const backgroundImage = !blurComplete && placeholder !== "empty"
         ? placeholder === "blur"
             ? `url("data:image/svg+xml;charset=utf-8,${getImageBlurSvg({
@@ -227,11 +225,10 @@ export function getImgProps({ src, sizes, unoptimized = false, preload = false,
                 blurWidth,
                 blurHeight,
                 blurDataURL: blurDataURL || "", // assume not undefined
-                objectFit: imgStyle.objectFit || "cover",
+                objectFit,
             })}")`
             : `url("${placeholder}")` // assume `data:image/`
         : null;
-    const objectFit = imgStyle.objectFit || "cover";
     const backgroundSize = !INVALID_BACKGROUND_SIZE_VALUES.includes(objectFit)
         ? objectFit
         : objectFit === "fill"
@@ -265,18 +262,16 @@ export function getImgProps({ src, sizes, unoptimized = false, preload = false,
     }
     else {
         const { widths, kind } = getWidths(config, widthInt, sizes);
-        const last = widths.length - 1;
+        const urls = widths.map((width) => loader({ config, src, quality: qualityInt, width }));
         imgSizes = !sizes && kind === "w" ? "100vw" : sizes;
-        imgSrcSet = widths
-            .map((w, i) => `${loader({ config, src, quality: qualityInt, width: w })} ${kind === "w" ? w : i + 1}${kind}`)
-            .join(", ");
+        imgSrcSet = urls.map((url, i) => `${url} ${kind === "w" ? widths[i] : 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.
-        imgSrc = loader({ config, src, quality: qualityInt, width: widths[last] });
+        imgSrc = urls[urls.length - 1];
     }
     const loadingFinal = isLazy ? "lazy" : loading;
     const props = {
@@ -293,5 +288,36 @@ export function getImgProps({ src, sizes, unoptimized = false, preload = false,
         src: imgSrc,
     };
     const meta = { unoptimized, preload, placeholder, fill };
+    if (import.meta.env.DEV && typeof window !== "undefined") {
+        if (!perfObserver && window.PerformanceObserver) {
+            perfObserver = new PerformanceObserver((entryList) => {
+                for (const entry of entryList.getEntries()) {
+                    const imgSrc = entry.element?.src ?? "";
+                    const image = allImgs.get(imgSrc);
+                    if (image &&
+                        image.loading === "lazy" &&
+                        image.placeholder === "empty" &&
+                        !image.src.startsWith("data:") &&
+                        !image.src.startsWith("blob:")) {
+                        warnOnce(`Image with src "${image.src}" was detected as the Largest Contentful Paint (LCP). Please add the \`loading="eager"\` property if this image is above the fold.`);
+                    }
+                }
+            });
+            try {
+                perfObserver.observe({ type: "largest-contentful-paint", buffered: true });
+            }
+            catch (error) {
+                console.error(error);
+            }
+        }
+        let fullUrl;
+        try {
+            fullUrl = new URL(props.src);
+        }
+        catch {
+            fullUrl = new URL(props.src, window.location.href);
+        }
+        allImgs.set(fullUrl.href, { src, loading: loadingFinal, placeholder });
+    }
     return { props, meta };
 }

package/dist/lib/image-optimization/handler.d.ts

@@ -1,5 +1,2 @@
-/**
- * Handler for image optimization requests.
- */
 export declare function handleImage(request: Request, sharp: any): Promise<Response>;
 //# sourceMappingURL=handler.d.ts.map

package/dist/lib/image-optimization/handler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"handler.d.ts","sourceRoot":"","sources":["../../../src/lib/image-optimization/handler.ts"],"names":[],"mappings":"AAkFA;;GAEG;AACH,wBAAsB,WAAW,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,GAAG,OAAO,CAAC,QAAQ,CAAC,CAgHjF"}
+{"version":3,"file":"handler.d.ts","sourceRoot":"","sources":["../../../src/lib/image-optimization/handler.ts"],"names":[],"mappings":"AA+TA,wBAAsB,WAAW,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,GAAG,OAAO,CAAC,QAAQ,CAAC,CA6LjF"}