react-code-smell-detector 1.0.0 → 1.1.1

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/typescript.ts

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

@@ -243,6 +243,36 @@ function formatSmellType(type: string): string {
     'state-in-loop': '🔄 State in Loop',
     'inline-function-prop': '📎 Inline Function Prop',
     'deep-nesting': '📊 Deep Nesting',
+    'missing-key': '🔑 Missing Key',
+    'hooks-rules-violation': '⚠️ Hooks Rules Violation',
+    'dependency-array-issue': '📋 Dependency Array Issue',
+    'nested-ternary': '❓ Nested Ternary',
+    'dead-code': '💀 Dead Code',
+    'magic-value': '🔢 Magic Value',
+    // Next.js
+    'nextjs-client-server-boundary': '▲ Next.js Client/Server Boundary',
+    'nextjs-missing-metadata': '▲ Next.js Missing Metadata',
+    'nextjs-image-unoptimized': '▲ Next.js Unoptimized Image',
+    'nextjs-router-misuse': '▲ Next.js Router Misuse',
+    // React Native
+    'rn-inline-style': '📱 RN Inline Style',
+    'rn-missing-accessibility': '📱 RN Missing Accessibility',
+    'rn-performance-issue': '📱 RN Performance Issue',
+    // Node.js
+    'nodejs-callback-hell': '🟢 Node.js Callback Hell',
+    'nodejs-unhandled-promise': '🟢 Node.js Unhandled Promise',
+    'nodejs-sync-io': '🟢 Node.js Sync I/O',
+    'nodejs-missing-error-handling': '🟢 Node.js Missing Error Handling',
+    // JavaScript
+    'js-var-usage': '📜 JS var Usage',
+    'js-loose-equality': '📜 JS Loose Equality',
+    'js-implicit-coercion': '📜 JS Implicit Coercion',
+    'js-global-pollution': '📜 JS Global Pollution',
+    // TypeScript
+    'ts-any-usage': '🔷 TS any Usage',
+    'ts-missing-return-type': '🔷 TS Missing Return Type',
+    'ts-non-null-assertion': '🔷 TS Non-null Assertion',
+    'ts-type-assertion': '🔷 TS Type Assertion',
   };
   return labels[type] || type;
 }

package/src/types/index.ts

@@ -8,7 +8,37 @@ export type SmellType =
   | 'missing-dependency'
   | 'state-in-loop'
   | 'inline-function-prop'
-  | 'deep-nesting';
+  | 'deep-nesting'
+  | 'missing-key'
+  | 'hooks-rules-violation'
+  | 'dependency-array-issue'
+  | 'nested-ternary'
+  | 'dead-code'
+  | 'magic-value'
+  // Next.js specific
+  | 'nextjs-client-server-boundary'
+  | 'nextjs-missing-metadata'
+  | 'nextjs-image-unoptimized'
+  | 'nextjs-router-misuse'
+  // React Native specific
+  | 'rn-inline-style'
+  | 'rn-missing-accessibility'
+  | 'rn-performance-issue'
+  // Node.js specific
+  | 'nodejs-callback-hell'
+  | 'nodejs-unhandled-promise'
+  | 'nodejs-sync-io'
+  | 'nodejs-missing-error-handling'
+  // JavaScript specific
+  | 'js-var-usage'
+  | 'js-loose-equality'
+  | 'js-implicit-coercion'
+  | 'js-global-pollution'
+  // TypeScript specific
+  | 'ts-any-usage'
+  | 'ts-missing-return-type'
+  | 'ts-non-null-assertion'
+  | 'ts-type-assertion';
 
 export interface CodeSmell {
   type: SmellType;
@@ -75,6 +105,20 @@ export interface DetectorConfig {
   maxComponentLines: number;
   maxPropsCount: number;
   checkMemoization: boolean;
+  checkMissingKeys: boolean;
+  checkHooksRules: boolean;
+  checkDependencyArrays: boolean;
+  maxTernaryDepth: number;
+  checkDeadCode: boolean;
+  checkMagicValues: boolean;
+  magicNumberThreshold: number;
+  // Framework detection
+  checkNextjs: boolean;
+  checkReactNative: boolean;
+  checkNodejs: boolean;
+  checkJavascript: boolean;
+  checkTypescript: boolean;
+  maxCallbackDepth: number;
 }
 
 export const DEFAULT_CONFIG: DetectorConfig = {
@@ -83,4 +127,18 @@ export const DEFAULT_CONFIG: DetectorConfig = {
   maxComponentLines: 300,
   maxPropsCount: 7,
   checkMemoization: true,
+  checkMissingKeys: true,
+  checkHooksRules: true,
+  checkDependencyArrays: true,
+  maxTernaryDepth: 2,
+  checkDeadCode: true,
+  checkMagicValues: true,
+  magicNumberThreshold: 10,
+  // Framework detection - auto-enabled based on project
+  checkNextjs: true,
+  checkReactNative: true,
+  checkNodejs: true,
+  checkJavascript: true,
+  checkTypescript: true,
+  maxCallbackDepth: 3,
 };