vite-svg-sprite-generator-plugin 1.1.7 โ 1.3.0
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.
- package/README.md +183 -341
- package/package.json +14 -8
- package/vite-svg-sprite-generator-plugin.d.ts +66 -87
- package/vite-svg-sprite-generator-plugin.js +440 -85
- package/vite-svg-sprite-generator-plugin.ts +653 -80
- package/CHANGELOG.md +0 -342
package/CHANGELOG.md
DELETED
|
@@ -1,342 +0,0 @@
|
|
|
1
|
-
# Changelog
|
|
2
|
-
|
|
3
|
-
All notable changes to this project will be documented in this file.
|
|
4
|
-
|
|
5
|
-
## [1.1.7] - 2025-01-28
|
|
6
|
-
|
|
7
|
-
### ๐ฆ Publication Release
|
|
8
|
-
|
|
9
|
-
- **UPDATED:** Version updated for npm publication
|
|
10
|
-
- **NO CHANGES:** Code is identical to v1.1.6
|
|
11
|
-
- **REASON:** Version bump for clean publication
|
|
12
|
-
|
|
13
|
-
---
|
|
14
|
-
|
|
15
|
-
## [1.1.6] - 2025-01-28
|
|
16
|
-
|
|
17
|
-
### ๐ Bug Fix - Preview Mode Detection
|
|
18
|
-
|
|
19
|
-
- **FIXED:** Preview mode detection now works correctly
|
|
20
|
-
- **ISSUE:** Plugin was showing validation messages during `vite preview`
|
|
21
|
-
- **ROOT CAUSE:** Vite runs preview as `command="serve"` + `mode="production"`
|
|
22
|
-
- **SOLUTION:** Added smart detection: `serve + production + !SSR = preview`
|
|
23
|
-
|
|
24
|
-
### ๐ Changes
|
|
25
|
-
|
|
26
|
-
```javascript
|
|
27
|
-
// Now correctly detects preview mode
|
|
28
|
-
isLikelyPreview =
|
|
29
|
-
isPreview ||
|
|
30
|
-
resolvedConfig.mode === 'preview' ||
|
|
31
|
-
(command === 'serve' && mode === 'production' && !build?.ssr);
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
### โ
Result
|
|
35
|
-
|
|
36
|
-
- Preview mode now correctly skips validation โ
|
|
37
|
-
- Preview mode skips sprite generation โ
|
|
38
|
-
- Preview runs instantly (0ms) โ
|
|
39
|
-
- Debug logging shows mode detection โ
|
|
40
|
-
|
|
41
|
-
### ๐ Testing
|
|
42
|
-
|
|
43
|
-
**Before (v1.1.4):**
|
|
44
|
-
```
|
|
45
|
-
vite preview โ "Validated icons folder" โ
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
**After (v1.1.6):**
|
|
49
|
-
```
|
|
50
|
-
vite preview โ "Preview mode detected: skipping" โ
|
|
51
|
-
```
|
|
52
|
-
|
|
53
|
-
---
|
|
54
|
-
|
|
55
|
-
## [1.1.4] - 2025-01-21
|
|
56
|
-
|
|
57
|
-
### โก Performance - Smart Launch Mode
|
|
58
|
-
|
|
59
|
-
- **NEW:** Intelligent mode detection for preview command
|
|
60
|
-
- **IMPROVED:** Preview mode now skips unnecessary operations
|
|
61
|
-
- **ADDED:** Automatic command detection (serve/build/preview)
|
|
62
|
-
- **OPTIMIZED:** Preview runs instantly (0ms instead of 583ms)
|
|
63
|
-
- **NEW:** Skipping path validation in preview mode
|
|
64
|
-
- **NEW:** Skipping sprite generation in preview mode
|
|
65
|
-
- **ADDED:** Debug logging to understand Vite mode detection
|
|
66
|
-
- **IMPROVED:** Additional check for `resolvedConfig.mode === 'preview'`
|
|
67
|
-
|
|
68
|
-
### ๐ Preview Mode Detection (Fixed)
|
|
69
|
-
|
|
70
|
-
**Issue:** The plugin was showing validation messages during `vite preview` because Vite runs preview as `command="serve"` + `mode="production"`.
|
|
71
|
-
|
|
72
|
-
**Fix:** Added smart detection logic:
|
|
73
|
-
- Detects `isPreview` flag
|
|
74
|
-
- Detects `mode === 'preview'`
|
|
75
|
-
- Detects `serve` + `production` combination (typical for preview)
|
|
76
|
-
- Excludes SSR builds from this check
|
|
77
|
-
|
|
78
|
-
Now the plugin correctly skips validation and sprite generation in preview mode.
|
|
79
|
-
|
|
80
|
-
Enable `verbose: true` to see debug information: `command`, `isPreview`, `mode`.
|
|
81
|
-
|
|
82
|
-
### ๐ฏ Optimization Details
|
|
83
|
-
|
|
84
|
-
**Before optimization:**
|
|
85
|
-
```javascript
|
|
86
|
-
// Preview mode executed all operations unnecessarily
|
|
87
|
-
npm run preview // 583ms
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
**After optimization:**
|
|
91
|
-
```javascript
|
|
92
|
-
// Preview mode intelligently skips work
|
|
93
|
-
npm run preview // 0ms โก
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
**Performance improvements:**
|
|
97
|
-
- Preview: **-100% time** (0ms vs 583ms)
|
|
98
|
-
- Dev: unchanged (full functionality)
|
|
99
|
-
- Build: unchanged (full functionality)
|
|
100
|
-
|
|
101
|
-
### ๐ง Internal Changes
|
|
102
|
-
|
|
103
|
-
- **ADDED:** `command` variable to track Vite command mode
|
|
104
|
-
- **ADDED:** Early return in `configResolved` for preview mode
|
|
105
|
-
- **ADDED:** Early return in `buildStart` for preview mode
|
|
106
|
-
- **IMPROVED:** Better mode detection logic
|
|
107
|
-
- **IMPROVED:** Cleaner logs in preview mode
|
|
108
|
-
|
|
109
|
-
### ๐ Why These Changes?
|
|
110
|
-
|
|
111
|
-
In preview mode, the project is already built and the sprite is already in the HTML. There's no need to:
|
|
112
|
-
- Validate paths (project is already built)
|
|
113
|
-
- Scan for icons (no `src/` folder in `dist/`)
|
|
114
|
-
- Generate sprite (already embedded)
|
|
115
|
-
|
|
116
|
-
### ๐ฏ Impact
|
|
117
|
-
|
|
118
|
-
- โ
Preview mode is now **instant**
|
|
119
|
-
- โ
Cleaner console output in preview
|
|
120
|
-
- โ
No breaking changes
|
|
121
|
-
- โ
Full backward compatibility
|
|
122
|
-
|
|
123
|
-
---
|
|
124
|
-
|
|
125
|
-
## [1.1.1] - 2025-10-26
|
|
126
|
-
|
|
127
|
-
### ๐ง Improvements
|
|
128
|
-
|
|
129
|
-
- **IMPROVED:** Using `vite.normalizePath` utility instead of manual path normalization
|
|
130
|
-
- Better cross-platform compatibility (handles UNC paths, network drives)
|
|
131
|
-
- Consistency with Vite ecosystem
|
|
132
|
-
- Future-proof for Vite API changes
|
|
133
|
-
|
|
134
|
-
### ๐ Internal Changes
|
|
135
|
-
|
|
136
|
-
- **REFACTOR:** `validateIconsPath()` now uses `normalizePath(absolutePath)`
|
|
137
|
-
- **REFACTOR:** `handleFileEvent()` in configureServer uses `normalizePath(file)`
|
|
138
|
-
- **ADDED:** Import `{ normalizePath }` from 'vite'
|
|
139
|
-
|
|
140
|
-
### ๐ Impact
|
|
141
|
-
|
|
142
|
-
- No breaking changes
|
|
143
|
-
- Better Windows/Unix path handling
|
|
144
|
-
- Improved edge case support (network paths, etc.)
|
|
145
|
-
|
|
146
|
-
---
|
|
147
|
-
|
|
148
|
-
## [1.1.0] - 2025-10-25
|
|
149
|
-
|
|
150
|
-
### ๐ Security
|
|
151
|
-
|
|
152
|
-
- **NEW:** Path traversal protection via `validateIconsPath()` function
|
|
153
|
-
- **NEW:** `configResolved()` hook for early path validation
|
|
154
|
-
- **IMPROVED:** Precompiled RegExp patterns for SVG sanitization (performance + security)
|
|
155
|
-
- **ADDED:** Detailed error messages with valid/invalid path examples
|
|
156
|
-
- **ADDED:** Protection against reading files outside project root
|
|
157
|
-
|
|
158
|
-
### โก Performance
|
|
159
|
-
|
|
160
|
-
- **BREAKING:** Removed all synchronous FS operations (`existsSync`, `statSync`)
|
|
161
|
-
- **NEW:** All FS operations are now fully async (using `access`, `stat` from `fs/promises`)
|
|
162
|
-
- **IMPROVED:** ~20% faster sanitization with precompiled RegExp patterns
|
|
163
|
-
- **IMPROVED:** No event loop blocking - better performance for large projects
|
|
164
|
-
- **IMPROVED:** ~12-18% faster build times for projects with 100+ icons
|
|
165
|
-
|
|
166
|
-
### ๐ Documentation
|
|
167
|
-
|
|
168
|
-
- **ADDED:** Comprehensive JSDoc comments with `@security` tags
|
|
169
|
-
- **ADDED:** Examples for safe and unsafe paths in error messages
|
|
170
|
-
- **ADDED:** Performance optimization notes in function documentation
|
|
171
|
-
- **IMPROVED:** Enhanced error messages with helpful tips
|
|
172
|
-
|
|
173
|
-
### ๐ง Internal Changes
|
|
174
|
-
|
|
175
|
-
- **REFACTOR:** `findSVGFiles()` now accepts `options` parameter for verbose logging
|
|
176
|
-
- **REFACTOR:** `generateHashFromMtime()` now accepts `pluginState` for cache cleanup
|
|
177
|
-
- **NEW:** `validateIconsPath()` function with comprehensive security checks
|
|
178
|
-
- **NEW:** Variables `viteRoot` and `validatedIconsFolder` for secure path handling
|
|
179
|
-
- **IMPROVED:** Better error handling with detailed context
|
|
180
|
-
|
|
181
|
-
### ๐งช Testing
|
|
182
|
-
|
|
183
|
-
- **ADDED:** Comprehensive test suite
|
|
184
|
-
- **ADDED:** Security tests (path traversal, XSS, RegExp patterns)
|
|
185
|
-
- **ADDED:** Performance benchmarks
|
|
186
|
-
- **ADDED:** Architecture validation tests
|
|
187
|
-
- **ADDED:** User case scenarios
|
|
188
|
-
- **ADDED:** Developer experience tests
|
|
189
|
-
|
|
190
|
-
### ๐ Metrics
|
|
191
|
-
|
|
192
|
-
| Improvement | Before | After | Change |
|
|
193
|
-
|-------------|--------|-------|--------|
|
|
194
|
-
| Build time (100 SVG) | 250ms | 220ms | **-12%** |
|
|
195
|
-
| Build time (500 SVG) | 1200ms | 980ms | **-18%** |
|
|
196
|
-
| Sanitization (100 files) | 10ms | 8ms | **-20%** |
|
|
197
|
-
| Event loop blocks | Yes | No | **-100%** |
|
|
198
|
-
| Path traversal protection | No | Yes | **+100%** |
|
|
199
|
-
|
|
200
|
-
### ๐จ Breaking Changes
|
|
201
|
-
|
|
202
|
-
**NONE** - Fully backward compatible with v1.0.0
|
|
203
|
-
|
|
204
|
-
### ๐ Migration Guide
|
|
205
|
-
|
|
206
|
-
No changes required for existing users. All improvements are transparent.
|
|
207
|
-
|
|
208
|
-
**Optional recommendations:**
|
|
209
|
-
- Enable verbose mode to see validated paths: `verbose: true`
|
|
210
|
-
- Ensure `iconsFolder` points inside project root (now enforced)
|
|
211
|
-
|
|
212
|
-
---
|
|
213
|
-
|
|
214
|
-
## [1.0.1] - 2025-10-24
|
|
215
|
-
|
|
216
|
-
### ๐จ Documentation & Improvements
|
|
217
|
-
|
|
218
|
-
- **IMPROVED:** Updated README with inline SVG behavior documentation
|
|
219
|
-
- **ADDED:** Clarification that sprite is injected into page DOM
|
|
220
|
-
- **ADDED:** "How It Works" section in README
|
|
221
|
-
- **ADDED:** "Why Inline SVG?" section explaining benefits
|
|
222
|
-
- **IMPROVED:** Better documentation of sprite injection behavior
|
|
223
|
-
|
|
224
|
-
---
|
|
225
|
-
|
|
226
|
-
## [1.0.0] - 2025-10-23
|
|
227
|
-
|
|
228
|
-
### ๐ Initial Release
|
|
229
|
-
|
|
230
|
-
Production-ready Vite plugin for automatic SVG sprite generation with comprehensive feature set.
|
|
231
|
-
|
|
232
|
-
### โจ Features
|
|
233
|
-
|
|
234
|
-
- ๐ **SVGO Optimization** - Automatic SVG optimization in production (40-60% size reduction)
|
|
235
|
-
- โก **Hot Module Replacement** - Instant updates without page reload in development
|
|
236
|
-
- ๐ **Security First** - Built-in XSS protection and path traversal prevention
|
|
237
|
-
- ๐พ **Smart Caching** - Efficient LRU-like cache with mtime validation
|
|
238
|
-
- ๐ฏ **Auto-Injection** - Automatic sprite injection into HTML
|
|
239
|
-
- ๐ง **Fully Configurable** - Extensive customization options
|
|
240
|
-
- ๐ฆ **Zero Config** - Works out of the box with sensible defaults
|
|
241
|
-
- ๐ณ **Tree-Shakeable** - Modern ES modules with proper exports
|
|
242
|
-
- ๐จ **TypeScript Support** - Full TypeScript definitions included
|
|
243
|
-
- ๐ **Nested Folders** - Automatic recursive folder scanning
|
|
244
|
-
|
|
245
|
-
### ๐ Security
|
|
246
|
-
|
|
247
|
-
- XSS protection (script tags, event handlers, javascript: URLs)
|
|
248
|
-
- Path traversal prevention with safe path validation
|
|
249
|
-
- File size limits (5MB max) to prevent DoS
|
|
250
|
-
- SVG content sanitization
|
|
251
|
-
- Duplicate symbol ID detection
|
|
252
|
-
|
|
253
|
-
### โก Performance
|
|
254
|
-
|
|
255
|
-
- mtime-based hash generation (faster than content hashing)
|
|
256
|
-
- Efficient file caching with automatic invalidation
|
|
257
|
-
- Debounced file watching (configurable delay)
|
|
258
|
-
- Minimal build time impact (~50ms for 100 icons)
|
|
259
|
-
- Memory leak prevention with proper cleanup
|
|
260
|
-
|
|
261
|
-
### ๐ฏ Configuration Options
|
|
262
|
-
|
|
263
|
-
```javascript
|
|
264
|
-
svgSpritePlugin({
|
|
265
|
-
iconsFolder: 'src/icons', // Icons directory
|
|
266
|
-
spriteId: 'icon-sprite', // Sprite element ID
|
|
267
|
-
spriteClass: 'svg-sprite', // Sprite CSS class
|
|
268
|
-
idPrefix: '', // Symbol ID prefix (empty by default)
|
|
269
|
-
optimize: true, // Enable optimization
|
|
270
|
-
watch: true, // Watch for changes in dev
|
|
271
|
-
debounceDelay: 100, // HMR debounce delay (ms)
|
|
272
|
-
verbose: false, // Verbose logging
|
|
273
|
-
svgoOptimize: true, // SVGO optimization in production
|
|
274
|
-
svgoConfig: { // Custom SVGO configuration
|
|
275
|
-
// ... custom plugins
|
|
276
|
-
}
|
|
277
|
-
})
|
|
278
|
-
```
|
|
279
|
-
|
|
280
|
-
### ๐ฆ Installation
|
|
281
|
-
|
|
282
|
-
```bash
|
|
283
|
-
# Basic (without SVGO)
|
|
284
|
-
npm install -D vite-svg-sprite-generator-plugin
|
|
285
|
-
|
|
286
|
-
# Recommended (with SVGO for optimization)
|
|
287
|
-
npm install -D vite-svg-sprite-generator-plugin svgo
|
|
288
|
-
```
|
|
289
|
-
|
|
290
|
-
**Note:** SVGO is optional! The plugin works without it, but you'll get 40-60% smaller sprites with SVGO installed.
|
|
291
|
-
|
|
292
|
-
### ๐ Quick Start
|
|
293
|
-
|
|
294
|
-
```javascript
|
|
295
|
-
// vite.config.js
|
|
296
|
-
import { defineConfig } from 'vite';
|
|
297
|
-
import svgSpritePlugin from 'vite-svg-sprite-generator-plugin';
|
|
298
|
-
|
|
299
|
-
export default defineConfig({
|
|
300
|
-
plugins: [
|
|
301
|
-
svgSpritePlugin({
|
|
302
|
-
iconsFolder: 'src/icons'
|
|
303
|
-
})
|
|
304
|
-
]
|
|
305
|
-
});
|
|
306
|
-
```
|
|
307
|
-
|
|
308
|
-
```html
|
|
309
|
-
<!-- Use in HTML -->
|
|
310
|
-
<svg class="icon">
|
|
311
|
-
<use href="#home"></use>
|
|
312
|
-
</svg>
|
|
313
|
-
```
|
|
314
|
-
|
|
315
|
-
### ๐ Documentation
|
|
316
|
-
|
|
317
|
-
See [README.md](README.md) for comprehensive documentation, examples, and best practices.
|
|
318
|
-
|
|
319
|
-
---
|
|
320
|
-
|
|
321
|
-
## Legend
|
|
322
|
-
|
|
323
|
-
- โจ New features
|
|
324
|
-
- ๐ Changes
|
|
325
|
-
- ๐ Bug fixes
|
|
326
|
-
- ๐ Security
|
|
327
|
-
- โก Performance
|
|
328
|
-
- ๐ Documentation
|
|
329
|
-
- ๐พ Caching
|
|
330
|
-
- ๐งช Tests
|
|
331
|
-
- ๐ฆ Dependencies
|
|
332
|
-
- ๐ฏ Improvements
|
|
333
|
-
- โ Removals
|
|
334
|
-
- ๐ง Configuration
|
|
335
|
-
|
|
336
|
-
## Links
|
|
337
|
-
|
|
338
|
-
- [NPM Package](https://www.npmjs.com/package/vite-svg-sprite-generator-plugin)
|
|
339
|
-
- [GitHub Repository](https://github.com/german-schneck/vite-svg-sprite-generator-plugin)
|
|
340
|
-
- [Documentation](https://github.com/german-schneck/vite-svg-sprite-generator-plugin#readme)
|
|
341
|
-
- [Issues](https://github.com/german-schneck/vite-svg-sprite-generator-plugin/issues)
|
|
342
|
-
|