react-code-smell-detector 1.4.1 → 1.5.0

package/dist/__tests__/prComments.test.js

@@ -0,0 +1,118 @@
+import { describe, it, expect } from 'vitest';
+import { generatePRComment, generateInlineComments } from '../prComments.js';
+describe('PR Comments', () => {
+    const createMockResult = () => ({
+        files: [
+            {
+                file: '/src/components/Button.tsx',
+                components: [
+                    {
+                        name: 'Button',
+                        file: '/src/components/Button.tsx',
+                        startLine: 1,
+                        endLine: 50,
+                        lineCount: 50,
+                        useEffectCount: 1,
+                        useStateCount: 2,
+                        useMemoCount: 0,
+                        useCallbackCount: 0,
+                        propsCount: 3,
+                        propsDrillingDepth: 0,
+                        hasExpensiveCalculation: false,
+                    },
+                ],
+                smells: [
+                    {
+                        type: 'useEffect-overuse',
+                        severity: 'warning',
+                        message: 'Component has multiple useEffect hooks',
+                        file: '/src/components/Button.tsx',
+                        line: 10,
+                        column: 0,
+                        suggestion: 'Consider consolidating effects',
+                    },
+                ],
+                imports: [],
+            },
+        ],
+        summary: {
+            totalFiles: 1,
+            totalComponents: 1,
+            totalSmells: 1,
+            smellsByType: {
+                'useEffect-overuse': 1,
+            },
+            smellsBySeverity: { error: 0, warning: 1, info: 0 },
+        },
+        debtScore: {
+            score: 85,
+            grade: 'B',
+            breakdown: {
+                useEffectScore: 85,
+                propDrillingScore: 100,
+                componentSizeScore: 100,
+                memoizationScore: 100,
+            },
+            estimatedRefactorTime: '< 30 minutes',
+        },
+    });
+    it('should generate a markdown PR comment', () => {
+        const result = createMockResult();
+        const comment = generatePRComment(result, '/');
+        expect(comment).toContain('## 🔍 Code Smell Analysis Report');
+        expect(comment).toContain('Grade: **B**');
+        expect(comment).toContain('Total Issues | 1');
+        expect(comment).toContain('useEffect-overuse');
+    });
+    it('should include score breakdown', () => {
+        const result = createMockResult();
+        const comment = generatePRComment(result, '/');
+        expect(comment).toContain('Score Breakdown');
+        expect(comment).toContain('useEffect Usage');
+        expect(comment).toContain('85/100');
+    });
+    it('should generate inline comments for smells', () => {
+        const smells = [
+            {
+                type: 'debug-statement',
+                severity: 'warning',
+                message: 'console.log found',
+                file: '/src/utils/helper.ts',
+                line: 15,
+                column: 0,
+                suggestion: 'Remove debug statements',
+            },
+        ];
+        const comments = generateInlineComments(smells, '/');
+        expect(comments).toHaveLength(1);
+        expect(comments[0].path).toBe('src/utils/helper.ts');
+        expect(comments[0].line).toBe(15);
+        expect(comments[0].body).toContain('debug-statement');
+    });
+    it('should group multiple smells on same line', () => {
+        const smells = [
+            {
+                type: 'debug-statement',
+                severity: 'warning',
+                message: 'console.log found',
+                file: '/src/utils/helper.ts',
+                line: 15,
+                column: 0,
+                suggestion: 'Remove debug statements',
+            },
+            {
+                type: 'js-var-usage',
+                severity: 'warning',
+                message: 'var usage detected',
+                file: '/src/utils/helper.ts',
+                line: 15,
+                column: 0,
+                suggestion: 'Use let or const',
+            },
+        ];
+        const comments = generateInlineComments(smells, '/');
+        expect(comments).toHaveLength(1);
+        expect(comments[0].body).toContain('debug-statement');
+        expect(comments[0].body).toContain('js-var-usage');
+    });
+});

package/dist/analyzer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"analyzer.d.ts","sourceRoot":"","sources":["../src/analyzer.ts"],"names":[],"mappings":"AA6BA,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;AAkQD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"analyzer.d.ts","sourceRoot":"","sources":["../src/analyzer.ts"],"names":[],"mappings":"AAiCA,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,CA8DtF;AAmRD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/analyzer.js

@@ -1,7 +1,10 @@
 import fg from 'fast-glob';
 import path from 'path';
 import { parseFile } from './parser/index.js';
-import { detectUseEffectOveruse, detectPropDrilling, analyzePropDrillingDepth, detectLargeComponent, detectUnmemoizedCalculations, detectMissingKeys, detectHooksRulesViolations, detectDependencyArrayIssues, detectNestedTernaries, detectDeadCode, detectMagicValues, detectNextjsIssues, detectReactNativeIssues, detectNodejsIssues, detectJavascriptIssues, detectTypescriptIssues, detectDebugStatements, detectSecurityIssues, detectAccessibilityIssues, detectComplexity, detectMemoryLeaks, detectImportIssues, detectUnusedCode, } from './detectors/index.js';
+import { detectUseEffectOveruse, detectPropDrilling, analyzePropDrillingDepth, detectLargeComponent, detectUnmemoizedCalculations, detectMissingKeys, detectHooksRulesViolations, detectDependencyArrayIssues, detectNestedTernaries, detectDeadCode, detectMagicValues, detectNextjsIssues, detectReactNativeIssues, detectNodejsIssues, detectJavascriptIssues, detectTypescriptIssues, detectDebugStatements, detectSecurityIssues, detectAccessibilityIssues, detectComplexity, detectMemoryLeaks, detectImportIssues, detectUnusedCode, detectServerComponentIssues, detectAsyncComponentIssues, } from './detectors/index.js';
+import { parseCustomRules, detectCustomRuleViolations } from './customRules.js';
+import { buildDependencyGraph } from './graphGenerator.js';
+import { analyzeBundleImpact } from './bundleAnalyzer.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;
@@ -30,6 +33,20 @@ export async function analyzeProject(options) {
     // Calculate summary and score
     const summary = calculateSummary(fileAnalyses);
     const debtScore = calculateTechnicalDebtScore(fileAnalyses, summary);
+    // Generate dependency graph if requested
+    if (config.generateDependencyGraph) {
+        const importsData = fileAnalyses.map(f => ({ file: f.file, imports: f.imports }));
+        const graph = buildDependencyGraph(importsData, rootDir);
+        // Graph is available via extension (not in standard result yet)
+        global._dependencyGraph = graph;
+    }
+    // Analyze bundle size if requested
+    if (config.analyzeBundleSize) {
+        const allComponents = fileAnalyses.flatMap(f => f.components);
+        const bundleAnalysis = analyzeBundleImpact(fileAnalyses.map(f => ({ components: f.components, file: f.file })), fileAnalyses, '');
+        // Bundle analysis is available via extension
+        global._bundleAnalysis = bundleAnalysis;
+    }
     return {
         files: fileAnalyses,
         summary,
@@ -83,6 +100,14 @@ function analyzeFile(parseResult, filePath, config) {
         smells.push(...detectMemoryLeaks(component, filePath, sourceCode, config));
         smells.push(...detectImportIssues(component, filePath, sourceCode, config));
         smells.push(...detectUnusedCode(component, filePath, sourceCode, config));
+        // Server Components (React 19)
+        smells.push(...detectServerComponentIssues(component, filePath, sourceCode, config, imports));
+        smells.push(...detectAsyncComponentIssues(component, filePath, sourceCode, config));
+        // Custom rules
+        const customRules = parseCustomRules(config);
+        if (customRules.length > 0) {
+            smells.push(...detectCustomRuleViolations(component, filePath, sourceCode, customRules));
+        }
     });
     // Run cross-component analysis
     smells.push(...analyzePropDrillingDepth(components, filePath, sourceCode, config));
@@ -191,6 +216,14 @@ function calculateSummary(files) {
         // Unused code
         'unused-export': 0,
         'dead-import': 0,
+        // Server Components (React 19)
+        'server-component-hooks': 0,
+        'server-component-events': 0,
+        'server-component-browser-api': 0,
+        'async-client-component': 0,
+        'mixed-directives': 0,
+        // Custom rules
+        'custom-rule': 0,
     };
     const smellsBySeverity = {
         error: 0,

package/dist/bundleAnalyzer.d.ts

@@ -0,0 +1,25 @@
+export interface ComponentBundleInfo {
+    name: string;
+    file: string;
+    estimatedSize: number;
+    dependencies: number;
+    exports: number;
+    complexity: number;
+    impact: 'low' | 'medium' | 'high' | 'critical';
+}
+export interface BundleAnalysisResult {
+    components: ComponentBundleInfo[];
+    totalEstimatedSize: number;
+    averageComponentSize: number;
+    largestComponents: ComponentBundleInfo[];
+    recommendations: string[];
+}
+/**
+ * Estimate bundle size impact per component
+ */
+export declare function analyzeBundleImpact(components: any[], files: any[], sourceCode: string): BundleAnalysisResult;
+/**
+ * Generate HTML bundle analysis report
+ */
+export declare function generateBundleReport(analysis: BundleAnalysisResult, projectName: string): string;
+//# sourceMappingURL=bundleAnalyzer.d.ts.map

package/dist/bundleAnalyzer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundleAnalyzer.d.ts","sourceRoot":"","sources":["../src/bundleAnalyzer.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;CAChD;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,iBAAiB,EAAE,mBAAmB,EAAE,CAAC;IACzC,eAAe,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,UAAU,EAAE,GAAG,EAAE,EACjB,KAAK,EAAE,GAAG,EAAE,EACZ,UAAU,EAAE,MAAM,GACjB,oBAAoB,CAuBtB;AAuJD;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,oBAAoB,EAC9B,WAAW,EAAE,MAAM,GAClB,MAAM,CAmOR"}

package/dist/bundleAnalyzer.js

@@ -0,0 +1,375 @@
+import _traverse from '@babel/traverse';
+const traverse = typeof _traverse === 'function' ? _traverse : _traverse.default;
+/**
+ * Estimate bundle size impact per component
+ */
+export function analyzeBundleImpact(components, files, sourceCode) {
+    const componentInfo = [];
+    for (const component of components) {
+        const info = estimateComponentSize(component, sourceCode);
+        componentInfo.push(info);
+    }
+    // Sort by size
+    componentInfo.sort((a, b) => b.estimatedSize - a.estimatedSize);
+    const totalSize = componentInfo.reduce((sum, c) => sum + c.estimatedSize, 0);
+    const avgSize = totalSize / componentInfo.length || 0;
+    const recommendations = generateBundleRecommendations(componentInfo, totalSize);
+    return {
+        components: componentInfo,
+        totalEstimatedSize: totalSize,
+        averageComponentSize: avgSize,
+        largestComponents: componentInfo.slice(0, 5),
+        recommendations,
+    };
+}
+/**
+ * Estimate size of a single component in bytes
+ */
+function estimateComponentSize(component, sourceCode) {
+    let size = 0;
+    let lineCount = 0;
+    let exportCount = 0;
+    let dependencyCount = 0;
+    let complexity = 0;
+    // Count lines
+    if (component.code) {
+        lineCount = component.code.split('\n').length;
+        size += lineCount * 4; // ~4 bytes per line average
+    }
+    // Count exports
+    component.path.traverse({
+        ExportNamedDeclaration() {
+            exportCount++;
+            size += 100; // export overhead
+        },
+        ExportDefaultDeclaration() {
+            exportCount++;
+            size += 100;
+        },
+    });
+    // Count dependencies
+    component.path.traverse({
+        ImportDeclaration() {
+            dependencyCount++;
+            size += 80;
+        },
+        CallExpression(path) {
+            if (path.node.callee.type === 'Import') {
+                dependencyCount++;
+                size += 100; // dynamic import is heavier
+            }
+        },
+    });
+    // Estimate complexity
+    component.path.traverse({
+        IfStatement() {
+            complexity++;
+            size += 30;
+        },
+        FunctionDeclaration() {
+            complexity++;
+            size += 50;
+        },
+        ArrowFunctionExpression() {
+            complexity++;
+            size += 40;
+        },
+    });
+    // Add base overhead
+    size += 200;
+    const impact = determineImpact(size, lineCount, complexity);
+    return {
+        name: component.name || 'Anonymous',
+        file: component.file || 'unknown',
+        estimatedSize: size,
+        dependencies: dependencyCount,
+        exports: exportCount,
+        complexity: lineCount,
+        impact,
+    };
+}
+/**
+ * Determine bundle impact level
+ */
+function determineImpact(size, lines, complexity) {
+    let score = 0;
+    // Size factor
+    if (size > 10000)
+        score += 3; // 10KB+
+    else if (size > 5000)
+        score += 2; // 5KB+
+    else if (size > 2000)
+        score += 1; // 2KB+
+    // Lines factor
+    if (lines > 500)
+        score += 3;
+    else if (lines > 300)
+        score += 2;
+    else if (lines > 150)
+        score += 1;
+    // Complexity factor
+    if (complexity > 50)
+        score += 2;
+    else if (complexity > 30)
+        score += 1;
+    if (score >= 7)
+        return 'critical';
+    if (score >= 5)
+        return 'high';
+    if (score >= 2)
+        return 'medium';
+    return 'low';
+}
+/**
+ * Generate recommendations to reduce bundle size
+ */
+function generateBundleRecommendations(components, totalSize) {
+    const recommendations = [];
+    // Check for large components
+    const largeComps = components.filter(c => c.impact === 'critical' || c.impact === 'high');
+    if (largeComps.length > 0) {
+        recommendations.push(`Consider splitting large components: ${largeComps.slice(0, 3).map(c => c.name).join(', ')}`);
+    }
+    // Check for high dependency count
+    const highDepComps = components.filter(c => c.dependencies > 10);
+    if (highDepComps.length > 0) {
+        recommendations.push(`These components have many dependencies (${highDepComps.length}). Consider lazy loading or code splitting.`);
+    }
+    // Check total size
+    if (totalSize > 100000) {
+        recommendations.push(`Total estimated bundle size is ${(totalSize / 1024).toFixed(1)}KB. Consider code-splitting or tree-shaking unused imports.`);
+    }
+    // Check for high complexity
+    const complexComps = components.filter(c => c.complexity > 300);
+    if (complexComps.length > 0) {
+        recommendations.push(`${complexComps.length} component(s) have high complexity (>300 LOC). Extract logic to custom hooks or utilities.`);
+    }
+    return recommendations.length > 0
+        ? recommendations
+        : ['✅ Bundle size is well-optimized. Keep monitoring as code grows.'];
+}
+/**
+ * Generate HTML bundle analysis report
+ */
+export function generateBundleReport(analysis, projectName) {
+    const formatSize = (bytes) => {
+        if (bytes > 1024 * 1024)
+            return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+        if (bytes > 1024)
+            return `${(bytes / 1024).toFixed(1)}KB`;
+        return `${bytes}B`;
+    };
+    const impactColor = {
+        low: '#4caf50',
+        medium: '#ff9800',
+        high: '#f44336',
+        critical: '#b71c1c',
+    };
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Bundle Analysis - ${projectName}</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      background: #f5f5f5;
+      margin: 0;
+      padding: 20px;
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+      padding: 30px;
+    }
+    h1 {
+      color: #1976d2;
+      margin: 0 0 10px 0;
+    }
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 20px;
+      margin: 30px 0;
+    }
+    .stat-card {
+      background: #f8f9fa;
+      border-left: 4px solid #1976d2;
+      padding: 20px;
+      border-radius: 4px;
+    }
+    .stat-label {
+      font-size: 12px;
+      color: #666;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .stat-value {
+      font-size: 28px;
+      font-weight: bold;
+      color: #1976d2;
+      margin-top: 8px;
+    }
+    .recommendations {
+      background: #e3f2fd;
+      border-left: 4px solid #1976d2;
+      padding: 20px;
+      border-radius: 4px;
+      margin: 30px 0;
+    }
+    .recommendations h3 {
+      margin: 0 0 10px 0;
+      color: #1976d2;
+    }
+    .recommendations ul {
+      margin: 0;
+      padding-left: 20px;
+    }
+    .recommendations li {
+      margin: 8px 0;
+      color: #333;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 30px;
+    }
+    th {
+      background: #f5f5f5;
+      padding: 12px;
+      text-align: left;
+      font-weight: 600;
+      border-bottom: 2px solid #e0e0e0;
+    }
+    td {
+      padding: 12px;
+      border-bottom: 1px solid #e0e0e0;
+    }
+    tr:hover {
+      background: #fafafa;
+    }
+    .impact-badge {
+      display: inline-block;
+      padding: 4px 12px;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 600;
+      color: white;
+    }
+    .impact-low {
+      background: #4caf50;
+    }
+    .impact-medium {
+      background: #ff9800;
+    }
+    .impact-high {
+      background: #f44336;
+    }
+    .impact-critical {
+      background: #b71c1c;
+    }
+    .size-bar {
+      display: inline-block;
+      height: 8px;
+      background: #1976d2;
+      border-radius: 4px;
+      margin-right: 8px;
+      vertical-align: middle;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>📦 Bundle Size Analysis - ${projectName}</h1>
+    <p style="color: #666; margin-top: 5px;">Estimated size impact per component</p>
+    
+    <div class="stats-grid">
+      <div class="stat-card">
+        <div class="stat-label">Total Size</div>
+        <div class="stat-value">${formatSize(analysis.totalEstimatedSize)}</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Components</div>
+        <div class="stat-value">${analysis.components.length}</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Avg Component</div>
+        <div class="stat-value">${formatSize(analysis.averageComponentSize)}</div>
+      </div>
+    </div>
+
+    ${analysis.recommendations.length > 0
+        ? `
+    <div class="recommendations">
+      <h3>💡 Recommendations</h3>
+      <ul>
+        ${analysis.recommendations.map(rec => `<li>${rec}</li>`).join('')}
+      </ul>
+    </div>
+    `
+        : ''}
+
+    <h2 style="margin-top: 40px; color: #333;">📊 Component Breakdown</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Component</th>
+          <th>Est. Size</th>
+          <th>LOC</th>
+          <th>Dependencies</th>
+          <th>Exports</th>
+          <th>Impact</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${analysis.components
+        .map(c => `
+          <tr>
+            <td><strong>${c.name}</strong></td>
+            <td>${formatSize(c.estimatedSize)}</td>
+            <td>${c.complexity}</td>
+            <td>${c.dependencies}</td>
+            <td>${c.exports}</td>
+            <td>
+              <span class="impact-badge impact-${c.impact}">${c.impact.toUpperCase()}</span>
+            </td>
+          </tr>
+        `)
+        .join('')}
+      </tbody>
+    </table>
+
+    <h2 style="margin-top: 40px; color: #333;">🏆 Largest Components</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Rank</th>
+          <th>Component</th>
+          <th>Size</th>
+          <th>% of Total</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${analysis.largestComponents
+        .map((c, i) => `
+          <tr>
+            <td><strong>#${i + 1}</strong></td>
+            <td>${c.name}</td>
+            <td>${formatSize(c.estimatedSize)}</td>
+            <td>
+              ${((c.estimatedSize / analysis.totalEstimatedSize) * 100).toFixed(1)}%
+              <div class="size-bar" style="width: ${((c.estimatedSize / analysis.totalEstimatedSize) * 200).toFixed(0)}px;"></div>
+            </td>
+          </tr>
+        `)
+        .join('')}
+      </tbody>
+    </table>
+  </div>
+</body>
+</html>`;
+}