svger-cli 2.0.1 → 2.0.3

package/src/templates/ComponentTemplate.ts

@@ -1,57 +0,0 @@
-/**
- * Generates a React SVG component template from provided SVG content.
- *
- * This function processes raw SVG content by cleaning it (removing XML declarations,
- * DOCTYPE, extra whitespace, inline styles, and xmlns attributes), then wraps it in
- * a React functional component that accepts standard SVGProps for flexibility.
- *
- * @param options - Configuration object for generating the component.
- * @param options.componentName - The name of the React component (e.g., "IconName").
- * @param options.svgContent - The raw SVG markup as a string.
- * @param [options.defaultWidth=24] - The default width attribute for the SVG.
- * @param [options.defaultHeight=24] - The default height attribute for the SVG.
- * @param [options.defaultFill="currentColor"] - The default fill color for the SVG.
- * @returns A string containing the complete TypeScript code for the React SVG component.
- */
-export function reactTemplate({
-  componentName,
-  svgContent,
-  defaultWidth = 24,
-  defaultHeight = 24,
-  defaultFill = "currentColor",
-}: {
-  componentName: string;
-  svgContent: string;
-  defaultWidth?: number;
-  defaultHeight?: number;
-  defaultFill?: string;
-}) {
-  const cleaned = svgContent
-    .replace(/<\?xml.*?\?>/g, "")
-    .replace(/<!DOCTYPE.*?>/g, "") 
-    .replace(/\r?\n|\r/g, "")
-    .replace(/\s{2,}/g, " ")
-    .replace(/style="[^"]*"/g, "")
-    .replace(/\s+xmlns(:xlink)?="[^"]*"/g, "") 
-    .trim()
-    .replace(/^.*?<svg[^>]*>(.*?)<\/svg>.*$/i, "$1");
-
-  return `import type { SVGProps } from "react";
-const Svg${componentName} = (props: SVGProps<SVGSVGElement>) => (
-  <svg
-    viewBox="0 0 ${defaultWidth} ${defaultHeight}"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlnsXlink="http://www.w3.org/1999/xlink"
-    width={props.width || ${defaultWidth}}
-    height={props.height || ${defaultHeight}}
-    fill={props.fill || "${defaultFill}"}
-    stroke={props.stroke || "none"}
-    className={props.className}
-    {...props}
-  >
-    ${cleaned}
-  </svg>
-);
-export default Svg${componentName};
-`;
-}

package/src/types/index.ts

@@ -1,169 +0,0 @@
-/**
- * Type definitions for svger-cli
- */
-
-export type FrameworkType = 'react' | 'vue' | 'svelte' | 'angular' | 'solid' | 'preact' | 'lit' | 'vanilla';
-
-export interface SVGConfig {
-  source: string;
-  output: string;
-  watch: boolean;
-  framework: FrameworkType;
-  typescript: boolean;
-  defaultWidth: number;
-  defaultHeight: number;
-  defaultFill: string;
-  exclude: string[];
-  styleRules: {
-    fill?: string;
-    stroke?: string;
-    [key: string]: string | undefined;
-  };
-  plugins?: PluginConfig[];
-  template?: TemplateConfig;
-  frameworkOptions?: FrameworkOptions;
-  errorHandling?: {
-    skipOnError: boolean;
-    logLevel: 'debug' | 'info' | 'warn' | 'error';
-    maxRetries: number;
-  };
-  performance?: {
-    batchSize: number;
-    parallel: boolean;
-    timeout: number;
-    enableCache: boolean;
-  };
-}
-
-export interface FrameworkOptions {
-  // Vue-specific
-  composition?: boolean;
-  setup?: boolean;
-  scriptSetup?: boolean;
-  
-  // Angular-specific
-  standalone?: boolean;
-  moduleImport?: boolean;
-  
-  // Solid-specific
-  signals?: boolean;
-  
-  // React/Preact-specific
-  forwardRef?: boolean;
-  memo?: boolean;
-  
-  // Lit-specific
-  customElement?: boolean;
-  shadowDom?: boolean;
-  
-  // General
-  cssModules?: boolean;
-  styledComponents?: boolean;
-}
-
-export interface BuildOptions {
-  src: string;
-  out: string;
-  config?: Partial<SVGConfig>;
-}
-
-export interface GenerateOptions {
-  svgFile: string;
-  outDir: string;
-  config?: Partial<SVGConfig>;
-}
-
-export interface WatchOptions {
-  src: string;
-  out: string;
-  config?: Partial<SVGConfig>;
-}
-
-export interface ComponentGenerationOptions {
-  componentName: string;
-  svgContent: string;
-  framework: FrameworkType;
-  typescript: boolean;
-  defaultWidth?: number;
-  defaultHeight?: number;
-  defaultFill?: string;
-  styleRules?: Record<string, string>;
-  template?: TemplateConfig;
-  frameworkOptions?: FrameworkOptions;
-}
-
-export interface TemplateConfig {
-  type: 'default' | 'custom';
-  path?: string;
-  options?: Record<string, any>;
-}
-
-export interface PluginConfig {
-  name: string;
-  options?: Record<string, any>;
-}
-
-export interface SVGProcessorResult {
-  success: boolean;
-  componentName: string;
-  filePath: string;
-  error?: Error;
-}
-
-export interface FileWatchEvent {
-  type: 'add' | 'change' | 'unlink';
-  filePath: string;
-  timestamp: number;
-}
-
-export interface ProcessingContext {
-  config: SVGConfig;
-  sourceDir: string;
-  outputDir: string;
-  fileQueue: string[];
-  locks: Set<string>;
-  cache?: Map<string, CachedComponent>;
-}
-
-export interface CachedComponent {
-  hash: string;
-  componentName: string;
-  filePath: string;
-  framework: FrameworkType;
-  timestamp: number;
-  svgHash: string;
-}
-
-export interface Logger {
-  info(message: string, ...args: any[]): void;
-  warn(message: string, ...args: any[]): void;
-  error(message: string, ...args: any[]): void;
-  success(message: string, ...args: any[]): void;
-  debug(message: string, ...args: any[]): void;
-}
-
-export interface Plugin {
-  name: string;
-  version: string;
-  process(content: string, options?: any): Promise<string>;
-  validate?(options?: any): boolean;
-}
-
-export interface Template {
-  name: string;
-  generate(options: ComponentGenerationOptions): string;
-  validate?(options: ComponentGenerationOptions): boolean;
-}
-
-export type FileSystemEvent = 'change' | 'rename';
-export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
-export type ProcessingStatus = 'pending' | 'processing' | 'completed' | 'failed';
-
-export interface ProcessingJob {
-  id: string;
-  filePath: string;
-  status: ProcessingStatus;
-  startTime: number;
-  endTime?: number;
-  error?: Error;
-}

package/src/utils/native.ts

@@ -1,352 +0,0 @@
-import fs from 'fs';
-import { promisify } from 'util';
-
-/**
- * Native Node.js utilities to replace external dependencies
- */
-
-/**
- * Convert string to PascalCase (replaces change-case package)
- */
-export function toPascalCase(str: string): string {
-  return str
-    .replace(/[^a-zA-Z0-9]/g, ' ')
-    .split(' ')
-    .filter(Boolean)
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-    .join('');
-}
-
-/**
- * Native file system utilities (replaces fs-extra package)
- */
-export class FileSystem {
-  private static _readFile = promisify(fs.readFile);
-  private static _writeFile = promisify(fs.writeFile);
-  private static _readdir = promisify(fs.readdir);
-  private static _stat = promisify(fs.stat);
-  private static _mkdir = promisify(fs.mkdir);
-  private static _rmdir = promisify(fs.rmdir);
-  private static _unlink = promisify(fs.unlink);
-
-  static async exists(path: string): Promise<boolean> {
-    try {
-      await this._stat(path);
-      return true;
-    } catch {
-      return false;
-    }
-  }
-
-  static async readFile(path: string, encoding: BufferEncoding = 'utf8'): Promise<string> {
-    return this._readFile(path, encoding);
-  }
-
-  static async writeFile(path: string, content: string, encoding: BufferEncoding = 'utf8'): Promise<void> {
-    return this._writeFile(path, content, encoding);
-  }
-
-  static async readDir(path: string): Promise<string[]> {
-    return this._readdir(path);
-  }
-
-  static async ensureDir(dirPath: string): Promise<void> {
-    try {
-      await this._mkdir(dirPath, { recursive: true });
-    } catch (error: any) {
-      if (error.code !== 'EEXIST') {
-        throw error;
-      }
-    }
-  }
-
-  static async removeDir(dirPath: string): Promise<void> {
-    try {
-      const files = await this._readdir(dirPath);
-      
-      for (const file of files) {
-        const filePath = `${dirPath}/${file}`;
-        const stats = await this._stat(filePath);
-        
-        if (stats.isDirectory()) {
-          await this.removeDir(filePath);
-        } else {
-          await this._unlink(filePath);
-        }
-      }
-      
-      await this._rmdir(dirPath);
-    } catch (error: any) {
-      if (error.code !== 'ENOENT') {
-        throw error;
-      }
-    }
-  }
-
-  static async emptyDir(dirPath: string): Promise<void> {
-    if (!(await this.exists(dirPath))) {
-      return;
-    }
-    
-    const files = await this._readdir(dirPath);
-    
-    for (const file of files) {
-      const filePath = `${dirPath}/${file}`;
-      const stats = await this._stat(filePath);
-      
-      if (stats.isDirectory()) {
-        await this.removeDir(filePath);
-      } else {
-        await this._unlink(filePath);
-      }
-    }
-  }
-
-  static async unlink(filePath: string): Promise<void> {
-    return this._unlink(filePath);
-  }
-
-  static readJSONSync(path: string): any {
-    try {
-      const content = fs.readFileSync(path, 'utf8');
-      return JSON.parse(content);
-    } catch {
-      return {};
-    }
-  }
-
-  static writeJSONSync(path: string, data: any, options?: { spaces?: number }): void {
-    const content = JSON.stringify(data, null, options?.spaces || 0);
-    fs.writeFileSync(path, content, 'utf8');
-  }
-
-  static existsSync(path: string): boolean {
-    try {
-      fs.statSync(path);
-      return true;
-    } catch {
-      return false;
-    }
-  }
-
-  static ensureDirSync(dirPath: string): void {
-    try {
-      fs.mkdirSync(dirPath, { recursive: true });
-    } catch (error: any) {
-      if (error.code !== 'EEXIST') {
-        throw error;
-      }
-    }
-  }
-}
-
-/**
- * Simple CLI argument parser (replaces commander package)
- */
-export class CLI {
-  private commands: Map<string, {
-    description: string;
-    action: (args: string[], options: Record<string, any>) => void | Promise<void>;
-    options: Map<string, { description: string; hasValue: boolean }>;
-  }> = new Map();
-
-  private programName = '';
-  private programDescription = '';
-  private programVersion = '';
-
-  name(name: string): this {
-    this.programName = name;
-    return this;
-  }
-
-  description(desc: string): this {
-    this.programDescription = desc;
-    return this;
-  }
-
-  version(version: string): this {
-    this.programVersion = version;
-    return this;
-  }
-
-  command(signature: string): CommandBuilder {
-    return new CommandBuilder(signature, this);
-  }
-
-  addCommand(signature: string, description: string, action: Function, options: Map<string, any>): void {
-    const [command] = signature.split(' ');
-    this.commands.set(command, {
-      description,
-      action: action as any,
-      options
-    });
-  }
-
-  async parse(): Promise<void> {
-    const args = process.argv.slice(2);
-    
-    if (args.length === 0 || args[0] === '--help' || args[0] === '-h') {
-      this.showHelp();
-      return;
-    }
-
-    if (args[0] === '--version' || args[0] === '-v') {
-      console.log(this.programVersion);
-      return;
-    }
-
-    const [commandName, ...remainingArgs] = args;
-    const command = this.commands.get(commandName);
-
-    if (!command) {
-      console.error(`Unknown command: ${commandName}`);
-      this.showHelp();
-      process.exit(1);
-    }
-
-    const { parsedArgs, options } = this.parseArgs(remainingArgs, command.options);
-    
-    try {
-      await command.action(parsedArgs, options);
-    } catch (error) {
-      console.error('Command failed:', error);
-      process.exit(1);
-    }
-  }
-
-  private parseArgs(args: string[], commandOptions: Map<string, any>): {
-    parsedArgs: string[];
-    options: Record<string, any>;
-  } {
-    const parsedArgs: string[] = [];
-    const options: Record<string, any> = {};
-    
-    let i = 0;
-    while (i < args.length) {
-      const arg = args[i];
-      
-      if (arg.startsWith('--')) {
-        const optionName = arg.slice(2);
-        const optionConfig = commandOptions.get(optionName);
-        
-        if (optionConfig) {
-          if (optionConfig.hasValue) {
-            options[optionName] = args[i + 1];
-            i += 2;
-          } else {
-            options[optionName] = true;
-            i++;
-          }
-        } else {
-          // Handle key=value format
-          if (arg.includes('=')) {
-            const [key, value] = arg.slice(2).split('=');
-            options[key] = value;
-            i++;
-          } else {
-            i++;
-          }
-        }
-      } else {
-        parsedArgs.push(arg);
-        i++;
-      }
-    }
-    
-    return { parsedArgs, options };
-  }
-
-  private showHelp(): void {
-    console.log(`${this.programName} - ${this.programDescription}`);
-    console.log(`Version: ${this.programVersion}\n`);
-    console.log('Commands:');
-    
-    for (const [name, cmd] of this.commands) {
-      console.log(`  ${name.padEnd(15)} ${cmd.description}`);
-    }
-    
-    console.log('\nOptions:');
-    console.log('  --help, -h      Show help');
-    console.log('  --version, -v   Show version');
-  }
-}
-
-class CommandBuilder {
-  private signature: string;
-  private desc = '';
-  private cli: CLI;
-  private options: Map<string, { description: string; hasValue: boolean }> = new Map();
-
-  constructor(signature: string, cli: CLI) {
-    this.signature = signature;
-    this.cli = cli;
-  }
-
-  description(desc: string): this {
-    this.desc = desc;
-    return this;
-  }
-
-  option(flag: string, description: string): this {
-    const hasValue = flag.includes('<') || flag.includes('[');
-    const optionName = flag.split(' ')[0].replace(/^--/, '');
-    this.options.set(optionName, { description, hasValue });
-    return this;
-  }
-
-  action(fn: Function): void {
-    this.cli.addCommand(this.signature, this.desc, fn, this.options);
-  }
-}
-
-/**
- * File watcher using native fs.watch (replaces chokidar)
- */
-export class FileWatcher {
-  private watchers: fs.FSWatcher[] = [];
-  private callbacks: Map<string, Function[]> = new Map();
-
-  watch(path: string, options?: { recursive?: boolean }): this {
-    try {
-      const watcher = fs.watch(path, { 
-        recursive: options?.recursive || false,
-        persistent: true 
-      }, (eventType, filename) => {
-        if (filename) {
-          this.emit(eventType, `${path}/${filename}`);
-        }
-      });
-
-      this.watchers.push(watcher);
-    } catch (error) {
-      console.error(`Failed to watch ${path}:`, error);
-    }
-
-    return this;
-  }
-
-  on(event: string, callback: Function): this {
-    if (!this.callbacks.has(event)) {
-      this.callbacks.set(event, []);
-    }
-    this.callbacks.get(event)!.push(callback);
-    return this;
-  }
-
-  private emit(event: string, ...args: any[]): void {
-    const callbacks = this.callbacks.get(event) || [];
-    callbacks.forEach(callback => {
-      try {
-        callback(...args);
-      } catch (error) {
-        console.error('Watcher callback error:', error);
-      }
-    });
-  }
-
-  close(): void {
-    this.watchers.forEach(watcher => watcher.close());
-    this.watchers = [];
-    this.callbacks.clear();
-  }
-}

package/src/watch.ts

@@ -1,88 +0,0 @@
-import fs from "fs";
-import path from "path";
-import { generateSVG } from "./builder.js";
-import { isLocked } from "./lock.js";
-import { readConfig } from "./config.js";
-import { FileSystem, FileWatcher } from "./utils/native.js";
-
-/**
- * Watches a source folder for changes to SVG files and automatically
- * rebuilds React components when SVGs are added, modified, or deleted.
- *
- * @param {Object} config - Watch configuration object.
- * @param {string} config.src - Source folder containing SVG files to watch.
- * @param {string} config.out - Output folder where React components are generated.
- * @returns {import("chokidar").FSWatcher} A chokidar file watcher instance.
- *
- * @example
- * watchSVGs({ src: "./src/assets/svg", out: "./src/components/icons" });
- *
- * // Watches the SVG folder and:
- * // - Generates new components when files are added.
- * // - Updates components when files change.
- * // - Removes components when SVGs are deleted.
- */
-export async function watchSVGs(config: { src: string; out: string }) {
-  const srcDir = path.resolve(config.src);
-  const outDir = path.resolve(config.out);
-  const svgConfig = readConfig();
-
-  if (!(await FileSystem.exists(srcDir))) {
-    console.error("❌ Source folder not found:", srcDir);
-    process.exit(1);
-  }
-
-  console.log(`👀 Watching for SVG changes in: ${srcDir}`);
-  console.log("🚀 Watch mode active — waiting for file changes...");
-
-  const watcher = new FileWatcher();
-  
-  // Watch the directory
-  watcher.watch(srcDir, { recursive: false });
-
-  // Handle file changes
-  watcher.on("change", async (filePath: string) => {
-    if (!filePath.endsWith(".svg")) return;
-    
-    console.log("Detected change in file:", filePath);
-
-    if (isLocked(filePath)) {
-      console.log(`⚠️ Skipped locked file: ${path.basename(filePath)}`);
-      return;
-    }
-
-    console.log(`✏️ SVG updated: ${path.basename(filePath)}`);
-    await generateSVG({ svgFile: filePath, outDir });
-  });
-
-  // Handle new files (rename event in fs.watch can indicate new files)
-  watcher.on("rename", async (filePath: string) => {
-    if (!filePath.endsWith(".svg")) return;
-    
-    // Check if file exists (new file) or doesn't exist (deleted file)
-    const exists = await FileSystem.exists(filePath);
-    
-    if (exists) {
-      console.log("Detected new file:", filePath);
-
-      if (isLocked(filePath)) {
-        console.log(`⚠️ Skipped locked file: ${path.basename(filePath)}`);
-        return;
-      }
-
-      console.log(`➕ New SVG detected: ${path.basename(filePath)}`);
-      await generateSVG({ svgFile: filePath, outDir });
-    } else {
-      // File was deleted
-      const componentName = path.basename(filePath, ".svg");
-      const outFile = path.join(outDir, `${componentName}.tsx`);
-
-      if (await FileSystem.exists(outFile)) {
-        await FileSystem.unlink(outFile);
-        console.log(`🗑️ Removed component: ${componentName}.tsx`);
-      }
-    }
-  });
-
-  return watcher;
-}

package/test-output-mulit/TestIcon-angular-module.component.ts

@@ -1,26 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-@Component({
-  selector: 'test-icon',
-  
-  template: `
-    <svg
-      [attr.class]="className"
-      [attr.width]="width"
-      [attr.height]="height"
-      [attr.fill]="fill"
-      [attr.stroke]="stroke"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-    </svg>
-  `,
-})
-export class TestIconComponent {
-  @Input() className: string = '';
-  @Input() width: string | number = 24;
-  @Input() height: string | number = 24;
-  @Input() fill: string = 'currentColor';
-  @Input() stroke: string = '';
-}