@lonik/oh-image 2.3.1 → 2.4.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-IjVrRcXi.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-TbE7SU6o.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-CQDWe0k2.js";
 
 //#region src/loaders/cloudflare/cloudflare-loader.tsx
 const { useLoaderContext: useCloudflareContext, LoaderProvider: CloudflareLoaderProvider, useLoader: useCloudflareLoader } = loaderFactory({

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-IjVrRcXi.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-TbE7SU6o.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-CQDWe0k2.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-IjVrRcXi.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-TbE7SU6o.js";
+import * as react_jsx_runtime0 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_runtime0.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-CQDWe0k2.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,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_runtime0 from "react/jsx-runtime";
+import { s as ImageLoaderOptions } from "./index-IjVrRcXi.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-TbE7SU6o.js";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/loaders/imgproxy/imgproxy-options.d.ts
 type ResizeType = "fit" | "fill" | "fill-down" | "force" | "auto";
@@ -383,6 +383,6 @@ declare const useImgproxyContext: () => ImgproxyGlobalOptions, ImgproxyLoaderPro
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<ImgproxyGlobalOptions>) => react_jsx_runtime0.JSX.Element, useImgproxyLoader: (options?: ImgproxyGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<ImgproxyGlobalOptions>) => react_jsx_runtime6.JSX.Element, useImgproxyLoader: (options?: ImgproxyGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
 export { ImgproxyGlobalOptions, ImgproxyLoaderProvider, ImgproxyOptions, ImgproxyTransforms, useImgproxyContext, useImgproxyLoader };

package/dist/imgproxy.js

@@ -1,4 +1,4 @@
-import { t as loaderFactory } from "./loader-factory-JhrhUvkg.js";
+import { t as loaderFactory } from "./loader-factory-CQDWe0k2.js";
 
 //#region src/loaders/imgproxy/imgproxy-loader.tsx
 const { useLoaderContext: useImgproxyContext, LoaderProvider: ImgproxyLoaderProvider, useLoader: useImgproxyLoader } = loaderFactory({

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

@@ -1,5 +1,5 @@
 import { ImgHTMLAttributes } from "react";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime4 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_runtime4.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_runtime4.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_runtime4.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-IjVrRcXi.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-TbE7SU6o.js";
+import * as react_jsx_runtime2 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_runtime2.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-CQDWe0k2.js";
 
 //#region src/loaders/kontent/kontent-loader.tsx
 const { useLoaderContext: useKontentContext, LoaderProvider: KontentLoaderProvider, useLoader: useKontentLoader } = loaderFactory({
@@ -8,6 +8,8 @@ const { useLoaderContext: useKontentContext, LoaderProvider: KontentLoaderProvid
 		auto: "format"
 	}
 }, {
+	widthKey: "w",
+	heightKey: "h",
 	optionSeparator: "=",
 	paramSeparator: "&",
 	passBooleanValue: true,

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

@@ -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-IjVrRcXi.js";
 export { Image, ImageLoader, ImageLoaderOptions, ImageProps, ImageProvider, __imageFactory, useImageContext, useImgLoaded };

package/package.json

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