react-code-smell-detector 1.0.0

package/src/detectors/largeComponent.ts

@@ -0,0 +1,63 @@
+import { ParsedComponent, getCodeSnippet } from '../parser/index.js';
+import { CodeSmell, DetectorConfig, DEFAULT_CONFIG } from '../types/index.js';
+
+export function detectLargeComponent(
+  component: ParsedComponent,
+  filePath: string,
+  sourceCode: string,
+  config: DetectorConfig = DEFAULT_CONFIG
+): CodeSmell[] {
+  const smells: CodeSmell[] = [];
+  const lineCount = component.endLine - component.startLine + 1;
+
+  if (lineCount > config.maxComponentLines) {
+    smells.push({
+      type: 'large-component',
+      severity: 'warning',
+      message: `Component "${component.name}" has ${lineCount} lines (max recommended: ${config.maxComponentLines})`,
+      file: filePath,
+      line: component.startLine,
+      column: 0,
+      suggestion: 'Break this component into smaller, more focused components',
+      codeSnippet: getCodeSnippet(sourceCode, component.startLine),
+    });
+  }
+
+  // Check for complex JSX nesting
+  if (component.jsxDepth > 10) {
+    smells.push({
+      type: 'deep-nesting',
+      severity: 'info',
+      message: `Component "${component.name}" has deeply nested JSX (depth: ~${component.jsxDepth})`,
+      file: filePath,
+      line: component.startLine,
+      column: 0,
+      suggestion: 'Extract nested elements into separate components for better readability',
+      codeSnippet: getCodeSnippet(sourceCode, component.startLine),
+    });
+  }
+
+  // Check for too many hooks (complexity indicator)
+  const totalHooks = 
+    component.hooks.useEffect.length +
+    component.hooks.useState.length +
+    component.hooks.useMemo.length +
+    component.hooks.useCallback.length +
+    component.hooks.useRef.length +
+    component.hooks.custom.length;
+
+  if (totalHooks > 10) {
+    smells.push({
+      type: 'large-component',
+      severity: 'warning',
+      message: `Component "${component.name}" uses ${totalHooks} hooks - high complexity`,
+      file: filePath,
+      line: component.startLine,
+      column: 0,
+      suggestion: 'Extract related logic into custom hooks',
+      codeSnippet: getCodeSnippet(sourceCode, component.startLine),
+    });
+  }
+
+  return smells;
+}

package/src/detectors/memoization.ts

@@ -0,0 +1,177 @@
+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/propDrilling.ts

@@ -0,0 +1,103 @@
+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/useEffect.ts

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

@@ -0,0 +1,4 @@
+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';

package/src/parser/index.ts

@@ -0,0 +1,195 @@
+import * as parser from '@babel/parser';
+import _traverse, { NodePath } from '@babel/traverse';
+import * as t from '@babel/types';
+import fs from 'fs/promises';
+
+// Handle ESM/CJS interop
+const traverse = (_traverse as unknown as { default: typeof _traverse }).default || _traverse;
+
+export interface ParsedComponent {
+  name: string;
+  startLine: number;
+  endLine: number;
+  node: t.FunctionDeclaration | t.ArrowFunctionExpression | t.FunctionExpression;
+  path: NodePath;
+  hooks: {
+    useEffect: t.CallExpression[];
+    useState: t.CallExpression[];
+    useMemo: t.CallExpression[];
+    useCallback: t.CallExpression[];
+    useRef: t.CallExpression[];
+    custom: t.CallExpression[];
+  };
+  props: string[];
+  jsxDepth: number;
+}
+
+export interface ParseResult {
+  ast: t.File;
+  components: ParsedComponent[];
+  imports: string[];
+  sourceCode: string;
+}
+
+export async function parseFile(filePath: string): Promise<ParseResult> {
+  const sourceCode = await fs.readFile(filePath, 'utf-8');
+  return parseCode(sourceCode, filePath);
+}
+
+export function parseCode(sourceCode: string, filePath: string = 'unknown'): ParseResult {
+  const ast = parser.parse(sourceCode, {
+    sourceType: 'module',
+    plugins: [
+      'jsx',
+      'typescript',
+      'decorators-legacy',
+      'classProperties',
+      'optionalChaining',
+      'nullishCoalescingOperator',
+    ],
+    sourceFilename: filePath,
+  });
+
+  const components: ParsedComponent[] = [];
+  const imports: string[] = [];
+
+  traverse(ast, {
+    ImportDeclaration(path) {
+      imports.push(path.node.source.value);
+    },
+
+    FunctionDeclaration(path) {
+      if (isReactComponent(path.node.id?.name, path)) {
+        components.push(extractComponentInfo(path.node.id?.name || 'Anonymous', path));
+      }
+    },
+
+    VariableDeclarator(path) {
+      const init = path.node.init;
+      const id = path.node.id;
+      
+      if (
+        t.isIdentifier(id) &&
+        (t.isArrowFunctionExpression(init) || t.isFunctionExpression(init))
+      ) {
+        if (isReactComponent(id.name, path)) {
+          components.push(extractComponentInfo(id.name, path, init));
+        }
+      }
+    },
+  });
+
+  return { ast, components, imports, sourceCode };
+}
+
+function isReactComponent(name: string | undefined, path: NodePath): boolean {
+  if (!name) return false;
+  
+  // Component names start with uppercase
+  if (!/^[A-Z]/.test(name)) return false;
+
+  // Check if it returns JSX
+  let hasJSX = false;
+  path.traverse({
+    JSXElement() {
+      hasJSX = true;
+    },
+    JSXFragment() {
+      hasJSX = true;
+    },
+  });
+
+  return hasJSX;
+}
+
+function extractComponentInfo(
+  name: string,
+  path: NodePath,
+  node?: t.ArrowFunctionExpression | t.FunctionExpression
+): ParsedComponent {
+  const actualNode = node || (path.node as t.FunctionDeclaration);
+  const loc = actualNode.loc;
+
+  const hooks = {
+    useEffect: [] as t.CallExpression[],
+    useState: [] as t.CallExpression[],
+    useMemo: [] as t.CallExpression[],
+    useCallback: [] as t.CallExpression[],
+    useRef: [] as t.CallExpression[],
+    custom: [] as t.CallExpression[],
+  };
+
+  const props: string[] = [];
+  let jsxDepth = 0;
+
+  // Extract hooks
+  path.traverse({
+    CallExpression(callPath) {
+      const callee = callPath.node.callee;
+      if (t.isIdentifier(callee)) {
+        const hookName = callee.name;
+        if (hookName === 'useEffect') hooks.useEffect.push(callPath.node);
+        else if (hookName === 'useState') hooks.useState.push(callPath.node);
+        else if (hookName === 'useMemo') hooks.useMemo.push(callPath.node);
+        else if (hookName === 'useCallback') hooks.useCallback.push(callPath.node);
+        else if (hookName === 'useRef') hooks.useRef.push(callPath.node);
+        else if (hookName.startsWith('use')) hooks.custom.push(callPath.node);
+      }
+    },
+  });
+
+  // Extract props
+  const params = t.isFunctionDeclaration(actualNode) 
+    ? actualNode.params 
+    : actualNode.params;
+    
+  if (params.length > 0) {
+    const firstParam = params[0];
+    if (t.isObjectPattern(firstParam)) {
+      firstParam.properties.forEach(prop => {
+        if (t.isObjectProperty(prop) && t.isIdentifier(prop.key)) {
+          props.push(prop.key.name);
+        } else if (t.isRestElement(prop) && t.isIdentifier(prop.argument)) {
+          props.push(`...${prop.argument.name}`);
+        }
+      });
+    } else if (t.isIdentifier(firstParam)) {
+      props.push(firstParam.name);
+    }
+  }
+
+  // Calculate JSX nesting depth
+  path.traverse({
+    JSXElement: {
+      enter() {
+        jsxDepth++;
+      },
+    },
+  });
+
+  return {
+    name,
+    startLine: loc?.start.line || 0,
+    endLine: loc?.end.line || 0,
+    node: actualNode as any,
+    path,
+    hooks,
+    props,
+    jsxDepth: Math.floor(jsxDepth / 2), // Approximate depth
+  };
+}
+
+export function getCodeSnippet(sourceCode: string, line: number, context: number = 2): string {
+  const lines = sourceCode.split('\n');
+  const start = Math.max(0, line - context - 1);
+  const end = Math.min(lines.length, line + context);
+  
+  return lines
+    .slice(start, end)
+    .map((l, i) => {
+      const lineNum = start + i + 1;
+      const marker = lineNum === line ? '>' : ' ';
+      return `${marker} ${lineNum.toString().padStart(4)} | ${l}`;
+    })
+    .join('\n');
+}