react-code-smell-detector 1.1.1 → 1.3.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/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;
-}

package/src/detectors/useEffect.ts

@@ -1,117 +0,0 @@
-import * as t from '@babel/types';
-import { ParsedComponent, getCodeSnippet } from '../parser/index.js';
-import { CodeSmell, DetectorConfig, DEFAULT_CONFIG } from '../types/index.js';
-
-export function detectUseEffectOveruse(
-  component: ParsedComponent,
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG
-): CodeSmell[] {
-  const smells: CodeSmell[] = [];
-  const { useEffect } = component.hooks;
-
-  // Check for too many useEffects
-  if (useEffect.length > config.maxUseEffectsPerComponent) {
-    smells.push({
-      type: 'useEffect-overuse',
-      severity: 'warning',
-      message: `Component "${component.name}" has ${useEffect.length} useEffect hooks (max recommended: ${config.maxUseEffectsPerComponent})`,
-      file: filePath,
-      line: component.startLine,
-      column: 0,
-      suggestion: 'Consider extracting logic into custom hooks or combining related effects',
-      codeSnippet: getCodeSnippet(sourceCode, component.startLine),
-    });
-  }
-
-  // Check each useEffect for issues
-  useEffect.forEach((effect, index) => {
-    const loc = effect.loc;
-    if (!loc) return;
-
-    // Check for empty dependency array with async operations
-    const deps = effect.arguments[1];
-    const callback = effect.arguments[0];
-
-    if (t.isArrayExpression(deps) && deps.elements.length === 0) {
-      // Empty dependency array - check if it's justified
-      let hasAsyncOperation = false;
-      let hasStateUpdate = false;
-
-      if (t.isArrowFunctionExpression(callback) || t.isFunctionExpression(callback)) {
-        const body = callback.body;
-        const checkNode = (node: t.Node) => {
-          if (t.isAwaitExpression(node)) hasAsyncOperation = true;
-          if (t.isCallExpression(node)) {
-            const callee = node.callee;
-            if (t.isIdentifier(callee) && callee.name.startsWith('set')) {
-              hasStateUpdate = true;
-            }
-          }
-        };
-
-        if (t.isBlockStatement(body)) {
-          body.body.forEach(stmt => {
-            t.traverseFast(stmt, checkNode);
-          });
-        }
-      }
-
-      if (hasAsyncOperation && hasStateUpdate) {
-        smells.push({
-          type: 'useEffect-overuse',
-          severity: 'info',
-          message: `useEffect #${index + 1} in "${component.name}" has empty deps but contains async state updates`,
-          file: filePath,
-          line: loc.start.line,
-          column: loc.start.column,
-          suggestion: 'Consider using React Query, SWR, or a custom hook for data fetching',
-          codeSnippet: getCodeSnippet(sourceCode, loc.start.line),
-        });
-      }
-    }
-
-    // Check for missing cleanup
-    if (t.isArrowFunctionExpression(callback) || t.isFunctionExpression(callback)) {
-      let hasSubscription = false;
-      let hasCleanup = false;
-
-      const checkSubscription = (node: t.Node) => {
-        if (t.isCallExpression(node) && t.isMemberExpression(node.callee)) {
-          const prop = node.callee.property;
-          if (t.isIdentifier(prop)) {
-            if (['addEventListener', 'subscribe', 'on', 'setInterval', 'setTimeout'].includes(prop.name)) {
-              hasSubscription = true;
-            }
-          }
-        }
-      };
-
-      const body = callback.body;
-      if (t.isBlockStatement(body)) {
-        body.body.forEach(stmt => {
-          t.traverseFast(stmt, checkSubscription);
-          if (t.isReturnStatement(stmt) && stmt.argument) {
-            hasCleanup = true;
-          }
-        });
-      }
-
-      if (hasSubscription && !hasCleanup) {
-        smells.push({
-          type: 'useEffect-overuse',
-          severity: 'error',
-          message: `useEffect in "${component.name}" sets up subscription but has no cleanup function`,
-          file: filePath,
-          line: loc.start.line,
-          column: loc.start.column,
-          suggestion: 'Add a cleanup function to remove event listeners/subscriptions',
-          codeSnippet: getCodeSnippet(sourceCode, loc.start.line),
-        });
-      }
-    }
-  });
-
-  return smells;
-}

package/src/index.ts

@@ -1,4 +0,0 @@
-export { analyzeProject, type AnalyzerOptions } from './analyzer.js';
-export { reportResults, type ReporterOptions } from './reporter.js';
-export * from './types/index.js';
-export { parseFile, parseCode, type ParseResult, type ParsedComponent } from './parser/index.js';