svger-cli 2.0.1 → 2.0.3

package/dist/services/svg-service.js

@@ -0,0 +1,395 @@
+import path from 'path';
+import { FileSystem } from '../utils/native.js';
+import { logger } from '../core/logger.js';
+import { configService } from './config.js';
+import { svgProcessor } from '../processors/svg-processor.js';
+import { fileWatcher } from './file-watcher.js';
+/**
+ * Main SVG service that orchestrates all SVG processing operations
+ */
+export class SVGService {
+    static instance;
+    activeWatchers = new Set();
+    lockService;
+    constructor() {
+        this.lockService = LockService.getInstance();
+    }
+    static getInstance() {
+        if (!SVGService.instance) {
+            SVGService.instance = new SVGService();
+        }
+        return SVGService.instance;
+    }
+    /**
+     * Build all SVG files from source to output directory
+     */
+    async buildAll(options) {
+        logger.info('Starting SVG build process');
+        logger.info(`Source: ${options.src}`);
+        logger.info(`Output: ${options.out}`);
+        const srcDir = path.resolve(options.src);
+        const outDir = path.resolve(options.out);
+        // Validate source directory
+        if (!(await FileSystem.exists(srcDir))) {
+            throw new Error(`Source folder not found: ${srcDir}`);
+        }
+        // Ensure output directory exists
+        await FileSystem.ensureDir(outDir);
+        // Get configuration - merge config file with options
+        const config = configService.readConfig();
+        const mergedConfig = {
+            ...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,
+            }),
+        };
+        // Read all SVG files
+        const files = await FileSystem.readDir(srcDir);
+        const svgFiles = files.filter((file) => file.endsWith('.svg'));
+        if (svgFiles.length === 0) {
+            logger.warn('No SVG files found in source directory');
+            return;
+        }
+        logger.info(`Found ${svgFiles.length} SVG files to process`);
+        const results = [];
+        // Process each SVG file
+        for (const file of svgFiles) {
+            const svgPath = path.join(srcDir, file);
+            // Check if file is locked
+            if (this.lockService.isLocked(svgPath)) {
+                logger.warn(`Skipped locked file: ${file}`);
+                continue;
+            }
+            try {
+                const processingResult = await svgProcessor.processSVGFile(svgPath, outDir, {
+                    framework: mergedConfig.framework,
+                    typescript: mergedConfig.typescript,
+                    frameworkOptions: mergedConfig.frameworkOptions,
+                    defaultWidth: mergedConfig.defaultWidth,
+                    defaultHeight: mergedConfig.defaultHeight,
+                    defaultFill: mergedConfig.defaultFill,
+                    styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([_, v]) => v !== undefined)),
+                });
+                results.push({
+                    success: processingResult.success,
+                    file,
+                    error: processingResult.error,
+                });
+            }
+            catch (error) {
+                logger.error(`Failed to process ${file}:`, error);
+                results.push({
+                    success: false,
+                    file,
+                    error: error,
+                });
+            }
+        }
+        // Log summary
+        const successful = results.filter(r => r.success).length;
+        const failed = results.filter(r => !r.success).length;
+        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 => {
+                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));
+        }
+    }
+    /**
+     * Generate a React component from a single SVG file
+     */
+    async generateSingle(options) {
+        logger.info(`Generating component from: ${options.svgFile}`);
+        const filePath = path.resolve(options.svgFile);
+        const outDir = path.resolve(options.outDir);
+        // Validate SVG file
+        if (!(await FileSystem.exists(filePath))) {
+            throw new Error(`SVG file not found: ${filePath}`);
+        }
+        // Check if file is locked
+        if (this.lockService.isLocked(filePath)) {
+            logger.warn(`File is locked: ${path.basename(options.svgFile)}`);
+            return;
+        }
+        // Get configuration
+        const config = configService.readConfig();
+        const mergedConfig = { ...config, ...options.config };
+        // Process the file
+        const result = await svgProcessor.processSVGFile(filePath, outDir, {
+            defaultWidth: mergedConfig.defaultWidth,
+            defaultHeight: mergedConfig.defaultHeight,
+            defaultFill: mergedConfig.defaultFill,
+            styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([_, v]) => v !== undefined)),
+        });
+        if (!result.success) {
+            throw result.error || new Error('Failed to generate component');
+        }
+        logger.success(`Component generated: ${result.componentName}`);
+    }
+    /**
+     * Start watching SVG files for changes
+     */
+    async startWatching(options) {
+        logger.info('Starting watch mode');
+        logger.info(`Watching: ${options.src}`);
+        logger.info(`Output: ${options.out}`);
+        const srcDir = path.resolve(options.src);
+        const outDir = path.resolve(options.out);
+        // Validate source directory
+        if (!(await FileSystem.exists(srcDir))) {
+            throw new Error(`Source folder not found: ${srcDir}`);
+        }
+        // Start watching
+        const watchId = await fileWatcher.watchDirectory(srcDir, options);
+        this.activeWatchers.add(watchId);
+        // Register event handler
+        fileWatcher.onFileEvent(watchId, async (event) => {
+            await this.handleWatchEvent(event, outDir, options.config);
+        });
+        logger.success(`Watch mode active - waiting for file changes...`);
+        return watchId;
+    }
+    /**
+     * Handle file watch events
+     */
+    async handleWatchEvent(event, outDir, config) {
+        const fileName = path.basename(event.filePath);
+        switch (event.type) {
+            case 'add':
+                logger.info(`New SVG detected: ${fileName}`);
+                await this.processWatchedFile(event.filePath, outDir, config);
+                break;
+            case 'change':
+                logger.info(`SVG updated: ${fileName}`);
+                await this.processWatchedFile(event.filePath, outDir, config);
+                break;
+            case 'unlink':
+                logger.info(`SVG removed: ${fileName}`);
+                await this.handleFileRemoval(event.filePath, outDir);
+                break;
+        }
+    }
+    /**
+     * Process a watched file
+     */
+    async processWatchedFile(filePath, outDir, config) {
+        try {
+            // Check if file is locked
+            if (this.lockService.isLocked(filePath)) {
+                logger.warn(`Skipped locked file: ${path.basename(filePath)}`);
+                return;
+            }
+            // Get configuration
+            const fullConfig = configService.readConfig();
+            const mergedConfig = { ...fullConfig, ...config };
+            // Process the file
+            await svgProcessor.processSVGFile(filePath, outDir, {
+                defaultWidth: mergedConfig.defaultWidth,
+                defaultHeight: mergedConfig.defaultHeight,
+                defaultFill: mergedConfig.defaultFill,
+                styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([_, v]) => v !== undefined)),
+            });
+        }
+        catch (error) {
+            logger.error(`Failed to process watched file ${path.basename(filePath)}:`, error);
+        }
+    }
+    /**
+     * Handle file removal in watch mode
+     */
+    async handleFileRemoval(filePath, outDir) {
+        try {
+            const componentName = svgProcessor.generateComponentName(path.basename(filePath));
+            const componentPath = path.join(outDir, `${componentName}.tsx`);
+            if (await FileSystem.exists(componentPath)) {
+                await FileSystem.unlink(componentPath);
+                logger.success(`Removed component: ${componentName}.tsx`);
+            }
+        }
+        catch (error) {
+            logger.error(`Failed to remove component for ${path.basename(filePath)}:`, error);
+        }
+    }
+    /**
+     * Stop watching files
+     */
+    stopWatching(watchId) {
+        if (watchId) {
+            fileWatcher.stopWatching(watchId);
+            this.activeWatchers.delete(watchId);
+        }
+        else {
+            // Stop all watchers
+            for (const id of this.activeWatchers) {
+                fileWatcher.stopWatching(id);
+            }
+            this.activeWatchers.clear();
+        }
+    }
+    /**
+     * Clean output directory
+     */
+    async clean(outDir) {
+        const targetDir = path.resolve(outDir);
+        if (!(await FileSystem.exists(targetDir))) {
+            logger.warn(`Directory not found: ${targetDir}`);
+            return;
+        }
+        await FileSystem.emptyDir(targetDir);
+        logger.success(`Cleaned all generated SVG components in: ${targetDir}`);
+    }
+    /**
+     * Generate index.ts file with all component exports
+     */
+    async generateIndexFile(outDir, svgFiles) {
+        try {
+            const componentNames = svgFiles.map(file => {
+                const baseName = path.basename(file, '.svg');
+                return svgProcessor.generateComponentName(baseName);
+            });
+            const indexContent = this.generateIndexContent(componentNames);
+            const indexPath = path.join(outDir, 'index.ts');
+            await FileSystem.writeFile(indexPath, indexContent, 'utf-8');
+            logger.success(`Generated index.ts with ${componentNames.length} component exports`);
+        }
+        catch (error) {
+            logger.error('Failed to generate index.ts:', error);
+        }
+    }
+    /**
+     * 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')}
+};
+`;
+        return `/**
+ * SVG Components Index
+ * Generated by svger-cli
+ * 
+ * Import individual components:
+ * import { ${componentNames[0] || 'ComponentName'} } from './components';
+ * 
+ * Import all components:
+ * import * as Icons from './components';
+ * import Icons from './components'; // default export
+ */
+
+${imports}${exportAll}`;
+    }
+    /**
+     * Get service statistics
+     */
+    getStats() {
+        return {
+            activeWatchers: this.activeWatchers.size,
+            processingQueue: svgProcessor.getProcessingStats(),
+            watcherStats: fileWatcher.getWatchStats(),
+        };
+    }
+    /**
+     * Shutdown service
+     */
+    shutdown() {
+        this.stopWatching();
+        fileWatcher.shutdown();
+        svgProcessor.clearQueue();
+        logger.info('SVG service shutdown complete');
+    }
+}
+/**
+ * Simple file locking service
+ */
+export class LockService {
+    static instance;
+    static LOCK_FILE = '.svg-lock';
+    cachedLocks = null;
+    constructor() { }
+    static getInstance() {
+        if (!LockService.instance) {
+            LockService.instance = new LockService();
+        }
+        return LockService.instance;
+    }
+    getLockFilePath() {
+        return path.resolve(LockService.LOCK_FILE);
+    }
+    readLockFile() {
+        if (this.cachedLocks) {
+            return this.cachedLocks;
+        }
+        try {
+            const data = FileSystem.readJSONSync(this.getLockFilePath());
+            this.cachedLocks = new Set(Array.isArray(data) ? data : []);
+            return this.cachedLocks;
+        }
+        catch {
+            this.cachedLocks = new Set();
+            return this.cachedLocks;
+        }
+    }
+    writeLockFile(locks) {
+        try {
+            FileSystem.writeJSONSync(this.getLockFilePath(), Array.from(locks), {
+                spaces: 2,
+            });
+            this.cachedLocks = locks;
+        }
+        catch (error) {
+            logger.error('Failed to write lock file:', error);
+        }
+    }
+    lockFiles(files) {
+        const fileNames = files.map(f => path.basename(f));
+        const current = this.readLockFile();
+        for (const fileName of fileNames) {
+            current.add(fileName);
+        }
+        this.writeLockFile(current);
+        logger.success(`Locked files: ${fileNames.join(', ')}`);
+    }
+    unlockFiles(files) {
+        const fileNames = files.map(f => path.basename(f));
+        const current = this.readLockFile();
+        for (const fileName of fileNames) {
+            current.delete(fileName);
+        }
+        this.writeLockFile(current);
+        logger.success(`Unlocked files: ${fileNames.join(', ')}`);
+    }
+    isLocked(file) {
+        const locks = this.readLockFile();
+        return locks.has(path.basename(file));
+    }
+    clearCache() {
+        this.cachedLocks = null;
+    }
+}
+// Export singleton instance
+export const svgService = SVGService.getInstance();

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

@@ -0,0 +1,146 @@
+/**
+ * Type definitions for svger-cli
+ */
+export type FrameworkType = 'react' | 'vue' | 'svelte' | 'angular' | 'solid' | 'preact' | 'lit' | 'vanilla';
+export type NamingConvention = 'kebab' | 'pascal' | 'camel';
+export interface OutputConfig {
+    naming?: NamingConvention;
+    extension?: string;
+    directory?: string;
+}
+export interface SVGConfig {
+    source: string;
+    output: string | OutputConfig;
+    watch: boolean;
+    framework: FrameworkType;
+    typescript: boolean;
+    defaultWidth: number;
+    defaultHeight: number;
+    defaultFill: string;
+    exclude: string[];
+    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;
+    };
+}
+export interface FrameworkOptions {
+    composition?: boolean;
+    setup?: boolean;
+    scriptSetup?: boolean;
+    standalone?: boolean;
+    moduleImport?: boolean;
+    signals?: boolean;
+    forwardRef?: boolean;
+    memo?: boolean;
+    customElement?: boolean;
+    shadowDom?: boolean;
+    cssModules?: boolean;
+    styledComponents?: boolean;
+}
+export interface BuildOptions {
+    src: string;
+    out: string;
+    config?: Partial<SVGConfig>;
+}
+export interface GenerateOptions {
+    svgFile: string;
+    outDir: string;
+    config?: Partial<SVGConfig>;
+}
+export interface WatchOptions {
+    src: string;
+    out: string;
+    config?: Partial<SVGConfig>;
+}
+export interface ComponentGenerationOptions {
+    componentName: string;
+    svgContent: string;
+    framework: FrameworkType;
+    typescript: boolean;
+    defaultWidth?: number;
+    defaultHeight?: number;
+    defaultFill?: string;
+    styleRules?: Record<string, string>;
+    template?: TemplateConfig;
+    frameworkOptions?: FrameworkOptions;
+}
+export interface TemplateConfig {
+    type: 'default' | 'custom';
+    path?: string;
+    options?: Record<string, any>;
+}
+export interface PluginConfig {
+    name: string;
+    options?: Record<string, any>;
+}
+export interface SVGProcessorResult {
+    success: boolean;
+    componentName: string;
+    filePath: string;
+    error?: Error;
+}
+export interface FileWatchEvent {
+    type: 'add' | 'change' | 'unlink';
+    filePath: string;
+    timestamp: number;
+}
+export interface ProcessingContext {
+    config: SVGConfig;
+    sourceDir: string;
+    outputDir: string;
+    fileQueue: string[];
+    locks: Set<string>;
+    cache?: Map<string, CachedComponent>;
+}
+export interface CachedComponent {
+    hash: string;
+    componentName: string;
+    filePath: string;
+    framework: FrameworkType;
+    timestamp: number;
+    svgHash: string;
+}
+export interface Logger {
+    info(message: string, ...args: any[]): void;
+    warn(message: string, ...args: any[]): void;
+    error(message: string, ...args: any[]): void;
+    success(message: string, ...args: any[]): void;
+    debug(message: string, ...args: any[]): void;
+}
+export interface Plugin {
+    name: string;
+    version: string;
+    process(content: string, options?: any): Promise<string>;
+    validate?(options?: any): boolean;
+}
+export interface Template {
+    name: string;
+    generate(options: ComponentGenerationOptions): string;
+    validate?(options: ComponentGenerationOptions): boolean;
+}
+export type FileSystemEvent = 'change' | 'rename';
+export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+export type ProcessingStatus = 'pending' | 'processing' | 'completed' | 'failed';
+export interface ProcessingJob {
+    id: string;
+    filePath: string;
+    status: ProcessingStatus;
+    startTime: number;
+    endTime?: number;
+    error?: Error;
+}

package/dist/types/index.js

@@ -0,0 +1,4 @@
+/**
+ * Type definitions for svger-cli
+ */
+export {};