svger-cli 2.0.1 → 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.d.ts

@@ -0,0 +1,63 @@
+/**
+ * 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 declare class SVGErrorHandler {
+    private static instance;
+    private errorHistory;
+    private recoveryStrategies;
+    private readonly maxHistorySize;
+    private constructor();
+    static getInstance(): SVGErrorHandler;
+    /**
+     * Handle an error with context and attempted recovery
+     */
+    handleError(error: Error | SVGError, context?: Record<string, any>): Promise<{
+        recovered: boolean;
+        result?: any;
+    }>;
+    /**
+     * Register a custom error recovery strategy
+     */
+    registerRecoveryStrategy(errorCode: string, strategy: ErrorRecoveryStrategy): void;
+    /**
+     * Get error statistics
+     */
+    getErrorStats(): {
+        total: number;
+        bySeverity: Record<string, number>;
+        byCode: Record<string, number>;
+        recentErrors: SVGError[];
+    };
+    /**
+     * Clear error history
+     */
+    clearHistory(): void;
+    private normalizeError;
+    private categorizeError;
+    private determineSeverity;
+    private logError;
+    private addToHistory;
+    private attemptRecovery;
+    private setupDefaultStrategies;
+}
+export declare const errorHandler: SVGErrorHandler;
+/**
+ * Utility function to wrap async operations with error handling
+ */
+export declare function withErrorHandling<T>(operation: () => Promise<T>, context?: Record<string, any>): Promise<T | null>;
+/**
+ * Decorator for automatic error handling
+ */
+export declare function handleErrors(context?: Record<string, any>): (target: any, propertyName: string, descriptor: PropertyDescriptor) => void;

package/dist/core/error-handler.js

@@ -0,0 +1,227 @@
+import { logger } from '../core/logger.js';
+export class SVGErrorHandler {
+    static instance;
+    errorHistory = [];
+    recoveryStrategies = new Map();
+    maxHistorySize = 100;
+    constructor() {
+        this.setupDefaultStrategies();
+    }
+    static getInstance() {
+        if (!SVGErrorHandler.instance) {
+            SVGErrorHandler.instance = new SVGErrorHandler();
+        }
+        return SVGErrorHandler.instance;
+    }
+    /**
+     * Handle an error with context and attempted recovery
+     */
+    async handleError(error, context) {
+        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
+     */
+    registerRecoveryStrategy(errorCode, strategy) {
+        this.recoveryStrategies.set(errorCode, strategy);
+        logger.debug(`Recovery strategy registered for error code: ${errorCode}`);
+    }
+    /**
+     * Get error statistics
+     */
+    getErrorStats() {
+        const bySeverity = {};
+        const byCode = {};
+        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
+     */
+    clearHistory() {
+        this.errorHistory = [];
+        logger.debug('Error history cleared');
+    }
+    // Private methods
+    normalizeError(error, context) {
+        if ('code' in error && 'severity' in error) {
+            return error;
+        }
+        // Convert regular Error to SVGError
+        const regularError = error;
+        return {
+            code: this.categorizeError(regularError),
+            message: regularError.message,
+            severity: this.determineSeverity(regularError),
+            context: context || {},
+            timestamp: Date.now(),
+            stack: regularError.stack,
+        };
+    }
+    categorizeError(error) {
+        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';
+    }
+    determineSeverity(error) {
+        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';
+    }
+    logError(error) {
+        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;
+        }
+    }
+    addToHistory(error) {
+        this.errorHistory.push(error);
+        // Maintain history size limit
+        if (this.errorHistory.length > this.maxHistorySize) {
+            this.errorHistory = this.errorHistory.slice(-this.maxHistorySize);
+        }
+    }
+    async attemptRecovery(error, context) {
+        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 };
+        }
+    }
+    setupDefaultStrategies() {
+        // 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(operation, context) {
+    try {
+        return await operation();
+    }
+    catch (error) {
+        const result = await errorHandler.handleError(error, context);
+        if (result.recovered) {
+            return result.result;
+        }
+        // Re-throw if not recovered and severity is high
+        const svgError = error;
+        if (svgError.severity === 'high' || svgError.severity === 'critical') {
+            throw error;
+        }
+        return null;
+    }
+}
+/**
+ * Decorator for automatic error handling
+ */
+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,
+            });
+        };
+    };
+}

package/dist/core/framework-templates.d.ts

@@ -0,0 +1,17 @@
+import { ComponentGenerationOptions, FrameworkType } from '../types/index.js';
+export type { FrameworkType, FrameworkOptions } from '../types/index.js';
+export declare class FrameworkTemplateEngine {
+    generateComponent(options: ComponentGenerationOptions): string;
+    getFileExtension(framework: FrameworkType, typescript?: boolean): string;
+    private parseSVG;
+    private generateReactComponent;
+    private generateVueComponent;
+    private generateSvelteComponent;
+    private generateAngularComponent;
+    private generateSolidComponent;
+    private generatePreactComponent;
+    private generateLitComponent;
+    private generateVanillaComponent;
+    private toKebabCase;
+}
+export declare const frameworkTemplateEngine: FrameworkTemplateEngine;