hermex 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +81 -58
- package/dist/cli.js +122 -159
- package/dist/cli.js.map +1 -1
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -2,8 +2,6 @@
|
|
|
2
2
|
|
|
3
3
|
A powerful SWC-based tool for analyzing React component usage patterns across codebases. Understand how UI library components are used, track dependencies with exact versions, and generate comprehensive reports.
|
|
4
4
|
|
|
5
|
-
Made with AI 🤖
|
|
6
|
-
|
|
7
5
|
## 🚀 Quick Start
|
|
8
6
|
|
|
9
7
|
```bash
|
|
@@ -20,22 +18,21 @@ npx hermex scan "src/**/*.tsx"
|
|
|
20
18
|
```
|
|
21
19
|
|
|
22
20
|
## 📦 Requirements
|
|
23
|
-
- Node.js
|
|
21
|
+
- Node.js 20+
|
|
22
|
+
<!--- Node.js @cli_build_node+ -->
|
|
24
23
|
|
|
25
24
|
## 📊 Key Features
|
|
26
25
|
|
|
27
26
|
- **Fast SWC-based Parsing**: Lightning-fast static analysis using SWC's Rust-based parser
|
|
28
|
-
- **Pattern Detection**: Identifies
|
|
27
|
+
- **Pattern Detection**: Identifies 10+ React usage patterns including:
|
|
29
28
|
- Direct imports and JSX usage
|
|
30
29
|
- Variable assignments and destructuring
|
|
31
30
|
- Conditional usage and object mappings
|
|
32
|
-
-
|
|
33
|
-
-
|
|
34
|
-
- Portal usage and context integration
|
|
31
|
+
- Namespace imports and aliased imports
|
|
32
|
+
- Portal usage
|
|
35
33
|
- **Version Tracking**: Components reported with exact package versions from lockfiles
|
|
36
34
|
- **Multi-Lockfile Support**: Parses package-lock.json, yarn.lock, and pnpm-lock.yaml
|
|
37
|
-
- **Flexible Output**:
|
|
38
|
-
- **Complexity Scoring**: Categorizes usage patterns by complexity
|
|
35
|
+
- **Flexible Output**: Table and chart visualization formats
|
|
39
36
|
- **Zero Configuration**: Works out of the box with sensible defaults
|
|
40
37
|
|
|
41
38
|
## 📋 Commands
|
|
@@ -59,12 +56,17 @@ hermex scan [pattern] [options]
|
|
|
59
56
|
| Option | Description | Values | Default |
|
|
60
57
|
|--------|-------------|--------|---------|
|
|
61
58
|
| `--ignore <pattern>` | Glob pattern for files to ignore | Any glob pattern | `**/node_modules/**`, `**/dist/**`, `**/build/**` |
|
|
62
|
-
| `--
|
|
59
|
+
| `--allow-packages <pattern>` | Glob pattern for packages to scan | Any glob pattern | `ALL` |
|
|
60
|
+
| `--ignore-packages <pattern>` | Glob pattern for packages to ignore | Any glob pattern | None |
|
|
63
61
|
| `--summary [mode]` | Show summary statistics | `log`, `false` | `log` |
|
|
64
|
-
| `--
|
|
65
|
-
| `--
|
|
66
|
-
| `--components
|
|
62
|
+
| `--no-summary` | Do not show summary stats | - | - |
|
|
63
|
+
| `--details` | Show detailed pattern counts | - | `false` |
|
|
64
|
+
| `--components [mode]` | Show components table/chart | `table`, `chart` | `table` |
|
|
65
|
+
| `--no-components` | Do not show components | - | - |
|
|
66
|
+
| `--packages [mode]` | Show packages table/chart | `table`, `chart` | `table` |
|
|
67
|
+
| `--no-packages` | Do not show packages | - | - |
|
|
67
68
|
| `--patterns [mode]` | Show patterns table/chart | `table`, `chart` | `table` |
|
|
69
|
+
| `--no-patterns` | Do not show patterns | - | - |
|
|
68
70
|
|
|
69
71
|
#### Examples
|
|
70
72
|
|
|
@@ -75,49 +77,59 @@ hermex scan
|
|
|
75
77
|
# Scan specific directory
|
|
76
78
|
hermex scan "src/**/*.tsx"
|
|
77
79
|
|
|
78
|
-
#
|
|
79
|
-
hermex scan
|
|
80
|
-
|
|
81
|
-
# Show only summary and top components
|
|
82
|
-
hermex scan "src/**/*.tsx" --components-usage false --patterns false
|
|
80
|
+
# Show only summary and components
|
|
81
|
+
hermex scan --no-patterns --no-packages
|
|
83
82
|
|
|
84
83
|
# Chart visualization
|
|
85
|
-
hermex scan
|
|
84
|
+
hermex scan --components chart --patterns chart
|
|
86
85
|
|
|
87
|
-
#
|
|
88
|
-
hermex scan
|
|
86
|
+
# Minimal output
|
|
87
|
+
hermex scan --no-summary --no-patterns
|
|
89
88
|
```
|
|
90
89
|
|
|
91
90
|
## 🎯 Example Output
|
|
92
91
|
|
|
93
|
-
###
|
|
92
|
+
### Lockfile Detection
|
|
94
93
|
```
|
|
95
|
-
|
|
96
|
-
[SUMMARY] Files analyzed: 42
|
|
97
|
-
[SUMMARY] Total imports: 156
|
|
98
|
-
[SUMMARY] Total components: 38
|
|
94
|
+
✔ 📦 Found pnpm lockfile (supports: v5, v6, v9) - 156 packages
|
|
99
95
|
```
|
|
100
96
|
|
|
101
|
-
###
|
|
97
|
+
### File Analysis
|
|
98
|
+
```
|
|
99
|
+
✔ Found 42 files
|
|
100
|
+
✔ Analysis complete! Analyzed 42 files
|
|
102
101
|
```
|
|
103
|
-
🏆 Top Components
|
|
104
102
|
|
|
105
|
-
|
|
106
|
-
[TOP-COMPONENTS] 🥈 2. Card from @design-system/card: 32 uses
|
|
107
|
-
[TOP-COMPONENTS] 🥉 3. Input from @design-system/input: 28 uses
|
|
103
|
+
### Packages Table
|
|
108
104
|
```
|
|
105
|
+
📦 Packages
|
|
106
|
+
|
|
107
|
+
┌───────────────────────────┬─────────┬────────────┬───────┬────────────┐
|
|
108
|
+
│ Package │ Version │ Components │ Usage │ Percentage │
|
|
109
|
+
├───────────────────────────┼─────────┼────────────┼───────┼────────────┤
|
|
110
|
+
│ @design-system/foundation │ 2.5.3 │ 9 │ 23 │ 88.5% │
|
|
111
|
+
├───────────────────────────┼─────────┼────────────┼───────┼────────────┤
|
|
112
|
+
│ react │ 18.3.1 │ 1 │ 3 │ 11.5% │
|
|
113
|
+
└───────────────────────────┴─────────┴────────────┴───────┴────────────┘
|
|
109
114
|
|
|
110
|
-
|
|
115
|
+
Total: 2 packages | 10 unique components | 26 total usages
|
|
111
116
|
```
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
│
|
|
119
|
-
|
|
120
|
-
|
|
117
|
+
|
|
118
|
+
### Components Table
|
|
119
|
+
```
|
|
120
|
+
⚛️ Components
|
|
121
|
+
|
|
122
|
+
┌────────────┬───────────────────────────┬───────┐
|
|
123
|
+
│ Component │ Package │ Count │
|
|
124
|
+
├────────────┼───────────────────────────┼───────┤
|
|
125
|
+
│ Button │ @design-system/foundation │ 5 │
|
|
126
|
+
├────────────┼───────────────────────────┼───────┤
|
|
127
|
+
│ Card │ @design-system/foundation │ 5 │
|
|
128
|
+
├────────────┼───────────────────────────┼───────┤
|
|
129
|
+
│ Input │ @design-system/foundation │ 4 │
|
|
130
|
+
├────────────┼───────────────────────────┼───────┤
|
|
131
|
+
│ Typography │ @design-system/foundation │ 4 │
|
|
132
|
+
└────────────┴───────────────────────────┴───────┘
|
|
121
133
|
```
|
|
122
134
|
|
|
123
135
|
### Code Patterns
|
|
@@ -128,13 +140,38 @@ hermex scan "src/**/*.tsx" --details --verbose
|
|
|
128
140
|
│ Pattern │ Count │
|
|
129
141
|
├──────────────────────┼───────┤
|
|
130
142
|
│ JSX Usage │ 145 │
|
|
143
|
+
├──────────────────────┼───────┤
|
|
131
144
|
│ Named Imports │ 89 │
|
|
145
|
+
├──────────────────────┼───────┤
|
|
132
146
|
│ Default Imports │ 67 │
|
|
147
|
+
├──────────────────────┼───────┤
|
|
133
148
|
│ Variable Assignments │ 23 │
|
|
149
|
+
├──────────────────────┼───────┤
|
|
134
150
|
│ Object Mappings │ 15 │
|
|
151
|
+
├──────────────────────┼───────┤
|
|
135
152
|
│ Conditional Usage │ 12 │
|
|
136
|
-
│ Lazy Loading │ 8 │
|
|
137
153
|
└──────────────────────┴───────┘
|
|
154
|
+
|
|
155
|
+
Total: 146 patterns detected
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
### Summary Statistics
|
|
159
|
+
```
|
|
160
|
+
📊 Summary
|
|
161
|
+
|
|
162
|
+
┌─────────────────────┬───────┐
|
|
163
|
+
│ Metric │ Count │
|
|
164
|
+
├─────────────────────┼───────┤
|
|
165
|
+
│ Files Analyzed │ 8 │
|
|
166
|
+
├─────────────────────┼───────┤
|
|
167
|
+
│ External Packages │ 2 │
|
|
168
|
+
├─────────────────────┼───────┤
|
|
169
|
+
│ External Components │ 10 │
|
|
170
|
+
├─────────────────────┼───────┤
|
|
171
|
+
│ Total Usages │ 26 │
|
|
172
|
+
└─────────────────────┴───────┘
|
|
173
|
+
|
|
174
|
+
Analysis completed successfully in 0.1s
|
|
138
175
|
```
|
|
139
176
|
|
|
140
177
|
## 📚 Documentation
|
|
@@ -155,22 +192,8 @@ hermex scan "src/**/*.tsx" --details --verbose
|
|
|
155
192
|
|
|
156
193
|
## 🔍 Pattern Detection
|
|
157
194
|
|
|
158
|
-
Hermex detects
|
|
159
|
-
|
|
160
|
-
| Pattern | Complexity | Examples |
|
|
161
|
-
|---------|------------|----------|
|
|
162
|
-
| Direct Import & Usage | 1/10 | `import Button from '@lib/button'` |
|
|
163
|
-
| Named Import with Alias | 2/10 | `import { Button as Btn } from '@lib'` |
|
|
164
|
-
| Variable Assignment | 3/10 | `const MyButton = Button` |
|
|
165
|
-
| Destructuring Usage | 4/10 | `const { Button } = Foundation` |
|
|
166
|
-
| Object Mapping | 5/10 | `const map = { btn: Button }` |
|
|
167
|
-
| Lazy Loading | 6/10 | `lazy(() => import('@lib/button'))` |
|
|
168
|
-
| Dynamic Import | 7/10 | `await import('@lib/button')` |
|
|
169
|
-
| HOC Wrapping | 7/10 | `withWrapper(Button)` |
|
|
170
|
-
| Context Integration | 7/10 | `useContext(ComponentContext)` |
|
|
171
|
-
| Portal Usage | 8/10 | `createPortal(<Button />)` |
|
|
172
|
-
|
|
173
|
-
See the [Patterns Guide](./docs/PATTERNS.md) for complete details.
|
|
195
|
+
Hermex detects 10+ React component usage patterns.
|
|
196
|
+
See the [Patterns](./docs/PATTERNS.md) for complete details.
|
|
174
197
|
|
|
175
198
|
## 🛠️ Tech Stack
|
|
176
199
|
- **Runtime**: Node.js 24
|