svger-cli 1.0.6 → 1.0.7

package/dist/cli.js

@@ -1,91 +1,158 @@
 #!/usr/bin/env node
-import { Command } from "commander";
-import { buildAll, generateSVG } from "./builder.js";
-import { lockFiles, unlockFiles } from "./lock.js";
-import { initConfig, setConfig, showConfig } from "./config.js";
-import { watchSVGs } from "./watch.js";
-import { clean } from "./clean.js";
-const program = new Command();
+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 React component converter.
+ * Custom SVG to Angular, React, Vue, Svelte, Solid, and other component converter.
  */
 program
     .name("svger-cli")
-    .description("Custom SVG to React component converter")
-    .version("1.0.0");
+    .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.
- *
- * @param {string} src - Source folder containing SVG files.
- * @param {string} out - Output folder for generated React components.
  */
 program
     .command("build <src> <out>")
     .description("Build all SVGs from source to output")
-    .action(async (src, out) => {
-    console.log("🛠️  Building SVGs...");
-    console.log("Source:", src);
-    console.log("Output:", out);
-    await buildAll({ src, out });
+    .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, opts) => {
+    try {
+        const [src, out] = args;
+        // Build config from CLI options
+        const buildConfig = { src, out };
+        if (opts.framework) {
+            buildConfig.framework = opts.framework;
+        }
+        if (opts.typescript !== undefined) {
+            buildConfig.typescript = opts.typescript;
+        }
+        // Framework-specific options
+        const frameworkOptions = {};
+        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.
- *
- * @param {string} src - Source folder to watch.
- * @param {string} out - Output folder for generated components.
  */
 program
     .command("watch <src> <out>")
     .description("Watch source folder and rebuild SVGs automatically")
-    .action((src, out) => {
-    console.log("🚀 Starting watch mode...");
-    watchSVGs({ src, out });
+    .action(async (args) => {
+    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 React component from a single SVG file.
- *
- * @param {string} svgFile - Path to the SVG file.
- * @param {string} out - Output folder for the generated component.
+ * Generate a component from a single SVG file.
  */
 program
     .command("generate <svgFile> <out>")
-    .description("Convert a single SVG file into a React component")
-    .action(async (svgFile, out) => {
-    await generateSVG({ svgFile, outDir: 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, opts) => {
+    try {
+        const [svgFile, out] = args;
+        const generateConfig = { svgFile, outDir: out };
+        if (opts.framework) {
+            generateConfig.framework = opts.framework;
+        }
+        if (opts.typescript !== undefined) {
+            generateConfig.typescript = opts.typescript;
+        }
+        const frameworkOptions = {};
+        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.
- *
- * @param {string[]} files - Paths to SVG files to lock.
  */
 program
     .command("lock <files...>")
     .description("Lock one or more SVG files")
-    .action((files) => lockFiles(files));
+    .action((args) => {
+    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.
- *
- * @param {string[]} files - Paths to SVG files to unlock.
  */
 program
     .command("unlock <files...>")
     .description("Unlock one or more SVG files")
-    .action((files) => unlockFiles(files));
+    .action((args) => {
+    try {
+        svgService.lockService.unlockFiles(args);
+    }
+    catch (error) {
+        logger.error('Unlock operation failed:', error);
+        process.exit(1);
+    }
+});
 // -------- Config --------
 /**
  * Manage svger-cli configuration.
- *
- * Options:
- * --init: Create default .svgconfig.json
- * --set key=value: Set a configuration value
- * --show: Show current configuration
- *
- * @param {Object} opts - CLI options
  */
 program
     .command("config")
@@ -93,32 +160,43 @@ program
     .option("--init", "Create default .svgconfig.json")
     .option("--set <keyValue>", "Set config key=value")
     .option("--show", "Show current config")
-    .action((opts) => {
-    if (opts.init)
-        return initConfig();
-    if (opts.set) {
-        const [key, value] = opts.set.split("=");
-        if (!key || value === undefined) {
-            console.error("❌ Invalid format. Use key=value");
-            process.exit(1);
+    .action(async (args, opts) => {
+    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);
         }
-        const parsedValue = !isNaN(Number(value)) ? Number(value) : value;
-        return 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);
     }
-    if (opts.show)
-        return showConfig();
-    console.log("❌ No option provided. Use --init, --set, or --show");
 });
 // -------- Clean Command --------
 /**
  * Remove all generated SVG React components from an output folder.
- *
- * @param {string} out - Output folder to clean.
  */
 program
     .command("clean <out>")
     .description("Remove all generated SVG React components from output folder")
-    .action(async (out) => {
-    await clean(out);
+    .action(async (args) => {
+    try {
+        const [out] = args;
+        await svgService.clean(out);
+    }
+    catch (error) {
+        logger.error('Clean operation failed:', error);
+        process.exit(1);
+    }
 });
 program.parse();

package/dist/config.d.ts

@@ -14,7 +14,7 @@ export declare function writeConfig(config: Record<string, any>): void;
  * Initialize the svger-cli configuration with default values.
  * If a config file already exists, this function will not overwrite it.
  */
-export declare function initConfig(): void;
+export declare function initConfig(): Promise<void>;
 /**
  * Set a specific configuration key to a new value.
  *

package/dist/config.js

@@ -1,5 +1,5 @@
-import fs from "fs-extra";
 import path from "path";
+import { FileSystem } from "./utils/native.js";
 const CONFIG_FILE = ".svgconfig.json";
 /**
  * Get the absolute path to the configuration file.
@@ -15,9 +15,7 @@ function getConfigPath() {
  * @returns {Record<string, any>} Configuration object. Returns an empty object if no config file exists.
  */
 export function readConfig() {
-    if (!fs.existsSync(getConfigPath()))
-        return {};
-    return fs.readJSONSync(getConfigPath());
+    return FileSystem.readJSONSync(getConfigPath());
 }
 /**
  * Write a configuration object to the config file.
@@ -25,14 +23,14 @@ export function readConfig() {
  * @param {Record<string, any>} config - Configuration object to write.
  */
 export function writeConfig(config) {
-    fs.writeJSONSync(getConfigPath(), config, { spaces: 2 });
+    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 function initConfig() {
-    if (fs.existsSync(getConfigPath())) {
+export async function initConfig() {
+    if (await FileSystem.exists(getConfigPath())) {
         console.log("⚠️  Config file already exists:", getConfigPath());
         return;
     }

package/dist/lock.js

@@ -1,4 +1,4 @@
-import fs from "fs-extra";
+import fs from "fs";
 import path from "path";
 const LOCK_FILE = ".svg-lock";
 /**

package/dist/templates/ComponentTemplate.d.ts

@@ -1,3 +1,18 @@
+/**
+ * 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 declare function reactTemplate({ componentName, svgContent, defaultWidth, defaultHeight, defaultFill, }: {
     componentName: string;
     svgContent: string;

package/dist/templates/ComponentTemplate.js

@@ -1,3 +1,18 @@
+/**
+ * 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", }) {
     const cleaned = svgContent
         .replace(/<\?xml.*?\?>/g, "")

package/dist/watch.d.ts

@@ -1,3 +1,4 @@
+import { 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.
@@ -18,4 +19,4 @@
 export declare function watchSVGs(config: {
     src: string;
     out: string;
-}): import("chokidar").FSWatcher;
+}): Promise<FileWatcher>;

package/dist/watch.js

@@ -1,9 +1,8 @@
-import fs from "fs-extra";
 import path from "path";
-import chokidar from "chokidar";
 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.
@@ -21,38 +20,22 @@ import { readConfig } from "./config.js";
  * // - Updates components when files change.
  * // - Removes components when SVGs are deleted.
  */
-export function watchSVGs(config) {
+export async function watchSVGs(config) {
     const srcDir = path.resolve(config.src);
     const outDir = path.resolve(config.out);
     const svgConfig = readConfig();
-    if (!fs.existsSync(srcDir)) {
+    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 = chokidar.watch(srcDir, {
-        persistent: true,
-        ignoreInitial: false,
-        depth: 0,
-        awaitWriteFinish: { stabilityThreshold: 500, pollInterval: 100 },
-        ignored: /(^|[\/\\])\../, // Ignore hidden files
-    });
-    // ---- Handle new SVG files ----
-    watcher.on("add", async (filePath) => {
-        if (path.extname(filePath) !== ".svg")
-            return;
-        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 });
-    });
-    // ---- Handle modified SVG files ----
+    const watcher = new FileWatcher();
+    // Watch the directory
+    watcher.watch(srcDir, { recursive: false });
+    // Handle file changes
     watcher.on("change", async (filePath) => {
-        if (path.extname(filePath) !== ".svg")
+        if (!filePath.endsWith(".svg"))
             return;
         console.log("Detected change in file:", filePath);
         if (isLocked(filePath)) {
@@ -62,15 +45,29 @@ export function watchSVGs(config) {
         console.log(`✏️ SVG updated: ${path.basename(filePath)}`);
         await generateSVG({ svgFile: filePath, outDir });
     });
-    // ---- Handle deleted SVG files ----
-    watcher.on("unlink", async (filePath) => {
-        if (path.extname(filePath) !== ".svg")
+    // Handle new files (rename event in fs.watch can indicate new files)
+    watcher.on("rename", async (filePath) => {
+        if (!filePath.endsWith(".svg"))
             return;
-        const componentName = path.basename(filePath, ".svg");
-        const outFile = path.join(outDir, `${componentName}.tsx`);
-        if (fs.existsSync(outFile)) {
-            await fs.remove(outFile);
-            console.log(`🗑️ Removed component: ${componentName}.tsx`);
+        // 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;