@ecopages/image-processor 0.2.1-beta.0 → 0.3.0

package/src/image-processor.js

@@ -1,141 +1,154 @@
-import path from "node:path";
-import { mergeProcessorOptions } from "@ecopages/core/plugins/processor";
-import { fileSystem } from "@ecopages/file-system";
-import { Logger } from "@ecopages/logger";
-import sharp from "sharp";
-import { ImageUtils } from "./image-utils.js";
-const appLogger = new Logger("[@ecopages/image-processor]", {
-  debug: process.env.ECOPAGES_LOGGER_DEBUG === "true"
+import path from 'node:path';
+import { writeHashedBrowserAsset } from '@ecopages/core/processor';
+import { mergeProcessorOptions } from '@ecopages/core/processor';
+import { fileSystem } from '@ecopages/file-system';
+import { Logger } from '@ecopages/logger';
+import { isEcopagesEnvEnabled } from '@ecopages/core/processor';
+import sharp, {} from 'sharp';
+import { ImageUtils } from './image-utils.js';
+const appLogger = new Logger('[@ecopages/image-processor]', {
+    debug: isEcopagesEnvEnabled('ECOPAGES_LOGGER_DEBUG'),
 });
-class ImageProcessor {
-  config;
-  cacheManager;
-  constructor(config, cacheManager) {
-    this.config = mergeProcessorOptions({ cacheEnabled: true }, config);
-    this.cacheManager = cacheManager;
-    fileSystem.ensureDir(this.config.outputDir);
-  }
-  async calculateDimensions(metadata, targetWidth) {
-    const originalWidth = metadata.width || 0;
-    const originalHeight = metadata.height || 0;
-    const aspectRatio = originalHeight / originalWidth;
-    const width = Math.min(targetWidth, originalWidth);
-    const height = Math.round(width * aspectRatio);
-    return { width, height };
-  }
-  getOutputPath(imagePath, width) {
-    const hash = fileSystem.hash(imagePath);
-    const ext = path.extname(imagePath);
-    const base = path.basename(imagePath, ext);
-    const filename = `${base}-${hash}-${width}.${this.config.format}`;
-    return path.join(this.config.outputDir, filename);
-  }
-  async processImage(imagePath) {
-    try {
-      const fileHash = fileSystem.hash(imagePath);
-      const cacheKey = `${path.basename(imagePath)}:${fileHash}`;
-      if (this.config.cacheEnabled) {
-        const cached = await this.cacheManager.readCache(cacheKey);
-        if (cached) {
-          const mainFilePath = path.join(process.cwd(), cached.attributes.src);
-          const mainFileExists = fileSystem.exists(mainFilePath);
-          const variantsExist = cached.variants.every(
-            (v) => fileSystem.exists(path.join(process.cwd(), v.src))
-          );
-          if (mainFileExists && variantsExist) {
-            appLogger.debug(`Cache hit for ${imagePath}`);
-            return cached;
-          }
-          appLogger.debug(`Cache invalid for ${imagePath}, reprocessing`);
+/**
+ * ImageProcessor
+ * This is the core class for processing images.
+ * It uses the sharp library to resize and optimize images.
+ */
+export class ImageProcessor {
+    config;
+    cacheManager;
+    constructor(config, cacheManager) {
+        this.config = mergeProcessorOptions({ cacheEnabled: true }, config);
+        this.cacheManager = cacheManager;
+        fileSystem.ensureDir(this.config.outputDir);
+    }
+    async calculateDimensions(metadata, targetWidth) {
+        const originalWidth = metadata.width || 0;
+        const originalHeight = metadata.height || 0;
+        const aspectRatio = originalHeight / originalWidth;
+        const width = Math.min(targetWidth, originalWidth);
+        const height = Math.round(width * aspectRatio);
+        return { width, height };
+    }
+    /**
+     * @remarks
+     * Includes encoding options so a quality or format change cannot reuse a previous
+     * variant. File names come from a hash of the encoded bytes, not this key.
+     */
+    encodingCacheKey(imagePath, fileHash) {
+        const sizesKey = this.config.sizes.map((size) => `${size.width}:${size.label}`).join(',');
+        return `${path.basename(imagePath)}:${fileHash}:q${this.config.quality}:${this.config.format}:${sizesKey}`;
+    }
+    writeEncodedVariant(bytes) {
+        return writeHashedBrowserAsset({
+            bytes,
+            directory: this.config.outputDir,
+            extension: `.${this.config.format}`,
+        });
+    }
+    async processImage(imagePath) {
+        try {
+            const fileHash = fileSystem.hash(imagePath);
+            const cacheKey = this.encodingCacheKey(imagePath, fileHash);
+            if (this.config.cacheEnabled) {
+                const cached = await this.cacheManager.readCache(cacheKey);
+                if (cached) {
+                    const mainFilePath = path.join(this.config.outputDir, path.basename(cached.attributes.src));
+                    const mainFileExists = fileSystem.exists(mainFilePath);
+                    const variantsExist = cached.variants.every((variant) => fileSystem.exists(path.join(this.config.outputDir, path.basename(variant.src))));
+                    if (mainFileExists && variantsExist) {
+                        appLogger.debug(`Cache hit for ${imagePath}`);
+                        return cached;
+                    }
+                    appLogger.debug(`Cache invalid for ${imagePath}, reprocessing`);
+                }
+            }
+            fileSystem.ensureDir(this.config.outputDir);
+            const metadata = await sharp(imagePath).metadata();
+            const originalWidth = metadata.width || 0;
+            const originalHeight = metadata.height || 0;
+            if (this.config.sizes.length === 0) {
+                const encoded = await sharp(imagePath)
+                    .toFormat(this.config.format, { quality: this.config.quality })
+                    .toBuffer();
+                const outputPath = this.writeEncodedVariant(encoded);
+                const src = path.join(this.config.publicPath, path.basename(outputPath));
+                const imageSpecifications = {
+                    attributes: {
+                        src,
+                        width: originalWidth,
+                        height: originalHeight,
+                        sizes: '',
+                    },
+                    variants: [],
+                    cacheKey,
+                };
+                if (this.config.cacheEnabled) {
+                    await this.cacheManager.writeCache(cacheKey, imageSpecifications);
+                }
+                return imageSpecifications;
+            }
+            let applicableSizes = this.config.sizes
+                .filter((size) => size.width <= originalWidth)
+                .sort((a, b) => b.width - a.width);
+            if (applicableSizes.length === 0) {
+                applicableSizes = this.config.sizes.sort((a, b) => b.width - a.width).slice(0, 1);
+            }
+            const variants = await Promise.all(applicableSizes.map(async ({ width: targetWidth, label }) => {
+                const { width, height } = await this.calculateDimensions(metadata, targetWidth);
+                const encoded = await sharp(imagePath)
+                    .resize(width, height)
+                    .toFormat(this.config.format, { quality: this.config.quality })
+                    .toBuffer();
+                const outputPath = this.writeEncodedVariant(encoded);
+                const src = path.join(this.config.publicPath, path.basename(outputPath));
+                return {
+                    width,
+                    height,
+                    src,
+                    label,
+                };
+            }));
+            const mainVariant = variants[0];
+            const attributes = {
+                src: mainVariant.src,
+                width: mainVariant.width,
+                height: mainVariant.height,
+                sizes: ImageUtils.generateSizes(variants),
+                srcset: ImageUtils.generateSrcset(variants),
+            };
+            const imageSpecifications = {
+                attributes,
+                variants,
+                cacheKey,
+            };
+            if (this.config.cacheEnabled) {
+                await this.cacheManager.writeCache(cacheKey, imageSpecifications);
+            }
+            return imageSpecifications;
+        }
+        catch (error) {
+            appLogger.error(`Failed to process image ${imagePath}:`, error);
+            return null;
         }
-      }
-      fileSystem.ensureDir(this.config.outputDir);
-      const metadata = await sharp(imagePath).metadata();
-      const originalWidth = metadata.width || 0;
-      const originalHeight = metadata.height || 0;
-      if (this.config.sizes.length === 0) {
-        const outputPath = this.getOutputPath(imagePath, originalWidth);
-        if (fileSystem.exists(outputPath)) {
-          appLogger.debug(`Using existing file for ${imagePath}`);
-        } else {
-          await sharp(imagePath).toFormat(this.config.format, { quality: this.config.quality }).toFile(outputPath);
+    }
+    async processDirectory() {
+        const acceptedFormats = this.config.acceptedFormats || ['jpg', 'jpeg', 'png', 'webp'];
+        const images = await fileSystem.glob([`${this.config.sourceDir}/**/*.{${acceptedFormats.join(',')}}`]);
+        appLogger.debugTime('Processing images');
+        const results = (await Promise.all(images.map(async (file) => {
+            const processed = await this.processImage(file);
+            if (!processed)
+                return null;
+            return [path.basename(file), processed];
+        }))).filter(Boolean);
+        appLogger.debugTimeEnd('Processing images');
+        if (isEcopagesEnvEnabled('ECOPAGES_BENCH') && !isEcopagesEnvEnabled('ECOPAGES_BENCH_VERBOSE')) {
+            appLogger.debug(`Processed ${results.length} images`);
         }
-        const src = path.join(this.config.publicPath, path.basename(outputPath));
-        const imageSpecifications2 = {
-          attributes: {
-            src,
-            width: originalWidth,
-            height: originalHeight,
-            sizes: ""
-          },
-          variants: [],
-          cacheKey
-        };
-        if (this.config.cacheEnabled) {
-          await this.cacheManager.writeCache(cacheKey, imageSpecifications2);
+        else {
+            appLogger.info(`Processed ${results.length} images`);
         }
-        return imageSpecifications2;
-      }
-      let applicableSizes = this.config.sizes.filter((size) => size.width <= originalWidth).sort((a, b) => b.width - a.width);
-      if (applicableSizes.length === 0) {
-        applicableSizes = this.config.sizes.sort((a, b) => b.width - a.width).slice(0, 1);
-      }
-      const variants = await Promise.all(
-        applicableSizes.map(async ({ width: targetWidth, label }) => {
-          const { width, height } = await this.calculateDimensions(metadata, targetWidth);
-          const outputPath = this.getOutputPath(imagePath, width);
-          if (fileSystem.exists(outputPath)) {
-            appLogger.debug(`Variant ${width}px already exists for ${imagePath}`);
-          } else {
-            await sharp(imagePath).resize(width, height).toFormat(this.config.format, { quality: this.config.quality }).toFile(outputPath);
-          }
-          const src = path.join(this.config.publicPath, path.basename(outputPath));
-          return {
-            width,
-            height,
-            src,
-            label
-          };
-        })
-      );
-      const mainVariant = variants[0];
-      const attributes = {
-        src: mainVariant.src,
-        width: mainVariant.width,
-        height: mainVariant.height,
-        sizes: ImageUtils.generateSizes(variants),
-        srcset: ImageUtils.generateSrcset(variants)
-      };
-      const imageSpecifications = {
-        attributes,
-        variants,
-        cacheKey
-      };
-      if (this.config.cacheEnabled) {
-        await this.cacheManager.writeCache(cacheKey, imageSpecifications);
-      }
-      return imageSpecifications;
-    } catch (error) {
-      appLogger.error(`Failed to process image ${imagePath}:`, error);
-      return null;
+        return Object.fromEntries(results);
     }
-  }
-  async processDirectory() {
-    const acceptedFormats = this.config.acceptedFormats || ["jpg", "jpeg", "png", "webp"];
-    const images = await fileSystem.glob([`${this.config.sourceDir}/**/*.{${acceptedFormats.join(",")}}`]);
-    appLogger.debugTime("Processing images");
-    const results = (await Promise.all(
-      images.map(async (file) => {
-        const processed = await this.processImage(file);
-        if (!processed) return null;
-        return [path.basename(file), processed];
-      })
-    )).filter(Boolean);
-    appLogger.debugTimeEnd("Processing images");
-    appLogger.info(`Processed ${results.length} images`);
-    return Object.fromEntries(results);
-  }
 }
-export {
-  ImageProcessor
-};

package/src/image-renderer.d.ts

@@ -92,7 +92,7 @@ export interface GenerateAttributesResultJsx {
     sizes?: string;
     width?: number;
     height?: number;
-    style?: React.CSSProperties;
+    style?: Record<string, string>;
 }
 /**
  * IImageRenderer