react-code-smell-detector 1.0.1 → 1.2.0

package/src/detectors/nextjs.ts

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

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

package/src/detectors/reactNative.ts

@@ -0,0 +1,154 @@
+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 React Native-specific code smells:
+ * - Inline styles instead of StyleSheet
+ * - Missing accessibility props
+ * - Performance anti-patterns
+ */
+export function detectReactNativeIssues(
+  component: ParsedComponent,
+  filePath: string,
+  sourceCode: string,
+  config: DetectorConfig = DEFAULT_CONFIG,
+  imports: string[] = []
+): CodeSmell[] {
+  if (!config.checkReactNative) return [];
+  
+  // Only run on React Native projects
+  const isRNProject = imports.some(imp => 
+    imp.includes('react-native') || imp.includes('@react-native')
+  );
+  
+  if (!isRNProject) return [];
+
+  const smells: CodeSmell[] = [];
+  const inlineStyleLines = new Set<number>();
+
+  // Check for inline styles instead of StyleSheet
+  component.path.traverse({
+    JSXAttribute(path) {
+      if (!t.isJSXIdentifier(path.node.name)) return;
+      if (path.node.name.name !== 'style') return;
+      
+      const value = path.node.value;
+      if (!t.isJSXExpressionContainer(value)) return;
+      
+      // Check if it's an inline object (not a StyleSheet reference)
+      if (t.isObjectExpression(value.expression)) {
+        const loc = path.node.loc;
+        const line = loc?.start.line || 0;
+        
+        if (!inlineStyleLines.has(line)) {
+          inlineStyleLines.add(line);
+          smells.push({
+            type: 'rn-inline-style',
+            severity: 'warning',
+            message: `Inline style object in "${component.name}" - prefer StyleSheet.create()`,
+            file: filePath,
+            line,
+            column: loc?.start.column || 0,
+            suggestion: 'Use StyleSheet.create() for better performance: const styles = StyleSheet.create({ ... })',
+            codeSnippet: getCodeSnippet(sourceCode, line),
+          });
+        }
+      }
+    },
+  });
+
+  // Check for missing accessibility props on interactive elements
+  const interactiveComponents = ['TouchableOpacity', 'TouchableHighlight', 'Pressable', 'Button', 'TouchableWithoutFeedback'];
+  
+  component.path.traverse({
+    JSXOpeningElement(path) {
+      if (!t.isJSXIdentifier(path.node.name)) return;
+      
+      const componentName = path.node.name.name;
+      if (!interactiveComponents.includes(componentName)) return;
+
+      // Check for accessibility props
+      const hasAccessibilityLabel = path.node.attributes.some(attr => {
+        if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) {
+          return ['accessibilityLabel', 'accessible', 'accessibilityRole', 'accessibilityHint'].includes(attr.name.name);
+        }
+        return false;
+      });
+
+      if (!hasAccessibilityLabel) {
+        const loc = path.node.loc;
+        smells.push({
+          type: 'rn-missing-accessibility',
+          severity: 'info',
+          message: `${componentName} missing accessibility props in "${component.name}"`,
+          file: filePath,
+          line: loc?.start.line || 0,
+          column: loc?.start.column || 0,
+          suggestion: 'Add accessibilityLabel and accessibilityRole for screen readers',
+          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
+        });
+      }
+    },
+  });
+
+  // Check for performance anti-patterns
+  component.path.traverse({
+    // Detect creating anonymous functions in render (for onPress, etc.)
+    JSXAttribute(path) {
+      if (!t.isJSXIdentifier(path.node.name)) return;
+      
+      const propName = path.node.name.name;
+      if (!['onPress', 'onPressIn', 'onPressOut', 'onLongPress'].includes(propName)) return;
+      
+      const value = path.node.value;
+      if (!t.isJSXExpressionContainer(value)) return;
+      
+      // Check for arrow functions or function expressions
+      if (t.isArrowFunctionExpression(value.expression) || t.isFunctionExpression(value.expression)) {
+        const loc = path.node.loc;
+        smells.push({
+          type: 'rn-performance-issue',
+          severity: 'info',
+          message: `Inline function for ${propName} in "${component.name}" creates new reference each render`,
+          file: filePath,
+          line: loc?.start.line || 0,
+          column: loc?.start.column || 0,
+          suggestion: 'Extract to useCallback or class method to prevent unnecessary re-renders',
+          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
+        });
+      }
+    },
+
+    // Detect array spreads in render that could be memoized
+    SpreadElement(path) {
+      const loc = path.node.loc;
+      // Only flag if inside JSX or return statement
+      let inJSX = false;
+      let current: NodePath | null = path.parentPath;
+      while (current) {
+        if (t.isJSXElement(current.node) || t.isJSXFragment(current.node)) {
+          inJSX = true;
+          break;
+        }
+        current = current.parentPath;
+      }
+      
+      if (inJSX && t.isArrayExpression(path.parent)) {
+        smells.push({
+          type: 'rn-performance-issue',
+          severity: 'info',
+          message: `Array spread in render may cause performance issues in "${component.name}"`,
+          file: filePath,
+          line: loc?.start.line || 0,
+          column: loc?.start.column || 0,
+          suggestion: 'Consider memoizing with useMemo if this array is passed as a prop',
+          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
+        });
+      }
+    },
+  });
+
+  return smells;
+}

package/src/detectors/security.ts

@@ -0,0 +1,179 @@
+import * as t from '@babel/types';
+import { ParsedComponent, getCodeSnippet } from '../parser/index.js';
+import { CodeSmell, DetectorConfig, DEFAULT_CONFIG } from '../types/index.js';
+
+/**
+ * Detects security vulnerabilities:
+ * - dangerouslySetInnerHTML usage
+ * - eval() and Function() constructor
+ * - innerHTML assignments
+ * - Unsafe URLs (javascript:, data:)
+ * - Exposed secrets/API keys
+ */
+export function detectSecurityIssues(
+  component: ParsedComponent,
+  filePath: string,
+  sourceCode: string,
+  config: DetectorConfig = DEFAULT_CONFIG
+): CodeSmell[] {
+  if (!config.checkSecurity) return [];
+
+  const smells: CodeSmell[] = [];
+
+  // Detect dangerouslySetInnerHTML
+  component.path.traverse({
+    JSXAttribute(path) {
+      if (t.isJSXIdentifier(path.node.name) && 
+          path.node.name.name === 'dangerouslySetInnerHTML') {
+        const loc = path.node.loc;
+        smells.push({
+          type: 'security-xss',
+          severity: 'error',
+          message: `dangerouslySetInnerHTML is a security risk in "${component.name}"`,
+          file: filePath,
+          line: loc?.start.line || 0,
+          column: loc?.start.column || 0,
+          suggestion: 'Sanitize HTML with DOMPurify or use a safe alternative like converting to React elements',
+          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
+        });
+      }
+    },
+  });
+
+  // Detect eval() and Function() constructor
+  component.path.traverse({
+    CallExpression(path) {
+      const { callee } = path.node;
+      
+      // eval()
+      if (t.isIdentifier(callee) && callee.name === 'eval') {
+        const loc = path.node.loc;
+        smells.push({
+          type: 'security-eval',
+          severity: 'error',
+          message: `eval() is a critical security risk in "${component.name}"`,
+          file: filePath,
+          line: loc?.start.line || 0,
+          column: loc?.start.column || 0,
+          suggestion: 'Never use eval(). Parse JSON with JSON.parse() or restructure logic to avoid dynamic code execution.',
+          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
+        });
+      }
+    },
+    
+    // new Function()
+    NewExpression(path) {
+      const { callee } = path.node;
+      if (t.isIdentifier(callee) && callee.name === 'Function') {
+        const loc = path.node.loc;
+        smells.push({
+          type: 'security-eval',
+          severity: 'error',
+          message: `new Function() is equivalent to eval() and is a security risk`,
+          file: filePath,
+          line: loc?.start.line || 0,
+          column: loc?.start.column || 0,
+          suggestion: 'Avoid creating functions from strings. Restructure to use static function definitions.',
+          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
+        });
+      }
+    },
+  });
+
+  // Detect innerHTML assignments
+  component.path.traverse({
+    AssignmentExpression(path) {
+      const { left } = path.node;
+      
+      if (t.isMemberExpression(left) && t.isIdentifier(left.property)) {
+        if (left.property.name === 'innerHTML' || left.property.name === 'outerHTML') {
+          const loc = path.node.loc;
+          smells.push({
+            type: 'security-xss',
+            severity: 'warning',
+            message: `Direct ${left.property.name} assignment can lead to XSS`,
+            file: filePath,
+            line: loc?.start.line || 0,
+            column: loc?.start.column || 0,
+            suggestion: 'Use textContent for plain text, or sanitize HTML with DOMPurify',
+            codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
+          });
+        }
+      }
+    },
+  });
+
+  // Detect unsafe URLs (javascript:, data:)
+  component.path.traverse({
+    JSXAttribute(path) {
+      if (!t.isJSXIdentifier(path.node.name)) return;
+      
+      const propName = path.node.name.name;
+      if (!['href', 'src', 'action'].includes(propName)) return;
+      
+      const value = path.node.value;
+      if (t.isStringLiteral(value)) {
+        const url = value.value.toLowerCase().trim();
+        
+        if (url.startsWith('javascript:')) {
+          const loc = path.node.loc;
+          smells.push({
+            type: 'security-xss',
+            severity: 'error',
+            message: `javascript: URLs are a security risk`,
+            file: filePath,
+            line: loc?.start.line || 0,
+            column: loc?.start.column || 0,
+            suggestion: 'Use onClick handlers instead of javascript: URLs',
+            codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
+          });
+        }
+        
+        if (url.startsWith('data:') && propName === 'href') {
+          const loc = path.node.loc;
+          smells.push({
+            type: 'security-xss',
+            severity: 'warning',
+            message: `data: URLs in href can be a security risk`,
+            file: filePath,
+            line: loc?.start.line || 0,
+            column: loc?.start.column || 0,
+            suggestion: 'Validate and sanitize data URLs, or use blob URLs instead',
+            codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
+          });
+        }
+      }
+    },
+  });
+
+  // Detect potential exposed secrets
+  const secretPatterns = [
+    { pattern: /['"](?:sk[-_]live|pk[-_]live|api[-_]?key|secret[-_]?key|access[-_]?token|auth[-_]?token)['"]\s*[:=]\s*['"][a-zA-Z0-9-_]{20,}/i, name: 'API key' },
+    { pattern: /['"](?:ghp|gho|ghu|ghs|ghr)_[a-zA-Z0-9]{36,}['"]/i, name: 'GitHub token' },
+    { pattern: /['"]AKIA[A-Z0-9]{16}['"]/i, name: 'AWS access key' },
+    { pattern: /password\s*[:=]\s*['"][^'"]{8,}['"]/i, name: 'Hardcoded password' },
+  ];
+
+  const lines = sourceCode.split('\n');
+  lines.forEach((line, index) => {
+    const lineNum = index + 1;
+    if (lineNum < component.startLine || lineNum > component.endLine) return;
+    
+    secretPatterns.forEach(({ pattern, name }) => {
+      if (pattern.test(line)) {
+        smells.push({
+          type: 'security-secrets',
+          severity: 'error',
+          message: `Potential ${name} exposed in code`,
+          file: filePath,
+          line: lineNum,
+          column: 0,
+          suggestion: 'Move secrets to environment variables (.env) and never commit them to version control',
+          codeSnippet: getCodeSnippet(sourceCode, lineNum),
+        });
+      }
+    });
+  });
+
+  return smells;
+}