@lonik/oh-image 2.1.2 → 2.2.0

package/dist/react.js

@@ -84,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,
@@ -102,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 = [];
@@ -123,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";
 }
@@ -138,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,
@@ -148,17 +146,16 @@ 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
 	});
@@ -169,11 +166,9 @@ function resolvePlaceholder(prop, src) {
 //#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) {
@@ -185,17 +180,13 @@ 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.`);
+	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 || prop.asap), `Do not use \`decoding\` on a priority image — priority images always use async decoding.`);
+	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 || 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.`);
+	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.`);
@@ -220,8 +211,8 @@ const ImageContext = createContext({
 		1200,
 		1920
 	],
-	loading: "lazy",
-	loader: null
+	loader: null,
+	placeholder: true
 });
 function useImageContext() {
 	return useContext(ImageContext);
@@ -268,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"
 	});
@@ -289,373 +280,15 @@ function Image(props) {
 }
 
 //#endregion
-//#region src/react/loaders/loader-utils.ts
-function resolveOption(key, value, separator) {
-	return `${key}${separator}${value}`;
-}
-function resolveDeprecatedParams(source, separator) {
-	const params = [];
-	for (const key of Object.keys(params)) {
-		const value = source[key];
-		if (value !== void 0) params.push(resolveOption(key, value, separator));
-	}
-	return params;
-}
-
-//#endregion
-//#region src/react/loaders/imgproxy/create-imgproxy-url.ts
-const stringifyOptions = (opCode, values) => {
-	return [opCode, ...values.map((v) => v == null ? "" : encodeURIComponent(v))].join(":").replace(/:+$/, "");
-};
-const resolveObjectParam = (key, source) => {
-	if (source === void 0) return;
-	if (key === "size") {
-		const tSource = source;
-		if (!tSource) return;
-		return stringifyOptions(key, [
-			tSource.width,
-			tSource.height,
-			tSource.enlarge,
-			tSource.extend
-		]);
-	}
-	if (key === "resize") {
-		const tSource = source;
-		if (!tSource) return;
-		return stringifyOptions(key, [
-			tSource.resizing_type,
-			tSource.width,
-			tSource.height,
-			tSource.enlarge,
-			tSource.extend
-		]);
-	}
-	if (key === "extend") {
-		const tSource = source;
-		if (!tSource) return;
-		if (typeof tSource === "boolean") return stringifyOptions(key, [tSource]);
-		return stringifyOptions(key, [tSource.extend, tSource.gravity]);
-	}
-	if (key === "gravity") {
-		const tSource = source;
-		if (!tSource) return;
-		return stringifyOptions(key, [
-			tSource.type,
-			tSource.x_offset,
-			tSource.y_offset
-		]);
-	}
-	if (key === "crop") {
-		const tSource = source;
-		if (!tSource) return;
-		return stringifyOptions(key, [
-			tSource.width,
-			tSource.height,
-			tSource.gravity
-		]);
-	}
-	if (key === "trim") {
-		const tSource = source;
-		if (!tSource) return;
-		return stringifyOptions(key, [
-			tSource.threshold,
-			tSource.color,
-			tSource.equal_hor,
-			tSource.equal_ver
-		]);
-	}
-	if (key === "padding") {
-		const tSource = source;
-		if (!tSource) return;
-		return stringifyOptions(key, [
-			tSource.top,
-			tSource.right,
-			tSource.bottom,
-			tSource.left
-		]);
-	}
-	if (key === "background") {
-		const tSource = source;
-		if (!tSource) return;
-		if (typeof tSource === "string") return stringifyOptions(key, [tSource]);
-		return stringifyOptions(key, [
-			tSource.r,
-			tSource.g,
-			tSource.b
-		]);
-	}
-	if (key === "adjust") {
-		const tSource = source;
-		if (!tSource) return;
-		return stringifyOptions(key, [
-			tSource.brightness,
-			tSource.contrast,
-			tSource.saturation
-		]);
-	}
-	if (key === "blur_detections") {
-		const tSource = source;
-		if (!tSource) return;
-		return stringifyOptions(key, [tSource.sigma, ...tSource.class_names]);
-	}
-	if (key === "draw_detections") {
-		const tSource = source;
-		if (!tSource) return;
-		return stringifyOptions(key, [tSource.draw, ...tSource.class_names]);
-	}
-	if (key === "watermark") {
-		const tSource = source;
-		if (!tSource) return;
-		return stringifyOptions(key, [
-			tSource.opacity,
-			tSource.position,
-			tSource.x_offset,
-			tSource.y_offset,
-			tSource.scale
-		]);
-	}
-	if (key === "watermark_size") {
-		const tSource = source;
-		if (!tSource) return;
-		return stringifyOptions(key, [tSource.width, tSource.height]);
-	}
-	if (key === "unsharpening") {
-		const tSource = source;
-		if (!tSource) return;
-		return stringifyOptions(key, [
-			tSource.mode,
-			tSource.weight,
-			tSource.dividor
-		]);
-	}
-	if (key === "autoquality") {
-		const tSource = source;
-		if (!tSource) return;
-		return stringifyOptions(key, [
-			tSource.method,
-			tSource.target,
-			tSource.min_quality,
-			tSource.max_quality,
-			tSource.allowed_error
-		]);
-	}
-	if (key === "jpeg_options") {
-		const tSource = source;
-		if (!tSource) return;
-		return stringifyOptions(key, [
-			tSource.progressive,
-			tSource.no_subsample,
-			tSource.trellis_quant,
-			tSource.overshoot_deringing,
-			tSource.optimize_scans,
-			tSource.quant_table
-		]);
-	}
-	if (key === "png_options") {
-		const tSource = source;
-		if (!tSource) return;
-		return stringifyOptions(key, [
-			tSource.interlaced,
-			tSource.quantize,
-			tSource.quantization_colors
-		]);
-	}
-	if (key === "zoom") {
-		const tSource = source;
-		if (!tSource) return;
-		if (typeof tSource === "number") return stringifyOptions(key, [tSource]);
-		return stringifyOptions(key, [tSource.x, tSource.y]);
-	}
-};
-const resolveTransforms = (transforms) => {
-	if (!transforms) return "";
-	const params = [];
-	for (const key of Object.keys(transforms)) {
-		const value = transforms[key];
-		const keyCast = key;
-		if (value === void 0) continue;
-		if (typeof value === "object") {
-			const objectParams = resolveObjectParam(keyCast, value);
-			if (objectParams) params.push(objectParams);
-		} else params.push(stringifyOptions(key, [value]));
-	}
-	return params;
-};
-function createImgproxyUrl(path, transforms, imageOptions) {
-	if (!path) throw new Error("Path must be provided");
-	const params = [];
-	if (imageOptions.width) params.push(stringifyOptions("width", [imageOptions.width]));
-	if (imageOptions.height) params.push(stringifyOptions("height", [imageOptions.height]));
-	params.push(...resolveTransforms(transforms));
-	if (params) params.push(...resolveDeprecatedParams(params, ":"));
-	return `${path}/${params.join("/")}/plain/${imageOptions.src}`;
-}
-
-//#endregion
-//#region src/react/loaders/imgproxy/imgproxy-context.tsx
-const ImgproxyContext = createContext({
-	transforms: { format: "webp" },
-	placeholderTransforms: {
-		quality: 10,
-		format: "webp"
-	}
-});
-function useImgproxyContext() {
-	return useContext(ImgproxyContext);
-}
-function ImgproxyLoaderProvider({ children, ...props }) {
-	const ctx = useImgproxyContext();
-	return /* @__PURE__ */ jsx(ImgproxyContext.Provider, {
-		value: {
-			...ctx,
-			...props
-		},
-		children
-	});
-}
-
-//#endregion
-//#region src/react/loaders/imgproxy/use-imgproxy-loader.tsx
-function useImgproxyLoader(options) {
-	const context = useImgproxyContext();
-	const path = options?.path || context.path;
-	const transforms = {
-		...context.transforms,
-		...options?.transforms
-	};
-	return (imageOptions) => createImgproxyUrl(path, transforms, imageOptions);
-}
-
-//#endregion
-//#region src/react/loaders/imgproxy/use-imgproxy-placeholder.tsx
-function useImgproxyPlaceholder(options) {
-	const context = useImgproxyContext();
-	const path = options?.path || context.path;
-	const transforms = {
-		...context.placeholderTransforms,
-		...options?.transforms
-	};
-	return (imageOptions) => createImgproxyUrl(path, transforms, imageOptions);
-}
-
-//#endregion
-//#region src/react/loaders/image-loader-utils.ts
-function normalizeLoaderParams(params, separator) {
-	return Object.entries(params).map(([key, value]) => `${key}${separator}${value}`);
-}
-function isAbsoluteUrl(src) {
-	return /^https?:\/\//.test(src);
-}
-function assertPath(path) {
-	assert(() => !path?.trim(), import.meta.env.DEV && `Path is required`);
-	assert(() => {
-		try {
-			new URL(path);
-			return !isAbsoluteUrl(path);
-		} catch {
-			return true;
-		}
-	}, import.meta.env.DEV && `Path is invalid url: ${path}`);
-}
-
-//#endregion
-//#region src/react/loaders/cloudflare-loader.tsx
-const CloudflareContext = createContext({
-	path: "",
-	placeholder: true,
-	format: "auto",
-	placeholderParams: { quality: "low" }
-});
-function useCloudflareContext() {
-	return useContext(CloudflareContext);
-}
-function CloudflareLoaderProvider({ children, ...props }) {
-	const ctx = useCloudflareContext();
-	return /* @__PURE__ */ jsx(CloudflareContext.Provider, {
-		value: {
-			...ctx,
-			...props
-		},
-		children
-	});
-}
-function useCloudflareLoader(options) {
-	const resolvedOptions = {
-		...useCloudflareContext(),
-		...options
-	};
-	assertPath(resolvedOptions.path);
-	return (imageOptions) => {
-		const parts = [];
-		const format = resolvedOptions.format;
-		if (format) parts.push(`format=${format}`);
-		if (imageOptions.width) parts.push(`width=${imageOptions.width}`);
-		if (imageOptions.height) parts.push(`height=${imageOptions.height}`);
-		if (resolvedOptions.params) parts.push(...normalizeLoaderParams(resolvedOptions.params, "="));
-		if (imageOptions.isPlaceholder) {
-			if (resolvedOptions.placeholderParams) {
-				const placeholderParams = normalizeLoaderParams(resolvedOptions.placeholderParams, "=");
-				parts.push(...placeholderParams);
-			}
-		} else if (resolvedOptions.params) {
-			const params = normalizeLoaderParams(resolvedOptions.params, "=");
-			parts.push(...params);
-		}
-		const processingOptions = parts.join(",");
-		return `${resolvedOptions.path}/cdn-cgi/image/${processingOptions}/${imageOptions.src}`;
-	};
-}
-
-//#endregion
-//#region src/react/loaders/cloudinary-loader.tsx
-const CloudinaryContext = createContext({
-	path: "",
-	placeholder: true,
-	format: "auto",
-	placeholderParams: {
-		e_blur: ":1000",
-		q: "_1"
-	}
-});
-function useCloudinaryContext() {
-	return useContext(CloudinaryContext);
-}
-function CloudinaryLoaderProvider({ children, ...props }) {
-	const ctx = useCloudinaryContext();
-	return /* @__PURE__ */ jsx(CloudinaryContext.Provider, {
-		value: {
-			...ctx,
+//#region src/react/image-factory.tsx
+function __imageFactory(defaultProps) {
+	return (props) => {
+		return /* @__PURE__ */ jsx(Image, {
+			...defaultProps,
 			...props
-		},
-		children
-	});
-}
-function useCloudinaryLoader(options) {
-	const resolvedOptions = {
-		...useCloudinaryContext(),
-		...options
-	};
-	assertPath(resolvedOptions.path);
-	return (imageOptions) => {
-		const parts = [];
-		const format = `f_${resolvedOptions.format}`;
-		parts.push(`${format}`);
-		if (imageOptions.width) parts.push(`w_${imageOptions.width}`);
-		if (imageOptions.height) parts.push(`h_${imageOptions.height}`);
-		if (imageOptions.isPlaceholder) {
-			if (resolvedOptions.placeholderParams) {
-				const placeholderParams = normalizeLoaderParams(resolvedOptions.placeholderParams, "");
-				parts.push(...placeholderParams);
-			}
-		} else if (resolvedOptions.params) {
-			const params = normalizeLoaderParams(resolvedOptions.params, "");
-			parts.push(...params);
-		}
-		let src = imageOptions.src;
-		if (src.startsWith("/")) src = src.slice(1);
-		return `${resolvedOptions.path.endsWith("/") ? resolvedOptions.path.slice(0, -1) : resolvedOptions.path}/image/upload/${parts.join(",")}/${src}`;
+		});
 	};
 }
 
 //#endregion
-export { CloudflareLoaderProvider, CloudinaryLoaderProvider, Image, ImageProvider, ImgproxyLoaderProvider, useCloudflareContext, useCloudflareLoader, useCloudinaryContext, useCloudinaryLoader, useImageContext, useImgLoaded, useImgproxyContext, useImgproxyLoader, useImgproxyPlaceholder };
+export { Image, ImageProvider, __imageFactory, useImageContext, useImgLoaded };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lonik/oh-image",
   "type": "module",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "A React component library for optimized image handling.",
   "author": "Luka Onikadze <lukonik@gmail.com>",
   "license": "MIT",
@@ -24,6 +24,18 @@
       "types": "./dist/react.d.ts",
       "default": "./dist/react.js"
     },
+    "./cloudflare": {
+      "types": "./dist/cloudflare.d.ts",
+      "default": "./dist/cloudflare.js"
+    },
+    "./cloudinary": {
+      "types": "./dist/cloudinary.d.ts",
+      "default": "./dist/cloudinary.js"
+    },
+    "./imgproxy": {
+      "types": "./dist/imgproxy.d.ts",
+      "default": "./dist/imgproxy.js"
+    },
     "./client": {
       "types": "./dist/client.d.ts"
     }
@@ -55,6 +67,7 @@
   "devDependencies": {
     "@commitlint/config-conventional": "^20.4.1",
     "@eslint/js": "^9.39.2",
+    "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-router": "^1.160.0",
     "@tanstack/router-plugin": "^1.160.0",
     "@testing-library/jest-dom": "^6.9.1",
@@ -74,16 +87,17 @@
     "eslint-plugin-react-refresh": "^0.5.0",
     "globals": "^17.3.0",
     "happy-dom": "^20.6.0",
+    "json-edit-react": "^1.29.0",
     "memfs": "^4.56.10",
     "supertest": "^7.2.2",
+    "tailwindcss": "^4.1.18",
     "tsdown": "^0.18.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.54.0",
     "vite": "^7.3.0",
-    "vitest": "^4.0.16",
-    "tailwindcss": "^4.1.18",
-    "@tailwindcss/vite": "^4.1.18",
-    "json-edit-react": "^1.29.0"
+    "vite-plugin-inspect": "^11.3.3",
+    "vite-tsconfig-paths": "^6.1.1",
+    "vitest": "^4.0.16"
   },
   "dependencies": {
     "p-limit": "^7.3.0",