@son426/vite-image 0.1.7 → 0.1.9

package/LICENSE

@@ -21,3 +21,5 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
 
+
+

package/README.md

@@ -22,17 +22,26 @@ Simply add the plugin to your config, and start using the `<Image />` component
 Add it to `vite.config.ts`, and use it like this:
 
 ```tsx
+// vite.config.ts
+viteImage({
+  autoApply: {
+    extensions: [".jpg", ".png", ".webp"],
+    include: ["src/assets/**"],
+  },
+});
+
+// Component
 import Image from "@son426/vite-image/react";
-// 1. Import with the required query
-import myBg from "./assets/background.jpg?vite-image";
+import myBg from "./assets/background.jpg"; // No query needed
 
 export default function Page() {
   return (
-    // 2. Pass the object directly to src
     <Image
       src={myBg}
       alt="Optimized Background"
-      fill // Optional: Fill parent container
+      fill
+      priority
+      placeholder="blur"
     />
   );
 }
@@ -40,7 +49,7 @@ export default function Page() {
 
 ## Installation
 
-Since `vite-imagetools` is handled internally, you only need to install this package.
+Install the package. `vite-imagetools` and `@rollup/pluginutils` are included as dependencies.
 
 ```bash
 pnpm add @son426/vite-image
@@ -58,6 +67,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
@@ -70,17 +104,65 @@ import { viteImage } from "@son426/vite-image/plugin";
 
 export default defineConfig({
   plugins: [
-    // ... other plugins
-    viteImage(),
+    viteImage(), // Default: breakpoints [640, 1024, 1920], no autoApply
   ],
 });
 ```
 
+**Default configuration:**
+
+- `breakpoints: [640, 1024, 1920]`
+- `autoApply: undefined` (requires `?vite-image` query)
+
+#### Configuration Options
+
+**Custom breakpoints:**
+
+```typescript
+viteImage({
+  breakpoints: [800, 1200, 1920],
+});
+```
+
+**Auto-apply without query string:**
+
+```typescript
+viteImage({
+  autoApply: {
+    extensions: [".jpg", ".png", ".webp"],
+    include: ["src/assets/**"],
+    exclude: ["src/icons/**"],
+  },
+});
+```
+
+**Note**: `include` and `exclude` patterns are matched against actual image file paths (after alias resolution). For example, `@/assets/image.jpg` resolves to `src/assets/image.jpg`.
+
+**With vite-imagetools options:**
+
+```typescript
+viteImage({
+  breakpoints: [640, 1024, 1920],
+  autoApply: {
+    extensions: [".jpg", ".png"],
+    include: ["src/**"],
+  },
+  imagetools: {
+    // vite-imagetools options
+    defaultDirectives: (url) => {
+      if (url.searchParams.has("vite-image")) {
+        return new URLSearchParams("format=webp");
+      }
+    },
+  },
+});
+```
+
 ### 2. Use the Component
 
-#### Using `?vite-image` query (Required)
+#### Using `?vite-image` query
 
-The `?vite-image` query parameter is required and automatically generates all required image data. When using `?vite-image`, the `src` prop must be an object (not a string).
+The `?vite-image` query parameter automatically generates all required image data. When using `?vite-image`, the `src` prop must be an object (not a string).
 
 ```typescript
 import Image from "@son426/vite-image/react";
@@ -91,9 +173,42 @@ function MyComponent() {
 }
 ```
 
-**Important**: When using `?vite-image`, the `src` prop must receive the imported object directly. String URLs are not supported for `?vite-image` imports.
+**Without query string (autoApply enabled):**
 
-The `?vite-image` query automatically generates:
+```typescript
+// vite.config.ts
+viteImage({
+  autoApply: {
+    extensions: [".jpg", ".png"],
+    include: ["src/assets/**"],
+  },
+});
+
+// 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.
+- 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:
 
 - `src`: Optimized image URL
 - `srcSet`: Responsive srcSet string
@@ -182,7 +297,7 @@ import heroImage from "@/assets/hero.jpg?vite-image";
 
 | Prop          | Type                                                      | Required | Default   | Description                                                             |
 | ------------- | --------------------------------------------------------- | -------- | --------- | ----------------------------------------------------------------------- |
-| `src`         | `ResponsiveImageData`                                     | Yes      | -         | Image data object from `?vite-image` query                              |
+| `src`         | `ResponsiveImageData`                                     | Yes      | -         | Image data object from `?vite-image` query or `autoApply`               |
 | `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)            |
@@ -195,14 +310,14 @@ import heroImage from "@/assets/hero.jpg?vite-image";
 
 **Notes**:
 
-- The `src` prop must be an object imported from `?vite-image` query. String URLs are not supported.
+- The `src` prop must be an object imported from `?vite-image` query or via `autoApply`. 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
 
-The type returned from `?vite-image` query:
+The type returned from `?vite-image` query or `autoApply`:
 
 ```typescript
 interface ResponsiveImageData {
@@ -220,15 +335,17 @@ 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. **`?vite-image` Query**: When you import an image with `?vite-image`, the plugin automatically generates:
+1. **Image Processing**: When you import an image with `?vite-image` query or via `autoApply`, the plugin automatically generates:
 
-   - Responsive srcSet (640px, 1024px, 1920px widths)
-   - Image metadata (1920px width)
+   - Responsive srcSet (default: 640px, 1024px, 1920px widths, customizable via `breakpoints`)
+   - Image metadata (largest breakpoint width)
    - Blur placeholder (20px width, blurred, low quality, inline base64 as `blurDataURL`)
 
 2. **Image Component**: The `<Image />` component handles:

package/dist/index.d.ts

@@ -1,6 +1,7 @@
-export { ImageProps, ResponsiveImageData } 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';
-import 'vite-imagetools';

package/dist/index.js

@@ -2,9 +2,64 @@ import 'react';
 import 'react-dom';
 import 'react/jsx-runtime';
 import { imagetools } from 'vite-imagetools';
+import { createFilter } from '@rollup/pluginutils';
 
 // src/react/Image.tsx
-function viteImage(options) {
+var DEFAULT_BREAKPOINTS = [640, 1024, 1920];
+function getFileExtension(id) {
+  const [basePath] = id.split("?");
+  const match = basePath.match(/\.([^.]+)$/);
+  return match ? `.${match[1]}` : null;
+}
+function matchesExtension(id, extensions) {
+  if (!extensions || extensions.length === 0) return false;
+  const ext = getFileExtension(id);
+  if (!ext) return false;
+  return extensions.includes(ext);
+}
+function generateSrcSetParams(breakpoints) {
+  return `w=${breakpoints.join(";")}&format=webp&as=srcset`;
+}
+function generateMetaParams(breakpoints) {
+  const maxWidth = Math.max(...breakpoints);
+  return `w=${maxWidth}&format=webp&as=meta`;
+}
+function generateImageCode(basePath, breakpoints) {
+  const srcSetParams = generateSrcSetParams(breakpoints);
+  const metaParams = generateMetaParams(breakpoints);
+  const lqipParams = "w=20&blur=2&quality=20&format=webp&inline";
+  return `
+    import meta from "${basePath}?${metaParams}";
+    import srcSet from "${basePath}?${srcSetParams}";
+    import blurDataURL from "${basePath}?${lqipParams}";
+    
+    export default {
+      src: meta.src,
+      width: meta.width,
+      height: meta.height,
+      srcSet: srcSet,
+      blurDataURL: blurDataURL
+    };
+  `;
+}
+function shouldAutoApply(id, autoApply, filter) {
+  if (!autoApply) return false;
+  if (!autoApply.extensions || autoApply.extensions.length === 0) {
+    return false;
+  }
+  if (!matchesExtension(id, autoApply.extensions)) {
+    return false;
+  }
+  if (filter && !filter(id)) {
+    return false;
+  }
+  return true;
+}
+function viteImage(config) {
+  const breakpoints = config?.breakpoints ?? DEFAULT_BREAKPOINTS;
+  const autoApply = config?.autoApply;
+  const imagetoolsOptions = config?.imagetools;
+  const filter = autoApply ? createFilter(autoApply.include, autoApply.exclude) : null;
   const viteImageMacro = {
     name: "vite-plugin-vite-image-macro",
     enforce: "pre",
@@ -12,27 +67,15 @@ function viteImage(options) {
       const [basePath, search] = id.split("?");
       const params = new URLSearchParams(search);
       if (params.has("vite-image")) {
-        const srcSetParams = "w=640;1024;1920&format=webp&as=srcset";
-        const metaParams = "w=1920&format=webp&as=meta";
-        const lqipParams = "w=20&blur=2&quality=20&format=webp&inline";
-        return `
-          import srcSet from "${basePath}?${srcSetParams}";
-          import meta from "${basePath}?${metaParams}";
-          import blurDataURL from "${basePath}?${lqipParams}";
-          
-          export default {
-            src: meta.src,
-            width: meta.width,
-            height: meta.height,
-            srcSet: srcSet,
-            blurDataURL: blurDataURL
-          };
-        `;
+        return generateImageCode(basePath, breakpoints);
+      }
+      if (shouldAutoApply(id, autoApply, filter)) {
+        return generateImageCode(basePath, breakpoints);
       }
       return null;
     }
   };
-  return [viteImageMacro, imagetools(options)];
+  return [viteImageMacro, imagetools(imagetoolsOptions)];
 }
 
 export { viteImage };

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,mCAAA,EACf,QAAQ,IAAI,UAAU,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAAA,CAAA;AAAA,MAUrD;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 blurDataURL from \"${basePath}?${lqipParams}\";\n          \n          export default {\n            src: meta.src,\n            width: meta.width,\n            height: meta.height,\n            srcSet: srcSet,\n            blurDataURL: blurDataURL\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":"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","file":"index.js","sourcesContent":["import type { PluginOption } from \"vite\";\nimport { imagetools } from \"vite-imagetools\";\nimport { createFilter } from \"@rollup/pluginutils\";\nimport type { ViteImageConfig, AutoApplyConfig } from \"../types\";\n\nexport type ViteImagePluginOptions = Parameters<typeof imagetools>[0];\n\n// Re-export types for convenience\nexport type { ViteImageConfig, AutoApplyConfig } from \"../types\";\n\n// Default configuration\nconst DEFAULT_BREAKPOINTS = [640, 1024, 1920];\n\n// Utility functions\nfunction getFileExtension(id: string): string | null {\n  // 쿼리 파라미터 제거\n  const [basePath] = id.split(\"?\");\n\n  // 확장자 추출\n  const match = basePath.match(/\\.([^.]+)$/);\n  return match ? `.${match[1]}` : null;\n}\n\nfunction matchesExtension(id: string, extensions: string[]): boolean {\n  if (!extensions || extensions.length === 0) return false;\n\n  const ext = getFileExtension(id);\n  if (!ext) return false;\n\n  return extensions.includes(ext);\n}\n\nfunction generateSrcSetParams(breakpoints: number[]): string {\n  return `w=${breakpoints.join(\";\")}&format=webp&as=srcset`;\n}\n\nfunction generateMetaParams(breakpoints: number[]): string {\n  const maxWidth = Math.max(...breakpoints);\n  return `w=${maxWidth}&format=webp&as=meta`;\n}\n\nfunction generateImageCode(basePath: string, breakpoints: number[]): string {\n  const srcSetParams = generateSrcSetParams(breakpoints);\n  const metaParams = generateMetaParams(breakpoints);\n  const lqipParams = \"w=20&blur=2&quality=20&format=webp&inline\";\n\n  // meta를 먼저 import하고, 그 다음에 srcSet과 blurDataURL을 import\n  // 이렇게 하면 초기화 순서 문제를 방지할 수 있음\n  return `\n    import meta from \"${basePath}?${metaParams}\";\n    import srcSet from \"${basePath}?${srcSetParams}\";\n    import blurDataURL from \"${basePath}?${lqipParams}\";\n    \n    export default {\n      src: meta.src,\n      width: meta.width,\n      height: meta.height,\n      srcSet: srcSet,\n      blurDataURL: blurDataURL\n    };\n  `;\n}\n\nfunction shouldAutoApply(\n  id: string,\n  autoApply: AutoApplyConfig | undefined,\n  filter: ((id: string) => boolean) | null\n): boolean {\n  // autoApply 설정이 없으면 false\n  if (!autoApply) return false;\n\n  // extensions가 없거나 빈 배열이면 false\n  if (!autoApply.extensions || autoApply.extensions.length === 0) {\n    return false;\n  }\n\n  // 확장자 매칭\n  if (!matchesExtension(id, autoApply.extensions)) {\n    return false;\n  }\n\n  // glob 패턴 매칭 (include/exclude)\n  if (filter && !filter(id)) {\n    return false;\n  }\n\n  return true;\n}\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 config - Configuration options for vite-image plugin\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 *       breakpoints: [640, 1024, 1920],\n *       autoApply: {\n *         extensions: ['.jpg', '.png'],\n *         include: ['src/**'],\n *         exclude: ['src/icons/**']\n *       }\n *     }),\n *   ],\n * });\n * ```\n */\nexport function viteImage(config?: ViteImageConfig): PluginOption[] {\n  // Config 병합\n  const breakpoints = config?.breakpoints ?? DEFAULT_BREAKPOINTS;\n  const autoApply = config?.autoApply;\n  const imagetoolsOptions = config?.imagetools;\n\n  // Glob 필터 생성 (autoApply가 있을 때만)\n  const filter = autoApply\n    ? createFilter(autoApply.include, autoApply.exclude)\n    : null;\n\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      // 1. 명시적 쿼리 체크 (기존 로직)\n      if (params.has(\"vite-image\")) {\n        return generateImageCode(basePath, breakpoints);\n      }\n\n      // 2. autoApply 체크\n      if (shouldAutoApply(id, autoApply, filter)) {\n        // ?vite-image 쿼리를 자동으로 추가하여 처리\n        return generateImageCode(basePath, breakpoints);\n      }\n\n      return null;\n    },\n  };\n\n  return [viteImageMacro, imagetools(imagetoolsOptions)];\n}\n"]}

package/dist/plugin/index.d.ts

@@ -1,12 +1,15 @@
 import { PluginOption } from 'vite';
 import { imagetools } from 'vite-imagetools';
+import { V as ViteImageConfig } from '../types-B08JIQxT.js';
+export { A as AutoApplyConfig } from '../types-B08JIQxT.js';
 
 type ViteImagePluginOptions = Parameters<typeof imagetools>[0];
+
 /**
  * Vite plugin for image optimization using vite-imagetools
  * This plugin handles ?vite-image queries and uses imagetools for image processing
  *
- * @param options - Options to pass to vite-imagetools
+ * @param config - Configuration options for vite-image plugin
  * @returns Array of Vite plugins (vite-image macro and imagetools)
  *
  * @example
@@ -17,11 +20,18 @@ type ViteImagePluginOptions = Parameters<typeof imagetools>[0];
  *
  * export default defineConfig({
  *   plugins: [
- *     ...viteImage(),
+ *     ...viteImage({
+ *       breakpoints: [640, 1024, 1920],
+ *       autoApply: {
+ *         extensions: ['.jpg', '.png'],
+ *         include: ['src/**'],
+ *         exclude: ['src/icons/**']
+ *       }
+ *     }),
  *   ],
  * });
  * ```
  */
-declare function viteImage(options?: ViteImagePluginOptions): PluginOption[];
+declare function viteImage(config?: ViteImageConfig): PluginOption[];
 
-export { type ViteImagePluginOptions, viteImage };
+export { ViteImageConfig, type ViteImagePluginOptions, viteImage };

package/dist/plugin/index.js

@@ -1,7 +1,62 @@
 import { imagetools } from 'vite-imagetools';
+import { createFilter } from '@rollup/pluginutils';
 
 // src/plugin/index.ts
-function viteImage(options) {
+var DEFAULT_BREAKPOINTS = [640, 1024, 1920];
+function getFileExtension(id) {
+  const [basePath] = id.split("?");
+  const match = basePath.match(/\.([^.]+)$/);
+  return match ? `.${match[1]}` : null;
+}
+function matchesExtension(id, extensions) {
+  if (!extensions || extensions.length === 0) return false;
+  const ext = getFileExtension(id);
+  if (!ext) return false;
+  return extensions.includes(ext);
+}
+function generateSrcSetParams(breakpoints) {
+  return `w=${breakpoints.join(";")}&format=webp&as=srcset`;
+}
+function generateMetaParams(breakpoints) {
+  const maxWidth = Math.max(...breakpoints);
+  return `w=${maxWidth}&format=webp&as=meta`;
+}
+function generateImageCode(basePath, breakpoints) {
+  const srcSetParams = generateSrcSetParams(breakpoints);
+  const metaParams = generateMetaParams(breakpoints);
+  const lqipParams = "w=20&blur=2&quality=20&format=webp&inline";
+  return `
+    import meta from "${basePath}?${metaParams}";
+    import srcSet from "${basePath}?${srcSetParams}";
+    import blurDataURL from "${basePath}?${lqipParams}";
+    
+    export default {
+      src: meta.src,
+      width: meta.width,
+      height: meta.height,
+      srcSet: srcSet,
+      blurDataURL: blurDataURL
+    };
+  `;
+}
+function shouldAutoApply(id, autoApply, filter) {
+  if (!autoApply) return false;
+  if (!autoApply.extensions || autoApply.extensions.length === 0) {
+    return false;
+  }
+  if (!matchesExtension(id, autoApply.extensions)) {
+    return false;
+  }
+  if (filter && !filter(id)) {
+    return false;
+  }
+  return true;
+}
+function viteImage(config) {
+  const breakpoints = config?.breakpoints ?? DEFAULT_BREAKPOINTS;
+  const autoApply = config?.autoApply;
+  const imagetoolsOptions = config?.imagetools;
+  const filter = autoApply ? createFilter(autoApply.include, autoApply.exclude) : null;
   const viteImageMacro = {
     name: "vite-plugin-vite-image-macro",
     enforce: "pre",
@@ -9,27 +64,15 @@ function viteImage(options) {
       const [basePath, search] = id.split("?");
       const params = new URLSearchParams(search);
       if (params.has("vite-image")) {
-        const srcSetParams = "w=640;1024;1920&format=webp&as=srcset";
-        const metaParams = "w=1920&format=webp&as=meta";
-        const lqipParams = "w=20&blur=2&quality=20&format=webp&inline";
-        return `
-          import srcSet from "${basePath}?${srcSetParams}";
-          import meta from "${basePath}?${metaParams}";
-          import blurDataURL from "${basePath}?${lqipParams}";
-          
-          export default {
-            src: meta.src,
-            width: meta.width,
-            height: meta.height,
-            srcSet: srcSet,
-            blurDataURL: blurDataURL
-          };
-        `;
+        return generateImageCode(basePath, breakpoints);
+      }
+      if (shouldAutoApply(id, autoApply, filter)) {
+        return generateImageCode(basePath, breakpoints);
       }
       return null;
     }
   };
-  return [viteImageMacro, imagetools(options)];
+  return [viteImageMacro, imagetools(imagetoolsOptions)];
 }
 
 export { viteImage };

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,mCAAA,EACf,QAAQ,IAAI,UAAU,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAAA,CAAA;AAAA,MAUrD;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 blurDataURL from \"${basePath}?${lqipParams}\";\n          \n          export default {\n            src: meta.src,\n            width: meta.width,\n            height: meta.height,\n            srcSet: srcSet,\n            blurDataURL: blurDataURL\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":"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","file":"index.js","sourcesContent":["import type { PluginOption } from \"vite\";\nimport { imagetools } from \"vite-imagetools\";\nimport { createFilter } from \"@rollup/pluginutils\";\nimport type { ViteImageConfig, AutoApplyConfig } from \"../types\";\n\nexport type ViteImagePluginOptions = Parameters<typeof imagetools>[0];\n\n// Re-export types for convenience\nexport type { ViteImageConfig, AutoApplyConfig } from \"../types\";\n\n// Default configuration\nconst DEFAULT_BREAKPOINTS = [640, 1024, 1920];\n\n// Utility functions\nfunction getFileExtension(id: string): string | null {\n  // 쿼리 파라미터 제거\n  const [basePath] = id.split(\"?\");\n\n  // 확장자 추출\n  const match = basePath.match(/\\.([^.]+)$/);\n  return match ? `.${match[1]}` : null;\n}\n\nfunction matchesExtension(id: string, extensions: string[]): boolean {\n  if (!extensions || extensions.length === 0) return false;\n\n  const ext = getFileExtension(id);\n  if (!ext) return false;\n\n  return extensions.includes(ext);\n}\n\nfunction generateSrcSetParams(breakpoints: number[]): string {\n  return `w=${breakpoints.join(\";\")}&format=webp&as=srcset`;\n}\n\nfunction generateMetaParams(breakpoints: number[]): string {\n  const maxWidth = Math.max(...breakpoints);\n  return `w=${maxWidth}&format=webp&as=meta`;\n}\n\nfunction generateImageCode(basePath: string, breakpoints: number[]): string {\n  const srcSetParams = generateSrcSetParams(breakpoints);\n  const metaParams = generateMetaParams(breakpoints);\n  const lqipParams = \"w=20&blur=2&quality=20&format=webp&inline\";\n\n  // meta를 먼저 import하고, 그 다음에 srcSet과 blurDataURL을 import\n  // 이렇게 하면 초기화 순서 문제를 방지할 수 있음\n  return `\n    import meta from \"${basePath}?${metaParams}\";\n    import srcSet from \"${basePath}?${srcSetParams}\";\n    import blurDataURL from \"${basePath}?${lqipParams}\";\n    \n    export default {\n      src: meta.src,\n      width: meta.width,\n      height: meta.height,\n      srcSet: srcSet,\n      blurDataURL: blurDataURL\n    };\n  `;\n}\n\nfunction shouldAutoApply(\n  id: string,\n  autoApply: AutoApplyConfig | undefined,\n  filter: ((id: string) => boolean) | null\n): boolean {\n  // autoApply 설정이 없으면 false\n  if (!autoApply) return false;\n\n  // extensions가 없거나 빈 배열이면 false\n  if (!autoApply.extensions || autoApply.extensions.length === 0) {\n    return false;\n  }\n\n  // 확장자 매칭\n  if (!matchesExtension(id, autoApply.extensions)) {\n    return false;\n  }\n\n  // glob 패턴 매칭 (include/exclude)\n  if (filter && !filter(id)) {\n    return false;\n  }\n\n  return true;\n}\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 config - Configuration options for vite-image plugin\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 *       breakpoints: [640, 1024, 1920],\n *       autoApply: {\n *         extensions: ['.jpg', '.png'],\n *         include: ['src/**'],\n *         exclude: ['src/icons/**']\n *       }\n *     }),\n *   ],\n * });\n * ```\n */\nexport function viteImage(config?: ViteImageConfig): PluginOption[] {\n  // Config 병합\n  const breakpoints = config?.breakpoints ?? DEFAULT_BREAKPOINTS;\n  const autoApply = config?.autoApply;\n  const imagetoolsOptions = config?.imagetools;\n\n  // Glob 필터 생성 (autoApply가 있을 때만)\n  const filter = autoApply\n    ? createFilter(autoApply.include, autoApply.exclude)\n    : null;\n\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      // 1. 명시적 쿼리 체크 (기존 로직)\n      if (params.has(\"vite-image\")) {\n        return generateImageCode(basePath, breakpoints);\n      }\n\n      // 2. autoApply 체크\n      if (shouldAutoApply(id, autoApply, filter)) {\n        // ?vite-image 쿼리를 자동으로 추가하여 처리\n        return generateImageCode(basePath, breakpoints);\n      }\n\n      return null;\n    },\n  };\n\n  return [viteImageMacro, imagetools(imagetoolsOptions)];\n}\n"]}

package/dist/react/index.d.ts

@@ -1,16 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ImgHTMLAttributes } from 'react';
-
-/**
- * Type definitions for vite-image
- */
-interface ResponsiveImageData {
-    src: string;
-    width: number;
-    height: number;
-    srcSet?: string;
-    blurDataURL?: string;
-}
+import { R as ResponsiveImageData } from '../types-B08JIQxT.js';
+import 'vite-imagetools';
 
 type PlaceholderValue = "empty" | "blur" | `data:image/${string}`;
 interface BaseImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "srcSet" | "width" | "height"> {
@@ -37,4 +28,4 @@ loading, // loading prop (priority보다 낮은 우선순위)
 priority, // 기본값: false (Next.js Image 호환)
 className, style, onLoad, onError, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
 
-export { type ImageProps, type ResponsiveImageData, Image as default };
+export { type ImageProps, ResponsiveImageData, Image as default };

package/dist/types-B08JIQxT.d.ts

@@ -0,0 +1,25 @@
+import * as vite_imagetools from 'vite-imagetools';
+
+/**
+ * Type definitions for vite-image
+ */
+interface ResponsiveImageData {
+    src: string;
+    width: number;
+    height: number;
+    srcSet?: string;
+    blurDataURL?: string;
+}
+interface AutoApplyConfig {
+    extensions?: string[];
+    include?: string[];
+    exclude?: string[];
+}
+type ViteImagePluginOptions = Parameters<typeof vite_imagetools.imagetools>[0];
+interface ViteImageConfig {
+    breakpoints?: number[];
+    autoApply?: AutoApplyConfig;
+    imagetools?: ViteImagePluginOptions;
+}
+
+export type { AutoApplyConfig as A, ResponsiveImageData as R, ViteImageConfig as V };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@son426/vite-image",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "A Vite plugin and React component for optimized images with LQIP support using vite-imagetools",
   "type": "module",
   "main": "./dist/index.js",
@@ -52,6 +52,7 @@
   },
   "homepage": "https://github.com/son426/vite-image#readme",
   "dependencies": {
+    "@rollup/pluginutils": "^5.3.0",
     "vite-imagetools": "^9.0.2"
   },
   "peerDependencies": {
@@ -60,6 +61,7 @@
     "vite": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
+    "@rollup/pluginutils": "^5.3.0",
     "@types/node": "^20.0.0",
     "@types/react": "^18.0.0 || ^19.0.0",
     "@types/react-dom": "^19.2.3",