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

package/src/plugin.ts

@@ -1,457 +0,0 @@
-/**
- * ImageProcessorPlugin
- * @module @ecopages/image-processor
- */
-
-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, type ProcessorConfig, type ProcessorWatchConfig } from '@ecopages/core/plugins/processor';
-import type { EcoBuildPlugin } from '@ecopages/core/build/build-types';
-import type { AssetDefinition } from '@ecopages/core/services/asset-processing-service';
-import { Logger } from '@ecopages/logger';
-import { createImagePlugin, createImagePluginBundler } from './image-plugins.ts';
-import { ImageProcessor } from './image-processor.ts';
-import type { ImageSize, ImageSpecifications } from './types.ts';
-import { anyCaseToCamelCase } from './utils.ts';
-
-function resolveGeneratedPath(
-	type: keyof typeof GENERATED_BASE_PATHS,
-	options: { root: string; module: string; subPath?: string },
-): string {
-	const { root, module, subPath } = options;
-	const parts = [root, GENERATED_BASE_PATHS[type], module, subPath].filter(Boolean);
-	return path.join(...(parts as string[]));
-}
-
-const logger = new Logger('[@ecopages/image-processor]', {
-	debug: process.env.ECOPAGES_LOGGER_DEBUG === 'true',
-});
-
-const IMAGE_VIRTUAL_MODULE_TYPES = `/**
- * ImageAttributes
- * These are the core attributes for the image element generated by the image processor
- */
-interface ImageAttributes {
-	src: string;
-	width: number;
-	height: number;
-	sizes: string;
-	srcset?: string;
-}
-
-/**
- * This represents a single image variant created using the size configuration
- */
-interface ImageVariant {
-	width: number;
-	height: number;
-	src: string;
-	label: string;
-}
-
-/**
- * These are the core attributes for the image element and the image variants
- * This is the representation of the image element in the virtual module
- */
-interface ImageSpecifications {
-	attributes: ImageAttributes;
-	variants: ImageVariant[];
-	/**
-	 * A unique key used to cache the image specifications.
-	 * This key should uniquely identify the combination of attributes and variants
-	 * to ensure proper caching behavior.
-	 */
-	cacheKey: string;
-}
-
-/**
- * This is the representation of an image breakpoint
- * This is used to generate the srcset attribute
- */
-type ImageSize = {
-	width: number;
-	label: string;
-};`;
-
-/**
- * Configuration for the image processor
- */
-export interface ImageProcessorConfig {
-	sourceDir: string;
-	outputDir: string;
-	publicPath: string;
-	/**
-	 * @default []
-	 */
-	sizes: ImageSize[];
-	quality: number;
-	format: 'webp' | 'jpeg' | 'png' | 'avif';
-	/**
-	 * Optional list of accepted image formats
-	 * @default ["jpg", "jpeg", "png", "webp"]
-	 */
-	acceptedFormats?: string[];
-	/**
-	 * @default true
-	 */
-	cacheEnabled?: boolean;
-}
-
-/**
- * ImageMap
- * This is the representation of the image map in the virtual module
- */
-export type ImageMap = Record<string, ImageSpecifications>;
-
-/**
- * ImageProcessorPlugin
- * A Processor for optimizing images.
- */
-export class ImageProcessorPlugin extends Processor<ImageProcessorConfig> {
-	declare private processor: ImageProcessor;
-	private buildContributionsPrepared = false;
-	private resolvedConfig?: ImageProcessorConfig;
-	public processedImages: Record<string, ImageSpecifications> = {};
-
-	constructor(config: Omit<ProcessorConfig<ImageProcessorConfig>, 'name' | 'description'>) {
-		const acceptedFormats = config.options?.acceptedFormats ?? ['jpg', 'jpeg', 'png', 'webp'];
-		const extensionPatterns = acceptedFormats.map((format) => `*.${format.replace(/^\./, '')}`);
-
-		const defaultWatchConfig: ProcessorWatchConfig = {
-			paths: [],
-			extensions: acceptedFormats,
-			onCreate: async (ctx) => this.process([ctx.path]),
-			onChange: async (ctx) => this.process([ctx.path]),
-			onDelete: async (ctx) => this.deleteProcessedImagesbyPath(ctx.path),
-			onError: (error) => logger.error('Watcher error', { error }),
-		};
-
-		super({
-			...config,
-			name: 'ecopages-image-processor',
-			description: 'A Processor for optimizing images.',
-			capabilities: [
-				{
-					kind: 'image',
-					extensions: extensionPatterns,
-				},
-			],
-			watch: config.watch ? deepMerge(defaultWatchConfig, config.watch) : defaultWatchConfig,
-		});
-	}
-
-	get buildPlugins(): EcoBuildPlugin[] {
-		return [createImagePluginBundler(this.processedImages)];
-	}
-
-	get plugins(): EcoBuildPlugin[] {
-		return [createImagePlugin(this.processedImages)];
-	}
-
-	/**
-	 * Replaces image-map contents without swapping the backing object.
-	 *
-	 * @remarks
-	 * The build/runtime virtual-module plugins close over `processedImages`, so
-	 * mutating the existing object keeps those plugins live after preparation.
-	 */
-	private replaceProcessedImages(images: ImageMap): void {
-		for (const key of Object.keys(this.processedImages)) {
-			delete this.processedImages[key];
-		}
-
-		Object.assign(this.processedImages, images);
-	}
-
-	/**
-	 * Prepares the image virtual-module state before config build seals the app
-	 * manifest.
-	 */
-	override async prepareBuildContributions(): Promise<void> {
-		if (this.buildContributionsPrepared) {
-			return;
-		}
-
-		if (!this.context) {
-			throw new Error('ImageProcessor requires context to be set');
-		}
-
-		logger.debug('Setting up image processor', {
-			srcDir: this.context.srcDir,
-			distDir: this.context.distDir,
-		});
-
-		const defaultConfig = {
-			sourceDir: `${this.context.srcDir}/public/assets/images`,
-			outputDir: `${this.context.distDir}/assets/optimized`,
-			publicPath: '/assets/optimized',
-			sizes: [],
-			quality: 80,
-			format: 'webp' as const,
-		};
-
-		const config = this.options ? deepMerge(defaultConfig, this.options) : defaultConfig;
-		this.resolvedConfig = config;
-
-		this.processor = new ImageProcessor(config, {
-			readCache: (key) => this.readCache(key),
-			writeCache: (key, data) => this.writeCache(key, data),
-		});
-
-		this.replaceProcessedImages(await this.processor.processDirectory());
-
-		if (this.watchConfig) {
-			this.watchConfig.paths = [config.sourceDir];
-		}
-
-		this.dependencies = this.generateDependencies();
-		this.generateTypes();
-		this.buildContributionsPrepared = true;
-	}
-
-	private getRuntimeVirtualModulePath(): string {
-		if (!this.context) {
-			throw new Error('ImageProcessor requires context to be set');
-		}
-
-		return resolveGeneratedPath('cache', {
-			root: this.context.distDir,
-			module: this.name,
-			subPath: 'virtual-module.ts',
-		});
-	}
-
-	private getGeneratedOutputPath(src: string): string {
-		if (!this.resolvedConfig) {
-			throw new Error('ImageProcessor not initialized');
-		}
-
-		return path.join(this.resolvedConfig.outputDir, path.basename(src));
-	}
-
-	private hasGeneratedOutputs(): boolean {
-		if (!this.resolvedConfig) {
-			return false;
-		}
-
-		if (
-			!fileSystem.exists(this.resolvedConfig.outputDir) ||
-			!fileSystem.exists(this.getRuntimeVirtualModulePath())
-		) {
-			return false;
-		}
-
-		return Object.values(this.processedImages).every((image) => {
-			const outputPaths = [image.attributes.src, ...image.variants.map((variant) => variant.src)];
-			return outputPaths.every((src) => fileSystem.exists(this.getGeneratedOutputPath(src)));
-		});
-	}
-
-	private async rehydrateGeneratedOutputs(): Promise<void> {
-		if (!this.processor) {
-			throw new Error('ImageProcessor not initialized');
-		}
-
-		if (this.hasGeneratedOutputs()) {
-			return;
-		}
-
-		this.replaceProcessedImages(await this.processor.processDirectory());
-		this.dependencies = this.generateDependencies();
-		this.generateTypes();
-	}
-
-	/**
-	 * Generate dependencies for processor.
-	 * It is ossible to define which one should be included in the final bundle based on the environment.
-	 * @returns
-	 */
-	private generateDependencies(): AssetDefinition[] {
-		const deps: AssetDefinition[] = [];
-
-		if (process.env.NODE_ENV === 'development') {
-			/**
-			 * Here we can define the dependencies for the development environment
-			 * @example
-			 * deps.push(
-			 *   AssetFactory.createInlineScriptAsset({
-			 *     content: `document.addEventListener("DOMContentLoaded",() => console.log("[@ecopages/image-processor] Processor is loaded"));`,
-			 *     attributes: {
-			 *       type: 'module',
-			 *     },
-			 *   }),
-			 * );
-			 */
-		}
-
-		return deps;
-	}
-
-	/**
-	 * Prepares build contributions if not already done and rehydrates previously generated image outputs.
-	 */
-	async setup(): Promise<void> {
-		await this.prepareBuildContributions();
-		await this.rehydrateGeneratedOutputs();
-	}
-
-	/**
-	 * Process images.
-	 * @param images
-	 */
-	async process(images: string[]): Promise<void> {
-		if (!this.processor) {
-			throw new Error('ImageProcessor not initialized');
-		}
-
-		logger.debug('Processing images', { count: images.length });
-
-		for (const image of images) {
-			try {
-				const result = await this.processor.processImage(image);
-				if (result) {
-					this.processedImages[path.basename(image)] = result;
-				}
-			} catch (error) {
-				logger.error('Failed to process image', { image, error });
-			}
-		}
-
-		this.generateTypes();
-	}
-
-	/**
-	 * Delete processed images using the original image path.
-	 * @param imagePath
-	 */
-	async deleteProcessedImagesbyPath(imagePath: string): Promise<void> {
-		if (!this.processor) {
-			throw new Error('ImageProcessor not initialized');
-		}
-
-		logger.debug('Deleting processed images', { path: imagePath });
-
-		try {
-			const baseNameWithoutExt = path.basename(imagePath, path.extname(imagePath));
-
-			if (!this.options) {
-				throw new Error('Options not set');
-			}
-
-			const outputDir = this.options.outputDir;
-
-			const files = await fileSystem.glob([`${outputDir}/${baseNameWithoutExt}-*`]);
-
-			await Promise.all(
-				files.map(async (file) => {
-					try {
-						await fileSystem.removeAsync(file);
-						logger.debug('Deleted processed image', { file });
-					} catch (error) {
-						logger.error('Failed to delete processed image', { file, error });
-					}
-				}),
-			);
-
-			try {
-				const cacheKey = this.processedImages[path.basename(imagePath)].cacheKey;
-				const cachePath = this.getCachePath(cacheKey);
-				await fileSystem.removeAsync(cachePath);
-				logger.debug('Deleted cache file for image', { cachePath });
-			} catch (error) {
-				logger.error('Failed to delete cache file for image', { imagePath, error });
-			}
-
-			delete this.processedImages[path.basename(imagePath)];
-
-			this.generateTypes();
-		} catch (error) {
-			logger.error('Failed to delete processed images', { path: imagePath, error });
-		}
-	}
-
-	/**
-	 * Generate types for the virtual module.
-	 */
-	private generateTypes(): void {
-		if (!this.options?.outputDir) {
-			throw new Error('Output directory not set');
-		}
-
-		const content = `
-/**
- * Do not edit manually. This file is auto-generated.
- * This file contains the type definitions for the virtual module "ecopages:images".
- */
-
-${IMAGE_VIRTUAL_MODULE_TYPES}
-
-declare module "ecopages:images" {
-	${Object.keys(this.processedImages)
-		.map((key) => `export const ${anyCaseToCamelCase(key)}: ImageSpecifications;`)
-		.join('\n    ')}
-}`;
-
-		if (!this.context) throw new Error('Processor is not configured correctly');
-
-		const typesDir = resolveGeneratedPath('types', {
-			root: this.context.rootDir,
-			module: this.name,
-			subPath: 'virtual-module.d.ts',
-		});
-
-		fileSystem.ensureDir(path.dirname(typesDir));
-		fileSystem.write(typesDir, content);
-		logger.debug('Generated types for virtual module', { typesDir });
-
-		const indexTypesDir = resolveGeneratedPath('types', {
-			root: this.context.rootDir,
-			module: this.name,
-			subPath: 'index.d.ts',
-		});
-
-		const indexContent = 'import "./virtual-module.d.ts";';
-
-		fileSystem.write(indexTypesDir, indexContent);
-		logger.debug('Generated index types for virtual module', { indexTypesDir });
-
-		const runtimeVirtualModulePath = resolveGeneratedPath('cache', {
-			root: this.context.distDir,
-			module: this.name,
-			subPath: 'virtual-module.ts',
-		});
-
-		const runtimeModuleContent = Object.entries(this.processedImages)
-			.map(([key, value]) => {
-				return `export const ${anyCaseToCamelCase(key)} = ${JSON.stringify(value, null, 2)} as const;`;
-			})
-			.join('\n\n');
-
-		fileSystem.ensureDir(path.dirname(runtimeVirtualModulePath));
-		fileSystem.write(runtimeVirtualModulePath, runtimeModuleContent);
-		logger.debug('Generated runtime virtual module for images', { runtimeVirtualModulePath });
-	}
-
-	/**
-	 * Teardown the image processor.
-	 */
-	async teardown(): Promise<void> {
-		logger.debug('Tearing down image processor');
-	}
-
-	/**
-	 * Get the image processor instance.
-	 * @returns The image processor instance.
-	 */
-	getProcessor(): ImageProcessor | undefined {
-		return this.processor;
-	}
-}
-
-export const imageProcessorPlugin = (
-	config: Omit<ProcessorConfig<ImageProcessorConfig>, 'name' | 'description'>,
-): ImageProcessorPlugin => {
-	return new ImageProcessorPlugin(config);
-};

package/src/types.ts

@@ -1,45 +0,0 @@
-/**
- * ImageAttributes
- * These are the core attributes for the image element generated by the image processor
- */
-export interface ImageAttributes {
-	src: string;
-	width: number;
-	height: number;
-	sizes: string;
-	srcset?: string;
-}
-
-/**
- * This represents a single image variant created using the size configuration
- */
-export interface ImageVariant {
-	width: number;
-	height: number;
-	src: string;
-	label: string;
-}
-
-/**
- * These are the core attributes for the image element and the image variants
- * This is the representation of the image element in the virtual module
- */
-export interface ImageSpecifications {
-	attributes: ImageAttributes;
-	variants: ImageVariant[];
-	/**
-	 * A unique key used to cache the image specifications.
-	 * This key should uniquely identify the combination of attributes and variants
-	 * to ensure proper caching behavior.
-	 */
-	cacheKey: string;
-}
-
-/**
- * This is the representation of an image breakpoint
- * This is used to generate the srcset attribute
- */
-export type ImageSize = {
-	width: number;
-	label: string;
-};

package/src/utils.ts

@@ -1,30 +0,0 @@
-export function anyCaseToCamelCase(str: string): string {
-	if (!str) return '';
-
-	let result = '';
-	let capitalize = false;
-
-	for (let i = 0; i < str.length; i++) {
-		const char = str[i];
-
-		if (/[0-9]/.test(char)) {
-			result += char;
-			capitalize = true;
-			continue;
-		}
-
-		if (/[a-zA-Z]/.test(char)) {
-			if (capitalize) {
-				result += char.toUpperCase();
-				capitalize = false;
-			} else {
-				result += char.toLowerCase();
-			}
-			continue;
-		}
-
-		capitalize = true;
-	}
-
-	return result;
-}