react-code-smell-detector 1.1.1 → 1.3.1

package/src/analyzer.ts

@@ -1,269 +0,0 @@
-import fg from 'fast-glob';
-import path from 'path';
-import { parseFile, ParseResult } from './parser/index.js';
-import {
-  detectUseEffectOveruse,
-  detectPropDrilling,
-  analyzePropDrillingDepth,
-  detectLargeComponent,
-  detectUnmemoizedCalculations,
-  detectMissingKeys,
-  detectHooksRulesViolations,
-  detectDependencyArrayIssues,
-  detectNestedTernaries,
-  detectDeadCode,
-  detectMagicValues,
-  detectNextjsIssues,
-  detectReactNativeIssues,
-  detectNodejsIssues,
-  detectJavascriptIssues,
-  detectTypescriptIssues,
-} from './detectors/index.js';
-import {
-  AnalysisResult,
-  FileAnalysis,
-  ComponentInfo,
-  CodeSmell,
-  AnalysisSummary,
-  TechnicalDebtScore,
-  DetectorConfig,
-  DEFAULT_CONFIG,
-  SmellType,
-  SmellSeverity,
-} from './types/index.js';
-
-export interface AnalyzerOptions {
-  rootDir: string;
-  include?: string[];
-  exclude?: string[];
-  config?: Partial<DetectorConfig>;
-}
-
-export async function analyzeProject(options: AnalyzerOptions): Promise<AnalysisResult> {
-  const {
-    rootDir,
-    include = ['**/*.tsx', '**/*.jsx'],
-    exclude = ['**/node_modules/**', '**/dist/**', '**/build/**', '**/*.test.*', '**/*.spec.*'],
-    config: userConfig = {},
-  } = options;
-
-  const config: DetectorConfig = { ...DEFAULT_CONFIG, ...userConfig };
-
-  // Find all React files
-  const patterns = include.map(p => path.join(rootDir, p));
-  const files = await fg(patterns, {
-    ignore: exclude,
-    absolute: true,
-  });
-
-  const fileAnalyses: FileAnalysis[] = [];
-
-  // Analyze each file
-  for (const file of files) {
-    try {
-      const parseResult = await parseFile(file);
-      const analysis = analyzeFile(parseResult, file, config);
-      if (analysis.components.length > 0 || analysis.smells.length > 0) {
-        fileAnalyses.push(analysis);
-      }
-    } catch (error) {
-      // Skip files that can't be parsed
-      console.warn(`Warning: Could not parse ${file}: ${(error as Error).message}`);
-    }
-  }
-
-  // Calculate summary and score
-  const summary = calculateSummary(fileAnalyses);
-  const debtScore = calculateTechnicalDebtScore(fileAnalyses, summary);
-
-  return {
-    files: fileAnalyses,
-    summary,
-    debtScore,
-  };
-}
-
-function analyzeFile(parseResult: ParseResult, filePath: string, config: DetectorConfig): FileAnalysis {
-  const { components, imports, sourceCode } = parseResult;
-  const smells: CodeSmell[] = [];
-  const componentInfos: ComponentInfo[] = [];
-
-  // Run all detectors on each component
-  components.forEach(component => {
-    // Collect component info
-    componentInfos.push({
-      name: component.name,
-      file: filePath,
-      startLine: component.startLine,
-      endLine: component.endLine,
-      lineCount: component.endLine - component.startLine + 1,
-      useEffectCount: component.hooks.useEffect.length,
-      useStateCount: component.hooks.useState.length,
-      useMemoCount: component.hooks.useMemo.length,
-      useCallbackCount: component.hooks.useCallback.length,
-      propsCount: component.props.length,
-      propsDrillingDepth: 0, // Calculated separately
-      hasExpensiveCalculation: false, // Will be set by memoization detector
-    });
-
-    // Run detectors
-    smells.push(...detectUseEffectOveruse(component, filePath, sourceCode, config));
-    smells.push(...detectPropDrilling(component, filePath, sourceCode, config));
-    smells.push(...detectLargeComponent(component, filePath, sourceCode, config));
-    smells.push(...detectUnmemoizedCalculations(component, filePath, sourceCode, config));
-    smells.push(...detectMissingKeys(component, filePath, sourceCode, config));
-    smells.push(...detectHooksRulesViolations(component, filePath, sourceCode, config));
-    smells.push(...detectDependencyArrayIssues(component, filePath, sourceCode, config));
-    smells.push(...detectNestedTernaries(component, filePath, sourceCode, config));
-    smells.push(...detectDeadCode(component, filePath, sourceCode, config));
-    smells.push(...detectMagicValues(component, filePath, sourceCode, config));
-    // Framework-specific detectors
-    smells.push(...detectNextjsIssues(component, filePath, sourceCode, config, imports));
-    smells.push(...detectReactNativeIssues(component, filePath, sourceCode, config, imports));
-    smells.push(...detectNodejsIssues(component, filePath, sourceCode, config, imports));
-    smells.push(...detectJavascriptIssues(component, filePath, sourceCode, config));
-    smells.push(...detectTypescriptIssues(component, filePath, sourceCode, config));
-  });
-
-  // Run cross-component analysis
-  smells.push(...analyzePropDrillingDepth(components, filePath, sourceCode, config));
-
-  return {
-    file: filePath,
-    components: componentInfos,
-    smells,
-    imports,
-  };
-}
-
-function calculateSummary(files: FileAnalysis[]): AnalysisSummary {
-  const smellsByType: Record<SmellType, number> = {
-    'useEffect-overuse': 0,
-    'prop-drilling': 0,
-    'large-component': 0,
-    'unmemoized-calculation': 0,
-    'missing-dependency': 0,
-    'state-in-loop': 0,
-    'inline-function-prop': 0,
-    'deep-nesting': 0,
-    'missing-key': 0,
-    'hooks-rules-violation': 0,
-    'dependency-array-issue': 0,
-    'nested-ternary': 0,
-    'dead-code': 0,
-    'magic-value': 0,
-    // Next.js
-    'nextjs-client-server-boundary': 0,
-    'nextjs-missing-metadata': 0,
-    'nextjs-image-unoptimized': 0,
-    'nextjs-router-misuse': 0,
-    // React Native
-    'rn-inline-style': 0,
-    'rn-missing-accessibility': 0,
-    'rn-performance-issue': 0,
-    // Node.js
-    'nodejs-callback-hell': 0,
-    'nodejs-unhandled-promise': 0,
-    'nodejs-sync-io': 0,
-    'nodejs-missing-error-handling': 0,
-    // JavaScript
-    'js-var-usage': 0,
-    'js-loose-equality': 0,
-    'js-implicit-coercion': 0,
-    'js-global-pollution': 0,
-    // TypeScript
-    'ts-any-usage': 0,
-    'ts-missing-return-type': 0,
-    'ts-non-null-assertion': 0,
-    'ts-type-assertion': 0,
-  };
-
-  const smellsBySeverity: Record<SmellSeverity, number> = {
-    error: 0,
-    warning: 0,
-    info: 0,
-  };
-
-  let totalSmells = 0;
-  let totalComponents = 0;
-
-  files.forEach(file => {
-    totalComponents += file.components.length;
-    file.smells.forEach(smell => {
-      totalSmells++;
-      smellsByType[smell.type]++;
-      smellsBySeverity[smell.severity]++;
-    });
-  });
-
-  return {
-    totalFiles: files.length,
-    totalComponents,
-    totalSmells,
-    smellsByType,
-    smellsBySeverity,
-  };
-}
-
-function calculateTechnicalDebtScore(files: FileAnalysis[], summary: AnalysisSummary): TechnicalDebtScore {
-  // Calculate individual scores (0-100, higher is better)
-  
-  // useEffect score: penalize based on useEffect-related issues
-  const useEffectIssues = summary.smellsByType['useEffect-overuse'];
-  const useEffectScore = Math.max(0, 100 - useEffectIssues * 15);
-
-  // Prop drilling score
-  const propDrillingIssues = summary.smellsByType['prop-drilling'];
-  const propDrillingScore = Math.max(0, 100 - propDrillingIssues * 12);
-
-  // Component size score
-  const sizeIssues = summary.smellsByType['large-component'] + summary.smellsByType['deep-nesting'];
-  const componentSizeScore = Math.max(0, 100 - sizeIssues * 10);
-
-  // Memoization score
-  const memoIssues = summary.smellsByType['unmemoized-calculation'] + summary.smellsByType['inline-function-prop'];
-  const memoizationScore = Math.max(0, 100 - memoIssues * 8);
-
-  // Overall score (weighted average)
-  const score = Math.round(
-    useEffectScore * 0.3 +
-    propDrillingScore * 0.25 +
-    componentSizeScore * 0.25 +
-    memoizationScore * 0.2
-  );
-
-  // Determine grade
-  let grade: 'A' | 'B' | 'C' | 'D' | 'F';
-  if (score >= 90) grade = 'A';
-  else if (score >= 80) grade = 'B';
-  else if (score >= 70) grade = 'C';
-  else if (score >= 60) grade = 'D';
-  else grade = 'F';
-
-  // Estimate refactor time
-  const errorCount = summary.smellsBySeverity.error;
-  const warningCount = summary.smellsBySeverity.warning;
-  const totalIssues = errorCount * 30 + warningCount * 15; // minutes
-  
-  let estimatedRefactorTime: string;
-  if (totalIssues < 30) estimatedRefactorTime = '< 30 minutes';
-  else if (totalIssues < 60) estimatedRefactorTime = '30 min - 1 hour';
-  else if (totalIssues < 120) estimatedRefactorTime = '1-2 hours';
-  else if (totalIssues < 240) estimatedRefactorTime = '2-4 hours';
-  else if (totalIssues < 480) estimatedRefactorTime = '4-8 hours';
-  else estimatedRefactorTime = '> 1 day';
-
-  return {
-    score,
-    grade,
-    breakdown: {
-      useEffectScore,
-      propDrillingScore,
-      componentSizeScore,
-      memoizationScore,
-    },
-    estimatedRefactorTime,
-  };
-}
-
-export { DEFAULT_CONFIG, DetectorConfig } from './types/index.js';

package/src/cli.ts

@@ -1,125 +0,0 @@
-#!/usr/bin/env node
-
-import { Command } from 'commander';
-import chalk from 'chalk';
-import ora from 'ora';
-import path from 'path';
-import { analyzeProject, DEFAULT_CONFIG } from './analyzer.js';
-import { reportResults } from './reporter.js';
-import fs from 'fs/promises';
-
-const program = new Command();
-
-program
-  .name('react-smell')
-  .description('Detect code smells in React projects')
-  .version('1.0.0')
-  .argument('[directory]', 'Directory to analyze', '.')
-  .option('-f, --format <format>', 'Output format: console, json, markdown', 'console')
-  .option('-s, --snippets', 'Show code snippets in output', false)
-  .option('-c, --config <file>', 'Path to config file')
-  .option('--max-effects <number>', 'Max useEffects per component', parseInt)
-  .option('--max-props <number>', 'Max props before warning', parseInt)
-  .option('--max-lines <number>', 'Max lines per component', parseInt)
-  .option('--include <patterns>', 'Glob patterns to include (comma-separated)')
-  .option('--exclude <patterns>', 'Glob patterns to exclude (comma-separated)')
-  .option('-o, --output <file>', 'Write output to file')
-  .action(async (directory, options) => {
-    const rootDir = path.resolve(process.cwd(), directory);
-    
-    // Check if directory exists
-    try {
-      await fs.access(rootDir);
-    } catch {
-      console.error(chalk.red(`Error: Directory "${rootDir}" does not exist.`));
-      process.exit(1);
-    }
-
-    const spinner = ora('Analyzing React project...').start();
-
-    try {
-      // Load config file if specified
-      let fileConfig = {};
-      if (options.config) {
-        try {
-          const configPath = path.resolve(process.cwd(), options.config);
-          const configContent = await fs.readFile(configPath, 'utf-8');
-          fileConfig = JSON.parse(configContent);
-        } catch (error) {
-          spinner.fail(`Could not load config file: ${(error as Error).message}`);
-          process.exit(1);
-        }
-      }
-
-      // Build config from options
-      const config = {
-        ...DEFAULT_CONFIG,
-        ...fileConfig,
-        ...(options.maxEffects && { maxUseEffectsPerComponent: options.maxEffects }),
-        ...(options.maxProps && { maxPropsCount: options.maxProps }),
-        ...(options.maxLines && { maxComponentLines: options.maxLines }),
-      };
-
-      const include = options.include?.split(',').map((p: string) => p.trim()) || undefined;
-      const exclude = options.exclude?.split(',').map((p: string) => p.trim()) || undefined;
-
-      const result = await analyzeProject({
-        rootDir,
-        include,
-        exclude,
-        config,
-      });
-
-      spinner.stop();
-
-      const output = reportResults(result, {
-        format: options.format,
-        showCodeSnippets: options.snippets,
-        rootDir,
-      });
-
-      if (options.output) {
-        const outputPath = path.resolve(process.cwd(), options.output);
-        await fs.writeFile(outputPath, output, 'utf-8');
-        console.log(chalk.green(`✓ Report written to ${outputPath}`));
-      } else {
-        console.log(output);
-      }
-
-      // Exit with error code if there are errors
-      if (result.summary.smellsBySeverity.error > 0) {
-        process.exit(1);
-      }
-    } catch (error) {
-      spinner.fail(`Analysis failed: ${(error as Error).message}`);
-      if (process.env.DEBUG) {
-        console.error(error);
-      }
-      process.exit(1);
-    }
-  });
-
-// Init command to create config file
-program
-  .command('init')
-  .description('Create a configuration file')
-  .action(async () => {
-    const configContent = JSON.stringify({
-      maxUseEffectsPerComponent: DEFAULT_CONFIG.maxUseEffectsPerComponent,
-      maxPropDrillingDepth: DEFAULT_CONFIG.maxPropDrillingDepth,
-      maxComponentLines: DEFAULT_CONFIG.maxComponentLines,
-      maxPropsCount: DEFAULT_CONFIG.maxPropsCount,
-    }, null, 2);
-
-    const configPath = path.join(process.cwd(), '.smellrc.json');
-    
-    try {
-      await fs.access(configPath);
-      console.log(chalk.yellow('Config file already exists at .smellrc.json'));
-    } catch {
-      await fs.writeFile(configPath, configContent, 'utf-8');
-      console.log(chalk.green('✓ Created .smellrc.json'));
-    }
-  });
-
-program.parse();

package/src/detectors/deadCode.ts

@@ -1,163 +0,0 @@
-import * as t from '@babel/types';
-import { ParsedComponent, getCodeSnippet } from '../parser/index.js';
-import { CodeSmell, DetectorConfig, DEFAULT_CONFIG } from '../types/index.js';
-
-/**
- * Detects potentially dead code: unused variables, imports, and functions
- */
-export function detectDeadCode(
-  component: ParsedComponent,
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG
-): CodeSmell[] {
-  if (!config.checkDeadCode) return [];
-
-  const smells: CodeSmell[] = [];
-  
-  // Track declared and used identifiers within the component
-  const declared = new Map<string, { line: number; column: number; type: string }>();
-  const used = new Set<string>();
-
-  // Collect all declared variables in the component
-  component.path.traverse({
-    VariableDeclarator(path) {
-      if (t.isIdentifier(path.node.id)) {
-        const loc = path.node.loc;
-        declared.set(path.node.id.name, {
-          line: loc?.start.line || 0,
-          column: loc?.start.column || 0,
-          type: 'variable',
-        });
-      } else if (t.isObjectPattern(path.node.id)) {
-        // Destructured variables
-        path.node.id.properties.forEach(prop => {
-          if (t.isObjectProperty(prop) && t.isIdentifier(prop.value)) {
-            const loc = prop.loc;
-            declared.set(prop.value.name, {
-              line: loc?.start.line || 0,
-              column: loc?.start.column || 0,
-              type: 'variable',
-            });
-          } else if (t.isRestElement(prop) && t.isIdentifier(prop.argument)) {
-            const loc = prop.loc;
-            declared.set(prop.argument.name, {
-              line: loc?.start.line || 0,
-              column: loc?.start.column || 0,
-              type: 'variable',
-            });
-          }
-        });
-      } else if (t.isArrayPattern(path.node.id)) {
-        // Array destructured variables
-        path.node.id.elements.forEach(elem => {
-          if (t.isIdentifier(elem)) {
-            const loc = elem.loc;
-            declared.set(elem.name, {
-              line: loc?.start.line || 0,
-              column: loc?.start.column || 0,
-              type: 'variable',
-            });
-          }
-        });
-      }
-    },
-
-    FunctionDeclaration(path) {
-      if (path.node.id) {
-        const loc = path.node.loc;
-        declared.set(path.node.id.name, {
-          line: loc?.start.line || 0,
-          column: loc?.start.column || 0,
-          type: 'function',
-        });
-      }
-    },
-  });
-
-  // Collect all used identifiers
-  component.path.traverse({
-    Identifier(path) {
-      // Skip if it's a declaration
-      if (
-        t.isVariableDeclarator(path.parent) && path.parent.id === path.node ||
-        t.isFunctionDeclaration(path.parent) && path.parent.id === path.node ||
-        t.isObjectProperty(path.parent) && path.parent.key === path.node ||
-        t.isImportSpecifier(path.parent) ||
-        t.isImportDefaultSpecifier(path.parent)
-      ) {
-        return;
-      }
-
-      // Skip property access (x.y - y is not a reference)
-      if (t.isMemberExpression(path.parent) && path.parent.property === path.node && !path.parent.computed) {
-        return;
-      }
-
-      used.add(path.node.name);
-    },
-
-    JSXIdentifier(path) {
-      // Components used in JSX
-      if (t.isJSXOpeningElement(path.parent) || t.isJSXClosingElement(path.parent)) {
-        used.add(path.node.name);
-      }
-    },
-  });
-
-  // Find unused declarations
-  declared.forEach((info, name) => {
-    // Skip hooks and common patterns
-    if (name.startsWith('_') || name.startsWith('set')) return;
-    
-    // Skip if it's the component name itself
-    if (name === component.name) return;
-
-    if (!used.has(name)) {
-      smells.push({
-        type: 'dead-code',
-        severity: 'info',
-        message: `Unused ${info.type} "${name}" in "${component.name}"`,
-        file: filePath,
-        line: info.line,
-        column: info.column,
-        suggestion: `Remove the unused ${info.type} or use it in the component.`,
-        codeSnippet: getCodeSnippet(sourceCode, info.line),
-      });
-    }
-  });
-
-  return smells;
-}
-
-/**
- * Detects unused imports at the file level
- */
-export function detectUnusedImports(
-  imports: Map<string, { source: string; line: number }>,
-  usedInFile: Set<string>,
-  filePath: string,
-  sourceCode: string
-): CodeSmell[] {
-  const smells: CodeSmell[] = [];
-
-  imports.forEach((info, name) => {
-    // Skip React imports as they might be used implicitly
-    if (name === 'React' || info.source === 'react') return;
-
-    if (!usedInFile.has(name)) {
-      smells.push({
-        type: 'dead-code',
-        severity: 'info',
-        message: `Unused import "${name}" from "${info.source}"`,
-        file: filePath,
-        line: info.line,
-        column: 0,
-        suggestion: `Remove the unused import: import { ${name} } from '${info.source}'`,
-        codeSnippet: getCodeSnippet(sourceCode, info.line),
-      });
-    }
-  });
-
-  return smells;
-}