vectify 2.0.0 → 2.0.2

package/dist/index.js

@@ -103,23 +103,23 @@ async function writeFile(filePath, content) {
 }
 async function getSvgFiles(dirPath) {
   const fs2 = await import("fs/promises");
-  const path6 = await import("path");
+  const path7 = await import("path");
   try {
     const files = await fs2.readdir(dirPath);
-    return files.filter((file) => file.endsWith(".svg")).map((file) => path6.join(dirPath, file));
+    return files.filter((file) => file.endsWith(".svg")).map((file) => path7.join(dirPath, file));
   } catch {
     return [];
   }
 }
 async function findProjectRoot(startDir = process.cwd()) {
-  const path6 = await import("path");
+  const path7 = await import("path");
   let currentDir = startDir;
   while (true) {
-    const packageJsonPath = path6.join(currentDir, "package.json");
+    const packageJsonPath = path7.join(currentDir, "package.json");
     if (await fileExists(packageJsonPath)) {
       return currentDir;
     }
-    const parentDir = path6.dirname(currentDir);
+    const parentDir = path7.dirname(currentDir);
     if (parentDir === currentDir) {
       return startDir;
     }
@@ -785,7 +785,7 @@ async function findConfig() {
 }
 
 // src/generators/index.ts
-var import_node_path3 = __toESM(require("path"));
+var import_node_path4 = __toESM(require("path"));
 
 // src/parsers/optimizer.ts
 var import_svgo = require("svgo");
@@ -819,6 +819,101 @@ async function optimizeSvg(svgContent, config) {
   }
 }
 
+// src/utils/formatter.ts
+var import_node_child_process = require("child_process");
+var import_node_path3 = __toESM(require("path"));
+var import_node_process2 = __toESM(require("process"));
+var import_node_util = require("util");
+init_helpers();
+var execAsync = (0, import_node_util.promisify)(import_node_child_process.exec);
+var FORMATTER_PATTERNS = {
+  biome: ["biome.json", "biome.jsonc"],
+  prettier: [
+    ".prettierrc",
+    ".prettierrc.json",
+    ".prettierrc.yml",
+    ".prettierrc.yaml",
+    ".prettierrc.js",
+    ".prettierrc.cjs",
+    ".prettierrc.mjs",
+    "prettier.config.js",
+    "prettier.config.cjs",
+    "prettier.config.mjs"
+  ],
+  eslint: [
+    "eslint.config.js",
+    "eslint.config.mjs",
+    "eslint.config.cjs",
+    "eslint.config.ts",
+    ".eslintrc",
+    ".eslintrc.js",
+    ".eslintrc.cjs",
+    ".eslintrc.json",
+    ".eslintrc.yml",
+    ".eslintrc.yaml"
+  ]
+};
+var FORMATTER_COMMANDS = {
+  biome: (outputDir, args) => `npx @biomejs/biome format --write ${args || ""} "${outputDir}"`.trim(),
+  prettier: (outputDir, args) => `npx prettier --write ${args || ""} "${outputDir}"`.trim(),
+  eslint: (outputDir, args) => `npx eslint --fix ${args || ""} "${outputDir}"`.trim()
+};
+function normalizeFormatOption(format) {
+  if (format === false) {
+    return null;
+  }
+  if (format === true) {
+    return { tool: "auto" };
+  }
+  if (typeof format === "string") {
+    return { tool: format };
+  }
+  return format;
+}
+async function detectFormatter() {
+  const cwd = import_node_process2.default.cwd();
+  const priority = ["biome", "prettier", "eslint"];
+  for (const tool of priority) {
+    const patterns = FORMATTER_PATTERNS[tool];
+    for (const pattern of patterns) {
+      const configPath = import_node_path3.default.join(cwd, pattern);
+      if (await fileExists(configPath)) {
+        return tool;
+      }
+    }
+  }
+  return null;
+}
+async function formatOutput(outputDir, format) {
+  const config = normalizeFormatOption(format);
+  if (!config) {
+    return { success: true };
+  }
+  let tool = null;
+  if (config.tool === "auto") {
+    tool = await detectFormatter();
+    if (!tool) {
+      return {
+        success: true,
+        error: "No formatter detected. Install prettier, eslint, or biome to enable auto-formatting."
+      };
+    }
+  } else {
+    tool = config.tool || "prettier";
+  }
+  const command = FORMATTER_COMMANDS[tool](outputDir, config.args);
+  try {
+    await execAsync(command, { cwd: import_node_process2.default.cwd() });
+    return { success: true, tool };
+  } catch (error) {
+    return {
+      success: false,
+      tool,
+      error: `Format failed with ${tool}: ${error.message}`
+    };
+  }
+}
+
 // src/generators/index.ts
 init_helpers();
 async function generateIcons(config, dryRun = false) {
@@ -861,6 +956,14 @@ async function generateIcons(config, dryRun = false) {
     if (config.generateOptions?.preview && !dryRun) {
       await generatePreviewHtml(svgFiles, config);
     }
+    if (config.format && !dryRun) {
+      const formatResult = await formatOutput(config.output, config.format);
+      if (formatResult.success && formatResult.tool) {
+        console.log(`Formatted with ${formatResult.tool}`);
+      } else if (formatResult.error) {
+        console.warn(formatResult.error);
+      }
+    }
     if (config.hooks?.onComplete) {
       await config.hooks.onComplete(stats);
     }
@@ -871,7 +974,7 @@ async function generateIcons(config, dryRun = false) {
 }
 async function generateIconComponent(svgFile, config, dryRun = false) {
   let svgContent = await readFile(svgFile);
-  const fileName = import_node_path3.default.basename(svgFile);
+  const fileName = import_node_path4.default.basename(svgFile);
   if (config.hooks?.beforeParse) {
     svgContent = await config.hooks.beforeParse(svgContent, fileName);
   }
@@ -895,7 +998,7 @@ async function generateIconComponent(svgFile, config, dryRun = false) {
     code = await config.hooks.afterGenerate(code, componentName);
   }
   const fileExt = strategy.getComponentExtension(typescript);
-  const outputPath = import_node_path3.default.join(config.output, `${componentName}.${fileExt}`);
+  const outputPath = import_node_path4.default.join(config.output, `${componentName}.${fileExt}`);
   if (dryRun) {
     console.log(`  ${componentName}.${fileExt}`);
   } else {
@@ -906,7 +1009,7 @@ async function generateBaseComponent(config, dryRun = false) {
   const typescript = config.typescript ?? true;
   const strategy = getFrameworkStrategy(config.framework);
   const { code, fileName } = strategy.generateBaseComponent(typescript);
-  const outputPath = import_node_path3.default.join(config.output, fileName);
+  const outputPath = import_node_path4.default.join(config.output, fileName);
   if (dryRun) {
     console.log(`  ${fileName}`);
   } else {
@@ -917,9 +1020,9 @@ async function generateIndexFile(svgFiles, config, dryRun = false) {
   const typescript = config.typescript ?? true;
   const strategy = getFrameworkStrategy(config.framework);
   const ext = strategy.getIndexExtension(typescript);
-  const usesDefaultExport = config.framework === "vue" || config.framework === "svelte" || config.framework === "preact";
+  const usesDefaultExport = ["vue", "svelte", "react", "preact"].includes(config.framework);
   const exports2 = svgFiles.map((svgFile) => {
-    const fileName = import_node_path3.default.basename(svgFile);
+    const fileName = import_node_path4.default.basename(svgFile);
     const componentName = getComponentName(
       fileName,
       config.prefix,
@@ -932,7 +1035,7 @@ async function generateIndexFile(svgFiles, config, dryRun = false) {
       return `export { ${componentName} } from './${componentName}'`;
     }
   }).join("\n");
-  const indexPath = import_node_path3.default.join(config.output, `index.${ext}`);
+  const indexPath = import_node_path4.default.join(config.output, `index.${ext}`);
   if (dryRun) {
     console.log(`  index.${ext}`);
   } else {
@@ -942,7 +1045,7 @@ async function generateIndexFile(svgFiles, config, dryRun = false) {
 }
 async function generatePreviewHtml(svgFiles, config) {
   const componentNames = svgFiles.map((svgFile) => {
-    const fileName = import_node_path3.default.basename(svgFile);
+    const fileName = import_node_path4.default.basename(svgFile);
     return getComponentName(
       fileName,
       config.prefix,
@@ -1114,7 +1217,7 @@ async function generatePreviewHtml(svgFiles, config) {
   </script>
 </body>
 </html>`;
-  const previewPath = import_node_path3.default.join(config.output, "preview.html");
+  const previewPath = import_node_path4.default.join(config.output, "preview.html");
   await writeFile(previewPath, html);
 }
 async function cleanOutputDirectory(svgFiles, config) {
@@ -1123,7 +1226,7 @@ async function cleanOutputDirectory(svgFiles, config) {
   const fileExt = strategy.getComponentExtension(config.typescript ?? true);
   const expectedComponents = new Set(
     svgFiles.map((svgFile) => {
-      const fileName = import_node_path3.default.basename(svgFile, ".svg");
+      const fileName = import_node_path4.default.basename(svgFile, ".svg");
       const componentName = getComponentName(
         fileName,
         config.prefix,
@@ -1150,7 +1253,7 @@ async function cleanOutputDirectory(svgFiles, config) {
         continue;
       }
       if (!expectedComponents.has(file)) {
-        const filePath = import_node_path3.default.join(config.output, file);
+        const filePath = import_node_path4.default.join(config.output, file);
         await unlink(filePath);
         console.log(`Deleted orphaned component: ${file}`);
       }
@@ -1217,8 +1320,8 @@ ${import_chalk.default.bold("Output:")} ${import_chalk.default.cyan(config.outpu
 }
 
 // src/commands/init.ts
-var import_node_path4 = __toESM(require("path"));
-var import_node_process2 = __toESM(require("process"));
+var import_node_path5 = __toESM(require("path"));
+var import_node_process3 = __toESM(require("process"));
 var import_chalk2 = __toESM(require("chalk"));
 var import_inquirer = __toESM(require("inquirer"));
 var import_ora2 = __toESM(require("ora"));
@@ -1226,7 +1329,7 @@ init_helpers();
 async function init(options = {}) {
   try {
     const projectRoot = await findProjectRoot();
-    const currentDir = import_node_process2.default.cwd();
+    const currentDir = import_node_process3.default.cwd();
     if (currentDir !== projectRoot) {
       console.log(import_chalk2.default.yellow(`
 Note: Project root detected at ${import_chalk2.default.cyan(projectRoot)}`));
@@ -1247,8 +1350,8 @@ Note: Project root detected at ${import_chalk2.default.cyan(projectRoot)}`));
         }
       }
     ]);
-    const configPath = import_node_path4.default.resolve(projectRoot, pathAnswers.configPath);
-    const configDir = import_node_path4.default.dirname(configPath);
+    const configPath = import_node_path5.default.resolve(projectRoot, pathAnswers.configPath);
+    const configDir = import_node_path5.default.dirname(configPath);
     if (!options.force && await fileExists(configPath)) {
       const { overwrite } = await import_inquirer.default.prompt([
         {
@@ -1312,14 +1415,14 @@ Note: Project root detected at ${import_chalk2.default.cyan(projectRoot)}`));
         default: ""
       }
     ]);
-    const inputPath = import_node_path4.default.resolve(projectRoot, answers.input);
-    const outputPath = import_node_path4.default.resolve(projectRoot, answers.output);
+    const inputPath = import_node_path5.default.resolve(projectRoot, answers.input);
+    const outputPath = import_node_path5.default.resolve(projectRoot, answers.output);
     const spinner = (0, import_ora2.default)("Setting up directories...").start();
     await ensureDir(inputPath);
     spinner.text = `Created input directory: ${import_chalk2.default.cyan(answers.input)}`;
     await ensureDir(outputPath);
     spinner.succeed(`Created output directory: ${import_chalk2.default.cyan(answers.output)}`);
-    const relativeConfigDir = import_node_path4.default.relative(configDir, projectRoot) || ".";
+    const relativeConfigDir = import_node_path5.default.relative(configDir, projectRoot) || ".";
     const configContent = generateConfigContent(answers, relativeConfigDir);
     spinner.start("Creating config file...");
     await writeFile(configPath, configContent);
@@ -1362,7 +1465,7 @@ export default defineConfig({
 }
 
 // src/commands/watch.ts
-var import_node_path5 = __toESM(require("path"));
+var import_node_path6 = __toESM(require("path"));
 var import_chalk3 = __toESM(require("chalk"));
 var import_chokidar = __toESM(require("chokidar"));
 var import_ora3 = __toESM(require("ora"));
@@ -1384,7 +1487,7 @@ async function watch(options = {}) {
     spinner.start("Generating icon components...");
     const initialStats = await generateIcons(config);
     spinner.succeed(`Generated ${import_chalk3.default.green(initialStats.success)} icon components`);
-    const watchPath = import_node_path5.default.join(config.input, "**/*.svg");
+    const watchPath = import_node_path6.default.join(config.input, "**/*.svg");
     const debounce = config.watch?.debounce ?? 300;
     const ignore = config.watch?.ignore ?? ["**/node_modules/**", "**/.git/**"];
     console.log(import_chalk3.default.bold("\nWatching for changes..."));
@@ -1402,7 +1505,7 @@ async function watch(options = {}) {
     }).on("change", (filePath) => {
       handleChange("changed", filePath, config, debounce, debounceTimer);
     }).on("unlink", (filePath) => {
-      console.log(import_chalk3.default.yellow(`SVG file removed: ${import_node_path5.default.basename(filePath)}`));
+      console.log(import_chalk3.default.yellow(`SVG file removed: ${import_node_path6.default.basename(filePath)}`));
       handleChange("removed", filePath, config, debounce, debounceTimer);
     }).on("error", (error) => {
       console.error(import_chalk3.default.red(`Watcher error: ${error.message}`));
@@ -1421,7 +1524,7 @@ ${import_chalk3.default.yellow("Stopping watch mode...")}`);
   }
 }
 function handleChange(event, filePath, config, debounce, timer) {
-  const fileName = import_node_path5.default.basename(filePath);
+  const fileName = import_node_path6.default.basename(filePath);
   if (timer) {
     clearTimeout(timer);
   }

package/dist/index.mjs

@@ -7,7 +7,7 @@ import {
   init,
   loadConfig,
   watch
-} from "./chunk-4BWKFV7W.mjs";
+} from "./chunk-XHYCGABW.mjs";
 import "./chunk-CIKTK6HI.mjs";
 
 // src/types.ts

package/dist/templates/react/component.jsx.hbs

@@ -1,3 +1,5 @@
+'use client'
+
 import { createIcon } from './createIcon'
 
 export const iconNode = [

package/dist/templates/react/component.tsx.hbs

@@ -1,10 +1,12 @@
+'use client'
+
 {{#if typescript}}
 import type { IconNode } from 'vectify'
 {{/if}}
 import { createIcon } from './createIcon'
 
 export const iconNode{{#if typescript}}: IconNode[]{{/if}} = [
-{{{formattedNodes}}}
+{{{formattedNodes}}},
 ]
 
 const {{componentName}} = createIcon('{{componentName}}', iconNode, {{keepColors}})

package/dist/templates/react/createIcon.jsx.hbs

@@ -1,3 +1,5 @@
+'use client'
+
 import { createElement, forwardRef } from 'react'
 
 export function createIcon(name, iconNode, keepColors = false) {

package/dist/templates/react/createIcon.tsx.hbs

@@ -1,18 +1,20 @@
-import { createElement, forwardRef } from 'react'
+'use client'
+
+import type { ForwardRefExoticComponent, ReactNode, RefAttributes, SVGProps } from 'react'
 import type { IconNode, IconProps } from 'vectify'
-import type { ReactNode, SVGProps } from 'react'
+import { createElement, forwardRef } from 'react'
 
 export interface CreateIconProps extends IconProps, Omit<SVGProps<SVGSVGElement>, keyof IconProps> {
-  size?: number | string
-  color?: string
-  strokeWidth?: number | string
-  className?: string
-  title?: string
+  'size'?: number | string
+  'color'?: string
+  'strokeWidth'?: number | string
+  'className'?: string
+  'title'?: string
   'aria-label'?: string
   'aria-hidden'?: boolean | 'true' | 'false'
 }
 
-export function createIcon(name: string, iconNode: IconNode[], keepColors = false) {
+export function createIcon(name: string, iconNode: IconNode[], keepColors = false): ForwardRefExoticComponent<CreateIconProps & RefAttributes<SVGSVGElement>> {
   const Icon = forwardRef<SVGSVGElement, CreateIconProps>(({
     size = 24,
     color = 'currentColor',
@@ -56,7 +58,7 @@ function renderIconNode(
   nodes: IconNode[],
   keepColors: boolean,
   color: string,
-  strokeWidth: number | string
+  strokeWidth: number | string,
 ): ReactNode {
   return nodes.map((node, index) => {
     const [type, attrs, children] = node
@@ -65,7 +67,8 @@ function renderIconNode(
 
     if (keepColors) {
       cleanedAttrs = attrs
-    } else {
+    }
+    else {
       // Track color attributes to determine icon type
       let hasFill = false
       let hasStroke = false
@@ -86,14 +89,15 @@ function renderIconNode(
       // Keep non-color attributes
       cleanedAttrs = Object.fromEntries(
         Object.entries(attrs).filter(([key]) =>
-          !['stroke', 'fill', 'strokeWidth', 'stroke-width'].includes(key)
-        )
+          !['stroke', 'fill', 'strokeWidth', 'stroke-width'].includes(key),
+        ),
       )
 
       // Apply color based on original attributes
       if (hasFill) {
         cleanedAttrs.fill = color
-      } else if (hasStroke) {
+      }
+      else if (hasStroke) {
         cleanedAttrs.fill = 'none'
         cleanedAttrs.stroke = color
         cleanedAttrs.strokeWidth = originalStrokeWidth ?? strokeWidth
@@ -108,7 +112,7 @@ function renderIconNode(
       return createElement(
         type,
         props,
-        renderIconNode(children, keepColors, color, strokeWidth)
+        renderIconNode(children, keepColors, color, strokeWidth),
       )
     }
 

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "vectify",
-  "version": "2.0.0",
+  "version": "2.0.2",
+  "packageManager": "pnpm@9.15.9",
   "description": "A powerful command-line tool to generate React, Vue, and Svelte icon components from SVG files",
   "author": "Xiaobing Zhu <hellozxb252@gmail.com>",
   "license": "MIT",
@@ -44,6 +45,16 @@
   "engines": {
     "node": ">=18.0.0"
   },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "prepublishOnly": "pnpm build",
+    "clean": "rm -rf dist"
+  },
   "dependencies": {
     "chalk": "^5.3.0",
     "cheerio": "^1.1.2",
@@ -65,14 +76,5 @@
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "vitest": "^4.0.17"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "clean": "rm -rf dist"
   }
-}
+}