svger-cli 2.0.8 → 3.0.0

package/dist/index.d.ts

@@ -146,6 +146,36 @@ export declare const SVGER: {
  */
 export declare const VERSION = "2.0.0";
 export declare const PACKAGE_NAME = "svger-cli";
+/**
+ * Webpack Plugin - Official webpack integration for SVGER-CLI
+ * Provides: HMR support, asset processing, and webpack loader
+ */
+export { SvgerWebpackPlugin, svgerLoader, default as webpackPlugin, } from './integrations/webpack.js';
+/**
+ * Vite Plugin - Official Vite integration for SVGER-CLI
+ * Provides: HMR support, virtual modules, and dev server integration
+ */
+export { svgerVitePlugin, default as vitePlugin } from './integrations/vite.js';
+/**
+ * Rollup Plugin - Official Rollup integration for SVGER-CLI
+ * Provides: Bundle optimization and tree-shaking support
+ */
+export { svgerRollupPlugin, default as rollupPlugin, } from './integrations/rollup.js';
+/**
+ * Babel Plugin - Official Babel integration for SVGER-CLI
+ * Provides: SVG import transformation and component generation
+ */
+export { svgerBabelPlugin, createBabelPlugin, default as babelPlugin, } from './integrations/babel.js';
+/**
+ * Next.js Plugin - Official Next.js integration for SVGER-CLI
+ * Provides: SSR support, webpack integration, and HMR
+ */
+export { withSvger, SvgerNextJsPlugin, configureSvgImports, default as nextjsPlugin, } from './integrations/nextjs.js';
+/**
+ * Jest Preset - Official Jest integration for SVGER-CLI
+ * Provides: SVG transformers and test configuration
+ */
+export { svgerJestTransformer, jestPreset, createJestTransformer, default as jestTransformer, } from './integrations/jest-preset.js';
 /**
  * Default export - Primary SVG processor instance for quick access
  * Most common entry point for programmatic usage

package/dist/index.js

@@ -148,6 +148,39 @@ export const SVGER = {
 export const VERSION = '2.0.0';
 export const PACKAGE_NAME = 'svger-cli';
 // ============================================================================
+// BUILD TOOL INTEGRATIONS
+// ============================================================================
+/**
+ * Webpack Plugin - Official webpack integration for SVGER-CLI
+ * Provides: HMR support, asset processing, and webpack loader
+ */
+export { SvgerWebpackPlugin, svgerLoader, default as webpackPlugin, } from './integrations/webpack.js';
+/**
+ * Vite Plugin - Official Vite integration for SVGER-CLI
+ * Provides: HMR support, virtual modules, and dev server integration
+ */
+export { svgerVitePlugin, default as vitePlugin } from './integrations/vite.js';
+/**
+ * Rollup Plugin - Official Rollup integration for SVGER-CLI
+ * Provides: Bundle optimization and tree-shaking support
+ */
+export { svgerRollupPlugin, default as rollupPlugin, } from './integrations/rollup.js';
+/**
+ * Babel Plugin - Official Babel integration for SVGER-CLI
+ * Provides: SVG import transformation and component generation
+ */
+export { svgerBabelPlugin, createBabelPlugin, default as babelPlugin, } from './integrations/babel.js';
+/**
+ * Next.js Plugin - Official Next.js integration for SVGER-CLI
+ * Provides: SSR support, webpack integration, and HMR
+ */
+export { withSvger, SvgerNextJsPlugin, configureSvgImports, default as nextjsPlugin, } from './integrations/nextjs.js';
+/**
+ * Jest Preset - Official Jest integration for SVGER-CLI
+ * Provides: SVG transformers and test configuration
+ */
+export { svgerJestTransformer, jestPreset, createJestTransformer, default as jestTransformer, } from './integrations/jest-preset.js';
+// ============================================================================
 // DEFAULT EXPORT
 // ============================================================================
 /**

package/dist/integrations/babel.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Official Babel Plugin for SVGER-CLI
+ *
+ * Transforms SVG imports into framework components during Babel transpilation.
+ * Works with any Babel-based build process including standalone Babel, Create React App,
+ * and other tools that use Babel under the hood.
+ *
+ * @example
+ * ```js
+ * // babel.config.js
+ * const { svgerBabelPlugin } = require('svger-cli/babel');
+ *
+ * module.exports = {
+ *   plugins: [
+ *     [svgerBabelPlugin, {
+ *       source: './src/icons',
+ *       output: './src/components/icons',
+ *       framework: 'react',
+ *       typescript: true
+ *     }]
+ *   ]
+ * };
+ * ```
+ *
+ * @example
+ * ```js
+ * // Direct SVG import transformation
+ * import Icon from './icon.svg';
+ * // Transforms to:
+ * import Icon from './components/icons/Icon';
+ * ```
+ */
+import type { BabelPluginOptions } from '../types/integrations.js';
+/**
+ * Babel Plugin for SVGER-CLI
+ *
+ * This plugin processes SVG files and transforms SVG imports to component imports.
+ * It can run in two modes:
+ * - Pre-build: Process all SVGs before Babel transformation
+ * - On-demand: Transform SVG imports as they're encountered
+ */
+export declare function svgerBabelPlugin(api: any, options?: BabelPluginOptions): any;
+/**
+ * Create a Babel plugin instance with preset options
+ *
+ * @example
+ * ```js
+ * const plugin = createBabelPlugin({
+ *   source: './icons',
+ *   framework: 'react'
+ * });
+ * ```
+ */
+export declare function createBabelPlugin(options?: BabelPluginOptions): (api: any) => any;
+/**
+ * Default export for convenient usage
+ */
+export default svgerBabelPlugin;

package/dist/integrations/babel.js

@@ -0,0 +1,221 @@
+/**
+ * Official Babel Plugin for SVGER-CLI
+ *
+ * Transforms SVG imports into framework components during Babel transpilation.
+ * Works with any Babel-based build process including standalone Babel, Create React App,
+ * and other tools that use Babel under the hood.
+ *
+ * @example
+ * ```js
+ * // babel.config.js
+ * const { svgerBabelPlugin } = require('svger-cli/babel');
+ *
+ * module.exports = {
+ *   plugins: [
+ *     [svgerBabelPlugin, {
+ *       source: './src/icons',
+ *       output: './src/components/icons',
+ *       framework: 'react',
+ *       typescript: true
+ *     }]
+ *   ]
+ * };
+ * ```
+ *
+ * @example
+ * ```js
+ * // Direct SVG import transformation
+ * import Icon from './icon.svg';
+ * // Transforms to:
+ * import Icon from './components/icons/Icon';
+ * ```
+ */
+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-babel-plugin';
+/**
+ * Process all SVG files in the source directory
+ */
+async function processAllSVGs(options, processedFiles) {
+    const sourcePath = path.resolve(options.source);
+    const outputPath = path.resolve(options.output);
+    if (!(await FileSystem.exists(sourcePath))) {
+        logger.warn(`Source directory not found: ${sourcePath}`);
+        return [];
+    }
+    const files = await FileSystem.readDir(sourcePath);
+    const svgFiles = files.filter(file => file.endsWith('.svg'));
+    const results = [];
+    for (const file of svgFiles) {
+        const filePath = path.join(sourcePath, file);
+        if (processedFiles.has(filePath))
+            continue;
+        try {
+            const svgContent = await FileSystem.readFile(filePath, 'utf-8');
+            const componentName = svgProcessor.generateComponentName(file, 'pascal');
+            const config = configService.readConfig();
+            const component = await svgProcessor.generateComponent(componentName, svgContent, {
+                framework: options.framework,
+                typescript: options.typescript,
+                defaultWidth: config.defaultWidth,
+                defaultHeight: config.defaultHeight,
+                defaultFill: config.defaultFill,
+                styleRules: config.styleRules || {},
+            });
+            const ext = options.typescript ? 'tsx' : 'jsx';
+            const outputFile = path.join(outputPath, `${componentName}.${ext}`);
+            await FileSystem.ensureDir(path.dirname(outputFile));
+            await FileSystem.writeFile(outputFile, component);
+            processedFiles.add(filePath);
+            results.push({
+                success: true,
+                outputPath: outputFile,
+                componentName,
+            });
+        }
+        catch (error) {
+            logger.error(`Failed to process ${file}:`, error);
+            results.push({
+                success: false,
+                error: error,
+            });
+        }
+    }
+    // Generate index file if enabled
+    if (options.generateIndex && results.length > 0) {
+        try {
+            await generateIndexFile(outputPath, results, options);
+        }
+        catch (error) {
+            logger.error('Failed to generate index file:', error);
+        }
+    }
+    return results;
+}
+/**
+ * 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}`);
+}
+/**
+ * Transform SVG import path to component path
+ */
+function transformSVGImport(sourcePath, options) {
+    if (!sourcePath.endsWith('.svg'))
+        return null;
+    const absoluteOutput = path.resolve(options.output);
+    // Extract filename without extension
+    const fileName = path.basename(sourcePath, '.svg');
+    const componentName = svgProcessor.generateComponentName(fileName, 'pascal');
+    // Calculate relative path from output to component
+    const ext = options.typescript ? 'tsx' : 'jsx';
+    return path.join(absoluteOutput, `${componentName}.${ext}`);
+}
+/**
+ * Babel Plugin for SVGER-CLI
+ *
+ * This plugin processes SVG files and transforms SVG imports to component imports.
+ * It can run in two modes:
+ * - Pre-build: Process all SVGs before Babel transformation
+ * - On-demand: Transform SVG imports as they're encountered
+ */
+export function svgerBabelPlugin(api, 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/**'],
+        transformImports: options.transformImports !== undefined ? options.transformImports : true,
+        processOnInit: options.processOnInit !== undefined ? options.processOnInit : true,
+        generateIndex: options.generateIndex !== undefined ? options.generateIndex : true,
+    };
+    const processedFiles = new Set();
+    let initialized = false;
+    return {
+        name: PLUGIN_NAME,
+        // Babel visitor pattern
+        visitor: {
+            // Process before any transformations if enabled
+            Program: {
+                enter: async () => {
+                    if (!initialized && pluginOptions.processOnInit) {
+                        initialized = true;
+                        logger.info('SVGER Babel Plugin: Processing SVG files...');
+                        const results = await processAllSVGs(pluginOptions, processedFiles);
+                        const successCount = results.filter(r => r.success).length;
+                        if (successCount > 0) {
+                            logger.info(`SVGER Babel Plugin: Processed ${successCount} SVG files`);
+                        }
+                    }
+                },
+            },
+            // Transform import declarations
+            ImportDeclaration(nodePath) {
+                if (!pluginOptions.transformImports)
+                    return;
+                const source = nodePath.node.source.value;
+                if (typeof source === 'string' && source.endsWith('.svg')) {
+                    const newPath = transformSVGImport(source, pluginOptions);
+                    if (newPath) {
+                        // Replace the import source
+                        nodePath.node.source.value = newPath.replace(/\.(tsx|jsx)$/, '');
+                        logger.debug(`SVGER Babel Plugin: Transformed ${source} -> ${newPath}`);
+                    }
+                }
+            },
+            // Handle dynamic imports
+            CallExpression(nodePath) {
+                if (!pluginOptions.transformImports)
+                    return;
+                const callee = nodePath.node.callee;
+                // Check for import() calls
+                if (callee.type === 'Import') {
+                    const args = nodePath.node.arguments;
+                    if (args.length > 0 && args[0].type === 'StringLiteral') {
+                        const source = args[0].value;
+                        if (source.endsWith('.svg')) {
+                            const newPath = transformSVGImport(source, pluginOptions);
+                            if (newPath) {
+                                args[0].value = newPath.replace(/\.(tsx|jsx)$/, '');
+                                logger.debug(`SVGER Babel Plugin: Transformed dynamic import ${source} -> ${newPath}`);
+                            }
+                        }
+                    }
+                }
+            },
+        },
+    };
+}
+/**
+ * Create a Babel plugin instance with preset options
+ *
+ * @example
+ * ```js
+ * const plugin = createBabelPlugin({
+ *   source: './icons',
+ *   framework: 'react'
+ * });
+ * ```
+ */
+export function createBabelPlugin(options = {}) {
+    return (api) => svgerBabelPlugin(api, options);
+}
+/**
+ * Default export for convenient usage
+ */
+export default svgerBabelPlugin;

package/dist/integrations/jest-preset.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Official Jest Preset for SVGER-CLI
+ *
+ * Provides Jest transformers and configuration for testing SVG components
+ * with full framework support.
+ *
+ * @example
+ * ```js
+ * // jest.config.js
+ * module.exports = {
+ *   preset: 'svger-cli/jest',
+ *   // or manually configure:
+ *   transform: {
+ *     '\\.svg$': 'svger-cli/jest-transformer'
+ *   }
+ * };
+ * ```
+ */
+import type { JestPresetOptions } from '../types/integrations.js';
+/**
+ * Jest transformer for SVG files
+ */
+export declare const svgerJestTransformer: {
+    process(sourceText: string, sourcePath: string, options: any): {
+        code: string;
+    };
+};
+/**
+ * Jest preset configuration
+ */
+export declare const jestPreset: {
+    transform: {
+        '\\.svg$': {}[];
+    };
+    moduleNameMapper: {
+        '\\.svg$': string;
+    };
+    transformIgnorePatterns: string[];
+};
+/**
+ * Create custom Jest transformer with options
+ */
+export declare function createJestTransformer(options?: JestPresetOptions): typeof svgerJestTransformer;
+export default svgerJestTransformer;

package/dist/integrations/jest-preset.js

@@ -0,0 +1,169 @@
+/**
+ * Official Jest Preset for SVGER-CLI
+ *
+ * Provides Jest transformers and configuration for testing SVG components
+ * with full framework support.
+ *
+ * @example
+ * ```js
+ * // jest.config.js
+ * module.exports = {
+ *   preset: 'svger-cli/jest',
+ *   // or manually configure:
+ *   transform: {
+ *     '\\.svg$': 'svger-cli/jest-transformer'
+ *   }
+ * };
+ * ```
+ */
+import { svgProcessor } from '../processors/svg-processor.js';
+import { configService } from '../services/config.js';
+/**
+ * Jest transformer for SVG files
+ */
+export const svgerJestTransformer = {
+    process(sourceText, sourcePath, options) {
+        const config = configService.readConfig();
+        const transformOptions = options?.transformerConfig?.svger || {};
+        // Check if we should mock instead of transform
+        if (transformOptions.mock) {
+            const componentName = svgProcessor.generateComponentName(sourcePath, 'pascal');
+            return {
+                code: `
+const React = require('react');
+const ${componentName} = (props) => React.createElement('svg', props);
+module.exports = ${componentName};
+module.exports.default = ${componentName};
+        `,
+            };
+        }
+        // Transform SVG to component
+        const framework = transformOptions.framework || config.framework || 'react';
+        const typescript = transformOptions.typescript !== undefined
+            ? transformOptions.typescript
+            : config.typescript;
+        const componentName = svgProcessor.generateComponentName(sourcePath, 'pascal');
+        try {
+            // Generate component synchronously for Jest
+            const component = generateComponentSync(componentName, sourceText, {
+                framework,
+                typescript,
+                defaultWidth: config.defaultWidth,
+                defaultHeight: config.defaultHeight,
+                defaultFill: config.defaultFill,
+                styleRules: config.styleRules || {},
+            });
+            // Convert to CommonJS for Jest
+            const commonJsCode = convertToCommonJS(component, componentName);
+            return {
+                code: commonJsCode,
+            };
+        }
+        catch (error) {
+            // Return a simple mock on error
+            return {
+                code: `
+const React = require('react');
+const ${componentName} = (props) => React.createElement('svg', props);
+module.exports = ${componentName};
+module.exports.default = ${componentName};
+        `,
+            };
+        }
+    },
+};
+/**
+ * Generate component synchronously (for Jest compatibility)
+ */
+function generateComponentSync(componentName, svgContent, options) {
+    // Clean SVG content
+    const cleanedContent = svgProcessor.cleanSVGContent(svgContent);
+    // For Jest, we'll generate a simple React component
+    const viewBox = svgProcessor.extractViewBox(svgContent);
+    const template = `
+import React from 'react';
+
+interface ${componentName}Props {
+  width?: number | string;
+  height?: number | string;
+  fill?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const ${componentName}: React.FC<${componentName}Props> = ({
+  width = ${options.defaultWidth || 24},
+  height = ${options.defaultHeight || 24},
+  fill = '${options.defaultFill || 'currentColor'}',
+  className,
+  style,
+  ...props
+}) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="${viewBox || '0 0 24 24'}"
+    fill={fill}
+    className={className}
+    style={style}
+    {...props}
+  >
+    ${cleanedContent}
+  </svg>
+);
+
+export default ${componentName};
+  `;
+    return template.trim();
+}
+/**
+ * Convert ES modules to CommonJS for Jest
+ */
+function convertToCommonJS(code, componentName) {
+    // Simple conversion for Jest compatibility
+    let commonJsCode = code
+        .replace(/import\s+React\s+from\s+['"]react['"]/g, "const React = require('react')")
+        .replace(/export\s+default\s+/g, 'module.exports = ')
+        .replace(/export\s+{([^}]+)}/g, (match, exports) => {
+        const exportList = exports.split(',').map((e) => e.trim());
+        return exportList
+            .map((exp) => `module.exports.${exp} = ${exp}`)
+            .join(';');
+    });
+    // Ensure default export
+    if (!commonJsCode.includes('module.exports')) {
+        commonJsCode += `\nmodule.exports = ${componentName};`;
+    }
+    // Also add named export
+    commonJsCode += `\nmodule.exports.default = module.exports;`;
+    return commonJsCode;
+}
+/**
+ * Jest preset configuration
+ */
+export const jestPreset = {
+    transform: {
+        '\\.svg$': ['svger-cli/jest-transformer', {}],
+    },
+    moduleNameMapper: {
+        '\\.svg$': 'svger-cli/jest-transformer',
+    },
+    transformIgnorePatterns: ['node_modules/(?!(svger-cli)/)'],
+};
+/**
+ * Create custom Jest transformer with options
+ */
+export function createJestTransformer(options = {}) {
+    return {
+        process(sourceText, sourcePath, jestOptions) {
+            return svgerJestTransformer.process(sourceText, sourcePath, {
+                ...jestOptions,
+                transformerConfig: {
+                    svger: options,
+                },
+            });
+        },
+    };
+}
+// Default exports
+export default svgerJestTransformer;

package/dist/integrations/nextjs.d.ts

@@ -0,0 +1,56 @@
+/**
+ * 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 type { NextJsPluginOptions } from '../types/integrations.js';
+/**
+ * Next.js plugin configuration wrapper
+ */
+export declare function withSvger(nextConfig?: any): any;
+/**
+ * Standalone Next.js webpack plugin
+ * Can be used directly in next.config.js webpack function
+ */
+export declare class SvgerNextJsPlugin extends SvgerWebpackPlugin {
+    constructor(options?: NextJsPluginOptions);
+}
+/**
+ * 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 declare function configureSvgImports(webpackConfig: any, options?: Partial<NextJsPluginOptions>): void;
+export default withSvger;