svger-cli 2.0.1 → 2.0.3

package/{src/core/template-manager.ts → dist/core/template-manager.js}

@@ -1,169 +1,134 @@
-import { Template, ComponentGenerationOptions, TemplateConfig } from '../types/index.js';
 import { logger } from '../core/logger.js';
 import { FileSystem } from '../utils/native.js';
 import path from 'path';
-
 /**
  * Template management system for customizable component generation
  */
 export class TemplateManager {
-  private static instance: TemplateManager;
-  private templates: Map<string, Template> = new Map();
-  private defaultTemplate = 'react-functional';
-
-  private constructor() {
-    this.loadBuiltinTemplates();
-  }
-
-  public static getInstance(): TemplateManager {
-    if (!TemplateManager.instance) {
-      TemplateManager.instance = new TemplateManager();
+    static instance;
+    templates = new Map();
+    defaultTemplate = 'react-functional';
+    constructor() {
+        this.loadBuiltinTemplates();
     }
-    return TemplateManager.instance;
-  }
-
-  /**
-   * Load built-in templates
-   */
-  private loadBuiltinTemplates(): void {
-    // Standard React Functional Component
-    this.registerTemplate({
-      name: 'react-functional',
-      generate: (options: ComponentGenerationOptions) => this.generateReactFunctional(options),
-      validate: (options: ComponentGenerationOptions) => !!options.componentName && !!options.svgContent
-    });
-
-    // React Functional Component with forwardRef
-    this.registerTemplate({
-      name: 'react-forwardref',
-      generate: (options: ComponentGenerationOptions) => this.generateReactForwardRef(options),
-      validate: (options: ComponentGenerationOptions) => !!options.componentName && !!options.svgContent
-    });
-
-    // React Class Component (legacy support)
-    this.registerTemplate({
-      name: 'react-class',
-      generate: (options: ComponentGenerationOptions) => this.generateReactClass(options),
-      validate: (options: ComponentGenerationOptions) => !!options.componentName && !!options.svgContent
-    });
-
-    // Styled Components Template
-    this.registerTemplate({
-      name: 'styled-components',
-      generate: (options: ComponentGenerationOptions) => this.generateStyledComponents(options),
-      validate: (options: ComponentGenerationOptions) => !!options.componentName && !!options.svgContent
-    });
-
-    // TypeScript Native (no React)
-    this.registerTemplate({
-      name: 'typescript-native',
-      generate: (options: ComponentGenerationOptions) => this.generateTypeScriptNative(options),
-      validate: (options: ComponentGenerationOptions) => !!options.componentName && !!options.svgContent
-    });
-
-    // Enhanced Styled Template
-    this.registerTemplate({
-      name: 'enhanced-styled',
-      generate: (options: ComponentGenerationOptions) => this.generateEnhancedStyled(options),
-      validate: (options: ComponentGenerationOptions) => !!options.componentName && !!options.svgContent
-    });
-
-    logger.debug('Built-in templates loaded');
-  }
-
-  /**
-   * Register a new template
-   */
-  public registerTemplate(template: Template): void {
-    this.templates.set(template.name, template);
-    logger.debug(`Template registered: ${template.name}`);
-  }
-
-  /**
-   * Generate component using specified template
-   */
-  public generateComponent(
-    templateName: string,
-    options: ComponentGenerationOptions
-  ): string {
-    const template = this.templates.get(templateName);
-    
-    if (!template) {
-      logger.warn(`Template not found: ${templateName}, using default`);
-      return this.generateComponent(this.defaultTemplate, options);
+    static getInstance() {
+        if (!TemplateManager.instance) {
+            TemplateManager.instance = new TemplateManager();
+        }
+        return TemplateManager.instance;
     }
-
-    if (template.validate && !template.validate(options)) {
-      throw new Error(`Invalid options for template: ${templateName}`);
+    /**
+     * Load built-in templates
+     */
+    loadBuiltinTemplates() {
+        // Standard React Functional Component
+        this.registerTemplate({
+            name: 'react-functional',
+            generate: (options) => this.generateReactFunctional(options),
+            validate: (options) => !!options.componentName && !!options.svgContent,
+        });
+        // React Functional Component with forwardRef
+        this.registerTemplate({
+            name: 'react-forwardref',
+            generate: (options) => this.generateReactForwardRef(options),
+            validate: (options) => !!options.componentName && !!options.svgContent,
+        });
+        // React Class Component (legacy support)
+        this.registerTemplate({
+            name: 'react-class',
+            generate: (options) => this.generateReactClass(options),
+            validate: (options) => !!options.componentName && !!options.svgContent,
+        });
+        // Styled Components Template
+        this.registerTemplate({
+            name: 'styled-components',
+            generate: (options) => this.generateStyledComponents(options),
+            validate: (options) => !!options.componentName && !!options.svgContent,
+        });
+        // TypeScript Native (no React)
+        this.registerTemplate({
+            name: 'typescript-native',
+            generate: (options) => this.generateTypeScriptNative(options),
+            validate: (options) => !!options.componentName && !!options.svgContent,
+        });
+        // Enhanced Styled Template
+        this.registerTemplate({
+            name: 'enhanced-styled',
+            generate: (options) => this.generateEnhancedStyled(options),
+            validate: (options) => !!options.componentName && !!options.svgContent,
+        });
+        logger.debug('Built-in templates loaded');
     }
-
-    return template.generate(options);
-  }
-
-  /**
-   * Load custom template from file
-   */
-  public async loadCustomTemplate(templatePath: string): Promise<void> {
-    try {
-      const resolvedPath = path.resolve(templatePath);
-      
-      if (!(await FileSystem.exists(resolvedPath))) {
-        throw new Error(`Template file not found: ${resolvedPath}`);
-      }
-
-      const templateContent = await FileSystem.readFile(resolvedPath, 'utf-8');
-      
-      // Parse template (assuming it's a JavaScript module)
-      const templateName = path.basename(templatePath, path.extname(templatePath));
-      
-      // For now, we'll treat it as a simple string template
-      this.registerTemplate({
-        name: templateName,
-        generate: (options: ComponentGenerationOptions) => {
-          return this.processStringTemplate(templateContent, options);
+    /**
+     * Register a new template
+     */
+    registerTemplate(template) {
+        this.templates.set(template.name, template);
+        logger.debug(`Template registered: ${template.name}`);
+    }
+    /**
+     * Generate component using specified template
+     */
+    generateComponent(templateName, options) {
+        const template = this.templates.get(templateName);
+        if (!template) {
+            logger.warn(`Template not found: ${templateName}, using default`);
+            return this.generateComponent(this.defaultTemplate, options);
         }
-      });
-
-      logger.info(`Custom template loaded: ${templateName}`);
-    } catch (error) {
-      logger.error(`Failed to load template from ${templatePath}:`, error);
-      throw error;
+        if (template.validate && !template.validate(options)) {
+            throw new Error(`Invalid options for template: ${templateName}`);
+        }
+        return template.generate(options);
     }
-  }
-
-  /**
-   * Get list of available templates
-   */
-  public getAvailableTemplates(): string[] {
-    return Array.from(this.templates.keys());
-  }
-
-  /**
-   * Set default template
-   */
-  public setDefaultTemplate(templateName: string): void {
-    if (!this.templates.has(templateName)) {
-      throw new Error(`Template not found: ${templateName}`);
+    /**
+     * Load custom template from file
+     */
+    async loadCustomTemplate(templatePath) {
+        try {
+            const resolvedPath = path.resolve(templatePath);
+            if (!(await FileSystem.exists(resolvedPath))) {
+                throw new Error(`Template file not found: ${resolvedPath}`);
+            }
+            const templateContent = await FileSystem.readFile(resolvedPath, 'utf-8');
+            // Parse template (assuming it's a JavaScript module)
+            const templateName = path.basename(templatePath, path.extname(templatePath));
+            // For now, we'll treat it as a simple string template
+            this.registerTemplate({
+                name: templateName,
+                generate: (options) => {
+                    return this.processStringTemplate(templateContent, options);
+                },
+            });
+            logger.info(`Custom template loaded: ${templateName}`);
+        }
+        catch (error) {
+            logger.error(`Failed to load template from ${templatePath}:`, error);
+            throw error;
+        }
     }
-    this.defaultTemplate = templateName;
-    logger.info(`Default template set to: ${templateName}`);
-  }
-
-  // ---- Built-in Template Generators ----
-
-  /**
-   * Standard React Functional Component
-   */
-  private generateReactFunctional(options: ComponentGenerationOptions): string {
-    const {
-      componentName,
-      svgContent,
-      defaultWidth = 24,
-      defaultHeight = 24,
-      defaultFill = 'currentColor'
-    } = options;
-
-    return `import React from "react";
+    /**
+     * Get list of available templates
+     */
+    getAvailableTemplates() {
+        return Array.from(this.templates.keys());
+    }
+    /**
+     * Set default template
+     */
+    setDefaultTemplate(templateName) {
+        if (!this.templates.has(templateName)) {
+            throw new Error(`Template not found: ${templateName}`);
+        }
+        this.defaultTemplate = templateName;
+        logger.info(`Default template set to: ${templateName}`);
+    }
+    // ---- Built-in Template Generators ----
+    /**
+     * Standard React Functional Component
+     */
+    generateReactFunctional(options) {
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
+        return `import React from "react";
 import type { SVGProps } from "react";
 
 export interface ${componentName}Props extends SVGProps<SVGSVGElement> {
@@ -203,21 +168,13 @@ ${componentName}.displayName = "${componentName}";
 
 export default ${componentName};
 `;
-  }
-
-  /**
-   * React Functional Component with forwardRef
-   */
-  private generateReactForwardRef(options: ComponentGenerationOptions): string {
-    const {
-      componentName,
-      svgContent,
-      defaultWidth = 24,
-      defaultHeight = 24,
-      defaultFill = 'currentColor'
-    } = options;
-
-    return `import { forwardRef } from "react";
+    }
+    /**
+     * React Functional Component with forwardRef
+     */
+    generateReactForwardRef(options) {
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
+        return `import { forwardRef } from "react";
 import type { SVGProps } from "react";
 
 /**
@@ -246,21 +203,13 @@ ${componentName}.displayName = "${componentName}";
 
 export default ${componentName};
 `;
-  }
-
-  /**
-   * React Class Component (legacy)
-   */
-  private generateReactClass(options: ComponentGenerationOptions): string {
-    const {
-      componentName,
-      svgContent,
-      defaultWidth = 24,
-      defaultHeight = 24,
-      defaultFill = 'currentColor'
-    } = options;
-
-    return `import { Component } from "react";
+    }
+    /**
+     * React Class Component (legacy)
+     */
+    generateReactClass(options) {
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
+        return `import { Component } from "react";
 import type { SVGProps } from "react";
 
 /**
@@ -288,21 +237,13 @@ class ${componentName} extends Component<SVGProps<SVGSVGElement>> {
 
 export default ${componentName};
 `;
-  }
-
-  /**
-   * Styled Components Template
-   */
-  private generateStyledComponents(options: ComponentGenerationOptions): string {
-    const {
-      componentName,
-      svgContent,
-      defaultWidth = 24,
-      defaultHeight = 24,
-      defaultFill = 'currentColor'
-    } = options;
-
-    return `import styled from "styled-components";
+    }
+    /**
+     * Styled Components Template
+     */
+    generateStyledComponents(options) {
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
+        return `import styled from "styled-components";
 import type { SVGProps } from "react";
 
 /**
@@ -329,21 +270,13 @@ ${componentName}.displayName = "${componentName}";
 
 export default ${componentName};
 `;
-  }
-
-  /**
-   * TypeScript Native (no React dependencies)
-   */
-  private generateTypeScriptNative(options: ComponentGenerationOptions): string {
-    const {
-      componentName,
-      svgContent,
-      defaultWidth = 24,
-      defaultHeight = 24,
-      defaultFill = 'currentColor'
-    } = options;
-
-    return `/**
+    }
+    /**
+     * TypeScript Native (no React dependencies)
+     */
+    generateTypeScriptNative(options) {
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
+        return `/**
  * ${componentName} SVG Icon (Native TypeScript)
  * Generated by svger-cli
  */
@@ -386,46 +319,31 @@ export function ${componentName}(options: ${componentName}Options = {}): string
 
 export default ${componentName};
 `;
-  }
-
-  /**
-   * Process string template with variable substitution
-   */
-  private processStringTemplate(
-    template: string,
-    options: ComponentGenerationOptions
-  ): string {
-    const variables = {
-      ...options,
-      defaultWidth: options.defaultWidth || 24,
-      defaultHeight: options.defaultHeight || 24,
-      defaultFill: options.defaultFill || 'currentColor'
-    };
-
-    let processed = template;
-    
-    // Replace variables in the format {{variableName}}
-    for (const [key, value] of Object.entries(variables)) {
-      const regex = new RegExp(`\\{\\{\\s*${key}\\s*\\}\\}`, 'g');
-      processed = processed.replace(regex, String(value));
     }
-
-    return processed;
-  }
-
-  /**
-   * Enhanced Styled Template with comprehensive styling support
-   */
-  private generateEnhancedStyled(options: ComponentGenerationOptions): string {
-    const {
-      componentName,
-      svgContent,
-      defaultWidth = 24,
-      defaultHeight = 24,
-      defaultFill = 'currentColor'
-    } = options;
-
-    return `import React from "react";
+    /**
+     * Process string template with variable substitution
+     */
+    processStringTemplate(template, options) {
+        const variables = {
+            ...options,
+            defaultWidth: options.defaultWidth || 24,
+            defaultHeight: options.defaultHeight || 24,
+            defaultFill: options.defaultFill || 'currentColor',
+        };
+        let processed = template;
+        // Replace variables in the format {{variableName}}
+        for (const [key, value] of Object.entries(variables)) {
+            const regex = new RegExp(`\\{\\{\\s*${key}\\s*\\}\\}`, 'g');
+            processed = processed.replace(regex, String(value));
+        }
+        return processed;
+    }
+    /**
+     * Enhanced Styled Template with comprehensive styling support
+     */
+    generateEnhancedStyled(options) {
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
+        return `import React from "react";
 import type { SVGProps } from "react";
 
 /**
@@ -612,8 +530,7 @@ ${componentName}.displayName = "${componentName}";
 
 export default ${componentName};
 `;
-  }
+    }
 }
-
 // Export singleton instance
-export const templateManager = TemplateManager.getInstance();
+export const templateManager = TemplateManager.getInstance();

package/dist/index.d.ts

@@ -0,0 +1,153 @@
+/**
+ * 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
+ */
+/**
+ * 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';
+/**
+ * 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 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 FrameworkOptions, } from './core/framework-templates.js';
+/**
+ * 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';
+/**
+ * Native Node.js Utilities - Zero-dependency replacements for external libraries
+ * Provides: file operations, string manipulation, CLI parsing, and file watching
+ */
+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';
+/**
+ * TypeScript Type Definitions - Comprehensive type system for all interfaces and configurations
+ * Provides: complete type safety for all operations, configurations, and data structures
+ */
+export type { SVGConfig, ComponentGenerationOptions, OutputConfig, NamingConvention, FrameworkType, SVGProcessorResult, ProcessingJob, ProcessingStatus, Plugin, PluginConfig, Template, TemplateConfig, WatchOptions, } from './types/index.js';
+/**
+ * Error handling types - Available from core error handler
+ */
+export type { SVGError, ErrorRecoveryStrategy } from './core/error-handler.js';
+/**
+ * Component Templates - Pre-built component templates for various use cases
+ * Provides: functional React component template with TypeScript support
+ */
+export { reactTemplate } from './templates/ComponentTemplate.js';
+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 declare const SVGER: {
+    /**
+     * Process single SVG file to React component
+     */
+    readonly processFile: (svgFilePath: string, outputDir: string, options?: Partial<import("./types/index.js").ComponentGenerationOptions & {
+        namingConvention?: import("./types/index.js").NamingConvention;
+    }>) => Promise<import("./types/index.js").SVGProcessorResult>;
+    /**
+     * Process multiple SVG files in batch
+     */
+    readonly processBatch: (files: Array<{
+        path: string;
+        outputDir: string;
+        options?: Partial<import("./types/index.js").ComponentGenerationOptions>;
+    }>, config?: {
+        batchSize?: number;
+        parallel?: boolean;
+        maxConcurrency?: number;
+    }) => Promise<Array<{
+        success: boolean;
+        filePath: string;
+        error?: Error;
+        duration: number;
+    }>>;
+    /**
+     * Generate framework-agnostic component
+     */
+    readonly generateFrameworkComponent: (componentName: string, svgContent: string, options: import("./types/index.js").ComponentGenerationOptions) => Promise<string>;
+    /**
+     * Watch directory for changes
+     */
+    readonly watch: typeof watchSVGs;
+    /**
+     * Clean and optimize directory
+     */
+    readonly clean: typeof clean;
+    /**
+     * Build all SVG files in directory
+     */
+    readonly build: typeof buildAll;
+};
+/**
+ * Package Version Information
+ */
+export declare const VERSION = "2.0.0";
+export declare const PACKAGE_NAME = "svger-cli";
+/**
+ * Default export - Primary SVG processor instance for quick access
+ * Most common entry point for programmatic usage
+ */
+export default svgProcessor;