react-code-smell-detector 1.0.1 → 1.2.0

package/src/detectors/typescript.ts

@@ -0,0 +1,151 @@
+import * as t from '@babel/types';
+import { ParsedComponent, getCodeSnippet } from '../parser/index.js';
+import { CodeSmell, DetectorConfig, DEFAULT_CONFIG } from '../types/index.js';
+
+/**
+ * Detects TypeScript-specific code smells:
+ * - Overuse of 'any' type
+ * - Missing return type on functions
+ * - Non-null assertion operator (!)
+ * - Type assertions (as) that could be avoided
+ */
+export function detectTypescriptIssues(
+  component: ParsedComponent,
+  filePath: string,
+  sourceCode: string,
+  config: DetectorConfig = DEFAULT_CONFIG
+): CodeSmell[] {
+  if (!config.checkTypescript) return [];
+  
+  // Only run on TypeScript files
+  if (!filePath.endsWith('.ts') && !filePath.endsWith('.tsx')) return [];
+
+  const smells: CodeSmell[] = [];
+
+  // Detect 'any' type usage
+  component.path.traverse({
+    TSAnyKeyword(path) {
+      const loc = path.node.loc;
+      smells.push({
+        type: 'ts-any-usage',
+        severity: 'warning',
+        message: `Using "any" type in "${component.name}"`,
+        file: filePath,
+        line: loc?.start.line || 0,
+        column: loc?.start.column || 0,
+        suggestion: 'Use a specific type, "unknown", or create an interface',
+        codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
+      });
+    },
+  });
+
+  // Detect functions without return type (only in complex functions)
+  component.path.traverse({
+    FunctionDeclaration(path) {
+      // Skip if function has explicit return type
+      if (path.node.returnType) return;
+      
+      // Check if function body has return statements
+      let hasReturn = false;
+      path.traverse({
+        ReturnStatement(returnPath) {
+          if (returnPath.node.argument) {
+            hasReturn = true;
+          }
+        },
+      });
+      
+      if (hasReturn) {
+        const loc = path.node.loc;
+        smells.push({
+          type: 'ts-missing-return-type',
+          severity: 'info',
+          message: `Function "${path.node.id?.name || 'anonymous'}" missing return type`,
+          file: filePath,
+          line: loc?.start.line || 0,
+          column: loc?.start.column || 0,
+          suggestion: 'Add explicit return type: function name(): ReturnType { ... }',
+          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
+        });
+      }
+    },
+
+    ArrowFunctionExpression(path) {
+      // Only check arrow functions assigned to variables with 5+ lines
+      if (!path.node.returnType) {
+        const body = path.node.body;
+        
+        // Skip simple arrow functions (single expression)
+        if (!t.isBlockStatement(body)) return;
+        
+        // Check complexity - only flag if function is substantial
+        const startLine = path.node.loc?.start.line || 0;
+        const endLine = path.node.loc?.end.line || 0;
+        
+        if (endLine - startLine >= 5) {
+          // Check if parent is variable declarator (assigned to variable)
+          const parent = path.parent;
+          
+          if (t.isVariableDeclarator(parent) && t.isIdentifier(parent.id)) {
+            const loc = path.node.loc;
+            smells.push({
+              type: 'ts-missing-return-type',
+              severity: 'info',
+              message: `Arrow function "${parent.id.name}" missing return type`,
+              file: filePath,
+              line: loc?.start.line || 0,
+              column: loc?.start.column || 0,
+              suggestion: 'Add return type: const name = (): ReturnType => { ... }',
+              codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
+            });
+          }
+        }
+      }
+    },
+  });
+
+  // Detect non-null assertion operator (!)
+  component.path.traverse({
+    TSNonNullExpression(path) {
+      const loc = path.node.loc;
+      smells.push({
+        type: 'ts-non-null-assertion',
+        severity: 'warning',
+        message: `Non-null assertion (!) bypasses type safety in "${component.name}"`,
+        file: filePath,
+        line: loc?.start.line || 0,
+        column: loc?.start.column || 0,
+        suggestion: 'Use optional chaining (?.) or proper null checks instead',
+        codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
+      });
+    },
+  });
+
+  // Detect type assertions (as keyword) - these can hide type errors
+  component.path.traverse({
+    TSAsExpression(path) {
+      // Skip assertions to 'const' (used for const assertions)
+      if (t.isTSTypeReference(path.node.typeAnnotation)) {
+        const typeName = path.node.typeAnnotation.typeName;
+        if (t.isIdentifier(typeName) && typeName.name === 'const') return;
+      }
+      
+      // Skip double assertions (as unknown as Type) - already flagged by TypeScript
+      if (t.isTSAsExpression(path.node.expression)) return;
+      
+      const loc = path.node.loc;
+      smells.push({
+        type: 'ts-type-assertion',
+        severity: 'info',
+        message: `Type assertion (as) bypasses type checking in "${component.name}"`,
+        file: filePath,
+        line: loc?.start.line || 0,
+        column: loc?.start.column || 0,
+        suggestion: 'Consider using type guards or proper typing instead of assertions',
+        codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
+      });
+    },
+  });
+
+  return smells;
+}

package/src/htmlReporter.ts

@@ -0,0 +1,464 @@
+import { AnalysisResult, SmellSeverity } from './types/index.js';
+import path from 'path';
+
+/**
+ * Generate a beautiful HTML report with charts and styling
+ */
+export function generateHTMLReport(result: AnalysisResult, rootDir: string): string {
+  const { summary, debtScore, files } = result;
+  
+  // Generate chart data
+  const smellTypeData = Object.entries(summary.smellsByType)
+    .filter(([_, count]) => count > 0)
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 10);
+
+  const severityColors = {
+    error: '#ef4444',
+    warning: '#f59e0b',
+    info: '#3b82f6',
+  };
+
+  const gradeColors: Record<string, string> = {
+    A: '#22c55e',
+    B: '#84cc16',
+    C: '#eab308',
+    D: '#f97316',
+    F: '#ef4444',
+  };
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Code Smell Detector Report</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      min-height: 100vh;
+      color: #e2e8f0;
+      line-height: 1.6;
+    }
+    
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+    
+    header {
+      text-align: center;
+      padding: 3rem 0;
+      border-bottom: 1px solid rgba(255,255,255,0.1);
+      margin-bottom: 2rem;
+    }
+    
+    h1 {
+      font-size: 2.5rem;
+      margin-bottom: 0.5rem;
+      background: linear-gradient(90deg, #60a5fa, #a78bfa);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    
+    .subtitle {
+      color: #94a3b8;
+      font-size: 1.1rem;
+    }
+    
+    .dashboard {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 1.5rem;
+      margin-bottom: 2rem;
+    }
+    
+    .card {
+      background: rgba(255,255,255,0.05);
+      border-radius: 1rem;
+      padding: 1.5rem;
+      border: 1px solid rgba(255,255,255,0.1);
+      backdrop-filter: blur(10px);
+    }
+    
+    .card h2 {
+      font-size: 1rem;
+      text-transform: uppercase;
+      letter-spacing: 0.1em;
+      color: #94a3b8;
+      margin-bottom: 1rem;
+    }
+    
+    .grade-container {
+      display: flex;
+      align-items: center;
+      gap: 2rem;
+    }
+    
+    .grade {
+      font-size: 5rem;
+      font-weight: 800;
+      color: ${gradeColors[debtScore.grade]};
+      text-shadow: 0 0 30px ${gradeColors[debtScore.grade]}40;
+    }
+    
+    .score-details {
+      flex: 1;
+    }
+    
+    .score-bar {
+      height: 8px;
+      background: rgba(255,255,255,0.1);
+      border-radius: 4px;
+      overflow: hidden;
+      margin: 0.5rem 0;
+    }
+    
+    .score-bar-fill {
+      height: 100%;
+      border-radius: 4px;
+      transition: width 1s ease;
+    }
+    
+    .score-label {
+      display: flex;
+      justify-content: space-between;
+      font-size: 0.9rem;
+      color: #94a3b8;
+    }
+    
+    .stat-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 1rem;
+      text-align: center;
+    }
+    
+    .stat-value {
+      font-size: 2rem;
+      font-weight: 700;
+      color: #60a5fa;
+    }
+    
+    .stat-label {
+      font-size: 0.8rem;
+      color: #94a3b8;
+      text-transform: uppercase;
+    }
+    
+    .severity-badges {
+      display: flex;
+      gap: 1rem;
+      margin-top: 1rem;
+    }
+    
+    .severity-badge {
+      padding: 0.5rem 1rem;
+      border-radius: 2rem;
+      font-size: 0.9rem;
+      font-weight: 600;
+    }
+    
+    .severity-error { background: rgba(239,68,68,0.2); color: #ef4444; }
+    .severity-warning { background: rgba(245,158,11,0.2); color: #f59e0b; }
+    .severity-info { background: rgba(59,130,246,0.2); color: #3b82f6; }
+    
+    .issues-by-type {
+      margin-top: 1rem;
+    }
+    
+    .type-bar {
+      display: flex;
+      align-items: center;
+      margin: 0.75rem 0;
+    }
+    
+    .type-name {
+      flex: 1;
+      font-size: 0.9rem;
+    }
+    
+    .type-bar-bg {
+      width: 150px;
+      height: 20px;
+      background: rgba(255,255,255,0.1);
+      border-radius: 4px;
+      overflow: hidden;
+      margin: 0 1rem;
+    }
+    
+    .type-bar-fill {
+      height: 100%;
+      background: linear-gradient(90deg, #60a5fa, #a78bfa);
+      border-radius: 4px;
+    }
+    
+    .type-count {
+      width: 40px;
+      text-align: right;
+      font-weight: 600;
+    }
+    
+    .findings-section {
+      margin-top: 2rem;
+    }
+    
+    .findings-section h2 {
+      font-size: 1.5rem;
+      margin-bottom: 1rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid rgba(255,255,255,0.1);
+    }
+    
+    .file-group {
+      margin-bottom: 1.5rem;
+    }
+    
+    .file-header {
+      font-family: 'Monaco', 'Menlo', monospace;
+      font-size: 0.9rem;
+      color: #60a5fa;
+      padding: 0.75rem 1rem;
+      background: rgba(96,165,250,0.1);
+      border-radius: 0.5rem 0.5rem 0 0;
+      border: 1px solid rgba(96,165,250,0.2);
+      border-bottom: none;
+    }
+    
+    .issue {
+      padding: 1rem;
+      background: rgba(255,255,255,0.03);
+      border: 1px solid rgba(255,255,255,0.1);
+      border-top: none;
+    }
+    
+    .issue:last-child {
+      border-radius: 0 0 0.5rem 0.5rem;
+    }
+    
+    .issue-header {
+      display: flex;
+      align-items: flex-start;
+      gap: 0.75rem;
+    }
+    
+    .issue-icon {
+      font-size: 1rem;
+      padding: 0.25rem;
+    }
+    
+    .issue-message {
+      flex: 1;
+      font-weight: 500;
+    }
+    
+    .issue-line {
+      font-family: monospace;
+      font-size: 0.8rem;
+      color: #94a3b8;
+    }
+    
+    .issue-suggestion {
+      margin-top: 0.5rem;
+      padding: 0.5rem 0.75rem;
+      background: rgba(167,139,250,0.1);
+      border-left: 3px solid #a78bfa;
+      font-size: 0.9rem;
+      color: #c4b5fd;
+    }
+    
+    .code-snippet {
+      margin-top: 0.5rem;
+      padding: 0.75rem;
+      background: #0d1117;
+      border-radius: 0.5rem;
+      font-family: 'Monaco', 'Menlo', monospace;
+      font-size: 0.8rem;
+      overflow-x: auto;
+      white-space: pre;
+      color: #c9d1d9;
+    }
+    
+    .refactor-time {
+      font-size: 1.1rem;
+      color: #f59e0b;
+      margin-top: 0.5rem;
+    }
+    
+    footer {
+      text-align: center;
+      padding: 2rem;
+      color: #64748b;
+      font-size: 0.9rem;
+    }
+    
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(10px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    
+    .card, .file-group {
+      animation: fadeIn 0.5s ease forwards;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>🔍 Code Smell Detector</h1>
+      <p class="subtitle">Analysis Report - ${new Date().toLocaleDateString()}</p>
+    </header>
+    
+    <div class="dashboard">
+      <div class="card">
+        <h2>Technical Debt Score</h2>
+        <div class="grade-container">
+          <div class="grade">${debtScore.grade}</div>
+          <div class="score-details">
+            <div class="score-label"><span>Overall Score</span><span>${debtScore.score}/100</span></div>
+            <div class="score-bar">
+              <div class="score-bar-fill" style="width: ${debtScore.score}%; background: ${gradeColors[debtScore.grade]}"></div>
+            </div>
+            ${generateBreakdownBars(debtScore.breakdown)}
+            <p class="refactor-time">⏱️ Est. refactor time: ${debtScore.estimatedRefactorTime}</p>
+          </div>
+        </div>
+      </div>
+      
+      <div class="card">
+        <h2>Summary</h2>
+        <div class="stat-grid">
+          <div>
+            <div class="stat-value">${summary.totalFiles}</div>
+            <div class="stat-label">Files</div>
+          </div>
+          <div>
+            <div class="stat-value">${summary.totalComponents}</div>
+            <div class="stat-label">Components</div>
+          </div>
+          <div>
+            <div class="stat-value">${summary.totalSmells}</div>
+            <div class="stat-label">Issues</div>
+          </div>
+        </div>
+        <div class="severity-badges">
+          <span class="severity-badge severity-error">${summary.smellsBySeverity.error} Errors</span>
+          <span class="severity-badge severity-warning">${summary.smellsBySeverity.warning} Warnings</span>
+          <span class="severity-badge severity-info">${summary.smellsBySeverity.info} Info</span>
+        </div>
+      </div>
+      
+      <div class="card">
+        <h2>Issues by Type</h2>
+        <div class="issues-by-type">
+          ${smellTypeData.map(([type, count]) => {
+            const maxCount = Math.max(...smellTypeData.map(([_, c]) => c));
+            const percentage = (count / maxCount) * 100;
+            return `
+              <div class="type-bar">
+                <span class="type-name">${formatTypeLabel(type)}</span>
+                <div class="type-bar-bg">
+                  <div class="type-bar-fill" style="width: ${percentage}%"></div>
+                </div>
+                <span class="type-count">${count}</span>
+              </div>
+            `;
+          }).join('')}
+        </div>
+      </div>
+    </div>
+    
+    <section class="findings-section">
+      <h2>📋 Detailed Findings</h2>
+      ${files.filter(f => f.smells.length > 0).map(file => `
+        <div class="file-group">
+          <div class="file-header">${path.relative(rootDir, file.file)}</div>
+          ${file.smells.map(smell => `
+            <div class="issue">
+              <div class="issue-header">
+                <span class="issue-icon">${getSeverityIcon(smell.severity)}</span>
+                <span class="issue-message" style="color: ${severityColors[smell.severity]}">${escapeHtml(smell.message)}</span>
+                <span class="issue-line">Line ${smell.line}</span>
+              </div>
+              <div class="issue-suggestion">💡 ${escapeHtml(smell.suggestion)}</div>
+              ${smell.codeSnippet ? `<div class="code-snippet">${escapeHtml(smell.codeSnippet)}</div>` : ''}
+            </div>
+          `).join('')}
+        </div>
+      `).join('')}
+    </section>
+    
+    <footer>
+      Generated by React Code Smell Detector • ${new Date().toISOString()}
+    </footer>
+  </div>
+</body>
+</html>`;
+}
+
+function generateBreakdownBars(breakdown: { useEffectScore: number; propDrillingScore: number; componentSizeScore: number; memoizationScore: number }): string {
+  const items = [
+    { label: 'useEffect', score: breakdown.useEffectScore },
+    { label: 'Prop Drilling', score: breakdown.propDrillingScore },
+    { label: 'Component Size', score: breakdown.componentSizeScore },
+    { label: 'Memoization', score: breakdown.memoizationScore },
+  ];
+  
+  return items.map(({ label, score }) => {
+    const color = score >= 80 ? '#22c55e' : score >= 60 ? '#eab308' : '#ef4444';
+    return `
+      <div class="score-label" style="margin-top: 0.5rem"><span>${label}</span><span>${score}</span></div>
+      <div class="score-bar">
+        <div class="score-bar-fill" style="width: ${score}%; background: ${color}"></div>
+      </div>
+    `;
+  }).join('');
+}
+
+function formatTypeLabel(type: string): string {
+  const labels: Record<string, string> = {
+    'useEffect-overuse': '⚡ useEffect',
+    'prop-drilling': '🔗 Prop Drilling',
+    'large-component': '📐 Large Component',
+    'unmemoized-calculation': '💾 Unmemoized',
+    'inline-function-prop': '📎 Inline Func',
+    'deep-nesting': '📊 Deep Nesting',
+    'missing-key': '🔑 Missing Key',
+    'magic-value': '🔢 Magic Value',
+    'debug-statement': '🐛 Debug',
+    'todo-comment': '📝 TODO',
+    'security-xss': '🔒 Security XSS',
+    'security-eval': '🔒 Security Eval',
+    'security-secrets': '🔑 Secrets',
+    'a11y-missing-alt': '♿ Missing Alt',
+    'a11y-missing-label': '♿ Missing Label',
+    'ts-any-usage': '🔷 TS any',
+    'ts-missing-return-type': '🔷 TS Return Type',
+  };
+  return labels[type] || type.replace(/-/g, ' ');
+}
+
+function getSeverityIcon(severity: SmellSeverity): string {
+  switch (severity) {
+    case 'error': return '❌';
+    case 'warning': return '⚠️';
+    case 'info': return 'ℹ️';
+  }
+}
+
+function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}

package/src/reporter.ts

@@ -249,6 +249,43 @@ function formatSmellType(type: string): string {
     'nested-ternary': '❓ Nested Ternary',
     'dead-code': '💀 Dead Code',
     'magic-value': '🔢 Magic Value',
+    // Next.js
+    'nextjs-client-server-boundary': '▲ Next.js Client/Server Boundary',
+    'nextjs-missing-metadata': '▲ Next.js Missing Metadata',
+    'nextjs-image-unoptimized': '▲ Next.js Unoptimized Image',
+    'nextjs-router-misuse': '▲ Next.js Router Misuse',
+    // React Native
+    'rn-inline-style': '📱 RN Inline Style',
+    'rn-missing-accessibility': '📱 RN Missing Accessibility',
+    'rn-performance-issue': '📱 RN Performance Issue',
+    // Node.js
+    'nodejs-callback-hell': '🟢 Node.js Callback Hell',
+    'nodejs-unhandled-promise': '🟢 Node.js Unhandled Promise',
+    'nodejs-sync-io': '🟢 Node.js Sync I/O',
+    'nodejs-missing-error-handling': '🟢 Node.js Missing Error Handling',
+    // JavaScript
+    'js-var-usage': '📜 JS var Usage',
+    'js-loose-equality': '📜 JS Loose Equality',
+    'js-implicit-coercion': '📜 JS Implicit Coercion',
+    'js-global-pollution': '📜 JS Global Pollution',
+    // TypeScript
+    'ts-any-usage': '🔷 TS any Usage',
+    'ts-missing-return-type': '🔷 TS Missing Return Type',
+    'ts-non-null-assertion': '🔷 TS Non-null Assertion',
+    'ts-type-assertion': '🔷 TS Type Assertion',
+    // Debug
+    'debug-statement': '🐛 Debug Statement',
+    'todo-comment': '📝 TODO/FIXME Comment',
+    // Security
+    'security-xss': '🔒 XSS Vulnerability',
+    'security-eval': '🔒 Eval Usage',
+    'security-secrets': '🔒 Exposed Secret',
+    // Accessibility
+    'a11y-missing-alt': '♿ Missing Alt Text',
+    'a11y-missing-label': '♿ Missing Label',
+    'a11y-interactive-role': '♿ Interactive Role',
+    'a11y-keyboard': '♿ Keyboard Handler',
+    'a11y-semantic': '♿ Semantic HTML',
   };
   return labels[type] || type;
 }