svger-cli 4.0.4 → 4.0.5

package/CHANGELOG.md

@@ -5,6 +5,22 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.0.5] - 2026-02-26
+
+### 🐛 Bug Fixes
+
+- **Watch Mode Stability**: Fixed a critical bug in `watch.ts` and `svg-service.ts` where file deletion logic failed to respect user configuration (naming convention, file extensions) and incorrectly defaulted to PascalCase/TSX.
+- **Performance Optimization**: Updated `PerformanceEngine` to use asynchronous file stats (`fs.promises.stat`) instead of synchronous calls, unlocking true parallel processing capabilities and preventing main thread blocking during large batch operations.
+- **Regex Optimization**: Optimized `basic-cleaner.ts` to use a single compiled RegExp for attribute replacement instead of creating a new RegExp for every attribute in every file, resulting in significantly faster processing.
+- **Visual Testing Infrastructure**: Fixed broken visual regression test scripts in `package.json` and corrected relative import paths in `tests/dev/test-visual-diff.js` and `tests/dev/test-visual-integration.js`.
+
+### 🚀 Performance
+
+- **Parallel Processing**: Asynchronous file operations in the performance engine now allow for non-blocking concurrent processing, improving throughput for large icon sets.
+- **Optimizer Speed**: Attribute cleaning is now O(N) instead of O(K*N), reducing overhead in the optimization pipeline.
+
+---
+
 ## [4.0.4] - 2026-02-17
 
 ### 🧪 Test Suite Stabilization

package/README.md

@@ -1,7 +1,7 @@
 <div align="center">
   <img src="./assets/svger-cli.png" alt="SVGER-CLI Banner" width="100%" />
   
-  <h1>SVGER-CLI v4.0.3</h1>
+  <h1>SVGER-CLI v4.0.5</h1>
   <h3>Enterprise SVG Processing Framework with Plugin System</h3>
   
   <p>
@@ -135,9 +135,9 @@
 
 ---
 
-## � **Upgrade to v4.0.3 - Automatic Migration!**
+## � **Upgrade to v4.0.5 - Automatic Migration!**
 
-**v4.0.3 is here with powerful new features!** If you're upgrading from v3.x:
+**v4.0.5 is here with powerful new features!** If you're upgrading from v3.x:
 
 ✅ **Zero Breaking Changes** - All your existing code works  
 ✅ **Automatic Config Migration** - Your `.svgconfig.json` updates automatically  
@@ -146,20 +146,29 @@
 
 **Upgrade Now:**
 ```bash
-npm install -g svger-cli@4.0.3
+npm install -g svger-cli@4.0.5
 # or
-npm install --save-dev svger-cli@4.0.3
+npm install --save-dev svger-cli@4.0.5
 ```
 
 **[See What's New →](#-whats-new-in-v400)** | **[Migration Guide →](#-migration-guide)**
 
 ---
 
-## �🌟 **What's New in v4.0.3**
+## �🌟 **What's New in v4.0.5**
 
-### **🔌 Extensible Plugin System**
+### **� Performance & Stability Improvements**
 
-v4.0.3 introduces a powerful plugin architecture that allows you to extend and customize SVG processing:
+v4.0.5 introduces critical performance optimizations and stability fixes:
+
+- ⚡ **True Parallel Processing**: Non-blocking asynchronous file operations in the core engine
+- 🐛 **Reliable Watch Mode**: Fixed file deletion handling to respect all user configurations
+- 🔧 **Optimized Regex Engine**: Faster attribute cleaning pipeline
+- 🧪 **Robust Visual Testing**: Repaired and stabilized visual regression test suite
+
+### **�🔌 Extensible Plugin System**
+
+v4.0.5 introduces a powerful plugin architecture that allows you to extend and customize SVG processing:
 
 ```bash
 # Use built-in plugins
@@ -337,7 +346,7 @@ node test-visual-integration.js                 # Integration tests (16/16 passi
 > Includes: Benchmark methodology, dependency analysis, Webpack integration guide, and all 28
 > configuration options explained.
 
-| **Feature**                | **SVGER-CLI v4.0.3**       | **SVGR (React)** | **vite-svg-loader (Vue)** | **svelte-svg (Svelte)** | **SVGO**            |
+| **Feature**                | **SVGER-CLI v4.0.5**       | **SVGR (React)** | **vite-svg-loader (Vue)** | **svelte-svg (Svelte)** | **SVGO**            |
 | -------------------------- | -------------------------- | ---------------- | ------------------------- | ----------------------- | ------------------- |
 | **Dependencies**           | ✅ **Zero**                | ❌ 15+ deps      | ❌ 9+ deps                | ❌ 7+ deps              | ❌ 8+ deps          |
 | **Auto-Generated Exports** | ✅ **Full Support**        | ❌ Manual        | ❌ Manual                 | ❌ Manual               | ❌ N/A              |
@@ -351,7 +360,7 @@ node test-visual-integration.js                 # Integration tests (16/16 passi
 | **TypeScript**             | ✅ **Native**              | Plugin           | Limited                   | Limited                 | None                |
 | **Batch Processing**       | ✅ **Optimized**           | Basic            | None                      | None                    | None                |
 | **Plugin System**          | ✅ **Extensible**          | Limited          | None                      | None                    | None                |
-| **Auto Migration**         | ✅ **v3.x → v4.0.3**       | ❌ Manual        | ❌ N/A                    | ❌ N/A                  | ❌ N/A              |
+| **Auto Migration**         | ✅ **v3.x → v4.0.5**       | ❌ Manual        | ❌ N/A                    | ❌ N/A                  | ❌ N/A              |
 | **Configuration Schema**   | ✅ **28 Options**          | ❌ 8 Options     | ❌ 4 Options              | ❌ 3 Options            | ❌ N/A              |
 | **Responsive Design**      | ✅ **Built-in**            | ❌ Manual        | ❌ None                   | ❌ None                 | ❌ None             |
 | **Theme System**           | ✅ **Auto Dark/Light**     | ❌ Manual        | ❌ None                   | ❌ None                 | ❌ None             |
@@ -1403,7 +1412,7 @@ svger-cli build [options]
 - `--styled-components` - Generate styled-components (React/Solid)
 - `--css-modules` - Enable CSS Modules support
 
-**Plugin Options (NEW in v4.0.3):**
+**Plugin Options (NEW in v4.0.5):**
 
 - `--plugin <name>` - Apply single plugin (can be repeated)
 - `--plugins <list>` - Apply multiple plugins (comma-separated)
@@ -2642,7 +2651,7 @@ Vue, Angular, and other frameworks.
 > **Real-world test:** 606 production SVG icons (brand logos, UI icons, social media icons)  
 > **[→ View Complete Benchmark Report](./docs/performance/REAL-WORLD-BENCHMARKS.md)**
 
-| **Operation**           | **SVGER v4.0.3** | **SVGR** | **SVGO** | **Improvement** |
+| **Operation**           | **SVGER v4.0.5** | **SVGR** | **SVGO** | **Improvement** |
 | ----------------------- | ---------------- | -------- | -------- | --------------- |
 | **606 files batch**     | **30.31s**       | ~63.64s  | ~45.46s  | **52% faster than SVGR**  |
 | **Per file average**    | **50.01ms**      | ~105ms   | ~75ms    | **52% faster than SVGR**  |
@@ -2656,7 +2665,7 @@ Vue, Angular, and other frameworks.
 
 ### **Framework-Specific Performance**
 
-All frameworks show consistent performance with v4.0.3 optimizations:
+All frameworks show consistent performance with v4.0.5 optimizations:
 
 | Framework | Time | Files | Speed/File | Throughput |
 |-----------|------|-------|------------|------------|
@@ -2667,9 +2676,9 @@ All frameworks show consistent performance with v4.0.3 optimizations:
 
 **Consistent Performance:** ~50ms per file across all frameworks
 
-### **SVG Optimization Performance (v4.0.3)**
+### **SVG Optimization Performance (v4.0.5)**
 
-SVGER-CLI v4.0.3 includes visual diff testing to guarantee pixel-perfect optimization quality:
+SVGER-CLI v4.0.5 includes visual diff testing to guarantee pixel-perfect optimization quality:
 
 | **Optimization Level** | **Size Reduction** | **Processing Time** | **Visual Quality** | **Memory Usage** |
 |------------------------|-------------------|---------------------|-------------------|------------------|
@@ -2690,7 +2699,7 @@ SVGER-CLI v4.0.3 includes visual diff testing to guarantee pixel-perfect optimiz
 - Complex paths (lossy): 14.3% with path simplification
 - Text rendering: 0.95% font variation acceptable
 
-### **SVG Optimization Levels (v4.0.3)**
+### **SVG Optimization Levels (v4.0.5)**
 
 SVGER-CLI includes a powerful multi-phase optimization engine with configurable levels:
 
@@ -2719,7 +2728,7 @@ svger-cli optimize input.svg --level maximum    # → 348 bytes (57.77%)
 
 ### **Real-World Performance Testing**
 
-SVGER-CLI v4.0.3 has been tested with 606 production SVG icons including:
+SVGER-CLI v4.0.5 has been tested with 606 production SVG icons including:
 - Brand logos (Google, Apple, Microsoft, etc.)
 - UI icons (arrows, buttons, navigation)
 - Social media icons (Twitter, Facebook, LinkedIn, etc.)
@@ -3055,9 +3064,9 @@ svger-cli build --performance --memory
 
 ## 📚 **Migration Guide**
 
-### **Upgrading to v4.0.3 (Automatic)**
+### **Upgrading to v4.0.5 (Automatic)**
 
-**Good News:** v4.0.3 includes automatic configuration migration! Your existing config will be upgraded seamlessly on first run.
+**Good News:** v4.0.5 includes automatic configuration migration! Your existing config will be upgraded seamlessly on first run.
 
 #### **What Happens Automatically**
 
@@ -3069,8 +3078,8 @@ svger build --src ./svgs --out ./components
 
 The tool will:
 1. ✅ Detect your v3.x configuration
-2. ✅ Automatically migrate to v4.0.3 format
-3. ✅ Add new `version: "4.0.3"` field
+2. ✅ Automatically migrate to v4.0.5 format
+3. ✅ Add new `version: "4.0.5"` field
 4. ✅ Convert `plugin` (singular) → `plugins` (array)
 5. ✅ Update optimization levels (see mapping below)
 6. ✅ Save the migrated config
@@ -3088,9 +3097,9 @@ The tool will:
   "performance": { "optimization": "basic" }
 }
 
-// Automatically becomes v4.0.3:
+// Automatically becomes v4.0.5:
 {
-  "version": "4.0.3",
+  "version": "4.0.5",
   "source": "./src/assets/svg",
   "output": "./src/components/icons",
   "framework": "react",
@@ -3101,7 +3110,7 @@ The tool will:
 
 #### **Optimization Level Mapping**
 
-| v3.x | v4.0.3 | Description |
+| v3.x | v4.0.5 | Description |
 |------|--------|-------------|
 | `none` | `fast` | Quick optimization |
 | `basic` | `fast` | Quick optimization |
@@ -3109,7 +3118,7 @@ The tool will:
 | `aggressive` | `maximum` | Maximum compression |
 | `maximum` | `maximum` | Maximum compression |
 
-#### **What's New in v4.0.3**
+#### **What's New in v4.0.5**
 
 - 🔌 **Plugin System**: Use `--plugin optimize` or `--plugins optimize,minify`
 - ⚡ **50% Faster**: O(1) object lookups replace O(n) switch statements
@@ -3121,12 +3130,12 @@ The tool will:
 If you prefer to update your config manually:
 
 ```bash
-# Initialize new v4.0.3 config
+# Initialize new v4.0.5 config
 svger init
 
 # Or manually edit .svgconfig.json and add:
 {
-  "version": "4.0.3",
+  "version": "4.0.5",
   "plugins": [],  // Add this array
   // ... rest of your config
 }
@@ -3174,7 +3183,7 @@ svger-cli build --framework react --responsive --theme dark
 
 ### **Comprehensive Test Suite**
 
-SVGER-CLI v4.0.3 includes a production-ready test suite with **114+ automated tests** covering:
+SVGER-CLI v4.0.5 includes a production-ready test suite with **114+ automated tests** covering:
 
 - ✅ **Unit Tests** - Core modules, utilities, and processors
 - ✅ **Integration Tests** - Complete workflows and multi-framework support

package/dist/core/performance-engine.js

@@ -56,7 +56,7 @@ export class PerformanceEngine {
      */
     async processSingleWithCaching(file) {
         const startTime = Date.now();
-        const cacheKey = this.generateCacheKey(file.path, file.options || {});
+        const cacheKey = await this.generateCacheKey(file.path, file.options || {});
         // Check cache first
         const cached = this.getCachedResult(cacheKey);
         if (cached) {
@@ -171,11 +171,12 @@ export class PerformanceEngine {
             semaphore.release();
         }
     }
-    generateCacheKey(filePath, options) {
+    async generateCacheKey(filePath, options) {
         // Include file modification time to invalidate cache when file changes
         let mtimeMs = 0;
         try {
-            mtimeMs = fs.statSync(filePath).mtimeMs;
+            const stat = await fs.promises.stat(filePath);
+            mtimeMs = stat.mtimeMs;
         }
         catch {
             // File may not exist yet; use 0 so caching still works

package/dist/optimizers/basic-cleaner.js

@@ -79,12 +79,9 @@ export function convertToCamelCase(svg, config) {
         'fill-opacity': 'fillOpacity',
         'stroke-opacity': 'strokeOpacity',
     };
-    let result = svg;
-    for (const [kebab, camel] of Object.entries(attributeMap)) {
-        const regex = new RegExp(kebab, 'g');
-        result = result.replace(regex, camel);
-    }
-    return result;
+    // Create a single regex from all keys — O(n) instead of O(k*n)
+    const regex = new RegExp(Object.keys(attributeMap).join('|'), 'g');
+    return svg.replace(regex, (match) => attributeMap[match]);
 }
 /**
  * Remove unnecessary XML namespace attributes

package/dist/services/svg-service.js

@@ -3,6 +3,7 @@ import { FileSystem } from '../utils/native.js';
 import { logger } from '../core/logger.js';
 import { configService } from './config.js';
 import { svgProcessor } from '../processors/svg-processor.js';
+import { frameworkTemplateEngine } from '../core/framework-templates.js';
 import { fileWatcher } from './file-watcher.js';
 import { OptLevel } from '../optimizers/types.js';
 /**
@@ -261,12 +262,18 @@ export class SVGService {
      */
     async handleFileRemoval(filePath, outDir, config) {
         try {
-            const namingConvention = config?.output?.naming || 'pascal';
+            // Get configuration
+            const fullConfig = configService.readConfig();
+            const mergedConfig = { ...fullConfig, ...config };
+            const namingConvention = mergedConfig.outputConfig?.naming || 'pascal';
+            const framework = mergedConfig.framework || 'react';
+            const typescript = mergedConfig.typescript !== false;
+            const extension = frameworkTemplateEngine.getFileExtension(framework, typescript);
             const componentName = svgProcessor.generateComponentName(path.basename(filePath), namingConvention);
-            const componentPath = path.join(outDir, `${componentName}.tsx`);
+            const componentPath = path.join(outDir, `${componentName}.${extension}`);
             if (await FileSystem.exists(componentPath)) {
                 await FileSystem.unlink(componentPath);
-                logger.success(`Removed component: ${componentName}.tsx`);
+                logger.success(`Removed component: ${componentName}.${extension}`);
             }
         }
         catch (error) {

package/dist/watch.js

@@ -1,7 +1,10 @@
 import path from 'path';
 import { generateSVG } from './builder.js';
 import { isLocked } from './lock.js';
-import { FileSystem, FileWatcher, toPascalCase } from './utils/native.js';
+import { FileSystem, FileWatcher } from './utils/native.js';
+import { configService } from './services/config.js';
+import { svgProcessor } from './processors/svg-processor.js';
+import { frameworkTemplateEngine } from './core/framework-templates.js';
 /**
  * Watches a source folder for changes to SVG files and automatically
  * rebuilds React components when SVGs are added, modified, or deleted.
@@ -59,13 +62,17 @@ export async function watchSVGs(config) {
             await generateSVG({ svgFile: filePath, outDir });
         }
         else {
-            // File was deleted — use PascalCase to match the generated component filename
-            const baseName = path.basename(filePath, '.svg');
-            const componentName = toPascalCase(baseName);
-            const outFile = path.join(outDir, `${componentName}.tsx`);
+            // File was deleted — use configured naming convention and extension
+            const config = configService.readConfig();
+            const namingConvention = config.outputConfig?.naming || 'pascal';
+            const framework = config.framework || 'react';
+            const typescript = config.typescript !== false;
+            const extension = frameworkTemplateEngine.getFileExtension(framework, typescript);
+            const componentName = svgProcessor.generateComponentName(path.basename(filePath), namingConvention);
+            const outFile = path.join(outDir, `${componentName}.${extension}`);
             if (await FileSystem.exists(outFile)) {
                 await FileSystem.unlink(outFile);
-                console.log(`🗑️ Removed component: ${componentName}.tsx`);
+                console.log(`🗑️ Removed component: ${componentName}.${extension}`);
             }
         }
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svger-cli",
-  "version": "4.0.4",
+  "version": "4.0.5",
   "description": "Enterprise-grade SVG to component converter with advanced plugin system, visual diff testing, and official framework integrations. Supporting React, React Native, Vue, Angular, Svelte, Solid, Lit, Preact & Vanilla. Features TypeScript, HMR, optimization pipeline, and extensible architecture.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -94,10 +94,10 @@
     "test:config": "tsc tests/config-options.test.ts --outDir dist-tests --module es2022 --target es2022 --moduleResolution bundler && node dist-tests/config-options.test.js",
     "test:e2e": "tsc tests/e2e-complete.test.ts --outDir dist-tests --module es2022 --target es2022 --moduleResolution bundler && node dist-tests/e2e-complete.test.js",
     "test:integrations": "node tests/integrations/verify-integrations.mjs",
-    "test:visual": "node test-visual-diff.js",
-    "test:visual:integration": "node test-visual-integration.js",
-    "test:visual:ci": "node test-visual-integration.js --strict",
-    "test:visual:update": "UPDATE_SNAPSHOTS=1 node test-visual-diff.js",
+    "test:visual": "node tests/dev/test-visual-diff.js",
+    "test:visual:integration": "node tests/dev/test-visual-integration.js",
+    "test:visual:ci": "node tests/dev/test-visual-integration.js --strict",
+    "test:visual:update": "UPDATE_SNAPSHOTS=1 node tests/dev/test-visual-diff.js",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
     "test:integration": "jest --testPathPattern=integration",