@son426/vite-image 0.1.8 → 0.2.0

package/LICENSE

@@ -23,3 +23,4 @@ SOFTWARE.
 
 
 
+

package/README.md

@@ -21,13 +21,51 @@ Simply add the plugin to your config, and start using the `<Image />` component
 
 Add it to `vite.config.ts`, and use it like this:
 
+**Option 1: Using query string (default)**
+
 ```tsx
 // vite.config.ts
-viteImage({
-  autoApply: {
-    extensions: [".jpg", ".png", ".webp"],
-    include: ["src/assets/**"],
-  },
+import { defineConfig } from "vite";
+import { viteImage } from "@son426/vite-image/plugin";
+
+export default defineConfig({
+  plugins: [
+    viteImage(), // Default breakpoints: [640, 1024, 1920]
+  ],
+});
+
+// Component
+import Image from "@son426/vite-image/react";
+import myBg from "./assets/background.jpg?vite-image";
+
+export default function Page() {
+  return (
+    <Image
+      src={myBg}
+      alt="Optimized Background"
+      fill
+      priority
+      placeholder="blur"
+    />
+  );
+}
+```
+
+**Option 2: Auto-apply without query string**
+
+```tsx
+// vite.config.ts
+import { defineConfig } from "vite";
+import { viteImage } from "@son426/vite-image/plugin";
+
+export default defineConfig({
+  plugins: [
+    viteImage({
+      autoApply: {
+        extensions: [".jpg"],
+      },
+    }),
+  ],
 });
 
 // Component
@@ -47,6 +85,8 @@ export default function Page() {
 }
 ```
 
+> **Note**: For auto-apply, you'll need to add type declarations. See the [TypeScript Setup](#typescript-setup) section below.
+
 ## Installation
 
 Install the package. `vite-imagetools` and `@rollup/pluginutils` are included as dependencies.
@@ -67,6 +107,31 @@ Just a standard Vite + React project.
 - react (>= 18.0.0)
 - react-dom (>= 18.0.0)
 
+## TypeScript Setup
+
+**⚠️ Temporary Setup Required**: Currently, you need to add type declarations manually. This will be automated in a future update.
+
+Add the following to your project's type definition file (e.g., `src/vite-env.d.ts`):
+
+```typescript
+/// <reference types="vite/client" />
+
+interface ResponsiveImageData {
+  src: string;
+  width: number;
+  height: number;
+  srcSet?: string;
+  blurDataURL?: string;
+}
+
+declare module "*?vite-image" {
+  const content: ResponsiveImageData;
+  export default content;
+}
+```
+
+This ensures TypeScript recognizes `?vite-image` imports. Sorry for the temporary manual step—we're working on automating this.
+
 ## Usage
 
 ### 1. Setup Vite Plugin
@@ -159,12 +224,29 @@ viteImage({
   },
 });
 
+// Add type declarations for autoApply extensions
+// In your project's vite-env.d.ts or a custom .d.ts file:
+// (Make sure you've already added the ResponsiveImageData interface from the TypeScript Setup section above)
+
+declare module "*.jpg" {
+  const imageData: ResponsiveImageData;
+  export default imageData;
+}
+
+declare module "*.png" {
+  const imageData: ResponsiveImageData;
+  export default imageData;
+}
+
 // Component
 import bgImage from "@/assets/background.jpg"; // No query needed
 <Image src={bgImage} alt="Background" />;
 ```
 
-**Important**: The `src` prop must receive the imported object directly. String URLs are not supported.
+**Important**:
+
+- The `src` prop must receive the imported object directly. String URLs are not supported.
+- When using `autoApply`, you need to add type declarations for the extensions you're using in your project's type definition file (e.g., `vite-env.d.ts`).
 
 The `?vite-image` query (or autoApply) automatically generates:
 
@@ -293,9 +375,11 @@ Type definitions are included. The package also extends vite-imagetools types fo
 
 ```typescript
 import Image from "@son426/vite-image/react";
-import type { ImageProps, ResponsiveImageData } from "@son426/vite-image/react";
+import type { ImageProps } from "@son426/vite-image/react";
 ```
 
+**Note**: After setting up the type declarations in the "TypeScript Setup" section above, you can use `ResponsiveImageData` directly in your code without importing it.
+
 ## How It Works
 
 1. **Image Processing**: When you import an image with `?vite-image` query or via `autoApply`, the plugin automatically generates:

package/dist/index.d.ts

@@ -1,7 +1,7 @@
-export { ImageProps } from './react/index.js';
 export { A as AutoApplyConfig, R as ResponsiveImageData, V as ViteImageConfig } from './types-B08JIQxT.js';
+export { ImageProps } from './react/index.js';
 export { ViteImagePluginOptions, viteImage } from './plugin/index.js';
+import 'vite-imagetools';
 import 'react/jsx-runtime';
 import 'react';
-import 'vite-imagetools';
 import 'vite';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@son426/vite-image",
-  "version": "0.1.8",
+  "version": "0.2.0",
   "description": "A Vite plugin and React component for optimized images with LQIP support using vite-imagetools",
   "type": "module",
   "main": "./dist/index.js",