react-code-smell-detector 1.2.0 → 1.4.1

package/src/detectors/memoization.ts

@@ -1,177 +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';
-
-export function detectUnmemoizedCalculations(
-  component: ParsedComponent,
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG
-): CodeSmell[] {
-  if (!config.checkMemoization) return [];
-
-  const smells: CodeSmell[] = [];
-
-  // Look for expensive operations not wrapped in useMemo
-  component.path.traverse({
-    VariableDeclarator(varPath) {
-      const init = varPath.node.init;
-      if (!init) return;
-
-      const loc = init.loc;
-      if (!loc) return;
-
-      // Check if this is inside useMemo/useCallback
-      let isInsideHook = false;
-      let currentPath: NodePath | null = varPath.parentPath;
-      while (currentPath) {
-        if (
-          currentPath.isCallExpression() &&
-          t.isIdentifier(currentPath.node.callee) &&
-          ['useMemo', 'useCallback'].includes(currentPath.node.callee.name)
-        ) {
-          isInsideHook = true;
-          break;
-        }
-        currentPath = currentPath.parentPath;
-      }
-
-      if (isInsideHook) return;
-
-      // Detect expensive operations
-      let isExpensive = false;
-      let reason = '';
-
-      // Check for .map(), .filter(), .reduce(), .sort() on arrays
-      if (t.isCallExpression(init) && t.isMemberExpression(init.callee)) {
-        const prop = init.callee.property;
-        if (t.isIdentifier(prop)) {
-          const expensiveMethods = ['map', 'filter', 'reduce', 'sort', 'find', 'findIndex', 'flatMap'];
-          if (expensiveMethods.includes(prop.name)) {
-            isExpensive = true;
-            reason = `.${prop.name}() creates a new array on every render`;
-          }
-        }
-      }
-
-      // Check for object/array literals with complex computations
-      if (t.isArrayExpression(init) && init.elements.length > 5) {
-        isExpensive = true;
-        reason = 'Large array literal recreated on every render';
-      }
-
-      if (t.isObjectExpression(init) && init.properties.length > 5) {
-        isExpensive = true;
-        reason = 'Large object literal recreated on every render';
-      }
-
-      // Check for JSON operations
-      if (t.isCallExpression(init) && t.isMemberExpression(init.callee)) {
-        const obj = init.callee.object;
-        const prop = init.callee.property;
-        if (
-          t.isIdentifier(obj) &&
-          obj.name === 'JSON' &&
-          t.isIdentifier(prop) &&
-          ['parse', 'stringify'].includes(prop.name)
-        ) {
-          isExpensive = true;
-          reason = `JSON.${prop.name}() is expensive and runs on every render`;
-        }
-      }
-
-      // Check for spread operations creating new objects
-      if (t.isObjectExpression(init)) {
-        const hasSpread = init.properties.some(p => t.isSpreadElement(p));
-        if (hasSpread && init.properties.length > 3) {
-          isExpensive = true;
-          reason = 'Spread operation creates new object reference on every render';
-        }
-      }
-
-      if (isExpensive) {
-        const id = varPath.node.id;
-        const varName = t.isIdentifier(id) ? id.name : 'variable';
-
-        smells.push({
-          type: 'unmemoized-calculation',
-          severity: 'warning',
-          message: `Unmemoized calculation "${varName}" in "${component.name}": ${reason}`,
-          file: filePath,
-          line: loc.start.line,
-          column: loc.start.column,
-          suggestion: `Wrap in useMemo: const ${varName} = useMemo(() => ..., [dependencies])`,
-          codeSnippet: getCodeSnippet(sourceCode, loc.start.line),
-        });
-      }
-    },
-  });
-
-  // Check for inline function props (common performance issue)
-  component.path.traverse({
-    JSXAttribute(attrPath) {
-      const value = attrPath.node.value;
-      if (!t.isJSXExpressionContainer(value)) return;
-
-      const expr = value.expression;
-      const loc = expr.loc;
-      if (!loc) return;
-
-      // Check for inline arrow functions
-      if (t.isArrowFunctionExpression(expr) || t.isFunctionExpression(expr)) {
-        const attrName = t.isJSXIdentifier(attrPath.node.name) 
-          ? attrPath.node.name.name 
-          : 'unknown';
-
-        // Only warn for non-trivial handlers
-        if (attrName.startsWith('on') && t.isArrowFunctionExpression(expr)) {
-          const body = expr.body;
-          // Skip simple one-liner callbacks that just call a function
-          if (t.isCallExpression(body)) {
-            // These are usually fine: onClick={() => doSomething()}
-            return;
-          }
-
-          if (t.isBlockStatement(body) && body.body.length > 1) {
-            smells.push({
-              type: 'inline-function-prop',
-              severity: 'info',
-              message: `Inline function for "${attrName}" creates new reference on every render`,
-              file: filePath,
-              line: loc.start.line,
-              column: loc.start.column,
-              suggestion: 'Extract to useCallback or define outside render',
-              codeSnippet: getCodeSnippet(sourceCode, loc.start.line),
-            });
-          }
-        }
-      }
-
-      // Check for inline objects/arrays passed as props
-      if (t.isObjectExpression(expr) || t.isArrayExpression(expr)) {
-        const attrName = t.isJSXIdentifier(attrPath.node.name)
-          ? attrPath.node.name.name
-          : 'unknown';
-
-        // style prop is a common pattern, only warn for complex ones
-        if (attrName === 'style' && t.isObjectExpression(expr) && expr.properties.length <= 3) {
-          return;
-        }
-
-        smells.push({
-          type: 'unmemoized-calculation',
-          severity: 'info',
-          message: `Inline ${t.isObjectExpression(expr) ? 'object' : 'array'} for "${attrName}" prop creates new reference on every render`,
-          file: filePath,
-          line: loc.start.line,
-          column: loc.start.column,
-          suggestion: 'Extract to a constant or useMemo',
-          codeSnippet: getCodeSnippet(sourceCode, loc.start.line),
-        });
-      }
-    },
-  });
-
-  return smells;
-}

package/src/detectors/missingKey.ts

@@ -1,105 +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 .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

@@ -1,75 +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 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/detectors/nextjs.ts

@@ -1,124 +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 Next.js-specific code smells:
- * - Missing 'use client' / 'use server' directives
- * - Unoptimized images (using <img> instead of next/image)
- * - Router misuse patterns
- * - Missing metadata exports
- */
-export function detectNextjsIssues(
-  component: ParsedComponent,
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG,
-  imports: string[] = []
-): CodeSmell[] {
-  if (!config.checkNextjs) return [];
-  
-  // Only run on Next.js projects (check for next imports)
-  const isNextProject = imports.some(imp => 
-    imp.includes('next/') || imp.includes('next')
-  );
-  
-  // Also check file path patterns
-  const isAppRouter = filePath.includes('/app/') && 
-    (filePath.endsWith('page.tsx') || filePath.endsWith('page.jsx') ||
-     filePath.endsWith('layout.tsx') || filePath.endsWith('layout.jsx'));
-
-  const smells: CodeSmell[] = [];
-
-  // Check for unoptimized images (using <img> instead of next/image)
-  component.path.traverse({
-    JSXOpeningElement(path) {
-      if (t.isJSXIdentifier(path.node.name) && path.node.name.name === 'img') {
-        const loc = path.node.loc;
-        smells.push({
-          type: 'nextjs-image-unoptimized',
-          severity: 'warning',
-          message: `Using native <img> instead of next/image in "${component.name}"`,
-          file: filePath,
-          line: loc?.start.line || 0,
-          column: loc?.start.column || 0,
-          suggestion: 'Use next/image for automatic image optimization: import Image from "next/image"',
-          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-        });
-      }
-    },
-  });
-
-  // Check for client-side hooks in server components (App Router)
-  if (isAppRouter && !sourceCode.includes("'use client'") && !sourceCode.includes('"use client"')) {
-    const clientHooks = ['useState', 'useEffect', 'useContext', 'useReducer', 'useRef'];
-    const usedClientHooks: string[] = [];
-
-    component.path.traverse({
-      CallExpression(path) {
-        if (t.isIdentifier(path.node.callee) && clientHooks.includes(path.node.callee.name)) {
-          usedClientHooks.push(path.node.callee.name);
-        }
-      },
-    });
-
-    if (usedClientHooks.length > 0) {
-      const loc = component.node.loc;
-      smells.push({
-        type: 'nextjs-client-server-boundary',
-        severity: 'error',
-        message: `Client hooks (${usedClientHooks.join(', ')}) used without 'use client' directive in "${component.name}"`,
-        file: filePath,
-        line: loc?.start.line || 1,
-        column: 0,
-        suggestion: "Add 'use client' at the top of the file, or move client logic to a separate component",
-        codeSnippet: getCodeSnippet(sourceCode, 1),
-      });
-    }
-  }
-
-  // Check for missing metadata in page/layout files
-  if (isAppRouter && filePath.includes('page.')) {
-    // This would require checking exports, which needs file-level analysis
-    const hasMetadata = sourceCode.includes('export const metadata') || 
-                        sourceCode.includes('export function generateMetadata');
-    
-    if (!hasMetadata && component.name === 'default') {
-      smells.push({
-        type: 'nextjs-missing-metadata',
-        severity: 'info',
-        message: 'Page component missing metadata export',
-        file: filePath,
-        line: 1,
-        column: 0,
-        suggestion: 'Add metadata for SEO: export const metadata = { title: "...", description: "..." }',
-      });
-    }
-  }
-
-  // Check for router misuse (using window.location instead of next/router)
-  component.path.traverse({
-    MemberExpression(path) {
-      if (
-        t.isIdentifier(path.node.object) &&
-        path.node.object.name === 'window' &&
-        t.isIdentifier(path.node.property) &&
-        path.node.property.name === 'location'
-      ) {
-        const loc = path.node.loc;
-        smells.push({
-          type: 'nextjs-router-misuse',
-          severity: 'warning',
-          message: `Using window.location instead of Next.js router in "${component.name}"`,
-          file: filePath,
-          line: loc?.start.line || 0,
-          column: loc?.start.column || 0,
-          suggestion: 'Use next/navigation: import { useRouter } from "next/navigation"',
-          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-        });
-      }
-    },
-  });
-
-  return smells;
-}

package/src/detectors/nodejs.ts

@@ -1,199 +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 Node.js-specific code smells:
- * - Callback hell (deeply nested callbacks)
- * - Unhandled promise rejections
- * - Synchronous I/O operations
- * - Missing error handling
- */
-export function detectNodejsIssues(
-  component: ParsedComponent,
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG,
-  imports: string[] = []
-): CodeSmell[] {
-  if (!config.checkNodejs) return [];
-  
-  // Check if this looks like a Node.js file
-  const isNodeFile = imports.some(imp => 
-    imp.includes('fs') || imp.includes('path') || imp.includes('http') ||
-    imp.includes('express') || imp.includes('child_process') ||
-    imp.includes('crypto') || imp.includes('os') || imp.includes('stream')
-  ) || filePath.includes('.server.') || filePath.includes('/api/');
-
-  if (!isNodeFile) return [];
-
-  const smells: CodeSmell[] = [];
-
-  // Detect callback hell (nested callbacks > maxCallbackDepth)
-  component.path.traverse({
-    CallExpression(path) {
-      const depth = getCallbackDepth(path);
-      
-      if (depth > config.maxCallbackDepth) {
-        const loc = path.node.loc;
-        smells.push({
-          type: 'nodejs-callback-hell',
-          severity: 'warning',
-          message: `Callback hell detected (depth: ${depth}) in "${component.name}"`,
-          file: filePath,
-          line: loc?.start.line || 0,
-          column: loc?.start.column || 0,
-          suggestion: 'Refactor to async/await or use Promise.all() for parallel operations',
-          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-        });
-      }
-    },
-  });
-
-  // Detect unhandled promise rejections (Promise without .catch or try/catch)
-  component.path.traverse({
-    CallExpression(path) {
-      // Check for .then() without .catch()
-      if (t.isMemberExpression(path.node.callee) && 
-          t.isIdentifier(path.node.callee.property) &&
-          path.node.callee.property.name === 'then') {
-        
-        // Check if followed by .catch() in chain
-        const parent = path.parent;
-        let hasCatch = false;
-        
-        if (t.isMemberExpression(parent)) {
-          const prop = (parent as t.MemberExpression).property;
-          if (t.isIdentifier(prop) && prop.name === 'catch') {
-            hasCatch = true;
-          }
-        }
-        
-        // Check if inside try block
-        let current: NodePath | null = path;
-        while (current) {
-          if (t.isTryStatement(current.node)) {
-            hasCatch = true;
-            break;
-          }
-          current = current.parentPath;
-        }
-        
-        if (!hasCatch) {
-          const loc = path.node.loc;
-          smells.push({
-            type: 'nodejs-unhandled-promise',
-            severity: 'warning',
-            message: `.then() without .catch() in "${component.name}"`,
-            file: filePath,
-            line: loc?.start.line || 0,
-            column: loc?.start.column || 0,
-            suggestion: 'Add .catch() to handle rejections, or use try/catch with async/await',
-            codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-          });
-        }
-      }
-    },
-  });
-
-  // Detect synchronous file operations
-  const syncMethods = ['readFileSync', 'writeFileSync', 'appendFileSync', 'readdirSync', 
-                       'statSync', 'mkdirSync', 'rmdirSync', 'unlinkSync', 'existsSync'];
-  
-  component.path.traverse({
-    CallExpression(path) {
-      const callee = path.node.callee;
-      
-      if (t.isMemberExpression(callee) && t.isIdentifier(callee.property)) {
-        if (syncMethods.includes(callee.property.name)) {
-          const loc = path.node.loc;
-          smells.push({
-            type: 'nodejs-sync-io',
-            severity: 'warning',
-            message: `Synchronous file operation "${callee.property.name}" blocks event loop`,
-            file: filePath,
-            line: loc?.start.line || 0,
-            column: loc?.start.column || 0,
-            suggestion: `Use async version: ${callee.property.name.replace('Sync', '')} with await or promises`,
-            codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-          });
-        }
-      }
-      
-      // Direct function call
-      if (t.isIdentifier(callee) && syncMethods.includes(callee.name)) {
-        const loc = path.node.loc;
-        smells.push({
-          type: 'nodejs-sync-io',
-          severity: 'warning',
-          message: `Synchronous file operation "${callee.name}" blocks event loop`,
-          file: filePath,
-          line: loc?.start.line || 0,
-          column: loc?.start.column || 0,
-          suggestion: `Use async version: ${callee.name.replace('Sync', '')} with await or promises`,
-          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-        });
-      }
-    },
-  });
-
-  // Detect missing error handling in async functions
-  component.path.traverse({
-    AwaitExpression(path) {
-      // Check if inside try block
-      let insideTry = false;
-      let current: NodePath | null = path;
-      
-      while (current) {
-        if (t.isTryStatement(current.node)) {
-          insideTry = true;
-          break;
-        }
-        // Stop at function boundary
-        if (t.isFunction(current.node)) break;
-        current = current.parentPath;
-      }
-      
-      if (!insideTry) {
-        // Check if the parent function has error handling at call site
-        // This is a simplified check - in practice you'd want more context
-        const loc = path.node.loc;
-        smells.push({
-          type: 'nodejs-missing-error-handling',
-          severity: 'info',
-          message: `await without try/catch may cause unhandled rejections`,
-          file: filePath,
-          line: loc?.start.line || 0,
-          column: loc?.start.column || 0,
-          suggestion: 'Wrap await in try/catch or handle errors at the call site',
-          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-        });
-      }
-    },
-  });
-
-  return smells;
-}
-
-/**
- * Calculate the depth of nested callbacks
- */
-function getCallbackDepth(path: NodePath): number {
-  let depth = 0;
-  let current: NodePath | null = path;
-  
-  while (current) {
-    const node = current.node;
-    
-    // Count function expressions that are arguments to calls
-    if ((t.isFunctionExpression(node) || t.isArrowFunctionExpression(node)) &&
-        t.isCallExpression(current.parent)) {
-      depth++;
-    }
-    
-    current = current.parentPath;
-  }
-  
-  return depth;
-}