@lonik/oh-image 2.1.1 → 2.1.3

package/dist/imgproxy.js

@@ -0,0 +1,100 @@
+import { t as loaderFactory } from "./loader-factory-CPgnRdhT.js";
+
+//#region src/loaders/imgproxy/imgproxy-loader.tsx
+const { useLoaderContext: useImgproxyContext, LoaderProvider: ImgproxyLoaderProvider, useLoader: useImgproxyLoader, usePlaceholder: useImgproxyPlaceholder } = loaderFactory({
+	transforms: { format: "webp" },
+	placeholderTransforms: {
+		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, useImgproxyPlaceholder };

package/dist/index-BLvefiKI.d.ts

@@ -0,0 +1,79 @@
+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;
+}
+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;
+  /** The URL of the placeholder image to display while loading. */
+  placeholder?: string | undefined | ImageLoader | 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/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, "loading"> {
+  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 { ImageLoader as a, ImageSrcType as c, Image as i, useImageContext as n, ImageLoaderOptions as o, useImgLoaded as r, ImageProps as s, ImageProvider as t };

package/dist/loader-factory-CPgnRdhT.js

@@ -0,0 +1,94 @@
+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 = (isPlaceholder) => (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 params = [];
+			if (imageOptions.width) params.push("width" + config.optionSeparator + imageOptions.width);
+			if (imageOptions.height) params.push("height" + 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(false),
+		usePlaceholder: loader(true)
+	};
+}
+
+//#endregion
+export { loaderFactory as t };

package/dist/prop-asserts-ZcucnyC7.js

@@ -0,0 +1,40 @@
+//#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 };