svger-cli 2.0.8 → 3.1.0

package/dist/integrations/webpack.js

@@ -0,0 +1,273 @@
+/**
+ * Official Webpack Plugin for SVGER-CLI
+ *
+ * Automatically converts SVG files to framework components during webpack builds
+ * with full HMR support and optimization.
+ *
+ * @example
+ * ```js
+ * // webpack.config.js
+ * const { SvgerWebpackPlugin } = require('svger-cli/webpack');
+ *
+ * module.exports = {
+ *   plugins: [
+ *     new SvgerWebpackPlugin({
+ *       source: './src/icons',
+ *       output: './src/components/icons',
+ *       framework: 'react',
+ *       typescript: true
+ *     })
+ *   ]
+ * };
+ * ```
+ */
+import path from 'path';
+import { FileSystem } from '../utils/native.js';
+import { svgProcessor } from '../processors/svg-processor.js';
+import { configService } from '../services/config.js';
+import { logger } from '../core/logger.js';
+const PLUGIN_NAME = 'SvgerWebpackPlugin';
+/**
+ * Webpack Plugin for SVGER-CLI
+ */
+export class SvgerWebpackPlugin {
+    options;
+    processedFiles = new Set();
+    watchDebounceTimer;
+    constructor(options = {}) {
+        const config = configService.readConfig();
+        this.options = {
+            source: options.source || config.source || './src/icons',
+            output: options.output || config.output || './src/components/icons',
+            framework: options.framework || config.framework || 'react',
+            typescript: options.typescript !== undefined
+                ? options.typescript
+                : config.typescript,
+            config: options.config || {},
+            include: options.include || ['**/*.svg'],
+            exclude: options.exclude || ['node_modules/**'],
+            hmr: options.hmr !== undefined ? options.hmr : true,
+            emitFile: options.emitFile !== undefined ? options.emitFile : true,
+            generateIndex: options.generateIndex !== undefined ? options.generateIndex : true,
+            watch: {
+                debounce: options.watch?.debounce || 300,
+                ignored: options.watch?.ignored || ['node_modules/**'],
+            },
+        };
+    }
+    apply(compiler) {
+        // Initial build - process all SVG files
+        compiler.hooks.beforeCompile.tapPromise(PLUGIN_NAME, async () => {
+            logger.info('SVGER Webpack Plugin: Processing SVG files...');
+            await this.processAllSVGs();
+        });
+        // Watch mode - process changed files
+        if (compiler.options.watch) {
+            compiler.hooks.watchRun.tapPromise(PLUGIN_NAME, async (comp) => {
+                const changedFiles = this.getChangedFiles(comp);
+                if (changedFiles.size > 0) {
+                    await this.processChangedFiles(changedFiles);
+                }
+            });
+        }
+        // Add HMR support
+        if (this.options.hmr && compiler.options.devServer) {
+            compiler.hooks.done.tap(PLUGIN_NAME, (stats) => {
+                if (stats.hasErrors())
+                    return;
+                const changedFiles = Array.from(this.processedFiles);
+                if (changedFiles.length > 0) {
+                    logger.info(`SVGER: ${changedFiles.length} component(s) updated with HMR`);
+                }
+                this.processedFiles.clear();
+            });
+        }
+    }
+    /**
+     * Process all SVG files in the source directory
+     */
+    async processAllSVGs() {
+        const sourceDir = path.resolve(this.options.source);
+        const outputDir = path.resolve(this.options.output);
+        if (!(await FileSystem.exists(sourceDir))) {
+            logger.warn(`Source directory not found: ${sourceDir}`);
+            return;
+        }
+        await FileSystem.ensureDir(outputDir);
+        const files = await FileSystem.readDir(sourceDir);
+        const svgFiles = files.filter((file) => file.endsWith('.svg'));
+        if (svgFiles.length === 0) {
+            logger.warn('No SVG files found in source directory');
+            return;
+        }
+        const results = [];
+        for (const file of svgFiles) {
+            const svgPath = path.join(sourceDir, file);
+            const result = await this.processSVGFile(svgPath, outputDir);
+            results.push(result);
+            if (result.success && result.outputPath) {
+                this.processedFiles.add(result.outputPath);
+            }
+        }
+        // Generate index file
+        if (this.options.generateIndex) {
+            await this.generateIndexFile(outputDir, results.filter(r => r.success));
+        }
+        const successful = results.filter(r => r.success).length;
+        logger.info(`SVGER: Processed ${successful}/${svgFiles.length} SVG files`);
+    }
+    /**
+     * Process changed files in watch mode
+     */
+    async processChangedFiles(files) {
+        const outputDir = path.resolve(this.options.output);
+        // Debounce processing
+        if (this.watchDebounceTimer) {
+            clearTimeout(this.watchDebounceTimer);
+        }
+        await new Promise(resolve => {
+            this.watchDebounceTimer = setTimeout(async () => {
+                for (const file of files) {
+                    if (file.endsWith('.svg')) {
+                        const result = await this.processSVGFile(file, outputDir);
+                        if (result.success && result.outputPath) {
+                            this.processedFiles.add(result.outputPath);
+                            logger.info(`SVGER: Updated ${result.componentName}`);
+                        }
+                    }
+                }
+                resolve();
+            }, this.options.watch.debounce);
+        });
+    }
+    /**
+     * Process a single SVG file
+     */
+    async processSVGFile(svgPath, outputDir) {
+        try {
+            const mergedConfig = {
+                ...configService.readConfig(),
+                ...this.options.config,
+                framework: this.options.framework,
+                typescript: this.options.typescript,
+            };
+            const result = await svgProcessor.processSVGFile(svgPath, outputDir, {
+                framework: mergedConfig.framework,
+                typescript: mergedConfig.typescript,
+                defaultWidth: mergedConfig.defaultWidth,
+                defaultHeight: mergedConfig.defaultHeight,
+                defaultFill: mergedConfig.defaultFill,
+                styleRules: mergedConfig.styleRules || {},
+            });
+            return {
+                success: result.success,
+                outputPath: result.filePath || undefined,
+                componentName: result.componentName,
+                error: result.error,
+            };
+        }
+        catch (error) {
+            logger.error(`Failed to process ${svgPath}:`, error);
+            return {
+                success: false,
+                error: error,
+            };
+        }
+    }
+    /**
+     * Generate index file with all exports
+     */
+    async generateIndexFile(outputDir, results) {
+        const extension = this.options.typescript ? 'ts' : 'js';
+        const exports = results
+            .filter(r => r.componentName)
+            .map(r => `export { default as ${r.componentName} } from './${r.componentName}';`)
+            .join('\n');
+        const indexPath = path.join(outputDir, `index.${extension}`);
+        await FileSystem.writeFile(indexPath, exports, 'utf-8');
+        logger.debug(`Generated index file: ${indexPath}`);
+    }
+    /**
+     * Get changed files from webpack
+     */
+    getChangedFiles(compiler) {
+        const changedFiles = new Set();
+        const watchFileSystem = compiler.watchFileSystem;
+        if (watchFileSystem && watchFileSystem.watcher) {
+            const { mtimes } = watchFileSystem.watcher;
+            if (mtimes) {
+                for (const file of Object.keys(mtimes)) {
+                    if (file.endsWith('.svg') && file.includes(this.options.source)) {
+                        changedFiles.add(file);
+                    }
+                }
+            }
+        }
+        return changedFiles;
+    }
+}
+/**
+ * Webpack Loader for SVGER-CLI
+ *
+ * Transforms SVG imports into framework components inline
+ *
+ * @example
+ * ```js
+ * // webpack.config.js
+ * module.exports = {
+ *   module: {
+ *     rules: [
+ *       {
+ *         test: /\.svg$/,
+ *         use: [
+ *           {
+ *             loader: 'svger-cli/webpack-loader',
+ *             options: {
+ *               framework: 'react',
+ *               typescript: true
+ *             }
+ *           }
+ *         ]
+ *       }
+ *     ]
+ *   }
+ * };
+ * ```
+ */
+export async function svgerLoader(content) {
+    const callback = this.async();
+    const options = this.getOptions() || {};
+    const config = configService.readConfig();
+    const framework = options.framework || config.framework || 'react';
+    const typescript = options.typescript !== undefined ? options.typescript : config.typescript;
+    const componentName = svgProcessor.generateComponentName(this.resourcePath, 'pascal');
+    try {
+        const component = await svgProcessor.generateComponent(componentName, content, {
+            framework,
+            typescript,
+            defaultWidth: config.defaultWidth,
+            defaultHeight: config.defaultHeight,
+            defaultFill: config.defaultFill,
+            styleRules: config.styleRules || {},
+        });
+        // Enable HMR for the loader
+        if (this.hot) {
+            const hmrCode = `
+if (module.hot) {
+  module.hot.accept();
+}
+      `;
+            callback(null, component + '\n' + hmrCode);
+        }
+        else {
+            callback(null, component);
+        }
+    }
+    catch (error) {
+        callback(error);
+    }
+    // Return empty string to satisfy TypeScript (callback handles the actual return)
+    return '';
+}
+// Default export for plugin
+export default SvgerWebpackPlugin;

package/dist/types/index.d.ts

@@ -196,3 +196,4 @@ export interface ProcessingJob {
     endTime?: number;
     error?: Error;
 }
+export * from './integrations.js';

package/dist/types/index.js

@@ -1,4 +1,5 @@
 /**
  * Type definitions for svger-cli
  */
-export {};
+// Re-export integration types
+export * from './integrations.js';

package/dist/types/integrations.d.ts

@@ -0,0 +1,255 @@
+/**
+ * Type definitions for build tool integrations
+ */
+import type { FrameworkType, SVGConfig } from './index.js';
+/**
+ * Base options for all integrations
+ */
+export interface BaseIntegrationOptions {
+    /**
+     * Source directory containing SVG files
+     */
+    source?: string;
+    /**
+     * Output directory for generated components
+     */
+    output?: string;
+    /**
+     * Framework to generate components for
+     */
+    framework?: FrameworkType;
+    /**
+     * Whether to use TypeScript
+     */
+    typescript?: boolean;
+    /**
+     * Custom configuration
+     */
+    config?: Partial<SVGConfig>;
+    /**
+     * Include pattern (glob)
+     */
+    include?: string | string[];
+    /**
+     * Exclude pattern (glob)
+     */
+    exclude?: string | string[];
+}
+export interface WebpackPluginOptions extends BaseIntegrationOptions {
+    /**
+     * Enable Hot Module Replacement
+     * @default true
+     */
+    hmr?: boolean;
+    /**
+     * Emit files to output directory
+     * @default true
+     */
+    emitFile?: boolean;
+    /**
+     * Generate index file with exports
+     * @default true
+     */
+    generateIndex?: boolean;
+    /**
+     * Watch mode options
+     */
+    watch?: {
+        /**
+         * Debounce delay in milliseconds
+         * @default 300
+         */
+        debounce?: number;
+        /**
+         * Paths to ignore
+         */
+        ignored?: string | string[];
+    };
+}
+/**
+ * Webpack loader options
+ */
+export interface WebpackLoaderOptions extends BaseIntegrationOptions {
+    /**
+     * Export format
+     * @default 'default'
+     */
+    exportType?: 'default' | 'named';
+    /**
+     * SVGO optimization options
+     */
+    svgo?: boolean | Record<string, any>;
+}
+export interface VitePluginOptions extends BaseIntegrationOptions {
+    /**
+     * Enable Hot Module Replacement
+     * @default true
+     */
+    hmr?: boolean;
+    /**
+     * Use virtual modules for components
+     * @default false
+     */
+    virtual?: boolean;
+    /**
+     * Default export or named export
+     * @default 'default'
+     */
+    exportType?: 'default' | 'named';
+    /**
+     * SVGO optimization options
+     */
+    svgo?: boolean | Record<string, any>;
+    /**
+     * Generate index file with exports
+     * @default true
+     */
+    generateIndex?: boolean;
+}
+export interface RollupPluginOptions extends BaseIntegrationOptions {
+    /**
+     * Default export or named export
+     * @default 'default'
+     */
+    exportType?: 'default' | 'named';
+    /**
+     * SVGO optimization options
+     */
+    svgo?: boolean | Record<string, any>;
+    /**
+     * Generate index file with exports
+     * @default true
+     */
+    generateIndex?: boolean;
+    /**
+     * Generate source maps
+     * @default false
+     */
+    sourcemap?: boolean;
+}
+export interface NextJsPluginOptions extends BaseIntegrationOptions {
+    /**
+     * Enable Hot Module Replacement
+     * @default true
+     */
+    hmr?: boolean;
+    /**
+     * Server-side rendering support
+     * @default true
+     */
+    ssr?: boolean;
+    /**
+     * Generate index file with exports
+     * @default true
+     */
+    generateIndex?: boolean;
+    /**
+     * Webpack configuration modifier
+     */
+    webpack?: (config: any, options: any) => any;
+}
+export interface BabelPluginOptions extends BaseIntegrationOptions {
+    /**
+     * Transform SVG imports to component imports
+     * @default true
+     */
+    transformImports?: boolean;
+    /**
+     * Process all SVGs when plugin is initialized
+     * @default true
+     */
+    processOnInit?: boolean;
+    /**
+     * Generate index file with all components
+     * @default true
+     */
+    generateIndex?: boolean;
+}
+export interface JestPresetOptions {
+    /**
+     * Framework to use for component generation in tests
+     * @default 'react'
+     */
+    framework?: FrameworkType;
+    /**
+     * Use TypeScript
+     * @default true
+     */
+    typescript?: boolean;
+    /**
+     * Transform SVG files to components
+     * @default true
+     */
+    transform?: boolean;
+    /**
+     * Mock SVG files as simple React components
+     * @default false
+     */
+    mock?: boolean;
+}
+export interface ProcessingResult {
+    /**
+     * Whether processing was successful
+     */
+    success: boolean;
+    /**
+     * Path to the generated file
+     */
+    outputPath?: string;
+    /**
+     * Component name
+     */
+    componentName?: string;
+    /**
+     * Generated code
+     */
+    code?: string;
+    /**
+     * Source map
+     */
+    map?: string | null;
+    /**
+     * Error if processing failed
+     */
+    error?: Error;
+}
+export interface BatchProcessingResult {
+    /**
+     * Total files processed
+     */
+    total: number;
+    /**
+     * Successful conversions
+     */
+    successful: number;
+    /**
+     * Failed conversions
+     */
+    failed: number;
+    /**
+     * Individual results
+     */
+    results: ProcessingResult[];
+}
+export interface IntegrationMetadata {
+    /**
+     * Name of the build tool
+     */
+    name: string;
+    /**
+     * Version of the integration
+     */
+    version: string;
+    /**
+     * Supported file extensions
+     */
+    extensions: string[];
+    /**
+     * Whether HMR is supported
+     */
+    supportsHMR: boolean;
+    /**
+     * Whether source maps are supported
+     */
+    supportsSourceMaps: boolean;
+}

package/dist/types/integrations.js

@@ -0,0 +1,4 @@
+/**
+ * Type definitions for build tool integrations
+ */
+export {};