@rebask/core 0.3.0 → 0.4.0

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"}