react-code-smell-detector 1.2.0 → 1.4.1

package/src/cli.ts

@@ -1,159 +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 { generateHTMLReport } from './htmlReporter.js';
-import fs from 'fs/promises';
-
-const program = new Command();
-
-program
-  .name('react-smell')
-  .description('Detect code smells in React projects')
-  .version('1.2.0')
-  .argument('[directory]', 'Directory to analyze', '.')
-  .option('-f, --format <format>', 'Output format: console, json, markdown, html', 'console')
-  .option('-s, --snippets', 'Show code snippets in output', false)
-  .option('-c, --config <file>', 'Path to config file')
-  .option('--ci', 'CI mode: exit with code 1 if any issues found')
-  .option('--fail-on <severity>', 'Exit with code 1 if issues of this severity or higher (error, warning, info)', 'error')
-  .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();
-
-      let output: string;
-      if (options.format === 'html') {
-        output = generateHTMLReport(result, rootDir);
-        // Auto-set output file for HTML if not specified
-        if (!options.output) {
-          options.output = 'code-smell-report.html';
-        }
-      } else {
-        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);
-      }
-
-      // CI/CD exit code handling
-      const { smellsBySeverity } = result.summary;
-      let shouldFail = false;
-
-      if (options.ci) {
-        // CI mode: fail on any issues
-        shouldFail = result.summary.totalSmells > 0;
-      } else {
-        // Check fail-on threshold
-        switch (options.failOn) {
-          case 'info':
-            shouldFail = smellsBySeverity.info > 0 || smellsBySeverity.warning > 0 || smellsBySeverity.error > 0;
-            break;
-          case 'warning':
-            shouldFail = smellsBySeverity.warning > 0 || smellsBySeverity.error > 0;
-            break;
-          case 'error':
-          default:
-            shouldFail = smellsBySeverity.error > 0;
-            break;
-        }
-      }
-
-      if (shouldFail) {
-        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/accessibility.ts

@@ -1,212 +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 accessibility (a11y) issues:
- * - Images without alt text
- * - Form inputs without labels
- * - Missing ARIA attributes on interactive elements
- * - Click handlers without keyboard support
- * - Improper heading hierarchy
- */
-export function detectAccessibilityIssues(
-  component: ParsedComponent,
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG
-): CodeSmell[] {
-  if (!config.checkAccessibility) return [];
-
-  const smells: CodeSmell[] = [];
-
-  component.path.traverse({
-    JSXOpeningElement(path) {
-      if (!t.isJSXIdentifier(path.node.name)) return;
-      
-      const elementName = path.node.name.name;
-      const attributes = path.node.attributes;
-      const loc = path.node.loc;
-      const line = loc?.start.line || 0;
-
-      // Helper to check if attribute exists
-      const hasAttr = (name: string): boolean => {
-        return attributes.some(attr => {
-          if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) {
-            return attr.name.name === name;
-          }
-          // Handle spread attributes - assume they might contain the attribute
-          return t.isJSXSpreadAttribute(attr);
-        });
-      };
-
-      // Helper to get attribute value
-      const getAttrValue = (name: string): string | null => {
-        for (const attr of attributes) {
-          if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === name) {
-            if (t.isStringLiteral(attr.value)) {
-              return attr.value.value;
-            }
-          }
-        }
-        return null;
-      };
-
-      // Check for images without alt text
-      if (elementName === 'img') {
-        if (!hasAttr('alt')) {
-          smells.push({
-            type: 'a11y-missing-alt',
-            severity: 'error',
-            message: `<img> missing alt attribute in "${component.name}"`,
-            file: filePath,
-            line,
-            column: loc?.start.column || 0,
-            suggestion: 'Add alt="description" for content images, or alt="" for decorative images',
-            codeSnippet: getCodeSnippet(sourceCode, line),
-          });
-        } else {
-          const altValue = getAttrValue('alt');
-          if (altValue !== null && altValue.toLowerCase().includes('image')) {
-            smells.push({
-              type: 'a11y-missing-alt',
-              severity: 'info',
-              message: `<img> alt text shouldn't contain "image" - it's redundant`,
-              file: filePath,
-              line,
-              column: loc?.start.column || 0,
-              suggestion: 'Describe what the image shows, not that it is an image',
-              codeSnippet: getCodeSnippet(sourceCode, line),
-            });
-          }
-        }
-      }
-
-      // Check for form inputs without associated labels
-      if (elementName === 'input' || elementName === 'textarea' || elementName === 'select') {
-        const inputType = getAttrValue('type') || 'text';
-        
-        // Skip hidden inputs
-        if (inputType === 'hidden') return;
-        
-        const hasLabel = hasAttr('aria-label') || 
-                        hasAttr('aria-labelledby') || 
-                        hasAttr('id'); // Assume id might be linked to a label
-        
-        if (!hasLabel) {
-          smells.push({
-            type: 'a11y-missing-label',
-            severity: 'warning',
-            message: `<${elementName}> without accessible label in "${component.name}"`,
-            file: filePath,
-            line,
-            column: loc?.start.column || 0,
-            suggestion: 'Add aria-label, aria-labelledby, or associate with a <label> element',
-            codeSnippet: getCodeSnippet(sourceCode, line),
-          });
-        }
-      }
-
-      // Check for interactive divs/spans without proper role and keyboard support
-      if (elementName === 'div' || elementName === 'span') {
-        const hasOnClick = hasAttr('onClick');
-        const hasRole = hasAttr('role');
-        const hasTabIndex = hasAttr('tabIndex');
-        const hasKeyboardHandler = hasAttr('onKeyDown') || hasAttr('onKeyUp') || hasAttr('onKeyPress');
-
-        if (hasOnClick) {
-          if (!hasRole) {
-            smells.push({
-              type: 'a11y-interactive-role',
-              severity: 'warning',
-              message: `Clickable <${elementName}> without role attribute in "${component.name}"`,
-              file: filePath,
-              line,
-              column: loc?.start.column || 0,
-              suggestion: 'Add role="button" or use a <button> element instead',
-              codeSnippet: getCodeSnippet(sourceCode, line),
-            });
-          }
-
-          if (!hasTabIndex) {
-            smells.push({
-              type: 'a11y-interactive-role',
-              severity: 'warning',
-              message: `Clickable <${elementName}> not focusable in "${component.name}"`,
-              file: filePath,
-              line,
-              column: loc?.start.column || 0,
-              suggestion: 'Add tabIndex={0} to make the element focusable',
-              codeSnippet: getCodeSnippet(sourceCode, line),
-            });
-          }
-
-          if (!hasKeyboardHandler) {
-            smells.push({
-              type: 'a11y-keyboard',
-              severity: 'info',
-              message: `Clickable <${elementName}> without keyboard handler in "${component.name}"`,
-              file: filePath,
-              line,
-              column: loc?.start.column || 0,
-              suggestion: 'Add onKeyDown to handle Enter/Space for keyboard users',
-              codeSnippet: getCodeSnippet(sourceCode, line),
-            });
-          }
-        }
-      }
-
-      // Check for anchor tags without href (should be buttons)
-      if (elementName === 'a') {
-        if (!hasAttr('href')) {
-          smells.push({
-            type: 'a11y-semantic',
-            severity: 'warning',
-            message: `<a> without href should be a <button> in "${component.name}"`,
-            file: filePath,
-            line,
-            column: loc?.start.column || 0,
-            suggestion: 'Use <button> for actions and <a href="..."> for navigation',
-            codeSnippet: getCodeSnippet(sourceCode, line),
-          });
-        }
-      }
-
-      // Check for proper button usage
-      if (elementName === 'button') {
-        if (!hasAttr('type')) {
-          smells.push({
-            type: 'a11y-semantic',
-            severity: 'info',
-            message: `<button> should have explicit type attribute`,
-            file: filePath,
-            line,
-            column: loc?.start.column || 0,
-            suggestion: 'Add type="button" or type="submit" to clarify button behavior',
-            codeSnippet: getCodeSnippet(sourceCode, line),
-          });
-        }
-      }
-
-      // Check for icons that might need labels
-      if (elementName === 'svg' || elementName === 'Icon' || elementName.endsWith('Icon')) {
-        const hasAriaLabel = hasAttr('aria-label') || hasAttr('aria-hidden') || hasAttr('title');
-        
-        if (!hasAriaLabel) {
-          smells.push({
-            type: 'a11y-missing-label',
-            severity: 'info',
-            message: `Icon/SVG may need aria-label or aria-hidden in "${component.name}"`,
-            file: filePath,
-            line,
-            column: loc?.start.column || 0,
-            suggestion: 'Add aria-label for meaningful icons, or aria-hidden="true" for decorative ones',
-            codeSnippet: getCodeSnippet(sourceCode, line),
-          });
-        }
-      }
-    },
-  });
-
-  return smells;
-}

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;
-}

package/src/detectors/debug.ts

@@ -1,103 +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 debug statements that should be removed:
- * - console.log/warn/error/debug
- * - debugger statements
- * - TODO/FIXME/HACK comments (detected via source code)
- */
-export function detectDebugStatements(
-  component: ParsedComponent,
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG
-): CodeSmell[] {
-  if (!config.checkDebugStatements) return [];
-
-  const smells: CodeSmell[] = [];
-  const reportedLines = new Set<number>();
-
-  // Detect console.* calls
-  component.path.traverse({
-    CallExpression(path) {
-      const { callee } = path.node;
-      
-      if (t.isMemberExpression(callee) && 
-          t.isIdentifier(callee.object) && 
-          callee.object.name === 'console') {
-        
-        const method = t.isIdentifier(callee.property) ? callee.property.name : '';
-        const debugMethods = ['log', 'warn', 'error', 'debug', 'info', 'trace', 'dir', 'table'];
-        
-        if (debugMethods.includes(method)) {
-          const loc = path.node.loc;
-          const line = loc?.start.line || 0;
-          
-          if (!reportedLines.has(line)) {
-            reportedLines.add(line);
-            smells.push({
-              type: 'debug-statement',
-              severity: 'warning',
-              message: `console.${method}() should be removed before production`,
-              file: filePath,
-              line,
-              column: loc?.start.column || 0,
-              suggestion: 'Remove console statement or use a logging library with environment-based filtering',
-              codeSnippet: getCodeSnippet(sourceCode, line),
-            });
-          }
-        }
-      }
-    },
-
-    // Detect debugger statements
-    DebuggerStatement(path) {
-      const loc = path.node.loc;
-      smells.push({
-        type: 'debug-statement',
-        severity: 'error',
-        message: 'debugger statement must be removed before production',
-        file: filePath,
-        line: loc?.start.line || 0,
-        column: loc?.start.column || 0,
-        suggestion: 'Remove the debugger statement',
-        codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-      });
-    },
-  });
-
-  // Detect TODO/FIXME/HACK comments in source
-  const todoPatterns = [
-    { pattern: /\/\/\s*(TODO|FIXME|HACK|XXX|BUG)[:.\s]/gi, type: 'todo-comment' as const },
-    { pattern: /\/\*\s*(TODO|FIXME|HACK|XXX|BUG)[:.\s]/gi, type: 'todo-comment' as const },
-  ];
-
-  const lines = sourceCode.split('\n');
-  lines.forEach((line, index) => {
-    const lineNum = index + 1;
-    
-    // Only check within component bounds
-    if (lineNum < component.startLine || lineNum > component.endLine) return;
-    
-    todoPatterns.forEach(({ pattern }) => {
-      const match = line.match(pattern);
-      if (match) {
-        const tag = match[0].replace(/[/\*\s:]/g, '').toUpperCase();
-        smells.push({
-          type: 'todo-comment',
-          severity: 'info',
-          message: `${tag} comment found in "${component.name}"`,
-          file: filePath,
-          line: lineNum,
-          column: 0,
-          suggestion: `Address the ${tag} or create a ticket to track it`,
-          codeSnippet: getCodeSnippet(sourceCode, lineNum),
-        });
-      }
-    });
-  });
-
-  return smells;
-}