@lonik/oh-image 2.1.1 → 2.1.3

package/dist/react.js

@@ -1,3 +1,4 @@
+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";
@@ -165,45 +166,6 @@ function resolvePlaceholder(prop, src) {
 	return null;
 }
 
-//#endregion
-//#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
 //#region src/react/image-context.tsx
 const ImageContext = createContext({
@@ -289,373 +251,4 @@ 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,
-			...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, useImageContext, useImgLoaded };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lonik/oh-image",
   "type": "module",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "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,15 @@
     "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"
+    "vitest": "^4.0.16"
   },
   "dependencies": {
     "p-limit": "^7.3.0",