react-code-smell-detector 1.0.0 → 1.0.1

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,9 @@ 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';

package/src/detectors/magicValues.ts

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

package/src/detectors/missingKey.ts

@@ -0,0 +1,105 @@
+import * as t from '@babel/types';
+import { ParsedComponent, getCodeSnippet } from '../parser/index.js';
+import { CodeSmell, DetectorConfig, DEFAULT_CONFIG } from '../types/index.js';
+
+/**
+ * Detects .map() calls that render JSX without a key prop
+ */
+export function detectMissingKeys(
+  component: ParsedComponent,
+  filePath: string,
+  sourceCode: string,
+  config: DetectorConfig = DEFAULT_CONFIG
+): CodeSmell[] {
+  if (!config.checkMissingKeys) return [];
+
+  const smells: CodeSmell[] = [];
+
+  component.path.traverse({
+    CallExpression(path) {
+      // Check if it's a .map() call
+      if (!t.isMemberExpression(path.node.callee)) return;
+      
+      const prop = path.node.callee.property;
+      if (!t.isIdentifier(prop) || prop.name !== 'map') return;
+
+      // Check if the callback returns JSX
+      const callback = path.node.arguments[0];
+      if (!callback) return;
+
+      let callbackBody: t.Node | null = null;
+      
+      if (t.isArrowFunctionExpression(callback)) {
+        callbackBody = callback.body;
+      } else if (t.isFunctionExpression(callback)) {
+        callbackBody = callback.body;
+      }
+
+      if (!callbackBody) return;
+
+      // Find JSX elements in the callback
+      let hasJSX = false;
+      let hasKey = false;
+      let jsxLine = path.node.loc?.start.line || 0;
+
+      const checkForKey = (node: t.Node) => {
+        if (t.isJSXElement(node)) {
+          hasJSX = true;
+          jsxLine = node.loc?.start.line || jsxLine;
+          
+          // Check if the opening element has a key prop
+          const openingElement = node.openingElement;
+          const keyAttr = openingElement.attributes.find(attr => {
+            if (t.isJSXAttribute(attr)) {
+              return t.isJSXIdentifier(attr.name) && attr.name.name === 'key';
+            }
+            return false;
+          });
+          
+          if (keyAttr) {
+            hasKey = true;
+          }
+        } else if (t.isJSXFragment(node)) {
+          hasJSX = true;
+          // Fragments can't have keys directly, so check children
+        }
+      };
+
+      // Traverse the callback body to find JSX
+      if (t.isJSXElement(callbackBody) || t.isJSXFragment(callbackBody)) {
+        checkForKey(callbackBody);
+      } else if (t.isBlockStatement(callbackBody)) {
+        path.traverse({
+          ReturnStatement(returnPath) {
+            if (returnPath.node.argument) {
+              checkForKey(returnPath.node.argument);
+            }
+          },
+          JSXElement(jsxPath) {
+            // Only check top-level JSX in the map callback
+            if (jsxPath.parent === callbackBody || 
+                (t.isReturnStatement(jsxPath.parent) && jsxPath.parent.argument === jsxPath.node)) {
+              checkForKey(jsxPath.node);
+            }
+          },
+        });
+      }
+
+      if (hasJSX && !hasKey) {
+        const loc = path.node.loc;
+        smells.push({
+          type: 'missing-key',
+          severity: 'error',
+          message: `Missing "key" prop in .map() that renders JSX in "${component.name}"`,
+          file: filePath,
+          line: jsxLine || loc?.start.line || 0,
+          column: loc?.start.column || 0,
+          suggestion: 'Add a unique "key" prop to the root element: <Element key={item.id}>',
+          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
+        });
+      }
+    },
+  });
+
+  return smells;
+}

package/src/detectors/nestedTernary.ts

@@ -0,0 +1,75 @@
+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 deeply nested ternary expressions (complex conditional rendering)
+ */
+export function detectNestedTernaries(
+  component: ParsedComponent,
+  filePath: string,
+  sourceCode: string,
+  config: DetectorConfig = DEFAULT_CONFIG
+): CodeSmell[] {
+  const smells: CodeSmell[] = [];
+  const maxDepth = config.maxTernaryDepth;
+
+  component.path.traverse({
+    ConditionalExpression(path) {
+      // Only check the outermost ternary
+      if (isNestedInTernary(path)) return;
+
+      const depth = getTernaryDepth(path.node);
+      
+      if (depth > maxDepth) {
+        const loc = path.node.loc;
+        smells.push({
+          type: 'nested-ternary',
+          severity: depth > maxDepth + 1 ? 'warning' : 'info',
+          message: `Nested ternary expression (depth: ${depth}) in "${component.name}"`,
+          file: filePath,
+          line: loc?.start.line || 0,
+          column: loc?.start.column || 0,
+          suggestion: `Refactor to use if/else, switch, or extract into separate components. Max recommended depth: ${maxDepth}`,
+          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
+        });
+      }
+    },
+  });
+
+  return smells;
+}
+
+/**
+ * Check if a ternary is nested inside another ternary
+ */
+function isNestedInTernary(path: NodePath): boolean {
+  let current: NodePath | null = path.parentPath;
+  
+  while (current) {
+    if (t.isConditionalExpression(current.node)) {
+      return true;
+    }
+    current = current.parentPath;
+  }
+  
+  return false;
+}
+
+/**
+ * Calculate the depth of nested ternary expressions
+ */
+function getTernaryDepth(node: t.ConditionalExpression): number {
+  let maxChildDepth = 0;
+
+  if (t.isConditionalExpression(node.consequent)) {
+    maxChildDepth = Math.max(maxChildDepth, getTernaryDepth(node.consequent));
+  }
+
+  if (t.isConditionalExpression(node.alternate)) {
+    maxChildDepth = Math.max(maxChildDepth, getTernaryDepth(node.alternate));
+  }
+
+  return 1 + maxChildDepth;
+}

package/src/reporter.ts

@@ -243,6 +243,12 @@ function formatSmellType(type: string): string {
     'state-in-loop': '🔄 State in Loop',
     'inline-function-prop': '📎 Inline Function Prop',
     'deep-nesting': '📊 Deep Nesting',
+    'missing-key': '🔑 Missing Key',
+    'hooks-rules-violation': '⚠️ Hooks Rules Violation',
+    'dependency-array-issue': '📋 Dependency Array Issue',
+    'nested-ternary': '❓ Nested Ternary',
+    'dead-code': '💀 Dead Code',
+    'magic-value': '🔢 Magic Value',
   };
   return labels[type] || type;
 }

package/src/types/index.ts

@@ -8,7 +8,13 @@ export type SmellType =
   | 'missing-dependency'
   | 'state-in-loop'
   | 'inline-function-prop'
-  | 'deep-nesting';
+  | 'deep-nesting'
+  | 'missing-key'
+  | 'hooks-rules-violation'
+  | 'dependency-array-issue'
+  | 'nested-ternary'
+  | 'dead-code'
+  | 'magic-value';
 
 export interface CodeSmell {
   type: SmellType;
@@ -75,6 +81,13 @@ export interface DetectorConfig {
   maxComponentLines: number;
   maxPropsCount: number;
   checkMemoization: boolean;
+  checkMissingKeys: boolean;
+  checkHooksRules: boolean;
+  checkDependencyArrays: boolean;
+  maxTernaryDepth: number;
+  checkDeadCode: boolean;
+  checkMagicValues: boolean;
+  magicNumberThreshold: number; // Numbers above this are flagged
 }
 
 export const DEFAULT_CONFIG: DetectorConfig = {
@@ -83,4 +96,11 @@ export const DEFAULT_CONFIG: DetectorConfig = {
   maxComponentLines: 300,
   maxPropsCount: 7,
   checkMemoization: true,
+  checkMissingKeys: true,
+  checkHooksRules: true,
+  checkDependencyArrays: true,
+  maxTernaryDepth: 2,
+  checkDeadCode: true,
+  checkMagicValues: true,
+  magicNumberThreshold: 10,
 };