react-code-smell-detector 1.2.0 → 1.3.1

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

package/src/detectors/dependencyArray.ts

@@ -1,176 +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 potential issues with useEffect dependency arrays
- */
-export function detectDependencyArrayIssues(
-  component: ParsedComponent,
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG
-): CodeSmell[] {
-  if (!config.checkDependencyArrays) return [];
-
-  const smells: CodeSmell[] = [];
-
-  // Analyze each useEffect
-  component.hooks.useEffect.forEach(effectCall => {
-    const args = effectCall.arguments;
-    const callback = args[0];
-    const depsArray = args[1];
-
-    const loc = effectCall.loc;
-    const line = loc?.start.line || 0;
-
-    // Check 1: Missing dependency array entirely
-    if (!depsArray) {
-      smells.push({
-        type: 'dependency-array-issue',
-        severity: 'warning',
-        message: `useEffect without dependency array in "${component.name}" runs on every render`,
-        file: filePath,
-        line,
-        column: loc?.start.column || 0,
-        suggestion: 'Add a dependency array. Use [] for mount-only effect, or [dep1, dep2] for reactive dependencies.',
-        codeSnippet: getCodeSnippet(sourceCode, line),
-      });
-      return;
-    }
-
-    // Check 2: Empty dependency array with variables used inside
-    if (t.isArrayExpression(depsArray) && depsArray.elements.length === 0) {
-      // Collect variables used in the effect callback
-      const usedVariables = new Set<string>();
-      
-      if (t.isArrowFunctionExpression(callback) || t.isFunctionExpression(callback)) {
-        collectVariablesUsed(callback.body, usedVariables);
-        
-        // Filter out common globals and React hooks
-        const globals = new Set(['console', 'window', 'document', 'setTimeout', 'setInterval', 
-          'clearTimeout', 'clearInterval', 'fetch', 'Promise', 'JSON', 'Math', 'Date', 'Array', 
-          'Object', 'String', 'Number', 'Boolean', 'Error', 'undefined', 'null', 'true', 'false']);
-        
-        // Check if there are local variables that might need to be dependencies
-        const potentialMissing = [...usedVariables].filter(v => 
-          !globals.has(v) && 
-          !v.startsWith('set') && // Setters from useState are stable
-          v !== 'props' &&
-          v !== 'children'
-        );
-
-        // Only warn if there appear to be external variables used
-        if (potentialMissing.length > 3) {
-          smells.push({
-            type: 'dependency-array-issue',
-            severity: 'info',
-            message: `useEffect in "${component.name}" has empty deps array but uses external variables`,
-            file: filePath,
-            line,
-            column: loc?.start.column || 0,
-            suggestion: `Consider adding dependencies: [${potentialMissing.slice(0, 3).join(', ')}...]`,
-            codeSnippet: getCodeSnippet(sourceCode, line),
-          });
-        }
-      }
-    }
-
-    // Check 3: Dependency array with object/array literals
-    if (t.isArrayExpression(depsArray)) {
-      depsArray.elements.forEach((elem, index) => {
-        if (t.isObjectExpression(elem) || t.isArrayExpression(elem)) {
-          smells.push({
-            type: 'dependency-array-issue',
-            severity: 'warning',
-            message: `Object/array literal in useEffect dependency array in "${component.name}" causes infinite re-renders`,
-            file: filePath,
-            line,
-            column: loc?.start.column || 0,
-            suggestion: 'Move the object/array to a useMemo or extract to a constant outside the component.',
-            codeSnippet: getCodeSnippet(sourceCode, line),
-          });
-        }
-
-        // Check for inline functions
-        if (t.isArrowFunctionExpression(elem) || t.isFunctionExpression(elem)) {
-          smells.push({
-            type: 'dependency-array-issue',
-            severity: 'warning',
-            message: `Inline function in useEffect dependency array in "${component.name}" causes infinite re-renders`,
-            file: filePath,
-            line,
-            column: loc?.start.column || 0,
-            suggestion: 'Wrap the function in useCallback before using as a dependency.',
-            codeSnippet: getCodeSnippet(sourceCode, line),
-          });
-        }
-      });
-    }
-  });
-
-  // Also check useMemo and useCallback
-  [...component.hooks.useMemo, ...component.hooks.useCallback].forEach(hookCall => {
-    const depsArray = hookCall.arguments[1];
-    const loc = hookCall.loc;
-    const line = loc?.start.line || 0;
-
-    if (!depsArray) {
-      const hookName = t.isIdentifier((hookCall.callee as t.Identifier)) 
-        ? ((hookCall.callee as t.Identifier).name)
-        : 'useMemo/useCallback';
-      
-      smells.push({
-        type: 'dependency-array-issue',
-        severity: 'warning',
-        message: `${hookName} without dependency array in "${component.name}"`,
-        file: filePath,
-        line,
-        column: loc?.start.column || 0,
-        suggestion: 'Add a dependency array to specify when the value should be recalculated.',
-        codeSnippet: getCodeSnippet(sourceCode, line),
-      });
-    }
-  });
-
-  return smells;
-}
-
-/**
- * Helper to collect variable names used in a code block
- */
-function collectVariablesUsed(node: t.Node, variables: Set<string>): void {
-  if (t.isIdentifier(node)) {
-    variables.add(node.name);
-  } else if (t.isMemberExpression(node)) {
-    if (t.isIdentifier(node.object)) {
-      variables.add(node.object.name);
-    } else {
-      collectVariablesUsed(node.object, variables);
-    }
-  } else if (t.isBlockStatement(node)) {
-    node.body.forEach(stmt => collectVariablesUsed(stmt, variables));
-  } else if (t.isExpressionStatement(node)) {
-    collectVariablesUsed(node.expression, variables);
-  } else if (t.isCallExpression(node)) {
-    if (t.isIdentifier(node.callee)) {
-      variables.add(node.callee.name);
-    }
-    node.arguments.forEach(arg => {
-      if (t.isNode(arg)) collectVariablesUsed(arg, variables);
-    });
-  } else if (t.isConditionalExpression(node)) {
-    collectVariablesUsed(node.test, variables);
-    collectVariablesUsed(node.consequent, variables);
-    collectVariablesUsed(node.alternate, variables);
-  } else if (t.isBinaryExpression(node) || t.isLogicalExpression(node)) {
-    collectVariablesUsed(node.left, variables);
-    collectVariablesUsed(node.right, variables);
-  } else if (t.isReturnStatement(node) && node.argument) {
-    collectVariablesUsed(node.argument, variables);
-  } else if (t.isIfStatement(node)) {
-    collectVariablesUsed(node.test, variables);
-    collectVariablesUsed(node.consequent, variables);
-    if (node.alternate) collectVariablesUsed(node.alternate, variables);
-  }
-}

package/src/detectors/hooksRules.ts

@@ -1,101 +0,0 @@
-import * as t from '@babel/types';
-import { NodePath } from '@babel/traverse';
-import { ParsedComponent, getCodeSnippet } from '../parser/index.js';
-import { CodeSmell, DetectorConfig, DEFAULT_CONFIG } from '../types/index.js';
-
-/**
- * Detects hooks used inside conditionals or loops (violates Rules of Hooks)
- */
-export function detectHooksRulesViolations(
-  component: ParsedComponent,
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG
-): CodeSmell[] {
-  if (!config.checkHooksRules) return [];
-
-  const smells: CodeSmell[] = [];
-  const hooks = [
-    'useState', 'useEffect', 'useContext', 'useReducer', 'useCallback',
-    'useMemo', 'useRef', 'useImperativeHandle', 'useLayoutEffect',
-    'useDebugValue', 'useDeferredValue', 'useTransition', 'useId',
-  ];
-
-  component.path.traverse({
-    CallExpression(path) {
-      // Check if it's a hook call
-      const callee = path.node.callee;
-      let hookName: string | null = null;
-
-      if (t.isIdentifier(callee) && hooks.includes(callee.name)) {
-        hookName = callee.name;
-      } else if (t.isIdentifier(callee) && callee.name.startsWith('use') && callee.name[3]?.toUpperCase() === callee.name[3]) {
-        // Custom hooks (useXxx pattern)
-        hookName = callee.name;
-      }
-
-      if (!hookName) return;
-
-      // Check if hook is inside a conditional or loop
-      let currentPath: NodePath | null = path.parentPath;
-      
-      while (currentPath) {
-        const node = currentPath.node;
-
-        // Check for conditionals
-        if (t.isIfStatement(node) || t.isConditionalExpression(node)) {
-          const loc = path.node.loc;
-          smells.push({
-            type: 'hooks-rules-violation',
-            severity: 'error',
-            message: `Hook "${hookName}" called inside a conditional in "${component.name}"`,
-            file: filePath,
-            line: loc?.start.line || 0,
-            column: loc?.start.column || 0,
-            suggestion: 'Hooks must be called at the top level of the component. Move the hook call outside the conditional.',
-            codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-          });
-          break;
-        }
-
-        // Check for loops
-        if (
-          t.isForStatement(node) ||
-          t.isWhileStatement(node) ||
-          t.isDoWhileStatement(node) ||
-          t.isForInStatement(node) ||
-          t.isForOfStatement(node)
-        ) {
-          const loc = path.node.loc;
-          smells.push({
-            type: 'hooks-rules-violation',
-            severity: 'error',
-            message: `Hook "${hookName}" called inside a loop in "${component.name}"`,
-            file: filePath,
-            line: loc?.start.line || 0,
-            column: loc?.start.column || 0,
-            suggestion: 'Hooks must be called at the top level. Consider restructuring to avoid calling hooks in loops.',
-            codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-          });
-          break;
-        }
-
-        // Check for early return before hook (within same function)
-        // This would require more complex flow analysis
-
-        // Stop traversing when we reach the component function
-        if (
-          t.isFunctionDeclaration(node) ||
-          t.isArrowFunctionExpression(node) ||
-          t.isFunctionExpression(node)
-        ) {
-          break;
-        }
-
-        currentPath = currentPath.parentPath;
-      }
-    },
-  });
-
-  return smells;
-}

package/src/detectors/index.ts

@@ -1,20 +0,0 @@
-export { detectUseEffectOveruse } from './useEffect.js';
-export { detectPropDrilling, analyzePropDrillingDepth } from './propDrilling.js';
-export { detectLargeComponent } from './largeComponent.js';
-export { detectUnmemoizedCalculations } from './memoization.js';
-export { detectMissingKeys } from './missingKey.js';
-export { detectHooksRulesViolations } from './hooksRules.js';
-export { detectDependencyArrayIssues } from './dependencyArray.js';
-export { detectNestedTernaries } from './nestedTernary.js';
-export { detectDeadCode, detectUnusedImports } from './deadCode.js';
-export { detectMagicValues } from './magicValues.js';
-// Framework-specific detectors
-export { detectNextjsIssues } from './nextjs.js';
-export { detectReactNativeIssues } from './reactNative.js';
-export { detectNodejsIssues } from './nodejs.js';
-export { detectJavascriptIssues } from './javascript.js';
-export { detectTypescriptIssues } from './typescript.js';
-// Debug, Security, Accessibility
-export { detectDebugStatements } from './debug.js';
-export { detectSecurityIssues } from './security.js';
-export { detectAccessibilityIssues } from './accessibility.js';