@lonik/oh-image 2.0.4 → 2.0.6

package/dist/react.d.ts

@@ -1,5 +1,5 @@
 import { ImgHTMLAttributes } from "react";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/react/types.d.ts
 interface ImageLoaderOptions {
@@ -13,8 +13,10 @@ 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;
-  /** Configures the Image component to load the image immediately. */
+  /** @deprecated Use `priority` instead. */
   asap?: boolean;
+  /** Configures the Image component to load the image immediately. */
+  priority?: boolean;
   /** */
   src: ImageSrcType;
   /** The URL of the placeholder image to display while loading. */
@@ -31,7 +33,7 @@ interface ImageProps extends Partial<Pick<ImgHTMLAttributes<HTMLImageElement>, "
 }
 //#endregion
 //#region src/react/image.d.ts
-declare function Image(props: ImageProps): react_jsx_runtime3.JSX.Element;
+declare function Image(props: ImageProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/react/use-img-loaded.d.ts
 /**
@@ -73,7 +75,7 @@ declare function ImageProvider({
   ...props
 }: {
   children: React.ReactNode;
-} & Partial<ImageContextValue>): react_jsx_runtime3.JSX.Element;
+} & Partial<ImageContextValue>): react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/react/loaders/imgproxy-loader.d.ts
 interface ImgproxyLoaderOptions {
@@ -91,7 +93,7 @@ declare function ImgproxyLoaderProvider({
   ...props
 }: {
   children: React.ReactNode;
-} & Partial<ImgproxyLoaderOptions>): react_jsx_runtime3.JSX.Element;
+} & Partial<ImgproxyLoaderOptions>): react_jsx_runtime0.JSX.Element;
 declare function useImgproxyLoader(options?: Partial<ImgproxyLoaderOptions>): ImageLoader;
 //#endregion
 //#region src/react/loaders/cloudflare-loader.d.ts
@@ -109,7 +111,7 @@ declare function CloudflareLoaderProvider({
   ...props
 }: {
   children: React.ReactNode;
-} & Partial<CloudflareLoaderOptions>): react_jsx_runtime3.JSX.Element;
+} & Partial<CloudflareLoaderOptions>): react_jsx_runtime0.JSX.Element;
 declare function useCloudflareLoader(options?: Partial<CloudflareLoaderOptions>): ImageLoader;
 //#endregion
 //#region src/react/loaders/cloudinary-loader.d.ts
@@ -127,7 +129,7 @@ declare function CloudinaryLoaderProvider({
   ...props
 }: {
   children: React.ReactNode;
-} & Partial<CloudinaryLoaderOptions>): react_jsx_runtime3.JSX.Element;
+} & Partial<CloudinaryLoaderOptions>): react_jsx_runtime0.JSX.Element;
 declare function useCloudinaryLoader(options?: Partial<CloudinaryLoaderOptions>): ImageLoader;
 //#endregion
 export { type CloudflareLoaderOptions, CloudflareLoaderProvider, type CloudinaryLoaderOptions, CloudinaryLoaderProvider, Image, type ImageLoader, type ImageLoaderOptions, type ImageProps, ImageProvider, type ImageSrcType, type ImgproxyLoaderOptions, ImgproxyLoaderProvider, useCloudflareContext, useCloudflareLoader, useCloudinaryContext, useCloudinaryLoader, useImageContext, useImgLoaded, useImgproxyContext, useImgproxyLoader };

package/dist/react.js

@@ -102,10 +102,10 @@ function resolveOptions(prop, defaultOptions) {
 	return resolved;
 }
 function resolveDecoding(prop) {
-	return prop.asap ? "async" : prop.decoding;
+	return prop.priority || prop.asap ? "async" : prop.decoding;
 }
 function resolveFetchPriority(prop) {
-	if (prop.asap) return "high";
+	if (prop.priority || prop.asap) return "high";
 	return prop.fetchPriority ?? "auto";
 }
 function resolveSrcSet(prop) {
@@ -124,8 +124,9 @@ function resolveSrcSet(prop) {
 	return entries.join(", ");
 }
 function resolveLoading(prop) {
-	if (!prop.asap && prop.loading !== void 0) return prop.loading;
-	return prop.asap ? "eager" : "lazy";
+	const priority = prop.priority || prop.asap;
+	if (!priority && prop.loading !== void 0) return prop.loading;
+	return priority ? "eager" : "lazy";
 }
 function resolveSizes(prop, resolvedSrcSet, resolvedLoading) {
 	const loading = resolvedLoading ?? resolveLoading(prop);
@@ -169,6 +170,7 @@ function resolvePlaceholderURL(prop) {
 //#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);
@@ -181,28 +183,26 @@ function assertProps(prop) {
 	}
 }
 function assert(assertion, message) {
-	if (import.meta.env.DEV) {
-		if (assertion()) throw new Error(message || void 0);
-	}
+	if (assertion()) throw new Error(message || void 0);
 }
 function assertLoadingProp(prop) {
-	assert(() => prop.loading && prop.asap, import.meta.env.DEV && `Do not use \`loading\` on a asap image — asap images are always eagerly loaded.`);
+	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.asap, import.meta.env.DEV && `Do not use \`decoding\` on a asap image — asap images always use async decoding.`);
+	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.asap, import.meta.env.DEV && `Do not use \`fetchPriority\` on a asap image — asap images always use high fetch priority.`);
+	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", import.meta.env.DEV && `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, import.meta.env.DEV && `Do not use \`breakpoints\` without a \`loader\` — breakpoints require a loader to generate srcSet entries.`);
+	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), import.meta.env.DEV && `Do not use \`width\` or \`height\` with \`fill\` — fill mode makes the image fill its container.`);
+	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, import.meta.env.DEV && `Image is missing \`width\` and \`height\` props. Either provide dimensions, use \`fill\`, or use an imported image source.`);
+	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
@@ -340,7 +340,7 @@ function useImgproxyLoader(options) {
 		const parts = [];
 		const format = resolvedOptions.format;
 		const paramsSeparator = resolvedOptions.paramsSeparator ?? "/";
-		if (format) parts.push(`format:${format}`);
+		if (format) parts.push(`f:${format}`);
 		if (imageOptions.width) parts.push(`width:${imageOptions.width}`);
 		if (imageOptions.height) parts.push(`height:${imageOptions.height}`);
 		if (imageOptions.isPlaceholder) {

package/package.json

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