@son426/vite-image 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,128 @@
+# @son426/vite-image
+
+A Vite plugin and React component for optimized images with LQIP (Low Quality Image Placeholder) support using `vite-imagetools`.
+
+## Features
+
+- 🖼️ **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
+- 🚀 **Zero Config**: Works out of the box with sensible defaults
+
+## Installation
+
+```bash
+pnpm add @son426/vite-image
+# or
+npm install @son426/vite-image
+# or
+yarn add @son426/vite-image
+```
+
+## Peer Dependencies
+
+Make sure you have these installed:
+
+```bash
+pnpm add react vite vite-imagetools
+```
+
+## Usage
+
+### 1. Setup Vite Plugin
+
+Add the plugin to your `vite.config.ts`:
+
+```typescript
+import { defineConfig } from "vite";
+import { customImage } from "@son426/vite-image/plugin";
+
+export default defineConfig({
+  plugins: [
+    customImage({
+      // Optional: vite-imagetools options
+      defaultDirectives: (url) => {
+        if (url.searchParams.has("webp")) {
+          return new URLSearchParams("format=webp");
+        }
+        return new URLSearchParams();
+      },
+    }),
+  ],
+});
+```
+
+### 2. Use the Component
+
+```typescript
+import { CustomImage } from "@son426/vite-image/react";
+
+// Import optimized images
+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 (
+    <CustomImage
+      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" }}>
+  <CustomImage
+    src={imageMeta.src}
+    srcSet={imageSrcSet}
+    lqipSrc={imageLqipSrc}
+    fill={true}
+    sizes="100vw"
+    alt="Description"
+  />
+</div>
+```
+
+## API
+
+### CustomImage Props
+
+| Prop      | Type                    | Required | Description                                    |
+| --------- | ----------------------- | -------- | ---------------------------------------------- |
+| `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                         |
+| `...props`| `ImgHTMLAttributes`     | No       | All standard img element attributes            |
+
+\* Required when `fill={false}`
+
+## TypeScript
+
+Type definitions are included. The package also extends vite-imagetools types for better TypeScript support:
+
+```typescript
+import type { CustomImageProps } from "@son426/vite-image/react";
+```
+
+## License
+
+MIT
+

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { CustomImage, CustomImageProps } from './react/index.js';
+export { CustomImagePluginOptions, customImage } from './plugin/index.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'vite';
+import 'vite-imagetools';

package/dist/index.js

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { imagetools } from 'vite-imagetools';
+
+// src/react/CustomImage.tsx
+function CustomImage({
+  src,
+  srcSet,
+  lqipSrc,
+  width,
+  height,
+  fill = false,
+  sizes = "100vw",
+  className = "",
+  ...props
+}) {
+  const [isImageLoaded, setIsImageLoaded] = useState(false);
+  const containerStyle = fill ? {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: "100%",
+    height: "100%",
+    overflow: "hidden"
+  } : {
+    position: "relative",
+    width: "100%",
+    overflow: "hidden",
+    ...!fill && width && height ? { aspectRatio: `${width} / ${height}` } : {}
+  };
+  const imageStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  };
+  const lqipStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    transition: "opacity 300ms ease-in-out",
+    transform: "scale(1.1)",
+    opacity: isImageLoaded ? 0 : 1
+  };
+  return /* @__PURE__ */ jsxs("div", { className: className || void 0, style: containerStyle, children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        ...props,
+        src,
+        srcSet,
+        sizes,
+        onLoad: () => setIsImageLoaded(true),
+        style: imageStyle
+      }
+    ),
+    lqipSrc && /* @__PURE__ */ jsx("img", { src: lqipSrc, alt: "", "aria-hidden": "true", style: lqipStyle })
+  ] });
+}
+function customImage(options) {
+  return imagetools(options);
+}
+
+export { CustomImage, customImage };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react/CustomImage.tsx","../src/plugin/index.ts"],"names":[],"mappings":";;;;;AAuBO,SAAS,WAAA,CAAY;AAAA,EAC1B,GAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,KAAA,GAAQ,OAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,EAAqB;AACnB,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AAGxD,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,IACV,GAAI,CAAC,IAAA,IAAQ,KAAA,IAAS,MAAA,GAClB,EAAE,WAAA,EAAa,CAAA,EAAG,KAAK,CAAA,GAAA,EAAM,MAAM,CAAA,CAAA,KACnC;AAAC,GACP;AAGJ,EAAA,MAAM,UAAA,GAA4B;AAAA,IAChC,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,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,OAAA;AAAA,IACX,UAAA,EAAY,2BAAA;AAAA,IACZ,SAAA,EAAW,YAAA;AAAA,IACX,OAAA,EAAS,gBAAgB,CAAA,GAAI;AAAA,GAC/B;AAEA,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,SAAA,IAAa,MAAA,EAAW,OAAO,cAAA,EAC7C,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,GAAA;AAAA,QACA,MAAA;AAAA,QACA,KAAA;AAAA,QACA,MAAA,EAAQ,MAAM,gBAAA,CAAiB,IAAI,CAAA;AAAA,QACnC,KAAA,EAAO;AAAA;AAAA,KACT;AAAA,IACC,OAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,OAAA,EAAS,KAAI,EAAA,EAAG,aAAA,EAAY,MAAA,EAAO,KAAA,EAAO,SAAA,EAAW;AAAA,GAAA,EAEnE,CAAA;AAEJ;ACpEO,SAAS,YACd,OAAA,EACQ;AACR,EAAA,OAAO,WAAW,OAAO,CAAA;AAC3B","file":"index.js","sourcesContent":["import { useState, type ImgHTMLAttributes, type CSSProperties } from \"react\";\n\ninterface BaseImageProps\n  extends Omit<ImgHTMLAttributes<HTMLImageElement>, \"width\" | \"height\"> {\n  src: string;\n  srcSet?: string;\n  lqipSrc?: string;\n}\n\ninterface FillImageProps extends BaseImageProps {\n  fill: true;\n  width?: never;\n  height?: never;\n}\n\ninterface StandardImageProps extends BaseImageProps {\n  fill: false | undefined;\n  width: number;\n  height: number;\n}\n\nexport type CustomImageProps = FillImageProps | StandardImageProps;\n\nexport function CustomImage({\n  src,\n  srcSet,\n  lqipSrc,\n  width,\n  height,\n  fill = false,\n  sizes = \"100vw\",\n  className = \"\",\n  ...props\n}: CustomImageProps) {\n  const [isImageLoaded, setIsImageLoaded] = useState(false);\n\n  // 컨테이너 스타일\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        ...(!fill && width && height\n          ? { aspectRatio: `${width} / ${height}` }\n          : {}),\n      };\n\n  // 실제 이미지 스타일\n  const imageStyle: 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  // LQIP 이미지 스타일\n  const lqipStyle: 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    transition: \"opacity 300ms ease-in-out\",\n    transform: \"scale(1.1)\",\n    opacity: isImageLoaded ? 0 : 1,\n  };\n\n  return (\n    <div className={className || undefined} style={containerStyle}>\n      <img\n        {...props}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        onLoad={() => setIsImageLoaded(true)}\n        style={imageStyle}\n      />\n      {lqipSrc && (\n        <img src={lqipSrc} alt=\"\" aria-hidden=\"true\" style={lqipStyle} />\n      )}\n    </div>\n  );\n}\n\n","import type { Plugin } from \"vite\";\nimport { imagetools } from \"vite-imagetools\";\n\nexport type CustomImagePluginOptions = Parameters<typeof imagetools>[0];\n\n/**\n * Vite plugin for image optimization using vite-imagetools\n * \n * @param options - Options to pass to vite-imagetools\n * @returns Vite plugin\n * \n * @example\n * ```ts\n * // vite.config.ts\n * import { defineConfig } from 'vite';\n * import { customImage } from '@son426/vite-image/plugin';\n * \n * export default defineConfig({\n *   plugins: [\n *     customImage({\n *       defaultDirectives: (url) => {\n *         if (url.searchParams.has('webp')) {\n *           return new URLSearchParams('format=webp');\n *         }\n *         return new URLSearchParams();\n *       },\n *     }),\n *   ],\n * });\n * ```\n */\nexport function customImage(\n  options?: CustomImagePluginOptions\n): Plugin {\n  return imagetools(options);\n}\n\n"]}

package/dist/plugin/index.d.ts

@@ -0,0 +1,33 @@
+import { Plugin } from 'vite';
+import { imagetools } from 'vite-imagetools';
+
+type CustomImagePluginOptions = Parameters<typeof imagetools>[0];
+/**
+ * Vite plugin for image optimization using vite-imagetools
+ *
+ * @param options - Options to pass to vite-imagetools
+ * @returns Vite plugin
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { defineConfig } from 'vite';
+ * import { customImage } from '@son426/vite-image/plugin';
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     customImage({
+ *       defaultDirectives: (url) => {
+ *         if (url.searchParams.has('webp')) {
+ *           return new URLSearchParams('format=webp');
+ *         }
+ *         return new URLSearchParams();
+ *       },
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+declare function customImage(options?: CustomImagePluginOptions): Plugin;
+
+export { type CustomImagePluginOptions, customImage };

package/dist/plugin/index.js

@@ -0,0 +1,10 @@
+import { imagetools } from 'vite-imagetools';
+
+// src/plugin/index.ts
+function customImage(options) {
+  return imagetools(options);
+}
+
+export { customImage };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/plugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/plugin/index.ts"],"names":[],"mappings":";;;AA+BO,SAAS,YACd,OAAA,EACQ;AACR,EAAA,OAAO,WAAW,OAAO,CAAA;AAC3B","file":"index.js","sourcesContent":["import type { Plugin } from \"vite\";\nimport { imagetools } from \"vite-imagetools\";\n\nexport type CustomImagePluginOptions = Parameters<typeof imagetools>[0];\n\n/**\n * Vite plugin for image optimization using vite-imagetools\n * \n * @param options - Options to pass to vite-imagetools\n * @returns Vite plugin\n * \n * @example\n * ```ts\n * // vite.config.ts\n * import { defineConfig } from 'vite';\n * import { customImage } from '@son426/vite-image/plugin';\n * \n * export default defineConfig({\n *   plugins: [\n *     customImage({\n *       defaultDirectives: (url) => {\n *         if (url.searchParams.has('webp')) {\n *           return new URLSearchParams('format=webp');\n *         }\n *         return new URLSearchParams();\n *       },\n *     }),\n *   ],\n * });\n * ```\n */\nexport function customImage(\n  options?: CustomImagePluginOptions\n): Plugin {\n  return imagetools(options);\n}\n\n"]}

package/dist/react/index.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ImgHTMLAttributes } from 'react';
+
+interface BaseImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, "width" | "height"> {
+    src: string;
+    srcSet?: string;
+    lqipSrc?: string;
+}
+interface FillImageProps extends BaseImageProps {
+    fill: true;
+    width?: never;
+    height?: never;
+}
+interface StandardImageProps extends BaseImageProps {
+    fill: false | undefined;
+    width: number;
+    height: number;
+}
+type CustomImageProps = FillImageProps | StandardImageProps;
+declare function CustomImage({ src, srcSet, lqipSrc, width, height, fill, sizes, className, ...props }: CustomImageProps): react_jsx_runtime.JSX.Element;
+
+export { CustomImage, type CustomImageProps };

package/dist/react/index.js

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/react/CustomImage.tsx
+function CustomImage({
+  src,
+  srcSet,
+  lqipSrc,
+  width,
+  height,
+  fill = false,
+  sizes = "100vw",
+  className = "",
+  ...props
+}) {
+  const [isImageLoaded, setIsImageLoaded] = useState(false);
+  const containerStyle = fill ? {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: "100%",
+    height: "100%",
+    overflow: "hidden"
+  } : {
+    position: "relative",
+    width: "100%",
+    overflow: "hidden",
+    ...!fill && width && height ? { aspectRatio: `${width} / ${height}` } : {}
+  };
+  const imageStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover"
+  };
+  const lqipStyle = {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    transition: "opacity 300ms ease-in-out",
+    transform: "scale(1.1)",
+    opacity: isImageLoaded ? 0 : 1
+  };
+  return /* @__PURE__ */ jsxs("div", { className: className || void 0, style: containerStyle, children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        ...props,
+        src,
+        srcSet,
+        sizes,
+        onLoad: () => setIsImageLoaded(true),
+        style: imageStyle
+      }
+    ),
+    lqipSrc && /* @__PURE__ */ jsx("img", { src: lqipSrc, alt: "", "aria-hidden": "true", style: lqipStyle })
+  ] });
+}
+
+export { CustomImage };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/CustomImage.tsx"],"names":[],"mappings":";;;;AAuBO,SAAS,WAAA,CAAY;AAAA,EAC1B,GAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,KAAA,GAAQ,OAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,EAAqB;AACnB,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAI,SAAS,KAAK,CAAA;AAGxD,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,IACV,GAAI,CAAC,IAAA,IAAQ,KAAA,IAAS,MAAA,GAClB,EAAE,WAAA,EAAa,CAAA,EAAG,KAAK,CAAA,GAAA,EAAM,MAAM,CAAA,CAAA,KACnC;AAAC,GACP;AAGJ,EAAA,MAAM,UAAA,GAA4B;AAAA,IAChC,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,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,OAAA;AAAA,IACX,UAAA,EAAY,2BAAA;AAAA,IACZ,SAAA,EAAW,YAAA;AAAA,IACX,OAAA,EAAS,gBAAgB,CAAA,GAAI;AAAA,GAC/B;AAEA,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,SAAA,IAAa,MAAA,EAAW,OAAO,cAAA,EAC7C,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,KAAA;AAAA,QACJ,GAAA;AAAA,QACA,MAAA;AAAA,QACA,KAAA;AAAA,QACA,MAAA,EAAQ,MAAM,gBAAA,CAAiB,IAAI,CAAA;AAAA,QACnC,KAAA,EAAO;AAAA;AAAA,KACT;AAAA,IACC,OAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,OAAA,EAAS,KAAI,EAAA,EAAG,aAAA,EAAY,MAAA,EAAO,KAAA,EAAO,SAAA,EAAW;AAAA,GAAA,EAEnE,CAAA;AAEJ","file":"index.js","sourcesContent":["import { useState, type ImgHTMLAttributes, type CSSProperties } from \"react\";\n\ninterface BaseImageProps\n  extends Omit<ImgHTMLAttributes<HTMLImageElement>, \"width\" | \"height\"> {\n  src: string;\n  srcSet?: string;\n  lqipSrc?: string;\n}\n\ninterface FillImageProps extends BaseImageProps {\n  fill: true;\n  width?: never;\n  height?: never;\n}\n\ninterface StandardImageProps extends BaseImageProps {\n  fill: false | undefined;\n  width: number;\n  height: number;\n}\n\nexport type CustomImageProps = FillImageProps | StandardImageProps;\n\nexport function CustomImage({\n  src,\n  srcSet,\n  lqipSrc,\n  width,\n  height,\n  fill = false,\n  sizes = \"100vw\",\n  className = \"\",\n  ...props\n}: CustomImageProps) {\n  const [isImageLoaded, setIsImageLoaded] = useState(false);\n\n  // 컨테이너 스타일\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        ...(!fill && width && height\n          ? { aspectRatio: `${width} / ${height}` }\n          : {}),\n      };\n\n  // 실제 이미지 스타일\n  const imageStyle: 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  // LQIP 이미지 스타일\n  const lqipStyle: 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    transition: \"opacity 300ms ease-in-out\",\n    transform: \"scale(1.1)\",\n    opacity: isImageLoaded ? 0 : 1,\n  };\n\n  return (\n    <div className={className || undefined} style={containerStyle}>\n      <img\n        {...props}\n        src={src}\n        srcSet={srcSet}\n        sizes={sizes}\n        onLoad={() => setIsImageLoaded(true)}\n        style={imageStyle}\n      />\n      {lqipSrc && (\n        <img src={lqipSrc} alt=\"\" aria-hidden=\"true\" style={lqipStyle} />\n      )}\n    </div>\n  );\n}\n\n"]}

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@son426/vite-image",
+  "version": "0.1.0",
+  "description": "A Vite plugin and React component for optimized images with LQIP support using vite-imagetools",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js"
+    },
+    "./plugin": {
+      "types": "./dist/plugin/index.d.ts",
+      "import": "./dist/plugin/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "pnpm run build"
+  },
+  "keywords": [
+    "vite",
+    "vite-plugin",
+    "image",
+    "optimization",
+    "lqip",
+    "react",
+    "imagetools",
+    "responsive-images"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "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"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "react": "^19.1.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^7.0.4",
+    "vite-imagetools": "^9.0.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}