svger-cli 1.0.0

package/src/config.ts

@@ -0,0 +1,82 @@
+import fs from "fs-extra";
+import path from "path";
+
+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> {
+  if (!fs.existsSync(getConfigPath())) return {};
+  return fs.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>) {
+  fs.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())) {
+    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));
+}

package/src/lock.ts

@@ -0,0 +1,74 @@
+import fs from "fs-extra";
+import path from "path";
+
+const LOCK_FILE = ".svg-lock";
+
+/**
+ * Get the absolute path to the lock file.
+ *
+ * @returns {string} Absolute path to .svg-lock
+ */
+function getLockFilePath(): string {
+  return path.resolve(LOCK_FILE);
+}
+
+/**
+ * Read the current locked SVG files from the lock file.
+ *
+ * @returns {string[]} Array of locked SVG file names.
+ */
+function readLockFile(): string[] {
+  if (!fs.existsSync(getLockFilePath())) return [];
+  try {
+    const data = fs.readFileSync(getLockFilePath(), "utf-8");
+    return JSON.parse(data);
+  } catch (e) {
+    return [];
+  }
+}
+
+/**
+ * Write the list of locked SVG files to the lock file.
+ *
+ * @param {string[]} files - Array of SVG file names to lock.
+ */
+function writeLockFile(files: string[]) {
+  fs.writeFileSync(getLockFilePath(), JSON.stringify(files, null, 2), "utf-8");
+}
+
+/**
+ * Lock one or more SVG files to prevent them from being processed.
+ *
+ * @param {string[]} files - Paths to SVG files to lock.
+ */
+export function lockFiles(files: string[]) {
+  const fileNames = files.map(f => path.basename(f));
+  const current = readLockFile();
+  const newFiles = Array.from(new Set([...current, ...fileNames]));
+  writeLockFile(newFiles);
+  console.log(`🔒 Locked files: ${newFiles.join(", ")}`);
+}
+
+/**
+ * Unlock one or more SVG files, allowing them to be processed again.
+ *
+ * @param {string[]} files - Paths to SVG files to unlock.
+ */
+export function unlockFiles(files: string[]) {
+  const fileNames = files.map(f => path.basename(f));
+  const current = readLockFile();
+  const remaining = current.filter(f => !fileNames.includes(f));
+  writeLockFile(remaining);
+  console.log(`🔓 Unlocked files: ${fileNames.join(", ")}`);
+}
+
+/**
+ * Check if a specific SVG file is locked.
+ *
+ * @param {string} file - Path to the SVG file to check.
+ * @returns {boolean} True if the file is locked, false otherwise.
+ */
+export function isLocked(file: string): boolean {
+  const current = readLockFile();
+  return current.includes(path.basename(file));
+}

package/src/templates/ComponentTemplate.ts

@@ -0,0 +1,64 @@
+/**
+ * Generates a React functional component string from an SVG file's content.
+ *
+ * This template replaces XML/DOCTYPE declarations, cleans up formatting,
+ * and injects React props (`width`, `height`, `fill`, and any others via `...props`)
+ * directly into the root `<svg>` tag.
+ *
+ * @param {Object} params - Template generation parameters.
+ * @param {string} params.componentName - The name of the generated React component.
+ * @param {string} params.svgContent - The raw SVG markup to transform into a React component.
+ * @param {number} [params.defaultWidth=24] - Default width of the SVG (used if none is provided via props).
+ * @param {number} [params.defaultHeight=24] - Default height of the SVG (used if none is provided via props).
+ * @param {string} [params.defaultFill="currentColor"] - Default fill color of the SVG.
+ *
+ * @returns {string} The complete TypeScript React component code as a string.
+ *
+ * @example
+ * const svg = '<svg viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/></svg>';
+ * const componentCode = reactTemplate({
+ *   componentName: "MyIcon",
+ *   svgContent: svg,
+ *   defaultWidth: 32,
+ *   defaultHeight: 32,
+ * });
+ *
+ * // Result: a ready-to-write .tsx file containing a typed React component
+ * console.log(componentCode);
+ */
+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, "") // Remove XML declarations
+    .replace(/<!DOCTYPE.*?>/g, "") // Remove DOCTYPE lines
+    .replace(/\r?\n|\r/g, "") // Remove newlines
+    .trim();
+
+  return `import * as React from "react";
+
+export const ${componentName}: React.FC<React.SVGProps<SVGSVGElement>> = ({
+  width = ${defaultWidth},
+  height = ${defaultHeight},
+  fill = "${defaultFill}",
+  ...props
+}) => (
+  ${cleaned.replace(
+    /<svg/,
+    `<svg width={width} height={height} fill={fill} {...props}`
+  )}
+);
+
+export default ${componentName};
+`;
+}

package/src/watch.ts

@@ -0,0 +1,88 @@
+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";
+
+/**
+ * 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 function watchSVGs(config: { src: string; out: string }) {
+  const srcDir = path.resolve(config.src);
+  const outDir = path.resolve(config.out);
+  const svgConfig = readConfig();
+
+  if (!fs.existsSync(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 ----
+  watcher.on("change", async (filePath) => {
+    if (path.extname(filePath) !== ".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 deleted SVG files ----
+  watcher.on("unlink", async (filePath) => {
+    if (path.extname(filePath) !== ".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`);
+    }
+  });
+
+  return watcher;
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "declaration": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}
+