svger-cli 2.0.1 → 2.0.3

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';
-
+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';
-
+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, toCamelCase, toKebabCase, 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/lock.js

@@ -1,6 +1,6 @@
-import fs from "fs";
-import path from "path";
-const LOCK_FILE = ".svg-lock";
+import fs from 'fs';
+import path from 'path';
+const LOCK_FILE = '.svg-lock';
 /**
  * Get the absolute path to the lock file.
  *
@@ -18,7 +18,7 @@ function readLockFile() {
     if (!fs.existsSync(getLockFilePath()))
         return [];
     try {
-        const data = fs.readFileSync(getLockFilePath(), "utf-8");
+        const data = fs.readFileSync(getLockFilePath(), 'utf-8');
         return JSON.parse(data);
     }
     catch (e) {
@@ -31,7 +31,7 @@ function readLockFile() {
  * @param {string[]} files - Array of SVG file names to lock.
  */
 function writeLockFile(files) {
-    fs.writeFileSync(getLockFilePath(), JSON.stringify(files, null, 2), "utf-8");
+    fs.writeFileSync(getLockFilePath(), JSON.stringify(files, null, 2), 'utf-8');
 }
 /**
  * Lock one or more SVG files to prevent them from being processed.
@@ -43,7 +43,7 @@ export function lockFiles(files) {
     const current = readLockFile();
     const newFiles = Array.from(new Set([...current, ...fileNames]));
     writeLockFile(newFiles);
-    console.log(`🔒 Locked files: ${newFiles.join(", ")}`);
+    console.log(`🔒 Locked files: ${newFiles.join(', ')}`);
 }
 /**
  * Unlock one or more SVG files, allowing them to be processed again.
@@ -55,7 +55,7 @@ export function unlockFiles(files) {
     const current = readLockFile();
     const remaining = current.filter(f => !fileNames.includes(f));
     writeLockFile(remaining);
-    console.log(`🔓 Unlocked files: ${fileNames.join(", ")}`);
+    console.log(`🔓 Unlocked files: ${fileNames.join(', ')}`);
 }
 /**
  * Check if a specific SVG file is locked.

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

@@ -0,0 +1,73 @@
+import { ComponentGenerationOptions, SVGProcessorResult, NamingConvention } 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, namingConvention?: 'kebab' | 'pascal' | 'camel'): 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;
+    }>>;
+    /**
+     * Generate filename from component name using naming convention
+     */
+    generateFileName(componentName: string, extension: string, namingConvention?: NamingConvention): string;
+    /**
+     * Process a single SVG file
+     */
+    processSVGFile(svgFilePath: string, outputDir: string, options?: Partial<ComponentGenerationOptions & {
+        namingConvention?: NamingConvention;
+    }>): 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,261 @@
+import path from 'path';
+import { toPascalCase, toKebabCase, toCamelCase, 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, namingConvention) {
+        const baseName = path.basename(fileName, '.svg');
+        // Apply naming convention if specified, otherwise default to PascalCase
+        switch (namingConvention) {
+            case 'kebab':
+                // Keep kebab-case for filename, but component still needs PascalCase
+                return toPascalCase(baseName);
+            case 'camel':
+                // Convert to camelCase
+                const pascalName = toPascalCase(baseName);
+                return pascalName.charAt(0).toLowerCase() + pascalName.slice(1);
+            case 'pascal':
+            default:
+                // Default to PascalCase
+                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;
+        }
+    }
+    /**
+     * Generate filename from component name using naming convention
+     */
+    generateFileName(componentName, extension, namingConvention) {
+        let fileName;
+        switch (namingConvention) {
+            case 'kebab':
+                fileName = toKebabCase(componentName);
+                break;
+            case 'camel':
+                fileName = toCamelCase(componentName);
+                break;
+            case 'pascal':
+            default:
+                // Default to PascalCase (same as component name)
+                fileName = componentName;
+                break;
+        }
+        return `${fileName}.${extension}`;
+    }
+    /**
+     * 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 (always PascalCase for component)
+            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);
+            // Generate filename using naming convention
+            const namingConvention = options.namingConvention;
+            const fileName = this.generateFileName(componentName, fileExtension, namingConvention);
+            // Write component file
+            const outputFilePath = path.join(outputDir, fileName);
+            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: ${fileName}`);
+            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();