react-code-smell-detector 1.1.1 → 1.3.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 vsthakur101
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -7,7 +7,17 @@ A CLI tool that analyzes React projects and detects common code smells, providin
 - 🔍 **Detect Code Smells**: Identifies common React anti-patterns
 - 📊 **Technical Debt Score**: Grades your codebase from A to F
 - 💡 **Refactoring Suggestions**: Actionable recommendations for each issue
-- 📝 **Multiple Output Formats**: Console (colored), JSON, and Markdown
+- 📝 **Multiple Output Formats**: Console (colored), JSON, Markdown, and HTML
+- 🔒 **Security Scanning**: Detects XSS vulnerabilities, eval usage, exposed secrets
+- ♿ **Accessibility Checks**: Missing alt text, labels, ARIA attributes
+- 🐛 **Debug Cleanup**: console.log, debugger, TODO/FIXME detection
+- 🤖 **CI/CD Ready**: Exit codes and flags for pipeline integration
+- 🔧 **Auto-Fix**: Automatically fix simple issues (console.log, var, ==, missing alt)
+- 👀 **Watch Mode**: Re-analyze on file changes
+- 📂 **Git Integration**: Analyze only modified files
+- 🧮 **Complexity Metrics**: Cyclomatic and cognitive complexity scoring
+- 💧 **Memory Leak Detection**: Find missing cleanup in useEffect
+- 🔄 **Import Analysis**: Detect circular dependencies and barrel file issues
 
 ### Detected Code Smells
 
@@ -18,6 +28,13 @@ A CLI tool that analyzes React projects and detects common code smells, providin
 | **Large Components** | Components over 300 lines, deep JSX nesting |
 | **Unmemoized Calculations** | `.map()`, `.filter()`, `.reduce()`, `JSON.parse()` without `useMemo` |
 | **Inline Functions** | Callbacks defined inline in JSX props |
+| **Security Issues** | dangerouslySetInnerHTML, eval(), innerHTML, exposed API keys |
+| **Accessibility** | Missing alt text, form labels, keyboard handlers, semantic HTML |
+| **Debug Statements** | console.log, debugger statements, TODO/FIXME comments |
+| **Memory Leaks** | Missing cleanup for event listeners, timers, subscriptions |
+| **Code Complexity** | Cyclomatic complexity, cognitive complexity, deep nesting |
+| **Import Issues** | Circular dependencies, barrel file imports, excessive imports |
+| **Framework-Specific** | Next.js, React Native, Node.js, TypeScript issues |
 
 ## Installation
 
@@ -56,6 +73,9 @@ react-smell ./src -f json
 
 # Markdown (for documentation)
 react-smell ./src -f markdown -o report.md
+
+# HTML (beautiful visual report)
+react-smell ./src -f html -o report.html
 ```
 
 ### Configuration
@@ -81,9 +101,14 @@ Or create manually:
 
 | Option | Description | Default |
 |--------|-------------|---------|
-| `-f, --format <format>` | Output format: console, json, markdown | `console` |
+| `-f, --format <format>` | Output format: console, json, markdown, html | `console` |
 | `-s, --snippets` | Show code snippets in output | `false` |
 | `-c, --config <file>` | Path to config file | `.smellrc.json` |
+| `--ci` | CI mode: exit with code 1 if any issues | `false` |
+| `--fail-on <severity>` | Exit code 1 threshold: error, warning, info | `error` |
+| `--fix` | Auto-fix simple issues (console.log, var, ==, alt) | `false` |
+| `--watch` | Watch mode: re-analyze on file changes | `false` |
+| `--changed` | Only analyze git-modified files | `false` |
 | `--max-effects <number>` | Max useEffects per component | `3` |
 | `--max-props <number>` | Max props before warning | `7` |
 | `--max-lines <number>` | Max lines per component | `300` |
@@ -91,6 +116,40 @@ Or create manually:
 | `--exclude <patterns>` | Glob patterns to exclude | `node_modules,dist` |
 | `-o, --output <file>` | Write output to file | - |
 
+### Auto-Fix
+
+Automatically fix simple issues:
+
+```bash
+# Fix and show remaining issues
+react-smell ./src --fix
+
+# Fix only (no report)
+react-smell ./src --fix -f json > /dev/null
+```
+
+Fixable issues:
+- `console.log`, `console.debug`, etc. → Removed
+- `var x = 1` → `let x = 1`
+- `a == b` → `a === b`
+- `<img src="...">` → `<img src="..." alt="">`
+
+### Watch Mode
+
+Re-analyze on every file change:
+
+```bash
+react-smell ./src --watch
+```
+
+### Git Integration
+
+Only analyze modified files:
+
+```bash
+react-smell ./src --changed
+```
+
 ## Example Output
 
 ```
@@ -143,17 +202,62 @@ const report = reportResults(result, {
 
 ## CI/CD Integration
 
-Use the JSON output format for CI pipelines:
+The tool provides flexible exit codes for CI/CD pipelines:
+
+```bash
+# Fail on any issues (strict mode)
+react-smell ./src --ci
+
+# Fail on warnings and errors (default: errors only)
+react-smell ./src --fail-on warning
+
+# Generate HTML report and fail on errors
+react-smell ./src -f html -o report.html --fail-on error
+```
+
+### GitHub Actions Example
 
 ```yaml
-# GitHub Actions example
-- name: Check code smells
-  run: |
-    npx react-smell ./src -f json > smell-report.json
-    if [ $(jq '.summary.smellsBySeverity.error' smell-report.json) -gt 0 ]; then
-      echo "Code smell errors found!"
-      exit 1
-    fi
+name: Code Quality
+
+on: [push, pull_request]
+
+jobs:
+  code-smells:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      
+      - name: Install dependencies
+        run: npm ci
+      
+      - name: Check code smells
+        run: npx react-smell ./src -f html -o smell-report.html --fail-on warning
+      
+      - name: Upload report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: code-smell-report
+          path: smell-report.html
+```
+
+## Ignoring Issues
+
+Use `@smell-ignore` comments to suppress specific issues:
+
+```tsx
+// @smell-ignore
+console.log('This debug statement is ignored');
+
+// @smell-ignore debug-statement
+console.log('Only ignores debug-statement type');
+
+// @smell-ignore *
+const risky = eval('1+1'); // All issues on next line ignored
 ```
 
 ## Technical Debt Score

package/dist/analyzer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"analyzer.d.ts","sourceRoot":"","sources":["../src/analyzer.ts"],"names":[],"mappings":"AAqBA,OAAO,EACL,cAAc,EAMd,cAAc,EAIf,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAClC;AAED,wBAAsB,cAAc,CAAC,OAAO,EAAE,eAAe,GAAG,OAAO,CAAC,cAAc,CAAC,CA0CtF;AAyLD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"analyzer.d.ts","sourceRoot":"","sources":["../src/analyzer.ts"],"names":[],"mappings":"AA4BA,OAAO,EACL,cAAc,EAMd,cAAc,EAIf,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;CAClC;AAED,wBAAsB,cAAc,CAAC,OAAO,EAAE,eAAe,GAAG,OAAO,CAAC,cAAc,CAAC,CA0CtF;AA8PD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/analyzer.js

@@ -1,7 +1,7 @@
 import fg from 'fast-glob';
 import path from 'path';
 import { parseFile } from './parser/index.js';
-import { detectUseEffectOveruse, detectPropDrilling, analyzePropDrillingDepth, detectLargeComponent, detectUnmemoizedCalculations, detectMissingKeys, detectHooksRulesViolations, detectDependencyArrayIssues, detectNestedTernaries, detectDeadCode, detectMagicValues, detectNextjsIssues, detectReactNativeIssues, detectNodejsIssues, detectJavascriptIssues, detectTypescriptIssues, } from './detectors/index.js';
+import { detectUseEffectOveruse, detectPropDrilling, analyzePropDrillingDepth, detectLargeComponent, detectUnmemoizedCalculations, detectMissingKeys, detectHooksRulesViolations, detectDependencyArrayIssues, detectNestedTernaries, detectDeadCode, detectMagicValues, detectNextjsIssues, detectReactNativeIssues, detectNodejsIssues, detectJavascriptIssues, detectTypescriptIssues, detectDebugStatements, detectSecurityIssues, detectAccessibilityIssues, detectComplexity, detectMemoryLeaks, detectImportIssues, } from './detectors/index.js';
 import { DEFAULT_CONFIG, } from './types/index.js';
 export async function analyzeProject(options) {
     const { rootDir, include = ['**/*.tsx', '**/*.jsx'], exclude = ['**/node_modules/**', '**/dist/**', '**/build/**', '**/*.test.*', '**/*.spec.*'], config: userConfig = {}, } = options;
@@ -74,16 +74,53 @@ function analyzeFile(parseResult, filePath, config) {
         smells.push(...detectNodejsIssues(component, filePath, sourceCode, config, imports));
         smells.push(...detectJavascriptIssues(component, filePath, sourceCode, config));
         smells.push(...detectTypescriptIssues(component, filePath, sourceCode, config));
+        // Debug, Security, Accessibility
+        smells.push(...detectDebugStatements(component, filePath, sourceCode, config));
+        smells.push(...detectSecurityIssues(component, filePath, sourceCode, config));
+        smells.push(...detectAccessibilityIssues(component, filePath, sourceCode, config));
+        // Complexity and Memory Leaks
+        smells.push(...detectComplexity(component, filePath, sourceCode, config));
+        smells.push(...detectMemoryLeaks(component, filePath, sourceCode, config));
+        smells.push(...detectImportIssues(component, filePath, sourceCode, config));
     });
     // Run cross-component analysis
     smells.push(...analyzePropDrillingDepth(components, filePath, sourceCode, config));
+    // Filter out smells with @smell-ignore comments
+    const filteredSmells = filterIgnoredSmells(smells, sourceCode);
     return {
         file: filePath,
         components: componentInfos,
-        smells,
+        smells: filteredSmells,
         imports,
     };
 }
+/**
+ * Filter out smells that have @smell-ignore comment on the preceding line
+ * Supports: // @smell-ignore, block comments with @smell-ignore, @smell-ignore [type]
+ */
+function filterIgnoredSmells(smells, sourceCode) {
+    const lines = sourceCode.split('\n');
+    return smells.filter(smell => {
+        if (smell.line <= 1)
+            return true;
+        // Check the line before and the same line for ignore comments
+        const lineIndex = smell.line - 1; // Convert to 0-indexed
+        const prevLine = lines[lineIndex - 1]?.trim() || '';
+        const currentLine = lines[lineIndex]?.trim() || '';
+        // Check for @smell-ignore patterns
+        const ignorePatterns = [
+            /@smell-ignore\s*$/, // @smell-ignore (ignore all)
+            /@smell-ignore\s+\*/, // @smell-ignore * (ignore all)
+            new RegExp(`@smell-ignore\\s+${smell.type}`), // @smell-ignore [specific-type]
+        ];
+        for (const pattern of ignorePatterns) {
+            if (pattern.test(prevLine) || pattern.test(currentLine)) {
+                return false; // Filter out this smell
+            }
+        }
+        return true; // Keep this smell
+    });
+}
 function calculateSummary(files) {
     const smellsByType = {
         'useEffect-overuse': 0,
@@ -124,6 +161,32 @@ function calculateSummary(files) {
         'ts-missing-return-type': 0,
         'ts-non-null-assertion': 0,
         'ts-type-assertion': 0,
+        // Debug statements
+        'debug-statement': 0,
+        'todo-comment': 0,
+        // Security
+        'security-xss': 0,
+        'security-eval': 0,
+        'security-secrets': 0,
+        // Accessibility
+        'a11y-missing-alt': 0,
+        'a11y-missing-label': 0,
+        'a11y-interactive-role': 0,
+        'a11y-keyboard': 0,
+        'a11y-semantic': 0,
+        // Complexity
+        'high-cyclomatic-complexity': 0,
+        'high-cognitive-complexity': 0,
+        // Memory leaks
+        'memory-leak-event-listener': 0,
+        'memory-leak-subscription': 0,
+        'memory-leak-timer': 0,
+        'memory-leak-async': 0,
+        // Import issues
+        'circular-dependency': 0,
+        'barrel-file-import': 0,
+        'namespace-import': 0,
+        'excessive-imports': 0,
     };
     const smellsBySeverity = {
         error: 0,

package/dist/cli.js

@@ -5,16 +5,25 @@ 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 { fixFile, isFixable } from './fixer.js';
+import { startWatch } from './watcher.js';
+import { getAllModifiedFiles, filterReactFiles, getGitInfo } from './git.js';
 import fs from 'fs/promises';
 const program = new Command();
 program
     .name('react-smell')
     .description('Detect code smells in React projects')
-    .version('1.0.0')
+    .version('1.3.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('--fix', 'Auto-fix simple issues (console.log, var, ==, missing alt)')
+    .option('--watch', 'Watch mode: re-analyze on file changes')
+    .option('--changed', 'Only analyze git-modified files')
     .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)
@@ -31,43 +40,114 @@ program
         console.error(chalk.red(`Error: Directory "${rootDir}" does not exist.`));
         process.exit(1);
     }
-    const spinner = ora('Analyzing React project...').start();
-    try {
-        // Load config file if specified
-        let fileConfig = {};
-        if (options.config) {
-            try {
-                const configPath = path.resolve(process.cwd(), options.config);
-                const configContent = await fs.readFile(configPath, 'utf-8');
-                fileConfig = JSON.parse(configContent);
-            }
-            catch (error) {
-                spinner.fail(`Could not load config file: ${error.message}`);
-                process.exit(1);
-            }
+    // Load config file if specified
+    let fileConfig = {};
+    if (options.config) {
+        try {
+            const configPath = path.resolve(process.cwd(), options.config);
+            const configContent = await fs.readFile(configPath, 'utf-8');
+            fileConfig = JSON.parse(configContent);
         }
-        // Build config from options
-        const config = {
-            ...DEFAULT_CONFIG,
-            ...fileConfig,
-            ...(options.maxEffects && { maxUseEffectsPerComponent: options.maxEffects }),
-            ...(options.maxProps && { maxPropsCount: options.maxProps }),
-            ...(options.maxLines && { maxComponentLines: options.maxLines }),
-        };
-        const include = options.include?.split(',').map((p) => p.trim()) || undefined;
-        const exclude = options.exclude?.split(',').map((p) => p.trim()) || undefined;
-        const result = await analyzeProject({
+        catch (error) {
+            console.error(chalk.red(`Could not load config file: ${error.message}`));
+            process.exit(1);
+        }
+    }
+    // Build config from options
+    const config = {
+        ...DEFAULT_CONFIG,
+        ...fileConfig,
+        ...(options.maxEffects && { maxUseEffectsPerComponent: options.maxEffects }),
+        ...(options.maxProps && { maxPropsCount: options.maxProps }),
+        ...(options.maxLines && { maxComponentLines: options.maxLines }),
+    };
+    const include = options.include?.split(',').map((p) => p.trim()) || ['**/*.tsx', '**/*.jsx'];
+    const exclude = options.exclude?.split(',').map((p) => p.trim()) || ['**/node_modules/**', '**/dist/**'];
+    // Watch mode
+    if (options.watch) {
+        const watcher = startWatch({
             rootDir,
             include,
             exclude,
             config,
+            showSnippets: options.snippets,
         });
-        spinner.stop();
-        const output = reportResults(result, {
-            format: options.format,
-            showCodeSnippets: options.snippets,
+        // Handle Ctrl+C gracefully
+        process.on('SIGINT', () => {
+            watcher.close();
+            process.exit(0);
+        });
+        return; // Don't continue to regular analysis
+    }
+    // Git changed files mode
+    let filesToAnalyze;
+    if (options.changed) {
+        const gitInfo = getGitInfo(rootDir);
+        if (!gitInfo.isGitRepo) {
+            console.error(chalk.red('Error: --changed requires a git repository'));
+            process.exit(1);
+        }
+        const modifiedFiles = getAllModifiedFiles(rootDir);
+        filesToAnalyze = filterReactFiles(modifiedFiles);
+        if (filesToAnalyze.length === 0) {
+            console.log(chalk.green('✓ No modified React files to analyze'));
+            process.exit(0);
+        }
+        console.log(chalk.cyan(`\n📝 Analyzing ${filesToAnalyze.length} modified file(s)...\n`));
+    }
+    const spinner = ora('Analyzing React project...').start();
+    try {
+        const result = await analyzeProject({
             rootDir,
+            include: filesToAnalyze ? undefined : include,
+            exclude: filesToAnalyze ? undefined : exclude,
+            config,
         });
+        spinner.stop();
+        // Fix mode - apply auto-fixes
+        if (options.fix) {
+            const fixableSmells = result.files.flatMap(f => f.smells.filter(isFixable).map(s => ({ ...s, file: f.file })));
+            if (fixableSmells.length > 0) {
+                console.log(chalk.cyan(`\n🔧 Auto-fixing ${fixableSmells.length} issue(s)...\n`));
+                // Group by file
+                const smellsByFile = new Map();
+                fixableSmells.forEach(smell => {
+                    const existing = smellsByFile.get(smell.file) || [];
+                    existing.push(smell);
+                    smellsByFile.set(smell.file, existing);
+                });
+                let totalFixed = 0;
+                for (const [file, smells] of smellsByFile) {
+                    const fixResult = await fixFile(file, smells);
+                    if (fixResult.fixedSmells.length > 0) {
+                        console.log(chalk.green(`  ✓ Fixed ${fixResult.fixedSmells.length} issue(s) in ${path.relative(rootDir, file)}`));
+                        totalFixed += fixResult.fixedSmells.length;
+                    }
+                }
+                console.log(chalk.green(`\n✓ Fixed ${totalFixed} issue(s) total\n`));
+                // Re-analyze after fixes
+                const newResult = await analyzeProject({ rootDir, include, exclude, config });
+                console.log(chalk.dim(`Remaining issues: ${newResult.summary.totalSmells}\n`));
+            }
+            else {
+                console.log(chalk.yellow('\nNo auto-fixable issues found\n'));
+            }
+        }
+        let output;
+        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);
             await fs.writeFile(outputPath, output, 'utf-8');
@@ -76,8 +156,29 @@ program
         else {
             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);
         }
     }

package/dist/detectors/accessibility.d.ts

@@ -0,0 +1,12 @@
+import { ParsedComponent } from '../parser/index.js';
+import { CodeSmell, DetectorConfig } 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 declare function detectAccessibilityIssues(component: ParsedComponent, filePath: string, sourceCode: string, config?: DetectorConfig): CodeSmell[];
+//# sourceMappingURL=accessibility.d.ts.map

package/dist/detectors/accessibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accessibility.d.ts","sourceRoot":"","sources":["../../src/detectors/accessibility.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAkB,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,cAAc,EAAkB,MAAM,mBAAmB,CAAC;AAE9E;;;;;;;GAOG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,GAAE,cAA+B,GACtC,SAAS,EAAE,CAkMb"}