cloudflare-next-intl 0.8.55 → 0.8.56

package/dist/src/image_optimizer/blur_svg.js

@@ -1,3 +1,12 @@
+function toBase64(str) {
+    if (typeof Buffer !== "undefined") {
+        return Buffer.from(str).toString("base64");
+    }
+    if (typeof btoa === "function") {
+        return btoa(unescape(encodeURIComponent(str)));
+    }
+    return "";
+}
 export function getImageBlurSvg(blurDataURL, blurWidth, blurHeight, objectFit, stdDeviation = 20) {
     const std = stdDeviation;
     const viewBox = blurWidth && blurHeight
@@ -11,6 +20,6 @@ export function getImageBlurSvg(blurDataURL, blurWidth, blurHeight, objectFit, s
                 ? "xMidYMid slice"
                 : "none";
     const svg = `<svg xmlns='http://www.w3.org/2000/svg' ${viewBox}><filter id='b' color-interpolation-filters='sRGB'><feGaussianBlur stdDeviation='${std}'/><feColorMatrix values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 100 -1' result='s'/><feFlood x='0' y='0' width='100%' height='100%'/><feComposite operator='out' in='s'/><feComposite in2='SourceGraphic'/><feGaussianBlur stdDeviation='${std}'/></filter><image width='100%' height='100%' x='0' y='0' preserveAspectRatio='${preserveAspectRatio}' style='filter: url(#b);' href='${blurDataURL}'/></svg>`;
-    const base64 = Buffer.from(svg).toString("base64");
+    const base64 = toBase64(svg);
     return `data:image/svg+xml;base64,${base64}`;
 }

package/dist/src/image_optimizer/next_image_shim.js

@@ -6,26 +6,71 @@ const manifestData = manifest;
 const images = (manifestData && typeof manifestData === "object" && manifestData.images)
     ? manifestData.images
     : {};
+function findEntry(srcVal) {
+    if (!srcVal)
+        return undefined;
+    const raw = typeof srcVal === "string"
+        ? srcVal
+        : (typeof srcVal === "object" && srcVal !== null && "src" in srcVal)
+            ? String(srcVal.src)
+            : String(srcVal);
+    if (images[raw])
+        return images[raw];
+    const withoutPublic = raw.replace(/^\/?public/, "");
+    if (images[withoutPublic])
+        return images[withoutPublic];
+    const withSlash = withoutPublic.startsWith("/") ? withoutPublic : "/" + withoutPublic;
+    if (images[withSlash])
+        return images[withSlash];
+    const clean = withSlash.split("?")[0].split("#")[0];
+    if (images[clean])
+        return images[clean];
+    for (const [key, entry] of Object.entries(images)) {
+        const filename = key.split("/").pop();
+        if (filename && (clean.endsWith("/" + filename) || clean.includes(filename.split(".")[0]))) {
+            return entry;
+        }
+    }
+    return undefined;
+}
 function resolveProps(props) {
     let src = props.src;
     let blurDataURL = props.blurDataURL;
     let width = props.width;
     let height = props.height;
-    if (typeof src === "string") {
-        const entry = images[src];
-        if (entry) {
-            if (entry.src)
+    let style = props.style;
+    const entry = findEntry(src);
+    if (entry) {
+        if (entry.src) {
+            if (typeof src === "string") {
                 src = entry.src;
-            if (!blurDataURL && props.placeholder === "blur" && entry.blurDataURL) {
-                blurDataURL = getImageBlurSvg(entry.blurDataURL, entry.blurWidth, entry.blurHeight, props.style?.objectFit);
             }
-            if (!width && !props.fill && entry.width) {
-                width = entry.width;
-                height = entry.height;
+            else if (typeof src === "object" && src !== null && "src" in src) {
+                src = { ...src, src: entry.src };
+            }
+            else {
+                src = entry.src;
             }
         }
+        if (!blurDataURL && props.placeholder === "blur" && entry.blurDataURL) {
+            blurDataURL = getImageBlurSvg(entry.blurDataURL, entry.blurWidth, entry.blurHeight, props.style?.objectFit);
+        }
+        if (!width && !props.fill && entry.width) {
+            width = entry.width;
+            height = entry.height;
+        }
+    }
+    if (props.placeholder === "blur" && blurDataURL) {
+        const objectFit = props.style?.objectFit || (props.className?.includes("object-contain") ? "contain" : "cover");
+        style = {
+            backgroundSize: objectFit,
+            backgroundPosition: "50% 50%",
+            backgroundRepeat: "no-repeat",
+            backgroundImage: `url("${blurDataURL}")`,
+            ...style,
+        };
     }
-    return { ...props, src, blurDataURL, width, height };
+    return { ...props, src, blurDataURL, width, height, style };
 }
 export default function Image(props) {
     const resolved = resolveProps(props);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudflare-next-intl",
-  "version": "0.8.55",
+  "version": "0.8.56",
   "description": "Optimized Next Intl Package Special for App Router and Cloudflare",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",