@lonik/oh-image 2.3.1 → 2.5.0

package/dist/cloudflare.d.ts

@@ -1,5 +1,5 @@
-import { s as ImageLoaderOptions } from "./index-5t1nN_1J.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-BzrruYJ4.js";
+import { s as ImageLoaderOptions } from "./index-DObZcazO.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-CVQjMJcC.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/loaders/cloudflare/cloudflare-options.d.ts

package/dist/cloudflare.js

@@ -1,4 +1,4 @@
-import { t as loaderFactory } from "./loader-factory-JhrhUvkg.js";
+import { t as loaderFactory } from "./loader-factory-C6GaON4i.js";
 
 //#region src/loaders/cloudflare/cloudflare-loader.tsx
 const { useLoaderContext: useCloudflareContext, LoaderProvider: CloudflareLoaderProvider, useLoader: useCloudflareLoader } = loaderFactory({
@@ -11,7 +11,9 @@ const { useLoaderContext: useCloudflareContext, LoaderProvider: CloudflareLoader
 	optionSeparator: "=",
 	paramSeparator: ",",
 	passBooleanValue: true,
-	customResolver: { trim: (key, value) => `${key}=${value.join(";")}` }
+	arrayItemSeparator: ";",
+	widthKey: "width",
+	heightKey: "height"
 }, ({ path, params, imageOptions }) => `${path}/cdn-cgi/image/${params}/${imageOptions.src}`);
 
 //#endregion

package/dist/cloudinary.d.ts

@@ -1,6 +1,6 @@
-import { s as ImageLoaderOptions } from "./index-5t1nN_1J.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-BzrruYJ4.js";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import { s as ImageLoaderOptions } from "./index-DObZcazO.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-CVQjMJcC.js";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/loaders/cloudinary/cloudinary-options.d.ts
 type BACKGROUND_MODE = "border" | "predominant" | "border_contrast" | "predominant_contrast" | "predominant_gradient" | "predominant_gradient_contrast" | "border_gradient" | "border_gradient_contrast";
@@ -106,6 +106,6 @@ declare const useCloudinaryContext: () => CloudinaryGlobalOptions, CloudinaryLoa
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<CloudinaryGlobalOptions>) => react_jsx_runtime4.JSX.Element, useCloudinaryLoader: (options?: CloudinaryGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<CloudinaryGlobalOptions>) => react_jsx_runtime1.JSX.Element, useCloudinaryLoader: (options?: CloudinaryGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
 export { CloudinaryGlobalOptions, CloudinaryLoaderProvider, CloudinaryOptions, CloudinaryTransforms, useCloudinaryContext, useCloudinaryLoader };

package/dist/cloudinary.js

@@ -1,4 +1,4 @@
-import { t as loaderFactory } from "./loader-factory-JhrhUvkg.js";
+import { t as loaderFactory } from "./loader-factory-C6GaON4i.js";
 
 //#region src/loaders/cloudinary/cloudinary-loader.tsx
 function customResolver(key, value) {

package/dist/contentful.d.ts

@@ -0,0 +1,43 @@
+import { s as ImageLoaderOptions } from "./index-DObZcazO.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-CVQjMJcC.js";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+
+//#region src/loaders/contentful/contentful-options.d.ts
+type ContentfulTransforms = Partial<{
+  /**
+   * convert the image to a specific format
+   */
+  fm: "jpg" | "png" | "webp" | "gif" | "avif" | "tiff";
+  /**
+   * converts image format to specific type
+   * progressive: for jpg image
+   * png8: for png image
+   */
+  fl: "progressive" | "png8";
+  /** width of the image */
+  w: number;
+  /** height of the image */
+  h: number;
+  /** resizing behavior */
+  fit: "pad" | "fill" | "scale" | "crop" | "thumb";
+  /** focus area */
+  f: "center" | "top" | "right" | "left" | "bottom" | "top_right" | "top_left" | "bottom_right" | "bottom_left" | "face";
+  /** corner radius */
+  r: number | "max";
+  /** quality of image */
+  q: number;
+  /** background color */
+  bg: string;
+}>;
+type ContentfulOptions = BaseLoaderOptions<ContentfulTransforms>;
+type ContentfulGlobalOptions = BaseGlobalLoaderOptions<ContentfulTransforms>;
+//#endregion
+//#region src/loaders/contentful/contentful-loader.d.ts
+declare const useContentfulContext: () => ContentfulGlobalOptions, ContentfulLoaderProvider: ({
+    children,
+    ...props
+  }: {
+    children: React.ReactNode;
+  } & Partial<ContentfulGlobalOptions>) => react_jsx_runtime2.JSX.Element, useContentfulLoader: (options?: ContentfulGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+//#endregion
+export { ContentfulGlobalOptions, ContentfulLoaderProvider, ContentfulOptions, ContentfulTransforms, useContentfulContext, useContentfulLoader };

package/dist/contentful.js

@@ -0,0 +1,20 @@
+import { t as loaderFactory } from "./loader-factory-C6GaON4i.js";
+
+//#region src/loaders/contentful/contentful-loader.tsx
+const { useLoaderContext: useContentfulContext, LoaderProvider: ContentfulLoaderProvider, useLoader: useContentfulLoader } = loaderFactory({
+	transforms: { fm: "webp" },
+	placeholder: {
+		q: 10,
+		fm: "webp"
+	}
+}, {
+	optionSeparator: "=",
+	paramSeparator: "&",
+	widthKey: "w",
+	heightKey: "h",
+	passBooleanValue: true,
+	customResolver: {}
+}, ({ path, params, imageOptions }) => `${path}/${imageOptions.src}?${params}`);
+
+//#endregion
+export { ContentfulLoaderProvider, useContentfulContext, useContentfulLoader };

package/dist/imgproxy.d.ts

@@ -1,5 +1,5 @@
-import { s as ImageLoaderOptions } from "./index-5t1nN_1J.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-BzrruYJ4.js";
+import { s as ImageLoaderOptions } from "./index-DObZcazO.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-CVQjMJcC.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/loaders/imgproxy/imgproxy-options.d.ts

package/dist/imgproxy.js

@@ -1,4 +1,4 @@
-import { t as loaderFactory } from "./loader-factory-JhrhUvkg.js";
+import { t as loaderFactory } from "./loader-factory-C6GaON4i.js";
 
 //#region src/loaders/imgproxy/imgproxy-loader.tsx
 const { useLoaderContext: useImgproxyContext, LoaderProvider: ImgproxyLoaderProvider, useLoader: useImgproxyLoader } = loaderFactory({
@@ -8,6 +8,8 @@ const { useLoaderContext: useImgproxyContext, LoaderProvider: ImgproxyLoaderProv
 		format: "webp"
 	}
 }, {
+	widthKey: "width",
+	heightKey: "height",
 	passBooleanValue: true,
 	optionSeparator: ":",
 	paramSeparator: "/",

package/dist/{index-5t1nN_1J.d.ts → index-DObZcazO.d.ts}

@@ -1,5 +1,5 @@
 import { ImgHTMLAttributes } from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/react/types.d.ts
 interface ImageLoaderOptions {
@@ -30,10 +30,10 @@ interface ImageProps extends Partial<Pick<ImgHTMLAttributes<HTMLImageElement>, "
 }
 //#endregion
 //#region src/react/image.d.ts
-declare function Image(props: ImageProps): react_jsx_runtime2.JSX.Element;
+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_runtime2.JSX.Element;
+declare function __imageFactory(defaultProps: any): (props: any) => react_jsx_runtime3.JSX.Element;
 //#endregion
 //#region src/react/use-img-loaded.d.ts
 /**
@@ -75,6 +75,6 @@ declare function ImageProvider({
   ...props
 }: {
   children: React.ReactNode;
-} & Partial<ImageContextValue>): react_jsx_runtime2.JSX.Element;
+} & 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/kontent.d.ts

@@ -1,6 +1,6 @@
-import { s as ImageLoaderOptions } from "./index-5t1nN_1J.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-BzrruYJ4.js";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import { s as ImageLoaderOptions } from "./index-DObZcazO.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-CVQjMJcC.js";
+import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/loaders/kontent/kontent-options.d.ts
 type KontentTransforms = Partial<{
@@ -43,6 +43,6 @@ declare const useKontentContext: () => KontentGlobalOptions, KontentLoaderProvid
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<KontentGlobalOptions>) => react_jsx_runtime5.JSX.Element, useKontentLoader: (options?: KontentGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<KontentGlobalOptions>) => react_jsx_runtime7.JSX.Element, useKontentLoader: (options?: KontentGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
 export { KontentGlobalOptions, KontentLoaderProvider, KontentOptions, KontentTransforms, useKontentContext, useKontentLoader };

package/dist/kontent.js

@@ -1,4 +1,4 @@
-import { t as loaderFactory } from "./loader-factory-JhrhUvkg.js";
+import { t as loaderFactory } from "./loader-factory-C6GaON4i.js";
 
 //#region src/loaders/kontent/kontent-loader.tsx
 const { useLoaderContext: useKontentContext, LoaderProvider: KontentLoaderProvider, useLoader: useKontentLoader } = loaderFactory({
@@ -8,10 +8,12 @@ const { useLoaderContext: useKontentContext, LoaderProvider: KontentLoaderProvid
 		auto: "format"
 	}
 }, {
+	widthKey: "w",
+	heightKey: "h",
 	optionSeparator: "=",
 	paramSeparator: "&",
 	passBooleanValue: true,
-	customResolver: { rect: (key, value) => `${key}=${value.join(",")}` }
+	arrayItemSeparator: ","
 }, ({ path, params, imageOptions }) => `${path}/${imageOptions.src}?${params}`);
 
 //#endregion

package/dist/{loader-factory-JhrhUvkg.js → loader-factory-C6GaON4i.js}

@@ -2,10 +2,10 @@ import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/loaders/transforms-resolver.ts
-const stringifyOptions = (opCode, values, separator) => {
+const stringifyOptions = (opCode, values, separator, arraySeparator) => {
 	return [opCode, ...values.map((v) => {
 		if (v == null) return "";
-		if (Array.isArray(v)) return v.map((val) => encodeURIComponent(val)).join(separator);
+		if (Array.isArray(v)) return v.map((val) => encodeURIComponent(val)).join(arraySeparator ?? separator);
 		return encodeURIComponent(v);
 	})].join(separator);
 };
@@ -18,10 +18,10 @@ const resolveObjectParam = (key, value, orderConfig, separator) => {
 		if (childrenOrders && childrenOrders[k] && typeof val === "object" && !Array.isArray(val)) return childrenOrders[k].orders.map((childKey) => val[childKey]).map((v) => {
 			if (v == null) return "";
 			if (Array.isArray(v)) return v.map((val$1) => encodeURIComponent(String(val$1))).join(separator);
-			return encodeURIComponent(String(v));
+			return String(v);
 		}).join(separator);
 		if (Array.isArray(val)) return val.map((v) => encodeURIComponent(String(v))).join(separator);
-		return encodeURIComponent(String(val));
+		return String(val);
 	})].join(separator);
 };
 function resolveTransform(transforms, config) {
@@ -45,7 +45,7 @@ function resolveTransform(transforms, config) {
 				else params.push(key);
 				break;
 			case "object":
-				if (Array.isArray(value)) params.push(stringifyOptions(key, [value], config.optionSeparator));
+				if (Array.isArray(value)) params.push(stringifyOptions(key, [value], config.optionSeparator, config.arrayItemSeparator));
 				else {
 					const objectParams = resolveObjectParam(key, value, config?.orders?.[key], config.optionSeparator);
 					if (objectParams) params.push(objectParams);
@@ -86,20 +86,21 @@ function loaderFactory(defaults, config, urlResolver) {
 		return (imageOptions) => {
 			const defaultTransform = imageOptions.isPlaceholder ? context.placeholder : context.transforms;
 			const optionTransforms = imageOptions.isPlaceholder ? options?.placeholder : options?.transforms;
-			const transforms = {
-				...defaultTransform,
-				...optionTransforms
-			};
 			const params = [];
+			const sizes = {};
 			if (imageOptions.width) {
 				const widthKey = config.widthKey ?? "width";
-				params.push(widthKey + config.optionSeparator + imageOptions.width);
+				sizes[widthKey] = imageOptions.width;
 			}
 			if (imageOptions.height) {
 				const heightKey = config.heightKey ?? "height";
-				params.push(heightKey + config.optionSeparator + imageOptions.height);
+				sizes[heightKey] = imageOptions.height;
 			}
-			const resolvedTransforms = resolveTransform(transforms, config);
+			const resolvedTransforms = resolveTransform({
+				...sizes,
+				...defaultTransform,
+				...optionTransforms
+			}, config);
 			return urlResolver({
 				imageOptions,
 				params: [...params, ...resolvedTransforms].join(config.paramSeparator),

package/dist/react.d.ts

@@ -1,2 +1,2 @@
-import { a as Image, c as ImageProps, i as __imageFactory, n as useImageContext, o as ImageLoader, r as useImgLoaded, s as ImageLoaderOptions, t as ImageProvider } from "./index-5t1nN_1J.js";
+import { a as Image, c as ImageProps, i as __imageFactory, n as useImageContext, o as ImageLoader, r as useImgLoaded, s as ImageLoaderOptions, t as ImageProvider } from "./index-DObZcazO.js";
 export { Image, ImageLoader, ImageLoaderOptions, ImageProps, ImageProvider, __imageFactory, useImageContext, useImgLoaded };

package/dist/wordpress.d.ts

@@ -0,0 +1,35 @@
+import { s as ImageLoaderOptions } from "./index-DObZcazO.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-CVQjMJcC.js";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
+
+//#region src/loaders/wordpress/wordpress-options.d.ts
+type WordpressTransforms = Partial<{
+  w: number;
+  h: number;
+  crop: [number | string, number | string, number | string, number | string];
+  resize: [number, number];
+  fit: [number, number];
+  lb: [number, number];
+  ulb: boolean;
+  filter: "negate" | "grayscale" | "sepia" | "edgedetect" | "emboss" | "blurgaussian" | "blurselective" | "meanremoval";
+  brightness: number;
+  contrast: number;
+  colorize: [number, number, number];
+  smooth: number;
+  zoom: number;
+  quality: number;
+  allow_lossy: 1;
+  strip: "all" | "none";
+}>;
+type WordpressOptions = BaseLoaderOptions<WordpressTransforms>;
+type WordpressGlobalOptions = BaseGlobalLoaderOptions<WordpressTransforms>;
+//#endregion
+//#region src/loaders/wordpress/wordpress-loader.d.ts
+declare const useWordpressContext: () => WordpressGlobalOptions, WordpressLoaderProvider: ({
+    children,
+    ...props
+  }: {
+    children: React.ReactNode;
+  } & Partial<WordpressGlobalOptions>) => react_jsx_runtime6.JSX.Element, useWordpressLoader: (options?: WordpressGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+//#endregion
+export { WordpressGlobalOptions, WordpressLoaderProvider, WordpressOptions, WordpressTransforms, useWordpressContext, useWordpressLoader };

package/dist/wordpress.js

@@ -0,0 +1,21 @@
+import { t as loaderFactory } from "./loader-factory-C6GaON4i.js";
+
+//#region src/loaders/wordpress/wordpress-loader.tsx
+const { useLoaderContext: useWordpressContext, LoaderProvider: WordpressLoaderProvider, useLoader: useWordpressLoader } = loaderFactory({
+	transforms: { format: "webp" },
+	placeholder: {
+		quality: 10,
+		format: "webp"
+	}
+}, {
+	optionSeparator: "=",
+	paramSeparator: "&",
+	arrayItemSeparator: ",",
+	widthKey: "w",
+	heightKey: "h",
+	passBooleanValue: true,
+	customResolver: {}
+}, ({ path, params, imageOptions }) => `${path}/${imageOptions.src}?${params}`);
+
+//#endregion
+export { WordpressLoaderProvider, useWordpressContext, useWordpressLoader };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lonik/oh-image",
   "type": "module",
-  "version": "2.3.1",
+  "version": "2.5.0",
   "description": "A React component library for optimized image handling.",
   "author": "Luka Onikadze <lukonik@gmail.com>",
   "license": "MIT",
@@ -40,6 +40,14 @@
       "types": "./dist/kontent.d.ts",
       "default": "./dist/kontent.js"
     },
+    "./contentful": {
+      "types": "./dist/contentful.d.ts",
+      "default": "./dist/contentful.js"
+    },
+    "./wordpress": {
+      "types": "./dist/wordpress.d.ts",
+      "default": "./dist/wordpress.js"
+    },
     "./client": {
       "types": "./dist/client.d.ts"
     }