@lonik/oh-image 1.1.0 → 1.2.1

package/dist/client.d.ts

@@ -1,4 +1,17 @@
+export interface ImageSrc {
+  /** Original width of the source image in pixels */
+  width: number;
+  /** Original height of the source image in pixels */
+  height: number;
+  /** URL to the placeholder image (if placeholder was enabled) */
+  placeholderUrl?: string;
+  /** Array of responsive image sources at different breakpoints */
+  srcSets: string;
+  /** URL to the main processed image */
+  src: string;
+}
+
 declare module "*?oh" {
-  const imageSrc: any;
+  const imageSrc: ImageSrc;
   export default imageSrc;
 }

package/dist/plugin.d.ts

@@ -3,18 +3,10 @@ import * as vite0 from "vite";
 import * as rollup0 from "rollup";
 
 //#region src/plugin/types.d.ts
-/**
- * Configuration options for the oh-image Vite plugin.
- * Extends ImageOptions with all properties required, plus plugin-specific settings.
- */
-interface PluginConfig extends Required<ImageOptions> {
+interface PluginConfig extends Required<Pick<ImageOptions, "placeholder" | "bps" | "format">> {
   /** Directory name where processed images will be output during build */
   distDir: string;
 }
-/**
- * Options for image processing and transformation.
- * Can be passed via query parameters or plugin configuration.
- */
 interface ImageOptions {
   /** Target width for the processed image in pixels */
   width?: number | null;
@@ -26,44 +18,8 @@ interface ImageOptions {
   blur?: number | boolean;
   /** Whether to generate a placeholder image for lazy loading */
   placeholder?: boolean;
-  /** Width of the placeholder image in pixels */
-  placeholderW?: number;
-  /** Height of the placeholder image in pixels */
-  placeholderH?: number;
-  /** Output format for the placeholder image */
-  placeholderF?: keyof FormatEnum;
-  /** Blur setting for the placeholder (true for default, or sigma value) */
-  placeholderB: boolean | number;
   /** Breakpoints array - widths in pixels for responsive srcSet generation */
   bps?: number[];
-  /** Output format for srcSet images */
-  srcSetsF: keyof FormatEnum;
-}
-/**
- * Represents a single entry in the srcSet array.
- * Used for responsive image loading at different viewport widths.
- */
-interface ImageSrcSet {
-  /** Width descriptor (e.g., '640w', '1080w') */
-  width: string;
-  /** URL or path to the image at this breakpoint */
-  src: string;
-}
-/**
- * The processed image source object returned by the plugin.
- * Contains all URLs and metadata needed for responsive image rendering.
- */
-interface ImageSrc {
-  /** Original width of the source image in pixels */
-  width: number;
-  /** Original height of the source image in pixels */
-  height: number;
-  /** URL to the placeholder image (if placeholder was enabled) */
-  placeholderUrl?: string;
-  /** Array of responsive image sources at different breakpoints */
-  srcSets: ImageSrcSet[];
-  /** URL to the main processed image */
-  src: string;
 }
 //#endregion
 //#region src/plugin/plugin.d.ts
@@ -81,4 +37,4 @@ declare function ohImage(options?: Partial<PluginConfig>): {
   writeBundle(this: rollup0.PluginContext): Promise<void>;
 };
 //#endregion
-export { type ImageOptions, type ImageSrc, type ImageSrcSet, type PluginConfig, ohImage };
+export { type ImageOptions, type PluginConfig, ohImage };

package/dist/plugin.js

@@ -1,13 +1,14 @@
 import { basename, dirname, extname, join, parse } from "node:path";
-import { randomBytes } from "node:crypto";
+import { createHash } from "node:crypto";
 import { mkdir, readFile, writeFile } from "node:fs/promises";
 import queryString from "query-string";
 import sharp from "sharp";
 import pLimit from "p-limit";
 
 //#region src/plugin/utils.ts
-function getRandomString(length = 32) {
-	return randomBytes(Math.ceil(length * 3 / 4)).toString("base64").slice(0, length).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+async function getFileHash(filePath) {
+	const content = await readFile(filePath);
+	return createHash("sha256").update(content).digest("hex").slice(0, 16);
 }
 async function readFileSafe(path) {
 	try {
@@ -60,6 +61,9 @@ async function processImage(path, options) {
 
 //#endregion
 //#region src/plugin/plugin.ts
+const DEFAULT_IMAGE_FORMAT = "webp";
+const PLACEHOLDER_IMG_SIZE = 8;
+const PLACEHOLDER_BLUR_QUALITY = 70;
 const DEFAULT_CONFIGS = {
 	distDir: "oh-images",
 	bps: [
@@ -76,18 +80,10 @@ const DEFAULT_CONFIGS = {
 		1920
 	],
 	format: "webp",
-	blur: false,
-	width: null,
-	height: null,
-	placeholder: false,
-	placeholderH: 100,
-	placeholderW: 100,
-	placeholderB: true,
-	placeholderF: "webp",
-	srcSetsF: "webp"
+	placeholder: false
 };
 const PROCESS_KEY = "oh";
-const SUPPORTED_IMAGE_FORMATS = /\.(jpe?g|png|webp|avif|gif|tiff?|svg)(\?.*)?$/i;
+const SUPPORTED_IMAGE_FORMATS = /\.(jpe?g|png|webp|avif|gif|svg)(\?.*)?$/i;
 const DEV_DIR = "/@oh-images/";
 function ohImage(options) {
 	let isBuild = false;
@@ -107,9 +103,8 @@ function ohImage(options) {
 		const fileId = basename(url);
 		return join(cacheDir, fileId);
 	}
-	function genIdentifier(uri, format, prefix) {
-		const fileId = basename(uri);
-		const uniqueFileId = `${prefix}-${getRandomString()}-${fileId}.${format}`;
+	function genIdentifier(uri, format, prefix, hash) {
+		const uniqueFileId = `${prefix}-${hash}-${basename(uri)}.${format}`;
 		if (!isBuild) return join(DEV_DIR, uniqueFileId);
 		return join(assetsDir, config.distDir, uniqueFileId);
 	}
@@ -155,15 +150,15 @@ function ohImage(options) {
 					const origin = parsed.path;
 					const { name, ext } = parse(parsed.path);
 					const metadata = await sharp(parsed.path).metadata();
+					const hash = await getFileHash(origin);
 					const mergedOptions = {
 						...config,
 						...parsed.options
 					};
-					const mainIdentifier = genIdentifier(name, mergedOptions.format ?? ext.slice(1), "main");
+					const mainIdentifier = genIdentifier(name, mergedOptions.format ?? ext.slice(1), "main", hash);
 					const mainEntry = {
 						width: mergedOptions.width,
 						height: mergedOptions.height,
-						blur: mergedOptions.blur,
 						format: mergedOptions.format,
 						origin
 					};
@@ -172,32 +167,42 @@ function ohImage(options) {
 						width: metadata.width,
 						height: metadata.height,
 						src: mainIdentifier,
-						srcSets: []
+						srcSets: ""
 					};
 					if (parsed.options?.placeholder) {
-						const placeholderIdentifier = genIdentifier(name, mergedOptions.placeholderF, "placeholder");
+						let placeholderHeight = 0;
+						let placeholderWidth = 0;
+						if (metadata.width >= metadata.height) {
+							placeholderWidth = PLACEHOLDER_IMG_SIZE;
+							placeholderHeight = Math.max(Math.round(metadata.height / metadata.width * PLACEHOLDER_IMG_SIZE), 1);
+						} else {
+							placeholderWidth = Math.max(Math.round(metadata.width / metadata.height * PLACEHOLDER_IMG_SIZE), 1);
+							placeholderHeight = PLACEHOLDER_IMG_SIZE;
+						}
+						const placeholderIdentifier = genIdentifier(name, DEFAULT_IMAGE_FORMAT, "placeholder", hash);
 						const placeholderEntry = {
-							width: mergedOptions.placeholderW,
-							height: mergedOptions.placeholderH,
-							format: mergedOptions.placeholderF,
-							blur: mergedOptions.placeholderB,
+							width: placeholderWidth,
+							height: placeholderHeight,
+							format: DEFAULT_IMAGE_FORMAT,
+							blur: PLACEHOLDER_BLUR_QUALITY,
 							origin
 						};
 						imageEntries.set(placeholderIdentifier, placeholderEntry);
 						src.placeholderUrl = placeholderIdentifier;
 					}
-					if (mergedOptions.bps) for (const breakpoint of mergedOptions.bps) {
-						const srcSetIdentifier = genIdentifier(name, mergedOptions.srcSetsF, `breakpoint-${breakpoint}`);
-						const srcSetEntry = {
-							width: breakpoint,
-							format: mergedOptions.srcSetsF,
-							origin
-						};
-						imageEntries.set(srcSetIdentifier, srcSetEntry);
-						src.srcSets.push({
-							src: srcSetIdentifier,
-							width: `${breakpoint}w`
-						});
+					if (mergedOptions.bps) {
+						const srcSets = [];
+						for (const breakpoint of mergedOptions.bps) {
+							const srcSetIdentifier = genIdentifier(name, DEFAULT_IMAGE_FORMAT, `breakpoint-${breakpoint}`, hash);
+							const srcSetEntry = {
+								width: breakpoint,
+								format: DEFAULT_IMAGE_FORMAT,
+								origin
+							};
+							imageEntries.set(srcSetIdentifier, srcSetEntry);
+							srcSets.push(`${srcSetIdentifier} ${breakpoint}w`);
+						}
+						src.srcSets = srcSets.join(", ");
 					}
 					return `export default ${JSON.stringify(src)};`;
 				} catch (err) {

package/dist/react.d.ts

@@ -1,55 +1,41 @@
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { CSSProperties } from "react";
+import { ImgHTMLAttributes } from "react";
 
-//#region src/react/types.d.ts
-/**
- * Image source type - can be either a simple URL string or a full ImageSrc object
- */
-type ImageSrcType = string | ImageSrc;
-/**
- * Optimized image source with multiple responsive variants
- */
+//#region src/client.d.ts
 interface ImageSrc {
-  /** Original image width in pixels */
+  /** Original width of the source image in pixels */
   width: number;
-  /** Original image height in pixels */
+  /** Original height of the source image in pixels */
   height: number;
-  /** Optional low-quality placeholder image URL for blur-up effect */
+  /** URL to the placeholder image (if placeholder was enabled) */
   placeholderUrl?: string;
-  /** Array of responsive image variants for different screen sizes */
-  srcSets: ImageSrcSet[];
-  /** Primary image source URL */
+  /** Array of responsive image sources at different breakpoints */
+  srcSets: string;
+  /** URL to the main processed image */
   src: string;
 }
-/**
- * Single responsive image variant in a srcset
- */
-interface ImageSrcSet {
-  /** Width descriptor (e.g., "1920w") */
-  width: string;
-  /** Image URL for this variant */
-  src: string;
+declare module "*?oh" {
+  const imageSrc: ImageSrc;
+  export default imageSrc;
 }
-/**
- * Props for the optimized Image component
- * Extends standard HTML image attributes with optimization features
- */
-interface ImageProps extends Partial<Pick<HTMLImageElement, "alt" | "fetchPriority" | "decoding" | "loading" | "height" | "width" | "srcset" | "className" | "sizes">> {
-  /** Load the image immediately, bypassing lazy loading */
+//#endregion
+//#region src/react/types.d.ts
+type ImageSrcType = string | ImageSrc;
+interface ImageProps extends Partial<Pick<ImgHTMLAttributes<HTMLImageElement>, "alt" | "fetchPriority" | "decoding" | "loading" | "height" | "width" | "srcSet" | "className" | "sizes" | "style">> {
+  /** Configures the Image component to load the image immediately. */
   asap?: boolean;
-  /** Image source - either a URL string or ImageSrc object with responsive variants */
+  /** */
   src: ImageSrcType;
-  /** Override placeholder URL (takes precedence over ImageSrc.placeholderUrl) */
+  /** The URL of the placeholder image to display while loading. */
   placeholderUrl?: string | undefined;
-  /** Enable blur-up placeholder effect during image loading */
-  placeholder?: boolean;
-  /** Inline CSS styles */
-  style?: CSSProperties;
-  /** Make image fill its container (position: absolute) */
+  /**
+   * Sets the image to "fill mode", which eliminates the height/width requirement and adds
+   * styles such that the image fills its containing element.
+   */
   fill?: boolean;
 }
 //#endregion
 //#region src/react/image.d.ts
 declare function Image(props: ImageProps): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Image, type ImageProps, type ImageSrc, type ImageSrcSet };
+export { Image, type ImageProps };

package/dist/react.js

@@ -10,7 +10,7 @@ function resolveOptions(props) {
 		resolved.src = src.src;
 		resolved.width ??= src.width;
 		resolved.height ??= src.height;
-		resolved.srcset ??= src.srcSets.map((set) => `${set.src} ${set.width}`).join(", ");
+		resolved.srcSet ??= src.srcSets;
 		resolved.placeholderUrl ??= src.placeholderUrl;
 	} else resolved.src = src;
 	if (props.asap) {
@@ -26,11 +26,7 @@ function resolveOptions(props) {
 	return resolved;
 }
 function getPlaceholderStyles(props) {
-	if (!props.placeholder) return {};
-	if (!props.placeholderUrl) {
-		console.warn("Blur URL is required for placeholder");
-		return {};
-	}
+	if (!props.placeholderUrl) return {};
 	return {
 		backgroundPosition: "50% 50%",
 		backgroundRepeat: "no-repeat",
@@ -61,7 +57,7 @@ function Image(props) {
 		src: options.src,
 		width: options.width,
 		height: options.height,
-		srcSet: options.srcset,
+		srcSet: options.srcSet,
 		alt: options.alt,
 		loading: options.loading,
 		decoding: options.decoding,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lonik/oh-image",
   "type": "module",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "A React component library for optimized image handling.",
   "author": "Luka Onikadze <lukonik@gmail.com>",
   "license": "MIT",