svger-cli 2.0.8 → 3.0.0

package/dist/integrations/nextjs.js

@@ -0,0 +1,140 @@
+/**
+ * Official Next.js Plugin for SVGER-CLI
+ *
+ * Automatically converts SVG files to framework components in Next.js applications
+ * with full SSR support, HMR, and webpack integration.
+ *
+ * @example
+ * ```js
+ * // next.config.js
+ * const { withSvger } = require('svger-cli/nextjs');
+ *
+ * module.exports = withSvger({
+ *   svger: {
+ *     source: './src/icons',
+ *     output: './src/components/icons',
+ *     framework: 'react',
+ *     typescript: true
+ *   },
+ *   // ... other Next.js config
+ * });
+ * ```
+ */
+import { SvgerWebpackPlugin } from './webpack.js';
+import { logger } from '../core/logger.js';
+/**
+ * Next.js plugin configuration wrapper
+ */
+export function withSvger(nextConfig = {}) {
+    return {
+        ...nextConfig,
+        webpack(config, options) {
+            const { isServer } = options;
+            // Get svger options from Next.js config
+            const svgerOptions = nextConfig.svger || {};
+            // Add SVGER webpack plugin
+            if (!config.plugins) {
+                config.plugins = [];
+            }
+            // Only run on client build or if explicitly enabled for SSR
+            if (!isServer || svgerOptions.ssr !== false) {
+                const pluginInstance = new SvgerWebpackPlugin({
+                    source: svgerOptions.source,
+                    output: svgerOptions.output,
+                    framework: svgerOptions.framework || 'react',
+                    typescript: svgerOptions.typescript,
+                    config: svgerOptions.config,
+                    include: svgerOptions.include,
+                    exclude: svgerOptions.exclude,
+                    hmr: svgerOptions.hmr,
+                    generateIndex: svgerOptions.generateIndex,
+                });
+                config.plugins.push(pluginInstance);
+                if (!isServer) {
+                    logger.info('SVGER Next.js Plugin: Configured for client build');
+                }
+                else {
+                    logger.info('SVGER Next.js Plugin: Configured for server build');
+                }
+            }
+            // Add SVG file handling rule
+            config.module.rules.push({
+                test: /\.svg$/,
+                issuer: /\.[jt]sx?$/,
+                use: [
+                    {
+                        loader: 'svger-cli/webpack-loader',
+                        options: {
+                            framework: svgerOptions.framework || 'react',
+                            typescript: svgerOptions.typescript,
+                        },
+                    },
+                ],
+            });
+            // Call user's custom webpack config if provided
+            if (svgerOptions.webpack && typeof svgerOptions.webpack === 'function') {
+                return svgerOptions.webpack(config, options);
+            }
+            // Call original webpack config if provided
+            if (typeof nextConfig.webpack === 'function') {
+                return nextConfig.webpack(config, options);
+            }
+            return config;
+        },
+    };
+}
+/**
+ * Standalone Next.js webpack plugin
+ * Can be used directly in next.config.js webpack function
+ */
+export class SvgerNextJsPlugin extends SvgerWebpackPlugin {
+    constructor(options = {}) {
+        super({
+            source: options.source,
+            output: options.output,
+            framework: options.framework || 'react',
+            typescript: options.typescript,
+            config: options.config,
+            include: options.include,
+            exclude: options.exclude,
+            hmr: options.hmr,
+            generateIndex: options.generateIndex,
+        });
+    }
+}
+/**
+ * Helper function to configure SVG imports in Next.js
+ * For use in next.config.js
+ *
+ * @example
+ * ```js
+ * const { configureSvgImports } = require('svger-cli/nextjs');
+ *
+ * module.exports = {
+ *   webpack(config, options) {
+ *     configureSvgImports(config, {
+ *       framework: 'react',
+ *       typescript: true
+ *     });
+ *     return config;
+ *   }
+ * };
+ * ```
+ */
+export function configureSvgImports(webpackConfig, options = {}) {
+    webpackConfig.module.rules.push({
+        test: /\.svg$/,
+        issuer: /\.[jt]sx?$/,
+        use: [
+            {
+                loader: 'svger-cli/webpack-loader',
+                options: {
+                    framework: options.framework || 'react',
+                    typescript: options.typescript !== undefined ? options.typescript : true,
+                },
+            },
+        ],
+    });
+}
+// Default export
+export default withSvger;

package/dist/integrations/rollup.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Official Rollup Plugin for SVGER-CLI
+ *
+ * Automatically converts SVG files to framework components during Rollup builds
+ * with full bundle optimization and tree-shaking support.
+ *
+ * @example
+ * ```js
+ * // rollup.config.js
+ * import { svgerRollupPlugin } from 'svger-cli/rollup';
+ *
+ * export default {
+ *   plugins: [
+ *     svgerRollupPlugin({
+ *       source: './src/icons',
+ *       output: './src/components/icons',
+ *       framework: 'react',
+ *       typescript: true
+ *     })
+ *   ]
+ * };
+ * ```
+ */
+import type { RollupPluginOptions } from '../types/integrations.js';
+/**
+ * Rollup Plugin for SVGER-CLI
+ */
+export declare function svgerRollupPlugin(options?: RollupPluginOptions): any;
+export default svgerRollupPlugin;

package/dist/integrations/rollup.js

@@ -0,0 +1,197 @@
+/**
+ * Official Rollup Plugin for SVGER-CLI
+ *
+ * Automatically converts SVG files to framework components during Rollup builds
+ * with full bundle optimization and tree-shaking support.
+ *
+ * @example
+ * ```js
+ * // rollup.config.js
+ * import { svgerRollupPlugin } from 'svger-cli/rollup';
+ *
+ * export default {
+ *   plugins: [
+ *     svgerRollupPlugin({
+ *       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 = 'svger-rollup-plugin';
+/**
+ * Rollup Plugin for SVGER-CLI
+ */
+export function svgerRollupPlugin(options = {}) {
+    const config = configService.readConfig();
+    const pluginOptions = {
+        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/**'],
+        exportType: options.exportType || 'default',
+        svgo: options.svgo !== undefined ? options.svgo : false,
+        generateIndex: options.generateIndex !== undefined ? options.generateIndex : true,
+        sourcemap: options.sourcemap !== undefined ? options.sourcemap : false,
+    };
+    const processedFiles = new Set();
+    return {
+        name: PLUGIN_NAME,
+        async buildStart() {
+            logger.info('SVGER Rollup Plugin: Processing SVG files...');
+            await processAllSVGs(pluginOptions, processedFiles);
+        },
+        resolveId(id) {
+            // Handle SVG imports
+            if (id.endsWith('.svg')) {
+                // Let Rollup handle it naturally, we'll transform it
+                return null;
+            }
+        },
+        async load(id) {
+            // Load and transform SVG files
+            if (id.endsWith('.svg')) {
+                if (await FileSystem.exists(id)) {
+                    const svgContent = await FileSystem.readFile(id, 'utf-8');
+                    const componentName = svgProcessor.generateComponentName(id, 'pascal');
+                    const component = await svgProcessor.generateComponent(componentName, svgContent, {
+                        framework: pluginOptions.framework,
+                        typescript: pluginOptions.typescript,
+                        defaultWidth: config.defaultWidth,
+                        defaultHeight: config.defaultHeight,
+                        defaultFill: config.defaultFill,
+                        styleRules: config.styleRules || {},
+                    });
+                    if (pluginOptions.exportType === 'named') {
+                        return {
+                            code: `${component}\nexport { ${componentName} };`,
+                            map: pluginOptions.sourcemap ? { mappings: '' } : null,
+                        };
+                    }
+                    return {
+                        code: component,
+                        map: pluginOptions.sourcemap ? { mappings: '' } : null,
+                    };
+                }
+            }
+        },
+        async transform(code, id) {
+            // Transform SVG content if loaded by another plugin
+            if (id.endsWith('.svg')) {
+                const componentName = svgProcessor.generateComponentName(id, 'pascal');
+                const component = await svgProcessor.generateComponent(componentName, code, {
+                    framework: pluginOptions.framework,
+                    typescript: pluginOptions.typescript,
+                    defaultWidth: config.defaultWidth,
+                    defaultHeight: config.defaultHeight,
+                    defaultFill: config.defaultFill,
+                    styleRules: config.styleRules || {},
+                });
+                if (pluginOptions.exportType === 'named') {
+                    return {
+                        code: `${component}\nexport { ${componentName} };`,
+                        map: pluginOptions.sourcemap ? { mappings: '' } : null,
+                    };
+                }
+                return {
+                    code: component,
+                    map: pluginOptions.sourcemap ? { mappings: '' } : null,
+                };
+            }
+        },
+    };
+}
+/**
+ * Process all SVG files in the source directory
+ */
+async function processAllSVGs(options, processedFiles) {
+    const sourceDir = path.resolve(options.source);
+    const outputDir = path.resolve(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 processSVGFile(svgPath, outputDir, options);
+        results.push(result);
+        if (result.success && result.outputPath) {
+            processedFiles.add(result.outputPath);
+        }
+    }
+    // Generate index file
+    if (options.generateIndex) {
+        await generateIndexFile(outputDir, results, options);
+    }
+    const successful = results.filter(r => r.success).length;
+    logger.info(`SVGER: Processed ${successful}/${svgFiles.length} SVG files`);
+}
+/**
+ * Process a single SVG file
+ */
+async function processSVGFile(svgPath, outputDir, options) {
+    try {
+        const config = configService.readConfig();
+        const mergedConfig = {
+            ...config,
+            ...options.config,
+            framework: options.framework,
+            typescript: 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 function generateIndexFile(outputDir, results, options) {
+    const extension = 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}`);
+}
+// Default export
+export default svgerRollupPlugin;

package/dist/integrations/vite.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Official Vite Plugin for SVGER-CLI
+ *
+ * Automatically converts SVG files to framework components during Vite builds
+ * with full HMR support and virtual module integration.
+ *
+ * @example
+ * ```js
+ * // vite.config.js
+ * import { svgerVitePlugin } from 'svger-cli/vite';
+ *
+ * export default {
+ *   plugins: [
+ *     svgerVitePlugin({
+ *       source: './src/icons',
+ *       output: './src/components/icons',
+ *       framework: 'react',
+ *       typescript: true
+ *     })
+ *   ]
+ * };
+ * ```
+ */
+import type { VitePluginOptions } from '../types/integrations.js';
+/**
+ * Vite Plugin for SVGER-CLI
+ */
+export declare function svgerVitePlugin(options?: VitePluginOptions): any;
+export default svgerVitePlugin;

package/dist/integrations/vite.js

@@ -0,0 +1,221 @@
+/**
+ * Official Vite Plugin for SVGER-CLI
+ *
+ * Automatically converts SVG files to framework components during Vite builds
+ * with full HMR support and virtual module integration.
+ *
+ * @example
+ * ```js
+ * // vite.config.js
+ * import { svgerVitePlugin } from 'svger-cli/vite';
+ *
+ * export default {
+ *   plugins: [
+ *     svgerVitePlugin({
+ *       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 = 'svger-vite-plugin';
+const VIRTUAL_MODULE_PREFIX = 'virtual:svger/';
+/**
+ * Vite Plugin for SVGER-CLI
+ */
+export function svgerVitePlugin(options = {}) {
+    const config = configService.readConfig();
+    const pluginOptions = {
+        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,
+        virtual: options.virtual !== undefined ? options.virtual : false,
+        exportType: options.exportType || 'default',
+        svgo: options.svgo !== undefined ? options.svgo : false,
+        generateIndex: options.generateIndex !== undefined ? options.generateIndex : true,
+    };
+    let viteConfig;
+    const processedFiles = new Set();
+    return {
+        name: PLUGIN_NAME,
+        configResolved(resolvedConfig) {
+            viteConfig = resolvedConfig;
+        },
+        async buildStart() {
+            logger.info('SVGER Vite Plugin: Processing SVG files...');
+            await processAllSVGs(pluginOptions, processedFiles);
+        },
+        async handleHotUpdate(ctx) {
+            if (!pluginOptions.hmr)
+                return;
+            const { file, server } = ctx;
+            if (file.endsWith('.svg') && file.includes(pluginOptions.source)) {
+                logger.info(`SVGER: Hot reloading ${path.basename(file)}`);
+                const outputDir = path.resolve(pluginOptions.output);
+                const result = await processSVGFile(file, outputDir, pluginOptions);
+                if (result.success) {
+                    // Trigger HMR for the generated component
+                    const modules = server.moduleGraph.getModulesByFile(file);
+                    if (modules) {
+                        return Array.from(modules);
+                    }
+                }
+            }
+        },
+        resolveId(id) {
+            // Handle virtual modules
+            if (pluginOptions.virtual && id.startsWith(VIRTUAL_MODULE_PREFIX)) {
+                return '\0' + id;
+            }
+            // Handle direct SVG imports
+            if (id.endsWith('.svg')) {
+                return null; // Let Vite handle it with our transform hook
+            }
+        },
+        async load(id) {
+            // Handle virtual modules
+            if (pluginOptions.virtual &&
+                id.startsWith('\0' + VIRTUAL_MODULE_PREFIX)) {
+                const svgName = id.slice(('\0' + VIRTUAL_MODULE_PREFIX).length);
+                const sourceDir = path.resolve(pluginOptions.source);
+                const svgPath = path.join(sourceDir, svgName + '.svg');
+                if (await FileSystem.exists(svgPath)) {
+                    const svgContent = await FileSystem.readFile(svgPath, 'utf-8');
+                    const componentName = svgProcessor.generateComponentName(svgPath, 'pascal');
+                    const component = await svgProcessor.generateComponent(componentName, svgContent, {
+                        framework: pluginOptions.framework,
+                        typescript: pluginOptions.typescript,
+                        defaultWidth: config.defaultWidth,
+                        defaultHeight: config.defaultHeight,
+                        defaultFill: config.defaultFill,
+                        styleRules: config.styleRules || {},
+                    });
+                    return {
+                        code: component,
+                        map: null,
+                    };
+                }
+            }
+        },
+        async transform(code, id) {
+            // Transform direct SVG imports
+            if (id.endsWith('.svg')) {
+                const componentName = svgProcessor.generateComponentName(id, 'pascal');
+                const component = await svgProcessor.generateComponent(componentName, code, {
+                    framework: pluginOptions.framework,
+                    typescript: pluginOptions.typescript,
+                    defaultWidth: config.defaultWidth,
+                    defaultHeight: config.defaultHeight,
+                    defaultFill: config.defaultFill,
+                    styleRules: config.styleRules || {},
+                });
+                if (pluginOptions.exportType === 'named') {
+                    return {
+                        code: `${component}\nexport { ${componentName} };`,
+                        map: null,
+                    };
+                }
+                return {
+                    code: component,
+                    map: null,
+                };
+            }
+        },
+    };
+}
+/**
+ * Process all SVG files in the source directory
+ */
+async function processAllSVGs(options, processedFiles) {
+    const sourceDir = path.resolve(options.source);
+    const outputDir = path.resolve(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 processSVGFile(svgPath, outputDir, options);
+        results.push(result);
+        if (result.success && result.outputPath) {
+            processedFiles.add(result.outputPath);
+        }
+    }
+    // Generate index file
+    if (options.generateIndex) {
+        await generateIndexFile(outputDir, results, options);
+    }
+    const successful = results.filter(r => r.success).length;
+    logger.info(`SVGER: Processed ${successful}/${svgFiles.length} SVG files`);
+}
+/**
+ * Process a single SVG file
+ */
+async function processSVGFile(svgPath, outputDir, options) {
+    try {
+        const config = configService.readConfig();
+        const mergedConfig = {
+            ...config,
+            ...options.config,
+            framework: options.framework,
+            typescript: 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 function generateIndexFile(outputDir, results, options) {
+    const extension = 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}`);
+}
+// Default export
+export default svgerVitePlugin;

package/dist/integrations/webpack.d.ts

@@ -0,0 +1,84 @@
+/**
+ * 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 type { WebpackPluginOptions } from '../types/integrations.js';
+/**
+ * Webpack Plugin for SVGER-CLI
+ */
+export declare class SvgerWebpackPlugin {
+    private options;
+    private processedFiles;
+    private watchDebounceTimer?;
+    constructor(options?: WebpackPluginOptions);
+    apply(compiler: any): void;
+    /**
+     * Process all SVG files in the source directory
+     */
+    private processAllSVGs;
+    /**
+     * Process changed files in watch mode
+     */
+    private processChangedFiles;
+    /**
+     * Process a single SVG file
+     */
+    private processSVGFile;
+    /**
+     * Generate index file with all exports
+     */
+    private generateIndexFile;
+    /**
+     * Get changed files from webpack
+     */
+    private getChangedFiles;
+}
+/**
+ * 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 declare function svgerLoader(this: any, content: string): Promise<string>;
+export default SvgerWebpackPlugin;