svger-cli 2.0.0 → 2.0.2

package/src/builder.ts

@@ -1,104 +0,0 @@
-import path from "path";
-import { toPascalCase, FileSystem } from "./utils/native.js";
-import { isLocked } from "./lock.js";
-import { readConfig } from "./config.js";
-import { reactTemplate } from "./templates/ComponentTemplate.js";
-
-/**
- * Converts all SVG files from a source directory into React components and writes them to an output directory.
- *
- * @param {Object} config - Configuration object.
- * @param {string} config.src - Path to the source folder containing SVG files.
- * @param {string} config.out - Path to the output folder where React components will be generated.
- * @returns {Promise<void>} Resolves when all SVGs have been processed.
- */
-export async function buildAll(config: { src: string; out: string }) {
-  const svgConfig = readConfig();
-  const srcDir = path.resolve(config.src);
-  const outDir = path.resolve(config.out);
-
-  if (!(await FileSystem.exists(srcDir))) {
-    console.error("❌ Source folder not found:", srcDir);
-    process.exit(1);
-  }
-
-  await FileSystem.ensureDir(outDir);
-  const files = (await FileSystem.readDir(srcDir)).filter((f: string) => f.endsWith(".svg"));
-
-  if (!files.length) {
-    console.log("⚠️  No SVG files found in", srcDir);
-    return;
-  }
-
-  for (const file of files) {
-    const svgPath = path.join(srcDir, file);
-
-    if (isLocked(svgPath)) {
-      console.log(`⚠️ Skipped locked file: ${file}`);
-      continue;
-    }
-
-    const svgContent = await FileSystem.readFile(svgPath, "utf-8");
-    const componentName = toPascalCase(file.replace(".svg", ""));
-    const componentCode = reactTemplate({
-      componentName,
-      svgContent,
-      defaultWidth: svgConfig.defaultWidth,
-      defaultHeight: svgConfig.defaultHeight,
-      defaultFill: svgConfig.defaultFill,
-    });
-
-    const outFile = path.join(outDir, `${componentName}.tsx`);
-    await FileSystem.writeFile(outFile, componentCode, "utf-8");
-    console.log(`✅ Generated: ${componentName}.tsx`);
-  }
-
-  console.log("🎉 All SVGs have been converted successfully!");
-}
-
-/**
- * Generates a single React component from an SVG file.
- *
- * @param {Object} params - Parameters object.
- * @param {string} params.svgFile - Path to the SVG file to be converted.
- * @param {string} params.outDir - Path to the output folder for the generated component.
- * @returns {Promise<void>} Resolves when the SVG has been converted.
- */
-export async function generateSVG({
-  svgFile,
-  outDir,
-}: {
-  svgFile: string;
-  outDir: string;
-}) {
-  const svgConfig = readConfig();
-  const filePath = path.resolve(svgFile);
-
-  if (isLocked(filePath)) {
-    console.log(`⚠️ Skipped locked file: ${path.basename(svgFile)}`);
-    return;
-  }
-
-  if (!(await FileSystem.exists(filePath))) {
-    console.error("❌ SVG file not found:", filePath);
-    process.exit(1);
-  }
-
-  const svgContent = await FileSystem.readFile(filePath, "utf-8");
-  const componentName = toPascalCase(path.basename(svgFile, ".svg"));
-  const componentCode = reactTemplate({
-    componentName,
-    svgContent,
-    defaultWidth: svgConfig.defaultWidth,
-    defaultHeight: svgConfig.defaultHeight,
-    defaultFill: svgConfig.defaultFill,
-  });
-
-  const outputFolder = path.resolve(outDir);
-  await FileSystem.ensureDir(outputFolder);
-
-  const outFile = path.join(outputFolder, `${componentName}.tsx`);
-  await FileSystem.writeFile(outFile, componentCode, "utf-8");
-
-  console.log(`✅ Generated: ${componentName}.tsx`);
-}

package/src/clean.ts

@@ -1,21 +0,0 @@
-import path from "path";
-import { FileSystem } from "./utils/native.js";
-
-/**
- * Cleans the specified output directory by removing all files and folders inside it.
- * Typically used to clear previously generated SVG React components before a new build.
- *
- * @param {string} outDir - Path to the output directory to be cleaned.
- * @returns {Promise<void>} Resolves when the directory has been emptied.
- */
-export async function clean(outDir: string) {
-  const targetDir = path.resolve(outDir);
-
-  if (!(await FileSystem.exists(targetDir))) {
-    console.log(`⚠️ Directory not found: ${targetDir}`);
-    return;
-  }
-
-  await FileSystem.emptyDir(targetDir);
-  console.log(`🧹 Cleaned all generated SVG components in: ${targetDir}`);
-}

package/src/cli.ts

@@ -1,221 +0,0 @@
-#!/usr/bin/env node
-import { CLI } from "./utils/native.js";
-import { svgService } from "./services/svg-service.js";
-import { configService } from "./services/config.js";
-import { logger } from "./core/logger.js";
-
-const program = new CLI();
-
-/**
- * svger-cli CLI
- * Custom SVG to Angular, React, Vue, Svelte, Solid, and other component converter.
- */
-program
-  .name("svger-cli")
-  .description("Custom SVG to Angular, React, Vue, Svelte, Solid, and other component converter")
-  .version("2.0.0");
-
-// -------- Build Command --------
-/**
- * Build all SVGs from a source folder to an output folder.
- */
-program
-  .command("build <src> <out>")
-  .description("Build all SVGs from source to output")
-  .option("--framework <type>", "Target framework (react|vue|svelte|angular|solid|preact|lit|vanilla)")
-  .option("--typescript", "Generate TypeScript components (default: true)")
-  .option("--no-typescript", "Generate JavaScript components")
-  .option("--composition", "Use Vue Composition API with <script setup>")
-  .option("--standalone", "Generate Angular standalone components")
-  .option("--signals", "Use Angular signals for reactive state")
-  .action(async (args: string[], opts: Record<string, any>) => {
-    try {
-      const [src, out] = args;
-      
-      // Build config from CLI options
-      const buildConfig: any = { src, out };
-      
-      if (opts.framework) {
-        buildConfig.framework = opts.framework;
-      }
-      
-      if (opts.typescript !== undefined) {
-        buildConfig.typescript = opts.typescript;
-      }
-      
-      // Framework-specific options
-      const frameworkOptions: any = {};
-      
-      if (opts.composition !== undefined) {
-        frameworkOptions.scriptSetup = opts.composition;
-      }
-      
-      if (opts.standalone !== undefined) {
-        frameworkOptions.standalone = opts.standalone;
-      }
-      
-      if (opts.signals !== undefined) {
-        frameworkOptions.signals = opts.signals;
-      }
-      
-      if (Object.keys(frameworkOptions).length > 0) {
-        buildConfig.frameworkOptions = frameworkOptions;
-      }
-      
-      await svgService.buildAll(buildConfig);
-    } catch (error) {
-      logger.error('Build failed:', error);
-      process.exit(1);
-    }
-  });
-
-// -------- Watch Command --------
-/**
- * Watch a source folder and rebuild SVGs automatically on changes.
- */
-program
-  .command("watch <src> <out>")
-  .description("Watch source folder and rebuild SVGs automatically")
-  .action(async (args: string[]) => {
-    try {
-      const [src, out] = args;
-      await svgService.startWatching({ src, out });
-      
-      // Keep the process running
-      process.on('SIGINT', () => {
-        logger.info('Shutting down watch mode...');
-        svgService.shutdown();
-        process.exit(0);
-      });
-    } catch (error) {
-      logger.error('Watch mode failed:', error);
-      process.exit(1);
-    }
-  });
-
-// -------- Generate Single SVG --------
-/**
- * Generate a component from a single SVG file.
- */
-program
-  .command("generate <svgFile> <out>")
-  .description("Convert a single SVG file into a component")
-  .option("--framework <type>", "Target framework (react|vue|svelte|angular|solid|preact|lit|vanilla)")
-  .option("--typescript", "Generate TypeScript component (default: true)")
-  .option("--no-typescript", "Generate JavaScript component")
-  .option("--composition", "Use Vue Composition API with <script setup>")
-  .option("--standalone", "Generate Angular standalone component")
-  .action(async (args: string[], opts: Record<string, any>) => {
-    try {
-      const [svgFile, out] = args;
-      
-      const generateConfig: any = { svgFile, outDir: out };
-      
-      if (opts.framework) {
-        generateConfig.framework = opts.framework;
-      }
-      
-      if (opts.typescript !== undefined) {
-        generateConfig.typescript = opts.typescript;
-      }
-      
-      const frameworkOptions: any = {};
-      
-      if (opts.composition !== undefined) {
-        frameworkOptions.scriptSetup = opts.composition;
-      }
-      
-      if (opts.standalone !== undefined) {
-        frameworkOptions.standalone = opts.standalone;
-      }
-      
-      if (Object.keys(frameworkOptions).length > 0) {
-        generateConfig.frameworkOptions = frameworkOptions;
-      }
-      
-      await svgService.generateSingle(generateConfig);
-    } catch (error) {
-      logger.error('Generation failed:', error);
-      process.exit(1);
-    }
-  });
-
-// -------- Lock / Unlock --------
-/**
- * Lock one or more SVG files to prevent accidental overwrites.
- */
-program
-  .command("lock <files...>")
-  .description("Lock one or more SVG files")
-  .action((args: string[]) => {
-    try {
-      svgService.lockService.lockFiles(args);
-    } catch (error) {
-      logger.error('Lock operation failed:', error);
-      process.exit(1);
-    }
-  });
-
-/**
- * Unlock one or more SVG files to allow modifications.
- */
-program
-  .command("unlock <files...>")
-  .description("Unlock one or more SVG files")
-  .action((args: string[]) => {
-    try {
-      svgService.lockService.unlockFiles(args);
-    } catch (error) {
-      logger.error('Unlock operation failed:', error);
-      process.exit(1);
-    }
-  });
-
-// -------- Config --------
-/**
- * Manage svger-cli configuration.
- */
-program
-  .command("config")
-  .description("Manage svger-cli configuration")
-  .option("--init", "Create default .svgconfig.json")
-  .option("--set <keyValue>", "Set config key=value")
-  .option("--show", "Show current config")
-  .action(async (args: string[], opts: Record<string, any>) => {
-    try {
-      if (opts.init) return await configService.initConfig();
-      if (opts.set) {
-        const [key, value] = opts.set.split("=");
-        if (!key || value === undefined) {
-          logger.error("Invalid format. Use key=value");
-          process.exit(1);
-        }
-        const parsedValue = !isNaN(Number(value)) ? Number(value) : value;
-        return configService.setConfig(key, parsedValue);
-      }
-      if (opts.show) return configService.showConfig();
-      logger.error("No option provided. Use --init, --set, or --show");
-    } catch (error) {
-      logger.error('Config operation failed:', error);
-      process.exit(1);
-    }
-  });
-
-// -------- Clean Command --------
-/**
- * Remove all generated SVG React components from an output folder.
- */
-program
-  .command("clean <out>")
-  .description("Remove all generated SVG React components from output folder")
-  .action(async (args: string[]) => {
-    try {
-      const [out] = args;
-      await svgService.clean(out);
-    } catch (error) {
-      logger.error('Clean operation failed:', error);
-      process.exit(1);
-    }
-  });
-
-program.parse();

package/src/config.ts

@@ -1,81 +0,0 @@
-import path from "path";
-import { FileSystem } from "./utils/native.js";
-
-const CONFIG_FILE = ".svgconfig.json";
-
-/**
- * Get the absolute path to the configuration file.
- *
- * @returns {string} Absolute path to .svgconfig.json
- */
-function getConfigPath(): string {
-  return path.resolve(CONFIG_FILE);
-}
-
-/**
- * Read the current svger-cli configuration.
- *
- * @returns {Record<string, any>} Configuration object. Returns an empty object if no config file exists.
- */
-export function readConfig(): Record<string, any> {
-  return FileSystem.readJSONSync(getConfigPath());
-}
-
-/**
- * Write a configuration object to the config file.
- *
- * @param {Record<string, any>} config - Configuration object to write.
- */
-export function writeConfig(config: Record<string, any>) {
-  FileSystem.writeJSONSync(getConfigPath(), config, { spaces: 2 });
-}
-
-/**
- * Initialize the svger-cli configuration with default values.
- * If a config file already exists, this function will not overwrite it.
- */
-export async function initConfig() {
-  if (await FileSystem.exists(getConfigPath())) {
-    console.log("⚠️  Config file already exists:", getConfigPath());
-    return;
-  }
-
-  const defaultConfig = {
-    source: "./src/assets/svg",
-    output: "./src/components/icons",
-    watch: false,
-    defaultWidth: 24,
-    defaultHeight: 24,
-    defaultFill: "currentColor",
-    exclude: [] as string[],
-    styleRules: {
-      fill: "inherit",
-      stroke: "none",
-    },
-  };
-
-  writeConfig(defaultConfig);
-  console.log("✅ Config file created:", getConfigPath());
-}
-
-/**
- * Set a specific configuration key to a new value.
- *
- * @param {string} key - The config key to set.
- * @param {any} value - The value to assign to the key.
- */
-export function setConfig(key: string, value: any) {
-  const config = readConfig();
-  config[key] = value;
-  writeConfig(config);
-  console.log(`✅ Set config ${key}=${value}`);
-}
-
-/**
- * Display the current configuration in the console.
- */
-export function showConfig() {
-  const config = readConfig();
-  console.log("📄 Current Config:");
-  console.log(JSON.stringify(config, null, 2));
-}