@ecopages/image-processor 0.2.0-alpha.9 → 0.2.1

package/CHANGELOG.md

@@ -4,18 +4,15 @@ 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
+## [0.2.1] — 2026-04-16
 
 ### 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.
+- Added shared image plugin helpers for multiple build adapters and Bun-specific adapter wiring.
 
 ### 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`.
+- Fixed ESM internal imports, generated declaration bundling, and exported image outputs in static builds.
 
 ### Tests
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecopages/image-processor",
-  "version": "0.2.0-alpha.9",
+  "version": "0.2.1",
   "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.1"
   },
   "dependencies": {
-    "@ecopages/file-system": "0.2.0-alpha.9",
-    "@ecopages/logger": "latest",
+    "@ecopages/file-system": "0.2.1",
+    "@ecopages/logger": "^0.2.3",
     "react": "^19",
     "react-dom": "^19",
-    "sharp": "^0.33.5"
+    "sharp": "^0.34.5"
   },
   "exports": {
     ".": {

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);
-	}
-}