@lonik/oh-image 2.0.0 → 2.0.2

package/dist/plugin.js

@@ -10,7 +10,8 @@ function queryToOptions(processKey, uri) {
 	const [path, query] = uri.split("?");
 	if (!query || !path) return {
 		shouldProcess: false,
-		path: ""
+		path: "",
+		queryString: ""
 	};
 	const parsed = queryString.parse(query, {
 		parseBooleans: true,
@@ -33,19 +34,23 @@ function queryToOptions(processKey, uri) {
 	if (processKey in parsed) return {
 		shouldProcess: true,
 		options: parsed,
-		path
+		path,
+		queryString: query
 	};
 	else return {
 		shouldProcess: false,
-		path
+		path,
+		queryString: query
 	};
 }
 
 //#endregion
 //#region src/plugin/file-utils.ts
-async function getFileHash(filePath) {
-	const content = await readFile(filePath);
-	return createHash("sha256").update(content).digest("hex").slice(0, 16);
+async function getHash(value) {
+	return createHash("sha256").update(value).digest("hex").slice(0, 16);
+}
+async function getFileHash(filePath, queryString$1) {
+	return `${await getHash(await readFile(filePath))}-${await getHash(queryString$1)}`;
 }
 async function readFileSafe(path) {
 	try {
@@ -226,12 +231,12 @@ function ohImage(options) {
 				const fileId = basename(url);
 				const path = join(cacheDir, fileId);
 				const ext = extname(url).slice(1);
-				const image = await readFileSafe(path);
 				const imageEntry = imageEntries.get(url);
 				if (!imageEntry) {
 					console.warn("Image entry not found with id: " + url);
 					return next();
 				}
+				const image = await readFileSafe(path);
 				if (image) {
 					res.setHeader("Content-Type", `image/${ext}`);
 					res.end(image);
@@ -252,7 +257,7 @@ function ohImage(options) {
 					const origin = parsed.path;
 					const { name, ext } = parse(parsed.path);
 					const metadata = await sharp(parsed.path).metadata();
-					const hash = await getFileHash(origin);
+					const hash = await getFileHash(origin, parsed.queryString);
 					const mergedOptions = {
 						...config,
 						...parsed.options

package/dist/react.d.ts

@@ -1,5 +1,5 @@
 import { ImgHTMLAttributes } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/react/types.d.ts
 interface ImageLoaderOptions {
@@ -31,7 +31,7 @@ interface ImageProps extends Partial<Pick<ImgHTMLAttributes<HTMLImageElement>, "
 }
 //#endregion
 //#region src/react/image.d.ts
-declare function Image(props: ImageProps): react_jsx_runtime0.JSX.Element;
+declare function Image(props: ImageProps): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/react/use-img-loaded.d.ts
 /**
@@ -62,58 +62,72 @@ declare function Image(props: ImageProps): react_jsx_runtime0.JSX.Element;
  */
 declare function useImgLoaded(src: string | undefined): [(img: HTMLImageElement | null) => void, boolean];
 //#endregion
-//#region src/react/loaders/cloudflare-context.d.ts
-interface CloudflareLoaderOptions {
+//#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_runtime2.JSX.Element;
+//#endregion
+//#region src/react/loaders/imgproxy-loader.d.ts
+interface ImgproxyLoaderOptions {
   path: string;
   placeholder: boolean;
   format: string;
   params?: Record<string, string>;
   placeholderParams?: Record<string, string>;
   breakpoints?: number[];
+  paramsSeparator?: string;
 }
-declare function useCloudflareContext(): CloudflareLoaderOptions;
-declare function CloudflareLoaderProvider({
+declare function useImgproxyContext(): ImgproxyLoaderOptions;
+declare function ImgproxyLoaderProvider({
   children,
   ...props
 }: {
   children: React.ReactNode;
-} & Partial<CloudflareLoaderOptions>): react_jsx_runtime0.JSX.Element;
+} & Partial<ImgproxyLoaderOptions>): react_jsx_runtime2.JSX.Element;
+declare function useImgproxyLoader(options?: Partial<ImgproxyLoaderOptions>): ImageLoader;
 //#endregion
 //#region src/react/loaders/cloudflare-loader.d.ts
-declare function useCloudflareLoader(options?: Partial<CloudflareLoaderOptions>): ImageLoader;
-//#endregion
-//#region src/react/loaders/imgproxy-context.d.ts
-interface ImgproxyLoaderOptions {
+interface CloudflareLoaderOptions {
   path: string;
   placeholder: boolean;
   format: string;
   params?: Record<string, string>;
   placeholderParams?: Record<string, string>;
   breakpoints?: number[];
-  paramsSeparator?: string;
 }
-declare function useImgproxyContext(): ImgproxyLoaderOptions;
-declare function ImgproxyLoaderProvider({
+declare function useCloudflareContext(): CloudflareLoaderOptions;
+declare function CloudflareLoaderProvider({
   children,
   ...props
 }: {
   children: React.ReactNode;
-} & Partial<ImgproxyLoaderOptions>): react_jsx_runtime0.JSX.Element;
-//#endregion
-//#region src/react/loaders/imgproxy-loader.d.ts
-declare function useImgproxyLoader(options?: Partial<ImgproxyLoaderOptions>): ImageLoader;
+} & Partial<CloudflareLoaderOptions>): react_jsx_runtime2.JSX.Element;
+declare function useCloudflareLoader(options?: Partial<CloudflareLoaderOptions>): ImageLoader;
 //#endregion
-//#region src/react/image-context.d.ts
-interface ImageContextValue extends Pick<ImageProps, "loading"> {
-  breakpoints: number[];
-  loader: ImageLoader | null;
+//#region src/react/loaders/cloudinary-loader.d.ts
+interface CloudinaryLoaderOptions {
+  path: string;
+  placeholder: boolean;
+  format: string;
+  params?: Record<string, string>;
+  placeholderParams?: Record<string, string>;
+  breakpoints?: number[];
 }
-declare function useImageContext(): ImageContextValue;
-declare function ImageProvider({
+declare function useCloudinaryContext(): CloudinaryLoaderOptions;
+declare function CloudinaryLoaderProvider({
   children,
   ...props
 }: {
   children: React.ReactNode;
-} & Partial<ImageContextValue>): react_jsx_runtime0.JSX.Element;
+} & Partial<CloudinaryLoaderOptions>): react_jsx_runtime2.JSX.Element;
+declare function useCloudinaryLoader(options?: Partial<CloudinaryLoaderOptions>): ImageLoader;
 //#endregion
-export { type CloudflareLoaderOptions, CloudflareLoaderProvider, Image, type ImageLoader, type ImageLoaderOptions, type ImageProps, ImageProvider, type ImageSrcType, type ImgproxyLoaderOptions, ImgproxyLoaderProvider, useCloudflareContext, useCloudflareLoader, useImageContext, useImgLoaded, useImgproxyContext, useImgproxyLoader };
+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

@@ -310,7 +310,55 @@ function assertPath(path) {
 }
 
 //#endregion
-//#region src/react/loaders/cloudflare-context.tsx
+//#region src/react/loaders/imgproxy-loader.tsx
+const ImgproxyContext = createContext({
+	path: "",
+	placeholder: true,
+	format: "webp",
+	placeholderParams: { quality: "1" }
+});
+function useImgproxyContext() {
+	return useContext(ImgproxyContext);
+}
+function ImgproxyLoaderProvider({ children, ...props }) {
+	const ctx = useImgproxyContext();
+	return /* @__PURE__ */ jsx(ImgproxyContext.Provider, {
+		value: {
+			...ctx,
+			...props
+		},
+		children
+	});
+}
+function useImgproxyLoader(options) {
+	const resolvedOptions = {
+		...useImgproxyContext(),
+		...options
+	};
+	assertPath(resolvedOptions.path);
+	return (imageOptions) => {
+		const parts = [];
+		const format = resolvedOptions.format;
+		const paramsSeparator = resolvedOptions.paramsSeparator ?? "/";
+		if (format) parts.push(`format:${format}`);
+		if (imageOptions.width) parts.push(`width:${imageOptions.width}`);
+		if (imageOptions.height) parts.push(`height:${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);
+		}
+		const processingOptions = parts.join(paramsSeparator);
+		return `${resolvedOptions.path}/${processingOptions}/plain/${imageOptions.src}`;
+	};
+}
+
+//#endregion
+//#region src/react/loaders/cloudflare-loader.tsx
 const CloudflareContext = createContext({
 	path: "",
 	placeholder: true,
@@ -330,9 +378,6 @@ function CloudflareLoaderProvider({ children, ...props }) {
 		children
 	});
 }
-
-//#endregion
-//#region src/react/loaders/cloudflare-loader.ts
 function useCloudflareLoader(options) {
 	const resolvedOptions = {
 		...useCloudflareContext(),
@@ -361,19 +406,22 @@ function useCloudflareLoader(options) {
 }
 
 //#endregion
-//#region src/react/loaders/imgproxy-context.tsx
-const ImgproxyContext = createContext({
+//#region src/react/loaders/cloudinary-loader.tsx
+const CloudinaryContext = createContext({
 	path: "",
 	placeholder: true,
-	format: "webp",
-	placeholderParams: { quality: "1" }
+	format: "auto",
+	placeholderParams: {
+		e_blur: ":1000",
+		q: "_1"
+	}
 });
-function useImgproxyContext() {
-	return useContext(ImgproxyContext);
+function useCloudinaryContext() {
+	return useContext(CloudinaryContext);
 }
-function ImgproxyLoaderProvider({ children, ...props }) {
-	const ctx = useImgproxyContext();
-	return /* @__PURE__ */ jsx(ImgproxyContext.Provider, {
+function CloudinaryLoaderProvider({ children, ...props }) {
+	const ctx = useCloudinaryContext();
+	return /* @__PURE__ */ jsx(CloudinaryContext.Provider, {
 		value: {
 			...ctx,
 			...props
@@ -381,35 +429,32 @@ function ImgproxyLoaderProvider({ children, ...props }) {
 		children
 	});
 }
-
-//#endregion
-//#region src/react/loaders/imgproxy-loader.ts
-function useImgproxyLoader(options) {
+function useCloudinaryLoader(options) {
 	const resolvedOptions = {
-		...useImgproxyContext(),
+		...useCloudinaryContext(),
 		...options
 	};
 	assertPath(resolvedOptions.path);
 	return (imageOptions) => {
 		const parts = [];
-		const format = resolvedOptions.format;
-		const paramsSeparator = resolvedOptions.paramsSeparator ?? "/";
-		if (format) parts.push(`format:${format}`);
-		if (imageOptions.width) parts.push(`width:${imageOptions.width}`);
-		if (imageOptions.height) parts.push(`height:${imageOptions.height}`);
+		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, ":");
+				const placeholderParams = normalizeLoaderParams(resolvedOptions.placeholderParams, "");
 				parts.push(...placeholderParams);
 			}
 		} else if (resolvedOptions.params) {
-			const params = normalizeLoaderParams(resolvedOptions.params, ":");
+			const params = normalizeLoaderParams(resolvedOptions.params, "");
 			parts.push(...params);
 		}
-		const processingOptions = parts.join(paramsSeparator);
-		return `${resolvedOptions.path}/${processingOptions}/plain/${imageOptions.src}`;
+		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, Image, ImageProvider, ImgproxyLoaderProvider, useCloudflareContext, useCloudflareLoader, useImageContext, useImgLoaded, useImgproxyContext, useImgproxyLoader };
+export { CloudflareLoaderProvider, CloudinaryLoaderProvider, Image, ImageProvider, ImgproxyLoaderProvider, useCloudflareContext, useCloudflareLoader, useCloudinaryContext, useCloudinaryLoader, useImageContext, useImgLoaded, useImgproxyContext, useImgproxyLoader };

package/package.json

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