svger-cli 1.0.6 → 1.0.8

package/src/cli.ts

@@ -1,99 +1,179 @@
 #!/usr/bin/env node
-import { Command } from "commander";
-import { buildAll, generateSVG } from "./builder.js";
-import { lockFiles, unlockFiles } from "./lock.js";
-import { initConfig, setConfig, showConfig } from "./config.js";
-import { watchSVGs } from "./watch.js";
-import { clean } from "./clean.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 Command();
+const program = new CLI();
 
 /**
  * svger-cli CLI
- * Custom SVG to React component converter.
+ * Custom SVG to Angular, React, Vue, Svelte, Solid, and other component converter.
  */
 program
   .name("svger-cli")
-  .description("Custom SVG to React component converter")
-  .version("1.0.0");
+  .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.
- *
- * @param {string} src - Source folder containing SVG files.
- * @param {string} out - Output folder for generated React components.
  */
 program
   .command("build <src> <out>")
   .description("Build all SVGs from source to output")
-  .action(async (src: string, out: string) => {
-    console.log("🛠️  Building SVGs...");
-    console.log("Source:", src);
-    console.log("Output:", out);
-    await buildAll({ src, out });
+  .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: string[], opts: Record<string, any>) => {
+    try {
+      const [src, out] = args;
+      
+      // Build config from CLI options
+      const buildConfig: any = { src, out };
+      
+      if (opts.framework) {
+        buildConfig.framework = opts.framework;
+      }
+      
+      if (opts.typescript !== undefined) {
+        buildConfig.typescript = opts.typescript;
+      }
+      
+      // Framework-specific options
+      const frameworkOptions: any = {};
+      
+      if (opts.composition !== undefined) {
+        frameworkOptions.scriptSetup = opts.composition;
+      }
+      
+      if (opts.standalone !== undefined) {
+        frameworkOptions.standalone = opts.standalone;
+      }
+      
+      if (opts.signals !== undefined) {
+        frameworkOptions.signals = opts.signals;
+      }
+      
+      if (Object.keys(frameworkOptions).length > 0) {
+        buildConfig.frameworkOptions = frameworkOptions;
+      }
+      
+      await svgService.buildAll(buildConfig);
+    } catch (error) {
+      logger.error('Build failed:', error);
+      process.exit(1);
+    }
   });
 
 // -------- Watch Command --------
 /**
  * Watch a source folder and rebuild SVGs automatically on changes.
- *
- * @param {string} src - Source folder to watch.
- * @param {string} out - Output folder for generated components.
  */
 program
   .command("watch <src> <out>")
   .description("Watch source folder and rebuild SVGs automatically")
-  .action((src: string, out: string) => {
-    console.log("🚀 Starting watch mode...");
-    watchSVGs({ src, out });
+  .action(async (args: string[]) => {
+    try {
+      const [src, out] = args;
+      await svgService.startWatching({ src, out });
+      
+      // Keep the process running
+      process.on('SIGINT', () => {
+        logger.info('Shutting down watch mode...');
+        svgService.shutdown();
+        process.exit(0);
+      });
+    } catch (error) {
+      logger.error('Watch mode failed:', error);
+      process.exit(1);
+    }
   });
 
 // -------- Generate Single SVG --------
 /**
- * Generate a React component from a single SVG file.
- *
- * @param {string} svgFile - Path to the SVG file.
- * @param {string} out - Output folder for the generated component.
+ * Generate a component from a single SVG file.
  */
 program
   .command("generate <svgFile> <out>")
-  .description("Convert a single SVG file into a React component")
-  .action(async (svgFile: string, out: string) => {
-    await generateSVG({ svgFile, outDir: 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: string[], opts: Record<string, any>) => {
+    try {
+      const [svgFile, out] = args;
+      
+      const generateConfig: any = { svgFile, outDir: out };
+      
+      if (opts.framework) {
+        generateConfig.framework = opts.framework;
+      }
+      
+      if (opts.typescript !== undefined) {
+        generateConfig.typescript = opts.typescript;
+      }
+      
+      const frameworkOptions: any = {};
+      
+      if (opts.composition !== undefined) {
+        frameworkOptions.scriptSetup = opts.composition;
+      }
+      
+      if (opts.standalone !== undefined) {
+        frameworkOptions.standalone = opts.standalone;
+      }
+      
+      if (Object.keys(frameworkOptions).length > 0) {
+        generateConfig.frameworkOptions = frameworkOptions;
+      }
+      
+      await svgService.generateSingle(generateConfig);
+    } catch (error) {
+      logger.error('Generation failed:', error);
+      process.exit(1);
+    }
   });
 
 // -------- Lock / Unlock --------
 /**
  * Lock one or more SVG files to prevent accidental overwrites.
- *
- * @param {string[]} files - Paths to SVG files to lock.
  */
 program
   .command("lock <files...>")
   .description("Lock one or more SVG files")
-  .action((files: string[]) => lockFiles(files));
+  .action((args: string[]) => {
+    try {
+      svgService.lockService.lockFiles(args);
+    } catch (error) {
+      logger.error('Lock operation failed:', error);
+      process.exit(1);
+    }
+  });
 
 /**
  * Unlock one or more SVG files to allow modifications.
- *
- * @param {string[]} files - Paths to SVG files to unlock.
  */
 program
   .command("unlock <files...>")
   .description("Unlock one or more SVG files")
-  .action((files: string[]) => unlockFiles(files));
+  .action((args: string[]) => {
+    try {
+      svgService.lockService.unlockFiles(args);
+    } catch (error) {
+      logger.error('Unlock operation failed:', error);
+      process.exit(1);
+    }
+  });
 
 // -------- Config --------
 /**
  * Manage svger-cli configuration.
- *
- * Options:
- * --init: Create default .svgconfig.json
- * --set key=value: Set a configuration value
- * --show: Show current configuration
- *
- * @param {Object} opts - CLI options
  */
 program
   .command("config")
@@ -101,32 +181,41 @@ program
   .option("--init", "Create default .svgconfig.json")
   .option("--set <keyValue>", "Set config key=value")
   .option("--show", "Show current config")
-  .action((opts) => {
-    if (opts.init) return initConfig();
-    if (opts.set) {
-      const [key, value] = opts.set.split("=");
-      if (!key || value === undefined) {
-        console.error("❌ Invalid format. Use key=value");
-        process.exit(1);
+  .action(async (args: string[], opts: Record<string, any>) => {
+    try {
+      if (opts.init) return await configService.initConfig();
+      if (opts.set) {
+        const [key, value] = opts.set.split("=");
+        if (!key || value === undefined) {
+          logger.error("Invalid format. Use key=value");
+          process.exit(1);
+        }
+        const parsedValue = !isNaN(Number(value)) ? Number(value) : value;
+        return configService.setConfig(key, parsedValue);
       }
-      const parsedValue = !isNaN(Number(value)) ? Number(value) : value;
-      return setConfig(key, parsedValue);
+      if (opts.show) return configService.showConfig();
+      logger.error("No option provided. Use --init, --set, or --show");
+    } catch (error) {
+      logger.error('Config operation failed:', error);
+      process.exit(1);
     }
-    if (opts.show) return showConfig();
-    console.log("❌ No option provided. Use --init, --set, or --show");
   });
 
 // -------- Clean Command --------
 /**
  * Remove all generated SVG React components from an output folder.
- *
- * @param {string} out - Output folder to clean.
  */
 program
   .command("clean <out>")
   .description("Remove all generated SVG React components from output folder")
-  .action(async (out: string) => {
-    await clean(out);
+  .action(async (args: string[]) => {
+    try {
+      const [out] = args;
+      await svgService.clean(out);
+    } catch (error) {
+      logger.error('Clean operation failed:', error);
+      process.exit(1);
+    }
   });
 
 program.parse();

package/src/config.ts

@@ -1,5 +1,5 @@
-import fs from "fs-extra";
 import path from "path";
+import { FileSystem } from "./utils/native.js";
 
 const CONFIG_FILE = ".svgconfig.json";
 
@@ -18,8 +18,7 @@ function getConfigPath(): string {
  * @returns {Record<string, any>} Configuration object. Returns an empty object if no config file exists.
  */
 export function readConfig(): Record<string, any> {
-  if (!fs.existsSync(getConfigPath())) return {};
-  return fs.readJSONSync(getConfigPath());
+  return FileSystem.readJSONSync(getConfigPath());
 }
 
 /**
@@ -28,15 +27,15 @@ export function readConfig(): Record<string, any> {
  * @param {Record<string, any>} config - Configuration object to write.
  */
 export function writeConfig(config: Record<string, any>) {
-  fs.writeJSONSync(getConfigPath(), config, { spaces: 2 });
+  FileSystem.writeJSONSync(getConfigPath(), config, { spaces: 2 });
 }
 
 /**
  * Initialize the svger-cli configuration with default values.
  * If a config file already exists, this function will not overwrite it.
  */
-export function initConfig() {
-  if (fs.existsSync(getConfigPath())) {
+export async function initConfig() {
+  if (await FileSystem.exists(getConfigPath())) {
     console.log("⚠️  Config file already exists:", getConfigPath());
     return;
   }

package/src/core/error-handler.ts

@@ -0,0 +1,303 @@
+import { logger } from '../core/logger.js';
+
+/**
+ * Enhanced error handling system with detailed error tracking and recovery
+ */
+
+export interface SVGError {
+  code: string;
+  message: string;
+  severity: 'low' | 'medium' | 'high' | 'critical';
+  context?: Record<string, any>;
+  timestamp: number;
+  stack?: string;
+}
+
+export interface ErrorRecoveryStrategy {
+  canRecover(error: SVGError): boolean;
+  recover(error: SVGError, context?: any): Promise<any>;
+}
+
+export class SVGErrorHandler {
+  private static instance: SVGErrorHandler;
+  private errorHistory: SVGError[] = [];
+  private recoveryStrategies: Map<string, ErrorRecoveryStrategy> = new Map();
+  private readonly maxHistorySize = 100;
+
+  private constructor() {
+    this.setupDefaultStrategies();
+  }
+
+  public static getInstance(): SVGErrorHandler {
+    if (!SVGErrorHandler.instance) {
+      SVGErrorHandler.instance = new SVGErrorHandler();
+    }
+    return SVGErrorHandler.instance;
+  }
+
+  /**
+   * Handle an error with context and attempted recovery
+   */
+  public async handleError(
+    error: Error | SVGError,
+    context?: Record<string, any>
+  ): Promise<{ recovered: boolean; result?: any }> {
+    const svgError = this.normalizeError(error, context);
+    
+    // Log error based on severity
+    this.logError(svgError);
+    
+    // Add to history
+    this.addToHistory(svgError);
+    
+    // Attempt recovery
+    const recoveryResult = await this.attemptRecovery(svgError, context);
+    
+    return recoveryResult;
+  }
+
+  /**
+   * Register a custom error recovery strategy
+   */
+  public registerRecoveryStrategy(errorCode: string, strategy: ErrorRecoveryStrategy): void {
+    this.recoveryStrategies.set(errorCode, strategy);
+    logger.debug(`Recovery strategy registered for error code: ${errorCode}`);
+  }
+
+  /**
+   * Get error statistics
+   */
+  public getErrorStats(): {
+    total: number;
+    bySeverity: Record<string, number>;
+    byCode: Record<string, number>;
+    recentErrors: SVGError[];
+  } {
+    const bySeverity: Record<string, number> = {};
+    const byCode: Record<string, number> = {};
+
+    this.errorHistory.forEach(error => {
+      bySeverity[error.severity] = (bySeverity[error.severity] || 0) + 1;
+      byCode[error.code] = (byCode[error.code] || 0) + 1;
+    });
+
+    return {
+      total: this.errorHistory.length,
+      bySeverity,
+      byCode,
+      recentErrors: this.errorHistory.slice(-10)
+    };
+  }
+
+  /**
+   * Clear error history
+   */
+  public clearHistory(): void {
+    this.errorHistory = [];
+    logger.debug('Error history cleared');
+  }
+
+  // Private methods
+
+  private normalizeError(error: Error | SVGError, context?: Record<string, any>): SVGError {
+    if ('code' in error && 'severity' in error) {
+      return error as SVGError;
+    }
+
+    // Convert regular Error to SVGError
+    const regularError = error as Error;
+    return {
+      code: this.categorizeError(regularError),
+      message: regularError.message,
+      severity: this.determineSeverity(regularError),
+      context: context || {},
+      timestamp: Date.now(),
+      stack: regularError.stack
+    };
+  }
+
+  private categorizeError(error: Error): string {
+    const message = error.message.toLowerCase();
+    
+    if (message.includes('file not found') || message.includes('enoent')) {
+      return 'FILE_NOT_FOUND';
+    }
+    if (message.includes('permission') || message.includes('eacces')) {
+      return 'PERMISSION_DENIED';
+    }
+    if (message.includes('parse') || message.includes('syntax')) {
+      return 'PARSE_ERROR';
+    }
+    if (message.includes('timeout')) {
+      return 'TIMEOUT_ERROR';
+    }
+    if (message.includes('network') || message.includes('connection')) {
+      return 'NETWORK_ERROR';
+    }
+    if (message.includes('svg') && message.includes('invalid')) {
+      return 'INVALID_SVG';
+    }
+    
+    return 'UNKNOWN_ERROR';
+  }
+
+  private determineSeverity(error: Error): SVGError['severity'] {
+    const message = error.message.toLowerCase();
+    
+    if (message.includes('critical') || message.includes('fatal')) {
+      return 'critical';
+    }
+    if (message.includes('file not found') || message.includes('permission')) {
+      return 'high';
+    }
+    if (message.includes('parse') || message.includes('invalid')) {
+      return 'medium';
+    }
+    
+    return 'low';
+  }
+
+  private logError(error: SVGError): void {
+    const logMessage = `[${error.code}] ${error.message}`;
+    
+    switch (error.severity) {
+      case 'critical':
+        logger.error('CRITICAL:', logMessage, error.context);
+        break;
+      case 'high':
+        logger.error('HIGH:', logMessage, error.context);
+        break;
+      case 'medium':
+        logger.warn('MEDIUM:', logMessage, error.context);
+        break;
+      case 'low':
+        logger.info('LOW:', logMessage, error.context);
+        break;
+    }
+  }
+
+  private addToHistory(error: SVGError): void {
+    this.errorHistory.push(error);
+    
+    // Maintain history size limit
+    if (this.errorHistory.length > this.maxHistorySize) {
+      this.errorHistory = this.errorHistory.slice(-this.maxHistorySize);
+    }
+  }
+
+  private async attemptRecovery(
+    error: SVGError,
+    context?: any
+  ): Promise<{ recovered: boolean; result?: any }> {
+    const strategy = this.recoveryStrategies.get(error.code);
+    
+    if (!strategy) {
+      logger.debug(`No recovery strategy found for error code: ${error.code}`);
+      return { recovered: false };
+    }
+
+    try {
+      if (!strategy.canRecover(error)) {
+        logger.debug(`Recovery strategy declined to handle error: ${error.code}`);
+        return { recovered: false };
+      }
+
+      logger.info(`Attempting recovery for error: ${error.code}`);
+      const result = await strategy.recover(error, context);
+      
+      logger.success(`Successfully recovered from error: ${error.code}`);
+      return { recovered: true, result };
+      
+    } catch (recoveryError) {
+      logger.error(`Recovery failed for error ${error.code}:`, recoveryError);
+      return { recovered: false };
+    }
+  }
+
+  private setupDefaultStrategies(): void {
+    // File not found recovery
+    this.registerRecoveryStrategy('FILE_NOT_FOUND', {
+      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,
+      recover: async (error, context) => {
+        logger.info('Attempting to clean invalid SVG content');
+        
+        // Basic SVG cleanup
+        let cleaned = error.context?.svgContent || '';
+        
+        // Remove potentially problematic content
+        cleaned = cleaned
+          .replace(/<script[\s\S]*?<\/script>/gi, '') // Remove scripts
+          .replace(/<style[\s\S]*?<\/style>/gi, '')   // Remove styles
+          .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,
+      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');
+  }
+}
+
+// Export singleton instance and utilities
+export const errorHandler = SVGErrorHandler.getInstance();
+
+/**
+ * Utility function to wrap async operations with error handling
+ */
+export async function withErrorHandling<T>(
+  operation: () => Promise<T>,
+  context?: Record<string, any>
+): Promise<T | null> {
+  try {
+    return await operation();
+  } catch (error) {
+    const result = await errorHandler.handleError(error as Error, context);
+    
+    if (result.recovered) {
+      return result.result as T;
+    }
+    
+    // Re-throw if not recovered and severity is high
+    const svgError = error as any;
+    if (svgError.severity === 'high' || svgError.severity === 'critical') {
+      throw error;
+    }
+    
+    return null;
+  }
+}
+
+/**
+ * Decorator for automatic error handling
+ */
+export function handleErrors(context?: Record<string, any>) {
+  return function (target: any, propertyName: string, descriptor: PropertyDescriptor) {
+    const method = descriptor.value;
+    
+    descriptor.value = async function (...args: any[]) {
+      return withErrorHandling(
+        () => method.apply(this, args),
+        { method: propertyName, ...context }
+      );
+    };
+  };
+}