@son426/vite-image 0.1.3 → 0.1.5

package/LICENSE

@@ -20,3 +20,4 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
+

package/README.md

@@ -1,19 +1,47 @@
 # @son426/vite-image
 
-**Next.js-style Image component for Vite.**
+**The Next.js `<Image />` experience, now in Vite.**
 
-This library provides a Next.js-like Image component experience in Vite. The core philosophy is to bring static bundler capabilities similar to Next.js Image component to Vite projects. Simply add `viteImage()` to your `vite.config.ts` and start using the `<Image />` component.
+- **Bring the power of Next.js's automatic image optimization to your Vite projects.**
+- **Dedicated to the Vite + React ecosystem.**
 
-## Features
+Simply add the plugin to your config, and start using the `<Image />` component immediately. No complex setups, just performant images.
 
-- 🖼️ **Optimized Images**: Automatic image optimization using vite-imagetools
-- 🎨 **LQIP Support**: Low Quality Image Placeholder for smooth loading experience
-- 📱 **Responsive Images**: Built-in support for srcSet and sizes attributes
-- 🎯 **TypeScript**: Full TypeScript support with type definitions
-- 🚀 **Simple Setup**: Easy configuration with sensible defaults
+## ✨ Why use this?
+
+- **⚡ Next.js-like Experience**: Familiar Image API for those coming from Next.js.
+- **🖼️ Zero-Config Optimization**: Automatic format conversion, resizing, and compression via `vite-imagetools`.
+- **🎨 Built-in LQIP**: Automatic Low Quality Image Placeholders (blur effect) while loading.
+- **📱 Responsive Ready**: Auto-generated `srcSet` and `sizes` for all viewports.
+- **🎯 Type-Safe**: Full TypeScript support with tight integration.
+
+---
+
+## 🚀 Quick Look
+
+Add it to `vite.config.ts`, and use it like this:
+
+```tsx
+import Image from "@son426/vite-image/react";
+// 1. Import with the required query
+import myBg from "./assets/background.jpg?vite-image";
+
+export default function Page() {
+  return (
+    // 2. Pass the object directly to src
+    <Image
+      src={myBg}
+      alt="Optimized Background"
+      fill // Optional: Fill parent container
+    />
+  );
+}
+```
 
 ## Installation
 
+Since `vite-imagetools` is handled internally, you only need to install this package.
+
 ```bash
 pnpm add @son426/vite-image
 # or
@@ -22,13 +50,13 @@ npm install @son426/vite-image
 yarn add @son426/vite-image
 ```
 
-## Peer Dependencies
+## Requirements
 
-The following packages are required:
+Just a standard Vite + React project.
 
-```bash
-pnpm add react vite vite-imagetools
-```
+- vite (>= 4.0.0)
+- react (>= 18.0.0)
+- react-dom (>= 18.0.0)
 
 ## Usage
 
@@ -48,8 +76,6 @@ export default defineConfig({
 });
 ```
 
-**Important**: The `viteImage()` function returns an array of plugins, so you should spread it when adding to the plugins array.
-
 ### 2. Use the Component
 
 #### Using `?vite-image` query (Required)
@@ -61,14 +87,7 @@ import Image from "@son426/vite-image/react";
 import bgImage from "@/assets/image.webp?vite-image";
 
 function MyComponent() {
-  return (
-    <Image
-      src={bgImage}
-      fill={false}
-      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1920px"
-      alt="Description"
-    />
-  );
+  return <Image src={bgImage} fill={false} alt="Description" />;
 }
 ```
 
@@ -78,16 +97,82 @@ The `?vite-image` query automatically generates:
 
 - `src`: Optimized image URL
 - `srcSet`: Responsive srcSet string
-- `lqipSrc`: Low Quality Image Placeholder (base64 inline)
+- `blurDataURL`: Low Quality Image Placeholder (base64 inline)
 - `width` and `height`: Image dimensions
 
-### Fill Mode
+#### Usage Examples
 
-For images that fill their container (similar to Next.js Image):
+**Basic usage:**
 
-```typescript
+```tsx
+import Image from "@son426/vite-image/react";
+import heroImage from "@/assets/hero.jpg?vite-image";
+
+<Image src={heroImage} alt="Hero" />;
+```
+
+**Fill mode (container-filling images):**
+
+```tsx
 <div style={{ position: "relative", width: "100%", height: "400px" }}>
-  <Image src={bgImage} fill={true} sizes="100vw" alt="Description" />
+  <Image src={bgImage} fill alt="Background" />
+</div>
+```
+
+**With priority (LCP images):**
+
+```tsx
+<Image src={heroImage} alt="Hero" priority />
+```
+
+**With blur placeholder:**
+
+```tsx
+<Image src={heroImage} alt="Hero" placeholder="blur" />
+```
+
+**Without placeholder:**
+
+```tsx
+<Image src={heroImage} alt="Hero" placeholder="empty" />
+```
+
+**Custom data URL placeholder:**
+
+```tsx
+<Image src={heroImage} alt="Hero" placeholder="data:image/jpeg;base64,..." />
+```
+
+**Custom sizes:**
+
+```tsx
+<Image src={heroImage} alt="Hero" sizes="(max-width: 768px) 100vw, 50vw" />
+```
+
+**With onLoad and onError callbacks:**
+
+```tsx
+<Image
+  src={heroImage}
+  alt="Hero"
+  onLoad={(e) => console.log("Image loaded", e)}
+  onError={(e) => console.error("Image failed to load", e)}
+/>
+```
+
+**Combined usage:**
+
+```tsx
+<div style={{ position: "relative", width: "100%", height: "600px" }}>
+  <Image
+    src={heroImage}
+    alt="Hero"
+    fill
+    priority
+    placeholder="blur"
+    className="rounded-lg"
+    onLoad={(e) => console.log("Loaded")}
+  />
 </div>
 ```
 
@@ -95,16 +180,25 @@ For images that fill their container (similar to Next.js Image):
 
 ### Image Props
 
-| Prop        | Type                  | Required | Description                                |
-| ----------- | --------------------- | -------- | ------------------------------------------ |
-| `src`       | `ResponsiveImageData` | Yes      | Image data object from `?vite-image` query |
-| `fill`      | `boolean`             | No       | Fill container mode (default: `false`)     |
-| `sizes`     | `string`              | No       | Sizes attribute (default: `"100vw"`)       |
-| `className` | `string`              | No       | Additional CSS classes                     |
-| `style`     | `CSSProperties`       | No       | Additional inline styles                   |
-| `...props`  | `ImgHTMLAttributes`   | No       | All standard img element attributes        |
-
-**Note**: The `src` prop must be an object imported from `?vite-image` query. String URLs are not supported. The `width` and `height` are automatically extracted from the `src` object.
+| Prop          | Type                                                      | Required | Default   | Description                                                             |
+| ------------- | --------------------------------------------------------- | -------- | --------- | ----------------------------------------------------------------------- |
+| `src`         | `ResponsiveImageData`                                     | Yes      | -         | Image data object from `?vite-image` query                              |
+| `fill`        | `boolean`                                                 | No       | `false`   | Fill container mode (requires parent with `position: relative`)         |
+| `sizes`       | `string`                                                  | No       | auto      | Sizes attribute (auto-calculated from srcSet if not provided)           |
+| `priority`    | `boolean`                                                 | No       | `false`   | High priority loading (preload + eager + fetchPriority high)            |
+| `placeholder` | `'empty' \| 'blur' \| string`                             | No       | `'empty'` | Placeholder type: `'empty'` (none), `'blur'` (blurDataURL), or data URL |
+| `onLoad`      | `(event: React.SyntheticEvent<HTMLImageElement>) => void` | No       | -         | Callback fired when image loads successfully                            |
+| `onError`     | `(event: React.SyntheticEvent<HTMLImageElement>) => void` | No       | -         | Callback fired when image fails to load                                 |
+| `className`   | `string`                                                  | No       | -         | Additional CSS classes                                                  |
+| `style`       | `CSSProperties`                                           | No       | -         | Additional inline styles                                                |
+| `...props`    | `ImgHTMLAttributes`                                       | No       | -         | All standard img element attributes                                     |
+
+**Notes**:
+
+- The `src` prop must be an object imported from `?vite-image` query. String URLs are not supported.
+- The `width` and `height` are automatically extracted from the `src` object.
+- When `priority={true}`, the image is preloaded using `react-dom`'s `preload` API and loaded with `loading="eager"` and `fetchPriority="high"`.
+- When `sizes` is not provided, it's automatically calculated from `srcSet` breakpoints.
 
 ### ResponsiveImageData
 
@@ -116,7 +210,8 @@ interface ResponsiveImageData {
   width: number;
   height: number;
   srcSet?: string;
-  lqipSrc?: string;
+  lqipSrc?: string; // Deprecated: use blurDataURL instead
+  blurDataURL?: string; // Base64 encoded blur placeholder (Next.js Image compatible)
 }
 ```
 
@@ -135,10 +230,12 @@ import type { ImageProps, ResponsiveImageData } from "@son426/vite-image/react";
 
    - Responsive srcSet (640px, 1024px, 1920px widths)
    - Image metadata (1920px width)
-   - LQIP (20px width, blurred, low quality, inline base64)
+   - Blur placeholder (20px width, blurred, low quality, inline base64 as `blurDataURL`)
 
 2. **Image Component**: The `<Image />` component handles:
-   - LQIP display while the main image loads
+   - Automatic `sizes` calculation from `srcSet` breakpoints
+   - Placeholder display (`blur`, `empty`, or custom data URL)
+   - Priority loading with `react-dom`'s `preload` API when `priority={true}`
    - Responsive image loading with srcSet
    - Proper aspect ratio maintenance
    - Fill mode for container-filling images

package/dist/index.js

@@ -1,4 +1,5 @@
 import 'react';
+import 'react-dom';
 import 'react/jsx-runtime';
 import { imagetools } from 'vite-imagetools';
 
@@ -24,7 +25,8 @@ function viteImage(options) {
             width: meta.width,
             height: meta.height,
             srcSet: srcSet,
-            lqipSrc: lqipSrc
+            lqipSrc: lqipSrc, // Deprecated: \uD558\uC704 \uD638\uD658\uC131\uC744 \uC704\uD574 \uC720\uC9C0
+            blurDataURL: lqipSrc // Next.js Image \uD638\uD658\uC131\uC744 \uC704\uD55C blurDataURL
           };
         `;
       }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/plugin/index.ts"],"names":[],"mappings":";;;;;AAyBO,SAAS,UAAU,OAAA,EAAkD;AAE1E,EAAA,MAAM,cAAA,GAA+B;AAAA,IACnC,IAAA,EAAM,8BAAA;AAAA,IACN,OAAA,EAAS,KAAA;AAAA,IACT,MAAM,KAAK,EAAA,EAAY;AACrB,MAAA,MAAM,CAAC,QAAA,EAAU,MAAM,CAAA,GAAI,EAAA,CAAG,MAAM,GAAG,CAAA;AACvC,MAAA,MAAM,MAAA,GAAS,IAAI,eAAA,CAAgB,MAAM,CAAA;AAEzC,MAAA,IAAI,MAAA,CAAO,GAAA,CAAI,YAAY,CAAA,EAAG;AAC5B,QAAA,MAAM,YAAA,GAAe,uCAAA;AACrB,QAAA,MAAM,UAAA,GAAa,4BAAA;AACnB,QAAA,MAAM,UAAA,GAAa,2CAAA;AAEnB,QAAA,OAAO;AAAA,8BAAA,EACiB,QAAQ,IAAI,YAAY,CAAA;AAAA,4BAAA,EAC1B,QAAQ,IAAI,UAAU,CAAA;AAAA,+BAAA,EACnB,QAAQ,IAAI,UAAU,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAAA,CAAA;AAAA,MAUjD;AAEA,MAAA,OAAO,IAAA;AAAA,IACT;AAAA,GACF;AAEA,EAAA,OAAO,CAAC,cAAA,EAAgB,UAAA,CAAW,OAAO,CAAC,CAAA;AAC7C","file":"index.js","sourcesContent":["import type { PluginOption } from \"vite\";\nimport { imagetools } from \"vite-imagetools\";\n\nexport type ViteImagePluginOptions = Parameters<typeof imagetools>[0];\n\n/**\n * Vite plugin for image optimization using vite-imagetools\n * This plugin handles ?vite-image queries and uses imagetools for image processing\n *\n * @param options - Options to pass to vite-imagetools\n * @returns Array of Vite plugins (vite-image macro and imagetools)\n *\n * @example\n * ```ts\n * // vite.config.ts\n * import { defineConfig } from 'vite';\n * import { viteImage } from '@son426/vite-image/plugin';\n *\n * export default defineConfig({\n *   plugins: [\n *     ...viteImage(),\n *   ],\n * });\n * ```\n */\nexport function viteImage(options?: ViteImagePluginOptions): PluginOption[] {\n  // 커스텀 플러그인: ?vite-image 쿼리를 처리\n  const viteImageMacro: PluginOption = {\n    name: \"vite-plugin-vite-image-macro\",\n    enforce: \"pre\" as const,\n    async load(id: string) {\n      const [basePath, search] = id.split(\"?\");\n      const params = new URLSearchParams(search);\n\n      if (params.has(\"vite-image\")) {\n        const srcSetParams = \"w=640;1024;1920&format=webp&as=srcset\";\n        const metaParams = \"w=1920&format=webp&as=meta\";\n        const lqipParams = \"w=20&blur=2&quality=20&format=webp&inline\";\n\n        return `\n          import srcSet from \"${basePath}?${srcSetParams}\";\n          import meta from \"${basePath}?${metaParams}\";\n          import lqipSrc from \"${basePath}?${lqipParams}\";\n          \n          export default {\n            src: meta.src,\n            width: meta.width,\n            height: meta.height,\n            srcSet: srcSet,\n            lqipSrc: lqipSrc\n          };\n        `;\n      }\n\n      return null;\n    },\n  };\n\n  return [viteImageMacro, imagetools(options)];\n}\n"]}
+{"version":3,"sources":["../src/plugin/index.ts"],"names":[],"mappings":";;;;;;AAyBO,SAAS,UAAU,OAAA,EAAkD;AAE1E,EAAA,MAAM,cAAA,GAA+B;AAAA,IACnC,IAAA,EAAM,8BAAA;AAAA,IACN,OAAA,EAAS,KAAA;AAAA,IACT,MAAM,KAAK,EAAA,EAAY;AACrB,MAAA,MAAM,CAAC,QAAA,EAAU,MAAM,CAAA,GAAI,EAAA,CAAG,MAAM,GAAG,CAAA;AACvC,MAAA,MAAM,MAAA,GAAS,IAAI,eAAA,CAAgB,MAAM,CAAA;AAEzC,MAAA,IAAI,MAAA,CAAO,GAAA,CAAI,YAAY,CAAA,EAAG;AAC5B,QAAA,MAAM,YAAA,GAAe,uCAAA;AACrB,QAAA,MAAM,UAAA,GAAa,4BAAA;AACnB,QAAA,MAAM,UAAA,GAAa,2CAAA;AAEnB,QAAA,OAAO;AAAA,8BAAA,EACiB,QAAQ,IAAI,YAAY,CAAA;AAAA,4BAAA,EAC1B,QAAQ,IAAI,UAAU,CAAA;AAAA,+BAAA,EACnB,QAAQ,IAAI,UAAU,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAAA,CAAA;AAAA,MAWjD;AAEA,MAAA,OAAO,IAAA;AAAA,IACT;AAAA,GACF;AAEA,EAAA,OAAO,CAAC,cAAA,EAAgB,UAAA,CAAW,OAAO,CAAC,CAAA;AAC7C","file":"index.js","sourcesContent":["import type { PluginOption } from \"vite\";\nimport { imagetools } from \"vite-imagetools\";\n\nexport type ViteImagePluginOptions = Parameters<typeof imagetools>[0];\n\n/**\n * Vite plugin for image optimization using vite-imagetools\n * This plugin handles ?vite-image queries and uses imagetools for image processing\n *\n * @param options - Options to pass to vite-imagetools\n * @returns Array of Vite plugins (vite-image macro and imagetools)\n *\n * @example\n * ```ts\n * // vite.config.ts\n * import { defineConfig } from 'vite';\n * import { viteImage } from '@son426/vite-image/plugin';\n *\n * export default defineConfig({\n *   plugins: [\n *     ...viteImage(),\n *   ],\n * });\n * ```\n */\nexport function viteImage(options?: ViteImagePluginOptions): PluginOption[] {\n  // 커스텀 플러그인: ?vite-image 쿼리를 처리\n  const viteImageMacro: PluginOption = {\n    name: \"vite-plugin-vite-image-macro\",\n    enforce: \"pre\" as const,\n    async load(id: string) {\n      const [basePath, search] = id.split(\"?\");\n      const params = new URLSearchParams(search);\n\n      if (params.has(\"vite-image\")) {\n        const srcSetParams = \"w=640;1024;1920&format=webp&as=srcset\";\n        const metaParams = \"w=1920&format=webp&as=meta\";\n        const lqipParams = \"w=20&blur=2&quality=20&format=webp&inline\";\n\n        return `\n          import srcSet from \"${basePath}?${srcSetParams}\";\n          import meta from \"${basePath}?${metaParams}\";\n          import lqipSrc from \"${basePath}?${lqipParams}\";\n          \n          export default {\n            src: meta.src,\n            width: meta.width,\n            height: meta.height,\n            srcSet: srcSet,\n            lqipSrc: lqipSrc, // Deprecated: 하위 호환성을 위해 유지\n            blurDataURL: lqipSrc // Next.js Image 호환성을 위한 blurDataURL\n          };\n        `;\n      }\n\n      return null;\n    },\n  };\n\n  return [viteImageMacro, imagetools(options)];\n}\n"]}

package/dist/plugin/index.js

@@ -22,7 +22,8 @@ function viteImage(options) {
             width: meta.width,
             height: meta.height,
             srcSet: srcSet,
-            lqipSrc: lqipSrc
+            lqipSrc: lqipSrc, // Deprecated: \uD558\uC704 \uD638\uD658\uC131\uC744 \uC704\uD574 \uC720\uC9C0
+            blurDataURL: lqipSrc // Next.js Image \uD638\uD658\uC131\uC744 \uC704\uD55C blurDataURL
           };
         `;
       }

package/dist/plugin/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/plugin/index.ts"],"names":[],"mappings":";;;AAyBO,SAAS,UAAU,OAAA,EAAkD;AAE1E,EAAA,MAAM,cAAA,GAA+B;AAAA,IACnC,IAAA,EAAM,8BAAA;AAAA,IACN,OAAA,EAAS,KAAA;AAAA,IACT,MAAM,KAAK,EAAA,EAAY;AACrB,MAAA,MAAM,CAAC,QAAA,EAAU,MAAM,CAAA,GAAI,EAAA,CAAG,MAAM,GAAG,CAAA;AACvC,MAAA,MAAM,MAAA,GAAS,IAAI,eAAA,CAAgB,MAAM,CAAA;AAEzC,MAAA,IAAI,MAAA,CAAO,GAAA,CAAI,YAAY,CAAA,EAAG;AAC5B,QAAA,MAAM,YAAA,GAAe,uCAAA;AACrB,QAAA,MAAM,UAAA,GAAa,4BAAA;AACnB,QAAA,MAAM,UAAA,GAAa,2CAAA;AAEnB,QAAA,OAAO;AAAA,8BAAA,EACiB,QAAQ,IAAI,YAAY,CAAA;AAAA,4BAAA,EAC1B,QAAQ,IAAI,UAAU,CAAA;AAAA,+BAAA,EACnB,QAAQ,IAAI,UAAU,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAAA,CAAA;AAAA,MAUjD;AAEA,MAAA,OAAO,IAAA;AAAA,IACT;AAAA,GACF;AAEA,EAAA,OAAO,CAAC,cAAA,EAAgB,UAAA,CAAW,OAAO,CAAC,CAAA;AAC7C","file":"index.js","sourcesContent":["import type { PluginOption } from \"vite\";\nimport { imagetools } from \"vite-imagetools\";\n\nexport type ViteImagePluginOptions = Parameters<typeof imagetools>[0];\n\n/**\n * Vite plugin for image optimization using vite-imagetools\n * This plugin handles ?vite-image queries and uses imagetools for image processing\n *\n * @param options - Options to pass to vite-imagetools\n * @returns Array of Vite plugins (vite-image macro and imagetools)\n *\n * @example\n * ```ts\n * // vite.config.ts\n * import { defineConfig } from 'vite';\n * import { viteImage } from '@son426/vite-image/plugin';\n *\n * export default defineConfig({\n *   plugins: [\n *     ...viteImage(),\n *   ],\n * });\n * ```\n */\nexport function viteImage(options?: ViteImagePluginOptions): PluginOption[] {\n  // 커스텀 플러그인: ?vite-image 쿼리를 처리\n  const viteImageMacro: PluginOption = {\n    name: \"vite-plugin-vite-image-macro\",\n    enforce: \"pre\" as const,\n    async load(id: string) {\n      const [basePath, search] = id.split(\"?\");\n      const params = new URLSearchParams(search);\n\n      if (params.has(\"vite-image\")) {\n        const srcSetParams = \"w=640;1024;1920&format=webp&as=srcset\";\n        const metaParams = \"w=1920&format=webp&as=meta\";\n        const lqipParams = \"w=20&blur=2&quality=20&format=webp&inline\";\n\n        return `\n          import srcSet from \"${basePath}?${srcSetParams}\";\n          import meta from \"${basePath}?${metaParams}\";\n          import lqipSrc from \"${basePath}?${lqipParams}\";\n          \n          export default {\n            src: meta.src,\n            width: meta.width,\n            height: meta.height,\n            srcSet: srcSet,\n            lqipSrc: lqipSrc\n          };\n        `;\n      }\n\n      return null;\n    },\n  };\n\n  return [viteImageMacro, imagetools(options)];\n}\n"]}
+{"version":3,"sources":["../../src/plugin/index.ts"],"names":[],"mappings":";;;AAyBO,SAAS,UAAU,OAAA,EAAkD;AAE1E,EAAA,MAAM,cAAA,GAA+B;AAAA,IACnC,IAAA,EAAM,8BAAA;AAAA,IACN,OAAA,EAAS,KAAA;AAAA,IACT,MAAM,KAAK,EAAA,EAAY;AACrB,MAAA,MAAM,CAAC,QAAA,EAAU,MAAM,CAAA,GAAI,EAAA,CAAG,MAAM,GAAG,CAAA;AACvC,MAAA,MAAM,MAAA,GAAS,IAAI,eAAA,CAAgB,MAAM,CAAA;AAEzC,MAAA,IAAI,MAAA,CAAO,GAAA,CAAI,YAAY,CAAA,EAAG;AAC5B,QAAA,MAAM,YAAA,GAAe,uCAAA;AACrB,QAAA,MAAM,UAAA,GAAa,4BAAA;AACnB,QAAA,MAAM,UAAA,GAAa,2CAAA;AAEnB,QAAA,OAAO;AAAA,8BAAA,EACiB,QAAQ,IAAI,YAAY,CAAA;AAAA,4BAAA,EAC1B,QAAQ,IAAI,UAAU,CAAA;AAAA,+BAAA,EACnB,QAAQ,IAAI,UAAU,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAAA,CAAA;AAAA,MAWjD;AAEA,MAAA,OAAO,IAAA;AAAA,IACT;AAAA,GACF;AAEA,EAAA,OAAO,CAAC,cAAA,EAAgB,UAAA,CAAW,OAAO,CAAC,CAAA;AAC7C","file":"index.js","sourcesContent":["import type { PluginOption } from \"vite\";\nimport { imagetools } from \"vite-imagetools\";\n\nexport type ViteImagePluginOptions = Parameters<typeof imagetools>[0];\n\n/**\n * Vite plugin for image optimization using vite-imagetools\n * This plugin handles ?vite-image queries and uses imagetools for image processing\n *\n * @param options - Options to pass to vite-imagetools\n * @returns Array of Vite plugins (vite-image macro and imagetools)\n *\n * @example\n * ```ts\n * // vite.config.ts\n * import { defineConfig } from 'vite';\n * import { viteImage } from '@son426/vite-image/plugin';\n *\n * export default defineConfig({\n *   plugins: [\n *     ...viteImage(),\n *   ],\n * });\n * ```\n */\nexport function viteImage(options?: ViteImagePluginOptions): PluginOption[] {\n  // 커스텀 플러그인: ?vite-image 쿼리를 처리\n  const viteImageMacro: PluginOption = {\n    name: \"vite-plugin-vite-image-macro\",\n    enforce: \"pre\" as const,\n    async load(id: string) {\n      const [basePath, search] = id.split(\"?\");\n      const params = new URLSearchParams(search);\n\n      if (params.has(\"vite-image\")) {\n        const srcSetParams = \"w=640;1024;1920&format=webp&as=srcset\";\n        const metaParams = \"w=1920&format=webp&as=meta\";\n        const lqipParams = \"w=20&blur=2&quality=20&format=webp&inline\";\n\n        return `\n          import srcSet from \"${basePath}?${srcSetParams}\";\n          import meta from \"${basePath}?${metaParams}\";\n          import lqipSrc from \"${basePath}?${lqipParams}\";\n          \n          export default {\n            src: meta.src,\n            width: meta.width,\n            height: meta.height,\n            srcSet: srcSet,\n            lqipSrc: lqipSrc, // Deprecated: 하위 호환성을 위해 유지\n            blurDataURL: lqipSrc // Next.js Image 호환성을 위한 blurDataURL\n          };\n        `;\n      }\n\n      return null;\n    },\n  };\n\n  return [viteImageMacro, imagetools(options)];\n}\n"]}

package/dist/react/index.d.ts

@@ -10,11 +10,17 @@ interface ResponsiveImageData {
     height: number;
     srcSet?: string;
     lqipSrc?: string;
+    blurDataURL?: string;
 }
 
+type PlaceholderValue = "empty" | "blur" | string;
 interface BaseImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "srcSet" | "width" | "height"> {
     src: ResponsiveImageData;
     sizes?: string;
+    placeholder?: PlaceholderValue;
+    priority?: boolean;
+    onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
 }
 interface FillImageProps extends BaseImageProps {
     fill: true;
@@ -24,6 +30,8 @@ interface StandardImageProps extends BaseImageProps {
 }
 type ImageProps = FillImageProps | StandardImageProps;
 declare function Image({ src, // 이제 이 src는 객체입니다.
-fill, sizes, className, style, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
+fill, sizes, placeholder, // 기본값: empty (Next.js Image 호환)
+priority, // 기본값: false (Next.js Image 호환)
+className, style, onLoad, onError, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
 
 export { type ImageProps, type ResponsiveImageData, Image as default };

package/dist/react/index.js

@@ -1,14 +1,44 @@
 import { useState } from 'react';
+import { preload } from 'react-dom';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/react/Image.tsx
+function generateSizesFromSrcSet(srcSet) {
+  if (!srcSet) {
+    return "100vw";
+  }
+  const widthMatches = srcSet.match(/(\d+)w/g);
+  if (!widthMatches || widthMatches.length === 0) {
+    return "100vw";
+  }
+  const breakpoints = widthMatches.map((match) => parseInt(match.replace("w", ""), 10)).sort((a, b) => a - b);
+  if (breakpoints.length === 0) {
+    return "100vw";
+  }
+  const sizeParts = [];
+  for (let i = 0; i < breakpoints.length; i++) {
+    const breakpoint = breakpoints[i];
+    if (i === breakpoints.length - 1) {
+      sizeParts.push(`${breakpoint}px`);
+    } else {
+      sizeParts.push(`(max-width: ${breakpoint}px) 100vw`);
+    }
+  }
+  return sizeParts.join(", ");
+}
 function Image({
   src,
   // 이제 이 src는 객체입니다.
   fill = false,
-  sizes = "100vw",
+  sizes,
+  placeholder = "empty",
+  // 기본값: empty (Next.js Image 호환)
+  priority = false,
+  // 기본값: false (Next.js Image 호환)
   className = "",
   style,
+  onLoad,
+  onError,
   ...props
 }) {
   const [isImageLoaded, setIsImageLoaded] = useState(false);
@@ -16,9 +46,33 @@ function Image({
     src: currentSrc,
     srcSet: currentSrcSet,
     lqipSrc: currentLqip,
+    blurDataURL,
     width: currentWidth,
     height: currentHeight
   } = src;
+  const computedSizes = sizes ?? (fill ? "100vw" : generateSizesFromSrcSet(currentSrcSet));
+  if (priority && currentSrc) {
+    preload(currentSrc, {
+      as: "image",
+      fetchPriority: "high",
+      ...currentSrcSet ? { imageSrcSet: currentSrcSet } : {},
+      ...computedSizes ? { imageSizes: computedSizes } : {}
+    });
+  }
+  const getPlaceholderSrc = () => {
+    if (placeholder === "empty") {
+      return void 0;
+    }
+    if (placeholder === "blur") {
+      return blurDataURL ?? currentLqip;
+    }
+    if (placeholder.startsWith("data:image/")) {
+      return placeholder;
+    }
+    return void 0;
+  };
+  const placeholderSrc = getPlaceholderSrc();
+  const hasShowPlaceholder = !!placeholderSrc;
   const containerStyle = fill ? {
     position: "absolute",
     top: 0,
@@ -46,13 +100,17 @@ function Image({
     height: "100%",
     objectFit: "cover"
   };
-  const lqipStyle = {
+  const placeholderStyle = {
     ...imgStyle,
-    filter: "blur(20px)",
-    transform: "scale(1.1)",
     transition: "opacity 500ms ease-out",
     opacity: isImageLoaded ? 0 : 1,
-    zIndex: 1
+    zIndex: 1,
+    pointerEvents: "none",
+    // blur placeholder일 때만 blur 효과 적용
+    ...placeholder === "blur" ? {
+      filter: "blur(20px)",
+      transform: "scale(1.1)"
+    } : {}
   };
   return /* @__PURE__ */ jsxs("div", { className, style: mergedContainerStyle, children: [
     /* @__PURE__ */ jsx(
@@ -61,14 +119,28 @@ function Image({
         ...props,
         src: currentSrc,
         srcSet: currentSrcSet,
-        sizes,
+        sizes: computedSizes,
         width: fill ? void 0 : currentWidth,
         height: fill ? void 0 : currentHeight,
-        onLoad: () => setIsImageLoaded(true),
+        loading: priority ? "eager" : "lazy",
+        fetchPriority: priority ? "high" : void 0,
+        onLoad: (e) => {
+          setIsImageLoaded(true);
+          onLoad?.(e);
+        },
+        onError,
         style: { ...imgStyle, zIndex: 0 }
       }
     ),
-    currentLqip && /* @__PURE__ */ jsx("img", { src: currentLqip, alt: "", "aria-hidden": "true", style: lqipStyle })
+    hasShowPlaceholder && /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: placeholderSrc,
+        alt: "",
+        "aria-hidden": "true",
+        style: placeholderStyle
+      }
+    )
   ] });
 }
 

package/dist/react/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/Image.tsx"],"names":[],"mappings":";;;;AAwBe,SAAR,KAAA,CAAuB;AAAA,EAC5B,GAAA;AAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,KAAA,GAAQ,OAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAe;AACb,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AAGxD,EAAA,MAAM;AAAA,IACJ,GAAA,EAAK,UAAA;AAAA,IACL,MAAA,EAAQ,aAAA;AAAA,IACR,OAAA,EAAS,WAAA;AAAA,IACT,KAAA,EAAO,YAAA;AAAA,IACP,MAAA,EAAQ;AAAA,GACV,GAAI,GAAA;AAGJ,EAAA,MAAM,iBAAgC,IAAA,GAClC;AAAA,IACE,QAAA,EAAU,UAAA;AAAA,IACV,GAAA,EAAK,CAAA;AAAA,IACL,IAAA,EAAM,CAAA;AAAA,IACN,KAAA,EAAO,CAAA;AAAA,IACP,MAAA,EAAQ,CAAA;AAAA,IACR,KAAA,EAAO,MAAA;AAAA,IACP,MAAA,EAAQ,MAAA;AAAA,IACR,QAAA,EAAU;AAAA,GACZ,GACA;AAAA,IACE,QAAA,EAAU,UAAA;AAAA,IACV,KAAA,EAAO,MAAA;AAAA,IACP,QAAA,EAAU,QAAA;AAAA;AAAA,IAEV,GAAI,YAAA,IAAgB,aAAA,GAChB,EAAE,WAAA,EAAa,CAAA,EAAG,YAAY,CAAA,GAAA,EAAM,aAAa,CAAA,CAAA,EAAG,GACpD;AAAC,GACP;AAEJ,EAAA,MAAM,oBAAA,GAAuB,EAAE,GAAG,cAAA,EAAgB,GAAG,KAAA,EAAM;AAG3D,EAAA,MAAM,QAAA,GAA0B;AAAA,IAC9B,QAAA,EAAU,UAAA;AAAA,IACV,GAAA,EAAK,CAAA;AAAA,IACL,IAAA,EAAM,CAAA;AAAA,IACN,KAAA,EAAO,CAAA;AAAA,IACP,MAAA,EAAQ,CAAA;AAAA,IACR,KAAA,EAAO,MAAA;AAAA,IACP,MAAA,EAAQ,MAAA;AAAA,IACR,SAAA,EAAW;AAAA,GACb;AAGA,EAAA,MAAM,SAAA,GAA2B;AAAA,IAC/B,GAAG,QAAA;AAAA,IACH,MAAA,EAAQ,YAAA;AAAA,IACR,SAAA,EAAW,YAAA;AAAA,IACX,UAAA,EAAY,wBAAA;AAAA,IACZ,OAAA,EAAS,gBAAgB,CAAA,GAAI,CAAA;AAAA,IAC7B,MAAA,EAAQ;AAAA,GACV;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAsB,KAAA,EAAO,oBAAA,EAEhC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,GAAA,EAAK,UAAA;AAAA,QACL,MAAA,EAAQ,aAAA;AAAA,QACR,KAAA;AAAA,QACA,KAAA,EAAO,OAAO,MAAA,GAAY,YAAA;AAAA,QAC1B,MAAA,EAAQ,OAAO,MAAA,GAAY,aAAA;AAAA,QAC3B,MAAA,EAAQ,MAAM,gBAAA,CAAiB,IAAI,CAAA;AAAA,QACnC,KAAA,EAAO,EAAE,GAAG,QAAA,EAAU,QAAQ,CAAA;AAAE;AAAA,KAClC;AAAA,IAGC,WAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,WAAA,EAAa,KAAI,EAAA,EAAG,aAAA,EAAY,MAAA,EAAO,KAAA,EAAO,SAAA,EAAW;AAAA,GAAA,EAEvE,CAAA;AAEJ","file":"index.js","sourcesContent":["import { useState, type ImgHTMLAttributes, type CSSProperties } from \"react\";\nimport type { ResponsiveImageData } from \"../types\";\n\n// ?vite-image import 결과 타입\ninterface BaseImageProps\n  extends Omit<\n    ImgHTMLAttributes<HTMLImageElement>,\n    \"src\" | \"srcSet\" | \"width\" | \"height\"\n  > {\n  // 핵심 변경: src는 무조건 최적화된 이미지 객체만 받음\n  src: ResponsiveImageData;\n  sizes?: string;\n}\n\ninterface FillImageProps extends BaseImageProps {\n  fill: true;\n}\n\ninterface StandardImageProps extends BaseImageProps {\n  fill?: false | undefined;\n}\n\nexport type ImageProps = FillImageProps | StandardImageProps;\n\nexport default function Image({\n  src, // 이제 이 src는 객체입니다.\n  fill = false,\n  sizes = \"100vw\",\n  className = \"\",\n  style,\n  ...props\n}: ImageProps) {\n  const [isImageLoaded, setIsImageLoaded] = useState(false);\n\n  // 1. 데이터 추출: src 객체에서 바로 꺼내씀 (병합 로직 제거)\n  const {\n    src: currentSrc,\n    srcSet: currentSrcSet,\n    lqipSrc: currentLqip,\n    width: currentWidth,\n    height: currentHeight,\n  } = src;\n\n  // 2. 컨테이너 스타일 계산 (기존 로직 유지)\n  const containerStyle: CSSProperties = fill\n    ? {\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        width: \"100%\",\n        height: \"100%\",\n        overflow: \"hidden\",\n      }\n    : {\n        position: \"relative\",\n        width: \"100%\",\n        overflow: \"hidden\",\n        // Standard 모드일 때 aspect-ratio 처리\n        ...(currentWidth && currentHeight\n          ? { aspectRatio: `${currentWidth} / ${currentHeight}` }\n          : {}),\n      };\n\n  const mergedContainerStyle = { ...containerStyle, ...style };\n\n  // 3. 실제 이미지 스타일 (기존 로직 유지)\n  const imgStyle: CSSProperties = {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n  };\n\n  // 4. LQIP 스타일 (기존 로직 유지)\n  const lqipStyle: CSSProperties = {\n    ...imgStyle,\n    filter: \"blur(20px)\",\n    transform: \"scale(1.1)\",\n    transition: \"opacity 500ms ease-out\",\n    opacity: isImageLoaded ? 0 : 1,\n    zIndex: 1,\n  };\n\n  return (\n    <div className={className} style={mergedContainerStyle}>\n      {/* 실제 이미지 */}\n      <img\n        {...props}\n        src={currentSrc}\n        srcSet={currentSrcSet}\n        sizes={sizes}\n        width={fill ? undefined : currentWidth}\n        height={fill ? undefined : currentHeight}\n        onLoad={() => setIsImageLoaded(true)}\n        style={{ ...imgStyle, zIndex: 0 }}\n      />\n\n      {/* LQIP 레이어 */}\n      {currentLqip && (\n        <img src={currentLqip} alt=\"\" aria-hidden=\"true\" style={lqipStyle} />\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../../src/react/Image.tsx"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["import { useState, type ImgHTMLAttributes, type CSSProperties } from \"react\";\nimport { preload } from \"react-dom\";\nimport type { ResponsiveImageData } from \"../types\";\n\n// placeholder 타입 정의 (Next.js Image 호환)\ntype PlaceholderValue = \"empty\" | \"blur\" | string; // string은 data:image/... 형식\n\n// ?vite-image import 결과 타입\ninterface BaseImageProps\n  extends Omit<\n    ImgHTMLAttributes<HTMLImageElement>,\n    \"src\" | \"srcSet\" | \"width\" | \"height\"\n  > {\n  // 핵심 변경: src는 무조건 최적화된 이미지 객체만 받음\n  src: ResponsiveImageData;\n  sizes?: string; // Optional: 제공되지 않으면 자동 계산\n  placeholder?: PlaceholderValue; // Next.js Image 호환: 'empty' | 'blur' | 'data:image/...'\n  priority?: boolean; // Next.js Image 호환: true일 경우 높은 우선순위로 preload\n  onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n  onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;\n}\n\ninterface FillImageProps extends BaseImageProps {\n  fill: true;\n}\n\ninterface StandardImageProps extends BaseImageProps {\n  fill?: false | undefined;\n}\n\nexport type ImageProps = FillImageProps | StandardImageProps;\n\n/**\n * srcSet에서 breakpoints를 추출하여 sizes 문자열을 자동 생성\n * @param srcSet - \"url1 640w, url2 1024w, url3 1920w\" 형식의 문자열\n * @returns sizes 속성 문자열\n */\nfunction generateSizesFromSrcSet(srcSet?: string): string {\n  if (!srcSet) {\n    return \"100vw\";\n  }\n\n  // srcSet에서 width 값들 추출 (예: \"640w\", \"1024w\", \"1920w\")\n  const widthMatches = srcSet.match(/(\\d+)w/g);\n  if (!widthMatches || widthMatches.length === 0) {\n    return \"100vw\";\n  }\n\n  // width 값들을 숫자로 변환하고 정렬\n  const breakpoints = widthMatches\n    .map((match) => parseInt(match.replace(\"w\", \"\"), 10))\n    .sort((a, b) => a - b);\n\n  if (breakpoints.length === 0) {\n    return \"100vw\";\n  }\n\n  // breakpoints를 기반으로 sizes 문자열 생성\n  // 예: \"(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1920px\"\n  const sizeParts: string[] = [];\n\n  for (let i = 0; i < breakpoints.length; i++) {\n    const breakpoint = breakpoints[i];\n    if (i === breakpoints.length - 1) {\n      // 마지막 breakpoint는 최대 크기로 설정\n      sizeParts.push(`${breakpoint}px`);\n    } else {\n      // 중간 breakpoint들은 미디어 쿼리로 설정\n      sizeParts.push(`(max-width: ${breakpoint}px) 100vw`);\n    }\n  }\n\n  return sizeParts.join(\", \");\n}\n\nexport default function Image({\n  src, // 이제 이 src는 객체입니다.\n  fill = false,\n  sizes,\n  placeholder = \"empty\", // 기본값: empty (Next.js Image 호환)\n  priority = false, // 기본값: false (Next.js Image 호환)\n  className = \"\",\n  style,\n  onLoad,\n  onError,\n  ...props\n}: ImageProps) {\n  const [isImageLoaded, setIsImageLoaded] = useState(false);\n\n  // 1. 데이터 추출: src 객체에서 바로 꺼내씀 (병합 로직 제거)\n  const {\n    src: currentSrc,\n    srcSet: currentSrcSet,\n    lqipSrc: currentLqip,\n    blurDataURL,\n    width: currentWidth,\n    height: currentHeight,\n  } = src;\n\n  // 2. sizes 자동 계산: 제공되지 않으면 srcSet 기반으로 자동 생성\n  const computedSizes =\n    sizes ?? (fill ? \"100vw\" : generateSizesFromSrcSet(currentSrcSet));\n\n  if (priority && currentSrc) {\n    preload(currentSrc, {\n      as: \"image\",\n      fetchPriority: \"high\",\n      ...(currentSrcSet ? { imageSrcSet: currentSrcSet } : {}),\n      ...(computedSizes ? { imageSizes: computedSizes } : {}),\n    });\n  }\n\n  // 3. placeholder 처리 (Next.js Image 호환)\n  const getPlaceholderSrc = (): string | undefined => {\n    if (placeholder === \"empty\") {\n      return undefined;\n    }\n    if (placeholder === \"blur\") {\n      // blurDataURL 우선, 없으면 lqipSrc 사용 (하위 호환성)\n      return blurDataURL ?? currentLqip;\n    }\n    // data:image/... 형식의 직접 제공된 placeholder\n    if (placeholder.startsWith(\"data:image/\")) {\n      return placeholder;\n    }\n    // 기본값: empty\n    return undefined;\n  };\n\n  const placeholderSrc = getPlaceholderSrc();\n  const hasShowPlaceholder = !!placeholderSrc;\n\n  // 5. 컨테이너 스타일 계산 (기존 로직 유지)\n  const containerStyle: CSSProperties = fill\n    ? {\n        position: \"absolute\",\n        top: 0,\n        left: 0,\n        right: 0,\n        bottom: 0,\n        width: \"100%\",\n        height: \"100%\",\n        overflow: \"hidden\",\n      }\n    : {\n        position: \"relative\",\n        width: \"100%\",\n        overflow: \"hidden\",\n        // Standard 모드일 때 aspect-ratio 처리\n        ...(currentWidth && currentHeight\n          ? { aspectRatio: `${currentWidth} / ${currentHeight}` }\n          : {}),\n      };\n\n  const mergedContainerStyle = { ...containerStyle, ...style };\n\n  // 6. 실제 이미지 스타일 (기존 로직 유지)\n  const imgStyle: CSSProperties = {\n    position: \"absolute\",\n    top: 0,\n    left: 0,\n    right: 0,\n    bottom: 0,\n    width: \"100%\",\n    height: \"100%\",\n    objectFit: \"cover\",\n  };\n\n  // 7. Placeholder 스타일 (blur 모드일 때만 blur 효과 적용)\n  const placeholderStyle: CSSProperties = {\n    ...imgStyle,\n    transition: \"opacity 500ms ease-out\",\n    opacity: isImageLoaded ? 0 : 1,\n    zIndex: 1,\n    pointerEvents: \"none\",\n\n    // blur placeholder일 때만 blur 효과 적용\n    ...(placeholder === \"blur\"\n      ? {\n          filter: \"blur(20px)\",\n          transform: \"scale(1.1)\",\n        }\n      : {}),\n  };\n\n  return (\n    <div className={className} style={mergedContainerStyle}>\n      {/* 실제 이미지 */}\n      <img\n        {...props}\n        src={currentSrc}\n        srcSet={currentSrcSet}\n        sizes={computedSizes}\n        width={fill ? undefined : currentWidth}\n        height={fill ? undefined : currentHeight}\n        loading={priority ? \"eager\" : \"lazy\"}\n        fetchPriority={priority ? \"high\" : undefined}\n        onLoad={(e) => {\n          setIsImageLoaded(true);\n          onLoad?.(e);\n        }}\n        onError={onError}\n        style={{ ...imgStyle, zIndex: 0 }}\n      />\n\n      {/* Placeholder 레이어 (placeholder prop에 따라 표시) */}\n      {hasShowPlaceholder && (\n        <img\n          src={placeholderSrc}\n          alt=\"\"\n          aria-hidden=\"true\"\n          style={placeholderStyle}\n        />\n      )}\n    </div>\n  );\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@son426/vite-image",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "A Vite plugin and React component for optimized images with LQIP support using vite-imagetools",
   "type": "module",
   "main": "./dist/index.js",
@@ -47,19 +47,23 @@
     "type": "git",
     "url": ""
   },
+  "dependencies": {
+    "vite-imagetools": "^9.0.2"
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
-    "vite-imagetools": "^9.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.0 || ^19.0.0",
+    "@types/react-dom": "^19.2.3",
     "react": "^19.1.0",
+    "react-dom": "^19.1.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0",
-    "vite": "^7.0.4",
-    "vite-imagetools": "^9.0.2"
+    "vite": "^7.0.4"
   },
   "publishConfig": {
     "access": "public"