@lonik/oh-image 1.2.0 → 1.2.2

package/README.md

@@ -1,30 +1,40 @@
-# react-components-starter
+# Oh Image
 
-A starter for creating a React component library.
+The missing `<Image />` component for Vite and React.
 
-## Development
+For full documentation, visit [docs](https://lukonik.github.io/oh-image).
 
-- Install dependencies:
+## 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/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

@@ -1,13 +1,14 @@
 import { basename, dirname, extname, join, parse } from "node:path";
-import { randomBytes } from "node:crypto";
+import { createHash } from "node:crypto";
 import { mkdir, readFile, writeFile } from "node:fs/promises";
 import queryString from "query-string";
 import sharp from "sharp";
 import pLimit from "p-limit";
 
 //#region src/plugin/utils.ts
-function getRandomString(length = 32) {
-	return randomBytes(Math.ceil(length * 3 / 4)).toString("base64").slice(0, length).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+async function getFileHash(filePath) {
+	const content = await readFile(filePath);
+	return createHash("sha256").update(content).digest("hex").slice(0, 16);
 }
 async function readFileSafe(path) {
 	try {
@@ -79,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;
@@ -102,9 +103,8 @@ function ohImage(options) {
 		const fileId = basename(url);
 		return join(cacheDir, fileId);
 	}
-	function genIdentifier(uri, format, prefix) {
-		const fileId = basename(uri);
-		const uniqueFileId = `${prefix}-${getRandomString()}-${fileId}.${format}`;
+	function genIdentifier(uri, format, prefix, hash) {
+		const uniqueFileId = `${prefix}-${hash}-${basename(uri)}.${format}`;
 		if (!isBuild) return join(DEV_DIR, uniqueFileId);
 		return join(assetsDir, config.distDir, uniqueFileId);
 	}
@@ -150,11 +150,12 @@ function ohImage(options) {
 					const origin = parsed.path;
 					const { name, ext } = parse(parsed.path);
 					const metadata = await sharp(parsed.path).metadata();
+					const hash = await getFileHash(origin);
 					const mergedOptions = {
 						...config,
 						...parsed.options
 					};
-					const mainIdentifier = genIdentifier(name, mergedOptions.format ?? ext.slice(1), "main");
+					const mainIdentifier = genIdentifier(name, mergedOptions.format ?? ext.slice(1), "main", hash);
 					const mainEntry = {
 						width: mergedOptions.width,
 						height: mergedOptions.height,
@@ -178,7 +179,7 @@ function ohImage(options) {
 							placeholderWidth = Math.max(Math.round(metadata.width / metadata.height * PLACEHOLDER_IMG_SIZE), 1);
 							placeholderHeight = PLACEHOLDER_IMG_SIZE;
 						}
-						const placeholderIdentifier = genIdentifier(name, DEFAULT_IMAGE_FORMAT, "placeholder");
+						const placeholderIdentifier = genIdentifier(name, DEFAULT_IMAGE_FORMAT, "placeholder", hash);
 						const placeholderEntry = {
 							width: placeholderWidth,
 							height: placeholderHeight,
@@ -192,7 +193,7 @@ function ohImage(options) {
 					if (mergedOptions.bps) {
 						const srcSets = [];
 						for (const breakpoint of mergedOptions.bps) {
-							const srcSetIdentifier = genIdentifier(name, DEFAULT_IMAGE_FORMAT, `breakpoint-${breakpoint}`);
+							const srcSetIdentifier = genIdentifier(name, DEFAULT_IMAGE_FORMAT, `breakpoint-${breakpoint}`, hash);
 							const srcSetEntry = {
 								width: breakpoint,
 								format: DEFAULT_IMAGE_FORMAT,

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.0",
+  "version": "1.2.2",
   "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"
+  ]
 }