@mohamed_fadl/reactlens 1.2.0-beta.7 → 1.2.0-beta.9
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 +33 -40
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,90 +1,83 @@
|
|
|
1
|
-
# ReactLens
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/@mohamed_fadl/reactlens)
|
|
4
|
-
[](https://github.com/react-lens/reactlens/actions)
|
|
5
|
-
[](LICENSE)
|
|
1
|
+
# ReactLens
|
|
6
2
|
|
|
7
3
|
> [!WARNING]
|
|
8
|
-
> **Beta
|
|
4
|
+
> **Beta:** We're still refining the algorithms and adding features. Expect changes.
|
|
9
5
|
|
|
10
|
-
ReactLens is a
|
|
6
|
+
ReactLens is a CLI tool that gives you a deep "X-ray" view of your React and Next.js projects. We use AST analysis to find complexity, circular dependencies, and unused files so you can keep your architecture clean.
|
|
11
7
|
|
|
12
|
-
##
|
|
8
|
+
## Quick Reference
|
|
13
9
|
|
|
14
|
-
| Command |
|
|
10
|
+
| Command | What it does | Example |
|
|
15
11
|
| :--- | :--- | :--- |
|
|
16
|
-
| `analyze` | Full architectural
|
|
17
|
-
| `graph` |
|
|
12
|
+
| `analyze` | Full architectural audit | `reactlens analyze ./src` |
|
|
13
|
+
| `graph` | Visualizes your dependencies | `reactlens graph ./src --output arch.svg` |
|
|
18
14
|
|
|
19
|
-
##
|
|
15
|
+
## Installation
|
|
20
16
|
|
|
21
17
|
```bash
|
|
22
18
|
npm install -g @mohamed_fadl/reactlens
|
|
23
19
|
```
|
|
24
20
|
|
|
25
|
-
##
|
|
21
|
+
## How to use it
|
|
26
22
|
|
|
27
23
|
```bash
|
|
28
|
-
#
|
|
24
|
+
# Scan the current folder
|
|
29
25
|
reactlens analyze
|
|
30
26
|
|
|
31
|
-
#
|
|
27
|
+
# Set a quality gate (fails if score is under 80)
|
|
32
28
|
reactlens analyze ./src --fail-under 80
|
|
33
29
|
|
|
34
|
-
# Export for CI/CD
|
|
30
|
+
# Export raw JSON for your CI/CD
|
|
35
31
|
reactlens analyze --json report.json --silent
|
|
36
32
|
```
|
|
37
33
|
|
|
38
34
|
---
|
|
39
35
|
|
|
40
|
-
##
|
|
36
|
+
## System Requirements (Graphviz)
|
|
41
37
|
|
|
42
|
-
|
|
38
|
+
If you want to use the `graph` command, you need **Graphviz (2.40+)**:
|
|
43
39
|
|
|
44
40
|
- **Windows:** `winget install graphviz`
|
|
45
41
|
- **macOS:** `brew install graphviz`
|
|
46
42
|
- **Linux:** `sudo apt install graphviz`
|
|
47
43
|
|
|
48
44
|
> [!TIP]
|
|
49
|
-
>
|
|
45
|
+
> If `graph` fails, double-check that Graphviz is in your system's PATH.
|
|
50
46
|
|
|
51
47
|
---
|
|
52
48
|
|
|
53
|
-
##
|
|
49
|
+
## Command Details
|
|
54
50
|
|
|
55
51
|
### `reactlens analyze [path] [options]`
|
|
56
|
-
|
|
52
|
+
Starts the architectural analysis.
|
|
57
53
|
|
|
58
54
|
**Options:**
|
|
59
|
-
- `-j, --json [file]` :
|
|
60
|
-
- `-s, --silent` :
|
|
61
|
-
- `--fail-under <score>` :
|
|
55
|
+
- `-j, --json [file]` : Saves the report as JSON.
|
|
56
|
+
- `-s, --silent` : Hides the terminal UI (great for scripts).
|
|
57
|
+
- `--fail-under <score>` : Returns an error code if the score is too low.
|
|
62
58
|
|
|
63
|
-
###
|
|
64
|
-
|
|
65
|
-
- `summary`:
|
|
59
|
+
### JSON Schema
|
|
60
|
+
If you're piping the JSON into other tools, here's what to look for:
|
|
61
|
+
- `summary`: Component and module counts.
|
|
66
62
|
- `metrics`: Scores for Complexity, Coupling, and Zombies.
|
|
67
|
-
- `insights`:
|
|
68
|
-
- `score`: The
|
|
63
|
+
- `insights`: Our suggestions for refactoring.
|
|
64
|
+
- `score`: The overall health percentage.
|
|
69
65
|
|
|
70
66
|
### `reactlens graph [path] --output <file>`
|
|
71
|
-
|
|
67
|
+
Creates a visual map of your modules. We support `.svg`, `.png`, and `.dot`.
|
|
72
68
|
|
|
73
69
|
---
|
|
74
70
|
|
|
75
|
-
##
|
|
71
|
+
## How we calculate the Score
|
|
76
72
|
|
|
77
|
-
We
|
|
73
|
+
We look at three main pillars:
|
|
78
74
|
|
|
79
|
-
1. **Complexity (40%)**:
|
|
80
|
-
2. **Coupling (40%)**:
|
|
81
|
-
3. **Zombies (20%)**:
|
|
75
|
+
1. **Complexity (40%)**: We check for massive components and "prop-heavy" code.
|
|
76
|
+
2. **Coupling (40%)**: We look for circular dependencies that tangle your codebase.
|
|
77
|
+
3. **Zombies (20%)**: We find files that aren't actually being used.
|
|
82
78
|
|
|
83
79
|
---
|
|
84
80
|
|
|
85
|
-
##
|
|
86
|
-
|
|
87
|
-
For technical details on algorithms and scoring, visit the [Engineering Reference](ENGINEERING.md).
|
|
81
|
+
## Technical Details
|
|
88
82
|
|
|
89
|
-
|
|
90
|
-
*Maintained by the ReactLens Engineering Team.*
|
|
83
|
+
If you're curious about the math or how we use Babel AST, check out our [Engineering Reference](ENGINEERING.md).
|