svger-cli 2.0.2 → 2.0.3

package/dist/cli.js

@@ -1,30 +1,30 @@
 #!/usr/bin/env node
-import { CLI } from "./utils/native.js";
-import { svgService } from "./services/svg-service.js";
-import { configService } from "./services/config.js";
-import { logger } from "./core/logger.js";
+import { CLI } from './utils/native.js';
+import { svgService } from './services/svg-service.js';
+import { configService } from './services/config.js';
+import { logger } from './core/logger.js';
 const program = new CLI();
 /**
  * svger-cli CLI
  * Custom SVG to Angular, React, Vue, Svelte, Solid, and other component converter.
  */
 program
-    .name("svger-cli")
-    .description("Custom SVG to Angular, React, Vue, Svelte, Solid, and other component converter")
-    .version("2.0.0");
+    .name('svger-cli')
+    .description('Custom SVG to Angular, React, Vue, Svelte, Solid, and other component converter')
+    .version('2.0.0');
 // -------- Build Command --------
 /**
  * Build all SVGs from a source folder to an output folder.
  */
 program
-    .command("build <src> <out>")
-    .description("Build all SVGs from source to output")
-    .option("--framework <type>", "Target framework (react|vue|svelte|angular|solid|preact|lit|vanilla)")
-    .option("--typescript", "Generate TypeScript components (default: true)")
-    .option("--no-typescript", "Generate JavaScript components")
-    .option("--composition", "Use Vue Composition API with <script setup>")
-    .option("--standalone", "Generate Angular standalone components")
-    .option("--signals", "Use Angular signals for reactive state")
+    .command('build <src> <out>')
+    .description('Build all SVGs from source to output')
+    .option('--framework <type>', 'Target framework (react|vue|svelte|angular|solid|preact|lit|vanilla)')
+    .option('--typescript', 'Generate TypeScript components (default: true)')
+    .option('--no-typescript', 'Generate JavaScript components')
+    .option('--composition', 'Use Vue Composition API with <script setup>')
+    .option('--standalone', 'Generate Angular standalone components')
+    .option('--signals', 'Use Angular signals for reactive state')
     .action(async (args, opts) => {
     try {
         const [src, out] = args;
@@ -62,8 +62,8 @@ program
  * Watch a source folder and rebuild SVGs automatically on changes.
  */
 program
-    .command("watch <src> <out>")
-    .description("Watch source folder and rebuild SVGs automatically")
+    .command('watch <src> <out>')
+    .description('Watch source folder and rebuild SVGs automatically')
     .action(async (args) => {
     try {
         const [src, out] = args;
@@ -85,13 +85,13 @@ program
  * Generate a component from a single SVG file.
  */
 program
-    .command("generate <svgFile> <out>")
-    .description("Convert a single SVG file into a component")
-    .option("--framework <type>", "Target framework (react|vue|svelte|angular|solid|preact|lit|vanilla)")
-    .option("--typescript", "Generate TypeScript component (default: true)")
-    .option("--no-typescript", "Generate JavaScript component")
-    .option("--composition", "Use Vue Composition API with <script setup>")
-    .option("--standalone", "Generate Angular standalone component")
+    .command('generate <svgFile> <out>')
+    .description('Convert a single SVG file into a component')
+    .option('--framework <type>', 'Target framework (react|vue|svelte|angular|solid|preact|lit|vanilla)')
+    .option('--typescript', 'Generate TypeScript component (default: true)')
+    .option('--no-typescript', 'Generate JavaScript component')
+    .option('--composition', 'Use Vue Composition API with <script setup>')
+    .option('--standalone', 'Generate Angular standalone component')
     .action(async (args, opts) => {
     try {
         const [svgFile, out] = args;
@@ -124,8 +124,8 @@ program
  * Lock one or more SVG files to prevent accidental overwrites.
  */
 program
-    .command("lock <files...>")
-    .description("Lock one or more SVG files")
+    .command('lock <files...>')
+    .description('Lock one or more SVG files')
     .action((args) => {
     try {
         svgService.lockService.lockFiles(args);
@@ -139,8 +139,8 @@ program
  * Unlock one or more SVG files to allow modifications.
  */
 program
-    .command("unlock <files...>")
-    .description("Unlock one or more SVG files")
+    .command('unlock <files...>')
+    .description('Unlock one or more SVG files')
     .action((args) => {
     try {
         svgService.lockService.unlockFiles(args);
@@ -155,19 +155,19 @@ program
  * Manage svger-cli configuration.
  */
 program
-    .command("config")
-    .description("Manage svger-cli configuration")
-    .option("--init", "Create default .svgconfig.json")
-    .option("--set <keyValue>", "Set config key=value")
-    .option("--show", "Show current config")
+    .command('config')
+    .description('Manage svger-cli configuration')
+    .option('--init', 'Create default .svgconfig.json')
+    .option('--set <keyValue>', 'Set config key=value')
+    .option('--show', 'Show current config')
     .action(async (args, opts) => {
     try {
         if (opts.init)
             return await configService.initConfig();
         if (opts.set) {
-            const [key, value] = opts.set.split("=");
+            const [key, value] = opts.set.split('=');
             if (!key || value === undefined) {
-                logger.error("Invalid format. Use key=value");
+                logger.error('Invalid format. Use key=value');
                 process.exit(1);
             }
             const parsedValue = !isNaN(Number(value)) ? Number(value) : value;
@@ -175,7 +175,7 @@ program
         }
         if (opts.show)
             return configService.showConfig();
-        logger.error("No option provided. Use --init, --set, or --show");
+        logger.error('No option provided. Use --init, --set, or --show');
     }
     catch (error) {
         logger.error('Config operation failed:', error);
@@ -187,8 +187,8 @@ program
  * Remove all generated SVG React components from an output folder.
  */
 program
-    .command("clean <out>")
-    .description("Remove all generated SVG React components from output folder")
+    .command('clean <out>')
+    .description('Remove all generated SVG React components from output folder')
     .action(async (args) => {
     try {
         const [out] = args;

package/dist/config.js

@@ -1,6 +1,6 @@
-import path from "path";
-import { FileSystem } from "./utils/native.js";
-const CONFIG_FILE = ".svgconfig.json";
+import path from 'path';
+import { FileSystem } from './utils/native.js';
+const CONFIG_FILE = '.svgconfig.json';
 /**
  * Get the absolute path to the configuration file.
  *
@@ -31,24 +31,24 @@ export function writeConfig(config) {
  */
 export async function initConfig() {
     if (await FileSystem.exists(getConfigPath())) {
-        console.log("⚠️  Config file already exists:", getConfigPath());
+        console.log('⚠️  Config file already exists:', getConfigPath());
         return;
     }
     const defaultConfig = {
-        source: "./src/assets/svg",
-        output: "./src/components/icons",
+        source: './src/assets/svg',
+        output: './src/components/icons',
         watch: false,
         defaultWidth: 24,
         defaultHeight: 24,
-        defaultFill: "currentColor",
+        defaultFill: 'currentColor',
         exclude: [],
         styleRules: {
-            fill: "inherit",
-            stroke: "none",
+            fill: 'inherit',
+            stroke: 'none',
         },
     };
     writeConfig(defaultConfig);
-    console.log("✅ Config file created:", getConfigPath());
+    console.log('✅ Config file created:', getConfigPath());
 }
 /**
  * Set a specific configuration key to a new value.
@@ -67,6 +67,6 @@ export function setConfig(key, value) {
  */
 export function showConfig() {
     const config = readConfig();
-    console.log("📄 Current Config:");
+    console.log('📄 Current Config:');
     console.log(JSON.stringify(config, null, 2));
 }

package/dist/core/error-handler.js

@@ -47,7 +47,7 @@ export class SVGErrorHandler {
             total: this.errorHistory.length,
             bySeverity,
             byCode,
-            recentErrors: this.errorHistory.slice(-10)
+            recentErrors: this.errorHistory.slice(-10),
         };
     }
     /**
@@ -70,7 +70,7 @@ export class SVGErrorHandler {
             severity: this.determineSeverity(regularError),
             context: context || {},
             timestamp: Date.now(),
-            stack: regularError.stack
+            stack: regularError.stack,
         };
     }
     categorizeError(error) {
@@ -156,15 +156,15 @@ export class SVGErrorHandler {
     setupDefaultStrategies() {
         // File not found recovery
         this.registerRecoveryStrategy('FILE_NOT_FOUND', {
-            canRecover: (error) => error.context?.filePath && error.context?.canSkip === true,
+            canRecover: error => error.context?.filePath && error.context?.canSkip === true,
             recover: async (error, context) => {
                 logger.warn(`Skipping missing file: ${error.context?.filePath}`);
                 return { skipped: true, filePath: error.context?.filePath };
-            }
+            },
         });
         // Invalid SVG recovery
         this.registerRecoveryStrategy('INVALID_SVG', {
-            canRecover: (error) => error.context?.svgContent,
+            canRecover: error => error.context?.svgContent,
             recover: async (error, context) => {
                 logger.info('Attempting to clean invalid SVG content');
                 // Basic SVG cleanup
@@ -176,15 +176,15 @@ export class SVGErrorHandler {
                     .replace(/on\w+="[^"]*"/gi, '') // Remove event handlers
                     .replace(/javascript:[^"']*/gi, ''); // Remove javascript: URLs
                 return { cleanedContent: cleaned };
-            }
+            },
         });
         // Permission denied recovery
         this.registerRecoveryStrategy('PERMISSION_DENIED', {
-            canRecover: (error) => error.context?.alternative,
+            canRecover: error => error.context?.alternative,
             recover: async (error, context) => {
                 logger.warn(`Using alternative path due to permission issue: ${error.context?.alternative}`);
                 return { alternativePath: error.context?.alternative };
-            }
+            },
         });
         logger.debug('Default error recovery strategies loaded');
     }
@@ -218,7 +218,10 @@ export function handleErrors(context) {
     return function (target, propertyName, descriptor) {
         const method = descriptor.value;
         descriptor.value = async function (...args) {
-            return withErrorHandling(() => method.apply(this, args), { method: propertyName, ...context });
+            return withErrorHandling(() => method.apply(this, args), {
+                method: propertyName,
+                ...context,
+            });
         };
     };
 }

package/dist/core/framework-templates.js

@@ -1,6 +1,6 @@
 export class FrameworkTemplateEngine {
     generateComponent(options) {
-        const { framework, componentName, svgContent, typescript = true, frameworkOptions = {} } = options;
+        const { framework, componentName, svgContent, typescript = true, frameworkOptions = {}, } = options;
         switch (framework) {
             case 'react':
                 return this.generateReactComponent(componentName, svgContent, typescript, frameworkOptions);
@@ -215,8 +215,10 @@ export default defineComponent({
     >
       ${innerContent}
     </svg>
-  \`,${standalone ? `
-  changeDetection: ChangeDetectionStrategy.OnPush` : ''}
+  \`,${standalone
+            ? `
+  changeDetection: ChangeDetectionStrategy.OnPush`
+            : ''}
 })
 export class ${componentName}Component {
   @Input() className: string = '';

package/dist/core/performance-engine.js

@@ -1,3 +1,4 @@
+import os from 'os';
 import { logger } from '../core/logger.js';
 import { svgProcessor } from '../processors/svg-processor.js';
 /**
@@ -18,7 +19,7 @@ export class PerformanceEngine {
      * Process multiple SVG files in parallel with optimized batching
      */
     async processBatch(files, config = {}) {
-        const { batchSize = 10, parallel = true, maxConcurrency = Math.min(4, require('os').cpus().length) } = config;
+        const { batchSize = 10, parallel = true, maxConcurrency = Math.min(4, os.cpus().length), } = config;
         logger.info(`Processing ${files.length} files with ${parallel ? 'parallel' : 'sequential'} execution`);
         const startTime = Date.now();
         const results = [];
@@ -57,7 +58,7 @@ export class PerformanceEngine {
             return {
                 success: true,
                 filePath: file.path,
-                duration: Date.now() - startTime
+                duration: Date.now() - startTime,
             };
         }
         try {
@@ -70,7 +71,7 @@ export class PerformanceEngine {
                 success: result.success,
                 filePath: file.path,
                 error: result.error,
-                duration: Date.now() - startTime
+                duration: Date.now() - startTime,
             };
         }
         catch (error) {
@@ -78,7 +79,7 @@ export class PerformanceEngine {
                 success: false,
                 filePath: file.path,
                 error: error,
-                duration: Date.now() - startTime
+                duration: Date.now() - startTime,
             };
         }
     }
@@ -131,7 +132,7 @@ export class PerformanceEngine {
             heapTotal: heapTotalMB,
             external: memUsage.external / 1024 / 1024,
             cacheSize,
-            recommendations
+            recommendations,
         };
     }
     /**
@@ -149,7 +150,7 @@ export class PerformanceEngine {
         return {
             cacheHitRate: 0, // Placeholder
             averageProcessingTime: 0, // Placeholder
-            memoryUsage: this.monitorMemoryUsage()
+            memoryUsage: this.monitorMemoryUsage(),
         };
     }
     // Private helper methods
@@ -188,7 +189,7 @@ export class PerformanceEngine {
     setCachedResult(key, result) {
         this.processingCache.set(key, {
             result,
-            timestamp: Date.now()
+            timestamp: Date.now(),
         });
     }
     applyFastOptimizations(content) {
@@ -234,7 +235,7 @@ class Semaphore {
             this.permits--;
             return Promise.resolve();
         }
-        return new Promise((resolve) => {
+        return new Promise(resolve => {
             this.waitQueue.push(resolve);
         });
     }

package/dist/core/plugin-manager.js

@@ -26,7 +26,7 @@ export class PluginManager {
             process: async (content, options) => {
                 return this.optimizeSVG(content, options);
             },
-            validate: (options) => true
+            validate: (options) => true,
         });
         // Color Theme Plugin
         this.registerPlugin({
@@ -37,7 +37,7 @@ export class PluginManager {
             },
             validate: (options) => {
                 return options && typeof options.theme === 'object';
-            }
+            },
         });
         // Size Normalizer Plugin
         this.registerPlugin({
@@ -45,7 +45,7 @@ export class PluginManager {
             version: '1.0.0',
             process: async (content, options) => {
                 return this.normalizeSizes(content, options);
-            }
+            },
         });
         logger.debug('Built-in plugins loaded');
     }
@@ -67,7 +67,9 @@ export class PluginManager {
         if (!plugin) {
             throw new Error(`Plugin not found: ${name}`);
         }
-        if (plugin.validate && config?.options && !plugin.validate(config.options)) {
+        if (plugin.validate &&
+            config?.options &&
+            !plugin.validate(config.options)) {
             throw new Error(`Invalid options for plugin: ${name}`);
         }
         this.activePlugins.add(name);
@@ -113,7 +115,7 @@ export class PluginManager {
         return Array.from(this.plugins.entries()).map(([name, plugin]) => ({
             name,
             version: plugin.version,
-            enabled: this.activePlugins.has(name)
+            enabled: this.activePlugins.has(name),
         }));
     }
     /**

package/dist/core/style-compiler.js

@@ -23,7 +23,7 @@ export class SVGStyleCompiler {
             inline: {},
             classes: [],
             cssRules: [],
-            mediaQueries: []
+            mediaQueries: [],
         };
         // Get theme if specified
         const theme = this.resolveTheme(options.theme);
@@ -76,7 +76,8 @@ export class SVGStyleCompiler {
         const imports = hasCustomStyles
             ? `import React from 'react';\nimport type { SVGProps } from "react";`
             : `import type { SVGProps } from "react";`;
-        const styledCSS = hasCustomStyles ? `
+        const styledCSS = hasCustomStyles
+            ? `
 const ${componentName}Styles = \`
 ${compiled.cssRules.join('\n')}
 ${compiled.mediaQueries.join('\n')}
@@ -92,7 +93,8 @@ if (typeof document !== 'undefined') {
     document.head.appendChild(style);
   }
 }
-` : '';
+`
+            : '';
         const inlineStyleObject = Object.keys(compiled.inline).length > 0
             ? `const defaultStyles = ${JSON.stringify(compiled.inline, null, 2)};`
             : '';
@@ -295,28 +297,28 @@ if (typeof document !== 'undefined') {
                 danger: '#dc3545',
                 info: '#17a2b8',
                 light: '#f8f9fa',
-                dark: '#343a40'
+                dark: '#343a40',
             },
             sizes: {
                 xs: 12,
                 sm: 16,
                 md: 24,
                 lg: 32,
-                xl: 48
+                xl: 48,
             },
             spacing: {
                 1: '0.25rem',
                 2: '0.5rem',
                 3: '0.75rem',
                 4: '1rem',
-                5: '1.5rem'
+                5: '1.5rem',
             },
             breakpoints: {
                 sm: '576px',
                 md: '768px',
                 lg: '992px',
-                xl: '1200px'
-            }
+                xl: '1200px',
+            },
         });
         // Dark theme
         this.registerTheme({
@@ -329,28 +331,28 @@ if (typeof document !== 'undefined') {
                 danger: '#dc3545',
                 info: '#0dcaf0',
                 light: '#212529',
-                dark: '#f8f9fa'
+                dark: '#f8f9fa',
             },
             sizes: {
                 xs: 12,
                 sm: 16,
                 md: 24,
                 lg: 32,
-                xl: 48
+                xl: 48,
             },
             spacing: {
                 1: '0.25rem',
                 2: '0.5rem',
                 3: '0.75rem',
                 4: '1rem',
-                5: '1.5rem'
+                5: '1.5rem',
             },
             breakpoints: {
                 sm: '576px',
                 md: '768px',
                 lg: '992px',
-                xl: '1200px'
-            }
+                xl: '1200px',
+            },
         });
     }
     resolveTheme(theme) {
@@ -373,7 +375,7 @@ if (typeof document !== 'undefined') {
             clipPath: 'clipPath',
             mask: 'mask',
             animation: 'animation',
-            transition: 'transition'
+            transition: 'transition',
         };
         for (const [cssProp, optionKey] of Object.entries(styleMap)) {
             const value = options[optionKey];
@@ -416,7 +418,7 @@ if (typeof document !== 'undefined') {
             sm: '576px',
             md: '768px',
             lg: '992px',
-            xl: '1200px'
+            xl: '1200px',
         };
         for (const [prop, value] of Object.entries(options)) {
             if (this.isResponsiveValue(value)) {

package/dist/core/template-manager.js

@@ -25,37 +25,37 @@ export class TemplateManager {
         this.registerTemplate({
             name: 'react-functional',
             generate: (options) => this.generateReactFunctional(options),
-            validate: (options) => !!options.componentName && !!options.svgContent
+            validate: (options) => !!options.componentName && !!options.svgContent,
         });
         // React Functional Component with forwardRef
         this.registerTemplate({
             name: 'react-forwardref',
             generate: (options) => this.generateReactForwardRef(options),
-            validate: (options) => !!options.componentName && !!options.svgContent
+            validate: (options) => !!options.componentName && !!options.svgContent,
         });
         // React Class Component (legacy support)
         this.registerTemplate({
             name: 'react-class',
             generate: (options) => this.generateReactClass(options),
-            validate: (options) => !!options.componentName && !!options.svgContent
+            validate: (options) => !!options.componentName && !!options.svgContent,
         });
         // Styled Components Template
         this.registerTemplate({
             name: 'styled-components',
             generate: (options) => this.generateStyledComponents(options),
-            validate: (options) => !!options.componentName && !!options.svgContent
+            validate: (options) => !!options.componentName && !!options.svgContent,
         });
         // TypeScript Native (no React)
         this.registerTemplate({
             name: 'typescript-native',
             generate: (options) => this.generateTypeScriptNative(options),
-            validate: (options) => !!options.componentName && !!options.svgContent
+            validate: (options) => !!options.componentName && !!options.svgContent,
         });
         // Enhanced Styled Template
         this.registerTemplate({
             name: 'enhanced-styled',
             generate: (options) => this.generateEnhancedStyled(options),
-            validate: (options) => !!options.componentName && !!options.svgContent
+            validate: (options) => !!options.componentName && !!options.svgContent,
         });
         logger.debug('Built-in templates loaded');
     }
@@ -97,7 +97,7 @@ export class TemplateManager {
                 name: templateName,
                 generate: (options) => {
                     return this.processStringTemplate(templateContent, options);
-                }
+                },
             });
             logger.info(`Custom template loaded: ${templateName}`);
         }
@@ -127,7 +127,7 @@ export class TemplateManager {
      * Standard React Functional Component
      */
     generateReactFunctional(options) {
-        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
         return `import React from "react";
 import type { SVGProps } from "react";
 
@@ -173,7 +173,7 @@ export default ${componentName};
      * React Functional Component with forwardRef
      */
     generateReactForwardRef(options) {
-        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
         return `import { forwardRef } from "react";
 import type { SVGProps } from "react";
 
@@ -208,7 +208,7 @@ export default ${componentName};
      * React Class Component (legacy)
      */
     generateReactClass(options) {
-        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
         return `import { Component } from "react";
 import type { SVGProps } from "react";
 
@@ -242,7 +242,7 @@ export default ${componentName};
      * Styled Components Template
      */
     generateStyledComponents(options) {
-        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
         return `import styled from "styled-components";
 import type { SVGProps } from "react";
 
@@ -275,7 +275,7 @@ export default ${componentName};
      * TypeScript Native (no React dependencies)
      */
     generateTypeScriptNative(options) {
-        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
         return `/**
  * ${componentName} SVG Icon (Native TypeScript)
  * Generated by svger-cli
@@ -328,7 +328,7 @@ export default ${componentName};
             ...options,
             defaultWidth: options.defaultWidth || 24,
             defaultHeight: options.defaultHeight || 24,
-            defaultFill: options.defaultFill || 'currentColor'
+            defaultFill: options.defaultFill || 'currentColor',
         };
         let processed = template;
         // Replace variables in the format {{variableName}}
@@ -342,7 +342,7 @@ export default ${componentName};
      * Enhanced Styled Template with comprehensive styling support
      */
     generateEnhancedStyled(options) {
-        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
         return `import React from "react";
 import type { SVGProps } from "react";