react-code-smell-detector 1.2.0 → 1.4.1

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

package/src/detectors/javascript.ts

@@ -1,169 +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 vanilla JavaScript code smells:
- * - var usage (should use let/const)
- * - Loose equality (== instead of ===)
- * - Implicit type coercion
- * - Global variable pollution
- */
-export function detectJavascriptIssues(
-  component: ParsedComponent,
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG
-): CodeSmell[] {
-  if (!config.checkJavascript) return [];
-
-  const smells: CodeSmell[] = [];
-
-  // Detect var usage (should use let/const)
-  component.path.traverse({
-    VariableDeclaration(path) {
-      if (path.node.kind === 'var') {
-        const loc = path.node.loc;
-        smells.push({
-          type: 'js-var-usage',
-          severity: 'warning',
-          message: `Using "var" instead of "let" or "const" in "${component.name}"`,
-          file: filePath,
-          line: loc?.start.line || 0,
-          column: loc?.start.column || 0,
-          suggestion: 'Use "const" for values that never change, "let" for reassignable variables',
-          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-        });
-      }
-    },
-  });
-
-  // Detect loose equality (== and != instead of === and !==)
-  component.path.traverse({
-    BinaryExpression(path) {
-      const { operator, left, right } = path.node;
-      
-      // Skip if comparing with null/undefined (sometimes intentional)
-      const isNullCheck = 
-        (t.isNullLiteral(left) || t.isNullLiteral(right)) ||
-        (t.isIdentifier(left) && left.name === 'undefined') ||
-        (t.isIdentifier(right) && right.name === 'undefined');
-      
-      if (operator === '==' && !isNullCheck) {
-        const loc = path.node.loc;
-        smells.push({
-          type: 'js-loose-equality',
-          severity: 'warning',
-          message: `Using loose equality "==" in "${component.name}"`,
-          file: filePath,
-          line: loc?.start.line || 0,
-          column: loc?.start.column || 0,
-          suggestion: 'Use strict equality "===" to avoid type coercion bugs',
-          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-        });
-      }
-      
-      if (operator === '!=' && !isNullCheck) {
-        const loc = path.node.loc;
-        smells.push({
-          type: 'js-loose-equality',
-          severity: 'warning',
-          message: `Using loose inequality "!=" in "${component.name}"`,
-          file: filePath,
-          line: loc?.start.line || 0,
-          column: loc?.start.column || 0,
-          suggestion: 'Use strict inequality "!==" to avoid type coercion bugs',
-          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-        });
-      }
-    },
-  });
-
-  // Detect implicit type coercion patterns
-  component.path.traverse({
-    // +string to convert to number
-    UnaryExpression(path) {
-      if (path.node.operator === '+' && t.isIdentifier(path.node.argument)) {
-        const loc = path.node.loc;
-        smells.push({
-          type: 'js-implicit-coercion',
-          severity: 'info',
-          message: `Implicit number coercion with unary + in "${component.name}"`,
-          file: filePath,
-          line: loc?.start.line || 0,
-          column: loc?.start.column || 0,
-          suggestion: 'Use explicit conversion: Number(value) or parseInt(value, 10)',
-          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-        });
-      }
-    },
-    
-    // !!value for boolean coercion - detected via UnaryExpression
-    // LogicalExpression handles &&, ||, ?? - skip for !! detection
-    
-    // String concatenation with + that mixes types
-    BinaryExpression(path) {
-      if (path.node.operator === '+') {
-        const { left, right } = path.node;
-        const leftIsString = t.isStringLiteral(left) || t.isTemplateLiteral(left);
-        const rightIsString = t.isStringLiteral(right) || t.isTemplateLiteral(right);
-        const leftIsNumber = t.isNumericLiteral(left);
-        const rightIsNumber = t.isNumericLiteral(right);
-        
-        // Mixed string + number concatenation
-        if ((leftIsString && rightIsNumber) || (leftIsNumber && rightIsString)) {
-          const loc = path.node.loc;
-          smells.push({
-            type: 'js-implicit-coercion',
-            severity: 'info',
-            message: `Implicit string coercion in "${component.name}"`,
-            file: filePath,
-            line: loc?.start.line || 0,
-            column: loc?.start.column || 0,
-            suggestion: 'Use template literal for clarity: `${value}` or String(value)',
-            codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-          });
-        }
-      }
-    },
-  });
-
-  // Detect potential global pollution (assignments without declaration)
-  component.path.traverse({
-    AssignmentExpression(path) {
-      const { left } = path.node;
-      
-      if (t.isIdentifier(left)) {
-        // Check if this identifier is declared in scope
-        const binding = path.scope.getBinding(left.name);
-        
-        if (!binding) {
-          // Check if it's a well-known global
-          const knownGlobals = [
-            'window', 'document', 'console', 'localStorage', 'sessionStorage',
-            'setTimeout', 'setInterval', 'clearTimeout', 'clearInterval',
-            'fetch', 'XMLHttpRequest', 'WebSocket', 'module', 'exports',
-            'require', 'process', 'global', '__dirname', '__filename',
-            'Buffer', 'Promise', 'Map', 'Set', 'Symbol',
-          ];
-          
-          if (!knownGlobals.includes(left.name)) {
-            const loc = path.node.loc;
-            smells.push({
-              type: 'js-global-pollution',
-              severity: 'error',
-              message: `Implicit global variable "${left.name}" in "${component.name}"`,
-              file: filePath,
-              line: loc?.start.line || 0,
-              column: loc?.start.column || 0,
-              suggestion: `Declare the variable: const ${left.name} = ... or let ${left.name} = ...`,
-              codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-            });
-          }
-        }
-      }
-    },
-  });
-
-  return smells;
-}

package/src/detectors/largeComponent.ts

@@ -1,63 +0,0 @@
-import { ParsedComponent, getCodeSnippet } from '../parser/index.js';
-import { CodeSmell, DetectorConfig, DEFAULT_CONFIG } from '../types/index.js';
-
-export function detectLargeComponent(
-  component: ParsedComponent,
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG
-): CodeSmell[] {
-  const smells: CodeSmell[] = [];
-  const lineCount = component.endLine - component.startLine + 1;
-
-  if (lineCount > config.maxComponentLines) {
-    smells.push({
-      type: 'large-component',
-      severity: 'warning',
-      message: `Component "${component.name}" has ${lineCount} lines (max recommended: ${config.maxComponentLines})`,
-      file: filePath,
-      line: component.startLine,
-      column: 0,
-      suggestion: 'Break this component into smaller, more focused components',
-      codeSnippet: getCodeSnippet(sourceCode, component.startLine),
-    });
-  }
-
-  // Check for complex JSX nesting
-  if (component.jsxDepth > 10) {
-    smells.push({
-      type: 'deep-nesting',
-      severity: 'info',
-      message: `Component "${component.name}" has deeply nested JSX (depth: ~${component.jsxDepth})`,
-      file: filePath,
-      line: component.startLine,
-      column: 0,
-      suggestion: 'Extract nested elements into separate components for better readability',
-      codeSnippet: getCodeSnippet(sourceCode, component.startLine),
-    });
-  }
-
-  // Check for too many hooks (complexity indicator)
-  const totalHooks = 
-    component.hooks.useEffect.length +
-    component.hooks.useState.length +
-    component.hooks.useMemo.length +
-    component.hooks.useCallback.length +
-    component.hooks.useRef.length +
-    component.hooks.custom.length;
-
-  if (totalHooks > 10) {
-    smells.push({
-      type: 'large-component',
-      severity: 'warning',
-      message: `Component "${component.name}" uses ${totalHooks} hooks - high complexity`,
-      file: filePath,
-      line: component.startLine,
-      column: 0,
-      suggestion: 'Extract related logic into custom hooks',
-      codeSnippet: getCodeSnippet(sourceCode, component.startLine),
-    });
-  }
-
-  return smells;
-}

package/src/detectors/magicValues.ts

@@ -1,114 +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 magic numbers and strings that should be constants
- */
-export function detectMagicValues(
-  component: ParsedComponent,
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG
-): CodeSmell[] {
-  if (!config.checkMagicValues) return [];
-
-  const smells: CodeSmell[] = [];
-  const threshold = config.magicNumberThreshold;
-
-  // Track locations to avoid duplicate reports
-  const reportedLines = new Set<number>();
-
-  component.path.traverse({
-    NumericLiteral(path) {
-      const value = path.node.value;
-      const loc = path.node.loc;
-      const line = loc?.start.line || 0;
-
-      // Skip common acceptable values
-      if (value === 0 || value === 1 || value === -1 || value === 2 || value === 100) return;
-      
-      // Skip array indices and small numbers
-      if (value < threshold && value > -threshold) return;
-
-      // Skip if inside an object key position (e.g., style objects)
-      if (t.isObjectProperty(path.parent) && path.parent.key === path.node) return;
-
-      // Skip if it's a port number or similar config
-      if (value === 3000 || value === 8080 || value === 80 || value === 443) return;
-
-      // Skip if already reported this line
-      if (reportedLines.has(line)) return;
-      reportedLines.add(line);
-
-      // Check context - skip if it's in a variable declaration that names the constant
-      if (t.isVariableDeclarator(path.parent)) {
-        const varName = t.isIdentifier(path.parent.id) ? path.parent.id.name : '';
-        // If variable name is UPPER_CASE, it's already a constant
-        if (varName === varName.toUpperCase() && varName.includes('_')) return;
-      }
-
-      smells.push({
-        type: 'magic-value',
-        severity: 'info',
-        message: `Magic number ${value} in "${component.name}"`,
-        file: filePath,
-        line,
-        column: loc?.start.column || 0,
-        suggestion: `Extract to a named constant: const DESCRIPTIVE_NAME = ${value}`,
-        codeSnippet: getCodeSnippet(sourceCode, line),
-      });
-    },
-
-    StringLiteral(path) {
-      const value = path.node.value;
-      const loc = path.node.loc;
-      const line = loc?.start.line || 0;
-
-      // Skip short strings, empty strings, common values
-      if (value.length < 10) return;
-      
-      // Skip if it looks like a URL, path, or import
-      if (value.startsWith('http') || value.startsWith('/') || value.startsWith('.')) return;
-      
-      // Skip if it's an import source
-      if (t.isImportDeclaration(path.parent)) return;
-      
-      // Skip JSX text content (usually intentional)
-      if (t.isJSXText(path.parent) || t.isJSXExpressionContainer(path.parent)) return;
-      
-      // Skip object property keys
-      if (t.isObjectProperty(path.parent) && path.parent.key === path.node) return;
-
-      // Skip if already reported this line
-      if (reportedLines.has(line)) return;
-
-      // Skip common patterns
-      if (
-        value.includes('className') ||
-        value.includes('px') ||
-        value.includes('rem') ||
-        value.includes('%')
-      ) return;
-
-      // Check if it looks like a user-facing message or error
-      const looksLikeMessage = /^[A-Z][a-z]+.*[.!?]?$/.test(value) || value.includes(' ');
-      
-      if (looksLikeMessage && value.length > 30) {
-        reportedLines.add(line);
-        smells.push({
-          type: 'magic-value',
-          severity: 'info',
-          message: `Hardcoded string in "${component.name}" should be in constants or i18n`,
-          file: filePath,
-          line,
-          column: loc?.start.column || 0,
-          suggestion: `Extract to a constants file or use i18n: "${value.substring(0, 30)}..."`,
-          codeSnippet: getCodeSnippet(sourceCode, line),
-        });
-      }
-    },
-  });
-
-  return smells;
-}