ReactRadar

Description

ReactRadar is a CLI tool for analyzing React projects directly from the terminal.

It provides static analysis and runtime metrics such as component size, render hierarchy, and performance insights.

Build Preview

• Potential error detection: TypeScript analysis and ESLint linting without running a full build.
• Component navigation metrics: average depth, average number of children, static parent-child relationships.

Dynamic CLI

• Rendered component tracking: which components are rendered during a React page execution.
• Render timing: duration of each component render.
• Parent-child hierarchy: mapping of rendered components and their parents.
• Component weight: estimation of the size of rendered components.
• CLI output: display data in a table.

Libraries

• Yargs: Main CLI library
• Chalk v.4: CLI colors
• cli-table3: CLI table

TODO

• [x] Component Line Scanner
• [ ] Build errors/ESlint preview
• [ ] Ability to pass arguments (filters)
• [x] Component navigation metrics
• [ ] Render timing
• [ ] Rendered component tracking
• [ ] Component rendered weight
• [ ] Wiki
• [x] Npm relase

Usage

Global installation:

npm install -g react-radar

Run from the root of a React project:

# scan component files by lines
reactradar analyze 

# inspect static parent–child relationships
reactradar parents 

# inspect all lint errors (also comments)
reactradar lint

Author's Note

This is my first project in the Node.js ecosystem and my first Open Source initiative of this technical complexity, so expect big errors and problems.