react-code-smell-detector 1.0.0

package/src/reporter.ts

@@ -0,0 +1,248 @@
+import chalk from 'chalk';
+import { AnalysisResult, CodeSmell, SmellSeverity } from './types/index.js';
+import path from 'path';
+
+export interface ReporterOptions {
+  format: 'console' | 'json' | 'markdown';
+  showCodeSnippets: boolean;
+  rootDir: string;
+}
+
+export function reportResults(result: AnalysisResult, options: ReporterOptions): string {
+  switch (options.format) {
+    case 'json':
+      return JSON.stringify(result, null, 2);
+    case 'markdown':
+      return formatMarkdown(result, options);
+    case 'console':
+    default:
+      return formatConsole(result, options);
+  }
+}
+
+function formatConsole(result: AnalysisResult, options: ReporterOptions): string {
+  const lines: string[] = [];
+  const { summary, debtScore, files } = result;
+
+  // Header
+  lines.push('');
+  lines.push(chalk.bold.cyan('╔══════════════════════════════════════════════════════════════╗'));
+  lines.push(chalk.bold.cyan('║') + chalk.bold.white('           🔍 React Code Smell Detector Report              ') + chalk.bold.cyan('║'));
+  lines.push(chalk.bold.cyan('╚══════════════════════════════════════════════════════════════╝'));
+  lines.push('');
+
+  // Technical Debt Score
+  const gradeColor = getGradeColor(debtScore.grade);
+  lines.push(chalk.bold('📊 Technical Debt Score'));
+  lines.push('');
+  lines.push(`   ${chalk.bold('Grade:')} ${gradeColor(debtScore.grade)} ${getScoreBar(debtScore.score)} ${debtScore.score}/100`);
+  lines.push('');
+  lines.push(chalk.dim('   Breakdown:'));
+  lines.push(`   ${chalk.yellow('⚡')} useEffect:     ${getSmallBar(debtScore.breakdown.useEffectScore)} ${debtScore.breakdown.useEffectScore}`);
+  lines.push(`   ${chalk.blue('🔗')} Prop Drilling: ${getSmallBar(debtScore.breakdown.propDrillingScore)} ${debtScore.breakdown.propDrillingScore}`);
+  lines.push(`   ${chalk.magenta('📐')} Component Size:${getSmallBar(debtScore.breakdown.componentSizeScore)} ${debtScore.breakdown.componentSizeScore}`);
+  lines.push(`   ${chalk.green('💾')} Memoization:   ${getSmallBar(debtScore.breakdown.memoizationScore)} ${debtScore.breakdown.memoizationScore}`);
+  lines.push('');
+  lines.push(`   ${chalk.dim('Estimated refactor time:')} ${chalk.yellow(debtScore.estimatedRefactorTime)}`);
+  lines.push('');
+
+  // Summary
+  lines.push(chalk.bold('📈 Summary'));
+  lines.push('');
+  lines.push(`   Files analyzed:  ${chalk.cyan(summary.totalFiles)}`);
+  lines.push(`   Components found: ${chalk.cyan(summary.totalComponents)}`);
+  lines.push(`   Total issues:     ${getSeverityLabel(summary.totalSmells, summary.smellsBySeverity)}`);
+  lines.push('');
+
+  // Issues by type
+  if (summary.totalSmells > 0) {
+    lines.push(chalk.bold('🏷️  Issues by Type'));
+    lines.push('');
+    Object.entries(summary.smellsByType).forEach(([type, count]) => {
+      if (count > 0) {
+        lines.push(`   ${chalk.dim('•')} ${formatSmellType(type)}: ${chalk.yellow(count)}`);
+      }
+    });
+    lines.push('');
+  }
+
+  // Detailed findings
+  if (files.some(f => f.smells.length > 0)) {
+    lines.push(chalk.bold('📋 Detailed Findings'));
+    lines.push('');
+
+    files.forEach(file => {
+      if (file.smells.length === 0) return;
+
+      const relativePath = path.relative(options.rootDir, file.file);
+      lines.push(chalk.bold.underline(relativePath));
+      lines.push('');
+
+      file.smells.forEach(smell => {
+        const icon = getSeverityIcon(smell.severity);
+        const color = getSeverityColor(smell.severity);
+        
+        lines.push(`  ${icon} ${color(smell.message)}`);
+        lines.push(`     ${chalk.dim('Line')} ${smell.line} ${chalk.dim('•')} ${chalk.italic.cyan(smell.suggestion)}`);
+        
+        if (options.showCodeSnippets && smell.codeSnippet) {
+          lines.push('');
+          smell.codeSnippet.split('\n').forEach(line => {
+            if (line.startsWith('>')) {
+              lines.push(chalk.red(line));
+            } else {
+              lines.push(chalk.dim(line));
+            }
+          });
+        }
+        lines.push('');
+      });
+    });
+  }
+
+  // Footer
+  if (summary.totalSmells === 0) {
+    lines.push(chalk.green.bold('✨ No code smells detected! Your code looks great.'));
+  } else {
+    lines.push(chalk.dim('─'.repeat(64)));
+    lines.push(chalk.dim(`Found ${summary.totalSmells} issue(s). Run with --help for more options.`));
+  }
+  lines.push('');
+
+  return lines.join('\n');
+}
+
+function formatMarkdown(result: AnalysisResult, options: ReporterOptions): string {
+  const lines: string[] = [];
+  const { summary, debtScore, files } = result;
+
+  lines.push('# React Code Smell Detector Report');
+  lines.push('');
+  lines.push('## Technical Debt Score');
+  lines.push('');
+  lines.push(`| Metric | Score |`);
+  lines.push(`|--------|-------|`);
+  lines.push(`| **Overall Grade** | **${debtScore.grade}** (${debtScore.score}/100) |`);
+  lines.push(`| useEffect Usage | ${debtScore.breakdown.useEffectScore}/100 |`);
+  lines.push(`| Prop Drilling | ${debtScore.breakdown.propDrillingScore}/100 |`);
+  lines.push(`| Component Size | ${debtScore.breakdown.componentSizeScore}/100 |`);
+  lines.push(`| Memoization | ${debtScore.breakdown.memoizationScore}/100 |`);
+  lines.push('');
+  lines.push(`**Estimated Refactor Time:** ${debtScore.estimatedRefactorTime}`);
+  lines.push('');
+
+  lines.push('## Summary');
+  lines.push('');
+  lines.push(`- **Files analyzed:** ${summary.totalFiles}`);
+  lines.push(`- **Components found:** ${summary.totalComponents}`);
+  lines.push(`- **Total issues:** ${summary.totalSmells}`);
+  lines.push(`  - Errors: ${summary.smellsBySeverity.error}`);
+  lines.push(`  - Warnings: ${summary.smellsBySeverity.warning}`);
+  lines.push(`  - Info: ${summary.smellsBySeverity.info}`);
+  lines.push('');
+
+  if (summary.totalSmells > 0) {
+    lines.push('## Issues by Type');
+    lines.push('');
+    Object.entries(summary.smellsByType).forEach(([type, count]) => {
+      if (count > 0) {
+        lines.push(`- ${formatSmellType(type)}: ${count}`);
+      }
+    });
+    lines.push('');
+
+    lines.push('## Detailed Findings');
+    lines.push('');
+
+    files.forEach(file => {
+      if (file.smells.length === 0) return;
+
+      const relativePath = path.relative(options.rootDir, file.file);
+      lines.push(`### ${relativePath}`);
+      lines.push('');
+
+      file.smells.forEach(smell => {
+        const icon = smell.severity === 'error' ? '🔴' : smell.severity === 'warning' ? '🟡' : '🔵';
+        lines.push(`#### ${icon} ${smell.message}`);
+        lines.push('');
+        lines.push(`- **Line:** ${smell.line}`);
+        lines.push(`- **Severity:** ${smell.severity}`);
+        lines.push(`- **Suggestion:** ${smell.suggestion}`);
+        
+        if (options.showCodeSnippets && smell.codeSnippet) {
+          lines.push('');
+          lines.push('```tsx');
+          lines.push(smell.codeSnippet);
+          lines.push('```');
+        }
+        lines.push('');
+      });
+    });
+  }
+
+  return lines.join('\n');
+}
+
+// Helper functions
+function getGradeColor(grade: string): (text: string) => string {
+  switch (grade) {
+    case 'A': return chalk.green.bold;
+    case 'B': return chalk.greenBright.bold;
+    case 'C': return chalk.yellow.bold;
+    case 'D': return chalk.rgb(255, 165, 0).bold;
+    case 'F': return chalk.red.bold;
+    default: return chalk.white.bold;
+  }
+}
+
+function getScoreBar(score: number): string {
+  const filled = Math.round(score / 5);
+  const empty = 20 - filled;
+  const color = score >= 80 ? chalk.green : score >= 60 ? chalk.yellow : chalk.red;
+  return color('█'.repeat(filled)) + chalk.dim('░'.repeat(empty));
+}
+
+function getSmallBar(score: number): string {
+  const filled = Math.round(score / 10);
+  const empty = 10 - filled;
+  const color = score >= 80 ? chalk.green : score >= 60 ? chalk.yellow : chalk.red;
+  return color('█'.repeat(filled)) + chalk.dim('░'.repeat(empty));
+}
+
+function getSeverityIcon(severity: SmellSeverity): string {
+  switch (severity) {
+    case 'error': return chalk.red('✖');
+    case 'warning': return chalk.yellow('⚠');
+    case 'info': return chalk.blue('ℹ');
+  }
+}
+
+function getSeverityColor(severity: SmellSeverity): (text: string) => string {
+  switch (severity) {
+    case 'error': return chalk.red;
+    case 'warning': return chalk.yellow;
+    case 'info': return chalk.blue;
+  }
+}
+
+function getSeverityLabel(total: number, bySeverity: Record<SmellSeverity, number>): string {
+  const parts: string[] = [];
+  if (bySeverity.error > 0) parts.push(chalk.red(`${bySeverity.error} error(s)`));
+  if (bySeverity.warning > 0) parts.push(chalk.yellow(`${bySeverity.warning} warning(s)`));
+  if (bySeverity.info > 0) parts.push(chalk.blue(`${bySeverity.info} info`));
+  return parts.length > 0 ? parts.join(', ') : chalk.green('0');
+}
+
+function formatSmellType(type: string): string {
+  const labels: Record<string, string> = {
+    'useEffect-overuse': '⚡ useEffect Overuse',
+    'prop-drilling': '🔗 Prop Drilling',
+    'large-component': '📐 Large Component',
+    'unmemoized-calculation': '💾 Unmemoized Calculation',
+    'missing-dependency': '🔍 Missing Dependency',
+    'state-in-loop': '🔄 State in Loop',
+    'inline-function-prop': '📎 Inline Function Prop',
+    'deep-nesting': '📊 Deep Nesting',
+  };
+  return labels[type] || type;
+}

package/src/types/index.ts

@@ -0,0 +1,86 @@
+export type SmellSeverity = 'error' | 'warning' | 'info';
+
+export type SmellType = 
+  | 'useEffect-overuse'
+  | 'prop-drilling'
+  | 'large-component'
+  | 'unmemoized-calculation'
+  | 'missing-dependency'
+  | 'state-in-loop'
+  | 'inline-function-prop'
+  | 'deep-nesting';
+
+export interface CodeSmell {
+  type: SmellType;
+  severity: SmellSeverity;
+  message: string;
+  file: string;
+  line: number;
+  column: number;
+  suggestion: string;
+  codeSnippet?: string;
+}
+
+export interface ComponentInfo {
+  name: string;
+  file: string;
+  startLine: number;
+  endLine: number;
+  lineCount: number;
+  useEffectCount: number;
+  useStateCount: number;
+  useMemoCount: number;
+  useCallbackCount: number;
+  propsCount: number;
+  propsDrillingDepth: number;
+  hasExpensiveCalculation: boolean;
+}
+
+export interface FileAnalysis {
+  file: string;
+  components: ComponentInfo[];
+  smells: CodeSmell[];
+  imports: string[];
+}
+
+export interface AnalysisResult {
+  files: FileAnalysis[];
+  summary: AnalysisSummary;
+  debtScore: TechnicalDebtScore;
+}
+
+export interface AnalysisSummary {
+  totalFiles: number;
+  totalComponents: number;
+  totalSmells: number;
+  smellsByType: Record<SmellType, number>;
+  smellsBySeverity: Record<SmellSeverity, number>;
+}
+
+export interface TechnicalDebtScore {
+  score: number; // 0-100, 100 = no debt
+  grade: 'A' | 'B' | 'C' | 'D' | 'F';
+  breakdown: {
+    useEffectScore: number;
+    propDrillingScore: number;
+    componentSizeScore: number;
+    memoizationScore: number;
+  };
+  estimatedRefactorTime: string; // e.g., "2-4 hours"
+}
+
+export interface DetectorConfig {
+  maxUseEffectsPerComponent: number;
+  maxPropDrillingDepth: number;
+  maxComponentLines: number;
+  maxPropsCount: number;
+  checkMemoization: boolean;
+}
+
+export const DEFAULT_CONFIG: DetectorConfig = {
+  maxUseEffectsPerComponent: 3,
+  maxPropDrillingDepth: 3,
+  maxComponentLines: 300,
+  maxPropsCount: 7,
+  checkMemoization: true,
+};

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022"],
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "declaration": true,
+    "declarationMap": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}