@lonik/oh-image 2.9.0 → 2.10.1

package/dist/client.d.ts

@@ -6,7 +6,6 @@ declare module "*$oh" {
       | "fetchPriority"
       | "decoding"
       | "loading"
-      | "srcSet"
       | "className"
       | "sizes"
       | "style"
@@ -24,7 +23,6 @@ declare module "*$oh" {
      */
     fill?: boolean;
 
-    breakpoints?: number[];
   }
 
   const component: React.FC<StaticImageProps>;

package/dist/cloudflare.d.ts

@@ -1,5 +1,5 @@
 import { n as ImageLoaderOptions } from "./types-BEgZ3W30.js";
-import "./index-CP-wkNzk.js";
+import "./index-CaQSR67D.js";
 import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DCLkYppY.js";
 import * as react_jsx_runtime7 from "react/jsx-runtime";
 

package/dist/contentful.d.ts

@@ -1,7 +1,7 @@
 import { n as ImageLoaderOptions } from "./types-BEgZ3W30.js";
-import "./index-CP-wkNzk.js";
+import "./index-CaQSR67D.js";
 import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DCLkYppY.js";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/loaders/contentful/contentful-options.d.ts
 type ContentfulTransforms = Partial<{
@@ -39,6 +39,6 @@ declare const useContentfulContext: () => ContentfulGlobalOptions, ContentfulLoa
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<ContentfulGlobalOptions>) => react_jsx_runtime3.JSX.Element, useContentfulLoader: (options?: ContentfulGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<ContentfulGlobalOptions>) => react_jsx_runtime0.JSX.Element, useContentfulLoader: (options?: ContentfulGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
 export { ContentfulGlobalOptions, ContentfulLoaderProvider, ContentfulOptions, ContentfulTransforms, useContentfulContext, useContentfulLoader };

package/dist/imgproxy.d.ts

@@ -1,5 +1,5 @@
 import { n as ImageLoaderOptions } from "./types-BEgZ3W30.js";
-import "./index-CP-wkNzk.js";
+import "./index-CaQSR67D.js";
 import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DCLkYppY.js";
 import * as react_jsx_runtime6 from "react/jsx-runtime";
 

package/dist/{index-CP-wkNzk.d.ts → index-CaQSR67D.d.ts}

@@ -1,11 +1,11 @@
 import { r as ImageProps, t as ImageLoader } from "./types-BEgZ3W30.js";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/react/image.d.ts
-declare function Image(props: ImageProps): react_jsx_runtime1.JSX.Element;
+declare function Image(props: ImageProps): react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/react/image-factory.d.ts
-declare function __imageFactory(defaultProps: any): (props: any) => react_jsx_runtime1.JSX.Element;
+declare function __imageFactory(defaultProps: any): (props: any) => react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/react/use-img-loaded.d.ts
 /**
@@ -47,6 +47,6 @@ declare function ImageProvider({
   ...props
 }: {
   children: React.ReactNode;
-} & Partial<ImageContextValue>): react_jsx_runtime1.JSX.Element;
+} & Partial<ImageContextValue>): react_jsx_runtime3.JSX.Element;
 //#endregion
 export { Image as a, __imageFactory as i, useImageContext as n, useImgLoaded as r, ImageProvider as t };

package/dist/kontent.d.ts

@@ -1,7 +1,7 @@
 import { n as ImageLoaderOptions } from "./types-BEgZ3W30.js";
-import "./index-CP-wkNzk.js";
+import "./index-CaQSR67D.js";
 import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DCLkYppY.js";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/loaders/kontent/kontent-options.d.ts
 type KontentTransforms = Partial<{
@@ -44,6 +44,6 @@ declare const useKontentContext: () => KontentGlobalOptions, KontentLoaderProvid
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<KontentGlobalOptions>) => react_jsx_runtime8.JSX.Element, useKontentLoader: (options?: KontentGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<KontentGlobalOptions>) => react_jsx_runtime2.JSX.Element, useKontentLoader: (options?: KontentGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
 export { KontentGlobalOptions, KontentLoaderProvider, KontentOptions, KontentTransforms, useKontentContext, useKontentLoader };

package/dist/netlify.d.ts

@@ -1,7 +1,7 @@
 import { n as ImageLoaderOptions } from "./types-BEgZ3W30.js";
-import "./index-CP-wkNzk.js";
+import "./index-CaQSR67D.js";
 import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DCLkYppY.js";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/loaders/netlify/netlify-options.d.ts
 type NetlifyTransforms = Partial<{
@@ -21,6 +21,6 @@ declare const useNetlifyContext: () => NetlifyGlobalOptions, NetlifyLoaderProvid
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<NetlifyGlobalOptions>) => react_jsx_runtime4.JSX.Element, useNetlifyLoader: (options?: NetlifyGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<NetlifyGlobalOptions>) => react_jsx_runtime1.JSX.Element, useNetlifyLoader: (options?: NetlifyGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
 export { NetlifyGlobalOptions, NetlifyLoaderProvider, NetlifyOptions, NetlifyTransforms, useNetlifyContext, useNetlifyLoader };

package/dist/plugin.d.ts

@@ -2,11 +2,8 @@ import { FormatEnum } from "sharp";
 import { Plugin } from "vite";
 
 //#region src/plugin/types.d.ts
-interface PluginConfig extends Required<Pick<ImageOptions, "placeholder" | "breakpoints" | "format" | "quality">> {
-  /** Directory name where processed images will be output during build */
-  distDir: string;
-}
-interface ImageOptions {
+
+type ImageTransforms = Partial<{
   /** Target width for the processed image in pixels */
   width?: number | null;
   /** Target height for the processed image in pixels */
@@ -39,9 +36,21 @@ interface ImageOptions {
   threshold?: number | null;
   /** Apply quality */
   quality?: number | null;
+}>;
+type PlaceholderTransforms = Omit<ImageTransforms, "placeholder" | "breakpoints"> & {
+  show?: boolean;
+};
+type PluginTransforms = Omit<ImageTransforms, "breakpoints">;
+type PluginPlaceholderTransforms = Omit<PlaceholderTransforms, "pl_show">;
+interface PluginConfig {
+  distDir: string;
+  transforms?: PluginTransforms;
+  placeholder?: PluginPlaceholderTransforms;
+  breakpoints?: number[];
+  pl_show?: boolean;
 }
 //#endregion
 //#region src/plugin/plugin.d.ts
 declare function ohImage(options?: Partial<PluginConfig>): Plugin;
 //#endregion
-export { type ImageOptions, type PluginConfig, ohImage };
+export { type ImageTransforms as ImageOptions, type PluginConfig, ohImage };

package/dist/plugin.js

@@ -8,11 +8,7 @@ import sharp from "sharp";
 //#region src/plugin/utils.ts
 function queryToOptions(processKey, uri) {
 	const [path, query] = uri.split("?");
-	if (!query || !path) return {
-		shouldProcess: false,
-		path: "",
-		queryString: ""
-	};
+	if (!query || !path) return { shouldProcess: false };
 	const parsed = queryString.parse(query, {
 		parseBooleans: true,
 		parseNumbers: true,
@@ -33,21 +29,101 @@ function queryToOptions(processKey, uri) {
 			negate: "boolean",
 			normalize: "boolean",
 			threshold: "number",
-			quality: "number"
+			quality: "number",
+			pl_width: "number",
+			pl_height: "number",
+			pl_format: "string",
+			pl_blur: "number",
+			pl_flip: "boolean",
+			pl_flop: "boolean",
+			pl_rotate: "number",
+			pl_sharpen: "number",
+			pl_median: "number",
+			pl_gamma: "number",
+			pl_negate: "boolean",
+			pl_normalize: "boolean",
+			pl_threshold: "number",
+			pl_quality: "number",
+			pl_show: "boolean"
 		}
 	});
-	if (processKey in parsed) return {
-		shouldProcess: true,
-		options: parsed,
-		path,
-		queryString: query
+	if (processKey in parsed) {
+		const transforms = {};
+		const placeholder = {};
+		Object.entries(parsed).forEach(([key, value]) => {
+			if (key.startsWith("pl_")) {
+				const cleanKey = key.replace("pl_", "");
+				placeholder[cleanKey] = value;
+			} else {
+				const transformKey = key;
+				transforms[transformKey] = value;
+			}
+		});
+		return {
+			shouldProcess: true,
+			transforms,
+			placeholder,
+			path,
+			queryString: query
+		};
+	} else return { shouldProcess: false };
+}
+/** returns ext of file. removes '.' */
+function getCleanExt(filepath) {
+	const ext = extname(filepath);
+	return ext.startsWith(".") ? ext.slice(1) : ext;
+}
+function resolveTransforms(options, defaults, metadata, fileFormat) {
+	const resolved = {
+		...defaults,
+		...options
+	};
+	const width = options?.width ?? defaults?.width ?? metadata.width;
+	const height = options?.height ?? defaults?.height ?? metadata.height;
+	const format = options?.format ?? defaults?.format ?? fileFormat ?? "webp";
+	return {
+		...resolved,
+		width,
+		height,
+		format
+	};
+}
+function resolveShowPlaceholder(parsed, config) {
+	if (parsed.show || config.pl_show) return true;
+	return false;
+}
+function resolvePlaceholderTransforms(options, defaults, metadata) {
+	const resolved = {
+		...defaults,
+		...options
+	};
+	const width = options?.width ?? defaults?.width ?? metadata.width;
+	const height = options?.height ?? defaults?.height ?? metadata.height;
+	const format = options?.format ?? defaults?.format ?? "webp";
+	return {
+		...resolved,
+		width,
+		height,
+		format
 	};
-	else return {
-		shouldProcess: false,
-		path: "",
-		queryString: query
+}
+function resolveBreakpointTransforms(options, defaults, width) {
+	const resolved = {
+		...defaults,
+		...options
+	};
+	delete resolved["height"];
+	delete resolved["width"];
+	const format = "webp";
+	return {
+		...resolved,
+		width,
+		format
 	};
 }
+function resolveBreakpoints(options, config) {
+	return options?.breakpoints ?? config.breakpoints;
+}
 
 //#endregion
 //#region src/plugin/file-utils.ts
@@ -97,8 +173,6 @@ function createImageIdentifier(name, hash, dirs) {
 
 //#endregion
 //#region src/plugin/image-entries.ts
-const PLACEHOLDER_IMG_SIZE = 8;
-const PLACEHOLDER_BLUR_QUALITY = 70;
 function createImageEntries() {
 	const map = /* @__PURE__ */ new Map();
 	return {
@@ -112,52 +186,10 @@ function createImageEntries() {
 			return map.entries();
 		},
 		createMainEntry(identifier, entry) {
-			const mainEntry = {
-				width: entry.width,
-				height: entry.height,
-				format: entry.format,
-				origin: entry.origin,
-				blur: entry.blur,
-				flip: entry.flip,
-				flop: entry.flop,
-				rotate: entry.rotate,
-				sharpen: entry.sharpen,
-				median: entry.median,
-				gamma: entry.gamma,
-				negate: entry.negate,
-				normalize: entry.normalize,
-				threshold: entry.threshold,
-				quality: entry.quality
-			};
-			this.set(identifier, mainEntry);
+			this.set(identifier, entry);
 		},
-		createPlaceholderEntry(identifier, main) {
-			let placeholderHeight = 0;
-			let placeholderWidth = 0;
-			if (main.width >= main.height) {
-				placeholderWidth = PLACEHOLDER_IMG_SIZE;
-				placeholderHeight = Math.max(Math.round(main.height / main.width * PLACEHOLDER_IMG_SIZE), 10);
-			} else {
-				placeholderWidth = Math.max(Math.round(main.width / main.height * PLACEHOLDER_IMG_SIZE), 10);
-				placeholderHeight = PLACEHOLDER_IMG_SIZE;
-			}
-			const placeholderEntry = {
-				width: placeholderWidth,
-				height: placeholderHeight,
-				format: main.format,
-				blur: PLACEHOLDER_BLUR_QUALITY,
-				origin: main.origin,
-				flip: main.flip,
-				flop: main.flop,
-				rotate: main.rotate,
-				sharpen: main.sharpen,
-				median: main.median,
-				gamma: main.gamma,
-				negate: main.negate,
-				normalize: main.normalize,
-				threshold: main.threshold
-			};
-			this.set(identifier, placeholderEntry);
+		createPlaceholderEntry(identifier, placeholder) {
+			this.set(identifier, placeholder);
 		},
 		createSrcSetEntry(identifier, entry) {
 			this.set(identifier, entry);
@@ -189,7 +221,6 @@ async function processImage(path, options) {
 
 //#endregion
 //#region src/plugin/plugin.ts
-const DEFAULT_IMAGE_FORMAT = "webp";
 const DEFAULT_CONFIGS = {
 	distDir: "oh-images",
 	breakpoints: [
@@ -205,8 +236,13 @@ const DEFAULT_CONFIGS = {
 		1200,
 		1920
 	],
-	format: "webp",
-	placeholder: true
+	transforms: { format: "webp" },
+	pl_show: true,
+	placeholder: {
+		quality: 10,
+		blur: 50,
+		format: "webp"
+	}
 };
 const PROCESS_KEY = "$oh";
 const SUPPORTED_IMAGE_FORMATS = /\.(jpe?g|png|webp|avif|gif|svg)(\?.*)?$/i;
@@ -254,109 +290,76 @@ function ohImage(options) {
 				res.end(processed);
 			});
 		},
-		load: {
-			filter: { id: SUPPORTED_IMAGE_FORMATS },
-			async handler(id) {
-				try {
-					const parsed = queryToOptions(PROCESS_KEY, id);
-					if (!parsed.shouldProcess) return null;
-					const origin = parsed.path;
-					const { name, ext } = parse(parsed.path);
-					const metadata = await sharp(parsed.path).metadata();
-					const hash = await getFileHash(origin, parsed.queryString);
-					const mergedOptions = {
-						...config,
-						...parsed.options
+		async load(id) {
+			if (!SUPPORTED_IMAGE_FORMATS.test(id)) return null;
+			try {
+				const parsed = queryToOptions(PROCESS_KEY, id);
+				if (!parsed.shouldProcess) return null;
+				const origin = parsed.path;
+				const { name } = parse(parsed.path);
+				const metadata = await sharp(parsed.path).metadata();
+				const ext = getCleanExt(parsed.path);
+				const hash = await getFileHash(origin, parsed.queryString);
+				const transforms = resolveTransforms(parsed.transforms, config.transforms, metadata, ext);
+				const identifier = createImageIdentifier(name, hash, {
+					isBuild,
+					devDir: DEV_DIR,
+					assetsDir,
+					distDir: config.distDir
+				});
+				const mainIdentifier = identifier.main(transforms.format);
+				const mainEntry = {
+					...transforms,
+					origin
+				};
+				imageEntries.createMainEntry(mainIdentifier, mainEntry);
+				const src = {
+					width: transforms.width,
+					height: transforms.height,
+					src: mainIdentifier,
+					srcSet: ""
+				};
+				if (resolveShowPlaceholder(parsed.placeholder, config)) {
+					const placeholderTransforms = resolvePlaceholderTransforms(parsed.placeholder, config.placeholder, metadata);
+					const placeholderEntry = {
+						...placeholderTransforms,
+						origin
 					};
-					const format = mergedOptions.format ?? ext.slice(1);
-					const identifier = createImageIdentifier(name, hash, {
-						isBuild,
-						devDir: DEV_DIR,
-						assetsDir,
-						distDir: config.distDir
-					});
-					const mainIdentifier = identifier.main(format);
-					imageEntries.createMainEntry(mainIdentifier, {
-						width: mergedOptions.width,
-						height: mergedOptions.height,
-						format: mergedOptions.format,
-						origin,
-						blur: mergedOptions.blur,
-						flip: mergedOptions.flip,
-						flop: mergedOptions.flop,
-						rotate: mergedOptions.rotate,
-						sharpen: mergedOptions.sharpen,
-						median: mergedOptions.median,
-						gamma: mergedOptions.gamma,
-						negate: mergedOptions.negate,
-						normalize: mergedOptions.normalize,
-						threshold: mergedOptions.threshold,
-						quality: mergedOptions.quality
-					});
-					const src = {
-						width: metadata.width,
-						height: metadata.height,
-						src: mainIdentifier,
-						srcSet: ""
-					};
-					if (mergedOptions.placeholder) {
-						const placeholderIdentifier = identifier.placeholder(DEFAULT_IMAGE_FORMAT);
-						imageEntries.createPlaceholderEntry(placeholderIdentifier, {
-							width: metadata.width,
-							height: metadata.height,
-							format: DEFAULT_IMAGE_FORMAT,
-							origin,
-							flip: mergedOptions.flip,
-							flop: mergedOptions.flop,
-							rotate: mergedOptions.rotate,
-							sharpen: mergedOptions.sharpen,
-							median: mergedOptions.median,
-							gamma: mergedOptions.gamma,
-							negate: mergedOptions.negate,
-							normalize: mergedOptions.normalize,
-							threshold: mergedOptions.threshold
-						});
-						src.placeholder = placeholderIdentifier;
-					}
-					if (mergedOptions.breakpoints) {
-						const srcSets = [];
-						for (const breakpoint of mergedOptions.breakpoints) {
-							const srcSetIdentifier = identifier.srcSet(DEFAULT_IMAGE_FORMAT, breakpoint);
-							imageEntries.createSrcSetEntry(srcSetIdentifier, {
-								width: breakpoint,
-								format: DEFAULT_IMAGE_FORMAT,
-								origin,
-								blur: mergedOptions.blur,
-								flip: mergedOptions.flip,
-								flop: mergedOptions.flop,
-								rotate: mergedOptions.rotate,
-								sharpen: mergedOptions.sharpen,
-								median: mergedOptions.median,
-								gamma: mergedOptions.gamma,
-								negate: mergedOptions.negate,
-								normalize: mergedOptions.normalize,
-								threshold: mergedOptions.threshold,
-								quality: mergedOptions.quality
-							});
-							srcSets.push(`${srcSetIdentifier} ${breakpoint}w`);
-						}
-						src.srcSet = srcSets.join(", ");
+					const placeholderIdentifier = identifier.placeholder(placeholderTransforms.format);
+					imageEntries.createPlaceholderEntry(placeholderIdentifier, placeholderEntry);
+					src.placeholder = placeholderIdentifier;
+				}
+				const breakpoints = resolveBreakpoints(transforms, config);
+				if (breakpoints) {
+					const srcSets = [];
+					for (const breakpoint of breakpoints) {
+						const breakpointTransforms = resolveBreakpointTransforms(parsed.transforms, config.transforms, breakpoint);
+						const srcSetIdentifier = identifier.srcSet(breakpointTransforms.format, breakpoint);
+						const breakpointEntry = {
+							...breakpointTransforms,
+							origin
+						};
+						imageEntries.createSrcSetEntry(srcSetIdentifier, breakpointEntry);
+						srcSets.push(`${srcSetIdentifier} ${breakpoint}w`);
 					}
-					return `
+					src.srcSet = srcSets.join(", ");
+				}
+				return `
                import { __imageFactory } from "@lonik/oh-image/react";
 
            export default __imageFactory(${JSON.stringify({
-						width: src.width,
-						height: src.height,
-						src: src.src,
-						srcSet: src.srcSet,
-						placeholder: src.placeholder
-					})})
+					width: src.width,
+					height: src.height,
+					src: src.src,
+					srcSet: src.srcSet,
+					placeholder: src.placeholder
+				})})
 `;
-				} catch (err) {
-					console.error(`Couldn't load image with id: ${id} error:${err}`);
-					return null;
-				}
+			} catch (err) {
+				if (err instanceof Error) {
+					console.error(`Couldn't load image: ${id}. Error: ${err.message}`);
+					this.error(err.message);
+				} else this.error(String(err));
 			}
 		},
 		async writeBundle() {

package/dist/react.d.ts

@@ -1,3 +1,3 @@
 import { n as ImageLoaderOptions, r as ImageProps, t as ImageLoader } from "./types-BEgZ3W30.js";
-import { a as Image, i as __imageFactory, n as useImageContext, r as useImgLoaded, t as ImageProvider } from "./index-CP-wkNzk.js";
+import { a as Image, i as __imageFactory, n as useImageContext, r as useImgLoaded, t as ImageProvider } from "./index-CaQSR67D.js";
 export { Image, ImageLoader, ImageLoaderOptions, ImageProps, ImageProvider, __imageFactory, useImageContext, useImgLoaded };

package/dist/wordpress.d.ts

@@ -1,7 +1,7 @@
 import { n as ImageLoaderOptions } from "./types-BEgZ3W30.js";
-import "./index-CP-wkNzk.js";
+import "./index-CaQSR67D.js";
 import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DCLkYppY.js";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/loaders/wordpress/wordpress-options.d.ts
 type WordpressTransforms = Partial<{
@@ -31,6 +31,6 @@ declare const useWordpressContext: () => WordpressGlobalOptions, WordpressLoader
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<WordpressGlobalOptions>) => react_jsx_runtime5.JSX.Element, useWordpressLoader: (options?: WordpressGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<WordpressGlobalOptions>) => react_jsx_runtime8.JSX.Element, useWordpressLoader: (options?: WordpressGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
 export { WordpressGlobalOptions, WordpressLoaderProvider, WordpressOptions, WordpressTransforms, useWordpressContext, useWordpressLoader };

package/package.json

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