svger-cli 2.0.1 → 2.0.3

package/{src/core/framework-templates.ts → dist/core/framework-templates.js}

@@ -1,89 +1,65 @@
-import { ComponentGenerationOptions, FrameworkType, FrameworkOptions } from '../types/index.js';
-
-// Re-export types for convenience
-export type { FrameworkType, FrameworkOptions } from '../types/index.js';
-
-interface SVGAttributes {
-  viewBox?: string;
-  width?: string;
-  height?: string;
-  fill?: string;
-  stroke?: string;
-  xmlns?: string;
-  [key: string]: string | undefined;
-}
-
 export class FrameworkTemplateEngine {
-  
-  public generateComponent(options: ComponentGenerationOptions): string {
-    const { framework, componentName, svgContent, typescript = true, frameworkOptions = {} } = options;
-
-    switch (framework) {
-      case 'react':
-        return this.generateReactComponent(componentName, svgContent, typescript, frameworkOptions);
-      case 'vue':
-        return this.generateVueComponent(componentName, svgContent, typescript, frameworkOptions);
-      case 'svelte':
-        return this.generateSvelteComponent(componentName, svgContent, typescript);
-      case 'angular':
-        return this.generateAngularComponent(componentName, svgContent, typescript, frameworkOptions);
-      case 'solid':
-        return this.generateSolidComponent(componentName, svgContent, typescript);
-      case 'preact':
-        return this.generatePreactComponent(componentName, svgContent, typescript);
-      case 'lit':
-        return this.generateLitComponent(componentName, svgContent, typescript);
-      case 'vanilla':
-        return this.generateVanillaComponent(componentName, svgContent, typescript);
-      default:
-        throw new Error(`Unsupported framework: ${framework}`);
+    generateComponent(options) {
+        const { framework, componentName, svgContent, typescript = true, frameworkOptions = {}, } = options;
+        switch (framework) {
+            case 'react':
+                return this.generateReactComponent(componentName, svgContent, typescript, frameworkOptions);
+            case 'vue':
+                return this.generateVueComponent(componentName, svgContent, typescript, frameworkOptions);
+            case 'svelte':
+                return this.generateSvelteComponent(componentName, svgContent, typescript);
+            case 'angular':
+                return this.generateAngularComponent(componentName, svgContent, typescript, frameworkOptions);
+            case 'solid':
+                return this.generateSolidComponent(componentName, svgContent, typescript);
+            case 'preact':
+                return this.generatePreactComponent(componentName, svgContent, typescript);
+            case 'lit':
+                return this.generateLitComponent(componentName, svgContent, typescript);
+            case 'vanilla':
+                return this.generateVanillaComponent(componentName, svgContent, typescript);
+            default:
+                throw new Error(`Unsupported framework: ${framework}`);
+        }
     }
-  }
-
-  public getFileExtension(framework: FrameworkType, typescript: boolean = true): string {
-    const tsExt = typescript ? 'ts' : 'js';
-    
-    switch (framework) {
-      case 'react':
-      case 'preact':
-      case 'solid':
-        return typescript ? 'tsx' : 'jsx';
-      case 'vue':
-        return 'vue';
-      case 'svelte':
-        return 'svelte';
-      case 'angular':
-        return `component.${tsExt}`;
-      case 'lit':
-      case 'vanilla':
-        return `${tsExt}`;
-      default:
-        return `${tsExt}`;
+    getFileExtension(framework, typescript = true) {
+        const tsExt = typescript ? 'ts' : 'js';
+        switch (framework) {
+            case 'react':
+            case 'preact':
+            case 'solid':
+                return typescript ? 'tsx' : 'jsx';
+            case 'vue':
+                return 'vue';
+            case 'svelte':
+                return 'svelte';
+            case 'angular':
+                return `component.${tsExt}`;
+            case 'lit':
+            case 'vanilla':
+                return `${tsExt}`;
+            default:
+                return `${tsExt}`;
+        }
     }
-  }
-
-  private parseSVG(svgContent: string): { attributes: SVGAttributes; innerContent: string } {
-    const svgMatch = svgContent.match(/<svg([^>]*)>([\s\S]*?)<\/svg>/);
-    if (!svgMatch) {
-      return { attributes: {}, innerContent: svgContent };
+    parseSVG(svgContent) {
+        const svgMatch = svgContent.match(/<svg([^>]*)>([\s\S]*?)<\/svg>/);
+        if (!svgMatch) {
+            return { attributes: {}, innerContent: svgContent };
+        }
+        const attributesString = svgMatch[1];
+        const innerContent = svgMatch[2].trim();
+        const attributes = {};
+        const attrRegex = /(\w+(?:-\w+)*)="([^"]*)"/g;
+        let match;
+        while ((match = attrRegex.exec(attributesString)) !== null) {
+            attributes[match[1]] = match[2];
+        }
+        return { attributes, innerContent };
     }
-
-    const attributesString = svgMatch[1];
-    const innerContent = svgMatch[2].trim();
-    const attributes: SVGAttributes = {};
-
-    const attrRegex = /(\w+(?:-\w+)*)="([^"]*)"/g;
-    let match;
-    while ((match = attrRegex.exec(attributesString)) !== null) {
-      attributes[match[1]] = match[2];
-    }
-
-    return { attributes, innerContent };
-  }
-
-  private generateReactComponent(componentName: string, svgContent: string, typescript: boolean, options: FrameworkOptions): string {
-    const { attributes, innerContent } = this.parseSVG(svgContent);
-    return `import React from "react";
+    generateReactComponent(componentName, svgContent, typescript, options) {
+        const { attributes, innerContent } = this.parseSVG(svgContent);
+        return `import React from "react";
 import type { SVGProps } from "react";
 
 export interface ${componentName}Props extends SVGProps<SVGSVGElement> {
@@ -119,14 +95,12 @@ ${componentName}.displayName = "${componentName}";
 
 export default ${componentName};
 `;
-  }
-
-  private generateVueComponent(componentName: string, svgContent: string, typescript: boolean, options: FrameworkOptions): string {
-    const { attributes, innerContent } = this.parseSVG(svgContent);
-    const { scriptSetup = true } = options;
-
-    if (scriptSetup && typescript) {
-      return `<template>
+    }
+    generateVueComponent(componentName, svgContent, typescript, options) {
+        const { attributes, innerContent } = this.parseSVG(svgContent);
+        const { scriptSetup = true } = options;
+        if (scriptSetup && typescript) {
+            return `<template>
   <svg
     :class="className"
     :style="style"
@@ -160,9 +134,8 @@ withDefaults(defineProps<Props>(), {
 });
 </script>
 `;
-    }
-
-    return `<template>
+        }
+        return `<template>
   <svg
     :class="className"
     :style="style"
@@ -194,11 +167,10 @@ export default defineComponent({
 });
 </script>
 `;
-  }
-
-  private generateSvelteComponent(componentName: string, svgContent: string, typescript: boolean): string {
-    const { attributes, innerContent } = this.parseSVG(svgContent);
-    return `<script${typescript ? ' lang="ts"' : ''}>
+    }
+    generateSvelteComponent(componentName, svgContent, typescript) {
+        const { attributes, innerContent } = this.parseSVG(svgContent);
+        return `<script${typescript ? ' lang="ts"' : ''}>
   export let className${typescript ? ': string' : ''} = '';
   export let style${typescript ? ': string' : ''} = '';
   export let width${typescript ? ': string | number' : ''} = ${attributes.width || 24};
@@ -221,14 +193,12 @@ export default defineComponent({
   ${innerContent}
 </svg>
 `;
-  }
-
-  private generateAngularComponent(componentName: string, svgContent: string, typescript: boolean, options: FrameworkOptions): string {
-    const { attributes, innerContent } = this.parseSVG(svgContent);
-    const { standalone = true } = options;
-    const kebabName = this.toKebabCase(componentName);
-
-    return `import { Component, Input${standalone ? ', ChangeDetectionStrategy' : ''} } from '@angular/core';
+    }
+    generateAngularComponent(componentName, svgContent, typescript, options) {
+        const { attributes, innerContent } = this.parseSVG(svgContent);
+        const { standalone = true } = options;
+        const kebabName = this.toKebabCase(componentName);
+        return `import { Component, Input${standalone ? ', ChangeDetectionStrategy' : ''} } from '@angular/core';
 
 @Component({
   selector: '${kebabName}',
@@ -245,8 +215,10 @@ export default defineComponent({
     >
       ${innerContent}
     </svg>
-  \`,${standalone ? `
-  changeDetection: ChangeDetectionStrategy.OnPush` : ''}
+  \`,${standalone
+            ? `
+  changeDetection: ChangeDetectionStrategy.OnPush`
+            : ''}
 })
 export class ${componentName}Component {
   @Input() className: string = '';
@@ -256,11 +228,10 @@ export class ${componentName}Component {
   @Input() stroke: string = '';
 }
 `;
-  }
-
-  private generateSolidComponent(componentName: string, svgContent: string, typescript: boolean): string {
-    const { attributes, innerContent } = this.parseSVG(svgContent);
-    return `import { Component, JSX } from 'solid-js';
+    }
+    generateSolidComponent(componentName, svgContent, typescript) {
+        const { attributes, innerContent } = this.parseSVG(svgContent);
+        return `import { Component, JSX } from 'solid-js';
 
 export interface ${componentName}Props extends JSX.SvgSVGAttributes<SVGSVGElement> {
   className?: string;
@@ -288,11 +259,10 @@ const ${componentName}: Component<${componentName}Props> = (props) => (
 
 export default ${componentName};
 `;
-  }
-
-  private generatePreactComponent(componentName: string, svgContent: string, typescript: boolean): string {
-    const { attributes, innerContent } = this.parseSVG(svgContent);
-    return `import { h, FunctionComponent } from 'preact';
+    }
+    generatePreactComponent(componentName, svgContent, typescript) {
+        const { attributes, innerContent } = this.parseSVG(svgContent);
+        return `import { h, FunctionComponent } from 'preact';
 import { JSX } from 'preact/jsx-runtime';
 
 export interface ${componentName}Props extends JSX.SVGAttributes<SVGSVGElement> {
@@ -331,13 +301,11 @@ const ${componentName}: FunctionComponent<${componentName}Props> = ({
 
 export default ${componentName};
 `;
-  }
-
-  private generateLitComponent(componentName: string, svgContent: string, typescript: boolean): string {
-    const { attributes, innerContent } = this.parseSVG(svgContent);
-    const kebabName = this.toKebabCase(componentName);
-
-    return `import { LitElement, html, css, svg } from 'lit';
+    }
+    generateLitComponent(componentName, svgContent, typescript) {
+        const { attributes, innerContent } = this.parseSVG(svgContent);
+        const kebabName = this.toKebabCase(componentName);
+        return `import { LitElement, html, css, svg } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 @customElement('${kebabName}')
@@ -373,11 +341,10 @@ declare global {
   }
 }
 `;
-  }
-
-  private generateVanillaComponent(componentName: string, svgContent: string, typescript: boolean): string {
-    const { attributes, innerContent} = this.parseSVG(svgContent);
-    return `export interface ${componentName}Options {
+    }
+    generateVanillaComponent(componentName, svgContent, typescript) {
+        const { attributes, innerContent } = this.parseSVG(svgContent);
+        return `export interface ${componentName}Options {
   className?: string;
   width?: string | number;
   height?: string | number;
@@ -415,14 +382,12 @@ export function ${componentName}(options: ${componentName}Options = {}): SVGSVGE
   return svg;
 }
 `;
-  }
-
-  private toKebabCase(str: string): string {
-    return str
-      .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
-      .replace(/([A-Z])([A-Z])([a-z])/g, '$1-$2$3')
-      .toLowerCase();
-  }
+    }
+    toKebabCase(str) {
+        return str
+            .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+            .replace(/([A-Z])([A-Z])([a-z])/g, '$1-$2$3')
+            .toLowerCase();
+    }
 }
-
 export const frameworkTemplateEngine = new FrameworkTemplateEngine();

package/dist/core/logger.d.ts

@@ -0,0 +1,22 @@
+import { Logger, LogLevel } from '../types/index.js';
+/**
+ * Professional logging service with configurable levels and formatted output
+ */
+export declare class LoggerService implements Logger {
+    private static instance;
+    private logLevel;
+    private enableColors;
+    private constructor();
+    static getInstance(): LoggerService;
+    setLogLevel(level: LogLevel): void;
+    setColors(enabled: boolean): void;
+    private shouldLog;
+    private formatMessage;
+    private getPrefix;
+    debug(message: string, ...args: any[]): void;
+    info(message: string, ...args: any[]): void;
+    warn(message: string, ...args: any[]): void;
+    error(message: string, ...args: any[]): void;
+    success(message: string, ...args: any[]): void;
+}
+export declare const logger: LoggerService;

package/dist/core/logger.js

@@ -0,0 +1,85 @@
+/**
+ * Professional logging service with configurable levels and formatted output
+ */
+export class LoggerService {
+    static instance;
+    logLevel = 'info';
+    enableColors = true;
+    constructor() { }
+    static getInstance() {
+        if (!LoggerService.instance) {
+            LoggerService.instance = new LoggerService();
+        }
+        return LoggerService.instance;
+    }
+    setLogLevel(level) {
+        this.logLevel = level;
+    }
+    setColors(enabled) {
+        this.enableColors = enabled;
+    }
+    shouldLog(level) {
+        const levels = ['debug', 'info', 'warn', 'error'];
+        const currentIndex = levels.indexOf(this.logLevel);
+        const messageIndex = levels.indexOf(level);
+        return messageIndex >= currentIndex;
+    }
+    formatMessage(level, message) {
+        const timestamp = new Date().toISOString();
+        const prefix = this.getPrefix(level);
+        return `${timestamp} ${prefix} ${message}`;
+    }
+    getPrefix(level) {
+        if (!this.enableColors) {
+            return `[${level.toUpperCase()}]`;
+        }
+        const colors = {
+            debug: '\x1b[36m', // Cyan
+            info: '\x1b[34m', // Blue
+            warn: '\x1b[33m', // Yellow
+            error: '\x1b[31m', // Red
+            success: '\x1b[32m', // Green
+        };
+        const reset = '\x1b[0m';
+        const color = colors[level] || colors.info;
+        const icons = {
+            debug: '🔍',
+            info: 'ℹ️',
+            warn: '⚠️',
+            error: '❌',
+            success: '✅',
+        };
+        const icon = icons[level] || icons.info;
+        return `${color}${icon} [${level.toUpperCase()}]${reset}`;
+    }
+    debug(message, ...args) {
+        if (this.shouldLog('debug')) {
+            console.debug(this.formatMessage('debug', message), ...args);
+        }
+    }
+    info(message, ...args) {
+        if (this.shouldLog('info')) {
+            console.info(this.formatMessage('info', message), ...args);
+        }
+    }
+    warn(message, ...args) {
+        if (this.shouldLog('warn')) {
+            console.warn(this.formatMessage('warn', message), ...args);
+        }
+    }
+    error(message, ...args) {
+        if (this.shouldLog('error')) {
+            console.error(this.formatMessage('error', message), ...args);
+        }
+    }
+    success(message, ...args) {
+        if (this.shouldLog('info')) {
+            const timestamp = new Date().toISOString();
+            const prefix = this.getPrefix('info');
+            const successPrefix = this.enableColors ? '✅ [SUCCESS]' : '[SUCCESS]';
+            console.log(`${timestamp} ${successPrefix} ${message}`, ...args);
+        }
+    }
+}
+// Export singleton instance
+export const logger = LoggerService.getInstance();

package/dist/core/performance-engine.d.ts

@@ -0,0 +1,67 @@
+import { ComponentGenerationOptions } from '../types/index.js';
+/**
+ * Performance optimization engine for batch processing and parallel execution
+ */
+export declare class PerformanceEngine {
+    private static instance;
+    private processingCache;
+    private readonly cacheTimeout;
+    private constructor();
+    static getInstance(): PerformanceEngine;
+    /**
+     * Process multiple SVG files in parallel with optimized batching
+     */
+    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 single file with caching support
+     */
+    private processSingleWithCaching;
+    /**
+     * Optimize SVG content with performance considerations
+     */
+    optimizeSVGContent(content: string, level?: 'fast' | 'balanced' | 'maximum'): string;
+    /**
+     * Memory usage monitoring and optimization
+     */
+    monitorMemoryUsage(): {
+        heapUsed: number;
+        heapTotal: number;
+        external: number;
+        cacheSize: number;
+        recommendations: string[];
+    };
+    /**
+     * Clear processing cache
+     */
+    clearCache(): void;
+    /**
+     * Get performance metrics
+     */
+    getPerformanceMetrics(): {
+        cacheHitRate: number;
+        averageProcessingTime: number;
+        memoryUsage: any;
+    };
+    private createBatches;
+    private withSemaphore;
+    private generateCacheKey;
+    private getCachedResult;
+    private setCachedResult;
+    private applyFastOptimizations;
+    private applyBalancedOptimizations;
+    private applyMaximumOptimizations;
+}
+export declare const performanceEngine: PerformanceEngine;