react-code-smell-detector 1.0.0

package/README.md

@@ -0,0 +1,179 @@
+# React Code Smell Detector
+
+A CLI tool that analyzes React projects and detects common code smells, providing refactoring suggestions and a technical debt score.
+
+## Features
+
+- 🔍 **Detect Code Smells**: Identifies common React anti-patterns
+- 📊 **Technical Debt Score**: Grades your codebase from A to F
+- 💡 **Refactoring Suggestions**: Actionable recommendations for each issue
+- 📝 **Multiple Output Formats**: Console (colored), JSON, and Markdown
+
+### Detected Code Smells
+
+| Category | Detection |
+|----------|-----------|
+| **useEffect Overuse** | Multiple useEffects per component, missing cleanup, async patterns |
+| **Prop Drilling** | Too many props, drilling depth analysis |
+| **Large Components** | Components over 300 lines, deep JSX nesting |
+| **Unmemoized Calculations** | `.map()`, `.filter()`, `.reduce()`, `JSON.parse()` without `useMemo` |
+| **Inline Functions** | Callbacks defined inline in JSX props |
+
+## Installation
+
+```bash
+npm install -g react-code-smell-detector
+```
+
+Or use as a dev dependency:
+
+```bash
+npm install -D react-code-smell-detector
+```
+
+## Usage
+
+### Basic Analysis
+
+```bash
+react-smell /path/to/react/project
+```
+
+### With Code Snippets
+
+```bash
+react-smell ./src -s
+```
+
+### Output Formats
+
+```bash
+# Console (default - colored output)
+react-smell ./src
+
+# JSON (for CI/CD integration)
+react-smell ./src -f json
+
+# Markdown (for documentation)
+react-smell ./src -f markdown -o report.md
+```
+
+### Configuration
+
+Create a `.smellrc.json` file:
+
+```bash
+react-smell init
+```
+
+Or create manually:
+
+```json
+{
+  "maxUseEffectsPerComponent": 3,
+  "maxPropDrillingDepth": 3,
+  "maxComponentLines": 300,
+  "maxPropsCount": 7
+}
+```
+
+### CLI Options
+
+| Option | Description | Default |
+|--------|-------------|---------|
+| `-f, --format <format>` | Output format: console, json, markdown | `console` |
+| `-s, --snippets` | Show code snippets in output | `false` |
+| `-c, --config <file>` | Path to config file | `.smellrc.json` |
+| `--max-effects <number>` | Max useEffects per component | `3` |
+| `--max-props <number>` | Max props before warning | `7` |
+| `--max-lines <number>` | Max lines per component | `300` |
+| `--include <patterns>` | Glob patterns to include | `**/*.tsx,**/*.jsx` |
+| `--exclude <patterns>` | Glob patterns to exclude | `node_modules,dist` |
+| `-o, --output <file>` | Write output to file | - |
+
+## Example Output
+
+```
+╔══════════════════════════════════════════════════════════════╗
+║           🔍 React Code Smell Detector Report              ║
+╚══════════════════════════════════════════════════════════════╝
+
+📊 Technical Debt Score
+
+   Grade: C ███████████████░░░░░ 73/100
+
+   Breakdown:
+   ⚡ useEffect:     ██████████ 100
+   🔗 Prop Drilling: ██████████ 100
+   📐 Component Size:███████░░░ 70
+   💾 Memoization:   ░░░░░░░░░░ 0
+
+   Estimated refactor time: 1-2 hours
+
+📈 Summary
+
+   Files analyzed:  10
+   Components found: 21
+   Total issues:     5 warning(s), 26 info
+```
+
+## Programmatic API
+
+```typescript
+import { analyzeProject, reportResults } from 'react-code-smell-detector';
+
+const result = await analyzeProject({
+  rootDir: './src',
+  config: {
+    maxUseEffectsPerComponent: 3,
+    maxComponentLines: 300,
+  },
+});
+
+console.log(`Grade: ${result.debtScore.grade}`);
+console.log(`Total issues: ${result.summary.totalSmells}`);
+
+// Or use the reporter
+const report = reportResults(result, {
+  format: 'markdown',
+  showCodeSnippets: true,
+  rootDir: './src',
+});
+```
+
+## CI/CD Integration
+
+Use the JSON output format for CI pipelines:
+
+```yaml
+# GitHub Actions example
+- name: Check code smells
+  run: |
+    npx react-smell ./src -f json > smell-report.json
+    if [ $(jq '.summary.smellsBySeverity.error' smell-report.json) -gt 0 ]; then
+      echo "Code smell errors found!"
+      exit 1
+    fi
+```
+
+## Technical Debt Score
+
+The score is calculated based on:
+
+| Category | Weight | Description |
+|----------|--------|-------------|
+| useEffect Usage | 30% | Penalized for overuse, missing cleanup |
+| Prop Drilling | 25% | Penalized for deep drilling, too many props |
+| Component Size | 25% | Penalized for large components, deep nesting |
+| Memoization | 20% | Penalized for unmemoized calculations |
+
+**Grades:**
+- **A**: 90-100 (Excellent)
+- **B**: 80-89 (Good)
+- **C**: 70-79 (Needs Improvement)
+- **D**: 60-69 (Poor)
+- **F**: <60 (Critical)
+
+## License
+
+MIT

package/dist/analyzer.d.ts

@@ -0,0 +1,10 @@
+import { AnalysisResult, DetectorConfig } from './types/index.js';
+export interface AnalyzerOptions {
+    rootDir: string;
+    include?: string[];
+    exclude?: string[];
+    config?: Partial<DetectorConfig>;
+}
+export declare function analyzeProject(options: AnalyzerOptions): Promise<AnalysisResult>;
+export { DEFAULT_CONFIG, DetectorConfig } from './types/index.js';
+//# sourceMappingURL=analyzer.d.ts.map

package/dist/analyzer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analyzer.d.ts","sourceRoot":"","sources":["../src/analyzer.ts"],"names":[],"mappings":"AAUA,OAAO,EACL,cAAc,EAMd,cAAc,EAIf,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAClC;AAED,wBAAsB,cAAc,CAAC,OAAO,EAAE,eAAe,GAAG,OAAO,CAAC,cAAc,CAAC,CA0CtF;AA+ID,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/analyzer.js

@@ -0,0 +1,169 @@
+import fg from 'fast-glob';
+import path from 'path';
+import { parseFile } from './parser/index.js';
+import { detectUseEffectOveruse, detectPropDrilling, analyzePropDrillingDepth, detectLargeComponent, detectUnmemoizedCalculations, } from './detectors/index.js';
+import { DEFAULT_CONFIG, } from './types/index.js';
+export async function analyzeProject(options) {
+    const { rootDir, include = ['**/*.tsx', '**/*.jsx'], exclude = ['**/node_modules/**', '**/dist/**', '**/build/**', '**/*.test.*', '**/*.spec.*'], config: userConfig = {}, } = options;
+    const config = { ...DEFAULT_CONFIG, ...userConfig };
+    // Find all React files
+    const patterns = include.map(p => path.join(rootDir, p));
+    const files = await fg(patterns, {
+        ignore: exclude,
+        absolute: true,
+    });
+    const fileAnalyses = [];
+    // Analyze each file
+    for (const file of files) {
+        try {
+            const parseResult = await parseFile(file);
+            const analysis = analyzeFile(parseResult, file, config);
+            if (analysis.components.length > 0 || analysis.smells.length > 0) {
+                fileAnalyses.push(analysis);
+            }
+        }
+        catch (error) {
+            // Skip files that can't be parsed
+            console.warn(`Warning: Could not parse ${file}: ${error.message}`);
+        }
+    }
+    // Calculate summary and score
+    const summary = calculateSummary(fileAnalyses);
+    const debtScore = calculateTechnicalDebtScore(fileAnalyses, summary);
+    return {
+        files: fileAnalyses,
+        summary,
+        debtScore,
+    };
+}
+function analyzeFile(parseResult, filePath, config) {
+    const { components, imports, sourceCode } = parseResult;
+    const smells = [];
+    const componentInfos = [];
+    // Run all detectors on each component
+    components.forEach(component => {
+        // Collect component info
+        componentInfos.push({
+            name: component.name,
+            file: filePath,
+            startLine: component.startLine,
+            endLine: component.endLine,
+            lineCount: component.endLine - component.startLine + 1,
+            useEffectCount: component.hooks.useEffect.length,
+            useStateCount: component.hooks.useState.length,
+            useMemoCount: component.hooks.useMemo.length,
+            useCallbackCount: component.hooks.useCallback.length,
+            propsCount: component.props.length,
+            propsDrillingDepth: 0, // Calculated separately
+            hasExpensiveCalculation: false, // Will be set by memoization detector
+        });
+        // Run detectors
+        smells.push(...detectUseEffectOveruse(component, filePath, sourceCode, config));
+        smells.push(...detectPropDrilling(component, filePath, sourceCode, config));
+        smells.push(...detectLargeComponent(component, filePath, sourceCode, config));
+        smells.push(...detectUnmemoizedCalculations(component, filePath, sourceCode, config));
+    });
+    // Run cross-component analysis
+    smells.push(...analyzePropDrillingDepth(components, filePath, sourceCode, config));
+    return {
+        file: filePath,
+        components: componentInfos,
+        smells,
+        imports,
+    };
+}
+function calculateSummary(files) {
+    const smellsByType = {
+        'useEffect-overuse': 0,
+        'prop-drilling': 0,
+        'large-component': 0,
+        'unmemoized-calculation': 0,
+        'missing-dependency': 0,
+        'state-in-loop': 0,
+        'inline-function-prop': 0,
+        'deep-nesting': 0,
+    };
+    const smellsBySeverity = {
+        error: 0,
+        warning: 0,
+        info: 0,
+    };
+    let totalSmells = 0;
+    let totalComponents = 0;
+    files.forEach(file => {
+        totalComponents += file.components.length;
+        file.smells.forEach(smell => {
+            totalSmells++;
+            smellsByType[smell.type]++;
+            smellsBySeverity[smell.severity]++;
+        });
+    });
+    return {
+        totalFiles: files.length,
+        totalComponents,
+        totalSmells,
+        smellsByType,
+        smellsBySeverity,
+    };
+}
+function calculateTechnicalDebtScore(files, summary) {
+    // Calculate individual scores (0-100, higher is better)
+    // useEffect score: penalize based on useEffect-related issues
+    const useEffectIssues = summary.smellsByType['useEffect-overuse'];
+    const useEffectScore = Math.max(0, 100 - useEffectIssues * 15);
+    // Prop drilling score
+    const propDrillingIssues = summary.smellsByType['prop-drilling'];
+    const propDrillingScore = Math.max(0, 100 - propDrillingIssues * 12);
+    // Component size score
+    const sizeIssues = summary.smellsByType['large-component'] + summary.smellsByType['deep-nesting'];
+    const componentSizeScore = Math.max(0, 100 - sizeIssues * 10);
+    // Memoization score
+    const memoIssues = summary.smellsByType['unmemoized-calculation'] + summary.smellsByType['inline-function-prop'];
+    const memoizationScore = Math.max(0, 100 - memoIssues * 8);
+    // Overall score (weighted average)
+    const score = Math.round(useEffectScore * 0.3 +
+        propDrillingScore * 0.25 +
+        componentSizeScore * 0.25 +
+        memoizationScore * 0.2);
+    // Determine grade
+    let grade;
+    if (score >= 90)
+        grade = 'A';
+    else if (score >= 80)
+        grade = 'B';
+    else if (score >= 70)
+        grade = 'C';
+    else if (score >= 60)
+        grade = 'D';
+    else
+        grade = 'F';
+    // Estimate refactor time
+    const errorCount = summary.smellsBySeverity.error;
+    const warningCount = summary.smellsBySeverity.warning;
+    const totalIssues = errorCount * 30 + warningCount * 15; // minutes
+    let estimatedRefactorTime;
+    if (totalIssues < 30)
+        estimatedRefactorTime = '< 30 minutes';
+    else if (totalIssues < 60)
+        estimatedRefactorTime = '30 min - 1 hour';
+    else if (totalIssues < 120)
+        estimatedRefactorTime = '1-2 hours';
+    else if (totalIssues < 240)
+        estimatedRefactorTime = '2-4 hours';
+    else if (totalIssues < 480)
+        estimatedRefactorTime = '4-8 hours';
+    else
+        estimatedRefactorTime = '> 1 day';
+    return {
+        score,
+        grade,
+        breakdown: {
+            useEffectScore,
+            propDrillingScore,
+            componentSizeScore,
+            memoizationScore,
+        },
+        estimatedRefactorTime,
+    };
+}
+export { DEFAULT_CONFIG } from './types/index.js';

package/dist/cli.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=cli.d.ts.map

package/dist/cli.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../src/cli.ts"],"names":[],"mappings":""}

package/dist/cli.js

@@ -0,0 +1,113 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import chalk from 'chalk';
+import ora from 'ora';
+import path from 'path';
+import { analyzeProject, DEFAULT_CONFIG } from './analyzer.js';
+import { reportResults } from './reporter.js';
+import fs from 'fs/promises';
+const program = new Command();
+program
+    .name('react-smell')
+    .description('Detect code smells in React projects')
+    .version('1.0.0')
+    .argument('[directory]', 'Directory to analyze', '.')
+    .option('-f, --format <format>', 'Output format: console, json, markdown', 'console')
+    .option('-s, --snippets', 'Show code snippets in output', false)
+    .option('-c, --config <file>', 'Path to config file')
+    .option('--max-effects <number>', 'Max useEffects per component', parseInt)
+    .option('--max-props <number>', 'Max props before warning', parseInt)
+    .option('--max-lines <number>', 'Max lines per component', parseInt)
+    .option('--include <patterns>', 'Glob patterns to include (comma-separated)')
+    .option('--exclude <patterns>', 'Glob patterns to exclude (comma-separated)')
+    .option('-o, --output <file>', 'Write output to file')
+    .action(async (directory, options) => {
+    const rootDir = path.resolve(process.cwd(), directory);
+    // Check if directory exists
+    try {
+        await fs.access(rootDir);
+    }
+    catch {
+        console.error(chalk.red(`Error: Directory "${rootDir}" does not exist.`));
+        process.exit(1);
+    }
+    const spinner = ora('Analyzing React project...').start();
+    try {
+        // Load config file if specified
+        let fileConfig = {};
+        if (options.config) {
+            try {
+                const configPath = path.resolve(process.cwd(), options.config);
+                const configContent = await fs.readFile(configPath, 'utf-8');
+                fileConfig = JSON.parse(configContent);
+            }
+            catch (error) {
+                spinner.fail(`Could not load config file: ${error.message}`);
+                process.exit(1);
+            }
+        }
+        // Build config from options
+        const config = {
+            ...DEFAULT_CONFIG,
+            ...fileConfig,
+            ...(options.maxEffects && { maxUseEffectsPerComponent: options.maxEffects }),
+            ...(options.maxProps && { maxPropsCount: options.maxProps }),
+            ...(options.maxLines && { maxComponentLines: options.maxLines }),
+        };
+        const include = options.include?.split(',').map((p) => p.trim()) || undefined;
+        const exclude = options.exclude?.split(',').map((p) => p.trim()) || undefined;
+        const result = await analyzeProject({
+            rootDir,
+            include,
+            exclude,
+            config,
+        });
+        spinner.stop();
+        const output = reportResults(result, {
+            format: options.format,
+            showCodeSnippets: options.snippets,
+            rootDir,
+        });
+        if (options.output) {
+            const outputPath = path.resolve(process.cwd(), options.output);
+            await fs.writeFile(outputPath, output, 'utf-8');
+            console.log(chalk.green(`✓ Report written to ${outputPath}`));
+        }
+        else {
+            console.log(output);
+        }
+        // Exit with error code if there are errors
+        if (result.summary.smellsBySeverity.error > 0) {
+            process.exit(1);
+        }
+    }
+    catch (error) {
+        spinner.fail(`Analysis failed: ${error.message}`);
+        if (process.env.DEBUG) {
+            console.error(error);
+        }
+        process.exit(1);
+    }
+});
+// Init command to create config file
+program
+    .command('init')
+    .description('Create a configuration file')
+    .action(async () => {
+    const configContent = JSON.stringify({
+        maxUseEffectsPerComponent: DEFAULT_CONFIG.maxUseEffectsPerComponent,
+        maxPropDrillingDepth: DEFAULT_CONFIG.maxPropDrillingDepth,
+        maxComponentLines: DEFAULT_CONFIG.maxComponentLines,
+        maxPropsCount: DEFAULT_CONFIG.maxPropsCount,
+    }, null, 2);
+    const configPath = path.join(process.cwd(), '.smellrc.json');
+    try {
+        await fs.access(configPath);
+        console.log(chalk.yellow('Config file already exists at .smellrc.json'));
+    }
+    catch {
+        await fs.writeFile(configPath, configContent, 'utf-8');
+        console.log(chalk.green('✓ Created .smellrc.json'));
+    }
+});
+program.parse();

package/dist/detectors/index.d.ts

@@ -0,0 +1,5 @@
+export { detectUseEffectOveruse } from './useEffect.js';
+export { detectPropDrilling, analyzePropDrillingDepth } from './propDrilling.js';
+export { detectLargeComponent } from './largeComponent.js';
+export { detectUnmemoizedCalculations } from './memoization.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/detectors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/detectors/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AACjF,OAAO,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,4BAA4B,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/detectors/index.js

@@ -0,0 +1,4 @@
+export { detectUseEffectOveruse } from './useEffect.js';
+export { detectPropDrilling, analyzePropDrillingDepth } from './propDrilling.js';
+export { detectLargeComponent } from './largeComponent.js';
+export { detectUnmemoizedCalculations } from './memoization.js';

package/dist/detectors/largeComponent.d.ts

@@ -0,0 +1,4 @@
+import { ParsedComponent } from '../parser/index.js';
+import { CodeSmell, DetectorConfig } from '../types/index.js';
+export declare function detectLargeComponent(component: ParsedComponent, filePath: string, sourceCode: string, config?: DetectorConfig): CodeSmell[];
+//# sourceMappingURL=largeComponent.d.ts.map

package/dist/detectors/largeComponent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"largeComponent.d.ts","sourceRoot":"","sources":["../../src/detectors/largeComponent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAkB,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAkB,MAAM,mBAAmB,CAAC;AAE9E,wBAAgB,oBAAoB,CAClC,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,GAAE,cAA+B,GACtC,SAAS,EAAE,CAsDb"}

package/dist/detectors/largeComponent.js

@@ -0,0 +1,51 @@
+import { getCodeSnippet } from '../parser/index.js';
+import { DEFAULT_CONFIG } from '../types/index.js';
+export function detectLargeComponent(component, filePath, sourceCode, config = DEFAULT_CONFIG) {
+    const smells = [];
+    const lineCount = component.endLine - component.startLine + 1;
+    if (lineCount > config.maxComponentLines) {
+        smells.push({
+            type: 'large-component',
+            severity: 'warning',
+            message: `Component "${component.name}" has ${lineCount} lines (max recommended: ${config.maxComponentLines})`,
+            file: filePath,
+            line: component.startLine,
+            column: 0,
+            suggestion: 'Break this component into smaller, more focused components',
+            codeSnippet: getCodeSnippet(sourceCode, component.startLine),
+        });
+    }
+    // Check for complex JSX nesting
+    if (component.jsxDepth > 10) {
+        smells.push({
+            type: 'deep-nesting',
+            severity: 'info',
+            message: `Component "${component.name}" has deeply nested JSX (depth: ~${component.jsxDepth})`,
+            file: filePath,
+            line: component.startLine,
+            column: 0,
+            suggestion: 'Extract nested elements into separate components for better readability',
+            codeSnippet: getCodeSnippet(sourceCode, component.startLine),
+        });
+    }
+    // Check for too many hooks (complexity indicator)
+    const totalHooks = component.hooks.useEffect.length +
+        component.hooks.useState.length +
+        component.hooks.useMemo.length +
+        component.hooks.useCallback.length +
+        component.hooks.useRef.length +
+        component.hooks.custom.length;
+    if (totalHooks > 10) {
+        smells.push({
+            type: 'large-component',
+            severity: 'warning',
+            message: `Component "${component.name}" uses ${totalHooks} hooks - high complexity`,
+            file: filePath,
+            line: component.startLine,
+            column: 0,
+            suggestion: 'Extract related logic into custom hooks',
+            codeSnippet: getCodeSnippet(sourceCode, component.startLine),
+        });
+    }
+    return smells;
+}

package/dist/detectors/memoization.d.ts

@@ -0,0 +1,4 @@
+import { ParsedComponent } from '../parser/index.js';
+import { CodeSmell, DetectorConfig } from '../types/index.js';
+export declare function detectUnmemoizedCalculations(component: ParsedComponent, filePath: string, sourceCode: string, config?: DetectorConfig): CodeSmell[];
+//# sourceMappingURL=memoization.d.ts.map

package/dist/detectors/memoization.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"memoization.d.ts","sourceRoot":"","sources":["../../src/detectors/memoization.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAkB,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAkB,MAAM,mBAAmB,CAAC;AAE9E,wBAAgB,4BAA4B,CAC1C,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,GAAE,cAA+B,GACtC,SAAS,EAAE,CAsKb"}