@lonik/oh-image 2.1.3 → 2.2.0

package/dist/{base-loader-options-DHja8Cql.d.ts → base-loader-options-C1EZVxmE.d.ts}

@@ -4,7 +4,7 @@ interface BaseLoaderOptions<T> {
   transforms?: T;
 }
 interface BaseGlobalLoaderOptions<T> extends BaseLoaderOptions<T> {
-  placeholderTransforms?: T;
+  placeholder?: T;
 }
 interface BaseLoaderTransforms {
   [futureKey: string]: any;

package/dist/client.d.ts

@@ -1,17 +1,31 @@
-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" {
+  export interface StaticImageProps extends Partial<
+    Pick<
+      ImgHTMLAttributes<HTMLImageElement>,
+      | "fetchPriority"
+      | "decoding"
+      | "loading"
+      | "srcSet"
+      | "className"
+      | "sizes"
+      | "style"
+    >
+  > {
+    /** Alternative text for the image, required for accessibility. Use an empty string for decorative images. */
+    alt: string;
+
+    /** Configures the Image component to load the image immediately. */
+    priority?: boolean;
+
+    /**
+     * 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;
+
+    breakpoints?: number[];
+  }
 
-declare module "*?oh" {
-  const imageSrc: any;
-  export default imageSrc;
+  const component: React.FC<StaticImageProps>;
+  export default component;
 }

package/dist/cloudflare.d.ts

@@ -1,9 +1,9 @@
-import { o as ImageLoaderOptions } from "./index-BLvefiKI.js";
-import { n as BaseLoaderOptions, r as BaseLoaderTransforms, t as BaseGlobalLoaderOptions } from "./base-loader-options-DHja8Cql.js";
+import { s as ImageLoaderOptions } from "./index-DG8i2dGY.js";
+import { n as BaseLoaderOptions, r as BaseLoaderTransforms, t as BaseGlobalLoaderOptions } from "./base-loader-options-C1EZVxmE.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/loaders/cloudflare/cloudflare-options.d.ts
-interface CloudflareTransforms extends BaseLoaderTransforms {
+type CloudflareTransforms = BaseLoaderTransforms & Partial<{
   anim?: boolean;
   background?: string;
   blur?: number;
@@ -25,7 +25,7 @@ interface CloudflareTransforms extends BaseLoaderTransforms {
   rotate?: number;
   sharpen?: number;
   trim?: string;
-}
+}>;
 type CloudflareOptions = BaseLoaderOptions<CloudflareTransforms>;
 type CloudflareGlobalOptions = BaseGlobalLoaderOptions<CloudflareTransforms>;
 //#endregion
@@ -35,6 +35,6 @@ declare const useCloudflareContext: () => CloudflareGlobalOptions, CloudflareLoa
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<CloudflareGlobalOptions>) => react_jsx_runtime0.JSX.Element, useCloudflareLoader: (options?: CloudflareGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string), useCloudflarePlaceholder: (options?: CloudflareGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<CloudflareGlobalOptions>) => react_jsx_runtime0.JSX.Element, useCloudflareLoader: (options?: CloudflareGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
-export { CloudflareGlobalOptions, CloudflareLoaderProvider, CloudflareOptions, CloudflareTransforms, useCloudflareContext, useCloudflareLoader, useCloudflarePlaceholder };
+export { CloudflareGlobalOptions, CloudflareLoaderProvider, CloudflareOptions, CloudflareTransforms, useCloudflareContext, useCloudflareLoader };

package/dist/cloudflare.js

@@ -1,9 +1,9 @@
-import { t as loaderFactory } from "./loader-factory-CPgnRdhT.js";
+import { t as loaderFactory } from "./loader-factory-dkIeg239.js";
 
 //#region src/loaders/cloudflare/cloudflare-loader.tsx
-const { useLoaderContext: useCloudflareContext, LoaderProvider: CloudflareLoaderProvider, useLoader: useCloudflareLoader, usePlaceholder: useCloudflarePlaceholder } = loaderFactory({
+const { useLoaderContext: useCloudflareContext, LoaderProvider: CloudflareLoaderProvider, useLoader: useCloudflareLoader } = loaderFactory({
 	transforms: { format: "auto" },
-	placeholderTransforms: {
+	placeholder: {
 		quality: 10,
 		format: "auto"
 	}
@@ -13,4 +13,4 @@ const { useLoaderContext: useCloudflareContext, LoaderProvider: CloudflareLoader
 }, ({ path, params, imageOptions }) => `${path}/cdn-cgi/image/${params}/${imageOptions.src}`);
 
 //#endregion
-export { CloudflareLoaderProvider, useCloudflareContext, useCloudflareLoader, useCloudflarePlaceholder };
+export { CloudflareLoaderProvider, useCloudflareContext, useCloudflareLoader };

package/dist/cloudinary.d.ts

@@ -1,6 +1,6 @@
-import { o as ImageLoaderOptions } from "./index-BLvefiKI.js";
-import { n as BaseLoaderOptions, r as BaseLoaderTransforms, t as BaseGlobalLoaderOptions } from "./base-loader-options-DHja8Cql.js";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import { s as ImageLoaderOptions } from "./index-DG8i2dGY.js";
+import { n as BaseLoaderOptions, r as BaseLoaderTransforms, t as BaseGlobalLoaderOptions } from "./base-loader-options-C1EZVxmE.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/loaders/cloudinary/cloudinary-options.d.ts
 type BACKGROUND_MODE = "border" | "predominant" | "border_contrast" | "predominant_contrast" | "predominant_gradient" | "predominant_gradient_contrast" | "border_gradient" | "border_gradient_contrast";
@@ -9,7 +9,7 @@ type CROP_MODE = "auto" | "auto_pad" | "crop" | "fill" | "fill_pad" | "fit" | "i
 type COLOR_SPACE = "sRGB" | "tinysrgb" | "cmyk" | "no_cmyk" | "keep_cmyk" | "truecolor";
 type ART_FILTER = "al_dente" | "athena" | "audrey" | "aurora" | "daguerre" | "eucalyptus" | "fes" | "frost" | "hairspray" | "hokusai" | "incognito" | "linen" | "peacock" | "primavera" | "quartz" | "red_rock" | "refresh" | "sizzle" | "sonnet" | "ukulele" | "zorro";
 type FORMAT_TYPE = "3ds" | "ai" | "avif" | "bmp" | "bw" | "djvu" | "dng" | "eps" | "fbx" | "flif" | "gif" | "glb" | "gltf" | "heif" | "heic" | "ico" | "indd" | "jp2" | "jpg" | "jpeg" | "jxl" | "obj" | "pdf" | "ply" | "png" | "psd" | "raw" | "svg" | "tga" | "tif" | "tiff" | "u3ma" | "usdz" | "wdp" | "webp";
-interface CloudinaryTransforms extends BaseLoaderTransforms {
+type CloudinaryTransforms = BaseLoaderTransforms & Partial<{
   a?: number | ANGLE_MODE | string;
   mode?: string;
   ar?: string | number;
@@ -96,7 +96,7 @@ interface CloudinaryTransforms extends BaseLoaderTransforms {
   x?: number | string;
   y?: number | string;
   z?: number;
-}
+}>;
 type CloudinaryOptions = BaseLoaderOptions<CloudinaryTransforms>;
 type CloudinaryGlobalOptions = BaseGlobalLoaderOptions<CloudinaryTransforms>;
 //#endregion
@@ -106,6 +106,6 @@ declare const useCloudinaryContext: () => CloudinaryGlobalOptions, CloudinaryLoa
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<CloudinaryGlobalOptions>) => react_jsx_runtime1.JSX.Element, useCloudinaryLoader: (options?: CloudinaryGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string), useCloudinaryPlaceholder: (options?: CloudinaryGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<CloudinaryGlobalOptions>) => react_jsx_runtime0.JSX.Element, useCloudinaryLoader: (options?: CloudinaryGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
-export { CloudinaryGlobalOptions, CloudinaryLoaderProvider, CloudinaryOptions, CloudinaryTransforms, useCloudinaryContext, useCloudinaryLoader, useCloudinaryPlaceholder };
+export { CloudinaryGlobalOptions, CloudinaryLoaderProvider, CloudinaryOptions, CloudinaryTransforms, useCloudinaryContext, useCloudinaryLoader };

package/dist/cloudinary.js

@@ -1,19 +1,21 @@
-import { t as loaderFactory } from "./loader-factory-CPgnRdhT.js";
+import { t as loaderFactory } from "./loader-factory-dkIeg239.js";
 
 //#region src/loaders/cloudinary/cloudinary-loader.tsx
 function customResolver(key, value) {
 	if (typeof value === "boolean") return value ? key : void 0;
 	return `${key}:${value}`;
 }
-const { useLoaderContext: useCloudinaryContext, LoaderProvider: CloudinaryLoaderProvider, useLoader: useCloudinaryLoader, usePlaceholder: useCloudinaryPlaceholder } = loaderFactory({
+const { useLoaderContext: useCloudinaryContext, LoaderProvider: CloudinaryLoaderProvider, useLoader: useCloudinaryLoader } = loaderFactory({
 	transforms: { f: "webp" },
-	placeholderTransforms: {
+	placeholder: {
 		q: 10,
 		f: "webp"
 	}
 }, {
 	optionSeparator: "_",
 	paramSeparator: ",",
+	widthKey: "w",
+	heightKey: "h",
 	orders: {
 		b_auto: [
 			"mode",
@@ -71,4 +73,4 @@ const { useLoaderContext: useCloudinaryContext, LoaderProvider: CloudinaryLoader
 }, ({ path, params, imageOptions }) => `${path}/image/upload/${params}/${imageOptions.src}`);
 
 //#endregion
-export { CloudinaryLoaderProvider, useCloudinaryContext, useCloudinaryLoader, useCloudinaryPlaceholder };
+export { CloudinaryLoaderProvider, useCloudinaryContext, useCloudinaryLoader };

package/dist/imgproxy.d.ts

@@ -1,6 +1,6 @@
-import { o as ImageLoaderOptions } from "./index-BLvefiKI.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DHja8Cql.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { s as ImageLoaderOptions } from "./index-DG8i2dGY.js";
+import { n as BaseLoaderOptions, r as BaseLoaderTransforms, t as BaseGlobalLoaderOptions } from "./base-loader-options-C1EZVxmE.js";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/loaders/imgproxy/imgproxy-options.d.ts
 type ResizeType = "fit" | "fill" | "fill-down" | "force" | "auto";
@@ -99,7 +99,7 @@ interface PngOptions {
   quantize?: boolean;
   quantization_colors?: number;
 }
-interface ImgproxyTransforms {
+type ImgproxyTransforms = BaseLoaderTransforms & Partial<{
   /**
    * Defines the resizing type, width, height, enlarge, and extend.
    * All arguments are optional and can be omitted to use their default values.
@@ -361,7 +361,7 @@ interface ImgproxyTransforms {
    * Default: empty
    */
   preset?: string[];
-}
+}>;
 type ImgproxyOptions = BaseLoaderOptions<ImgproxyTransforms>;
 type ImgproxyGlobalOptions = BaseGlobalLoaderOptions<ImgproxyTransforms>;
 //#endregion
@@ -371,6 +371,6 @@ declare const useImgproxyContext: () => ImgproxyGlobalOptions, ImgproxyLoaderPro
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<ImgproxyGlobalOptions>) => react_jsx_runtime0.JSX.Element, useImgproxyLoader: (options?: ImgproxyGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string), useImgproxyPlaceholder: (options?: ImgproxyGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<ImgproxyGlobalOptions>) => react_jsx_runtime1.JSX.Element, useImgproxyLoader: (options?: ImgproxyGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
-export { ImgproxyGlobalOptions, ImgproxyLoaderProvider, ImgproxyOptions, ImgproxyTransforms, useImgproxyContext, useImgproxyLoader, useImgproxyPlaceholder };
+export { ImgproxyGlobalOptions, ImgproxyLoaderProvider, ImgproxyOptions, ImgproxyTransforms, useImgproxyContext, useImgproxyLoader };

package/dist/imgproxy.js

@@ -1,9 +1,9 @@
-import { t as loaderFactory } from "./loader-factory-CPgnRdhT.js";
+import { t as loaderFactory } from "./loader-factory-dkIeg239.js";
 
 //#region src/loaders/imgproxy/imgproxy-loader.tsx
-const { useLoaderContext: useImgproxyContext, LoaderProvider: ImgproxyLoaderProvider, useLoader: useImgproxyLoader, usePlaceholder: useImgproxyPlaceholder } = loaderFactory({
+const { useLoaderContext: useImgproxyContext, LoaderProvider: ImgproxyLoaderProvider, useLoader: useImgproxyLoader } = loaderFactory({
 	transforms: { format: "webp" },
-	placeholderTransforms: {
+	placeholder: {
 		quality: 10,
 		format: "webp"
 	}
@@ -97,4 +97,4 @@ const { useLoaderContext: useImgproxyContext, LoaderProvider: ImgproxyLoaderProv
 }, ({ path, params, imageOptions }) => `${path}/${params}/plain/${imageOptions.src}`);
 
 //#endregion
-export { ImgproxyLoaderProvider, useImgproxyContext, useImgproxyLoader, useImgproxyPlaceholder };
+export { ImgproxyLoaderProvider, useImgproxyContext, useImgproxyLoader };

package/dist/{index-BLvefiKI.d.ts → index-DG8i2dGY.d.ts}

@@ -6,20 +6,18 @@ interface ImageLoaderOptions {
   src: string;
   width?: number | null | undefined;
   height?: number | null | undefined;
+  isPlaceholder?: boolean;
 }
 type ImageLoader = (options: ImageLoaderOptions) => string | undefined;
-type ImageSrcType = string | ImageSrc;
 interface ImageProps extends Partial<Pick<ImgHTMLAttributes<HTMLImageElement>, "fetchPriority" | "decoding" | "loading" | "srcSet" | "className" | "sizes" | "style">> {
   /** Alternative text for the image, required for accessibility. Use an empty string for decorative images. */
   alt: string;
-  /** @deprecated Use `priority` instead. */
-  asap?: boolean;
   /** Configures the Image component to load the image immediately. */
   priority?: boolean;
   /** */
-  src: ImageSrcType;
+  src: string;
   /** The URL of the placeholder image to display while loading. */
-  placeholder?: string | undefined | ImageLoader | null;
+  placeholder?: string | undefined | boolean | null;
   /**
    * Sets the image to "fill mode", which eliminates the height/width requirement and adds
    * styles such that the image fills its containing element.
@@ -34,6 +32,9 @@ interface ImageProps extends Partial<Pick<ImgHTMLAttributes<HTMLImageElement>, "
 //#region src/react/image.d.ts
 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_runtime3.JSX.Element;
+//#endregion
 //#region src/react/use-img-loaded.d.ts
 /**
  * A hook that tracks whether an image element has finished loading.
@@ -64,7 +65,7 @@ declare function Image(props: ImageProps): react_jsx_runtime3.JSX.Element;
 declare function useImgLoaded(src: string | undefined): [(img: HTMLImageElement | null) => void, boolean];
 //#endregion
 //#region src/react/image-context.d.ts
-interface ImageContextValue extends Pick<ImageProps, "loading"> {
+interface ImageContextValue extends Pick<ImageProps, "placeholder" | "breakpoints" | "loader"> {
   breakpoints: number[];
   loader: ImageLoader | null;
 }
@@ -76,4 +77,4 @@ declare function ImageProvider({
   children: React.ReactNode;
 } & Partial<ImageContextValue>): react_jsx_runtime3.JSX.Element;
 //#endregion
-export { ImageLoader as a, ImageSrcType as c, Image as i, useImageContext as n, ImageLoaderOptions as o, useImgLoaded as r, ImageProps as s, ImageProvider as t };
+export { Image as a, ImageProps as c, __imageFactory as i, useImageContext as n, ImageLoader as o, useImgLoaded as r, ImageLoaderOptions as s, ImageProvider as t };

package/dist/{loader-factory-CPgnRdhT.js → loader-factory-dkIeg239.js}

@@ -58,21 +58,29 @@ function loaderFactory(defaults, config, urlResolver) {
 			children
 		});
 	}
-	const loader = (isPlaceholder) => (options) => {
+	const loader = () => (options) => {
 		const context = useLoaderContext();
 		const path = options?.path || context.path;
-		const transforms = {
-			...isPlaceholder ? context.placeholderTransforms : context.transforms,
-			...options?.transforms
-		};
 		if (!path) {
 			console.warn("Path is not provided");
 			return () => void 0;
 		}
 		return (imageOptions) => {
+			const defaultTransform = imageOptions.isPlaceholder ? context.placeholder : context.transforms;
+			const optionTransforms = imageOptions.isPlaceholder ? options?.placeholder : options?.transforms;
+			const transforms = {
+				...defaultTransform,
+				...optionTransforms
+			};
 			const params = [];
-			if (imageOptions.width) params.push("width" + config.optionSeparator + imageOptions.width);
-			if (imageOptions.height) params.push("height" + config.optionSeparator + imageOptions.height);
+			if (imageOptions.width) {
+				const widthKey = config.widthKey ?? "width";
+				params.push(widthKey + config.optionSeparator + imageOptions.width);
+			}
+			if (imageOptions.height) {
+				const heightKey = config.heightKey ?? "height";
+				params.push(heightKey + config.optionSeparator + imageOptions.height);
+			}
 			const resolvedTransforms = resolveTransform(transforms, config);
 			return urlResolver({
 				imageOptions,
@@ -85,8 +93,7 @@ function loaderFactory(defaults, config, urlResolver) {
 		LoaderProvider,
 		loaderContext,
 		useLoaderContext,
-		useLoader: loader(false),
-		usePlaceholder: loader(true)
+		useLoader: loader()
 	};
 }
 

package/dist/plugin.js

@@ -202,7 +202,7 @@ const DEFAULT_CONFIGS = {
 	format: "webp",
 	placeholder: true
 };
-const PROCESS_KEY = "oh";
+const PROCESS_KEY = "$oh";
 const SUPPORTED_IMAGE_FORMATS = /\.(jpe?g|png|webp|avif|gif|svg)(\?.*)?$/i;
 const DEV_DIR = "/@oh-images/";
 function ohImage(options) {
@@ -290,7 +290,7 @@ function ohImage(options) {
 						width: metadata.width,
 						height: metadata.height,
 						src: mainIdentifier,
-						srcSets: ""
+						srcSet: ""
 					};
 					if (mergedOptions.placeholder) {
 						const placeholderIdentifier = identifier.placeholder(DEFAULT_IMAGE_FORMAT);
@@ -309,7 +309,7 @@ function ohImage(options) {
 							normalize: mergedOptions.normalize,
 							threshold: mergedOptions.threshold
 						});
-						src.placeholderUrl = placeholderIdentifier;
+						src.placeholder = placeholderIdentifier;
 					}
 					if (mergedOptions.breakpoints) {
 						const srcSets = [];
@@ -332,9 +332,20 @@ function ohImage(options) {
 							});
 							srcSets.push(`${srcSetIdentifier} ${breakpoint}w`);
 						}
-						src.srcSets = srcSets.join(", ");
+						src.srcSet = srcSets.join(", ");
 					}
-					return `export default ${JSON.stringify(src)};`;
+					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,
+						alt: ""
+					})})
+`;
 				} catch (err) {
 					console.error(`Couldn't load image with id: ${id} error:${err}`);
 					return null;

package/dist/react.d.ts

@@ -1,2 +1,2 @@
-import { a as ImageLoader, c as ImageSrcType, i as Image, n as useImageContext, o as ImageLoaderOptions, r as useImgLoaded, s as ImageProps, t as ImageProvider } from "./index-BLvefiKI.js";
-export { Image, ImageLoader, ImageLoaderOptions, ImageProps, ImageProvider, ImageSrcType, useImageContext, useImgLoaded };
+import { a as Image, c as ImageProps, i as __imageFactory, n as useImageContext, o as ImageLoader, r as useImgLoaded, s as ImageLoaderOptions, t as ImageProvider } from "./index-DG8i2dGY.js";
+export { Image, ImageLoader, ImageLoaderOptions, ImageProps, ImageProvider, __imageFactory, useImageContext, useImgLoaded };

package/dist/react.js

@@ -1,4 +1,3 @@
-import { t as assertProps } from "./prop-asserts-ZcucnyC7.js";
 import * as ReactDOM from "react-dom";
 import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -85,7 +84,7 @@ function useImgLoaded(src) {
 * RegExpr to determine whether a src in a srcset is using width descriptors.
 * Should match something like: "100w, 200w".
 */
-const VALID_WIDTH_DESCRIPTOR_SRCSET = /^((\s*\d+w\s*(,|$)){1,})$/;
+const VALID_WIDTH_DESCRIPTOR_SRCSET = /^(\s*\S+\s+\d+w\s*(,|$)\s*)+$/;
 function resolveOptions(prop, defaultOptions) {
 	const resolved = {
 		...defaultOptions,
@@ -103,15 +102,14 @@ function resolveOptions(prop, defaultOptions) {
 	return resolved;
 }
 function resolveDecoding(prop) {
-	return prop.priority || prop.asap ? "async" : prop.decoding;
+	return prop.priority ? "async" : prop.decoding;
 }
 function resolveFetchPriority(prop) {
-	if (prop.priority || prop.asap) return "high";
+	if (prop.priority) return "high";
 	return prop.fetchPriority ?? "auto";
 }
 function resolveSrcSet(prop) {
 	if (prop.srcSet) return prop.srcSet;
-	if (typeof prop.src === "object") return prop.src.srcSets;
 	if (!prop.breakpoints) return;
 	const baseSrc = prop.src;
 	const entries = [];
@@ -124,7 +122,7 @@ function resolveSrcSet(prop) {
 	return entries.join(", ");
 }
 function resolveLoading(prop) {
-	const priority = prop.priority || prop.asap;
+	const priority = prop.priority;
 	if (!priority && prop.loading !== void 0) return prop.loading;
 	return priority ? "eager" : "lazy";
 }
@@ -139,7 +137,6 @@ function resolveSizes(prop, resolvedSrcSet, resolvedLoading) {
 	return sizes;
 }
 function resolveSrc(prop) {
-	if (typeof prop.src === "object") return prop.src.src;
 	if (prop.loader) return prop.loader({
 		src: prop.src,
 		width: prop.width,
@@ -149,23 +146,55 @@ function resolveSrc(prop) {
 }
 function resolveWidth(prop) {
 	if (prop.width) return prop.width;
-	if (typeof prop.src === "object") return prop.src.width;
 }
 function resolveHeight(prop) {
 	if (prop.height) return prop.height;
-	if (typeof prop.src === "object") return prop.src.height;
 }
 function resolvePlaceholder(prop, src) {
 	if (!prop.placeholder) return null;
 	if (typeof prop.placeholder === "string") return prop.placeholder;
-	if (typeof prop.placeholder === "function") return prop.placeholder({
+	if (prop.loader) return prop.loader({
 		src,
+		isPlaceholder: true,
 		width: prop.width,
 		height: prop.height
 	});
 	return null;
 }
 
+//#endregion
+//#region src/react/prop-asserts.ts
+function assertProps(prop) {
+	try {
+		assertLoadingProp(prop);
+		assertDecodingProp(prop);
+		assertFetchPriorityProp(prop);
+		assertFillProp(prop);
+		assertDimensionsProp(prop);
+	} catch (err) {
+		const message = err instanceof Error ? err.message : err;
+		console.warn(message);
+	}
+}
+function assert(assertion, message) {
+	if (assertion()) throw new Error(message || void 0);
+}
+function assertLoadingProp(prop) {
+	assert(() => prop.loading && prop.priority, `Do not use \`loading\` on a priority image — priority images are always eagerly loaded.`);
+}
+function assertDecodingProp(prop) {
+	assert(() => prop.decoding && prop.priority, `Do not use \`decoding\` on a priority image — priority images always use async decoding.`);
+}
+function assertFetchPriorityProp(prop) {
+	assert(() => prop.fetchPriority && prop.priority, `Do not use \`fetchPriority\` on a priority image — priority images always use high fetch priority.`);
+}
+function assertFillProp(prop) {
+	assert(() => prop.fill && (prop.width !== void 0 || prop.height !== void 0), `Do not use \`width\` or \`height\` with \`fill\` — fill mode makes the image fill its container.`);
+}
+function assertDimensionsProp(prop) {
+	assert(() => typeof prop.src === "string" && !prop.fill && prop.width === void 0 && prop.height === void 0, `Image is missing \`width\` and \`height\` props. Either provide dimensions, use \`fill\`, or use an imported image source.`);
+}
+
 //#endregion
 //#region src/react/image-context.tsx
 const ImageContext = createContext({
@@ -182,8 +211,8 @@ const ImageContext = createContext({
 		1200,
 		1920
 	],
-	loading: "lazy",
-	loader: null
+	loader: null,
+	placeholder: true
 });
 function useImageContext() {
 	return useContext(ImageContext);
@@ -230,7 +259,7 @@ function Image(props) {
 		...fillStyles,
 		...props.style
 	};
-	if (preload && options.asap) preload(options.src, {
+	if (preload && options.priority) preload(options.src, {
 		as: "image",
 		fetchPriority: "high"
 	});
@@ -251,4 +280,15 @@ function Image(props) {
 }
 
 //#endregion
-export { Image, ImageProvider, useImageContext, useImgLoaded };
+//#region src/react/image-factory.tsx
+function __imageFactory(defaultProps) {
+	return (props) => {
+		return /* @__PURE__ */ jsx(Image, {
+			...defaultProps,
+			...props
+		});
+	};
+}
+
+//#endregion
+export { Image, ImageProvider, __imageFactory, useImageContext, useImgLoaded };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lonik/oh-image",
   "type": "module",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "A React component library for optimized image handling.",
   "author": "Luka Onikadze <lukonik@gmail.com>",
   "license": "MIT",
@@ -95,6 +95,8 @@
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.54.0",
     "vite": "^7.3.0",
+    "vite-plugin-inspect": "^11.3.3",
+    "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.0.16"
   },
   "dependencies": {

package/dist/prop-asserts-ZcucnyC7.js

@@ -1,40 +0,0 @@
-//#region src/react/prop-asserts.ts
-function assertProps(prop) {
-	try {
-		if (prop.asap !== void 0) console.warn("The `asap` prop is deprecated and will be removed in a future version. Please use `priority` instead.");
-		assertLoadingProp(prop);
-		assertDecodingProp(prop);
-		assertFetchPriorityProp(prop);
-		assertBreakpointsProp(prop);
-		assertFillProp(prop);
-		assertDimensionsProp(prop);
-	} catch (err) {
-		const message = err instanceof Error ? err.message : err;
-		console.warn(message);
-	}
-}
-function assert(assertion, message) {
-	if (assertion()) throw new Error(message || void 0);
-}
-function assertLoadingProp(prop) {
-	assert(() => prop.loading && (prop.priority || prop.asap), `Do not use \`loading\` on a priority image — priority images are always eagerly loaded.`);
-}
-function assertDecodingProp(prop) {
-	assert(() => prop.decoding && (prop.priority || prop.asap), `Do not use \`decoding\` on a priority image — priority images always use async decoding.`);
-}
-function assertFetchPriorityProp(prop) {
-	assert(() => prop.fetchPriority && (prop.priority || prop.asap), `Do not use \`fetchPriority\` on a priority image — priority images always use high fetch priority.`);
-}
-function assertBreakpointsProp(prop) {
-	assert(() => prop.breakpoints && typeof prop.src === "object", `Do not use \`breakpoints\` when \`src\` is an imported image — the image's built-in srcSets are used instead.`);
-	assert(() => prop.breakpoints && typeof prop.src === "string" && !prop.loader, `Do not use \`breakpoints\` without a \`loader\` — breakpoints require a loader to generate srcSet entries.`);
-}
-function assertFillProp(prop) {
-	assert(() => prop.fill && (prop.width !== void 0 || prop.height !== void 0), `Do not use \`width\` or \`height\` with \`fill\` — fill mode makes the image fill its container.`);
-}
-function assertDimensionsProp(prop) {
-	assert(() => typeof prop.src === "string" && !prop.fill && prop.width === void 0 && prop.height === void 0, `Image is missing \`width\` and \`height\` props. Either provide dimensions, use \`fill\`, or use an imported image source.`);
-}
-
-//#endregion
-export { assertProps as t };