@lonik/oh-image 1.0.1 → 1.0.3

package/dist/client.d.ts

@@ -0,0 +1,6 @@
+import type { ImageSrc } from "@lonik/oh-image/plugin";
+
+declare module "*?oh" {
+  const imageSrc: ImageSrc;
+  export default imageSrc;
+}

package/dist/plugin.d.ts

@@ -0,0 +1,84 @@
+import { FormatEnum } from "sharp";
+import * as vite0 from "vite";
+import * as rollup0 from "rollup";
+
+//#region src/plugin/types.d.ts
+/**
+ * Configuration options for the oh-image Vite plugin.
+ * Extends ImageOptions with all properties required, plus plugin-specific settings.
+ */
+interface PluginConfig extends Required<ImageOptions> {
+  /** Directory name where processed images will be output during build */
+  distDir: string;
+}
+/**
+ * Options for image processing and transformation.
+ * Can be passed via query parameters or plugin configuration.
+ */
+interface ImageOptions {
+  /** Target width for the processed image in pixels */
+  width?: number | null;
+  /** Target height for the processed image in pixels */
+  height?: number | null;
+  /** Output format for the main image (e.g., 'webp', 'avif', 'png') */
+  format?: keyof FormatEnum | null;
+  /** Blur amount (true for default blur, or a number for sigma value) */
+  blur?: number | boolean;
+  /** Whether to generate a placeholder image for lazy loading */
+  placeholder?: boolean;
+  /** Width of the placeholder image in pixels */
+  placeholderW?: number;
+  /** Height of the placeholder image in pixels */
+  placeholderH?: number;
+  /** Output format for the placeholder image */
+  placeholderF?: keyof FormatEnum;
+  /** Blur setting for the placeholder (true for default, or sigma value) */
+  placeholderB: boolean | number;
+  /** Breakpoints array - widths in pixels for responsive srcSet generation */
+  bps?: number[];
+  /** Output format for srcSet images */
+  srcSetsF: keyof FormatEnum;
+}
+/**
+ * Represents a single entry in the srcSet array.
+ * Used for responsive image loading at different viewport widths.
+ */
+interface ImageSrcSet {
+  /** Width descriptor (e.g., '640w', '1080w') */
+  width: string;
+  /** URL or path to the image at this breakpoint */
+  src: string;
+}
+/**
+ * The processed image source object returned by the plugin.
+ * Contains all URLs and metadata needed for responsive image rendering.
+ */
+interface ImageSrc {
+  /** Original width of the source image in pixels */
+  width: number;
+  /** Original height of the source image in pixels */
+  height: number;
+  /** URL to the placeholder image (if placeholder was enabled) */
+  placeholderUrl?: string;
+  /** Array of responsive image sources at different breakpoints */
+  srcSets: ImageSrcSet[];
+  /** URL to the main processed image */
+  src: string;
+}
+//#endregion
+//#region src/plugin/plugin.d.ts
+declare function ohImage(options?: Partial<PluginConfig>): {
+  name: string;
+  configResolved(this: vite0.MinimalPluginContextWithoutEnvironment, viteConfig: vite0.ResolvedConfig): void;
+  enforce: "pre";
+  configureServer(this: vite0.MinimalPluginContextWithoutEnvironment, server: vite0.ViteDevServer): void;
+  load: {
+    filter: {
+      id: RegExp;
+    };
+    handler(this: rollup0.PluginContext, id: string): Promise<string | null>;
+  };
+  writeBundle(this: rollup0.PluginContext): Promise<void>;
+};
+//#endregion
+export { type ImageOptions, type ImageSrc, type ImageSrcSet, type PluginConfig, ohImage };

package/dist/react.d.ts

@@ -0,0 +1,55 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { CSSProperties } from "react";
+
+//#region src/react/types.d.ts
+/**
+ * Image source type - can be either a simple URL string or a full ImageSrc object
+ */
+type ImageSrcType = string | ImageSrc;
+/**
+ * Optimized image source with multiple responsive variants
+ */
+interface ImageSrc {
+  /** Original image width in pixels */
+  width: number;
+  /** Original image height in pixels */
+  height: number;
+  /** Optional low-quality placeholder image URL for blur-up effect */
+  placeholderUrl?: string;
+  /** Array of responsive image variants for different screen sizes */
+  srcSets: ImageSrcSet[];
+  /** Primary image source URL */
+  src: string;
+}
+/**
+ * Single responsive image variant in a srcset
+ */
+interface ImageSrcSet {
+  /** Width descriptor (e.g., "1920w") */
+  width: string;
+  /** Image URL for this variant */
+  src: string;
+}
+/**
+ * Props for the optimized Image component
+ * Extends standard HTML image attributes with optimization features
+ */
+interface ImageProps extends Partial<Pick<HTMLImageElement, "alt" | "fetchPriority" | "decoding" | "loading" | "height" | "width" | "srcset" | "className" | "sizes">> {
+  /** Load the image immediately, bypassing lazy loading */
+  asap?: boolean;
+  /** Image source - either a URL string or ImageSrc object with responsive variants */
+  src: ImageSrcType;
+  /** Override placeholder URL (takes precedence over ImageSrc.placeholderUrl) */
+  placeholderUrl?: string | undefined;
+  /** Enable blur-up placeholder effect during image loading */
+  placeholder?: boolean;
+  /** Inline CSS styles */
+  style?: CSSProperties;
+  /** Make image fill its container (position: absolute) */
+  fill?: boolean;
+}
+//#endregion
+//#region src/react/image.d.ts
+declare function Image(props: ImageProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Image, type ImageProps, type ImageSrc, type ImageSrcSet };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lonik/oh-image",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "A React component library for optimized image handling.",
   "author": "Luka Onikadze <lukonik@gmail.com>",
   "license": "MIT",
@@ -22,6 +22,9 @@
     "./react": {
       "types": "./dist/react.d.ts",
       "default": "./dist/react.js"
+    },
+    "./client": {
+      "types": "./dist/client.d.ts"
     }
   },
   "files": [