react-code-smell-detector 1.2.0 → 1.4.1

package/src/detectors/propDrilling.ts

@@ -1,103 +0,0 @@
-import { ParsedComponent, getCodeSnippet } from '../parser/index.js';
-import { CodeSmell, DetectorConfig, DEFAULT_CONFIG } from '../types/index.js';
-
-export function detectPropDrilling(
-  component: ParsedComponent,
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG
-): CodeSmell[] {
-  const smells: CodeSmell[] = [];
-
-  // Check for too many props
-  if (component.props.length > config.maxPropsCount) {
-    smells.push({
-      type: 'prop-drilling',
-      severity: 'warning',
-      message: `Component "${component.name}" receives ${component.props.length} props (max recommended: ${config.maxPropsCount})`,
-      file: filePath,
-      line: component.startLine,
-      column: 0,
-      suggestion: 'Consider using Context, a state management library, or component composition',
-      codeSnippet: getCodeSnippet(sourceCode, component.startLine),
-    });
-  }
-
-  // Check for props that are just passed through (prop drilling indicators)
-  const passThroughProps = component.props.filter(prop => {
-    // Common patterns that indicate prop drilling
-    const drillingPatterns = ['data', 'config', 'settings', 'options', 'state', 'handlers', 'callbacks'];
-    return drillingPatterns.some(pattern => prop.toLowerCase().includes(pattern));
-  });
-
-  if (passThroughProps.length >= 3) {
-    smells.push({
-      type: 'prop-drilling',
-      severity: 'info',
-      message: `Component "${component.name}" may be experiencing prop drilling: ${passThroughProps.join(', ')}`,
-      file: filePath,
-      line: component.startLine,
-      column: 0,
-      suggestion: 'Consider using React Context or a state management solution to avoid passing data through intermediate components',
-      codeSnippet: getCodeSnippet(sourceCode, component.startLine),
-    });
-  }
-
-  // Check for spread props (often indicates forwarding)
-  const spreadProps = component.props.filter(p => p.startsWith('...'));
-  if (spreadProps.length > 0 && component.props.length > 5) {
-    smells.push({
-      type: 'prop-drilling',
-      severity: 'info',
-      message: `Component "${component.name}" uses spread props with many other props - potential prop drilling`,
-      file: filePath,
-      line: component.startLine,
-      column: 0,
-      suggestion: 'Consider composing components differently or using Context for shared state',
-      codeSnippet: getCodeSnippet(sourceCode, component.startLine),
-    });
-  }
-
-  return smells;
-}
-
-export function analyzePropDrillingDepth(
-  components: ParsedComponent[],
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG
-): CodeSmell[] {
-  const smells: CodeSmell[] = [];
-
-  // Track props that appear in multiple components
-  const propUsage = new Map<string, string[]>();
-
-  components.forEach(comp => {
-    comp.props.forEach(prop => {
-      if (!prop.startsWith('...')) {
-        const existing = propUsage.get(prop) || [];
-        existing.push(comp.name);
-        propUsage.set(prop, existing);
-      }
-    });
-  });
-
-  // Find props used in more than maxPropDrillingDepth components
-  propUsage.forEach((componentNames, propName) => {
-    if (componentNames.length > config.maxPropDrillingDepth) {
-      const firstComp = components.find(c => c.name === componentNames[0]);
-      smells.push({
-        type: 'prop-drilling',
-        severity: 'warning',
-        message: `Prop "${propName}" is passed through ${componentNames.length} components: ${componentNames.join(' → ')}`,
-        file: filePath,
-        line: firstComp?.startLine || 1,
-        column: 0,
-        suggestion: `Move "${propName}" to Context or a state management solution`,
-        codeSnippet: firstComp ? getCodeSnippet(sourceCode, firstComp.startLine) : undefined,
-      });
-    }
-  });
-
-  return smells;
-}

package/src/detectors/reactNative.ts

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

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

package/src/detectors/typescript.ts

@@ -1,151 +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 TypeScript-specific code smells:
- * - Overuse of 'any' type
- * - Missing return type on functions
- * - Non-null assertion operator (!)
- * - Type assertions (as) that could be avoided
- */
-export function detectTypescriptIssues(
-  component: ParsedComponent,
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG
-): CodeSmell[] {
-  if (!config.checkTypescript) return [];
-  
-  // Only run on TypeScript files
-  if (!filePath.endsWith('.ts') && !filePath.endsWith('.tsx')) return [];
-
-  const smells: CodeSmell[] = [];
-
-  // Detect 'any' type usage
-  component.path.traverse({
-    TSAnyKeyword(path) {
-      const loc = path.node.loc;
-      smells.push({
-        type: 'ts-any-usage',
-        severity: 'warning',
-        message: `Using "any" type in "${component.name}"`,
-        file: filePath,
-        line: loc?.start.line || 0,
-        column: loc?.start.column || 0,
-        suggestion: 'Use a specific type, "unknown", or create an interface',
-        codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-      });
-    },
-  });
-
-  // Detect functions without return type (only in complex functions)
-  component.path.traverse({
-    FunctionDeclaration(path) {
-      // Skip if function has explicit return type
-      if (path.node.returnType) return;
-      
-      // Check if function body has return statements
-      let hasReturn = false;
-      path.traverse({
-        ReturnStatement(returnPath) {
-          if (returnPath.node.argument) {
-            hasReturn = true;
-          }
-        },
-      });
-      
-      if (hasReturn) {
-        const loc = path.node.loc;
-        smells.push({
-          type: 'ts-missing-return-type',
-          severity: 'info',
-          message: `Function "${path.node.id?.name || 'anonymous'}" missing return type`,
-          file: filePath,
-          line: loc?.start.line || 0,
-          column: loc?.start.column || 0,
-          suggestion: 'Add explicit return type: function name(): ReturnType { ... }',
-          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-        });
-      }
-    },
-
-    ArrowFunctionExpression(path) {
-      // Only check arrow functions assigned to variables with 5+ lines
-      if (!path.node.returnType) {
-        const body = path.node.body;
-        
-        // Skip simple arrow functions (single expression)
-        if (!t.isBlockStatement(body)) return;
-        
-        // Check complexity - only flag if function is substantial
-        const startLine = path.node.loc?.start.line || 0;
-        const endLine = path.node.loc?.end.line || 0;
-        
-        if (endLine - startLine >= 5) {
-          // Check if parent is variable declarator (assigned to variable)
-          const parent = path.parent;
-          
-          if (t.isVariableDeclarator(parent) && t.isIdentifier(parent.id)) {
-            const loc = path.node.loc;
-            smells.push({
-              type: 'ts-missing-return-type',
-              severity: 'info',
-              message: `Arrow function "${parent.id.name}" missing return type`,
-              file: filePath,
-              line: loc?.start.line || 0,
-              column: loc?.start.column || 0,
-              suggestion: 'Add return type: const name = (): ReturnType => { ... }',
-              codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-            });
-          }
-        }
-      }
-    },
-  });
-
-  // Detect non-null assertion operator (!)
-  component.path.traverse({
-    TSNonNullExpression(path) {
-      const loc = path.node.loc;
-      smells.push({
-        type: 'ts-non-null-assertion',
-        severity: 'warning',
-        message: `Non-null assertion (!) bypasses type safety in "${component.name}"`,
-        file: filePath,
-        line: loc?.start.line || 0,
-        column: loc?.start.column || 0,
-        suggestion: 'Use optional chaining (?.) or proper null checks instead',
-        codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-      });
-    },
-  });
-
-  // Detect type assertions (as keyword) - these can hide type errors
-  component.path.traverse({
-    TSAsExpression(path) {
-      // Skip assertions to 'const' (used for const assertions)
-      if (t.isTSTypeReference(path.node.typeAnnotation)) {
-        const typeName = path.node.typeAnnotation.typeName;
-        if (t.isIdentifier(typeName) && typeName.name === 'const') return;
-      }
-      
-      // Skip double assertions (as unknown as Type) - already flagged by TypeScript
-      if (t.isTSAsExpression(path.node.expression)) return;
-      
-      const loc = path.node.loc;
-      smells.push({
-        type: 'ts-type-assertion',
-        severity: 'info',
-        message: `Type assertion (as) bypasses type checking in "${component.name}"`,
-        file: filePath,
-        line: loc?.start.line || 0,
-        column: loc?.start.column || 0,
-        suggestion: 'Consider using type guards or proper typing instead of assertions',
-        codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-      });
-    },
-  });
-
-  return smells;
-}