react-code-smell-detector 1.0.0 → 1.1.1

package/src/detectors/deadCode.ts

@@ -0,0 +1,163 @@
+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/dependencyArray.ts

@@ -0,0 +1,176 @@
+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

@@ -0,0 +1,101 @@
+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

@@ -2,3 +2,15 @@ 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';

package/src/detectors/javascript.ts

@@ -0,0 +1,169 @@
+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;
+}