cloudflare-next-intl 0.8.54 → 0.8.56

package/bin/image_optimizer.mjs

@@ -0,0 +1,12 @@
+#!/usr/bin/env node
+import path from "node:path";
+import { run } from "../dist/src/image_optimizer/run.js";
+import { resolveOptions } from "../dist/src/image_optimizer/types.js";
+
+const root = process.cwd();
+const options = resolveOptions();
+const cacheFile = path.resolve(root, options.cacheDir, "manifest.json");
+
+console.log("[cfni-image-optimizer] scanning images in", options.dirs.join(", "));
+const entries = await run(root, options, cacheFile);
+console.log(`[cfni-image-optimizer] processed ${entries.length} images into ${options.outDir}`);

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/dist/src/image_optimizer/run.d.ts

@@ -1,3 +1,3 @@
 import type { OptimizedImage, ResolvedOptions } from "./types.js";
 export declare function collectImages(dirs: string[], root: string): Promise<string[]>;
-export declare function run(root: string, options: ResolvedOptions, cacheFile: string): Promise<OptimizedImage[]>;
+export declare function run(root: string, options: ResolvedOptions, cacheFile?: string): Promise<OptimizedImage[]>;

package/dist/src/image_optimizer/run.js

@@ -41,27 +41,33 @@ function targetAndSiblingPaths(absolutePath, publicRoot, options, root) {
     }
     return result;
 }
-export async function run(root, options, cacheFile) {
-    const publicRoot = path.join(root, "public");
-    const files = await collectImages(options.dirs, root);
+export async function run(root, options, cacheFile = path.resolve(root, options.cacheDir, "manifest.json")) {
+    const publicRoot = path.resolve(root, "public");
+    const manifestPath = path.resolve(root, options.manifest);
     const cache = await loadCache(cacheFile);
-    const next = {};
+    const nextCache = {};
+    const files = await collectImages(options.dirs, root);
     const entries = [];
     for (const file of files) {
-        const key = path.relative(root, file);
-        const cached = cache[key];
+        const relativeKey = path.relative(root, file);
+        const cached = cache[relativeKey];
         const targets = targetAndSiblingPaths(file, publicRoot, options, root);
-        if (await isFresh(file, cached, targets)) {
-            next[key] = cached;
+        const fresh = await isFresh(file, cached, targets);
+        if (fresh && cached) {
             entries.push(cached.result);
+            nextCache[relativeKey] = cached;
             continue;
         }
         const result = await processImage(file, publicRoot, options, root);
-        const stats = await stat(file);
-        next[key] = { mtimeMs: stats.mtimeMs, size: stats.size, result };
+        const fileStat = await stat(file);
         entries.push(result);
+        nextCache[relativeKey] = {
+            mtimeMs: fileStat.mtimeMs,
+            size: fileStat.size,
+            result,
+        };
     }
-    await saveCache(cacheFile, next);
-    await writeManifest(path.resolve(root, options.manifest), entries);
+    await saveCache(cacheFile, nextCache);
+    await writeManifest(manifestPath, entries);
     return entries;
 }

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "cloudflare-next-intl",
-  "version": "0.8.54",
+  "version": "0.8.56",
   "description": "Optimized Next Intl Package Special for App Router and Cloudflare",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "type": "module",
   "sideEffects": false,
   "bin": {
     "cfni-db-codegen": "bin/db_codegen.mjs",
-    "cfni-db-install-exec": "bin/db_install_exec.mjs"
+    "cfni-db-install-exec": "bin/db_install_exec.mjs",
+    "cfni-image-optimizer": "bin/image_optimizer.mjs",
+    "optimize-images": "bin/image_optimizer.mjs"
   },
   "files": [
     "dist",