@cuekit-cli/reactjs

React.js web project analyzer for Cuekit CLI. Analyzes React.js projects with various routing libraries to detect routes, components, and interactive elements.

Overview

This package provides specialized analysis for React.js web projects, automatically detecting routing libraries and supporting both declarative and data-driven routing patterns. It handles component imports, path resolution, and provides web-specific interactive element analysis.

Features

• Multi-Library Support: Automatically detects routing libraries (React Router, TanStack Router, Wouter, etc.)
• Declarative Routing: Analyzes <Route> component patterns
• Data-Driven Routing: Supports useRoutes hook and route object arrays
• Dynamic Routes: Handles parameterized routes and nested routing
• Component Analysis: Extracts component descriptions and features
• Import Resolution: Resolves component imports and dependencies
• Interactive Elements: Web-specific UI element analysis
• Library Detection: Auto-detects routing library from package.json

Installation

npm install @cuekit-cli/reactjs

Configuration

To upload analysis results to the Cuekit dashboard, create a configuration file in your project's root directory.

The CLI searches for one of the following files:

• cuekit.config.json
• cuekit.config.js
• cuekit.config.mjs
• cuekit.config.ts

Required Fields

• apiKey (string): Your Cuekit API key
• appId (string): The App ID for your project

Example Configuration

{
  "apiKey": "your-cuekit-api-key-here",
  "appId": "your-app-id-here"
}

Usage

Basic Analysis

npx cuekit-cli scan .

Output Options

# JSON output
npx cuekit-cli scan . --json

# Save to markdown file
npx cuekit-cli scan . --out routes.md

# Use AI for component summarization
npx cuekit-cli scan . --ai

Examples

# Analyze a React.js project
npx cuekit-cli scan ./my-react-app

# Generate JSON output
npx cuekit-cli scan ./my-react-app --json

# Create documentation file
npx cuekit-cli scan ./my-react-app --out routes.md

# With AI-powered component descriptions
npx cuekit-cli scan ./my-react-app --ai

Supported Routing Libraries

React Router (v6+)

import {Routes, Route} from 'react-router-dom'
;<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/users/:id" element={<UserProfile />} />
</Routes>

TanStack Router

// Analyzes routeTree.gen.ts and routes directory
// Supports file-based routing patterns

Wouter

import {Route} from 'wouter'

<Route path="/" component={Home} />
<Route path="/about" component={About} />

Reach Router

import {Router} from '@reach/router'
;<Router>
  <Home path="/" />
  <About path="/about" />
</Router>

Generic Route Detection

For unknown routing libraries, the analyzer attempts generic pattern detection:

• JSX elements with route-related names
• Common routing patterns and conventions
• Data-driven routing with route objects

Supported Patterns

Declarative Routing

// React Router v6
<Route path="/users/:id" element={<UserProfile />} />

// Wouter
<Route path="/users/:id" component={UserProfile} />

Data-Driven Routing

// React Router with useRoutes
const routes = [
  {path: '/', element: <Home />},
  {path: '/about', element: <About />},
]

const element = useRoutes(routes)

Dynamic Routes

// Parameterized routes
<Route path="/users/:id" element={<UserProfile />} />

// Catch-all routes
<Route path="/blog/*" element={<Blog />} />

Nested Routes

// Nested routing structures
<Route path="/dashboard" element={<Dashboard />}>
  <Route path="profile" element={<Profile />} />
  <Route path="settings" element={<Settings />} />
</Route>

Library Detection

The analyzer automatically detects routing libraries by examining package.json dependencies:

• react-router-dom or react-router → React Router
• @tanstack/react-router → TanStack Router
• wouter → Wouter
• @reach/router → Reach Router
• Unknown → Generic route detection

Output Format

The analyzer provides structured output including:

• Route names and paths
• Component file locations
• Navigator types (Web for React.js)
• Component descriptions
• Interactive elements
• Feature analysis

Development

# Build the package
npm run build

# Development mode with watch
npm run dev

# Type checking
npm run check-types

License

MIT License - see LICENSE file for details.