@ecopages/image-processor 0.2.0-alpha.9 → 0.2.0-beta.0

package/README.md

@@ -15,7 +15,7 @@ It provides automatic image processing (e.g. converting and compressing to WebP)
 ## Installation
 
 ```bash
-bunx jsr add @ecopages/image-processor
+bun add @ecopages/image-processor
 ```
 
 ## Configuration

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/image-processor",
-  "version": "0.2.0-alpha.9",
+  "version": "0.2.0-beta.0",
   "description": "Image processor, transform and optimize images for web",
   "keywords": [
     "image",
@@ -15,14 +15,14 @@
     "directory": "packages/processors/image-processor"
   },
   "peerDependencies": {
-    "@ecopages/core": "0.2.0-alpha.9"
+    "@ecopages/core": "0.2.0-beta.0"
   },
   "dependencies": {
-    "@ecopages/file-system": "0.2.0-alpha.9",
-    "@ecopages/logger": "latest",
-    "react": "^19",
-    "react-dom": "^19",
-    "sharp": "^0.33.5"
+    "@ecopages/file-system": "0.2.0-beta.0",
+    "@ecopages/logger": "^0.2.3",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "sharp": "^0.34.5"
   },
   "exports": {
     ".": {

package/src/bun-plugins.d.ts

@@ -2,7 +2,7 @@
  * This file contains the plugins for bundling the image specifications.
  * @module @ecopages/image-processor/bun-plugins
  */
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import type { EcoBuildPlugin } from '@ecopages/core/plugins/processor';
 import type { ImageMap } from './plugin.js';
 /**
  * This function creates a plugin for bundling the image specifications.

package/src/image-plugins.d.ts

@@ -2,7 +2,7 @@
  * This file contains the plugins for bundling the image specifications.
  * @module @ecopages/image-processor/image-plugins
  */
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import type { EcoBuildPlugin } from '@ecopages/core/plugins/processor';
 import type { ImageMap } from './plugin.js';
 /**
  * This function creates a plugin for bundling the image specifications.

package/src/image-processor.js

@@ -1,5 +1,5 @@
 import path from "node:path";
-import { deepMerge } from "@ecopages/core/utils/deep-merge";
+import { mergeProcessorOptions } from "@ecopages/core/plugins/processor";
 import { fileSystem } from "@ecopages/file-system";
 import { Logger } from "@ecopages/logger";
 import sharp from "sharp";
@@ -11,7 +11,7 @@ class ImageProcessor {
   config;
   cacheManager;
   constructor(config, cacheManager) {
-    this.config = deepMerge({ cacheEnabled: true }, config);
+    this.config = mergeProcessorOptions({ cacheEnabled: true }, config);
     this.cacheManager = cacheManager;
     fileSystem.ensureDir(this.config.outputDir);
   }

package/src/plugin.d.ts

@@ -2,8 +2,7 @@
  * ImageProcessorPlugin
  * @module @ecopages/image-processor
  */
-import { Processor, type ProcessorConfig } from '@ecopages/core/plugins/processor';
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
+import { Processor, type EcoBuildPlugin, type ProcessorConfig } from '@ecopages/core/plugins/processor';
 import { ImageProcessor } from './image-processor.js';
 import type { ImageSize, ImageSpecifications } from './types.js';
 /**

package/src/plugin.js

@@ -1,8 +1,10 @@
 import path from "node:path";
-import { deepMerge } from "@ecopages/core/utils/deep-merge";
 import { GENERATED_BASE_PATHS } from "@ecopages/core/constants";
 import { fileSystem } from "@ecopages/file-system";
-import { Processor } from "@ecopages/core/plugins/processor";
+import {
+  mergeProcessorOptions,
+  Processor
+} from "@ecopages/core/plugins/processor";
 import { Logger } from "@ecopages/logger";
 import { createImagePlugin, createImagePluginBundler } from "./image-plugins.js";
 import { ImageProcessor } from "./image-processor.js";
@@ -85,7 +87,7 @@ class ImageProcessorPlugin extends Processor {
           extensions: extensionPatterns
         }
       ],
-      watch: config.watch ? deepMerge(defaultWatchConfig, config.watch) : defaultWatchConfig
+      watch: config.watch ? mergeProcessorOptions(defaultWatchConfig, config.watch) : defaultWatchConfig
     });
   }
   get buildPlugins() {
@@ -130,7 +132,7 @@ class ImageProcessorPlugin extends Processor {
       quality: 80,
       format: "webp"
     };
-    const config = this.options ? deepMerge(defaultConfig, this.options) : defaultConfig;
+    const config = this.options ? mergeProcessorOptions(defaultConfig, this.options) : defaultConfig;
     this.resolvedConfig = config;
     this.processor = new ImageProcessor(config, {
       readCache: (key) => this.readCache(key),

package/CHANGELOG.md

@@ -1,22 +0,0 @@
-# Changelog
-
-All notable changes to `@ecopages/image-processor` are documented here.
-
-> **Note:** Changelog tracking begins at version `0.2.0`. Changes prior to this release are not recorded here but are available in the git history.
-
-## [UNRELEASED] — TBD
-
-### Features
-
-- Added `image-plugins.ts` with shared image plugin creation so the processor can target multiple build adapters.
-- Added `bun-plugins.ts` with Bun-specific build adapter helpers aligned with the shared image plugin layer.
-
-### Bug Fixes
-
-- Switched public internal imports to explicit relative ESM specifiers so Node thin-host builds can externalize the package without `ERR_MODULE_NOT_FOUND`.
-- Inlined the generated `ecopages:images` declaration source so bundled runtime bootstrap no longer depends on a sibling `types` module at runtime.
-- Re-emitted generated image outputs after static export cleanup so routes that reference `/images/...` keep their optimized files inside `dist`.
-
-### Tests
-
-- Added image processor and renderer coverage for the current build pipeline.

package/src/bun-plugins.ts

@@ -1,59 +0,0 @@
-/**
- * This file contains the plugins for bundling the image specifications.
- * @module @ecopages/image-processor/bun-plugins
- */
-
-import type { EcoBuildOnLoadResult, EcoBuildPlugin } from '@ecopages/core/build/build-types';
-import type { ImageMap } from './plugin.ts';
-import { anyCaseToCamelCase } from './utils.ts';
-
-/**
- * This function creates the plugin result for the image specifications.
- */
-function createPluginResult(exports: ImageMap): EcoBuildOnLoadResult {
-	return {
-		contents: `${Object.entries(exports)
-			.map(([key, value]) => `export const ${anyCaseToCamelCase(key)} = ${JSON.stringify(value)};`)
-			.join('\n')}`,
-		loader: 'ts',
-	};
-}
-
-/**
- * This function creates a plugin for bundling the image specifications.
- * https://bun.sh/docs/runtime/plugins#virtual-modules
- * @param exports
- * @returns
- */
-export function createImagePlugin(exports: ImageMap): EcoBuildPlugin {
-	return {
-		name: 'ecopages:images',
-		setup(build) {
-			build.module('ecopages:images', () => createPluginResult(exports));
-		},
-	};
-}
-
-/**
- * This function creates a plugin for bundling the image specifications.
- * Due to some limitations in the bundler, we need to use a different approach.
- * https://bun.sh/docs/runtime/plugins#virtual-modules > bun-v1.2.5
- * (This feature is currently only available at runtime with Bun.plugin and not yet supported in the bundler, but you can mimic the behavior using onResolve and onLoad.)
- * @param exports
- * @returns
- */
-export function createImagePluginBundler(exports: ImageMap): EcoBuildPlugin {
-	return {
-		name: 'ecopages:images',
-		setup(build) {
-			build.onResolve({ filter: /^ecopages:images$/ }, () => {
-				return {
-					namespace: 'ecopages-images',
-					path: 'ecopages:images',
-				};
-			});
-
-			build.onLoad({ filter: /.*/, namespace: 'ecopages-images' }, () => createPluginResult(exports));
-		},
-	};
-}

package/src/component/html.ts

@@ -1,15 +0,0 @@
-/**
- * Image component that renders the image as a string.
- * @module @ecopages/image-processor/component/html
- */
-
-import { type EcoImageProps, renderer } from '../image-renderer.ts';
-
-/**
- * EcoImage
- * This component generates the image element based on the provided props as a string
- * @param props {@link EcoImageProps}
- */
-export const EcoImage = (props: EcoImageProps): string => {
-	return renderer.renderToString(props);
-};

package/src/component/react.ts

@@ -1,20 +0,0 @@
-/**
- * Image component that renders the image as a string.
- * @module @ecopages/image-processor/component/react
- */
-
-import { createElement, type JSX } from 'react';
-import { type EcoImageProps, renderer } from '../image-renderer.ts';
-
-/**
- * EcoImage
- * This component generates the image element based on the provided props as JSX
- * @param props {@link EcoImageProps}
- * @returns
- */
-export const EcoImage = (props: EcoImageProps): JSX.Element => {
-	return createElement('img', {
-		...renderer.generateAttributesJsx(props),
-		suppressHydrationWarning: true,
-	});
-};

package/src/constants.ts

@@ -1,7 +0,0 @@
-import type { ImageLayout } from './image-renderer.ts';
-
-/**
- * Default image layout
- * @constant "constrained"
- */
-export const DEFAULT_LAYOUT: ImageLayout = 'constrained';

package/src/image-plugins.ts

@@ -1,59 +0,0 @@
-/**
- * This file contains the plugins for bundling the image specifications.
- * @module @ecopages/image-processor/image-plugins
- */
-
-import type { EcoBuildOnLoadResult, EcoBuildPlugin } from '@ecopages/core/build/build-types';
-import type { ImageMap } from './plugin.ts';
-import { anyCaseToCamelCase } from './utils.ts';
-
-/**
- * This function creates the plugin result for the image specifications.
- */
-function createPluginResult(exports: ImageMap): EcoBuildOnLoadResult {
-	return {
-		contents: `${Object.entries(exports)
-			.map(([key, value]) => `export const ${anyCaseToCamelCase(key)} = ${JSON.stringify(value)};`)
-			.join('\n')}`,
-		loader: 'ts',
-	};
-}
-
-/**
- * This function creates a plugin for bundling the image specifications.
- * https://bun.sh/docs/runtime/plugins#virtual-modules
- * @param exports
- * @returns
- */
-export function createImagePlugin(exports: ImageMap): EcoBuildPlugin {
-	return {
-		name: 'ecopages:images',
-		setup(build) {
-			build.module('ecopages:images', () => createPluginResult(exports));
-		},
-	};
-}
-
-/**
- * This function creates a plugin for bundling the image specifications.
- * Due to some limitations in the bundler, we need to use a different approach.
- * https://bun.sh/docs/runtime/plugins#virtual-modules > bun-v1.2.5
- * (This feature is currently only available at runtime with Bun.plugin and not yet supported in the bundler, but you can mimic the behavior using onResolve and onLoad.)
- * @param exports
- * @returns
- */
-export function createImagePluginBundler(exports: ImageMap): EcoBuildPlugin {
-	return {
-		name: 'ecopages:images',
-		setup(build) {
-			build.onResolve({ filter: /^ecopages:images$/ }, () => {
-				return {
-					namespace: 'ecopages-images',
-					path: 'ecopages:images',
-				};
-			});
-
-			build.onLoad({ filter: /.*/, namespace: 'ecopages-images' }, () => createPluginResult(exports));
-		},
-	};
-}

package/src/image-processor.ts

@@ -1,201 +0,0 @@
-import path from 'node:path';
-import { deepMerge } from '@ecopages/core/utils/deep-merge';
-import { fileSystem } from '@ecopages/file-system';
-import { Logger } from '@ecopages/logger';
-import sharp from 'sharp';
-import { ImageUtils } from './image-utils.ts';
-import type { ImageMap, ImageProcessorConfig } from './plugin.ts';
-import type { ImageAttributes, ImageSpecifications, ImageVariant } from './types.ts';
-
-const appLogger = new Logger('[@ecopages/image-processor]', {
-	debug: process.env.ECOPAGES_LOGGER_DEBUG === 'true',
-});
-
-/**
- * ImageProcessor
- * This is the core class for processing images.
- * It uses the sharp library to resize and optimize images.
- */
-export class ImageProcessor {
-	private readonly config: ImageProcessorConfig;
-	private readonly cacheManager: {
-		readCache: <T>(key: string) => Promise<T | null>;
-		writeCache: <T>(key: string, data: T) => Promise<void>;
-	};
-
-	constructor(
-		config: ImageProcessorConfig,
-		cacheManager: {
-			readCache: <T>(key: string) => Promise<T | null>;
-			writeCache: <T>(key: string, data: T) => Promise<void>;
-		},
-	) {
-		this.config = deepMerge({ cacheEnabled: true }, config);
-		this.cacheManager = cacheManager;
-		fileSystem.ensureDir(this.config.outputDir);
-	}
-
-	private async calculateDimensions(metadata: sharp.Metadata, targetWidth: number) {
-		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 };
-	}
-
-	private getOutputPath(imagePath: string, width: number) {
-		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: string): Promise<ImageSpecifications | null> {
-		try {
-			const fileHash = fileSystem.hash(imagePath);
-			const cacheKey = `${path.basename(imagePath)}:${fileHash}`;
-
-			if (this.config.cacheEnabled) {
-				const cached = await this.cacheManager.readCache<ImageSpecifications>(cacheKey);
-				if (cached) {
-					/**
-					 * Verify that the files actually exist
-					 * We construct the absolute path relative to the process current working directory
-					 * since the src in attributes is relative from the root
-					 */
-					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`);
-				}
-			}
-
-			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);
-				}
-
-				const src = path.join(this.config.publicPath, path.basename(outputPath));
-
-				const imageSpecifications: 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: ImageVariant[] = 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: ImageAttributes = {
-				src: mainVariant.src,
-				width: mainVariant.width,
-				height: mainVariant.height,
-				sizes: ImageUtils.generateSizes(variants),
-				srcset: ImageUtils.generateSrcset(variants),
-			};
-
-			const imageSpecifications: 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 as Error);
-			return null;
-		}
-	}
-
-	async processDirectory(): Promise<ImageMap> {
-		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] as [string, ImageSpecifications];
-				}),
-			)
-		).filter(Boolean) as [string, ImageSpecifications][];
-
-		appLogger.debugTimeEnd('Processing images');
-		appLogger.info(`Processed ${results.length} images`);
-
-		return Object.fromEntries(results);
-	}
-}