svger-cli 2.0.2 → 2.0.4

package/SECURITY.md

@@ -0,0 +1,69 @@
+# Security Policy
+
+## Supported Versions
+
+We actively support the following versions of SVGER-CLI with security updates:
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 2.0.x   | :white_check_mark: |
+| 1.x.x   | :x:                |
+
+## Reporting a Vulnerability
+
+We take the security of SVGER-CLI seriously. If you discover a security vulnerability, please follow these guidelines:
+
+### How to Report
+
+1. **DO NOT** create a public GitHub issue for security vulnerabilities
+2. Send an email to **faezemohades@gmail.com** with the subject line: `[SECURITY] SVGER-CLI Vulnerability Report`
+3. Include the following information:
+   - Description of the vulnerability
+   - Steps to reproduce the issue
+   - Potential impact
+   - Suggested fix (if any)
+   - Your contact information
+
+### What to Expect
+
+- **Acknowledgment**: We will acknowledge receipt of your report within 24 hours
+- **Assessment**: We will assess the vulnerability within 72 hours
+- **Updates**: We will provide regular updates on our progress
+- **Resolution**: Critical vulnerabilities will be patched within 7 days, others within 30 days
+
+### Security Best Practices for Users
+
+When using SVGER-CLI in your projects:
+
+1. **Keep Updated**: Always use the latest version
+2. **Validate Input**: Ensure SVG files come from trusted sources
+3. **Review Output**: Inspect generated components before deploying
+4. **File Permissions**: Use appropriate file permissions for generated components
+5. **CI/CD Security**: Secure your build pipelines that use SVGER-CLI
+
+### Security Features
+
+SVGER-CLI includes several security features:
+
+- **Zero Dependencies**: Eliminates third-party vulnerability vectors
+- **Input Validation**: Validates SVG content before processing
+- **Sandboxed Processing**: Processes files in isolated contexts
+- **Safe Output Generation**: Generates safe, sanitized component code
+- **File Locking**: Prevents unauthorized modification of protected files
+
+### Disclosure Policy
+
+- We believe in responsible disclosure
+- We will credit security researchers who report vulnerabilities responsibly
+- We may create a security advisory for significant vulnerabilities
+- We will notify users through our release notes and GitHub security advisories
+
+## Contact
+
+For any security-related questions or concerns:
+
+- **Primary Contact**: faezemohades@gmail.com
+- **Alternative Contact**: navidrezadoost07@gmail.com
+- **PGP Key**: Available upon request
+
+Thank you for helping keep SVGER-CLI secure!

package/dist/builder.js

@@ -1,8 +1,8 @@
-import path from "path";
-import { toPascalCase, FileSystem } from "./utils/native.js";
-import { isLocked } from "./lock.js";
-import { readConfig } from "./config.js";
-import { reactTemplate } from "./templates/ComponentTemplate.js";
+import path from 'path';
+import { toPascalCase, FileSystem } from './utils/native.js';
+import { isLocked } from './lock.js';
+import { readConfig } from './config.js';
+import { reactTemplate } from './templates/ComponentTemplate.js';
 /**
  * Converts all SVG files from a source directory into React components and writes them to an output directory.
  *
@@ -16,13 +16,13 @@ export async function buildAll(config) {
     const srcDir = path.resolve(config.src);
     const outDir = path.resolve(config.out);
     if (!(await FileSystem.exists(srcDir))) {
-        console.error("❌ Source folder not found:", srcDir);
+        console.error('❌ Source folder not found:', srcDir);
         process.exit(1);
     }
     await FileSystem.ensureDir(outDir);
-    const files = (await FileSystem.readDir(srcDir)).filter((f) => f.endsWith(".svg"));
+    const files = (await FileSystem.readDir(srcDir)).filter((f) => f.endsWith('.svg'));
     if (!files.length) {
-        console.log("⚠️  No SVG files found in", srcDir);
+        console.log('⚠️  No SVG files found in', srcDir);
         return;
     }
     for (const file of files) {
@@ -31,8 +31,8 @@ export async function buildAll(config) {
             console.log(`⚠️ Skipped locked file: ${file}`);
             continue;
         }
-        const svgContent = await FileSystem.readFile(svgPath, "utf-8");
-        const componentName = toPascalCase(file.replace(".svg", ""));
+        const svgContent = await FileSystem.readFile(svgPath, 'utf-8');
+        const componentName = toPascalCase(file.replace('.svg', ''));
         const componentCode = reactTemplate({
             componentName,
             svgContent,
@@ -41,10 +41,10 @@ export async function buildAll(config) {
             defaultFill: svgConfig.defaultFill,
         });
         const outFile = path.join(outDir, `${componentName}.tsx`);
-        await FileSystem.writeFile(outFile, componentCode, "utf-8");
+        await FileSystem.writeFile(outFile, componentCode, 'utf-8');
         console.log(`✅ Generated: ${componentName}.tsx`);
     }
-    console.log("🎉 All SVGs have been converted successfully!");
+    console.log('🎉 All SVGs have been converted successfully!');
 }
 /**
  * Generates a single React component from an SVG file.
@@ -62,11 +62,11 @@ export async function generateSVG({ svgFile, outDir, }) {
         return;
     }
     if (!(await FileSystem.exists(filePath))) {
-        console.error("❌ SVG file not found:", filePath);
+        console.error('❌ SVG file not found:', filePath);
         process.exit(1);
     }
-    const svgContent = await FileSystem.readFile(filePath, "utf-8");
-    const componentName = toPascalCase(path.basename(svgFile, ".svg"));
+    const svgContent = await FileSystem.readFile(filePath, 'utf-8');
+    const componentName = toPascalCase(path.basename(svgFile, '.svg'));
     const componentCode = reactTemplate({
         componentName,
         svgContent,
@@ -77,6 +77,6 @@ export async function generateSVG({ svgFile, outDir, }) {
     const outputFolder = path.resolve(outDir);
     await FileSystem.ensureDir(outputFolder);
     const outFile = path.join(outputFolder, `${componentName}.tsx`);
-    await FileSystem.writeFile(outFile, componentCode, "utf-8");
+    await FileSystem.writeFile(outFile, componentCode, 'utf-8');
     console.log(`✅ Generated: ${componentName}.tsx`);
 }

package/dist/clean.js

@@ -1,5 +1,5 @@
-import path from "path";
-import { FileSystem } from "./utils/native.js";
+import path from 'path';
+import { FileSystem } from './utils/native.js';
 /**
  * Cleans the specified output directory by removing all files and folders inside it.
  * Typically used to clear previously generated SVG React components before a new build.

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,107 @@ 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 & Output
+        source: './src/assets/svg',
+        output: './src/components/icons',
+        // Framework Configuration
+        framework: 'react',
+        typescript: true,
+        componentType: 'functional',
+        // Processing Options
         watch: false,
+        parallel: true,
+        batchSize: 10,
+        maxConcurrency: 4,
+        cache: true,
+        // Default Properties
         defaultWidth: 24,
         defaultHeight: 24,
-        defaultFill: "currentColor",
-        exclude: [],
+        defaultFill: 'currentColor',
+        defaultStroke: 'none',
+        defaultStrokeWidth: 1,
+        // Styling Configuration
         styleRules: {
-            fill: "inherit",
-            stroke: "none",
+            fill: 'inherit',
+            stroke: 'none',
+        },
+        responsive: {
+            breakpoints: ['sm', 'md', 'lg', 'xl'],
+            values: {
+                width: ['16px', '20px', '24px', '32px'],
+                height: ['16px', '20px', '24px', '32px'],
+            },
+        },
+        theme: {
+            mode: 'auto',
+            variables: {
+                primary: 'currentColor',
+                secondary: '#6b7280',
+                accent: '#3b82f6',
+            },
+        },
+        animations: [],
+        // Advanced Options
+        plugins: [],
+        exclude: [],
+        include: [],
+        // Error Handling
+        errorHandling: {
+            strategy: 'continue',
+            maxRetries: 3,
+            timeout: 30000,
+        },
+        // Performance Settings
+        performance: {
+            optimization: 'balanced',
+            memoryLimit: 512,
+            cacheTimeout: 3600000,
+        },
+        // Output Customization
+        outputConfig: {
+            naming: 'pascal',
+            extension: 'tsx',
+            directory: './src/components/icons',
+        },
+        // Framework-specific configurations
+        react: {
+            componentType: 'functional',
+            forwardRef: true,
+            memo: false,
+            propsInterface: 'SVGProps',
+            styledComponents: false,
+            cssModules: false,
+        },
+        vue: {
+            api: 'composition',
+            setup: true,
+            typescript: true,
+            scoped: true,
+            cssVariables: true,
+        },
+        angular: {
+            standalone: true,
+            signals: true,
+            changeDetection: 'OnPush',
+            encapsulation: 'Emulated',
+        },
+        // Legacy support (deprecated)
+        template: {
+            type: 'default',
+        },
+        frameworkOptions: {
+            forwardRef: true,
+            memo: false,
+            scriptSetup: true,
+            standalone: true,
         },
     };
     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 +150,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),
         }));
     }
     /**