@lonik/oh-image 2.1.2 → 2.2.0

package/dist/imgproxy.js

@@ -0,0 +1,100 @@
+import { t as loaderFactory } from "./loader-factory-dkIeg239.js";
+
+//#region src/loaders/imgproxy/imgproxy-loader.tsx
+const { useLoaderContext: useImgproxyContext, LoaderProvider: ImgproxyLoaderProvider, useLoader: useImgproxyLoader } = loaderFactory({
+	transforms: { format: "webp" },
+	placeholder: {
+		quality: 10,
+		format: "webp"
+	}
+}, {
+	optionSeparator: ":",
+	paramSeparator: "/",
+	orders: {
+		resize: [
+			"resizing_type",
+			"width",
+			"height",
+			"enlarge",
+			"extend"
+		],
+		size: [
+			"width",
+			"height",
+			"enlarge",
+			"extend"
+		],
+		extend: ["extend", "gravity"],
+		gravity: [
+			"type",
+			"x_offset",
+			"y_offset"
+		],
+		crop: [
+			"width",
+			"height",
+			"gravity"
+		],
+		trim: [
+			"threshold",
+			"color",
+			"equal_hor",
+			"equal_ver"
+		],
+		padding: [
+			"top",
+			"right",
+			"bottom",
+			"left"
+		],
+		background: [
+			"r",
+			"g",
+			"b"
+		],
+		adjust: [
+			"brightness",
+			"contrast",
+			"saturation"
+		],
+		blur_detections: ["sigma", "class_names"],
+		draw_detections: ["draw", "class_names"],
+		watermark: [
+			"opacity",
+			"position",
+			"x_offset",
+			"y_offset",
+			"scale"
+		],
+		watermark_size: ["width", "height"],
+		unsharpening: [
+			"mode",
+			"weight",
+			"dividor"
+		],
+		autoquality: [
+			"method",
+			"target",
+			"min_quality",
+			"max_quality",
+			"allowed_error"
+		],
+		jpeg_options: [
+			"progressive",
+			"no_subsample",
+			"trellis_quant",
+			"overshoot_deringing",
+			"optimize_scans",
+			"quant_table"
+		],
+		png_options: [
+			"interlaced",
+			"quantize",
+			"quantization_colors"
+		],
+		zoom: ["x", "y"]
+	}
+}, ({ path, params, imageOptions }) => `${path}/${params}/plain/${imageOptions.src}`);
+
+//#endregion
+export { ImgproxyLoaderProvider, useImgproxyContext, useImgproxyLoader };

package/dist/index-DG8i2dGY.d.ts

@@ -0,0 +1,80 @@
+import { ImgHTMLAttributes } from "react";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
+
+//#region src/react/types.d.ts
+interface ImageLoaderOptions {
+  src: string;
+  width?: number | null | undefined;
+  height?: number | null | undefined;
+  isPlaceholder?: boolean;
+}
+type ImageLoader = (options: ImageLoaderOptions) => string | undefined;
+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. */
+  priority?: boolean;
+  /** */
+  src: string;
+  /** The URL of the placeholder image to display while loading. */
+  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.
+   */
+  fill?: boolean;
+  loader?: ImageLoader | null;
+  width?: number | undefined;
+  height?: number | undefined;
+  breakpoints?: number[];
+}
+//#endregion
+//#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.
+ *
+ * Handles all edge cases:
+ * - Image already cached/complete on mount
+ * - Normal load via event listener
+ * - Errors (resets to `false`)
+ * - `src` changes (resets to `false` until the new source loads)
+ * - Element unmount / ref set to `null`
+ *
+ * @returns `[ref, isLoaded]` — attach the ref callback to an `<img>` element.
+ *
+ * @example
+ * ```tsx
+ * function Avatar({ src }: { src: string }) {
+ *   const [imgRef, isLoaded] = useImgLoaded(src);
+ *   return (
+ *     <img
+ *       ref={imgRef}
+ *       src={src}
+ *       style={{ opacity: isLoaded ? 1 : 0 }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function useImgLoaded(src: string | undefined): [(img: HTMLImageElement | null) => void, boolean];
+//#endregion
+//#region src/react/image-context.d.ts
+interface ImageContextValue extends Pick<ImageProps, "placeholder" | "breakpoints" | "loader"> {
+  breakpoints: number[];
+  loader: ImageLoader | null;
+}
+declare function useImageContext(): ImageContextValue;
+declare function ImageProvider({
+  children,
+  ...props
+}: {
+  children: React.ReactNode;
+} & Partial<ImageContextValue>): react_jsx_runtime3.JSX.Element;
+//#endregion
+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-dkIeg239.js

@@ -0,0 +1,101 @@
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/loaders/transforms-resolver.ts
+const stringifyOptions = (opCode, values, separator) => {
+	return [opCode, ...values.map((v) => v == null ? "" : encodeURIComponent(v))].join(separator);
+};
+const resolveObjectParam = (key, value, order, separator) => {
+	if (!order) return;
+	return stringifyOptions(key, order.map((k) => value[k]), separator);
+};
+function resolveTransform(transforms, config) {
+	if (!transforms) return [];
+	const params = [];
+	for (const key of Object.keys(transforms)) {
+		const value = transforms[key];
+		if (value === void 0) continue;
+		const type = typeof value;
+		if (config.customResolver) {
+			const resolverFn = config.customResolver[key];
+			if (resolverFn) {
+				const resolvedValue = resolverFn(key, value);
+				if (resolvedValue !== void 0) params.push(resolvedValue);
+				continue;
+			}
+		}
+		switch (type) {
+			case "boolean":
+				if (value === true) params.push(key);
+				break;
+			case "object": {
+				const objectParams = resolveObjectParam(key, value, config?.orders?.[key], config.optionSeparator);
+				if (objectParams) params.push(objectParams);
+				break;
+			}
+			default:
+				params.push(stringifyOptions(key, [value], config.optionSeparator));
+				break;
+		}
+	}
+	return params;
+}
+
+//#endregion
+//#region src/loaders/loader-factory.tsx
+function loaderFactory(defaults, config, urlResolver) {
+	const loaderContext = createContext(defaults);
+	function useLoaderContext() {
+		return useContext(loaderContext);
+	}
+	function LoaderProvider({ children, ...props }) {
+		const ctx = useLoaderContext();
+		return /* @__PURE__ */ jsx(loaderContext.Provider, {
+			value: {
+				...ctx,
+				...props
+			},
+			children
+		});
+	}
+	const loader = () => (options) => {
+		const context = useLoaderContext();
+		const path = options?.path || context.path;
+		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) {
+				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,
+				params: [...params, ...resolvedTransforms].join(config.paramSeparator),
+				path
+			});
+		};
+	};
+	return {
+		LoaderProvider,
+		loaderContext,
+		useLoaderContext,
+		useLoader: loader()
+	};
+}
+
+//#endregion
+export { loaderFactory as t };

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;