@lonik/oh-image 2.4.0 → 2.6.0

package/README.md

@@ -31,7 +31,7 @@ export default defineConfig({
 
 ```tsx
 import { Image } from "@lonik/oh-image/react";
-import heroImg from "./hero.jpg?oh";
+import heroImg from "./hero.jpg?$oh";
 
 function App() {
   return <Image src={heroImg} alt="Hero" />;

package/dist/README.md

@@ -31,7 +31,7 @@ export default defineConfig({
 
 ```tsx
 import { Image } from "@lonik/oh-image/react";
-import heroImg from "./hero.jpg?oh";
+import heroImg from "./hero.jpg?$oh";
 
 function App() {
   return <Image src={heroImg} alt="Hero" />;

package/dist/cloudflare.d.ts

@@ -1,6 +1,6 @@
-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";
+import { s as ImageLoaderOptions } from "./index-DMC2sGIO.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DScvwZAJ.js";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/loaders/cloudflare/cloudflare-options.d.ts
 type CloudflareTransforms = Partial<{
@@ -39,6 +39,6 @@ declare const useCloudflareContext: () => CloudflareGlobalOptions, CloudflareLoa
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<CloudflareGlobalOptions>) => react_jsx_runtime0.JSX.Element, useCloudflareLoader: (options?: CloudflareGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<CloudflareGlobalOptions>) => react_jsx_runtime4.JSX.Element, useCloudflareLoader: (options?: CloudflareGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
 export { CloudflareGlobalOptions, CloudflareLoaderProvider, CloudflareOptions, CloudflareTransforms, useCloudflareContext, useCloudflareLoader };

package/dist/cloudflare.js

@@ -1,4 +1,4 @@
-import { t as loaderFactory } from "./loader-factory-CQDWe0k2.js";
+import { t as loaderFactory } from "./loader-factory-6EOKnqj1.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-IjVrRcXi.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-TbE7SU6o.js";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import { s as ImageLoaderOptions } from "./index-DMC2sGIO.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DScvwZAJ.js";
+import * as react_jsx_runtime0 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_runtime1.JSX.Element, useCloudinaryLoader: (options?: CloudinaryGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<CloudinaryGlobalOptions>) => react_jsx_runtime0.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-CQDWe0k2.js";
+import { t as loaderFactory } from "./loader-factory-6EOKnqj1.js";
 
 //#region src/loaders/cloudinary/cloudinary-loader.tsx
 function customResolver(key, value) {

package/dist/contentful.d.ts

@@ -1,6 +1,6 @@
-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";
+import { s as ImageLoaderOptions } from "./index-DMC2sGIO.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DScvwZAJ.js";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/loaders/contentful/contentful-options.d.ts
 type ContentfulTransforms = Partial<{
@@ -38,6 +38,6 @@ declare const useContentfulContext: () => ContentfulGlobalOptions, ContentfulLoa
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<ContentfulGlobalOptions>) => react_jsx_runtime0.JSX.Element, useContentfulLoader: (options?: ContentfulGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<ContentfulGlobalOptions>) => react_jsx_runtime5.JSX.Element, useContentfulLoader: (options?: ContentfulGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
 export { ContentfulGlobalOptions, ContentfulLoaderProvider, ContentfulOptions, ContentfulTransforms, useContentfulContext, useContentfulLoader };

package/dist/contentful.js

@@ -1,4 +1,4 @@
-import { t as loaderFactory } from "./loader-factory-CQDWe0k2.js";
+import { t as loaderFactory } from "./loader-factory-6EOKnqj1.js";
 
 //#region src/loaders/contentful/contentful-loader.tsx
 const { useLoaderContext: useContentfulContext, LoaderProvider: ContentfulLoaderProvider, useLoader: useContentfulLoader } = loaderFactory({

package/dist/imgproxy.d.ts

@@ -1,6 +1,6 @@
-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";
+import { s as ImageLoaderOptions } from "./index-DMC2sGIO.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DScvwZAJ.js";
+import * as react_jsx_runtime1 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_runtime6.JSX.Element, useImgproxyLoader: (options?: ImgproxyGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<ImgproxyGlobalOptions>) => react_jsx_runtime1.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-CQDWe0k2.js";
+import { t as loaderFactory } from "./loader-factory-6EOKnqj1.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-IjVrRcXi.d.ts → index-DMC2sGIO.d.ts}

@@ -1,5 +1,5 @@
 import { ImgHTMLAttributes } from "react";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime7 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_runtime4.JSX.Element;
+declare function Image(props: ImageProps): react_jsx_runtime7.JSX.Element;
 //#endregion
 //#region src/react/image-factory.d.ts
-declare function __imageFactory(defaultProps: any): (props: any) => react_jsx_runtime4.JSX.Element;
+declare function __imageFactory(defaultProps: any): (props: any) => react_jsx_runtime7.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_runtime4.JSX.Element;
+} & Partial<ImageContextValue>): react_jsx_runtime7.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-IjVrRcXi.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-TbE7SU6o.js";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import { s as ImageLoaderOptions } from "./index-DMC2sGIO.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DScvwZAJ.js";
+import * as react_jsx_runtime0 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_runtime2.JSX.Element, useKontentLoader: (options?: KontentGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<KontentGlobalOptions>) => react_jsx_runtime0.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-CQDWe0k2.js";
+import { t as loaderFactory } from "./loader-factory-6EOKnqj1.js";
 
 //#region src/loaders/kontent/kontent-loader.tsx
 const { useLoaderContext: useKontentContext, LoaderProvider: KontentLoaderProvider, useLoader: useKontentLoader } = loaderFactory({
@@ -13,7 +13,7 @@ const { useLoaderContext: useKontentContext, LoaderProvider: KontentLoaderProvid
 	optionSeparator: "=",
 	paramSeparator: "&",
 	passBooleanValue: true,
-	customResolver: { rect: (key, value) => `${key}=${value.join(",")}` }
+	arrayItemSeparator: ","
 }, ({ path, params, imageOptions }) => `${path}/${imageOptions.src}?${params}`);
 
 //#endregion

package/dist/{loader-factory-CQDWe0k2.js → loader-factory-6EOKnqj1.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);

package/dist/netlify.d.ts

@@ -0,0 +1,25 @@
+import { s as ImageLoaderOptions } from "./index-DMC2sGIO.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DScvwZAJ.js";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+
+//#region src/loaders/netlify/netlify-options.d.ts
+type NetlifyTransforms = Partial<{
+  w: number;
+  h: number;
+  fit: "contain" | "cover" | "fill";
+  position: "top" | "bottom" | "left" | "right" | "center";
+  fm: "avif" | "webp" | "jpg" | "png" | "gif" | "blurhash";
+  q: number;
+}>;
+type NetlifyOptions = BaseLoaderOptions<NetlifyTransforms>;
+type NetlifyGlobalOptions = BaseGlobalLoaderOptions<NetlifyTransforms>;
+//#endregion
+//#region src/loaders/netlify/netlify-loader.d.ts
+declare const useNetlifyContext: () => NetlifyGlobalOptions, NetlifyLoaderProvider: ({
+    children,
+    ...props
+  }: {
+    children: React.ReactNode;
+  } & Partial<NetlifyGlobalOptions>) => react_jsx_runtime2.JSX.Element, useNetlifyLoader: (options?: NetlifyGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+//#endregion
+export { NetlifyGlobalOptions, NetlifyLoaderProvider, NetlifyOptions, NetlifyTransforms, useNetlifyContext, useNetlifyLoader };

package/dist/netlify.js

@@ -0,0 +1,20 @@
+import { t as loaderFactory } from "./loader-factory-6EOKnqj1.js";
+
+//#region src/loaders/netlify/netlify-loader.tsx
+const { useLoaderContext: useNetlifyContext, LoaderProvider: NetlifyLoaderProvider, useLoader: useNetlifyLoader } = loaderFactory({
+	path: "/.netlify/images",
+	transforms: { fm: "webp" },
+	placeholder: { fm: "blurhash" }
+}, {
+	optionSeparator: "=",
+	paramSeparator: "&",
+	widthKey: "w",
+	heightKey: "h"
+}, ({ path, params, imageOptions }) => {
+	const searchParams = new URLSearchParams(params);
+	searchParams.set("url", imageOptions.src);
+	return `${path}?${searchParams.toString()}`;
+});
+
+//#endregion
+export { NetlifyLoaderProvider, useNetlifyContext, useNetlifyLoader };

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-IjVrRcXi.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-DMC2sGIO.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-DMC2sGIO.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DScvwZAJ.js";
+import * as react_jsx_runtime3 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_runtime3.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-6EOKnqj1.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.4.0",
+  "version": "2.6.0",
   "description": "A React component library for optimized image handling.",
   "author": "Luka Onikadze <lukonik@gmail.com>",
   "license": "MIT",
@@ -44,6 +44,14 @@
       "types": "./dist/contentful.d.ts",
       "default": "./dist/contentful.js"
     },
+    "./wordpress": {
+      "types": "./dist/wordpress.d.ts",
+      "default": "./dist/wordpress.js"
+    },
+    "./netlify": {
+      "types": "./dist/netlify.d.ts",
+      "default": "./dist/netlify.js"
+    },
     "./client": {
       "types": "./dist/client.d.ts"
     }