svger-cli 2.0.1 → 2.0.2

package/{src/index.ts → dist/index.js}

@@ -1,235 +1,157 @@
 /**
  * SVGER-CLI - Zero-Dependency SVG to React Component Generator
- * 
+ *
  * A high-performance, framework-agnostic SVG processing toolkit with enterprise-grade
  * architecture and comprehensive styling capabilities.
- * 
+ *
  * @version 2.0.0
  * @author SVGER-CLI Development Team
  * @license MIT
  */
-
 // ============================================================================
 // CORE SERVICES
 // ============================================================================
-
 /**
  * Logger Service - Professional logging with configurable levels and color formatting
  * Provides: debug, info, warn, error, success methods with timestamp and context
  */
 export { LoggerService, logger } from './core/logger.js';
-
 /**
  * Configuration Management Service - Centralized configuration with validation and caching
  * Provides: config loading, validation, defaults, and file-based persistence
  */
 export { ConfigService, configService } from './services/config.js';
-
 /**
  * Error Handler - Comprehensive error management with recovery strategies
  * Provides: structured error handling, recovery mechanisms, and user-friendly messages
  */
 export { SVGErrorHandler, errorHandler, withErrorHandling, handleErrors } from './core/error-handler.js';
-
 // ============================================================================
 // PROCESSING ENGINES
 // ============================================================================
-
 /**
  * SVG Processor - Core SVG content processing and React component generation
  * Provides: SVG parsing, optimization, React component generation, and batch processing
  */
 export { SVGProcessor, svgProcessor } from './processors/svg-processor.js';
-
 /**
  * Performance Engine - Advanced optimization for batch processing and parallel execution
  * Provides: batch processing, caching, memory optimization, and performance monitoring
  */
 export { PerformanceEngine, performanceEngine } from './core/performance-engine.js';
-
 /**
  * Style Compiler - Comprehensive styling system with responsive design and theming
  * Provides: CSS generation, theme management, responsive values, and style optimization
  */
 export { SVGStyleCompiler, styleCompiler } from './core/style-compiler.js';
-
 // ============================================================================
 // TEMPLATE SYSTEMS
 // ============================================================================
-
 /**
  * Template Manager - Extensible template system for React component generation
  * Provides: multiple component patterns (functional, class, forwardRef, styled-components)
  */
 export { TemplateManager, templateManager } from './core/template-manager.js';
-
 /**
  * Framework Template Engine - Universal template generator supporting multiple UI frameworks
  * Provides: React, Vue, Svelte, Angular, Solid, Preact, Lit, and Vanilla JS components
  */
-export { 
-  FrameworkTemplateEngine, 
-  frameworkTemplateEngine,
-  type FrameworkType,
-  type FrameworkOptions 
-} from './core/framework-templates.js';
-
+export { FrameworkTemplateEngine, frameworkTemplateEngine } from './core/framework-templates.js';
 // ============================================================================
 // PLUGIN ARCHITECTURE
 // ============================================================================
-
 /**
  * Plugin Manager - Extensible plugin system for SVG processing enhancements
  * Provides: plugin registration, lifecycle management, and content processing pipeline
  */
 export { PluginManager, pluginManager } from './core/plugin-manager.js';
-
 // ============================================================================
 // UTILITY SERVICES
 // ============================================================================
-
 /**
  * Native Node.js Utilities - Zero-dependency replacements for external libraries
  * Provides: file operations, string manipulation, CLI parsing, and file watching
  */
-export { 
-  toPascalCase, 
-  FileSystem, 
-  CLI, 
-  FileWatcher 
-} from './utils/native.js';
-
+export { toPascalCase, FileSystem, CLI, FileWatcher } from './utils/native.js';
 /**
  * File System Lock Functions - Concurrent file operation safety with advisory locking
  * Provides: file locking, unlocking, and lock status checking for safe concurrent access
  */
 export { lockFiles, unlockFiles, isLocked } from './lock.js';
-
 /**
  * File System Watcher - Real-time file system monitoring with change detection
  * Provides: directory watching, file change detection, and event-driven processing
  */
 export { watchSVGs } from './watch.js';
-
 /**
  * Project Builder - Automated project structure creation and dependency management
  * Provides: project scaffolding, dependency resolution, and build automation
  */
 export { buildAll, generateSVG } from './builder.js';
-
 /**
  * Content Cleaner - SVG content optimization and sanitization utilities
  * Provides: SVG cleaning, attribute normalization, and content optimization
  */
 export { clean } from './clean.js';
-
-// ============================================================================
-// TYPE DEFINITIONS
-// ============================================================================
-
-/**
- * TypeScript Type Definitions - Comprehensive type system for all interfaces and configurations
- * Provides: complete type safety for all operations, configurations, and data structures
- */
-export type {
-  // Core configuration types
-  SVGConfig,
-  ComponentGenerationOptions,
-  
-  // Processing types
-  SVGProcessorResult,
-  ProcessingJob,
-  ProcessingStatus,
-  
-  // Plugin system types
-  Plugin,
-  PluginConfig,
-  
-  // Template system types
-  Template,
-  TemplateConfig,
-  
-  // File operation types
-  WatchOptions
-} from './types/index.js';
-
-/**
- * Error handling types - Available from core error handler
- */
-export type { SVGError, ErrorRecoveryStrategy } from './core/error-handler.js';
-
 // ============================================================================
 // TEMPLATES
 // ============================================================================
-
 /**
  * Component Templates - Pre-built component templates for various use cases
  * Provides: functional React component template with TypeScript support
  */
 export { reactTemplate } from './templates/ComponentTemplate.js';
-
 // ============================================================================
 // CONVENIENCE API
 // ============================================================================
-
 // Import instances for the convenience API
 import { svgProcessor } from './processors/svg-processor.js';
 import { watchSVGs } from './watch.js';
 import { clean } from './clean.js';
 import { buildAll } from './builder.js';
-
 /**
  * Quick Start API - Simplified API for common operations
  * High-level functions for typical SVG processing workflows
  */
 export const SVGER = {
-  /**
-   * Process single SVG file to React component
-   */
-  processFile: svgProcessor.processSVGFile.bind(svgProcessor),
-  
-  /**
-   * Process multiple SVG files in batch
-   */
-  processBatch: svgProcessor.processBatch.bind(svgProcessor),
-  
-  /**
-   * Generate framework-agnostic component
-   */
-  generateFrameworkComponent: svgProcessor.generateFrameworkComponent.bind(svgProcessor),
-  
-  /**
-   * Watch directory for changes
-   */
-  watch: watchSVGs,
-  
-  /**
-   * Clean and optimize directory
-   */
-  clean,
-  
-  /**
-   * Build all SVG files in directory
-   */
-  build: buildAll
-} as const;
-
+    /**
+     * Process single SVG file to React component
+     */
+    processFile: svgProcessor.processSVGFile.bind(svgProcessor),
+    /**
+     * Process multiple SVG files in batch
+     */
+    processBatch: svgProcessor.processBatch.bind(svgProcessor),
+    /**
+     * Generate framework-agnostic component
+     */
+    generateFrameworkComponent: svgProcessor.generateFrameworkComponent.bind(svgProcessor),
+    /**
+     * Watch directory for changes
+     */
+    watch: watchSVGs,
+    /**
+     * Clean and optimize directory
+     */
+    clean,
+    /**
+     * Build all SVG files in directory
+     */
+    build: buildAll
+};
 // ============================================================================
 // VERSION INFORMATION
 // ============================================================================
-
 /**
  * Package Version Information
  */
 export const VERSION = '2.0.0';
 export const PACKAGE_NAME = 'svger-cli';
-
 // ============================================================================
 // DEFAULT EXPORT
 // ============================================================================
-
 /**
  * Default export - Primary SVG processor instance for quick access
  * Most common entry point for programmatic usage
  */
-export default svgProcessor;
+export default svgProcessor;

package/dist/processors/svg-processor.d.ts

@@ -0,0 +1,67 @@
+import { ComponentGenerationOptions, SVGProcessorResult } from '../types/index.js';
+/**
+ * SVG content processor and component generator
+ */
+export declare class SVGProcessor {
+    private static instance;
+    private processingQueue;
+    private jobCounter;
+    private constructor();
+    static getInstance(): SVGProcessor;
+    /**
+     * Clean and optimize SVG content
+     */
+    cleanSVGContent(svgContent: string): string;
+    /**
+     * Extract viewBox from SVG content
+     */
+    extractViewBox(svgContent: string): string | null;
+    /**
+     * Generate component name from filename
+     */
+    generateComponentName(fileName: string): string;
+    /**
+     * Generate React component from SVG content
+     */
+    generateComponent(componentName: string, svgContent: string, options?: Partial<ComponentGenerationOptions>): Promise<string>;
+    /**
+     * Generate framework-agnostic component from SVG content
+     */
+    generateFrameworkComponent(componentName: string, svgContent: string, options: ComponentGenerationOptions): Promise<string>;
+    /**
+     * Process multiple SVG files in batch with performance optimization
+     */
+    processBatch(files: Array<{
+        path: string;
+        outputDir: string;
+        options?: Partial<ComponentGenerationOptions>;
+    }>, config?: {
+        batchSize?: number;
+        parallel?: boolean;
+        maxConcurrency?: number;
+    }): Promise<Array<{
+        success: boolean;
+        filePath: string;
+        error?: Error;
+        duration: number;
+    }>>;
+    /**
+     * Process a single SVG file
+     */
+    processSVGFile(svgFilePath: string, outputDir: string, options?: Partial<ComponentGenerationOptions>): Promise<SVGProcessorResult>;
+    /**
+     * Get processing statistics
+     */
+    getProcessingStats(): {
+        total: number;
+        pending: number;
+        processing: number;
+        completed: number;
+        failed: number;
+    };
+    /**
+     * Clear processing queue
+     */
+    clearQueue(): void;
+}
+export declare const svgProcessor: SVGProcessor;

package/dist/processors/svg-processor.js

@@ -0,0 +1,225 @@
+import path from 'path';
+import { toPascalCase, FileSystem } from '../utils/native.js';
+import { logger } from '../core/logger.js';
+import { performanceEngine } from '../core/performance-engine.js';
+import { frameworkTemplateEngine } from '../core/framework-templates.js';
+/**
+ * SVG content processor and component generator
+ */
+export class SVGProcessor {
+    static instance;
+    processingQueue = new Map();
+    jobCounter = 0;
+    constructor() { }
+    static getInstance() {
+        if (!SVGProcessor.instance) {
+            SVGProcessor.instance = new SVGProcessor();
+        }
+        return SVGProcessor.instance;
+    }
+    /**
+     * Clean and optimize SVG content
+     */
+    cleanSVGContent(svgContent) {
+        logger.debug('Cleaning SVG content');
+        return svgContent
+            // Remove XML declaration
+            .replace(/<\?xml.*?\?>/g, '')
+            // Remove DOCTYPE declaration
+            .replace(/<!DOCTYPE.*?>/g, '')
+            // Remove comments
+            .replace(/<!--[\s\S]*?-->/g, '')
+            // Normalize whitespace
+            .replace(/\r?\n|\r/g, '')
+            .replace(/\s{2,}/g, ' ')
+            // Remove inline styles (they interfere with React styling)
+            .replace(/style="[^"]*"/g, '')
+            // Remove xmlns attributes (React will handle these)
+            .replace(/\s+xmlns(:xlink)?="[^"]*"/g, '')
+            // Convert attributes to camelCase for React
+            .replace(/fill-rule/g, 'fillRule')
+            .replace(/clip-rule/g, 'clipRule')
+            .replace(/stroke-width/g, 'strokeWidth')
+            .replace(/stroke-linecap/g, 'strokeLinecap')
+            .replace(/stroke-linejoin/g, 'strokeLinejoin')
+            .replace(/stroke-miterlimit/g, 'strokeMiterlimit')
+            .replace(/stroke-dasharray/g, 'strokeDasharray')
+            .replace(/stroke-dashoffset/g, 'strokeDashoffset')
+            .replace(/font-family/g, 'fontFamily')
+            .replace(/font-size/g, 'fontSize')
+            .replace(/font-weight/g, 'fontWeight')
+            .replace(/text-anchor/g, 'textAnchor')
+            // Remove outer SVG tag and keep inner content
+            .trim()
+            .replace(/^<svg[^>]*>([\s\S]*)<\/svg>$/i, '$1')
+            .trim();
+    }
+    /**
+     * Extract viewBox from SVG content
+     */
+    extractViewBox(svgContent) {
+        const viewBoxMatch = svgContent.match(/viewBox=["']([^"']+)["']/i);
+        return viewBoxMatch ? viewBoxMatch[1] : null;
+    }
+    /**
+     * Generate component name from filename
+     */
+    generateComponentName(fileName) {
+        const baseName = path.basename(fileName, '.svg');
+        const componentName = toPascalCase(baseName);
+        // Ensure component name starts with uppercase letter
+        if (!/^[A-Z]/.test(componentName)) {
+            return `Svg${componentName}`;
+        }
+        return componentName;
+    }
+    /**
+     * Generate React component from SVG content
+     */
+    async generateComponent(componentName, svgContent, options = {}) {
+        try {
+            // Clean and optimize SVG content
+            const cleanedContent = this.cleanSVGContent(svgContent);
+            // Apply plugins (no plugin configs for now, just process directly)
+            const processedContent = cleanedContent;
+            // Create full options object with required fields
+            const fullOptions = {
+                componentName,
+                svgContent: processedContent,
+                framework: options.framework || 'react',
+                typescript: options.typescript !== undefined ? options.typescript : true,
+                ...options
+            };
+            // Use framework template engine directly
+            const component = frameworkTemplateEngine.generateComponent(fullOptions);
+            logger.debug(`Generated component: ${componentName}`);
+            return component;
+        }
+        catch (error) {
+            logger.error(`Failed to generate component ${componentName}:`, error);
+            throw error;
+        }
+    }
+    /**
+     * Generate framework-agnostic component from SVG content
+     */
+    async generateFrameworkComponent(componentName, svgContent, options) {
+        try {
+            // Optimize SVG content based on framework requirements
+            const optimizationLevel = options.framework === 'vanilla' ? 'maximum' : 'balanced';
+            const optimizedContent = performanceEngine.optimizeSVGContent(svgContent, optimizationLevel);
+            // Generate framework-specific component
+            const component = frameworkTemplateEngine.generateComponent({
+                ...options,
+                componentName,
+                svgContent: optimizedContent
+            });
+            logger.debug(`Generated ${options.framework} component: ${componentName}`);
+            return component;
+        }
+        catch (error) {
+            logger.error(`Failed to generate ${options.framework} component ${componentName}:`, error);
+            throw error;
+        }
+    }
+    /**
+     * Process multiple SVG files in batch with performance optimization
+     */
+    async processBatch(files, config = {}) {
+        logger.info(`Starting batch processing of ${files.length} files`);
+        try {
+            const results = await performanceEngine.processBatch(files, config);
+            // Log performance metrics
+            const metrics = performanceEngine.getPerformanceMetrics();
+            if (metrics.memoryUsage.recommendations.length > 0) {
+                logger.warn('Performance recommendations:', metrics.memoryUsage.recommendations);
+            }
+            return results;
+        }
+        catch (error) {
+            logger.error('Batch processing failed:', error);
+            throw error;
+        }
+    }
+    /**
+     * Process a single SVG file
+     */
+    async processSVGFile(svgFilePath, outputDir, options = {}) {
+        const jobId = `job-${++this.jobCounter}`;
+        const job = {
+            id: jobId,
+            filePath: svgFilePath,
+            status: 'processing',
+            startTime: Date.now()
+        };
+        this.processingQueue.set(jobId, job);
+        logger.debug(`Processing SVG file: ${svgFilePath}`);
+        try {
+            // Read SVG content
+            const svgContent = await FileSystem.readFile(svgFilePath, 'utf-8');
+            // Generate component name
+            const componentName = this.generateComponentName(path.basename(svgFilePath));
+            // Generate component code
+            const componentCode = await this.generateComponent(componentName, svgContent, options);
+            // Ensure output directory exists
+            await FileSystem.ensureDir(outputDir);
+            // Get correct file extension based on framework
+            const framework = options.framework || 'react';
+            const typescript = options.typescript !== undefined ? options.typescript : true;
+            const fileExtension = frameworkTemplateEngine.getFileExtension(framework, typescript);
+            // Write component file
+            const outputFilePath = path.join(outputDir, `${componentName}.${fileExtension}`);
+            await FileSystem.writeFile(outputFilePath, componentCode, 'utf-8');
+            // Update job status
+            job.status = 'completed';
+            job.endTime = Date.now();
+            const result = {
+                success: true,
+                componentName,
+                filePath: outputFilePath
+            };
+            logger.success(`Generated component: ${componentName}.${fileExtension}`);
+            return result;
+        }
+        catch (error) {
+            job.status = 'failed';
+            job.endTime = Date.now();
+            job.error = error;
+            const result = {
+                success: false,
+                componentName: '',
+                filePath: svgFilePath,
+                error: error
+            };
+            logger.error(`Failed to process ${svgFilePath}:`, error);
+            return result;
+        }
+        finally {
+            // Clean up completed jobs after some time
+            setTimeout(() => {
+                this.processingQueue.delete(jobId);
+            }, 30000); // 30 seconds
+        }
+    }
+    /**
+     * Get processing statistics
+     */
+    getProcessingStats() {
+        const jobs = Array.from(this.processingQueue.values());
+        return {
+            total: jobs.length,
+            pending: jobs.filter(j => j.status === 'pending').length,
+            processing: jobs.filter(j => j.status === 'processing').length,
+            completed: jobs.filter(j => j.status === 'completed').length,
+            failed: jobs.filter(j => j.status === 'failed').length,
+        };
+    }
+    /**
+     * Clear processing queue
+     */
+    clearQueue() {
+        this.processingQueue.clear();
+    }
+}
+// Export singleton instance
+export const svgProcessor = SVGProcessor.getInstance();

package/dist/services/config.d.ts

@@ -0,0 +1,55 @@
+import { SVGConfig } from '../types/index.js';
+/**
+ * Professional configuration management service
+ */
+export declare class ConfigService {
+    private static instance;
+    private static readonly CONFIG_FILE;
+    private cachedConfig;
+    private constructor();
+    static getInstance(): ConfigService;
+    /**
+     * Get the default configuration
+     */
+    getDefaultConfig(): SVGConfig;
+    /**
+     * Get configuration file path
+     */
+    private getConfigPath;
+    /**
+     * Read configuration from file with caching
+     */
+    readConfig(): SVGConfig;
+    /**
+     * Write configuration to file
+     */
+    writeConfig(config: SVGConfig): void;
+    /**
+     * Initialize configuration with defaults
+     */
+    initConfig(): Promise<void>;
+    /**
+     * Set a specific configuration value
+     */
+    setConfig(key: string, value: any): void;
+    /**
+     * Get a specific configuration value
+     */
+    getConfig(key?: string): any;
+    /**
+     * Validate configuration
+     */
+    validateConfig(config?: SVGConfig): {
+        valid: boolean;
+        errors: string[];
+    };
+    /**
+     * Clear cached configuration (useful for testing)
+     */
+    clearCache(): void;
+    /**
+     * Display current configuration
+     */
+    showConfig(): void;
+}
+export declare const configService: ConfigService;