svger-cli 3.0.0 → 3.1.1

package/dist/__tests__/fixtures.js

@@ -0,0 +1,228 @@
+/**
+ * Test Fixtures
+ * Reusable test data for unit tests
+ */
+export const sampleSVGs = {
+    simple: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="10"/>
+  </svg>`,
+    withFill: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+    <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+  </svg>`,
+    complex: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
+  </svg>`,
+    nested: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g>
+      <circle cx="12" cy="12" r="10"/>
+      <path d="M12 2v20"/>
+      <path d="M2 12h20"/>
+    </g>
+  </svg>`,
+    multiPath: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+    <path d="M2 17l10 5 10-5M2 12l10 5 10-5"/>
+  </svg>`,
+    withGradient: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <defs>
+      <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
+        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
+        <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
+      </linearGradient>
+    </defs>
+    <circle cx="12" cy="12" r="10" fill="url(#grad1)"/>
+  </svg>`,
+    withText: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <text x="12" y="12" text-anchor="middle">SVG</text>
+  </svg>`,
+    accessibility: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-labelledby="iconTitle">
+    <title id="iconTitle">Home Icon</title>
+    <desc>An icon representing a house</desc>
+    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
+  </svg>`,
+    animated: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <circle cx="12" cy="12" r="10">
+      <animate attributeName="r" from="10" to="5" dur="1s" repeatCount="indefinite"/>
+    </circle>
+  </svg>`,
+    invalid: `<svg><unclosed`,
+    empty: ``,
+    malformed: `<invalid>not an svg</invalid>`
+};
+export const sampleConfigs = {
+    react: {
+        framework: 'react',
+        typescript: true,
+        naming: 'pascal',
+        generateIndex: true
+    },
+    vue: {
+        framework: 'vue',
+        typescript: true,
+        naming: 'kebab',
+        generateIndex: true
+    },
+    angular: {
+        framework: 'angular',
+        typescript: true,
+        naming: 'kebab',
+        generateIndex: true
+    },
+    minimal: {
+        framework: 'react'
+    },
+    full: {
+        source: './icons',
+        output: './components',
+        framework: 'react',
+        typescript: true,
+        naming: 'pascal',
+        generateIndex: true,
+        watch: false,
+        clean: true,
+        parallel: true,
+        verbose: true,
+        responsive: {
+            mobile: 16,
+            tablet: 20,
+            desktop: 24
+        },
+        theme: {
+            primary: '#007bff',
+            secondary: '#6c757d'
+        }
+    }
+};
+export const expectedOutputs = {
+    react: {
+        js: `import React from 'react';
+
+export const TestIcon = (props) => (
+  <svg {...props}>
+    <circle cx="12" cy="12" r="10"/>
+  </svg>
+);
+
+export default TestIcon;`,
+        ts: `import React from 'react';
+
+interface TestIconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const TestIcon: React.FC<TestIconProps> = (props) => (
+  <svg {...props}>
+    <circle cx="12" cy="12" r="10"/>
+  </svg>
+);
+
+export default TestIcon;`,
+        withForwardRef: `import React, { forwardRef } from 'react';
+
+interface TestIconProps extends React.SVGProps<SVGSVGElement> {}
+
+export const TestIcon = forwardRef<SVGSVGElement, TestIconProps>(
+  (props, ref) => (
+    <svg ref={ref} {...props}>
+      <circle cx="12" cy="12" r="10"/>
+    </svg>
+  )
+);
+
+TestIcon.displayName = 'TestIcon';
+
+export default TestIcon;`
+    },
+    vue: {
+        composition: `<template>
+  <svg v-bind="$attrs">
+    <circle cx="12" cy="12" r="10"/>
+  </svg>
+</template>
+
+<script setup lang="ts">
+</script>`,
+        options: `<template>
+  <svg v-bind="$attrs">
+    <circle cx="12" cy="12" r="10"/>
+  </svg>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'TestIcon'
+};
+</script>`
+    },
+    angular: {
+        standalone: `import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-test-icon',
+  standalone: true,
+  template: \`
+    <svg>
+      <circle cx="12" cy="12" r="10"/>
+    </svg>
+  \`
+})
+export class TestIconComponent {}`
+    },
+    svelte: `<script lang="ts">
+  export let width: number = 24;
+  export let height: number = 24;
+</script>
+
+<svg {width} {height}>
+  <circle cx="12" cy="12" r="10"/>
+</svg>`,
+    indexFile: `export { default as HomeIcon } from './HomeIcon';
+export { default as UserIcon } from './UserIcon';
+export { default as SettingsIcon } from './SettingsIcon';
+
+/**
+ * SVG Components Index
+ * Generated by svger-cli
+ *
+ * Import individual components:
+ * import { HomeIcon } from './components';
+ *
+ * Import all components:
+ * import * as Icons from './components';
+ */`
+};
+export const mockFileStructure = {
+    input: {
+        'home.svg': sampleSVGs.simple,
+        'user.svg': sampleSVGs.withFill,
+        'settings.svg': sampleSVGs.complex,
+        'nested/folder/icon.svg': sampleSVGs.nested
+    },
+    expected: {
+        'HomeIcon.tsx': expectedOutputs.react.ts,
+        'UserIcon.tsx': expectedOutputs.react.ts,
+        'SettingsIcon.tsx': expectedOutputs.react.ts,
+        'index.ts': expectedOutputs.indexFile
+    }
+};
+export const frameworks = [
+    'react',
+    'react-native',
+    'vue',
+    'angular',
+    'svelte',
+    'solid',
+    'lit',
+    'preact',
+    'vanilla'
+];
+export const namingConventions = ['pascal', 'camel', 'kebab'];
+export const fileExtensions = {
+    react: { js: '.jsx', ts: '.tsx' },
+    'react-native': { js: '.jsx', ts: '.tsx' },
+    vue: { js: '.vue', ts: '.vue' },
+    angular: { js: '.component.ts', ts: '.component.ts' },
+    svelte: { js: '.svelte', ts: '.svelte' },
+    solid: { js: '.tsx', ts: '.tsx' },
+    lit: { js: '.ts', ts: '.ts' },
+    preact: { js: '.tsx', ts: '.tsx' },
+    vanilla: { js: '.ts', ts: '.ts' }
+};

package/dist/cli.js

@@ -11,7 +11,7 @@ const program = new CLI();
 program
     .name('svger-cli')
     .description('Custom SVG to Angular, React, Vue, Svelte, Solid, and other component converter')
-    .version('2.0.0');
+    .version('3.0.0');
 // -------- Build Command --------
 /**
  * Build all SVGs from a source folder to an output folder.

package/dist/integrations/babel.js

@@ -85,9 +85,9 @@ async function processAllSVGs(options, processedFiles) {
         }
     }
     // Generate index file if enabled
-    if (options.generateIndex && results.length > 0) {
+    if (options.generateIndex) {
         try {
-            await generateIndexFile(outputPath, results, options);
+            await generateIndexFile(outputPath, options);
         }
         catch (error) {
             logger.error('Failed to generate index file:', error);
@@ -97,16 +97,35 @@ async function processAllSVGs(options, processedFiles) {
 }
 /**
  * Generate index file with all exports
+ * Scans the output directory for all existing component files
  */
-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}`);
+async function generateIndexFile(outputDir, options) {
+    try {
+        // Scan output directory for all component files
+        const files = await FileSystem.readDir(outputDir);
+        const extension = options.typescript ? 'tsx' : 'jsx';
+        // Filter component files (exclude index files)
+        const componentFiles = files.filter(file => (file.endsWith(`.${extension}`) ||
+            file.endsWith('.ts') ||
+            file.endsWith('.js')) &&
+            !file.startsWith('index.'));
+        if (componentFiles.length === 0) {
+            logger.warn('No component files found for index generation');
+            return;
+        }
+        // Extract component names
+        const componentNames = componentFiles.map(file => path.basename(file, path.extname(file)));
+        const indexExtension = options.typescript ? 'ts' : 'js';
+        const exports = componentNames
+            .map(name => `export { default as ${name} } from './${name}';`)
+            .join('\n');
+        const indexPath = path.join(outputDir, `index.${indexExtension}`);
+        await FileSystem.writeFile(indexPath, exports, 'utf-8');
+        logger.debug(`Generated index file: ${indexPath}`);
+    }
+    catch (error) {
+        logger.error('Failed to generate index file:', error);
+    }
 }
 /**
  * Transform SVG import path to component path

package/dist/integrations/rollup.js

@@ -140,7 +140,7 @@ async function processAllSVGs(options, processedFiles) {
     }
     // Generate index file
     if (options.generateIndex) {
-        await generateIndexFile(outputDir, results, options);
+        await generateIndexFile(outputDir, options);
     }
     const successful = results.filter(r => r.success).length;
     logger.info(`SVGER: Processed ${successful}/${svgFiles.length} SVG files`);
@@ -182,16 +182,35 @@ async function processSVGFile(svgPath, outputDir, options) {
 }
 /**
  * Generate index file with all exports
+ * Scans the output directory for all existing component files
  */
-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}`);
+async function generateIndexFile(outputDir, options) {
+    try {
+        // Scan output directory for all component files
+        const files = await FileSystem.readDir(outputDir);
+        const extension = options.typescript ? 'tsx' : 'jsx';
+        // Filter component files (exclude index files)
+        const componentFiles = files.filter(file => (file.endsWith(`.${extension}`) ||
+            file.endsWith('.ts') ||
+            file.endsWith('.js')) &&
+            !file.startsWith('index.'));
+        if (componentFiles.length === 0) {
+            logger.warn('No component files found for index generation');
+            return;
+        }
+        // Extract component names
+        const componentNames = componentFiles.map(file => path.basename(file, path.extname(file)));
+        const indexExtension = options.typescript ? 'ts' : 'js';
+        const exports = componentNames
+            .map(name => `export { default as ${name} } from './${name}';`)
+            .join('\n');
+        const indexPath = path.join(outputDir, `index.${indexExtension}`);
+        await FileSystem.writeFile(indexPath, exports, 'utf-8');
+        logger.debug(`Generated index file: ${indexPath}`);
+    }
+    catch (error) {
+        logger.error('Failed to generate index file:', error);
+    }
 }
 // Default export
 export default svgerRollupPlugin;

package/dist/integrations/vite.js

@@ -47,13 +47,9 @@ export function svgerVitePlugin(options = {}) {
         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);
@@ -164,7 +160,7 @@ async function processAllSVGs(options, processedFiles) {
     }
     // Generate index file
     if (options.generateIndex) {
-        await generateIndexFile(outputDir, results, options);
+        await generateIndexFile(outputDir, options);
     }
     const successful = results.filter(r => r.success).length;
     logger.info(`SVGER: Processed ${successful}/${svgFiles.length} SVG files`);
@@ -206,16 +202,35 @@ async function processSVGFile(svgPath, outputDir, options) {
 }
 /**
  * Generate index file with all exports
+ * Scans the output directory for all existing component files
  */
-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}`);
+async function generateIndexFile(outputDir, options) {
+    try {
+        // Scan output directory for all component files
+        const files = await FileSystem.readDir(outputDir);
+        const extension = options.typescript ? 'tsx' : 'jsx';
+        // Filter component files (exclude index files)
+        const componentFiles = files.filter(file => (file.endsWith(`.${extension}`) ||
+            file.endsWith('.ts') ||
+            file.endsWith('.js')) &&
+            !file.startsWith('index.'));
+        if (componentFiles.length === 0) {
+            logger.warn('No component files found for index generation');
+            return;
+        }
+        // Extract component names
+        const componentNames = componentFiles.map(file => path.basename(file, path.extname(file)));
+        const indexExtension = options.typescript ? 'ts' : 'js';
+        const exports = componentNames
+            .map(name => `export { default as ${name} } from './${name}';`)
+            .join('\n');
+        const indexPath = path.join(outputDir, `index.${indexExtension}`);
+        await FileSystem.writeFile(indexPath, exports, 'utf-8');
+        logger.debug(`Generated index file: ${indexPath}`);
+    }
+    catch (error) {
+        logger.error('Failed to generate index file:', error);
+    }
 }
 // Default export
 export default svgerVitePlugin;

package/dist/integrations/webpack.d.ts

@@ -45,6 +45,7 @@ export declare class SvgerWebpackPlugin {
     private processSVGFile;
     /**
      * Generate index file with all exports
+     * Scans the output directory for all existing component files
      */
     private generateIndexFile;
     /**

package/dist/integrations/webpack.js

@@ -111,7 +111,7 @@ export class SvgerWebpackPlugin {
         }
         // Generate index file
         if (this.options.generateIndex) {
-            await this.generateIndexFile(outputDir, results.filter(r => r.success));
+            await this.generateIndexFile(outputDir);
         }
         const successful = results.filter(r => r.success).length;
         logger.info(`SVGER: Processed ${successful}/${svgFiles.length} SVG files`);
@@ -176,16 +176,35 @@ export class SvgerWebpackPlugin {
     }
     /**
      * Generate index file with all exports
+     * Scans the output directory for all existing component files
      */
-    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}`);
+    async generateIndexFile(outputDir) {
+        try {
+            // Scan output directory for all component files
+            const files = await FileSystem.readDir(outputDir);
+            const extension = this.options.typescript ? 'tsx' : 'jsx';
+            // Filter component files (exclude index files)
+            const componentFiles = files.filter(file => (file.endsWith(`.${extension}`) ||
+                file.endsWith('.ts') ||
+                file.endsWith('.js')) &&
+                !file.startsWith('index.'));
+            if (componentFiles.length === 0) {
+                logger.warn('No component files found for index generation');
+                return;
+            }
+            // Extract component names
+            const componentNames = componentFiles.map(file => path.basename(file, path.extname(file)));
+            const indexExtension = this.options.typescript ? 'ts' : 'js';
+            const exports = componentNames
+                .map(name => `export { default as ${name} } from './${name}';`)
+                .join('\n');
+            const indexPath = path.join(outputDir, `index.${indexExtension}`);
+            await FileSystem.writeFile(indexPath, exports, 'utf-8');
+            logger.debug(`Generated index file: ${indexPath}`);
+        }
+        catch (error) {
+            logger.error('Failed to generate index file:', error);
+        }
     }
     /**
      * Get changed files from webpack

package/dist/services/svg-service.d.ts

@@ -42,6 +42,8 @@ export declare class SVGService {
     clean(outDir: string): Promise<void>;
     /**
      * Generate index.ts file with all component exports
+     * Scans the output directory for all existing component files,
+     * including those from locked SVGs that weren't regenerated
      */
     private generateIndexFile;
     /**

package/dist/services/svg-service.js

@@ -76,7 +76,7 @@ export class SVGService {
                     defaultWidth: mergedConfig.defaultWidth,
                     defaultHeight: mergedConfig.defaultHeight,
                     defaultFill: mergedConfig.defaultFill,
-                    namingConvention: mergedConfig.output?.naming || 'pascal',
+                    namingConvention: mergedConfig.outputConfig?.naming || 'pascal',
                     styleRules: Object.fromEntries(Object.entries(mergedConfig.styleRules || {}).filter(([, v]) => v !== undefined)),
                 });
                 results.push({
@@ -107,9 +107,8 @@ export class SVGService {
             });
         }
         // Generate index.ts file with all component exports
-        if (successful > 0) {
-            await this.generateIndexFile(outDir, results.filter(r => r.success).map(r => r.file), mergedConfig);
-        }
+        // This includes both newly generated components and existing locked components
+        await this.generateIndexFile(outDir, mergedConfig);
     }
     /**
      * Generate a React component from a single SVG file
@@ -257,13 +256,30 @@ export class SVGService {
     }
     /**
      * Generate index.ts file with all component exports
+     * Scans the output directory for all existing component files,
+     * including those from locked SVGs that weren't regenerated
      */
-    async generateIndexFile(outDir, svgFiles, config) {
+    async generateIndexFile(outDir, config) {
         try {
-            const namingConvention = config?.output?.naming || 'pascal';
-            const componentNames = svgFiles.map(file => {
-                const baseName = path.basename(file, '.svg');
-                return svgProcessor.generateComponentName(baseName, namingConvention);
+            // Scan output directory for all component files
+            const files = await FileSystem.readDir(outDir);
+            // Get the file extension based on typescript setting
+            const typescript = config?.typescript !== false;
+            const ext = typescript ? '.tsx' : '.jsx';
+            // Filter component files (exclude index.ts/index.js)
+            const componentFiles = files.filter(file => (file.endsWith(ext) ||
+                file.endsWith('.ts') ||
+                file.endsWith('.js')) &&
+                !file.startsWith('index.'));
+            if (componentFiles.length === 0) {
+                logger.warn('No component files found in output directory for index generation');
+                return;
+            }
+            // Extract component names from filenames
+            const componentNames = componentFiles.map(file => {
+                // Remove extension to get component name
+                const baseName = path.basename(file, path.extname(file));
+                return baseName;
             });
             const indexContent = this.generateIndexContent(componentNames);
             const indexPath = path.join(outDir, 'index.ts');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svger-cli",
-  "version": "3.0.0",
+  "version": "3.1.1",
   "description": "Enterprise-grade, zero-dependency SVG to component converter with official Webpack, Vite, Rollup, Babel, Next.js & Jest integrations. Supporting React, React Native, Vue, Angular, Svelte, Solid, Lit, Preact & Vanilla. Features auto-generated TypeScript exports, HMR, responsive design, themes & 85% faster processing than SVGR.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -86,6 +86,8 @@
     "clean": "node -e \"require('fs').rmSync('dist', {recursive: true, force: true})\"",
     "dev": "ts-node --esm src/cli.ts",
     "test": "npm run test:frameworks && npm run test:config && npm run test:e2e && npm run test:integrations",
+    "test:jest": "jest --passWithNoTests",
+    "test:unit": "jest --testPathPattern='src/__tests__' --passWithNoTests",
     "test:frameworks": "node frameworks.test.js",
     "test:config": "tsc tests/config-options.test.ts --outDir dist-tests --module es2022 --target es2022 --moduleResolution bundler && node dist-tests/config-options.test.js",
     "test:e2e": "tsc tests/e2e-complete.test.ts --outDir dist-tests --module es2022 --target es2022 --moduleResolution bundler && node dist-tests/e2e-complete.test.js",
@@ -93,7 +95,8 @@
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
     "test:integration": "jest --testPathPattern=integration",
-    "test:all": "npm run test:frameworks && npm run test:config && npm run test:e2e",
+    "test:all": "npm run test:jest && npm run test:frameworks && npm run test:config && npm run test:e2e",
+    "prepublishOnly": "npm run build",
     "lint": "eslint src --ext .ts,.tsx",
     "lint:fix": "eslint src --ext .ts,.tsx --fix",
     "typecheck": "tsc --noEmit",