@son426/vite-image 0.1.6 → 0.1.8

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
@@ -70,17 +79,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 +148,25 @@ 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):**
+
+```typescript
+// vite.config.ts
+viteImage({
+  autoApply: {
+    extensions: [".jpg", ".png"],
+    include: ["src/assets/**"],
+  },
+});
+
+// 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.
 
-The `?vite-image` query automatically generates:
+The `?vite-image` query (or autoApply) automatically generates:
 
 - `src`: Optimized image URL
 - `srcSet`: Responsive srcSet string
@@ -182,7 +255,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 +268,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 {
@@ -225,10 +298,10 @@ import type { ImageProps, ResponsiveImageData } from "@son426/vite-image/react";
 
 ## 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 { ImageProps } from './react/index.js';
+export { A as AutoApplyConfig, R as ResponsiveImageData, V as ViteImageConfig } from './types-B08JIQxT.js';
 export { ViteImagePluginOptions, viteImage } from './plugin/index.js';
 import 'react/jsx-runtime';
 import 'react';
-import 'vite';
 import 'vite-imagetools';
+import 'vite';

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"> {
@@ -18,6 +9,7 @@ interface BaseImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src"
     sizes?: string;
     placeholder?: PlaceholderValue;
     blurDataURL?: string;
+    loading?: "lazy" | "eager";
     priority?: boolean;
     onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
     onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
@@ -32,7 +24,8 @@ type ImageProps = FillImageProps | StandardImageProps;
 declare function Image({ src, // 이제 이 src는 객체입니다.
 fill, sizes, placeholder, // 기본값: empty (Next.js Image 호환)
 blurDataURL: customBlurDataURL, // 사용자가 직접 제공한 blurDataURL (우선순위 높음)
+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/react/index.js

@@ -35,6 +35,8 @@ function Image({
   // 기본값: empty (Next.js Image 호환)
   blurDataURL: customBlurDataURL,
   // 사용자가 직접 제공한 blurDataURL (우선순위 높음)
+  loading,
+  // loading prop (priority보다 낮은 우선순위)
   priority = false,
   // 기본값: false (Next.js Image 호환)
   className = "",
@@ -53,6 +55,7 @@ function Image({
     height: currentHeight
   } = src;
   const blurDataURL = customBlurDataURL ?? srcBlurDataURL;
+  const loadingAttr = priority ? "eager" : loading ?? "lazy";
   const computedSizes = sizes ?? (fill ? "100vw" : generateSizesFromSrcSet(currentSrcSet));
   if (priority && currentSrc) {
     preload(currentSrc, {
@@ -125,7 +128,7 @@ function Image({
         sizes: computedSizes,
         width: fill ? void 0 : currentWidth,
         height: fill ? void 0 : currentHeight,
-        loading: priority ? "eager" : "lazy",
+        loading: loadingAttr,
         fetchPriority: priority ? "high" : void 0,
         onLoad: (e) => {
           setIsImageLoaded(true);

package/dist/react/index.js.map

@@ -1 +1 @@
-{"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\" | `data:image/${string}`;\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  blurDataURL?: string; // Optional: 커스텀 blur placeholder (src.blurDataURL보다 우선)\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  blurDataURL: customBlurDataURL, // 사용자가 직접 제공한 blurDataURL (우선순위 높음)\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    blurDataURL: srcBlurDataURL, // 번들러가 생성한 blurDataURL\n    width: currentWidth,\n    height: currentHeight,\n  } = src;\n\n  // blurDataURL 우선순위: prop으로 제공된 것 > src 객체의 것\n  const blurDataURL = customBlurDataURL ?? srcBlurDataURL;\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      return blurDataURL;\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"]}
+{"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\" | `data:image/${string}`;\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  blurDataURL?: string; // Optional: 커스텀 blur placeholder (src.blurDataURL보다 우선)\n  loading?: \"lazy\" | \"eager\"; // Next.js 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  blurDataURL: customBlurDataURL, // 사용자가 직접 제공한 blurDataURL (우선순위 높음)\n  loading, // loading prop (priority보다 낮은 우선순위)\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    blurDataURL: srcBlurDataURL, // 번들러가 생성한 blurDataURL\n    width: currentWidth,\n    height: currentHeight,\n  } = src;\n\n  // blurDataURL 우선순위: prop으로 제공된 것 > src 객체의 것\n  const blurDataURL = customBlurDataURL ?? srcBlurDataURL;\n\n  // 2. loading 속성 결정: 우선순위 priority > loading prop > 기본값('lazy')\n  const loadingAttr = priority ? \"eager\" : loading ?? \"lazy\";\n\n  // 3. sizes 자동 계산: 제공되지 않으면 srcSet 기반으로 자동 생성\n  const computedSizes =\n    sizes ?? (fill ? \"100vw\" : generateSizesFromSrcSet(currentSrcSet));\n\n  // 4. Priority 처리: priority={true}일 때 preload\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  // 5. placeholder 처리 (Next.js Image 호환)\n  const getPlaceholderSrc = (): string | undefined => {\n    if (placeholder === \"empty\") {\n      return undefined;\n    }\n    if (placeholder === \"blur\") {\n      return blurDataURL;\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={loadingAttr}\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/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.6",
+  "version": "0.1.8",
   "description": "A Vite plugin and React component for optimized images with LQIP support using vite-imagetools",
   "type": "module",
   "main": "./dist/index.js",
@@ -45,9 +45,14 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": ""
+    "url": "https://github.com/son426/vite-image.git"
   },
+  "bugs": {
+    "url": "https://github.com/son426/vite-image/issues"
+  },
+  "homepage": "https://github.com/son426/vite-image#readme",
   "dependencies": {
+    "@rollup/pluginutils": "^5.3.0",
     "vite-imagetools": "^9.0.2"
   },
   "peerDependencies": {
@@ -56,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",