svger-cli 1.0.6 → 1.0.7

package/src/index.ts

@@ -0,0 +1,235 @@
+/**
+ * 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';
+
+// ============================================================================
+// 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';
+
+/**
+ * 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;
+
+// ============================================================================
+// 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;

package/src/lock.ts

@@ -1,4 +1,4 @@
-import fs from "fs-extra";
+import fs from "fs";
 import path from "path";
 
 const LOCK_FILE = ".svg-lock";

package/src/processors/svg-processor.ts

@@ -0,0 +1,288 @@
+import path from 'path';
+import { toPascalCase, FileSystem } from '../utils/native.js';
+import { ComponentGenerationOptions, SVGProcessorResult, ProcessingJob, ProcessingStatus } from '../types/index.js';
+import { logger } from '../core/logger.js';
+import { pluginManager } from '../core/plugin-manager.js';
+import { templateManager } from '../core/template-manager.js';
+import { performanceEngine } from '../core/performance-engine.js';
+import { frameworkTemplateEngine } from '../core/framework-templates.js';
+
+/**
+ * SVG content processor and component generator
+ */
+export class SVGProcessor {
+  private static instance: SVGProcessor;
+  private processingQueue: Map<string, ProcessingJob> = new Map();
+  private jobCounter = 0;
+
+  private constructor() {}
+
+  public static getInstance(): SVGProcessor {
+    if (!SVGProcessor.instance) {
+      SVGProcessor.instance = new SVGProcessor();
+    }
+    return SVGProcessor.instance;
+  }
+
+  /**
+   * Clean and optimize SVG content
+   */
+  public cleanSVGContent(svgContent: string): string {
+    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
+   */
+  public extractViewBox(svgContent: string): string | null {
+    const viewBoxMatch = svgContent.match(/viewBox=["']([^"']+)["']/i);
+    return viewBoxMatch ? viewBoxMatch[1] : null;
+  }
+
+  /**
+   * Generate component name from filename
+   */
+  public generateComponentName(fileName: string): string {
+    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
+   */
+  public async generateComponent(
+    componentName: string,
+    svgContent: string,
+    options: Partial<ComponentGenerationOptions> = {}
+  ): Promise<string> {
+    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: ComponentGenerationOptions = {
+        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
+   */
+  public async generateFrameworkComponent(
+    componentName: string,
+    svgContent: string,
+    options: ComponentGenerationOptions
+  ): Promise<string> {
+    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
+   */
+  public async 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 }>> {
+    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
+   */
+  public async processSVGFile(
+    svgFilePath: string,
+    outputDir: string,
+    options: Partial<ComponentGenerationOptions> = {}
+  ): Promise<SVGProcessorResult> {
+    const jobId = `job-${++this.jobCounter}`;
+    const job: ProcessingJob = {
+      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: SVGProcessorResult = {
+        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 as Error;
+
+      const result: SVGProcessorResult = {
+        success: false,
+        componentName: '',
+        filePath: svgFilePath,
+        error: error as 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
+   */
+  public getProcessingStats(): {
+    total: number;
+    pending: number;
+    processing: number;
+    completed: number;
+    failed: number;
+  } {
+    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
+   */
+  public clearQueue(): void {
+    this.processingQueue.clear();
+  }
+}
+
+// Export singleton instance
+export const svgProcessor = SVGProcessor.getInstance();