react-code-smell-detector 1.2.0 → 1.4.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

@@ -4,7 +4,7 @@ A CLI tool that analyzes React projects and detects common code smells, providin
 
 ## Features
 
-- 🔍 **Detect Code Smells**: Identifies common React anti-patterns
+- 🔍 **Detect Code Smells**: Identifies common React anti-patterns (51+ smell types)
 - 📊 **Technical Debt Score**: Grades your codebase from A to F
 - 💡 **Refactoring Suggestions**: Actionable recommendations for each issue
 - 📝 **Multiple Output Formats**: Console (colored), JSON, Markdown, and HTML
@@ -12,6 +12,15 @@ A CLI tool that analyzes React projects and detects common code smells, providin
 - ♿ **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
+- 🗑️ **Unused Code Detection**: Find unused exports and dead imports
+- 📈 **Baseline Tracking**: Track code smell trends over time with git commit history
+- 💬 **Chat Notifications**: Send analysis results to Slack, Discord, or custom webhooks
 
 ### Detected Code Smells
 
@@ -25,6 +34,10 @@ A CLI tool that analyzes React projects and detects common code smells, providin
 | **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 |
+| **Unused Code** | Unused exports, dead imports |
 | **Framework-Specific** | Next.js, React Native, Node.js, TypeScript issues |
 
 ## Installation
@@ -97,12 +110,147 @@ Or create manually:
 | `-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` |
 | `--include <patterns>` | Glob patterns to include | `**/*.tsx,**/*.jsx` |
 | `--exclude <patterns>` | Glob patterns to exclude | `node_modules,dist` |
 | `-o, --output <file>` | Write output to file | - |
+| `--baseline` | Enable baseline tracking and trend analysis | `false` |
+| `--slack <url>` | Slack webhook URL for notifications | - |
+| `--discord <url>` | Discord webhook URL for notifications | - |
+| `--webhook <url>` | Generic webhook URL for notifications | - |
+| `--webhook-threshold <number>` | Only notify if smells exceed threshold | `10` |
+
+### 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
+```
+
+### Baseline Tracking & Trend Analysis
+
+Track code smell trends over time with automatic baseline recording:
+
+```bash
+# Enable baseline tracking
+react-smell ./src --baseline
+
+# Output includes trend analysis
+📊 Code Smell Trend Analysis
+──────────────────────────
+Latest Run:   42 total smells
+Trend:        IMPROVING
+Previous Run: 48 smells
+Improved:     6 issues fixed
+Worsened:     0 new issues
+```
+
+**Features:**
+- Stores history in `.smellrc-baseline.json`
+- Tracks timestamps, commit hashes, and author names
+- Automatic trend calculation (improving/worsening/stable)
+- Keeps last 50 records with automatic cleanup
+- Perfect for CI/CD pipelines to monitor progress
+
+**Configuration:**
+```json
+{
+  "baselineEnabled": true,
+  "baselineThreshold": 5
+}
+```
+
+### Chat Notifications
+
+Send analysis results to Slack, Discord, or custom webhooks:
+
+#### Slack Integration
+
+```bash
+react-smell ./src --slack https://hooks.slack.com/services/YOUR/WEBHOOK
+
+# With threshold (only notify if issues exceed limit)
+react-smell ./src --slack $SLACK_URL --webhook-threshold 20
+```
+
+**Features:**
+- Rich formatted messages with severity levels
+- Includes branch, commit hash, and author info
+- Shows top 5 issue types by frequency
+- Color-coded severity (Critical/High/Medium/Low)
+
+#### Discord Integration
+
+```bash
+react-smell ./src --discord https://discord.com/api/webhooks/123/abc
+
+# With environment variable
+export REACT_SMELL_DISCORD_WEBHOOK=https://...
+react-smell ./src --discord $REACT_SMELL_DISCORD_WEBHOOK
+```
+
+**Features:**
+- Embedded messages with visual design
+- Color-coded smells by severity
+- Full metadata included (branch, author, commit)
+
+#### Generic Webhooks
+
+```bash
+react-smell ./src --webhook https://example.com/webhook
+
+# Custom platform webhooks
+react-smell ./src --webhook $CUSTOM_URL --webhook-threshold 15
+```
+
+**Environment Variables:**
+```bash
+export REACT_SMELL_SLACK_WEBHOOK=https://...
+export REACT_SMELL_DISCORD_WEBHOOK=https://...
+export REACT_SMELL_WEBHOOK=https://...
+```
+
+**CI/CD Example with Notifications:**
+```bash
+# Run analysis, track baseline, and notify on failures
+react-smell ./src \
+  --baseline \
+  --slack $SLACK_WEBHOOK \
+  --webhook-threshold 10 \
+  --ci
+```
 
 ## Example Output
 
@@ -134,18 +282,41 @@ Or create manually:
 
 ```typescript
 import { analyzeProject, reportResults } from 'react-code-smell-detector';
+import { initializeBaseline, recordBaseline, getTrendAnalysis, formatTrendReport } from 'react-code-smell-detector';
+import { sendWebhookNotification, getWebhookConfig } from 'react-code-smell-detector';
 
 const result = await analyzeProject({
   rootDir: './src',
   config: {
     maxUseEffectsPerComponent: 3,
     maxComponentLines: 300,
+    checkUnusedCode: true,
+    baselineEnabled: true,
   },
 });
 
 console.log(`Grade: ${result.debtScore.grade}`);
 console.log(`Total issues: ${result.summary.totalSmells}`);
 
+// Track baseline
+initializeBaseline('./src');
+recordBaseline('./src', result.files.flatMap(f => f.smells));
+const trend = getTrendAnalysis('./src');
+console.log(formatTrendReport('./src'));
+
+// Send notification
+const webhookConfig = getWebhookConfig(
+  process.env.REACT_SMELL_SLACK_WEBHOOK,
+  process.env.REACT_SMELL_DISCORD_WEBHOOK
+);
+if (webhookConfig) {
+  await sendWebhookNotification(
+    webhookConfig,
+    result.files.flatMap(f => f.smells),
+    'my-project'
+  );
+}
+
 // Or use the reporter
 const report = reportResults(result, {
   format: 'markdown',
@@ -156,7 +327,7 @@ const report = reportResults(result, {
 
 ## CI/CD Integration
 
-The tool provides flexible exit codes for CI/CD pipelines:
+The tool provides flexible exit codes and notification capabilities for CI/CD pipelines:
 
 ```bash
 # Fail on any issues (strict mode)
@@ -167,6 +338,9 @@ react-smell ./src --fail-on warning
 
 # Generate HTML report and fail on errors
 react-smell ./src -f html -o report.html --fail-on error
+
+# Track trends and notify
+react-smell ./src --baseline --slack $SLACK_WEBHOOK --ci
 ```
 
 ### GitHub Actions Example
@@ -181,6 +355,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0  # For git baseline tracking
+      
       - uses: actions/setup-node@v4
         with:
           node-version: '20'
@@ -188,8 +365,12 @@ jobs:
       - 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: Check code smells with baseline tracking
+        run: npx react-smell ./src -f html -o smell-report.html --baseline --fail-on warning
+      
+      - name: Notify Slack on failure
+        if: failure()
+        run: npx react-smell ./src --slack ${{ secrets.SLACK_WEBHOOK }} --webhook-threshold 10
       
       - name: Upload report
         uses: actions/upload-artifact@v4
@@ -199,6 +380,21 @@ jobs:
           path: smell-report.html
 ```
 
+### GitLab CI Example
+
+```yaml
+code-quality:
+  image: node:20
+  script:
+    - npm ci
+    - npx react-smell ./src --baseline --fail-on warning
+  artifacts:
+    reports:
+      codequality: code-smell-report.json
+  after_script:
+    - npx react-smell ./src --discord $DISCORD_WEBHOOK || true
+```
+
 ## Ignoring Issues
 
 Use `@smell-ignore` comments to suppress specific issues:

package/dist/analyzer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"analyzer.d.ts","sourceRoot":"","sources":["../src/analyzer.ts"],"names":[],"mappings":"AAwBA,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;AA6OD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"analyzer.d.ts","sourceRoot":"","sources":["../src/analyzer.ts"],"names":[],"mappings":"AA6BA,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;AAkQD,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, detectDebugStatements, detectSecurityIssues, detectAccessibilityIssues, } 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, detectUnusedCode, } 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;
@@ -78,6 +78,11 @@ function analyzeFile(parseResult, filePath, config) {
         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));
+        smells.push(...detectUnusedCode(component, filePath, sourceCode, config));
     });
     // Run cross-component analysis
     smells.push(...analyzePropDrillingDepth(components, filePath, sourceCode, config));
@@ -170,6 +175,22 @@ function calculateSummary(files) {
         '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,
+        // Unused code
+        'unused-export': 0,
+        'dead-import': 0,
     };
     const smellsBySeverity = {
         error: 0,

package/dist/baseline.d.ts

@@ -0,0 +1,37 @@
+import { CodeSmell } from './types/index.js';
+export interface BaselineRecord {
+    timestamp: string;
+    commit?: string;
+    totalSmells: number;
+    byType: Record<string, number>;
+    smells: CodeSmell[];
+}
+export interface BaselineData {
+    version: '1.0';
+    records: BaselineRecord[];
+}
+/**
+ * Initialize baseline tracking
+ */
+export declare function initializeBaseline(projectRoot: string): void;
+/**
+ * Record current analysis result
+ */
+export declare function recordBaseline(projectRoot: string, smells: CodeSmell[], commit?: string): BaselineRecord;
+/**
+ * Get trend analysis compared to previous baseline
+ */
+export declare function getTrendAnalysis(projectRoot: string): {
+    improved: number;
+    worsened: number;
+    trend: 'improving' | 'worsening' | 'stable';
+};
+/**
+ * Get baseline history
+ */
+export declare function getBaselineHistory(projectRoot: string): BaselineRecord[];
+/**
+ * Format trend report
+ */
+export declare function formatTrendReport(projectRoot: string): string;
+//# sourceMappingURL=baseline.d.ts.map

package/dist/baseline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"baseline.d.ts","sourceRoot":"","sources":["../src/baseline.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE7C,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,MAAM,EAAE,SAAS,EAAE,CAAC;CACrB;AAED,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,KAAK,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B;AAID;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,CAa5D;AAED;;GAEG;AACH,wBAAgB,cAAc,CAC5B,WAAW,EAAE,MAAM,EACnB,MAAM,EAAE,SAAS,EAAE,EACnB,MAAM,CAAC,EAAE,MAAM,GACd,cAAc,CAgChB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,WAAW,EAAE,MAAM,GAClB;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,WAAW,GAAG,WAAW,GAAG,QAAQ,CAAA;CAAE,CAuBrF;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,GAAG,cAAc,EAAE,CAQxE;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAsB7D"}

package/dist/baseline.js

@@ -0,0 +1,112 @@
+import fs from 'fs';
+import path from 'path';
+const BASELINE_FILE = '.smellrc-baseline.json';
+/**
+ * Initialize baseline tracking
+ */
+export function initializeBaseline(projectRoot) {
+    const baselinePath = path.join(projectRoot, BASELINE_FILE);
+    try {
+        const stats = fs.statSync(baselinePath);
+        // File exists
+    }
+    catch {
+        // File doesn't exist, create it
+        const data = {
+            version: '1.0',
+            records: [],
+        };
+        fs.writeFileSync(baselinePath, JSON.stringify(data, null, 2));
+    }
+}
+/**
+ * Record current analysis result
+ */
+export function recordBaseline(projectRoot, smells, commit) {
+    const baselinePath = path.join(projectRoot, BASELINE_FILE);
+    let data;
+    try {
+        const content = fs.readFileSync(baselinePath, 'utf-8');
+        data = JSON.parse(content);
+    }
+    catch {
+        data = { version: '1.0', records: [] };
+    }
+    const byType = {};
+    for (const smell of smells) {
+        byType[smell.type] = (byType[smell.type] || 0) + 1;
+    }
+    const record = {
+        timestamp: new Date().toISOString(),
+        commit,
+        totalSmells: smells.length,
+        byType,
+        smells: smells.slice(0, 100), // Keep first 100 for history
+    };
+    data.records.push(record);
+    // Keep last 50 records
+    if (data.records.length > 50) {
+        data.records = data.records.slice(-50);
+    }
+    fs.writeFileSync(baselinePath, JSON.stringify(data, null, 2));
+    return record;
+}
+/**
+ * Get trend analysis compared to previous baseline
+ */
+export function getTrendAnalysis(projectRoot) {
+    const baselinePath = path.join(projectRoot, BASELINE_FILE);
+    if (!fs.existsSync(baselinePath)) {
+        return { improved: 0, worsened: 0, trend: 'stable' };
+    }
+    const data = JSON.parse(fs.readFileSync(baselinePath, 'utf-8'));
+    if (data.records.length < 2) {
+        return { improved: 0, worsened: 0, trend: 'stable' };
+    }
+    const current = data.records[data.records.length - 1];
+    const previous = data.records[data.records.length - 2];
+    const diff = previous.totalSmells - current.totalSmells;
+    const improved = Math.max(0, diff);
+    const worsened = Math.max(0, -diff);
+    let trend = 'stable';
+    if (improved > worsened)
+        trend = 'improving';
+    if (worsened > improved)
+        trend = 'worsening';
+    return { improved, worsened, trend };
+}
+/**
+ * Get baseline history
+ */
+export function getBaselineHistory(projectRoot) {
+    const baselinePath = path.join(projectRoot, BASELINE_FILE);
+    try {
+        const data = JSON.parse(fs.readFileSync(baselinePath, 'utf-8'));
+        return data.records;
+    }
+    catch {
+        return [];
+    }
+}
+/**
+ * Format trend report
+ */
+export function formatTrendReport(projectRoot) {
+    const trend = getTrendAnalysis(projectRoot);
+    const history = getBaselineHistory(projectRoot);
+    if (history.length === 0) {
+        return 'No baseline history available yet.';
+    }
+    const latest = history[history.length - 1];
+    let report = `\n📊 Code Smell Trend Analysis\n`;
+    report += `──────────────────────────\n`;
+    report += `Latest Run:   ${latest.totalSmells} total smells\n`;
+    report += `Trend:        ${trend.trend.toUpperCase()}\n`;
+    if (history.length >= 2) {
+        const previous = history[history.length - 2];
+        report += `Previous Run: ${previous.totalSmells} smells\n`;
+        report += `Improved:     ${trend.improved} issues fixed\n`;
+        report += `Worsened:     ${trend.worsened} new issues\n`;
+    }
+    return report;
+}