vibe-review

A powerful tool to analyze React codebases and visualize component dependencies in an interactive tree format. Easily understand your component relationships, props, and dependency chains.

✨ Features

• 🔍 Smart Analysis: Automatically detects React components, hooks, pages, and utilities
• 📊 Interactive Tree: Dynamic dependency tree with expand/collapse functionality
• 🏷️ Prop Extraction: Shows component props inline, including destructured parameters
• 🔗 Dependency Tracking: Visualizes component relationships and hook usage
• 🎯 Filtering: Filter by component type or search by name/file path
• 📁 Path Exclusion: Configurable exclusion of UI libraries and utility folders
• ⚡ Fast: Built with TypeScript AST parsing for reliable analysis

🚀 Quick Start

Using pnpm dlx (Recommended)

# Analyze your React project
pnpm dlx vibe-review

# View help
pnpm dlx vibe-review help

Using npx

# Analyze your React project
npx vibe-review

📖 Usage

1. Analyze Your Codebase

Run the analyzer in your React project root:

pnpm dlx vibe-review

This will:

• Scan all .ts and .tsx files in your project
• Extract component definitions, props, hooks, and dependencies
• Generate a call-graph.json file with the analysis results
• Create a default analyzer-config.json configuration file

2. View the Results

After analysis, you can view the generated call-graph.json file or open the visualize.html file in your browser to explore:

• Component Tree: Hierarchical view of your components with their dependencies
• Props Display: See component props inline (e.g., Button(children, variant, onClick))
• Dependency Types: Distinguish between "renders" and "uses" relationships
• Search & Filter: Find specific components or filter by type
• Component Details: Click any component to see detailed information

🛠️ Configuration

The tool creates a default analyzer-config.json file:

{
  "excludePaths": [
    "node_modules/",
    "dist/",
    "build/",
    ".next/",
    "out/",
    "coverage/"
  ]
}

Configuration Options

• excludePaths: Array of paths to exclude from analysis (relative to project root)

📊 Understanding the Visualization

Node Types

• 🟢 Green circles: React components
• 🔷 Blue diamonds: React hooks
• 🟠 Orange circles: Page components
• 🟣 Purple circles: Utility functions

Node Information

• Component Name: Shows the function/component name
• Props: Displayed inline, e.g., TaskRow(task, onUpdate, onDelete)
• Dependencies: Click ▶ to expand and see what this component uses
• Dependency Types:
  • (renders) - Component renders another component
  • (uses) - Component uses a hook or utility

Interactive Features

1. Expand/Collapse: Click ▶ to expand component dependencies
2. Search: Type to search components by name or file path
3. Filter: Use dropdown to show only exported components, pages, etc.
4. Details Panel: Click any component to see full details including:
   • File path and export status
   • All props and their names
   • Hooks used
   • Dependencies and dependents

🔧 Command Line Options

# Basic usage
pnpm dlx vibe-review [command] [options]

# Commands
analyze    # Analyze components (default)
help       # Show help message

# Options
--config   # Path to config file (default: analyzer-config.json)
--output   # Output file path (default: call-graph.json)

# Examples
pnpm dlx vibe-review analyze --output my-graph.json
pnpm dlx vibe-review --config custom-config.json

🧪 Example Output

The analyzer will show components like this in the tree:

▶ App(children)
▶ TaskTable(tasks, onUpdate)
  ▶ TaskRow(task, onEdit, onDelete) (renders)
    • useTaskState() (uses)
    ▶ Button(children, variant) (renders)
    ▶ DatePicker(value, onChange) (renders)

📋 Requirements

• Node.js 16.0.0 or higher
• React/TypeScript project with .ts or .tsx files

🏗️ How It Works

1. AST Parsing: Uses TypeScript compiler API to parse your code
2. Component Detection: Identifies React components, hooks, and utilities
3. Prop Extraction: Handles both destructuring and inline prop definitions
4. Dependency Analysis: Tracks JSX usage and hook calls
5. Tree Generation: Creates interactive tree with dynamic expansion

🛠️ Development

Local Development Setup

1. Clone and install dependencies:

git clone https://github.com/ruang-guru/vibe-review.git
cd vibe-review
pnpm install

2. Build the project:

pnpm run build

3. Test locally without publishing:

To test the tool in another project without publishing to npm:

# In the vibe-review directory
pnpm link --global

# In your React project directory
pnpm link --global vibe-review

# Now you can use it like the published version
vibe-review

Alternative: Using pnpm dlx with local path

You can also test directly from the source directory:

# From any React project, point to your local development folder
pnpm dlx /path/to/vibe-review

# Or if you're in the analyzer project root, test on another project
pnpm dlx . --cwd /path/to/your/react/project

Development Workflow

1. Make changes to the TypeScript source files in src/
2. Run pnpm run build to compile
3. Test your changes using one of the methods above
4. Run pnpm run check to ensure code quality

Available Scripts

• pnpm run build - Compile TypeScript to JavaScript
• pnpm run format - Format code with Biome
• pnpm run lint - Lint and fix issues
• pnpm run check - Format, lint, and organize imports

🤝 Contributing

Contributions are welcome! This tool helps developers understand their React codebases better.

📄 License

MIT License - feel free to use this tool in your projects!

Made with ❤️ for the React community