@lonik/oh-image 2.5.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-DObZcazO.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-CVQjMJcC.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-C6GaON4i.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({

package/dist/cloudinary.d.ts

@@ -1,6 +1,6 @@
-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";
+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-C6GaON4i.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-DObZcazO.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-CVQjMJcC.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_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_runtime2.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-C6GaON4i.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-DObZcazO.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-CVQjMJcC.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_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_runtime0.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-C6GaON4i.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({

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

@@ -1,5 +1,5 @@
 import { ImgHTMLAttributes } from "react";
-import * as react_jsx_runtime3 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_runtime3.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_runtime3.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_runtime3.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-DObZcazO.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-CVQjMJcC.js";
-import * as react_jsx_runtime7 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_runtime7.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-C6GaON4i.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({

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-DObZcazO.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

@@ -1,6 +1,6 @@
-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";
+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<{
@@ -30,6 +30,6 @@ declare const useWordpressContext: () => WordpressGlobalOptions, WordpressLoader
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<WordpressGlobalOptions>) => react_jsx_runtime6.JSX.Element, useWordpressLoader: (options?: WordpressGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & 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

@@ -1,4 +1,4 @@
-import { t as loaderFactory } from "./loader-factory-C6GaON4i.js";
+import { t as loaderFactory } from "./loader-factory-6EOKnqj1.js";
 
 //#region src/loaders/wordpress/wordpress-loader.tsx
 const { useLoaderContext: useWordpressContext, LoaderProvider: WordpressLoaderProvider, useLoader: useWordpressLoader } = loaderFactory({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lonik/oh-image",
   "type": "module",
-  "version": "2.5.0",
+  "version": "2.6.0",
   "description": "A React component library for optimized image handling.",
   "author": "Luka Onikadze <lukonik@gmail.com>",
   "license": "MIT",
@@ -48,6 +48,10 @@
       "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"
     }