react-code-smell-detector 1.2.0 → 1.4.1

package/src/detectors/useEffect.ts

@@ -1,117 +0,0 @@
-import * as t from '@babel/types';
-import { ParsedComponent, getCodeSnippet } from '../parser/index.js';
-import { CodeSmell, DetectorConfig, DEFAULT_CONFIG } from '../types/index.js';
-
-export function detectUseEffectOveruse(
-  component: ParsedComponent,
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG
-): CodeSmell[] {
-  const smells: CodeSmell[] = [];
-  const { useEffect } = component.hooks;
-
-  // Check for too many useEffects
-  if (useEffect.length > config.maxUseEffectsPerComponent) {
-    smells.push({
-      type: 'useEffect-overuse',
-      severity: 'warning',
-      message: `Component "${component.name}" has ${useEffect.length} useEffect hooks (max recommended: ${config.maxUseEffectsPerComponent})`,
-      file: filePath,
-      line: component.startLine,
-      column: 0,
-      suggestion: 'Consider extracting logic into custom hooks or combining related effects',
-      codeSnippet: getCodeSnippet(sourceCode, component.startLine),
-    });
-  }
-
-  // Check each useEffect for issues
-  useEffect.forEach((effect, index) => {
-    const loc = effect.loc;
-    if (!loc) return;
-
-    // Check for empty dependency array with async operations
-    const deps = effect.arguments[1];
-    const callback = effect.arguments[0];
-
-    if (t.isArrayExpression(deps) && deps.elements.length === 0) {
-      // Empty dependency array - check if it's justified
-      let hasAsyncOperation = false;
-      let hasStateUpdate = false;
-
-      if (t.isArrowFunctionExpression(callback) || t.isFunctionExpression(callback)) {
-        const body = callback.body;
-        const checkNode = (node: t.Node) => {
-          if (t.isAwaitExpression(node)) hasAsyncOperation = true;
-          if (t.isCallExpression(node)) {
-            const callee = node.callee;
-            if (t.isIdentifier(callee) && callee.name.startsWith('set')) {
-              hasStateUpdate = true;
-            }
-          }
-        };
-
-        if (t.isBlockStatement(body)) {
-          body.body.forEach(stmt => {
-            t.traverseFast(stmt, checkNode);
-          });
-        }
-      }
-
-      if (hasAsyncOperation && hasStateUpdate) {
-        smells.push({
-          type: 'useEffect-overuse',
-          severity: 'info',
-          message: `useEffect #${index + 1} in "${component.name}" has empty deps but contains async state updates`,
-          file: filePath,
-          line: loc.start.line,
-          column: loc.start.column,
-          suggestion: 'Consider using React Query, SWR, or a custom hook for data fetching',
-          codeSnippet: getCodeSnippet(sourceCode, loc.start.line),
-        });
-      }
-    }
-
-    // Check for missing cleanup
-    if (t.isArrowFunctionExpression(callback) || t.isFunctionExpression(callback)) {
-      let hasSubscription = false;
-      let hasCleanup = false;
-
-      const checkSubscription = (node: t.Node) => {
-        if (t.isCallExpression(node) && t.isMemberExpression(node.callee)) {
-          const prop = node.callee.property;
-          if (t.isIdentifier(prop)) {
-            if (['addEventListener', 'subscribe', 'on', 'setInterval', 'setTimeout'].includes(prop.name)) {
-              hasSubscription = true;
-            }
-          }
-        }
-      };
-
-      const body = callback.body;
-      if (t.isBlockStatement(body)) {
-        body.body.forEach(stmt => {
-          t.traverseFast(stmt, checkSubscription);
-          if (t.isReturnStatement(stmt) && stmt.argument) {
-            hasCleanup = true;
-          }
-        });
-      }
-
-      if (hasSubscription && !hasCleanup) {
-        smells.push({
-          type: 'useEffect-overuse',
-          severity: 'error',
-          message: `useEffect in "${component.name}" sets up subscription but has no cleanup function`,
-          file: filePath,
-          line: loc.start.line,
-          column: loc.start.column,
-          suggestion: 'Add a cleanup function to remove event listeners/subscriptions',
-          codeSnippet: getCodeSnippet(sourceCode, loc.start.line),
-        });
-      }
-    }
-  });
-
-  return smells;
-}

package/src/htmlReporter.ts

@@ -1,464 +0,0 @@
-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/index.ts

@@ -1,4 +0,0 @@
-export { analyzeProject, type AnalyzerOptions } from './analyzer.js';
-export { reportResults, type ReporterOptions } from './reporter.js';
-export * from './types/index.js';
-export { parseFile, parseCode, type ParseResult, type ParsedComponent } from './parser/index.js';