react-dep-analyzer - npm Package Compare versions

Comparing version 1.0.8 to 1.0.9

dist/index.js

@@ -222,5 +222,15 @@ // src/index.ts
   }
-  generateComponentMarkdown(componentName, data, outputDir) {
-    const componentDir = path.dirname(data.file);
-    const targetDir = path.join(outputDir, componentDir);
+  generateComponentMarkdown(componentName, data) {
+    const componentPathConfig = this.componentPaths.find(
+      (config) => data.file.startsWith(path.relative(this.projectRoot, config.path))
+    );
+    if (!componentPathConfig) {
+      console.warn(`\u8B66\u544A: \u627E\u4E0D\u5230\u5143\u4EF6 ${componentName} \u7684\u8DEF\u5F91\u914D\u7F6E`);
+      return "";
+    }
+    const targetDir = path.join(
+      this.projectRoot,
+      componentPathConfig.path,
+      path.dirname(path.relative(componentPathConfig.path, data.file))
+    );
     const componentFileName = `${componentName}.md`;
@@ -305,3 +315,3 @@ const componentFilePath = path.join(targetDir, componentFileName);
     const componentFiles = Object.entries(this.targetUsage).map(([componentName, data]) => {
-      const componentFilePath = this.generateComponentMarkdown(componentName, data, outputDir);
+      const componentFilePath = this.generateComponentMarkdown(componentName, data);
       const relativeFilePath = path.relative(outputDir, componentFilePath);
@@ -308,0 +318,0 @@ return {

package.json

 {
   "name": "react-dep-analyzer",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "分析 React 元件依賴關係和使用情況的工具",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

@@ -45,2 +45,13 @@ # React Dependency Analyzer
   pagesPath: 'src/pages',
+  componentPaths: [
+    { 
+      path: 'src/components',
+      importPrefix: '@/components'
+    },
+    { 
+      path: 'src/elements',
+      importPrefix: '@/elements'
+    }
+  ],
+  outputDir: 'tools/componentUsageAnalyzer'
 });
@@ -69,133 +80,34 @@
 
-### 4. 配置 package.json
+## 輸出結果
 
-如果你的專案使用了 `"type": "module"`，可以直接執行上述指令。如果沒有，需要在 `package.json` 中加入：
+分析器會生成三種格式的報告：
 
-```json
-{
-  "type": "module"
-}
-```
+### 1. Markdown 文檔
+元件文檔會直接生成在對應元件的目錄中，保持與原始程式碼相同的結構：
 
-或者在執行指令時加入 `--experimental-modules` 標記：
-
-```json
-{
-  "scripts": {
-    "analyze": "node --experimental-modules scripts/analyze.mjs"
-  }
-}
 ```
-
-## 基本使用
-
-```typescript
-import { createAnalyzer } from 'react-dep-analyzer';
-
-// 使用預設配置建立分析器
-const analyzer = createAnalyzer();
-
-// 執行分析
-analyzer.run();
-
-// 生成 Markdown 文檔（包含索引和個別元件文檔）
-analyzer.generateMarkDown();
-
-// 生成完整依賴樹圖
-analyzer.generateDependencyTree();
-
-// 生成 JSON 格式報告
-analyzer.generateJson();
+src/
+├── components/
+│   ├── Button/
+│   │   ├── index.tsx          # 原始元件
+│   │   └── Button.md         # 元件文檔
+│   └── Card/
+│       ├── index.tsx
+│       └── Card.md
+└── elements/
+    └── Icon/
+        ├── index.tsx
+        └── Icon.md
 ```
 
-## 配置選項
-
-你可以透過傳入配置物件來自定義分析器的行為：
-
-```typescript
-interface ComponentPathConfig {
-  path: string;          // 元件目錄路徑
-  importPrefix: string;  // import 語句的前綴
-}
-
-const analyzer = createAnalyzer({
-  name: 'Component',              // 分析報告的標題名稱
-  targetPath: 'src/components',   // 要分析的元件目錄
-  pagesPath: 'src/pages',        // 頁面檔案目錄
-  fileExtensions: ['.tsx'],      // 要分析的檔案副檔名
-  componentPaths: [              // 元件搜尋路徑配置
-    { 
-      path: 'src/components',    
-      importPrefix: '@/components'
-    },
-    { 
-      path: 'src/elements',
-      importPrefix: '@/elements'
-    }
-  ],
-  outputDir: 'tools/componentUsageAnalyzer', // 輸出目錄
-});
+索引文件和其他報告會生成在配置的 `outputDir` 中：
 ```
-
-### 預設配置
-
-工具內建以下預設配置：
-
-```typescript
-const defaultConfig = {
-  name: 'Component',
-  targetPath: 'src/components',
-  pagesPath: 'src/pages',
-  fileExtensions: ['.tsx'],
-  componentPaths: [
-    { 
-      path: 'src/components',
-      importPrefix: '@/components'
-    },
-    { 
-      path: 'src/elements',
-      importPrefix: '@/elements'
-    }
-  ],
-  outputDir: 'tools/componentUsageAnalyzer',
-};
+tools/componentUsageAnalyzer/
+├── index.md                    # 元件索引
+├── component-tree.md          # 依賴樹圖
+└── component-dependencies.json # JSON 格式報告
 ```
 
-## 輸出範例
-
-### Markdown 文檔
-
-工具會在指定的輸出目錄中生成以下檔案結構，保持與原始元件相同的目錄結構：
-
-```
-output-dir/
-  ├── index.md                              # 元件索引
-  ├── src/
-  │   ├── components/
-  │   │   ├── Button/
-  │   │   │   └── Button.md                # Button 元件文檔
-  │   │   └── Card/
-  │   │       └── Card.md                  # Card 元件文檔
-  │   └── elements/
-  │       └── Icon/
-  │           └── Icon.md                  # Icon 元件文檔
-  └── ...
-```
-
-#### 索引文件 (index.md)
+#### 元件文檔範例 (Button.md)
 ```markdown
-# Component Dependencies and Usage
-
-## Components
-
-- [Button](./src/components/Button/Button.md)
-  - Dependencies: 1
-  - Used in Pages: 2
-- [Card](./src/components/Card/Card.md)
-  - Dependencies: 1
-  - Used in Pages: 1
-```
-
-#### 元件文檔 (例如：src/components/Button/Button.md)
-```markdown
 # Button
@@ -209,7 +121,5 @@ > File Path: `src/components/Button/index.tsx`
     Icon["Icon"]
-    page_home["home"]
-    page_about["about"]
     Button --> Icon
-    Button --> page_home
-    Button --> page_about
+    Button --> page_home["home"]
+    Button --> page_about["about"]
 ```
@@ -227,46 +137,8 @@
 
-### 依賴樹圖 (tree.md)
+### 2. 依賴樹圖
+生成包含所有元件關係的完整依賴樹圖。
 
-生成包含所有元件關係的完整依賴樹圖：
+### 3. JSON 報告
+提供結構化的依賴關係資料，方便程式處理。
 
-```mermaid
-flowchart TD
-    Button["Button"]
-    Card["Card"]
-    Icon["Icon"]
-    Button --> Icon
-    Card --> Button
-    Button --> page_home["home"]
-    Button --> page_about["about"]
-    Card --> page_products["products"]
-```
-
-### JSON 報告 (dependencies.json)
-
-```json
-{
-  "name": "Component",
-  "analyzedAt": "2024-01-01T00:00:00.000Z",
-  "components": [
-    {
-      "name": "Button",
-      "file": "src/components/Button.tsx",
-      "dependencies": {
-        "elements": [
-          {
-            "path": "@/elements/Icon",
-            "file": "src/elements/Icon.tsx",
-            "imports": ["Icon"]
-          }
-        ]
-      },
-      "usedInPages": [
-        "src/pages/home.tsx",
-        "src/pages/about.tsx"
-      ]
-    }
-  ]
-}
-```
-
 ## 注意事項
@@ -273,0 +145,0 @@

src/index.ts

@@ -320,11 +320,21 @@ import fs from 'fs';
     componentName: string, 
-    data: ComponentUsage,
-    outputDir: string
+    data: ComponentUsage
   ): string {
-    // 從元件檔案路徑獲取目錄結構
-    const componentDir = path.dirname(data.file);
+    // 找到對應的 componentPath 配置
+    const componentPathConfig = this.componentPaths.find(config => 
+      data.file.startsWith(path.relative(this.projectRoot, config.path))
+    );
+
+    if (!componentPathConfig) {
+      console.warn(`警告: 找不到元件 ${componentName} 的路徑配置`);
+      return '';
+    }
+
+    // 使用配置中的路徑
+    const targetDir = path.join(
+      this.projectRoot,
+      componentPathConfig.path,
+      path.dirname(path.relative(componentPathConfig.path, data.file))
+    );
     
-    // 在輸出目錄中創建相同的目錄結構
-    const targetDir = path.join(outputDir, componentDir);
-    
     // 使用原始元件名稱（保持大小寫）作為檔案名
@@ -431,3 +441,3 @@ const componentFileName = `${componentName}.md`;
       // 生成元件文檔並獲取相對路徑
-      const componentFilePath = this.generateComponentMarkdown(componentName, data, outputDir);
+      const componentFilePath = this.generateComponentMarkdown(componentName, data);
       const relativeFilePath = path.relative(outputDir, componentFilePath);
@@ -434,0 +444,0 @@

No alert changes

Improved metrics

Lines of code

1413

increased by2.1%

Worsened metrics

Total package byte prevSize

63190

decreased by-2.46%

Number of lines in readme file

154

decreased by-45.39%

No dependency changes