react-code-smell-detector 1.0.1 → 1.2.0

package/src/cli.ts

@@ -6,6 +6,7 @@ import ora from 'ora';
 import path from 'path';
 import { analyzeProject, DEFAULT_CONFIG } from './analyzer.js';
 import { reportResults } from './reporter.js';
+import { generateHTMLReport } from './htmlReporter.js';
 import fs from 'fs/promises';
 
 const program = new Command();
@@ -13,11 +14,13 @@ const program = new Command();
 program
   .name('react-smell')
   .description('Detect code smells in React projects')
-  .version('1.0.0')
+  .version('1.2.0')
   .argument('[directory]', 'Directory to analyze', '.')
-  .option('-f, --format <format>', 'Output format: console, json, markdown', 'console')
+  .option('-f, --format <format>', 'Output format: console, json, markdown, html', 'console')
   .option('-s, --snippets', 'Show code snippets in output', false)
   .option('-c, --config <file>', 'Path to config file')
+  .option('--ci', 'CI mode: exit with code 1 if any issues found')
+  .option('--fail-on <severity>', 'Exit with code 1 if issues of this severity or higher (error, warning, info)', 'error')
   .option('--max-effects <number>', 'Max useEffects per component', parseInt)
   .option('--max-props <number>', 'Max props before warning', parseInt)
   .option('--max-lines <number>', 'Max lines per component', parseInt)
@@ -72,11 +75,20 @@ program
 
       spinner.stop();
 
-      const output = reportResults(result, {
-        format: options.format,
-        showCodeSnippets: options.snippets,
-        rootDir,
-      });
+      let output: string;
+      if (options.format === 'html') {
+        output = generateHTMLReport(result, rootDir);
+        // Auto-set output file for HTML if not specified
+        if (!options.output) {
+          options.output = 'code-smell-report.html';
+        }
+      } else {
+        output = reportResults(result, {
+          format: options.format,
+          showCodeSnippets: options.snippets,
+          rootDir,
+        });
+      }
 
       if (options.output) {
         const outputPath = path.resolve(process.cwd(), options.output);
@@ -86,8 +98,30 @@ program
         console.log(output);
       }
 
-      // Exit with error code if there are errors
-      if (result.summary.smellsBySeverity.error > 0) {
+      // CI/CD exit code handling
+      const { smellsBySeverity } = result.summary;
+      let shouldFail = false;
+
+      if (options.ci) {
+        // CI mode: fail on any issues
+        shouldFail = result.summary.totalSmells > 0;
+      } else {
+        // Check fail-on threshold
+        switch (options.failOn) {
+          case 'info':
+            shouldFail = smellsBySeverity.info > 0 || smellsBySeverity.warning > 0 || smellsBySeverity.error > 0;
+            break;
+          case 'warning':
+            shouldFail = smellsBySeverity.warning > 0 || smellsBySeverity.error > 0;
+            break;
+          case 'error':
+          default:
+            shouldFail = smellsBySeverity.error > 0;
+            break;
+        }
+      }
+
+      if (shouldFail) {
         process.exit(1);
       }
     } catch (error) {

package/src/detectors/accessibility.ts

@@ -0,0 +1,212 @@
+import * as t from '@babel/types';
+import { ParsedComponent, getCodeSnippet } from '../parser/index.js';
+import { CodeSmell, DetectorConfig, DEFAULT_CONFIG } from '../types/index.js';
+
+/**
+ * Detects accessibility (a11y) issues:
+ * - Images without alt text
+ * - Form inputs without labels
+ * - Missing ARIA attributes on interactive elements
+ * - Click handlers without keyboard support
+ * - Improper heading hierarchy
+ */
+export function detectAccessibilityIssues(
+  component: ParsedComponent,
+  filePath: string,
+  sourceCode: string,
+  config: DetectorConfig = DEFAULT_CONFIG
+): CodeSmell[] {
+  if (!config.checkAccessibility) return [];
+
+  const smells: CodeSmell[] = [];
+
+  component.path.traverse({
+    JSXOpeningElement(path) {
+      if (!t.isJSXIdentifier(path.node.name)) return;
+      
+      const elementName = path.node.name.name;
+      const attributes = path.node.attributes;
+      const loc = path.node.loc;
+      const line = loc?.start.line || 0;
+
+      // Helper to check if attribute exists
+      const hasAttr = (name: string): boolean => {
+        return attributes.some(attr => {
+          if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) {
+            return attr.name.name === name;
+          }
+          // Handle spread attributes - assume they might contain the attribute
+          return t.isJSXSpreadAttribute(attr);
+        });
+      };
+
+      // Helper to get attribute value
+      const getAttrValue = (name: string): string | null => {
+        for (const attr of attributes) {
+          if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === name) {
+            if (t.isStringLiteral(attr.value)) {
+              return attr.value.value;
+            }
+          }
+        }
+        return null;
+      };
+
+      // Check for images without alt text
+      if (elementName === 'img') {
+        if (!hasAttr('alt')) {
+          smells.push({
+            type: 'a11y-missing-alt',
+            severity: 'error',
+            message: `<img> missing alt attribute in "${component.name}"`,
+            file: filePath,
+            line,
+            column: loc?.start.column || 0,
+            suggestion: 'Add alt="description" for content images, or alt="" for decorative images',
+            codeSnippet: getCodeSnippet(sourceCode, line),
+          });
+        } else {
+          const altValue = getAttrValue('alt');
+          if (altValue !== null && altValue.toLowerCase().includes('image')) {
+            smells.push({
+              type: 'a11y-missing-alt',
+              severity: 'info',
+              message: `<img> alt text shouldn't contain "image" - it's redundant`,
+              file: filePath,
+              line,
+              column: loc?.start.column || 0,
+              suggestion: 'Describe what the image shows, not that it is an image',
+              codeSnippet: getCodeSnippet(sourceCode, line),
+            });
+          }
+        }
+      }
+
+      // Check for form inputs without associated labels
+      if (elementName === 'input' || elementName === 'textarea' || elementName === 'select') {
+        const inputType = getAttrValue('type') || 'text';
+        
+        // Skip hidden inputs
+        if (inputType === 'hidden') return;
+        
+        const hasLabel = hasAttr('aria-label') || 
+                        hasAttr('aria-labelledby') || 
+                        hasAttr('id'); // Assume id might be linked to a label
+        
+        if (!hasLabel) {
+          smells.push({
+            type: 'a11y-missing-label',
+            severity: 'warning',
+            message: `<${elementName}> without accessible label in "${component.name}"`,
+            file: filePath,
+            line,
+            column: loc?.start.column || 0,
+            suggestion: 'Add aria-label, aria-labelledby, or associate with a <label> element',
+            codeSnippet: getCodeSnippet(sourceCode, line),
+          });
+        }
+      }
+
+      // Check for interactive divs/spans without proper role and keyboard support
+      if (elementName === 'div' || elementName === 'span') {
+        const hasOnClick = hasAttr('onClick');
+        const hasRole = hasAttr('role');
+        const hasTabIndex = hasAttr('tabIndex');
+        const hasKeyboardHandler = hasAttr('onKeyDown') || hasAttr('onKeyUp') || hasAttr('onKeyPress');
+
+        if (hasOnClick) {
+          if (!hasRole) {
+            smells.push({
+              type: 'a11y-interactive-role',
+              severity: 'warning',
+              message: `Clickable <${elementName}> without role attribute in "${component.name}"`,
+              file: filePath,
+              line,
+              column: loc?.start.column || 0,
+              suggestion: 'Add role="button" or use a <button> element instead',
+              codeSnippet: getCodeSnippet(sourceCode, line),
+            });
+          }
+
+          if (!hasTabIndex) {
+            smells.push({
+              type: 'a11y-interactive-role',
+              severity: 'warning',
+              message: `Clickable <${elementName}> not focusable in "${component.name}"`,
+              file: filePath,
+              line,
+              column: loc?.start.column || 0,
+              suggestion: 'Add tabIndex={0} to make the element focusable',
+              codeSnippet: getCodeSnippet(sourceCode, line),
+            });
+          }
+
+          if (!hasKeyboardHandler) {
+            smells.push({
+              type: 'a11y-keyboard',
+              severity: 'info',
+              message: `Clickable <${elementName}> without keyboard handler in "${component.name}"`,
+              file: filePath,
+              line,
+              column: loc?.start.column || 0,
+              suggestion: 'Add onKeyDown to handle Enter/Space for keyboard users',
+              codeSnippet: getCodeSnippet(sourceCode, line),
+            });
+          }
+        }
+      }
+
+      // Check for anchor tags without href (should be buttons)
+      if (elementName === 'a') {
+        if (!hasAttr('href')) {
+          smells.push({
+            type: 'a11y-semantic',
+            severity: 'warning',
+            message: `<a> without href should be a <button> in "${component.name}"`,
+            file: filePath,
+            line,
+            column: loc?.start.column || 0,
+            suggestion: 'Use <button> for actions and <a href="..."> for navigation',
+            codeSnippet: getCodeSnippet(sourceCode, line),
+          });
+        }
+      }
+
+      // Check for proper button usage
+      if (elementName === 'button') {
+        if (!hasAttr('type')) {
+          smells.push({
+            type: 'a11y-semantic',
+            severity: 'info',
+            message: `<button> should have explicit type attribute`,
+            file: filePath,
+            line,
+            column: loc?.start.column || 0,
+            suggestion: 'Add type="button" or type="submit" to clarify button behavior',
+            codeSnippet: getCodeSnippet(sourceCode, line),
+          });
+        }
+      }
+
+      // Check for icons that might need labels
+      if (elementName === 'svg' || elementName === 'Icon' || elementName.endsWith('Icon')) {
+        const hasAriaLabel = hasAttr('aria-label') || hasAttr('aria-hidden') || hasAttr('title');
+        
+        if (!hasAriaLabel) {
+          smells.push({
+            type: 'a11y-missing-label',
+            severity: 'info',
+            message: `Icon/SVG may need aria-label or aria-hidden in "${component.name}"`,
+            file: filePath,
+            line,
+            column: loc?.start.column || 0,
+            suggestion: 'Add aria-label for meaningful icons, or aria-hidden="true" for decorative ones',
+            codeSnippet: getCodeSnippet(sourceCode, line),
+          });
+        }
+      }
+    },
+  });
+
+  return smells;
+}

package/src/detectors/debug.ts

@@ -0,0 +1,103 @@
+import * as t from '@babel/types';
+import { ParsedComponent, getCodeSnippet } from '../parser/index.js';
+import { CodeSmell, DetectorConfig, DEFAULT_CONFIG } from '../types/index.js';
+
+/**
+ * Detects debug statements that should be removed:
+ * - console.log/warn/error/debug
+ * - debugger statements
+ * - TODO/FIXME/HACK comments (detected via source code)
+ */
+export function detectDebugStatements(
+  component: ParsedComponent,
+  filePath: string,
+  sourceCode: string,
+  config: DetectorConfig = DEFAULT_CONFIG
+): CodeSmell[] {
+  if (!config.checkDebugStatements) return [];
+
+  const smells: CodeSmell[] = [];
+  const reportedLines = new Set<number>();
+
+  // Detect console.* calls
+  component.path.traverse({
+    CallExpression(path) {
+      const { callee } = path.node;
+      
+      if (t.isMemberExpression(callee) && 
+          t.isIdentifier(callee.object) && 
+          callee.object.name === 'console') {
+        
+        const method = t.isIdentifier(callee.property) ? callee.property.name : '';
+        const debugMethods = ['log', 'warn', 'error', 'debug', 'info', 'trace', 'dir', 'table'];
+        
+        if (debugMethods.includes(method)) {
+          const loc = path.node.loc;
+          const line = loc?.start.line || 0;
+          
+          if (!reportedLines.has(line)) {
+            reportedLines.add(line);
+            smells.push({
+              type: 'debug-statement',
+              severity: 'warning',
+              message: `console.${method}() should be removed before production`,
+              file: filePath,
+              line,
+              column: loc?.start.column || 0,
+              suggestion: 'Remove console statement or use a logging library with environment-based filtering',
+              codeSnippet: getCodeSnippet(sourceCode, line),
+            });
+          }
+        }
+      }
+    },
+
+    // Detect debugger statements
+    DebuggerStatement(path) {
+      const loc = path.node.loc;
+      smells.push({
+        type: 'debug-statement',
+        severity: 'error',
+        message: 'debugger statement must be removed before production',
+        file: filePath,
+        line: loc?.start.line || 0,
+        column: loc?.start.column || 0,
+        suggestion: 'Remove the debugger statement',
+        codeSnippet: getCodeSnippet(sourceCode, loc?.start.line || 0),
+      });
+    },
+  });
+
+  // Detect TODO/FIXME/HACK comments in source
+  const todoPatterns = [
+    { pattern: /\/\/\s*(TODO|FIXME|HACK|XXX|BUG)[:.\s]/gi, type: 'todo-comment' as const },
+    { pattern: /\/\*\s*(TODO|FIXME|HACK|XXX|BUG)[:.\s]/gi, type: 'todo-comment' as const },
+  ];
+
+  const lines = sourceCode.split('\n');
+  lines.forEach((line, index) => {
+    const lineNum = index + 1;
+    
+    // Only check within component bounds
+    if (lineNum < component.startLine || lineNum > component.endLine) return;
+    
+    todoPatterns.forEach(({ pattern }) => {
+      const match = line.match(pattern);
+      if (match) {
+        const tag = match[0].replace(/[/\*\s:]/g, '').toUpperCase();
+        smells.push({
+          type: 'todo-comment',
+          severity: 'info',
+          message: `${tag} comment found in "${component.name}"`,
+          file: filePath,
+          line: lineNum,
+          column: 0,
+          suggestion: `Address the ${tag} or create a ticket to track it`,
+          codeSnippet: getCodeSnippet(sourceCode, lineNum),
+        });
+      }
+    });
+  });
+
+  return smells;
+}

package/src/detectors/index.ts

@@ -8,3 +8,13 @@ export { detectDependencyArrayIssues } from './dependencyArray.js';
 export { detectNestedTernaries } from './nestedTernary.js';
 export { detectDeadCode, detectUnusedImports } from './deadCode.js';
 export { detectMagicValues } from './magicValues.js';
+// Framework-specific detectors
+export { detectNextjsIssues } from './nextjs.js';
+export { detectReactNativeIssues } from './reactNative.js';
+export { detectNodejsIssues } from './nodejs.js';
+export { detectJavascriptIssues } from './javascript.js';
+export { detectTypescriptIssues } from './typescript.js';
+// Debug, Security, Accessibility
+export { detectDebugStatements } from './debug.js';
+export { detectSecurityIssues } from './security.js';
+export { detectAccessibilityIssues } from './accessibility.js';

package/src/detectors/javascript.ts

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