@lonik/oh-image 1.2.1 → 1.2.3

package/README.md

@@ -1,30 +1,42 @@
-# react-components-starter
+# Oh Image
 
-A starter for creating a React component library.
+[![npm](https://img.shields.io/npm/v/@lonik/oh-image)](https://www.npmjs.com/package/@lonik/oh-image)
 
-## Development
+The missing `<Image />` component for Vite and React.
 
-- Install dependencies:
+For full documentation, visit [docs](https://lukonik.github.io/oh-image).
+
+## Installation
 
 ```bash
-npm install
+npm install @lonik/oh-image sharp --save
 ```
 
-- Run the playground:
+## Usage
 
-```bash
-npm run play
-```
+### 1. Register the Vite plugin
 
-- Run the unit tests:
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { ohImage } from "@lonik/oh-image/plugin";
 
-```bash
-npm run test
+export default defineConfig({
+  plugins: [react(), ohImage()],
+});
 ```
 
-- Build the library:
+### 2. Use the Image component
 
-```bash
-npm run build
+```tsx
+import { Image } from "@lonik/oh-image/react";
+import heroImg from "./hero.jpg?oh";
+
+function App() {
+  return <Image src={heroImg} alt="Hero" />;
+}
 ```
-# tsdown-template
+## License
+
+[MIT](./LICENSE)

package/dist/README.md

@@ -0,0 +1,42 @@
+# Oh Image
+
+[![npm](https://img.shields.io/npm/v/@lonik/oh-image)](https://www.npmjs.com/package/@lonik/oh-image)
+
+The missing `<Image />` component for Vite and React.
+
+For full documentation, visit [docs](https://lukonik.github.io/oh-image).
+
+## Installation
+
+```bash
+npm install @lonik/oh-image sharp --save
+```
+
+## Usage
+
+### 1. Register the Vite plugin
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { ohImage } from "@lonik/oh-image/plugin";
+
+export default defineConfig({
+  plugins: [react(), ohImage()],
+});
+```
+
+### 2. Use the Image component
+
+```tsx
+import { Image } from "@lonik/oh-image/react";
+import heroImg from "./hero.jpg?oh";
+
+function App() {
+  return <Image src={heroImg} alt="Hero" />;
+}
+```
+## License
+
+[MIT](./LICENSE)

package/dist/plugin.d.ts

@@ -14,8 +14,6 @@ interface ImageOptions {
   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;
   /** Breakpoints array - widths in pixels for responsive srcSet generation */

package/dist/plugin.js

@@ -80,7 +80,7 @@ const DEFAULT_CONFIGS = {
 		1920
 	],
 	format: "webp",
-	placeholder: false
+	placeholder: true
 };
 const PROCESS_KEY = "oh";
 const SUPPORTED_IMAGE_FORMATS = /\.(jpe?g|png|webp|avif|gif|svg)(\?.*)?$/i;

package/dist/react.d.ts

@@ -21,7 +21,9 @@ declare module "*?oh" {
 //#endregion
 //#region src/react/types.d.ts
 type ImageSrcType = string | ImageSrc;
-interface ImageProps extends Partial<Pick<ImgHTMLAttributes<HTMLImageElement>, "alt" | "fetchPriority" | "decoding" | "loading" | "height" | "width" | "srcSet" | "className" | "sizes" | "style">> {
+interface ImageProps extends Partial<Pick<ImgHTMLAttributes<HTMLImageElement>, "fetchPriority" | "decoding" | "loading" | "height" | "width" | "srcSet" | "className" | "sizes" | "style">> {
+  /** Alternative text for the image, required for accessibility. Use an empty string for decorative images. */
+  alt: string;
   /** Configures the Image component to load the image immediately. */
   asap?: boolean;
   /** */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lonik/oh-image",
   "type": "module",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "A React component library for optimized image handling.",
   "author": "Luka Onikadze <lukonik@gmail.com>",
   "license": "MIT",
@@ -73,5 +73,14 @@
   "dependencies": {
     "p-limit": "^7.3.0",
     "query-string": "^9.3.1"
-  }
+  },
+  "keywords": [
+    "react",
+    "reactjs",
+    "react-components",
+    "react-component-library",
+    "vite",
+    "vitejs",
+    "vite-plugin"
+  ]
 }