vectify 2.0.1 → 2.0.3

package/README.md

@@ -20,6 +20,7 @@ English | [简体中文](./README.zh-CN.md)
 - [Configuration](#configuration)
   - [Basic Options](#basic-options)
   - [Generation Options](#generation-options)
+  - [Auto Formatting](#auto-formatting)
   - [Watch Mode](#watch-mode)
   - [SVGO Configuration](#svgo-configuration)
   - [Lifecycle Hooks](#lifecycle-hooks)
@@ -185,6 +186,7 @@ All available options for `defineConfig()` are documented in the tables below.
 | `prefix` | `string` | `''` | ❌ | Prefix added to all component names. Useful for namespacing. | `prefix: 'Icon'` → `IconArrowRight` |
 | `suffix` | `string` | `''` | ❌ | Suffix added to all component names. | `suffix: 'Icon'` → `ArrowRightIcon` |
 | `transform` | `(name: string) => string` | - | ❌ | Custom function to transform SVG filename to component name. Overrides default PascalCase conversion and prefix/suffix. | `transform: (n) => 'X' + n` |
+| `format` | `boolean` \| `'prettier'` \| `'eslint'` \| `'biome'` \| `FormatConfig` | `false` | ❌ | Auto-format generated files after generation. See [Auto Formatting](#auto-formatting) for details. | `format: true` |
 
 #### `generateOptions` Object
 
@@ -195,6 +197,71 @@ All available options for `defineConfig()` are documented in the tables below.
 | `preview` | `boolean` | `false` | Generate interactive `preview.html` for browsing all icons locally. Useful for design review. | `preview: true` |
 | `cleanOutput` | `boolean` | `false` | Remove orphaned component files that no longer have corresponding SVG files. Helps keep output directory clean. | `cleanOutput: true` |
 
+#### Auto Formatting
+
+Vectify can automatically format generated files using your project's formatter. This ensures generated code matches your project's code style.
+
+**Quick Start:**
+
+```typescript
+export default defineConfig({
+  framework: 'react',
+  input: './icons',
+  output: './src/icons',
+  format: true, // Auto-detect and use project formatter
+})
+```
+
+**Format Options:**
+
+| Value | Description |
+|-------|-------------|
+| `false` | Disable formatting (default) |
+| `true` | Auto-detect formatter (biome > prettier > eslint) |
+| `'prettier'` | Use Prettier |
+| `'eslint'` | Use ESLint --fix |
+| `'biome'` | Use Biome |
+| `{ tool, args }` | Full configuration object |
+
+**Auto-Detection Priority:**
+
+When `format: true`, Vectify looks for config files in this order:
+1. `biome.json` / `biome.jsonc` → Uses Biome
+2. `.prettierrc*` / `prettier.config.*` → Uses Prettier
+3. `eslint.config.*` / `.eslintrc*` → Uses ESLint
+
+**Full Configuration:**
+
+```typescript
+export default defineConfig({
+  format: {
+    tool: 'prettier',      // 'auto' | 'prettier' | 'eslint' | 'biome'
+    args: '--single-quote', // Additional CLI arguments
+  },
+})
+```
+
+**Examples:**
+
+```typescript
+// Auto-detect formatter
+format: true
+
+// Use specific formatter
+format: 'prettier'
+format: 'eslint'
+format: 'biome'
+
+// With custom arguments
+format: {
+  tool: 'prettier',
+  args: '--tab-width 4',
+}
+
+// Disable formatting
+format: false
+```
+
 #### `watch` Object
 
 | Parameter | Type | Default | Description | Example |

package/README.zh-CN.md

@@ -20,6 +20,7 @@
 - [配置选项](#配置选项)
   - [基础配置](#基础配置)
   - [生成选项](#生成选项)
+  - [自动格式化](#自动格式化)
   - [监听模式](#监听模式)
   - [SVGO 配置](#svgo-配置)
   - [生命周期钩子](#生命周期钩子)
@@ -185,6 +186,7 @@ npx vectify watch [选项]
 | `prefix` | `string` | `''` | ❌ | 添加到所有组件名称前的前缀。用于命名空间 | `prefix: 'Icon'` → `IconArrowRight` |
 | `suffix` | `string` | `''` | ❌ | 添加到所有组件名称后的后缀 | `suffix: 'Icon'` → `ArrowRightIcon` |
 | `transform` | `(name: string) => string` | - | ❌ | 自定义函数，将 SVG 文件名转换为组件名。覆盖默认的 PascalCase 转换和 prefix/suffix | `transform: (n) => 'X' + n` |
+| `format` | `boolean` \| `'prettier'` \| `'eslint'` \| `'biome'` \| `FormatConfig` | `false` | ❌ | 生成后自动格式化文件。详见 [自动格式化](#自动格式化) | `format: true` |
 
 #### `generateOptions` 对象
 
@@ -195,6 +197,71 @@ npx vectify watch [选项]
 | `preview` | `boolean` | `false` | 生成交互式 `preview.html` 用于本地浏览所有图标。适合设计审查 | `preview: true` |
 | `cleanOutput` | `boolean` | `false` | 移除不再有对应 SVG 文件的孤立组件。帮助保持输出目录整洁 | `cleanOutput: true` |
 
+#### 自动格式化
+
+Vectify 可以使用项目中的格式化工具自动格式化生成的文件。确保生成的代码符合项目的代码风格。
+
+**快速开始：**
+
+```typescript
+export default defineConfig({
+  framework: 'react',
+  input: './icons',
+  output: './src/icons',
+  format: true, // 自动检测并使用项目格式化工具
+})
+```
+
+**格式化选项：**
+
+| 值 | 说明 |
+|----|------|
+| `false` | 禁用格式化（默认） |
+| `true` | 自动检测格式化工具（biome > prettier > eslint） |
+| `'prettier'` | 使用 Prettier |
+| `'eslint'` | 使用 ESLint --fix |
+| `'biome'` | 使用 Biome |
+| `{ tool, args }` | 完整配置对象 |
+
+**自动检测优先级：**
+
+当 `format: true` 时，Vectify 按以下顺序查找配置文件：
+1. `biome.json` / `biome.jsonc` → 使用 Biome
+2. `.prettierrc*` / `prettier.config.*` → 使用 Prettier
+3. `eslint.config.*` / `.eslintrc*` → 使用 ESLint
+
+**完整配置：**
+
+```typescript
+export default defineConfig({
+  format: {
+    tool: 'prettier',       // 'auto' | 'prettier' | 'eslint' | 'biome'
+    args: '--single-quote', // 额外的 CLI 参数
+  },
+})
+```
+
+**示例：**
+
+```typescript
+// 自动检测格式化工具
+format: true
+
+// 使用指定的格式化工具
+format: 'prettier'
+format: 'eslint'
+format: 'biome'
+
+// 带自定义参数
+format: {
+  tool: 'prettier',
+  args: '--tab-width 4',
+}
+
+// 禁用格式化
+format: false
+```
+
 #### `watch` 对象
 
 | 参数 | 类型 | 默认值 | 说明 | 示例 |

package/dist/{chunk-F3AM6WVC.mjs → chunk-BKDGWTE6.mjs}

@@ -135,6 +135,10 @@ function getVueTemplatePath(typescript, type) {
   const suffix = typescript ? "ts" : "js";
   return `vue/${type}.${suffix}.vue.hbs`;
 }
+function getVue2TemplatePath(typescript, type) {
+  const suffix = typescript ? "ts" : "js";
+  return `vue2/${type}.${suffix}.vue.hbs`;
+}
 function getSvelteTemplatePath(typescript, type) {
   const suffix = typescript ? "ts" : "js";
   return `svelte/${type}.${suffix}.svelte.hbs`;
@@ -324,6 +328,21 @@ function generateVueIcon(typescript) {
   return renderTemplate(templatePath, { typescript });
 }
 
+// src/generators/vue2.ts
+function generateVue2Component(componentName, iconNode, typescript) {
+  const formattedNodes = iconNode.map((node) => formatIconNode(node, 4)).join(",\n");
+  const templatePath = getVue2TemplatePath(typescript, "component");
+  return renderTemplate(templatePath, {
+    typescript,
+    componentName,
+    formattedNodes
+  });
+}
+function generateVue2Icon(typescript) {
+  const templatePath = getVue2TemplatePath(typescript, "icon");
+  return renderTemplate(templatePath, { typescript });
+}
+
 // src/generators/framework-strategy.ts
 var ReactStrategy = class {
   constructor() {
@@ -365,6 +384,26 @@ var VueStrategy = class {
     };
   }
 };
+var Vue2Strategy = class {
+  constructor() {
+    this.name = "vue2";
+    this.getComponentExtension = (_typescript) => {
+      return "vue";
+    };
+    this.getIndexExtension = (typescript) => {
+      return typescript ? "ts" : "js";
+    };
+    this.generateComponent = (componentName, iconNode, typescript) => {
+      return generateVue2Component(componentName, iconNode, typescript);
+    };
+    this.generateBaseComponent = (typescript) => {
+      return {
+        code: generateVue2Icon(typescript),
+        fileName: "Icon.vue"
+      };
+    };
+  }
+};
 var SvelteStrategy = class {
   constructor() {
     this.name = "svelte";
@@ -509,6 +548,7 @@ var FrameworkRegistry = class {
     this.strategies = /* @__PURE__ */ new Map();
     this.register(new ReactStrategy());
     this.register(new VueStrategy());
+    this.register(new Vue2Strategy());
     this.register(new SvelteStrategy());
     this.register(new SolidStrategy());
     this.register(new PreactStrategy());
@@ -639,7 +679,7 @@ async function findConfig() {
 }
 
 // src/generators/index.ts
-import path3 from "path";
+import path4 from "path";
 
 // src/parsers/optimizer.ts
 import { optimize } from "svgo";
@@ -673,6 +713,100 @@ async function optimizeSvg(svgContent, config) {
   }
 }
 
+// src/utils/formatter.ts
+import { exec } from "child_process";
+import path3 from "path";
+import process3 from "process";
+import { promisify } from "util";
+var execAsync = promisify(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 = process3.cwd();
+  const priority = ["biome", "prettier", "eslint"];
+  for (const tool of priority) {
+    const patterns = FORMATTER_PATTERNS[tool];
+    for (const pattern of patterns) {
+      const configPath = path3.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: process3.cwd() });
+    return { success: true, tool };
+  } catch (error) {
+    return {
+      success: false,
+      tool,
+      error: `Format failed with ${tool}: ${error.message}`
+    };
+  }
+}
+
 // src/generators/index.ts
 async function generateIcons(config, dryRun = false) {
   const stats = {
@@ -714,6 +848,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);
     }
@@ -724,7 +866,7 @@ async function generateIcons(config, dryRun = false) {
 }
 async function generateIconComponent(svgFile, config, dryRun = false) {
   let svgContent = await readFile(svgFile);
-  const fileName = path3.basename(svgFile);
+  const fileName = path4.basename(svgFile);
   if (config.hooks?.beforeParse) {
     svgContent = await config.hooks.beforeParse(svgContent, fileName);
   }
@@ -748,7 +890,7 @@ async function generateIconComponent(svgFile, config, dryRun = false) {
     code = await config.hooks.afterGenerate(code, componentName);
   }
   const fileExt = strategy.getComponentExtension(typescript);
-  const outputPath = path3.join(config.output, `${componentName}.${fileExt}`);
+  const outputPath = path4.join(config.output, `${componentName}.${fileExt}`);
   if (dryRun) {
     console.log(`  ${componentName}.${fileExt}`);
   } else {
@@ -759,7 +901,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 = path3.join(config.output, fileName);
+  const outputPath = path4.join(config.output, fileName);
   if (dryRun) {
     console.log(`  ${fileName}`);
   } else {
@@ -772,7 +914,7 @@ async function generateIndexFile(svgFiles, config, dryRun = false) {
   const ext = strategy.getIndexExtension(typescript);
   const usesDefaultExport = ["vue", "svelte", "react", "preact"].includes(config.framework);
   const exports = svgFiles.map((svgFile) => {
-    const fileName = path3.basename(svgFile);
+    const fileName = path4.basename(svgFile);
     const componentName = getComponentName(
       fileName,
       config.prefix,
@@ -785,7 +927,7 @@ async function generateIndexFile(svgFiles, config, dryRun = false) {
       return `export { ${componentName} } from './${componentName}'`;
     }
   }).join("\n");
-  const indexPath = path3.join(config.output, `index.${ext}`);
+  const indexPath = path4.join(config.output, `index.${ext}`);
   if (dryRun) {
     console.log(`  index.${ext}`);
   } else {
@@ -795,7 +937,7 @@ async function generateIndexFile(svgFiles, config, dryRun = false) {
 }
 async function generatePreviewHtml(svgFiles, config) {
   const componentNames = svgFiles.map((svgFile) => {
-    const fileName = path3.basename(svgFile);
+    const fileName = path4.basename(svgFile);
     return getComponentName(
       fileName,
       config.prefix,
@@ -967,7 +1109,7 @@ async function generatePreviewHtml(svgFiles, config) {
   </script>
 </body>
 </html>`;
-  const previewPath = path3.join(config.output, "preview.html");
+  const previewPath = path4.join(config.output, "preview.html");
   await writeFile(previewPath, html);
 }
 async function cleanOutputDirectory(svgFiles, config) {
@@ -976,7 +1118,7 @@ async function cleanOutputDirectory(svgFiles, config) {
   const fileExt = strategy.getComponentExtension(config.typescript ?? true);
   const expectedComponents = new Set(
     svgFiles.map((svgFile) => {
-      const fileName = path3.basename(svgFile, ".svg");
+      const fileName = path4.basename(svgFile, ".svg");
       const componentName = getComponentName(
         fileName,
         config.prefix,
@@ -1003,7 +1145,7 @@ async function cleanOutputDirectory(svgFiles, config) {
         continue;
       }
       if (!expectedComponents.has(file)) {
-        const filePath = path3.join(config.output, file);
+        const filePath = path4.join(config.output, file);
         await unlink(filePath);
         console.log(`Deleted orphaned component: ${file}`);
       }
@@ -1072,15 +1214,15 @@ ${chalk.bold("Output:")} ${chalk.cyan(config.output)}`);
 }
 
 // src/commands/init.ts
-import path4 from "path";
-import process3 from "process";
+import path5 from "path";
+import process4 from "process";
 import chalk2 from "chalk";
 import inquirer from "inquirer";
 import ora2 from "ora";
 async function init(options = {}) {
   try {
     const projectRoot = await findProjectRoot();
-    const currentDir = process3.cwd();
+    const currentDir = process4.cwd();
     if (currentDir !== projectRoot) {
       console.log(chalk2.yellow(`
 Note: Project root detected at ${chalk2.cyan(projectRoot)}`));
@@ -1101,8 +1243,8 @@ Note: Project root detected at ${chalk2.cyan(projectRoot)}`));
         }
       }
     ]);
-    const configPath = path4.resolve(projectRoot, pathAnswers.configPath);
-    const configDir = path4.dirname(configPath);
+    const configPath = path5.resolve(projectRoot, pathAnswers.configPath);
+    const configDir = path5.dirname(configPath);
     if (!options.force && await fileExists(configPath)) {
       const { overwrite } = await inquirer.prompt([
         {
@@ -1129,6 +1271,16 @@ Note: Project root detected at ${chalk2.cyan(projectRoot)}`));
         message: "Which framework are you using?",
         choices: frameworkChoices
       },
+      {
+        type: "list",
+        name: "vueVersion",
+        message: "Which Vue version?",
+        choices: [
+          { name: "Vue 3", value: "vue" },
+          { name: "Vue 2", value: "vue2" }
+        ],
+        when: (answers2) => answers2.framework === "vue"
+      },
       {
         type: "input",
         name: "input",
@@ -1166,15 +1318,16 @@ Note: Project root detected at ${chalk2.cyan(projectRoot)}`));
         default: ""
       }
     ]);
-    const inputPath = path4.resolve(projectRoot, answers.input);
-    const outputPath = path4.resolve(projectRoot, answers.output);
+    const inputPath = path5.resolve(projectRoot, answers.input);
+    const outputPath = path5.resolve(projectRoot, answers.output);
     const spinner = ora2("Setting up directories...").start();
     await ensureDir(inputPath);
     spinner.text = `Created input directory: ${chalk2.cyan(answers.input)}`;
     await ensureDir(outputPath);
     spinner.succeed(`Created output directory: ${chalk2.cyan(answers.output)}`);
-    const relativeConfigDir = path4.relative(configDir, projectRoot) || ".";
-    const configContent = generateConfigContent(answers, relativeConfigDir);
+    const relativeConfigDir = path5.relative(configDir, projectRoot) || ".";
+    const finalFramework = answers.vueVersion || answers.framework;
+    const configContent = generateConfigContent({ ...answers, framework: finalFramework }, relativeConfigDir);
     spinner.start("Creating config file...");
     await writeFile(configPath, configContent);
     spinner.succeed(`Config file created at ${chalk2.green(configPath)}`);
@@ -1216,7 +1369,7 @@ export default defineConfig({
 }
 
 // src/commands/watch.ts
-import path5 from "path";
+import path6 from "path";
 import chalk3 from "chalk";
 import chokidar from "chokidar";
 import ora3 from "ora";
@@ -1238,7 +1391,7 @@ async function watch(options = {}) {
     spinner.start("Generating icon components...");
     const initialStats = await generateIcons(config);
     spinner.succeed(`Generated ${chalk3.green(initialStats.success)} icon components`);
-    const watchPath = path5.join(config.input, "**/*.svg");
+    const watchPath = path6.join(config.input, "**/*.svg");
     const debounce = config.watch?.debounce ?? 300;
     const ignore = config.watch?.ignore ?? ["**/node_modules/**", "**/.git/**"];
     console.log(chalk3.bold("\nWatching for changes..."));
@@ -1256,7 +1409,7 @@ async function watch(options = {}) {
     }).on("change", (filePath) => {
       handleChange("changed", filePath, config, debounce, debounceTimer);
     }).on("unlink", (filePath) => {
-      console.log(chalk3.yellow(`SVG file removed: ${path5.basename(filePath)}`));
+      console.log(chalk3.yellow(`SVG file removed: ${path6.basename(filePath)}`));
       handleChange("removed", filePath, config, debounce, debounceTimer);
     }).on("error", (error) => {
       console.error(chalk3.red(`Watcher error: ${error.message}`));
@@ -1275,7 +1428,7 @@ ${chalk3.yellow("Stopping watch mode...")}`);
   }
 }
 function handleChange(event, filePath, config, debounce, timer) {
-  const fileName = path5.basename(filePath);
+  const fileName = path6.basename(filePath);
   if (timer) {
     clearTimeout(timer);
   }