@son426/vite-image 0.1.3 → 0.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +40 -15
  2. package/package.json +6 -5
package/README.md CHANGED
@@ -1,19 +1,47 @@
1
1
  # @son426/vite-image
2
2
 
3
- **Next.js-style Image component for Vite.**
3
+ **The Next.js `<Image />` experience, now in Vite.**
4
4
 
5
- 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.
5
+ - **Bring the power of Next.js's automatic image optimization to your Vite projects.**
6
+ - **Dedicated to the Vite + React ecosystem.**
6
7
 
7
- ## Features
8
+ BSimply add the plugin to your config, and start using the `<Image />` component immediately. No complex setups, just performant images.
8
9
 
9
- - 🖼️ **Optimized Images**: Automatic image optimization using vite-imagetools
10
- - 🎨 **LQIP Support**: Low Quality Image Placeholder for smooth loading experience
11
- - 📱 **Responsive Images**: Built-in support for srcSet and sizes attributes
12
- - 🎯 **TypeScript**: Full TypeScript support with type definitions
13
- - 🚀 **Simple Setup**: Easy configuration with sensible defaults
10
+ ## ✨ Why use this?
11
+
12
+ - **⚡ Next.js-like Experience**: Familiar Image API for those coming from Next.js.
13
+ - **🖼️ Zero-Config Optimization**: Automatic format conversion, resizing, and compression via `vite-imagetools`.
14
+ - **🎨 Built-in LQIP**: Automatic Low Quality Image Placeholders (blur effect) while loading.
15
+ - **📱 Responsive Ready**: Auto-generated `srcSet` and `sizes` for all viewports.
16
+ - **🎯 Type-Safe**: Full TypeScript support with tight integration.
17
+
18
+ ---
19
+
20
+ ## 🚀 Quick Look
21
+
22
+ Add it to `vite.config.ts`, and use it like this:
23
+
24
+ ```tsx
25
+ import Image from "@son426/vite-image/react";
26
+ // 1. Import with the required query
27
+ import myBg from "./assets/background.jpg?vite-image";
28
+
29
+ export default function Page() {
30
+ return (
31
+ // 2. Pass the object directly to src
32
+ <Image
33
+ src={myBg}
34
+ alt="Optimized Background"
35
+ fill // Optional: Fill parent container
36
+ />
37
+ );
38
+ }
39
+ ```
14
40
 
15
41
  ## Installation
16
42
 
43
+ Since `vite-imagetools` is handled internally, you only need to install this package.
44
+
17
45
  ```bash
18
46
  pnpm add @son426/vite-image
19
47
  # or
@@ -22,13 +50,12 @@ npm install @son426/vite-image
22
50
  yarn add @son426/vite-image
23
51
  ```
24
52
 
25
- ## Peer Dependencies
53
+ ## Requirements
26
54
 
27
- The following packages are required:
55
+ Just a standard Vite + React project.
28
56
 
29
- ```bash
30
- pnpm add react vite vite-imagetools
31
- ```
57
+ vite (>= 4.0.0)
58
+ react (>= 18.0.0)
32
59
 
33
60
  ## Usage
34
61
 
@@ -48,8 +75,6 @@ export default defineConfig({
48
75
  });
49
76
  ```
50
77
 
51
- **Important**: The `viteImage()` function returns an array of plugins, so you should spread it when adding to the plugins array.
52
-
53
78
  ### 2. Use the Component
54
79
 
55
80
  #### Using `?vite-image` query (Required)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@son426/vite-image",
3
- "version": "0.1.3",
3
+ "version": "0.1.4",
4
4
  "description": "A Vite plugin and React component for optimized images with LQIP support using vite-imagetools",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -47,10 +47,12 @@
47
47
  "type": "git",
48
48
  "url": ""
49
49
  },
50
+ "dependencies": {
51
+ "vite-imagetools": "^9.0.2"
52
+ },
50
53
  "peerDependencies": {
51
54
  "react": "^18.0.0 || ^19.0.0",
52
- "vite": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0",
53
- "vite-imagetools": "^9.0.0"
55
+ "vite": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
54
56
  },
55
57
  "devDependencies": {
56
58
  "@types/node": "^20.0.0",
@@ -58,8 +60,7 @@
58
60
  "react": "^19.1.0",
59
61
  "tsup": "^8.0.0",
60
62
  "typescript": "^5.0.0",
61
- "vite": "^7.0.4",
62
- "vite-imagetools": "^9.0.2"
63
+ "vite": "^7.0.4"
63
64
  },
64
65
  "publishConfig": {
65
66
  "access": "public"