svger-cli 2.0.1 → 2.0.3

package/dist/core/performance-engine.js

@@ -0,0 +1,252 @@
+import os from 'os';
+import { logger } from '../core/logger.js';
+import { svgProcessor } from '../processors/svg-processor.js';
+/**
+ * Performance optimization engine for batch processing and parallel execution
+ */
+export class PerformanceEngine {
+    static instance;
+    processingCache = new Map();
+    cacheTimeout = 5 * 60 * 1000; // 5 minutes
+    constructor() { }
+    static getInstance() {
+        if (!PerformanceEngine.instance) {
+            PerformanceEngine.instance = new PerformanceEngine();
+        }
+        return PerformanceEngine.instance;
+    }
+    /**
+     * Process multiple SVG files in parallel with optimized batching
+     */
+    async processBatch(files, config = {}) {
+        const { batchSize = 10, parallel = true, maxConcurrency = Math.min(4, os.cpus().length), } = config;
+        logger.info(`Processing ${files.length} files with ${parallel ? 'parallel' : 'sequential'} execution`);
+        const startTime = Date.now();
+        const results = [];
+        if (!parallel) {
+            // Sequential processing for stability
+            for (const file of files) {
+                const result = await this.processSingleWithCaching(file);
+                results.push(result);
+            }
+        }
+        else {
+            // Parallel processing with controlled concurrency
+            const batches = this.createBatches(files, batchSize);
+            for (const batch of batches) {
+                const semaphore = new Semaphore(maxConcurrency);
+                const batchPromises = batch.map(file => this.withSemaphore(semaphore, () => this.processSingleWithCaching(file)));
+                const batchResults = await Promise.all(batchPromises);
+                results.push(...batchResults);
+            }
+        }
+        const totalDuration = Date.now() - startTime;
+        const successful = results.filter(r => r.success).length;
+        logger.info(`Batch processing complete: ${successful}/${files.length} successful in ${totalDuration}ms`);
+        return results;
+    }
+    /**
+     * Process single file with caching support
+     */
+    async processSingleWithCaching(file) {
+        const startTime = Date.now();
+        const cacheKey = this.generateCacheKey(file.path, file.options || {});
+        // Check cache first
+        const cached = this.getCachedResult(cacheKey);
+        if (cached) {
+            logger.debug(`Cache hit for ${file.path}`);
+            return {
+                success: true,
+                filePath: file.path,
+                duration: Date.now() - startTime,
+            };
+        }
+        try {
+            const result = await svgProcessor.processSVGFile(file.path, file.outputDir, file.options);
+            // Cache successful results
+            if (result.success) {
+                this.setCachedResult(cacheKey, result);
+            }
+            return {
+                success: result.success,
+                filePath: file.path,
+                error: result.error,
+                duration: Date.now() - startTime,
+            };
+        }
+        catch (error) {
+            return {
+                success: false,
+                filePath: file.path,
+                error: error,
+                duration: Date.now() - startTime,
+            };
+        }
+    }
+    /**
+     * Optimize SVG content with performance considerations
+     */
+    optimizeSVGContent(content, level = 'balanced') {
+        const startTime = performance.now();
+        let optimized = content;
+        switch (level) {
+            case 'fast':
+                // Basic optimizations only
+                optimized = this.applyFastOptimizations(content);
+                break;
+            case 'balanced':
+                // Standard optimizations with good performance/quality balance
+                optimized = this.applyBalancedOptimizations(content);
+                break;
+            case 'maximum':
+                // Comprehensive optimizations
+                optimized = this.applyMaximumOptimizations(content);
+                break;
+        }
+        const duration = performance.now() - startTime;
+        const compressionRatio = (1 - optimized.length / content.length) * 100;
+        logger.debug(`SVG optimization (${level}): ${compressionRatio.toFixed(1)}% reduction in ${duration.toFixed(2)}ms`);
+        return optimized;
+    }
+    /**
+     * Memory usage monitoring and optimization
+     */
+    monitorMemoryUsage() {
+        const memUsage = process.memoryUsage();
+        const cacheSize = this.processingCache.size;
+        const recommendations = [];
+        // Memory usage analysis
+        const heapUsedMB = memUsage.heapUsed / 1024 / 1024;
+        const heapTotalMB = memUsage.heapTotal / 1024 / 1024;
+        if (heapUsedMB > 500) {
+            recommendations.push('Consider reducing batch size or enabling sequential processing');
+        }
+        if (cacheSize > 1000) {
+            recommendations.push('Cache size is large, consider clearing old entries');
+        }
+        if (memUsage.external > 100 * 1024 * 1024) {
+            recommendations.push('High external memory usage detected');
+        }
+        return {
+            heapUsed: heapUsedMB,
+            heapTotal: heapTotalMB,
+            external: memUsage.external / 1024 / 1024,
+            cacheSize,
+            recommendations,
+        };
+    }
+    /**
+     * Clear processing cache
+     */
+    clearCache() {
+        this.processingCache.clear();
+        logger.debug('Processing cache cleared');
+    }
+    /**
+     * Get performance metrics
+     */
+    getPerformanceMetrics() {
+        // This would be implemented with proper metrics collection
+        return {
+            cacheHitRate: 0, // Placeholder
+            averageProcessingTime: 0, // Placeholder
+            memoryUsage: this.monitorMemoryUsage(),
+        };
+    }
+    // Private helper methods
+    createBatches(items, batchSize) {
+        const batches = [];
+        for (let i = 0; i < items.length; i += batchSize) {
+            batches.push(items.slice(i, i + batchSize));
+        }
+        return batches;
+    }
+    async withSemaphore(semaphore, task) {
+        await semaphore.acquire();
+        try {
+            return await task();
+        }
+        finally {
+            semaphore.release();
+        }
+    }
+    generateCacheKey(filePath, options) {
+        // Create a hash of file path and options for caching
+        const key = JSON.stringify({ filePath, options });
+        return Buffer.from(key).toString('base64');
+    }
+    getCachedResult(key) {
+        const cached = this.processingCache.get(key);
+        if (!cached)
+            return null;
+        // Check if cache entry is still valid
+        if (Date.now() - cached.timestamp > this.cacheTimeout) {
+            this.processingCache.delete(key);
+            return null;
+        }
+        return cached.result;
+    }
+    setCachedResult(key, result) {
+        this.processingCache.set(key, {
+            result,
+            timestamp: Date.now(),
+        });
+    }
+    applyFastOptimizations(content) {
+        return content
+            .replace(/\s+/g, ' ') // Normalize whitespace
+            .replace(/>\s+</g, '><') // Remove spaces between tags
+            .trim();
+    }
+    applyBalancedOptimizations(content) {
+        let optimized = this.applyFastOptimizations(content);
+        // Remove unnecessary attributes
+        optimized = optimized
+            .replace(/\s+id="[^"]*"/g, '') // Remove IDs (usually not needed in components)
+            .replace(/\s+class="[^"]*"/g, '') // Remove classes
+            .replace(/<!--[\s\S]*?-->/g, '') // Remove comments
+            .replace(/\s+xmlns="[^"]*"/g, ''); // Remove xmlns (React adds it)
+        return optimized;
+    }
+    applyMaximumOptimizations(content) {
+        let optimized = this.applyBalancedOptimizations(content);
+        // Advanced optimizations
+        optimized = optimized
+            .replace(/\s+style="[^"]*"/g, '') // Remove inline styles
+            .replace(/\s+data-[^=]*="[^"]*"/g, '') // Remove data attributes
+            .replace(/fill="none"/g, '') // Remove default fill
+            .replace(/stroke="none"/g, '') // Remove default stroke
+            .replace(/\s+version="[^"]*"/g, '') // Remove version
+            .replace(/\s+baseProfile="[^"]*"/g, ''); // Remove baseProfile
+        return optimized;
+    }
+}
+/**
+ * Semaphore for controlling concurrency
+ */
+class Semaphore {
+    permits;
+    waitQueue = [];
+    constructor(permits) {
+        this.permits = permits;
+    }
+    async acquire() {
+        if (this.permits > 0) {
+            this.permits--;
+            return Promise.resolve();
+        }
+        return new Promise(resolve => {
+            this.waitQueue.push(resolve);
+        });
+    }
+    release() {
+        this.permits++;
+        if (this.waitQueue.length > 0) {
+            const resolve = this.waitQueue.shift();
+            this.permits--;
+            resolve();
+        }
+    }
+}
+// Export singleton instance
+export const performanceEngine = PerformanceEngine.getInstance();

package/dist/core/plugin-manager.d.ts

@@ -0,0 +1,56 @@
+import { Plugin, PluginConfig } from '../types/index.js';
+/**
+ * Plugin management system for extending SVG processing capabilities
+ */
+export declare class PluginManager {
+    private static instance;
+    private plugins;
+    private activePlugins;
+    private constructor();
+    static getInstance(): PluginManager;
+    /**
+     * Load built-in plugins
+     */
+    private loadBuiltinPlugins;
+    /**
+     * Register a new plugin
+     */
+    registerPlugin(plugin: Plugin): void;
+    /**
+     * Enable a plugin
+     */
+    enablePlugin(name: string, config?: PluginConfig): void;
+    /**
+     * Disable a plugin
+     */
+    disablePlugin(name: string): void;
+    /**
+     * Process content through all active plugins
+     */
+    processContent(content: string, pluginConfigs?: PluginConfig[]): Promise<string>;
+    /**
+     * Get list of available plugins
+     */
+    getAvailablePlugins(): Array<{
+        name: string;
+        version: string;
+        enabled: boolean;
+    }>;
+    /**
+     * Built-in SVG optimizer
+     */
+    private optimizeSVG;
+    /**
+     * Built-in color theme applier
+     */
+    private applyColorTheme;
+    /**
+     * Built-in size normalizer
+     */
+    private normalizeSizes;
+    /**
+     * Clear all plugins (useful for testing)
+     */
+    clear(): void;
+}
+export declare const pluginManager: PluginManager;

package/dist/core/plugin-manager.js

@@ -0,0 +1,191 @@
+import { logger } from '../core/logger.js';
+/**
+ * Plugin management system for extending SVG processing capabilities
+ */
+export class PluginManager {
+    static instance;
+    plugins = new Map();
+    activePlugins = new Set();
+    constructor() {
+        this.loadBuiltinPlugins();
+    }
+    static getInstance() {
+        if (!PluginManager.instance) {
+            PluginManager.instance = new PluginManager();
+        }
+        return PluginManager.instance;
+    }
+    /**
+     * Load built-in plugins
+     */
+    loadBuiltinPlugins() {
+        // SVG Optimizer Plugin
+        this.registerPlugin({
+            name: 'svg-optimizer',
+            version: '1.0.0',
+            process: async (content, options) => {
+                return this.optimizeSVG(content, options);
+            },
+            validate: (options) => true,
+        });
+        // Color Theme Plugin
+        this.registerPlugin({
+            name: 'color-theme',
+            version: '1.0.0',
+            process: async (content, options) => {
+                return this.applyColorTheme(content, options);
+            },
+            validate: (options) => {
+                return options && typeof options.theme === 'object';
+            },
+        });
+        // Size Normalizer Plugin
+        this.registerPlugin({
+            name: 'size-normalizer',
+            version: '1.0.0',
+            process: async (content, options) => {
+                return this.normalizeSizes(content, options);
+            },
+        });
+        logger.debug('Built-in plugins loaded');
+    }
+    /**
+     * Register a new plugin
+     */
+    registerPlugin(plugin) {
+        if (this.plugins.has(plugin.name)) {
+            logger.warn(`Plugin ${plugin.name} is already registered, overwriting`);
+        }
+        this.plugins.set(plugin.name, plugin);
+        logger.debug(`Plugin registered: ${plugin.name} v${plugin.version}`);
+    }
+    /**
+     * Enable a plugin
+     */
+    enablePlugin(name, config) {
+        const plugin = this.plugins.get(name);
+        if (!plugin) {
+            throw new Error(`Plugin not found: ${name}`);
+        }
+        if (plugin.validate &&
+            config?.options &&
+            !plugin.validate(config.options)) {
+            throw new Error(`Invalid options for plugin: ${name}`);
+        }
+        this.activePlugins.add(name);
+        logger.info(`Plugin enabled: ${name}`);
+    }
+    /**
+     * Disable a plugin
+     */
+    disablePlugin(name) {
+        this.activePlugins.delete(name);
+        logger.info(`Plugin disabled: ${name}`);
+    }
+    /**
+     * Process content through all active plugins
+     */
+    async processContent(content, pluginConfigs = []) {
+        let processedContent = content;
+        for (const config of pluginConfigs) {
+            const plugin = this.plugins.get(config.name);
+            if (!plugin) {
+                logger.warn(`Plugin not found: ${config.name}, skipping`);
+                continue;
+            }
+            if (!this.activePlugins.has(config.name)) {
+                logger.debug(`Plugin ${config.name} is disabled, skipping`);
+                continue;
+            }
+            try {
+                logger.debug(`Processing with plugin: ${config.name}`);
+                processedContent = await plugin.process(processedContent, config.options);
+            }
+            catch (error) {
+                logger.error(`Plugin ${config.name} failed:`, error);
+                // Continue processing with other plugins
+            }
+        }
+        return processedContent;
+    }
+    /**
+     * Get list of available plugins
+     */
+    getAvailablePlugins() {
+        return Array.from(this.plugins.entries()).map(([name, plugin]) => ({
+            name,
+            version: plugin.version,
+            enabled: this.activePlugins.has(name),
+        }));
+    }
+    /**
+     * Built-in SVG optimizer
+     */
+    optimizeSVG(content, options = {}) {
+        let optimized = content;
+        // Remove unnecessary whitespace
+        if (options.removeWhitespace !== false) {
+            optimized = optimized.replace(/>\s+</g, '><');
+        }
+        // Remove empty groups
+        if (options.removeEmptyGroups !== false) {
+            optimized = optimized.replace(/<g[^>]*>\s*<\/g>/g, '');
+        }
+        // Merge similar paths (basic implementation)
+        if (options.mergePaths === true) {
+            // This would require more sophisticated path parsing
+            logger.debug('Path merging not implemented yet');
+        }
+        // Remove comments
+        if (options.removeComments !== false) {
+            optimized = optimized.replace(/<!--[\s\S]*?-->/g, '');
+        }
+        return optimized;
+    }
+    /**
+     * Built-in color theme applier
+     */
+    applyColorTheme(content, options = {}) {
+        if (!options.theme) {
+            return content;
+        }
+        let themed = content;
+        const theme = options.theme;
+        // Replace colors according to theme
+        for (const [originalColor, newColor] of Object.entries(theme)) {
+            const colorRegex = new RegExp(`(fill|stroke)=["']${originalColor}["']`, 'g');
+            themed = themed.replace(colorRegex, `$1="${newColor}"`);
+        }
+        return themed;
+    }
+    /**
+     * Built-in size normalizer
+     */
+    normalizeSizes(content, options = {}) {
+        const targetSize = options.size || 24;
+        // This is a basic implementation - would need more sophisticated sizing logic
+        let normalized = content;
+        // Normalize stroke-width relative to size
+        if (options.normalizeStrokes !== false) {
+            const strokeRegex = /stroke-width=["']([^"']+)["']/g;
+            normalized = normalized.replace(strokeRegex, (match, width) => {
+                const numericWidth = parseFloat(width);
+                if (!isNaN(numericWidth)) {
+                    const normalizedWidth = (numericWidth / 24) * targetSize;
+                    return `stroke-width="${normalizedWidth}"`;
+                }
+                return match;
+            });
+        }
+        return normalized;
+    }
+    /**
+     * Clear all plugins (useful for testing)
+     */
+    clear() {
+        this.plugins.clear();
+        this.activePlugins.clear();
+    }
+}
+// Export singleton instance
+export const pluginManager = PluginManager.getInstance();

package/dist/core/style-compiler.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Comprehensive styling system for SVG components
+ * Supports all CSS properties, responsive design, theming, and dynamic styling
+ */
+export interface StyleTheme {
+    name: string;
+    colors: Record<string, string>;
+    sizes: Record<string, number | string>;
+    spacing: Record<string, number | string>;
+    breakpoints?: Record<string, string>;
+    animations?: Record<string, string>;
+}
+export interface ResponsiveValue<T> {
+    base: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+    [key: string]: T | undefined;
+}
+export interface SVGStyleOptions {
+    fill?: string | ResponsiveValue<string>;
+    stroke?: string | ResponsiveValue<string>;
+    strokeWidth?: number | string | ResponsiveValue<number | string>;
+    width?: number | string | ResponsiveValue<number | string>;
+    height?: number | string | ResponsiveValue<number | string>;
+    size?: number | string | ResponsiveValue<number | string>;
+    transform?: string;
+    rotate?: number | string;
+    scale?: number | string;
+    translateX?: number | string;
+    translateY?: number | string;
+    opacity?: number | ResponsiveValue<number>;
+    filter?: string;
+    clipPath?: string;
+    mask?: string;
+    animation?: string;
+    transition?: string;
+    hover?: Partial<SVGStyleOptions>;
+    focus?: Partial<SVGStyleOptions>;
+    active?: Partial<SVGStyleOptions>;
+    disabled?: Partial<SVGStyleOptions>;
+    theme?: string | StyleTheme;
+    responsive?: boolean;
+    css?: Record<string, string | number>;
+    className?: string;
+    'aria-label'?: string;
+    'aria-hidden'?: boolean;
+    title?: string;
+    role?: string;
+}
+export interface CompiledStyles {
+    inline: Record<string, string | number>;
+    classes: string[];
+    cssRules: string[];
+    mediaQueries: string[];
+}
+export declare class SVGStyleCompiler {
+    private static instance;
+    private themes;
+    private globalCSS;
+    private constructor();
+    static getInstance(): SVGStyleCompiler;
+    /**
+     * Compile SVG styling options into CSS
+     */
+    compileStyles(options: SVGStyleOptions, componentName: string): CompiledStyles;
+    /**
+     * Register a custom theme
+     */
+    registerTheme(theme: StyleTheme): void;
+    /**
+     * Generate CSS for a component with all styling options
+     */
+    generateComponentCSS(componentName: string, options: SVGStyleOptions): string;
+    /**
+     * Generate enhanced React component template with full styling support
+     */
+    generateStyledComponent(componentName: string, svgContent: string, options?: SVGStyleOptions): string;
+    private loadDefaultThemes;
+    private resolveTheme;
+    private compileBaseStyles;
+    private compileResponsiveStyles;
+    private compileInteractionStates;
+    private isResponsiveValue;
+    private camelToKebab;
+}
+export declare const styleCompiler: SVGStyleCompiler;