react-code-smell-detector 1.2.0 → 1.4.1

package/src/parser/index.ts

@@ -1,195 +0,0 @@
-import * as parser from '@babel/parser';
-import _traverse, { NodePath } from '@babel/traverse';
-import * as t from '@babel/types';
-import fs from 'fs/promises';
-
-// Handle ESM/CJS interop
-const traverse = (_traverse as unknown as { default: typeof _traverse }).default || _traverse;
-
-export interface ParsedComponent {
-  name: string;
-  startLine: number;
-  endLine: number;
-  node: t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression;
-  path: NodePath;
-  hooks: {
-    useEffect: t.CallExpression[];
-    useState: t.CallExpression[];
-    useMemo: t.CallExpression[];
-    useCallback: t.CallExpression[];
-    useRef: t.CallExpression[];
-    custom: t.CallExpression[];
-  };
-  props: string[];
-  jsxDepth: number;
-}
-
-export interface ParseResult {
-  ast: t.File;
-  components: ParsedComponent[];
-  imports: string[];
-  sourceCode: string;
-}
-
-export async function parseFile(filePath: string): Promise<ParseResult> {
-  const sourceCode = await fs.readFile(filePath, 'utf-8');
-  return parseCode(sourceCode, filePath);
-}
-
-export function parseCode(sourceCode: string, filePath: string = 'unknown'): ParseResult {
-  const ast = parser.parse(sourceCode, {
-    sourceType: 'module',
-    plugins: [
-      'jsx',
-      'typescript',
-      'decorators-legacy',
-      'classProperties',
-      'optionalChaining',
-      'nullishCoalescingOperator',
-    ],
-    sourceFilename: filePath,
-  });
-
-  const components: ParsedComponent[] = [];
-  const imports: string[] = [];
-
-  traverse(ast, {
-    ImportDeclaration(path) {
-      imports.push(path.node.source.value);
-    },
-
-    FunctionDeclaration(path) {
-      if (isReactComponent(path.node.id?.name, path)) {
-        components.push(extractComponentInfo(path.node.id?.name || 'Anonymous', path));
-      }
-    },
-
-    VariableDeclarator(path) {
-      const init = path.node.init;
-      const id = path.node.id;
-      
-      if (
-        t.isIdentifier(id) &&
-        (t.isArrowFunctionExpression(init) || t.isFunctionExpression(init))
-      ) {
-        if (isReactComponent(id.name, path)) {
-          components.push(extractComponentInfo(id.name, path, init));
-        }
-      }
-    },
-  });
-
-  return { ast, components, imports, sourceCode };
-}
-
-function isReactComponent(name: string | undefined, path: NodePath): boolean {
-  if (!name) return false;
-  
-  // Component names start with uppercase
-  if (!/^[A-Z]/.test(name)) return false;
-
-  // Check if it returns JSX
-  let hasJSX = false;
-  path.traverse({
-    JSXElement() {
-      hasJSX = true;
-    },
-    JSXFragment() {
-      hasJSX = true;
-    },
-  });
-
-  return hasJSX;
-}
-
-function extractComponentInfo(
-  name: string,
-  path: NodePath,
-  node?: t.ArrowFunctionExpression | t.FunctionExpression
-): ParsedComponent {
-  const actualNode = node || (path.node as t.FunctionDeclaration);
-  const loc = actualNode.loc;
-
-  const hooks = {
-    useEffect: [] as t.CallExpression[],
-    useState: [] as t.CallExpression[],
-    useMemo: [] as t.CallExpression[],
-    useCallback: [] as t.CallExpression[],
-    useRef: [] as t.CallExpression[],
-    custom: [] as t.CallExpression[],
-  };
-
-  const props: string[] = [];
-  let jsxDepth = 0;
-
-  // Extract hooks
-  path.traverse({
-    CallExpression(callPath) {
-      const callee = callPath.node.callee;
-      if (t.isIdentifier(callee)) {
-        const hookName = callee.name;
-        if (hookName === 'useEffect') hooks.useEffect.push(callPath.node);
-        else if (hookName === 'useState') hooks.useState.push(callPath.node);
-        else if (hookName === 'useMemo') hooks.useMemo.push(callPath.node);
-        else if (hookName === 'useCallback') hooks.useCallback.push(callPath.node);
-        else if (hookName === 'useRef') hooks.useRef.push(callPath.node);
-        else if (hookName.startsWith('use')) hooks.custom.push(callPath.node);
-      }
-    },
-  });
-
-  // Extract props
-  const params = t.isFunctionDeclaration(actualNode) 
-    ? actualNode.params 
-    : actualNode.params;
-    
-  if (params.length > 0) {
-    const firstParam = params[0];
-    if (t.isObjectPattern(firstParam)) {
-      firstParam.properties.forEach(prop => {
-        if (t.isObjectProperty(prop) && t.isIdentifier(prop.key)) {
-          props.push(prop.key.name);
-        } else if (t.isRestElement(prop) && t.isIdentifier(prop.argument)) {
-          props.push(`...${prop.argument.name}`);
-        }
-      });
-    } else if (t.isIdentifier(firstParam)) {
-      props.push(firstParam.name);
-    }
-  }
-
-  // Calculate JSX nesting depth
-  path.traverse({
-    JSXElement: {
-      enter() {
-        jsxDepth++;
-      },
-    },
-  });
-
-  return {
-    name,
-    startLine: loc?.start.line || 0,
-    endLine: loc?.end.line || 0,
-    node: actualNode as any,
-    path,
-    hooks,
-    props,
-    jsxDepth: Math.floor(jsxDepth / 2), // Approximate depth
-  };
-}
-
-export function getCodeSnippet(sourceCode: string, line: number, context: number = 2): string {
-  const lines = sourceCode.split('\n');
-  const start = Math.max(0, line - context - 1);
-  const end = Math.min(lines.length, line + context);
-  
-  return lines
-    .slice(start, end)
-    .map((l, i) => {
-      const lineNum = start + i + 1;
-      const marker = lineNum === line ? '>' : ' ';
-      return `${marker} ${lineNum.toString().padStart(4)} | ${l}`;
-    })
-    .join('\n');
-}

package/src/reporter.ts

@@ -1,291 +0,0 @@
-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',
-    'missing-key': '🔑 Missing Key',
-    'hooks-rules-violation': '⚠️ Hooks Rules Violation',
-    'dependency-array-issue': '📋 Dependency Array Issue',
-    '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;
-}

package/src/types/index.ts

@@ -1,165 +0,0 @@
-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'
-  | 'missing-key'
-  | 'hooks-rules-violation'
-  | 'dependency-array-issue'
-  | 'nested-ternary'
-  | 'dead-code'
-  | 'magic-value'
-  // Debug/cleanup
-  | 'debug-statement'
-  | 'todo-comment'
-  // Security
-  | 'security-xss'
-  | 'security-eval'
-  | 'security-secrets'
-  // Accessibility
-  | 'a11y-missing-alt'
-  | 'a11y-missing-label'
-  | 'a11y-interactive-role'
-  | 'a11y-keyboard'
-  | 'a11y-semantic'
-  // Next.js specific
-  | 'nextjs-client-server-boundary'
-  | 'nextjs-missing-metadata'
-  | 'nextjs-image-unoptimized'
-  | 'nextjs-router-misuse'
-  // React Native specific
-  | 'rn-inline-style'
-  | 'rn-missing-accessibility'
-  | 'rn-performance-issue'
-  // Node.js specific
-  | 'nodejs-callback-hell'
-  | 'nodejs-unhandled-promise'
-  | 'nodejs-sync-io'
-  | 'nodejs-missing-error-handling'
-  // JavaScript specific
-  | 'js-var-usage'
-  | 'js-loose-equality'
-  | 'js-implicit-coercion'
-  | 'js-global-pollution'
-  // TypeScript specific
-  | 'ts-any-usage'
-  | 'ts-missing-return-type'
-  | 'ts-non-null-assertion'
-  | 'ts-type-assertion';
-
-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;
-  checkMissingKeys: boolean;
-  checkHooksRules: boolean;
-  checkDependencyArrays: boolean;
-  maxTernaryDepth: number;
-  checkDeadCode: boolean;
-  checkMagicValues: boolean;
-  magicNumberThreshold: number;
-  // Framework detection
-  checkNextjs: boolean;
-  checkReactNative: boolean;
-  checkNodejs: boolean;
-  checkJavascript: boolean;
-  checkTypescript: boolean;
-  maxCallbackDepth: number;
-  // New detectors
-  checkDebugStatements: boolean;
-  checkSecurity: boolean;
-  checkAccessibility: boolean;
-}
-
-export const DEFAULT_CONFIG: DetectorConfig = {
-  maxUseEffectsPerComponent: 3,
-  maxPropDrillingDepth: 3,
-  maxComponentLines: 300,
-  maxPropsCount: 7,
-  checkMemoization: true,
-  checkMissingKeys: true,
-  checkHooksRules: true,
-  checkDependencyArrays: true,
-  maxTernaryDepth: 2,
-  checkDeadCode: true,
-  checkMagicValues: true,
-  magicNumberThreshold: 10,
-  // Framework detection - auto-enabled based on project
-  checkNextjs: true,
-  checkReactNative: true,
-  checkNodejs: true,
-  checkJavascript: true,
-  checkTypescript: true,
-  maxCallbackDepth: 3,
-  // New detectors
-  checkDebugStatements: true,
-  checkSecurity: true,
-  checkAccessibility: true,
-};

package/tsconfig.json

@@ -1,19 +0,0 @@
-{
-  "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"]
-}