svger-cli 2.0.2 → 2.0.4

package/dist/core/style-compiler.js

@@ -23,7 +23,7 @@ export class SVGStyleCompiler {
             inline: {},
             classes: [],
             cssRules: [],
-            mediaQueries: []
+            mediaQueries: [],
         };
         // Get theme if specified
         const theme = this.resolveTheme(options.theme);
@@ -76,7 +76,8 @@ export class SVGStyleCompiler {
         const imports = hasCustomStyles
             ? `import React from 'react';\nimport type { SVGProps } from "react";`
             : `import type { SVGProps } from "react";`;
-        const styledCSS = hasCustomStyles ? `
+        const styledCSS = hasCustomStyles
+            ? `
 const ${componentName}Styles = \`
 ${compiled.cssRules.join('\n')}
 ${compiled.mediaQueries.join('\n')}
@@ -92,7 +93,8 @@ if (typeof document !== 'undefined') {
     document.head.appendChild(style);
   }
 }
-` : '';
+`
+            : '';
         const inlineStyleObject = Object.keys(compiled.inline).length > 0
             ? `const defaultStyles = ${JSON.stringify(compiled.inline, null, 2)};`
             : '';
@@ -295,28 +297,28 @@ if (typeof document !== 'undefined') {
                 danger: '#dc3545',
                 info: '#17a2b8',
                 light: '#f8f9fa',
-                dark: '#343a40'
+                dark: '#343a40',
             },
             sizes: {
                 xs: 12,
                 sm: 16,
                 md: 24,
                 lg: 32,
-                xl: 48
+                xl: 48,
             },
             spacing: {
                 1: '0.25rem',
                 2: '0.5rem',
                 3: '0.75rem',
                 4: '1rem',
-                5: '1.5rem'
+                5: '1.5rem',
             },
             breakpoints: {
                 sm: '576px',
                 md: '768px',
                 lg: '992px',
-                xl: '1200px'
-            }
+                xl: '1200px',
+            },
         });
         // Dark theme
         this.registerTheme({
@@ -329,28 +331,28 @@ if (typeof document !== 'undefined') {
                 danger: '#dc3545',
                 info: '#0dcaf0',
                 light: '#212529',
-                dark: '#f8f9fa'
+                dark: '#f8f9fa',
             },
             sizes: {
                 xs: 12,
                 sm: 16,
                 md: 24,
                 lg: 32,
-                xl: 48
+                xl: 48,
             },
             spacing: {
                 1: '0.25rem',
                 2: '0.5rem',
                 3: '0.75rem',
                 4: '1rem',
-                5: '1.5rem'
+                5: '1.5rem',
             },
             breakpoints: {
                 sm: '576px',
                 md: '768px',
                 lg: '992px',
-                xl: '1200px'
-            }
+                xl: '1200px',
+            },
         });
     }
     resolveTheme(theme) {
@@ -373,7 +375,7 @@ if (typeof document !== 'undefined') {
             clipPath: 'clipPath',
             mask: 'mask',
             animation: 'animation',
-            transition: 'transition'
+            transition: 'transition',
         };
         for (const [cssProp, optionKey] of Object.entries(styleMap)) {
             const value = options[optionKey];
@@ -416,7 +418,7 @@ if (typeof document !== 'undefined') {
             sm: '576px',
             md: '768px',
             lg: '992px',
-            xl: '1200px'
+            xl: '1200px',
         };
         for (const [prop, value] of Object.entries(options)) {
             if (this.isResponsiveValue(value)) {

package/dist/core/template-manager.js

@@ -25,37 +25,37 @@ export class TemplateManager {
         this.registerTemplate({
             name: 'react-functional',
             generate: (options) => this.generateReactFunctional(options),
-            validate: (options) => !!options.componentName && !!options.svgContent
+            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
+            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
+            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
+            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
+            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
+            validate: (options) => !!options.componentName && !!options.svgContent,
         });
         logger.debug('Built-in templates loaded');
     }
@@ -97,7 +97,7 @@ export class TemplateManager {
                 name: templateName,
                 generate: (options) => {
                     return this.processStringTemplate(templateContent, options);
-                }
+                },
             });
             logger.info(`Custom template loaded: ${templateName}`);
         }
@@ -127,7 +127,7 @@ export class TemplateManager {
      * Standard React Functional Component
      */
     generateReactFunctional(options) {
-        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
         return `import React from "react";
 import type { SVGProps } from "react";
 
@@ -173,7 +173,7 @@ export default ${componentName};
      * React Functional Component with forwardRef
      */
     generateReactForwardRef(options) {
-        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
         return `import { forwardRef } from "react";
 import type { SVGProps } from "react";
 
@@ -208,7 +208,7 @@ export default ${componentName};
      * React Class Component (legacy)
      */
     generateReactClass(options) {
-        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
         return `import { Component } from "react";
 import type { SVGProps } from "react";
 
@@ -242,7 +242,7 @@ export default ${componentName};
      * Styled Components Template
      */
     generateStyledComponents(options) {
-        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
         return `import styled from "styled-components";
 import type { SVGProps } from "react";
 
@@ -275,7 +275,7 @@ export default ${componentName};
      * TypeScript Native (no React dependencies)
      */
     generateTypeScriptNative(options) {
-        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
         return `/**
  * ${componentName} SVG Icon (Native TypeScript)
  * Generated by svger-cli
@@ -328,7 +328,7 @@ export default ${componentName};
             ...options,
             defaultWidth: options.defaultWidth || 24,
             defaultHeight: options.defaultHeight || 24,
-            defaultFill: options.defaultFill || 'currentColor'
+            defaultFill: options.defaultFill || 'currentColor',
         };
         let processed = template;
         // Replace variables in the format {{variableName}}
@@ -342,7 +342,7 @@ export default ${componentName};
      * Enhanced Styled Template with comprehensive styling support
      */
     generateEnhancedStyled(options) {
-        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor' } = options;
+        const { componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', } = options;
         return `import React from "react";
 import type { SVGProps } from "react";
 

package/dist/index.d.ts

@@ -22,7 +22,7 @@ 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';
 /**
  * SVG Processor - Core SVG content processing and React component generation
  * Provides: SVG parsing, optimization, React component generation, and batch processing
@@ -32,7 +32,7 @@ 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
@@ -47,7 +47,7 @@ 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, 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
@@ -57,7 +57,7 @@ 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, 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
@@ -82,7 +82,7 @@ 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, SVGProcessorResult, ProcessingJob, ProcessingStatus, Plugin, PluginConfig, Template, TemplateConfig, WatchOptions } from './types/index.js';
+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
  */
@@ -104,7 +104,9 @@ export declare const SVGER: {
     /**
      * Process single SVG file to React component
      */
-    readonly processFile: (svgFilePath: string, outputDir: string, options?: Partial<import("./types/index.js").ComponentGenerationOptions>) => Promise<import("./types/index.js").SVGProcessorResult>;
+    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
      */

package/dist/index.js

@@ -25,7 +25,7 @@ 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
 // ============================================================================
@@ -38,7 +38,7 @@ 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
@@ -56,7 +56,7 @@ 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 } from './core/framework-templates.js';
+export { FrameworkTemplateEngine, frameworkTemplateEngine, } from './core/framework-templates.js';
 // ============================================================================
 // PLUGIN ARCHITECTURE
 // ============================================================================
@@ -72,7 +72,7 @@ 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, 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
@@ -137,7 +137,7 @@ export const SVGER = {
     /**
      * Build all SVG files in directory
      */
-    build: buildAll
+    build: buildAll,
 };
 // ============================================================================
 // VERSION INFORMATION

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

@@ -1,4 +1,4 @@
-import { ComponentGenerationOptions, SVGProcessorResult } from '../types/index.js';
+import { ComponentGenerationOptions, SVGProcessorResult, NamingConvention } from '../types/index.js';
 /**
  * SVG content processor and component generator
  */
@@ -19,7 +19,7 @@ export declare class SVGProcessor {
     /**
      * Generate component name from filename
      */
-    generateComponentName(fileName: string): string;
+    generateComponentName(fileName: string, namingConvention?: 'kebab' | 'pascal' | 'camel'): string;
     /**
      * Generate React component from SVG content
      */
@@ -45,10 +45,16 @@ export declare class SVGProcessor {
         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>): Promise<SVGProcessorResult>;
+    processSVGFile(svgFilePath: string, outputDir: string, options?: Partial<ComponentGenerationOptions & {
+        namingConvention?: NamingConvention;
+    }>): Promise<SVGProcessorResult>;
     /**
      * Get processing statistics
      */

package/dist/processors/svg-processor.js

@@ -1,5 +1,5 @@
 import path from 'path';
-import { toPascalCase, FileSystem } from '../utils/native.js';
+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';
@@ -22,7 +22,7 @@ export class SVGProcessor {
      */
     cleanSVGContent(svgContent) {
         logger.debug('Cleaning SVG content');
-        return svgContent
+        return (svgContent
             // Remove XML declaration
             .replace(/<\?xml.*?\?>/g, '')
             // Remove DOCTYPE declaration
@@ -52,7 +52,7 @@ export class SVGProcessor {
             // Remove outer SVG tag and keep inner content
             .trim()
             .replace(/^<svg[^>]*>([\s\S]*)<\/svg>$/i, '$1')
-            .trim();
+            .trim());
     }
     /**
      * Extract viewBox from SVG content
@@ -64,14 +64,29 @@ export class SVGProcessor {
     /**
      * Generate component name from filename
      */
-    generateComponentName(fileName) {
+    generateComponentName(fileName, namingConvention) {
         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}`;
+        // 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;
+            }
         }
-        return componentName;
     }
     /**
      * Generate React component from SVG content
@@ -88,7 +103,7 @@ export class SVGProcessor {
                 svgContent: processedContent,
                 framework: options.framework || 'react',
                 typescript: options.typescript !== undefined ? options.typescript : true,
-                ...options
+                ...options,
             };
             // Use framework template engine directly
             const component = frameworkTemplateEngine.generateComponent(fullOptions);
@@ -112,7 +127,7 @@ export class SVGProcessor {
             const component = frameworkTemplateEngine.generateComponent({
                 ...options,
                 componentName,
-                svgContent: optimizedContent
+                svgContent: optimizedContent,
             });
             logger.debug(`Generated ${options.framework} component: ${componentName}`);
             return component;
@@ -141,6 +156,26 @@ export class SVGProcessor {
             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
      */
@@ -150,15 +185,16 @@ export class SVGProcessor {
             id: jobId,
             filePath: svgFilePath,
             status: 'processing',
-            startTime: Date.now()
+            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 name using the specified naming convention
+            const namingConvention = options.namingConvention || 'pascal';
+            const componentName = this.generateComponentName(path.basename(svgFilePath), namingConvention);
             // Generate component code
             const componentCode = await this.generateComponent(componentName, svgContent, options);
             // Ensure output directory exists
@@ -167,8 +203,10 @@ export class SVGProcessor {
             const framework = options.framework || 'react';
             const typescript = options.typescript !== undefined ? options.typescript : true;
             const fileExtension = frameworkTemplateEngine.getFileExtension(framework, typescript);
+            // Generate filename using naming convention from options
+            const fileName = this.generateFileName(componentName, fileExtension, namingConvention);
             // Write component file
-            const outputFilePath = path.join(outputDir, `${componentName}.${fileExtension}`);
+            const outputFilePath = path.join(outputDir, fileName);
             await FileSystem.writeFile(outputFilePath, componentCode, 'utf-8');
             // Update job status
             job.status = 'completed';
@@ -176,9 +214,9 @@ export class SVGProcessor {
             const result = {
                 success: true,
                 componentName,
-                filePath: outputFilePath
+                filePath: outputFilePath,
             };
-            logger.success(`Generated component: ${componentName}.${fileExtension}`);
+            logger.success(`Generated component: ${fileName}`);
             return result;
         }
         catch (error) {
@@ -189,7 +227,7 @@ export class SVGProcessor {
                 success: false,
                 componentName: '',
                 filePath: svgFilePath,
-                error: error
+                error: error,
             };
             logger.error(`Failed to process ${svgFilePath}:`, error);
             return result;