svger-cli 2.0.2 → 2.0.4

package/dist/services/config.js

@@ -20,40 +20,90 @@ export class ConfigService {
      */
     getDefaultConfig() {
         return {
+            // Source & Output
             source: './src/assets/svg',
             output: './src/components/icons',
+            // Framework Configuration
             framework: 'react',
             typescript: true,
+            componentType: 'functional',
+            // Processing Options
             watch: false,
+            parallel: true,
+            batchSize: 10,
+            maxConcurrency: 4,
+            cache: true,
+            // Default Properties
             defaultWidth: 24,
             defaultHeight: 24,
             defaultFill: 'currentColor',
-            exclude: [],
+            defaultStroke: 'none',
+            defaultStrokeWidth: 1,
+            // Styling Configuration
             styleRules: {
                 fill: 'inherit',
                 stroke: 'none',
             },
+            responsive: {
+                breakpoints: ['sm', 'md', 'lg', 'xl'],
+                values: {
+                    width: ['16px', '20px', '24px', '32px'],
+                    height: ['16px', '20px', '24px', '32px'],
+                },
+            },
+            theme: {
+                mode: 'auto',
+                variables: {
+                    primary: 'currentColor',
+                    secondary: '#6b7280',
+                    accent: '#3b82f6',
+                },
+            },
+            animations: [],
+            // Advanced Options
             plugins: [],
-            template: {
-                type: 'default'
+            exclude: [],
+            include: [],
+            // Error Handling
+            errorHandling: {
+                strategy: 'continue',
+                maxRetries: 3,
+                timeout: 30000,
+            },
+            // Performance Settings
+            performance: {
+                optimization: 'balanced',
+                memoryLimit: 512,
+                cacheTimeout: 3600000,
+            },
+            // Output Customization
+            outputConfig: {
+                naming: 'pascal',
+                extension: 'tsx',
+                directory: './src/components/icons',
             },
-            frameworkOptions: {
+            // Framework-specific configurations
+            react: {
+                componentType: 'functional',
                 forwardRef: true,
                 memo: false,
-                scriptSetup: true,
-                standalone: true
+                propsInterface: 'SVGProps',
+                styledComponents: false,
+                cssModules: false,
             },
-            errorHandling: {
-                skipOnError: false,
-                logLevel: 'info',
-                maxRetries: 3
+            vue: {
+                api: 'composition',
+                setup: true,
+                typescript: true,
+                scoped: true,
+                cssVariables: true,
+            },
+            angular: {
+                standalone: true,
+                signals: true,
+                changeDetection: 'OnPush',
+                encapsulation: 'Emulated',
             },
-            performance: {
-                batchSize: 10,
-                parallel: true,
-                timeout: 30000,
-                enableCache: true
-            }
         };
     }
     /**
@@ -79,7 +129,7 @@ export class ConfigService {
             // Merge with defaults to ensure all required properties exist
             this.cachedConfig = {
                 ...this.getDefaultConfig(),
-                ...configData
+                ...configData,
             };
             logger.debug('Configuration loaded successfully');
             return this.cachedConfig;
@@ -165,7 +215,8 @@ export class ConfigService {
         // Required string fields
         const requiredStringFields = ['source', 'output', 'defaultFill'];
         for (const field of requiredStringFields) {
-            if (!configToValidate[field] || typeof configToValidate[field] !== 'string') {
+            if (!configToValidate[field] ||
+                typeof configToValidate[field] !== 'string') {
                 errors.push(`${field} must be a non-empty string`);
             }
         }
@@ -182,12 +233,13 @@ export class ConfigService {
             errors.push('exclude must be an array');
         }
         // Validate styleRules object
-        if (configToValidate.styleRules && typeof configToValidate.styleRules !== 'object') {
+        if (configToValidate.styleRules &&
+            typeof configToValidate.styleRules !== 'object') {
             errors.push('styleRules must be an object');
         }
         return {
             valid: errors.length === 0,
-            errors
+            errors,
         };
     }
     /**

package/dist/services/file-watcher.js

@@ -30,7 +30,7 @@ export class FileWatcherService {
         try {
             const watcher = fs.watch(resolvedPath, {
                 persistent: true,
-                recursive: false
+                recursive: false,
             }, (eventType, filename) => {
                 if (filename) {
                     this.handleFileEvent(watchId, eventType, path.join(resolvedPath, filename));
@@ -83,7 +83,7 @@ export class FileWatcherService {
             const event = {
                 type: actualEventType,
                 filePath,
-                timestamp: Date.now()
+                timestamp: Date.now(),
             };
             logger.debug(`File event: ${actualEventType} - ${path.basename(filePath)}`);
             // Emit event to registered handlers
@@ -160,7 +160,7 @@ export class FileWatcherService {
         return {
             activeWatchers: this.watchers.size,
             pendingEvents: this.debounceTimers.size,
-            totalHandlers
+            totalHandlers,
         };
     }
     /**

package/dist/services/svg-service.js

@@ -41,9 +41,15 @@ export class SVGService {
             ...config,
             ...(options.config || {}),
             // Support direct properties on options for CLI convenience
-            ...options.framework && { framework: options.framework },
-            ...options.typescript !== undefined && { typescript: options.typescript },
-            ...options.frameworkOptions && { frameworkOptions: options.frameworkOptions }
+            ...(options.framework && {
+                framework: options.framework,
+            }),
+            ...(options.typescript !== undefined && {
+                typescript: options.typescript,
+            }),
+            ...(options.frameworkOptions && {
+                frameworkOptions: options.frameworkOptions,
+            }),
         };
         // Read all SVG files
         const files = await FileSystem.readDir(srcDir);
@@ -70,12 +76,13 @@ export class SVGService {
                     defaultWidth: mergedConfig.defaultWidth,
                     defaultHeight: mergedConfig.defaultHeight,
                     defaultFill: mergedConfig.defaultFill,
-                    styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([_, v]) => v !== undefined))
+                    namingConvention: mergedConfig.output?.naming || 'pascal',
+                    styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([, v]) => v !== undefined)),
                 });
                 results.push({
                     success: processingResult.success,
                     file,
-                    error: processingResult.error
+                    error: processingResult.error,
                 });
             }
             catch (error) {
@@ -83,7 +90,7 @@ export class SVGService {
                 results.push({
                     success: false,
                     file,
-                    error: error
+                    error: error,
                 });
             }
         }
@@ -93,13 +100,15 @@ export class SVGService {
         logger.info(`Build complete: ${successful} successful, ${failed} failed`);
         if (failed > 0) {
             logger.warn('Some files failed to process:');
-            results.filter(r => !r.success).forEach(r => {
+            results
+                .filter(r => !r.success)
+                .forEach(r => {
                 logger.warn(`  - ${r.file}: ${r.error?.message}`);
             });
         }
         // Generate index.ts file with all component exports
         if (successful > 0) {
-            await this.generateIndexFile(outDir, results.filter(r => r.success).map(r => r.file));
+            await this.generateIndexFile(outDir, results.filter(r => r.success).map(r => r.file), mergedConfig);
         }
     }
     /**
@@ -126,7 +135,7 @@ export class SVGService {
             defaultWidth: mergedConfig.defaultWidth,
             defaultHeight: mergedConfig.defaultHeight,
             defaultFill: mergedConfig.defaultFill,
-            styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([_, v]) => v !== undefined))
+            styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([, v]) => v !== undefined)),
         });
         if (!result.success) {
             throw result.error || new Error('Failed to generate component');
@@ -194,7 +203,7 @@ export class SVGService {
                 defaultWidth: mergedConfig.defaultWidth,
                 defaultHeight: mergedConfig.defaultHeight,
                 defaultFill: mergedConfig.defaultFill,
-                styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([_, v]) => v !== undefined))
+                styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([, v]) => v !== undefined)),
             });
         }
         catch (error) {
@@ -204,9 +213,10 @@ export class SVGService {
     /**
      * Handle file removal in watch mode
      */
-    async handleFileRemoval(filePath, outDir) {
+    async handleFileRemoval(filePath, outDir, config) {
         try {
-            const componentName = svgProcessor.generateComponentName(path.basename(filePath));
+            const namingConvention = config?.output?.naming || 'pascal';
+            const componentName = svgProcessor.generateComponentName(path.basename(filePath), namingConvention);
             const componentPath = path.join(outDir, `${componentName}.tsx`);
             if (await FileSystem.exists(componentPath)) {
                 await FileSystem.unlink(componentPath);
@@ -248,11 +258,12 @@ export class SVGService {
     /**
      * Generate index.ts file with all component exports
      */
-    async generateIndexFile(outDir, svgFiles) {
+    async generateIndexFile(outDir, svgFiles, config) {
         try {
+            const namingConvention = config?.output?.naming || 'pascal';
             const componentNames = svgFiles.map(file => {
                 const baseName = path.basename(file, '.svg');
-                return svgProcessor.generateComponentName(baseName);
+                return svgProcessor.generateComponentName(baseName, namingConvention);
             });
             const indexContent = this.generateIndexContent(componentNames);
             const indexPath = path.join(outDir, 'index.ts');
@@ -267,18 +278,9 @@ export class SVGService {
      * Generate the content for index.ts file
      */
     generateIndexContent(componentNames) {
-        const imports = componentNames.map(name => `export { default as ${name} } from './${name}';`).join('\n');
-        const exportAll = `
-// Export all components
-export {
-${componentNames.map(name => `  ${name},`).join('\n')}
-};
-
-// Re-export for convenience
-export default {
-${componentNames.map(name => `  ${name},`).join('\n')}
-};
-`;
+        const imports = componentNames
+            .map(name => `export { default as ${name} } from './${name}';`)
+            .join('\n');
         return `/**
  * SVG Components Index
  * Generated by svger-cli
@@ -288,10 +290,10 @@ ${componentNames.map(name => `  ${name},`).join('\n')}
  * 
  * Import all components:
  * import * as Icons from './components';
- * import Icons from './components'; // default export
  */
 
-${imports}${exportAll}`;
+${imports}
+`;
     }
     /**
      * Get service statistics
@@ -300,7 +302,7 @@ ${imports}${exportAll}`;
         return {
             activeWatchers: this.activeWatchers.size,
             processingQueue: svgProcessor.getProcessingStats(),
-            watcherStats: fileWatcher.getWatchStats()
+            watcherStats: fileWatcher.getWatchStats(),
         };
     }
     /**
@@ -346,7 +348,9 @@ export class LockService {
     }
     writeLockFile(locks) {
         try {
-            FileSystem.writeJSONSync(this.getLockFilePath(), Array.from(locks), { spaces: 2 });
+            FileSystem.writeJSONSync(this.getLockFilePath(), Array.from(locks), {
+                spaces: 2,
+            });
             this.cachedLocks = locks;
         }
         catch (error) {

package/dist/templates/ComponentTemplate.js

@@ -13,32 +13,32 @@
  * @param [options.defaultFill="currentColor"] - The default fill color for the SVG.
  * @returns A string containing the complete TypeScript code for the React SVG component.
  */
-export function reactTemplate({ componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = "currentColor", }) {
+export function reactTemplate({ componentName, svgContent, defaultWidth = 24, defaultHeight = 24, defaultFill = 'currentColor', }) {
     const cleaned = svgContent
-        .replace(/<\?xml.*?\?>/g, "")
-        .replace(/<!DOCTYPE.*?>/g, "")
-        .replace(/\r?\n|\r/g, "")
-        .replace(/\s{2,}/g, " ")
-        .replace(/style="[^"]*"/g, "")
-        .replace(/\s+xmlns(:xlink)?="[^"]*"/g, "")
+        .replace(/<\?xml.*?\?>/g, '')
+        .replace(/<!DOCTYPE.*?>/g, '')
+        .replace(/\r?\n|\r/g, '')
+        .replace(/\s{2,}/g, ' ')
+        .replace(/style="[^"]*"/g, '')
+        .replace(/\s+xmlns(:xlink)?="[^"]*"/g, '')
         .trim()
-        .replace(/^.*?<svg[^>]*>(.*?)<\/svg>.*$/i, "$1");
-    return `import type { SVGProps } from "react";
-const Svg${componentName} = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 ${defaultWidth} ${defaultHeight}"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    width={props.width || ${defaultWidth}}
-    height={props.height || ${defaultHeight}}
-    fill={props.fill || "${defaultFill}"}
-    stroke={props.stroke || "none"}
-    className={props.className}
-    {...props}
-  >
-    ${cleaned}
-  </svg>
-);
-export default Svg${componentName};
+        .replace(/^.*?<svg[^>]*>(.*?)<\/svg>.*$/i, '$1');
+    return `import type { SVGProps } from "react";
+const Svg${componentName} = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 ${defaultWidth} ${defaultHeight}"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    width={props.width || ${defaultWidth}}
+    height={props.height || ${defaultHeight}}
+    fill={props.fill || "${defaultFill}"}
+    stroke={props.stroke || "none"}
+    className={props.className}
+    {...props}
+  >
+    ${cleaned}
+  </svg>
+);
+export default Svg${componentName};
 `;
 }

package/dist/types/index.d.ts

@@ -2,35 +2,92 @@
  * Type definitions for svger-cli
  */
 export type FrameworkType = 'react' | 'vue' | 'svelte' | 'angular' | 'solid' | 'preact' | 'lit' | 'vanilla';
+export type NamingConvention = 'kebab' | 'pascal' | 'camel';
+export type ComponentType = 'functional' | 'class' | 'arrow';
+export type ErrorHandlingStrategy = 'continue' | 'stop' | 'retry';
+export type PerformanceOptimization = 'fast' | 'balanced' | 'maximum';
+export type ThemeMode = 'light' | 'dark' | 'auto';
+export type ChangeDetectionStrategy = 'Default' | 'OnPush';
+export type ViewEncapsulation = 'Emulated' | 'None' | 'ShadowDom';
+export interface OutputConfig {
+    naming?: NamingConvention;
+    extension?: string;
+    directory?: string;
+}
+export interface ResponsiveConfig {
+    breakpoints: string[];
+    values: {
+        [property: string]: string[];
+    };
+}
+export interface ThemeConfig {
+    mode: ThemeMode;
+    variables: {
+        [name: string]: string;
+    };
+}
+export interface ErrorHandlingConfig {
+    strategy: ErrorHandlingStrategy;
+    maxRetries: number;
+    timeout: number;
+}
+export interface PerformanceConfig {
+    optimization: PerformanceOptimization;
+    memoryLimit: number;
+    cacheTimeout: number;
+}
+export interface ReactConfig {
+    componentType?: ComponentType;
+    forwardRef?: boolean;
+    memo?: boolean;
+    propsInterface?: string;
+    styledComponents?: boolean;
+    cssModules?: boolean;
+}
+export interface VueConfig {
+    api?: 'composition' | 'options';
+    setup?: boolean;
+    typescript?: boolean;
+    scoped?: boolean;
+    cssVariables?: boolean;
+}
+export interface AngularConfig {
+    standalone?: boolean;
+    signals?: boolean;
+    changeDetection?: ChangeDetectionStrategy;
+    encapsulation?: ViewEncapsulation;
+}
 export interface SVGConfig {
     source: string;
     output: string;
-    watch: boolean;
     framework: FrameworkType;
     typescript: boolean;
+    componentType?: ComponentType;
+    watch: boolean;
+    parallel: boolean;
+    batchSize: number;
+    maxConcurrency: number;
+    cache: boolean;
     defaultWidth: number;
     defaultHeight: number;
     defaultFill: string;
-    exclude: string[];
+    defaultStroke?: string;
+    defaultStrokeWidth?: number;
     styleRules: {
-        fill?: string;
-        stroke?: string;
-        [key: string]: string | undefined;
-    };
-    plugins?: PluginConfig[];
-    template?: TemplateConfig;
-    frameworkOptions?: FrameworkOptions;
-    errorHandling?: {
-        skipOnError: boolean;
-        logLevel: 'debug' | 'info' | 'warn' | 'error';
-        maxRetries: number;
-    };
-    performance?: {
-        batchSize: number;
-        parallel: boolean;
-        timeout: number;
-        enableCache: boolean;
+        [property: string]: string;
     };
+    responsive?: ResponsiveConfig;
+    theme?: ThemeConfig;
+    animations?: string[];
+    plugins: PluginConfig[];
+    exclude: string[];
+    include?: string[];
+    errorHandling: ErrorHandlingConfig;
+    performance: PerformanceConfig;
+    outputConfig: OutputConfig;
+    react?: ReactConfig;
+    vue?: VueConfig;
+    angular?: AngularConfig;
 }
 export interface FrameworkOptions {
     composition?: boolean;
@@ -72,6 +129,7 @@ export interface ComponentGenerationOptions {
     styleRules?: Record<string, string>;
     template?: TemplateConfig;
     frameworkOptions?: FrameworkOptions;
+    namingConvention?: 'kebab' | 'pascal' | 'camel';
 }
 export interface TemplateConfig {
     type: 'default' | 'custom';

package/dist/utils/native.d.ts

@@ -1,10 +1,41 @@
+type BufferEncoding = 'ascii' | 'utf8' | 'utf-8' | 'utf16le' | 'ucs2' | 'ucs-2' | 'base64' | 'base64url' | 'latin1' | 'binary' | 'hex';
 /**
  * Native Node.js utilities to replace external dependencies
  */
 /**
- * Convert string to PascalCase (replaces change-case package)
+ * Convert a string to PascalCase, preserving existing capital letters.
+ *
+ * @param {string} str - Input string to convert.
+ * @returns {string} PascalCase string.
+ *
+ * @example
+ * toPascalCase('hello-world') => 'HelloWorld'
+ * toPascalCase('hello_world') => 'HelloWorld'
+ * toPascalCase('hello world') => 'HelloWorld'
+ * toPascalCase('ArrowBendDownLeft') => 'ArrowBendDownLeft'
  */
 export declare function toPascalCase(str: string): string;
+/**
+ * Convert a string to camelCase.
+ *
+ * @param {string} str - Input string to convert.
+ * @returns {string} camelCase string.
+ *
+ * @example
+ * toCamelCase('hello-world') => 'helloWorld'
+ */
+export declare function toCamelCase(str: string): string;
+/**
+ * Convert a string to kebab-case.
+ *
+ * @param {string} str - Input string to convert.
+ * @returns {string} kebab-case string.
+ *
+ * @example
+ * toKebabCase('HelloWorld') => 'hello-world'
+ * toKebabCase('hello_world') => 'hello-world'
+ */
+export declare function toKebabCase(str: string): string;
 /**
  * Native file system utilities (replaces fs-extra package)
  */

package/dist/utils/native.js

@@ -4,15 +4,54 @@ import { promisify } from 'util';
  * Native Node.js utilities to replace external dependencies
  */
 /**
- * Convert string to PascalCase (replaces change-case package)
+ * Convert a string to PascalCase, preserving existing capital letters.
+ *
+ * @param {string} str - Input string to convert.
+ * @returns {string} PascalCase string.
+ *
+ * @example
+ * toPascalCase('hello-world') => 'HelloWorld'
+ * toPascalCase('hello_world') => 'HelloWorld'
+ * toPascalCase('hello world') => 'HelloWorld'
+ * toPascalCase('ArrowBendDownLeft') => 'ArrowBendDownLeft'
  */
 export function toPascalCase(str) {
+    // If the string is already in a good format (contains capital letters and no separators), preserve it
+    if (/^[A-Z][a-zA-Z0-9]*$/.test(str)) {
+        return str;
+    }
+    return str
+        .replace(/[-_\s]+(.)?/g, (_, char) => (char ? char.toUpperCase() : ''))
+        .replace(/^(.)/, char => char.toUpperCase());
+}
+/**
+ * Convert a string to camelCase.
+ *
+ * @param {string} str - Input string to convert.
+ * @returns {string} camelCase string.
+ *
+ * @example
+ * toCamelCase('hello-world') => 'helloWorld'
+ */
+export function toCamelCase(str) {
+    const pascal = toPascalCase(str);
+    return pascal.charAt(0).toLowerCase() + pascal.slice(1);
+}
+/**
+ * Convert a string to kebab-case.
+ *
+ * @param {string} str - Input string to convert.
+ * @returns {string} kebab-case string.
+ *
+ * @example
+ * toKebabCase('HelloWorld') => 'hello-world'
+ * toKebabCase('hello_world') => 'hello-world'
+ */
+export function toKebabCase(str) {
     return str
-        .replace(/[^a-zA-Z0-9]/g, ' ')
-        .split(' ')
-        .filter(Boolean)
-        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-        .join('');
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .replace(/[\s_]+/g, '-')
+        .toLowerCase();
 }
 /**
  * Native file system utilities (replaces fs-extra package)
@@ -154,7 +193,7 @@ export class CLI {
         this.commands.set(command, {
             description,
             action: action,
-            options
+            options,
         });
     }
     async parse() {
@@ -266,7 +305,7 @@ export class FileWatcher {
         try {
             const watcher = fs.watch(path, {
                 recursive: options?.recursive || false,
-                persistent: true
+                persistent: true,
             }, (eventType, filename) => {
                 if (filename) {
                     this.emit(eventType, `${path}/${filename}`);

package/dist/watch.d.ts

@@ -1,4 +1,4 @@
-import { FileWatcher } from "./utils/native.js";
+import { FileWatcher } from './utils/native.js';
 /**
  * Watches a source folder for changes to SVG files and automatically
  * rebuilds React components when SVGs are added, modified, or deleted.