@son426/vite-image 0.1.2 → 0.1.4

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
+BSimply 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,12 @@ 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)
 
 ## Usage
 
@@ -48,13 +75,11 @@ export default defineConfig({
 });
 ```
 
-**Important**: Use the spread operator (`...viteImage()`) to properly register both plugins.
-
 ### 2. Use the Component
 
-#### Method 1: Using `?vite-image` query (Recommended)
+#### Using `?vite-image` query (Required)
 
-The simplest way is to use the `?vite-image` query parameter, which automatically generates all required image data:
+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).
 
 ```typescript
 import Image from "@son426/vite-image/react";
@@ -63,7 +88,7 @@ import bgImage from "@/assets/image.webp?vite-image";
 function MyComponent() {
   return (
     <Image
-      imgData={bgImage}
+      src={bgImage}
       fill={false}
       sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1920px"
       alt="Description"
@@ -72,6 +97,8 @@ 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.
+
 The `?vite-image` query automatically generates:
 
 - `src`: Optimized image URL
@@ -79,40 +106,13 @@ The `?vite-image` query automatically generates:
 - `lqipSrc`: Low Quality Image Placeholder (base64 inline)
 - `width` and `height`: Image dimensions
 
-#### Method 2: Using individual props
-
-You can also import and use individual image data:
-
-```typescript
-import Image from "@son426/vite-image/react";
-
-import imageSrcSet from "@/assets/image.webp?w=640;1024;1920&format=webp&as=srcset";
-import imageMeta from "@/assets/image.webp?w=1920&format=webp&as=meta";
-import imageLqipSrc from "@/assets/image.webp?w=20&blur=2&quality=20&format=webp&inline";
-
-function MyComponent() {
-  return (
-    <Image
-      src={imageMeta.src}
-      srcSet={imageSrcSet}
-      lqipSrc={imageLqipSrc}
-      width={imageMeta.width}
-      height={imageMeta.height}
-      fill={false}
-      sizes="(max-width: 640px) 100vw, (max-width: 1024px) 100vw, 1920px"
-      alt="Description"
-    />
-  );
-}
-```
-
 ### Fill Mode
 
 For images that fill their container (similar to Next.js Image):
 
 ```typescript
 <div style={{ position: "relative", width: "100%", height: "400px" }}>
-  <Image imgData={bgImage} fill={true} sizes="100vw" alt="Description" />
+  <Image src={bgImage} fill={true} sizes="100vw" alt="Description" />
 </div>
 ```
 
@@ -120,21 +120,16 @@ For images that fill their container (similar to Next.js Image):
 
 ### Image Props
 
-| Prop        | Type                  | Required | Description                                 |
-| ----------- | --------------------- | -------- | ------------------------------------------- |
-| `imgData`   | `ResponsiveImageData` | No\*     | Image data object from `?vite-image` query  |
-| `src`       | `string`              | Yes\*    | Image source URL                            |
-| `srcSet`    | `string`              | No       | Responsive image srcSet                     |
-| `lqipSrc`   | `string`              | No       | Low Quality Image Placeholder source        |
-| `fill`      | `boolean`             | No       | Fill container mode (default: `false`)      |
-| `width`     | `number`              | Yes\*    | Image width (required when `fill={false}`)  |
-| `height`    | `number`              | Yes\*    | Image height (required when `fill={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         |
-
-\* Either `imgData` or `src` (with `width` and `height` when `fill={false}`) is required.
+| 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.
 
 ### ResponsiveImageData
 

package/dist/react/index.d.ts

@@ -12,14 +12,9 @@ interface ResponsiveImageData {
     lqipSrc?: string;
 }
 
-interface BaseImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "width" | "height" | "src" | "srcSet"> {
+interface BaseImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "src" | "srcSet" | "width" | "height"> {
+    src: ResponsiveImageData;
     sizes?: string;
-    src?: string;
-    srcSet?: string;
-    lqipSrc?: string;
-    width?: number;
-    height?: number;
-    imgData?: ResponsiveImageData;
 }
 interface FillImageProps extends BaseImageProps {
     fill: true;
@@ -28,6 +23,7 @@ interface StandardImageProps extends BaseImageProps {
     fill?: false | undefined;
 }
 type ImageProps = FillImageProps | StandardImageProps;
-declare function Image({ imgData, src, srcSet, lqipSrc, width, height, fill, sizes, className, style, ...props }: ImageProps): react_jsx_runtime.JSX.Element | null;
+declare function Image({ src, // 이제 이 src는 객체입니다.
+fill, sizes, className, style, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
 
 export { type ImageProps, type ResponsiveImageData, Image as default };

package/dist/react/index.js

@@ -3,12 +3,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/react/Image.tsx
 function Image({
-  imgData,
   src,
-  srcSet,
-  lqipSrc,
-  width,
-  height,
+  // 이제 이 src는 객체입니다.
   fill = false,
   sizes = "100vw",
   className = "",
@@ -16,15 +12,13 @@ function Image({
   ...props
 }) {
   const [isImageLoaded, setIsImageLoaded] = useState(false);
-  const currentSrc = imgData?.src || src;
-  const currentSrcSet = imgData?.srcSet || srcSet;
-  const currentLqip = imgData?.lqipSrc || lqipSrc;
-  const currentWidth = imgData?.width || width;
-  const currentHeight = imgData?.height || height;
-  if (!currentSrc) {
-    console.warn("Image: 'src' or 'imgData' is required.");
-    return null;
-  }
+  const {
+    src: currentSrc,
+    srcSet: currentSrcSet,
+    lqipSrc: currentLqip,
+    width: currentWidth,
+    height: currentHeight
+  } = src;
   const containerStyle = fill ? {
     position: "absolute",
     top: 0,
@@ -55,14 +49,10 @@ function Image({
   const lqipStyle = {
     ...imgStyle,
     filter: "blur(20px)",
-    // blur 효과 강화 (선택사항)
     transform: "scale(1.1)",
-    // blur 경계선 숨기기
     transition: "opacity 500ms ease-out",
-    // 부드러운 전환
     opacity: isImageLoaded ? 0 : 1,
     zIndex: 1
-    // 로딩 중에는 위에 표시
   };
   return /* @__PURE__ */ jsxs("div", { className, style: mergedContainerStyle, children: [
     /* @__PURE__ */ jsx(

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 type { ResponsiveImageData } from \"../types\";\n\n// ?vite-image import 결과 타입\ninterface BaseImageProps\n  extends Omit<\n    ImgHTMLAttributes<HTMLImageElement>,\n    \"width\" | \"height\" | \"src\" | \"srcSet\"\n  > {\n  sizes?: string;\n  src?: string;\n  srcSet?: string;\n  lqipSrc?: string;\n  width?: number;\n  height?: number;\n  imgData?: ResponsiveImageData;\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  imgData,\n  src,\n  srcSet,\n  lqipSrc,\n  width,\n  height,\n  fill = false,\n  sizes = \"100vw\",\n  className = \"\",\n  style,\n  ...props\n}: ImageProps) {\n  const [isImageLoaded, setIsImageLoaded] = useState(false);\n\n  // 1. 데이터 병합: imgData가 있으면 그걸 쓰고, 없으면 개별 prop 사용\n  const currentSrc = imgData?.src || src;\n  const currentSrcSet = imgData?.srcSet || srcSet;\n  const currentLqip = imgData?.lqipSrc || lqipSrc;\n  const currentWidth = imgData?.width || width;\n  const currentHeight = imgData?.height || height;\n\n  if (!currentSrc) {\n    console.warn(\"Image: 'src' or 'imgData' is required.\");\n    return null;\n  }\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)\", // blur 효과 강화 (선택사항)\n    transform: \"scale(1.1)\", // blur 경계선 숨기기\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":";;;;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"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@son426/vite-image",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "A Vite plugin and React component for optimized images with LQIP support using vite-imagetools",
   "type": "module",
   "main": "./dist/index.js",
@@ -47,10 +47,12 @@
     "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"
+    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",
@@ -58,8 +60,7 @@
     "react": "^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"

package/types.d.ts

@@ -5,14 +5,7 @@
  * These types extend the default vite-imagetools types
  */
 
-// ?vite-image import 결과 타입
-interface ResponsiveImageData {
-  src: string;
-  width: number;
-  height: number;
-  srcSet?: string;
-  lqipSrc?: string;
-}
+import type { ResponsiveImageData } from "./types";
 
 // vite-image 쿼리 파라미터 타입
 declare module "*?vite-image" {
@@ -43,14 +36,3 @@ declare module "*?w=*&blur=*&quality=*&format=*&inline" {
   const src: string;
   export default src;
 }
-
-// 일반 imagetools 확장
-declare module "*&imagetools" {
-  type ImageToolsOutput =
-    | string // 기본 출력
-    | { src: string; width: number; height: number } // meta
-    | string; // srcset
-
-  const out: ImageToolsOutput;
-  export default out;
-}