react-code-smell-detector 1.2.0 → 1.3.1

package/src/detectors/javascript.ts

@@ -1,169 +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 vanilla JavaScript code smells:
- * - var usage (should use let/const)
- * - Loose equality (== instead of ===)
- * - Implicit type coercion
- * - Global variable pollution
- */
-export function detectJavascriptIssues(
-  component: ParsedComponent,
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG
-): CodeSmell[] {
-  if (!config.checkJavascript) return [];
-
-  const smells: CodeSmell[] = [];
-
-  // Detect var usage (should use let/const)
-  component.path.traverse({
-    VariableDeclaration(path) {
-      if (path.node.kind === 'var') {
-        const loc = path.node.loc;
-        smells.push({
-          type: 'js-var-usage',
-          severity: 'warning',
-          message: `Using "var" instead of "let" or "const" in "${component.name}"`,
-          file: filePath,
-          line: loc?.start.line || 0,
-          column: loc?.start.column || 0,
-          suggestion: 'Use "const" for values that never change, "let" for reassignable variables',
-          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-        });
-      }
-    },
-  });
-
-  // Detect loose equality (== and != instead of === and !==)
-  component.path.traverse({
-    BinaryExpression(path) {
-      const { operator, left, right } = path.node;
-      
-      // Skip if comparing with null/undefined (sometimes intentional)
-      const isNullCheck = 
-        (t.isNullLiteral(left) || t.isNullLiteral(right)) ||
-        (t.isIdentifier(left) && left.name === 'undefined') ||
-        (t.isIdentifier(right) && right.name === 'undefined');
-      
-      if (operator === '==' && !isNullCheck) {
-        const loc = path.node.loc;
-        smells.push({
-          type: 'js-loose-equality',
-          severity: 'warning',
-          message: `Using loose equality "==" in "${component.name}"`,
-          file: filePath,
-          line: loc?.start.line || 0,
-          column: loc?.start.column || 0,
-          suggestion: 'Use strict equality "===" to avoid type coercion bugs',
-          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-        });
-      }
-      
-      if (operator === '!=' && !isNullCheck) {
-        const loc = path.node.loc;
-        smells.push({
-          type: 'js-loose-equality',
-          severity: 'warning',
-          message: `Using loose inequality "!=" in "${component.name}"`,
-          file: filePath,
-          line: loc?.start.line || 0,
-          column: loc?.start.column || 0,
-          suggestion: 'Use strict inequality "!==" to avoid type coercion bugs',
-          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-        });
-      }
-    },
-  });
-
-  // Detect implicit type coercion patterns
-  component.path.traverse({
-    // +string to convert to number
-    UnaryExpression(path) {
-      if (path.node.operator === '+' && t.isIdentifier(path.node.argument)) {
-        const loc = path.node.loc;
-        smells.push({
-          type: 'js-implicit-coercion',
-          severity: 'info',
-          message: `Implicit number coercion with unary + in "${component.name}"`,
-          file: filePath,
-          line: loc?.start.line || 0,
-          column: loc?.start.column || 0,
-          suggestion: 'Use explicit conversion: Number(value) or parseInt(value, 10)',
-          codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-        });
-      }
-    },
-    
-    // !!value for boolean coercion - detected via UnaryExpression
-    // LogicalExpression handles &&, ||, ?? - skip for !! detection
-    
-    // String concatenation with + that mixes types
-    BinaryExpression(path) {
-      if (path.node.operator === '+') {
-        const { left, right } = path.node;
-        const leftIsString = t.isStringLiteral(left) || t.isTemplateLiteral(left);
-        const rightIsString = t.isStringLiteral(right) || t.isTemplateLiteral(right);
-        const leftIsNumber = t.isNumericLiteral(left);
-        const rightIsNumber = t.isNumericLiteral(right);
-        
-        // Mixed string + number concatenation
-        if ((leftIsString && rightIsNumber) || (leftIsNumber && rightIsString)) {
-          const loc = path.node.loc;
-          smells.push({
-            type: 'js-implicit-coercion',
-            severity: 'info',
-            message: `Implicit string coercion in "${component.name}"`,
-            file: filePath,
-            line: loc?.start.line || 0,
-            column: loc?.start.column || 0,
-            suggestion: 'Use template literal for clarity: `${value}` or String(value)',
-            codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-          });
-        }
-      }
-    },
-  });
-
-  // Detect potential global pollution (assignments without declaration)
-  component.path.traverse({
-    AssignmentExpression(path) {
-      const { left } = path.node;
-      
-      if (t.isIdentifier(left)) {
-        // Check if this identifier is declared in scope
-        const binding = path.scope.getBinding(left.name);
-        
-        if (!binding) {
-          // Check if it's a well-known global
-          const knownGlobals = [
-            'window', 'document', 'console', 'localStorage', 'sessionStorage',
-            'setTimeout', 'setInterval', 'clearTimeout', 'clearInterval',
-            'fetch', 'XMLHttpRequest', 'WebSocket', 'module', 'exports',
-            'require', 'process', 'global', '__dirname', '__filename',
-            'Buffer', 'Promise', 'Map', 'Set', 'Symbol',
-          ];
-          
-          if (!knownGlobals.includes(left.name)) {
-            const loc = path.node.loc;
-            smells.push({
-              type: 'js-global-pollution',
-              severity: 'error',
-              message: `Implicit global variable "${left.name}" in "${component.name}"`,
-              file: filePath,
-              line: loc?.start.line || 0,
-              column: loc?.start.column || 0,
-              suggestion: `Declare the variable: const ${left.name} = ... or let ${left.name} = ...`,
-              codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
-            });
-          }
-        }
-      }
-    },
-  });
-
-  return smells;
-}

package/src/detectors/largeComponent.ts

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

@@ -1,114 +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 magic numbers and strings that should be constants
- */
-export function detectMagicValues(
-  component: ParsedComponent,
-  filePath: string,
-  sourceCode: string,
-  config: DetectorConfig = DEFAULT_CONFIG
-): CodeSmell[] {
-  if (!config.checkMagicValues) return [];
-
-  const smells: CodeSmell[] = [];
-  const threshold = config.magicNumberThreshold;
-
-  // Track locations to avoid duplicate reports
-  const reportedLines = new Set<number>();
-
-  component.path.traverse({
-    NumericLiteral(path) {
-      const value = path.node.value;
-      const loc = path.node.loc;
-      const line = loc?.start.line || 0;
-
-      // Skip common acceptable values
-      if (value === 0 || value === 1 || value === -1 || value === 2 || value === 100) return;
-      
-      // Skip array indices and small numbers
-      if (value < threshold && value > -threshold) return;
-
-      // Skip if inside an object key position (e.g., style objects)
-      if (t.isObjectProperty(path.parent) && path.parent.key === path.node) return;
-
-      // Skip if it's a port number or similar config
-      if (value === 3000 || value === 8080 || value === 80 || value === 443) return;
-
-      // Skip if already reported this line
-      if (reportedLines.has(line)) return;
-      reportedLines.add(line);
-
-      // Check context - skip if it's in a variable declaration that names the constant
-      if (t.isVariableDeclarator(path.parent)) {
-        const varName = t.isIdentifier(path.parent.id) ? path.parent.id.name : '';
-        // If variable name is UPPER_CASE, it's already a constant
-        if (varName === varName.toUpperCase() && varName.includes('_')) return;
-      }
-
-      smells.push({
-        type: 'magic-value',
-        severity: 'info',
-        message: `Magic number ${value} in "${component.name}"`,
-        file: filePath,
-        line,
-        column: loc?.start.column || 0,
-        suggestion: `Extract to a named constant: const DESCRIPTIVE_NAME = ${value}`,
-        codeSnippet: getCodeSnippet(sourceCode, line),
-      });
-    },
-
-    StringLiteral(path) {
-      const value = path.node.value;
-      const loc = path.node.loc;
-      const line = loc?.start.line || 0;
-
-      // Skip short strings, empty strings, common values
-      if (value.length < 10) return;
-      
-      // Skip if it looks like a URL, path, or import
-      if (value.startsWith('http') || value.startsWith('/') || value.startsWith('.')) return;
-      
-      // Skip if it's an import source
-      if (t.isImportDeclaration(path.parent)) return;
-      
-      // Skip JSX text content (usually intentional)
-      if (t.isJSXText(path.parent) || t.isJSXExpressionContainer(path.parent)) return;
-      
-      // Skip object property keys
-      if (t.isObjectProperty(path.parent) && path.parent.key === path.node) return;
-
-      // Skip if already reported this line
-      if (reportedLines.has(line)) return;
-
-      // Skip common patterns
-      if (
-        value.includes('className') ||
-        value.includes('px') ||
-        value.includes('rem') ||
-        value.includes('%')
-      ) return;
-
-      // Check if it looks like a user-facing message or error
-      const looksLikeMessage = /^[A-Z][a-z]+.*[.!?]?$/.test(value) || value.includes(' ');
-      
-      if (looksLikeMessage && value.length > 30) {
-        reportedLines.add(line);
-        smells.push({
-          type: 'magic-value',
-          severity: 'info',
-          message: `Hardcoded string in "${component.name}" should be in constants or i18n`,
-          file: filePath,
-          line,
-          column: loc?.start.column || 0,
-          suggestion: `Extract to a constants file or use i18n: "${value.substring(0, 30)}..."`,
-          codeSnippet: getCodeSnippet(sourceCode, line),
-        });
-      }
-    },
-  });
-
-  return smells;
-}

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;
-}