svger-cli 2.0.8 → 3.1.0

package/dist/__tests__/fixtures.d.ts

@@ -0,0 +1,132 @@
+/**
+ * Test Fixtures
+ * Reusable test data for unit tests
+ */
+export declare const sampleSVGs: {
+    simple: string;
+    withFill: string;
+    complex: string;
+    nested: string;
+    multiPath: string;
+    withGradient: string;
+    withText: string;
+    accessibility: string;
+    animated: string;
+    invalid: string;
+    empty: string;
+    malformed: string;
+};
+export declare const sampleConfigs: {
+    react: {
+        framework: string;
+        typescript: boolean;
+        naming: string;
+        generateIndex: boolean;
+    };
+    vue: {
+        framework: string;
+        typescript: boolean;
+        naming: string;
+        generateIndex: boolean;
+    };
+    angular: {
+        framework: string;
+        typescript: boolean;
+        naming: string;
+        generateIndex: boolean;
+    };
+    minimal: {
+        framework: string;
+    };
+    full: {
+        source: string;
+        output: string;
+        framework: string;
+        typescript: boolean;
+        naming: string;
+        generateIndex: boolean;
+        watch: boolean;
+        clean: boolean;
+        parallel: boolean;
+        verbose: boolean;
+        responsive: {
+            mobile: number;
+            tablet: number;
+            desktop: number;
+        };
+        theme: {
+            primary: string;
+            secondary: string;
+        };
+    };
+};
+export declare const expectedOutputs: {
+    react: {
+        js: string;
+        ts: string;
+        withForwardRef: string;
+    };
+    vue: {
+        composition: string;
+        options: string;
+    };
+    angular: {
+        standalone: string;
+    };
+    svelte: string;
+    indexFile: string;
+};
+export declare const mockFileStructure: {
+    input: {
+        'home.svg': string;
+        'user.svg': string;
+        'settings.svg': string;
+        'nested/folder/icon.svg': string;
+    };
+    expected: {
+        'HomeIcon.tsx': string;
+        'UserIcon.tsx': string;
+        'SettingsIcon.tsx': string;
+        'index.ts': string;
+    };
+};
+export declare const frameworks: string[];
+export declare const namingConventions: string[];
+export declare const fileExtensions: {
+    react: {
+        js: string;
+        ts: string;
+    };
+    'react-native': {
+        js: string;
+        ts: string;
+    };
+    vue: {
+        js: string;
+        ts: string;
+    };
+    angular: {
+        js: string;
+        ts: string;
+    };
+    svelte: {
+        js: string;
+        ts: string;
+    };
+    solid: {
+        js: string;
+        ts: string;
+    };
+    lit: {
+        js: string;
+        ts: string;
+    };
+    preact: {
+        js: string;
+        ts: string;
+    };
+    vanilla: {
+        js: string;
+        ts: string;
+    };
+};

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/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;