react-code-smell-detector 1.4.1 → 1.4.2

package/README.md

@@ -21,6 +21,9 @@ A CLI tool that analyzes React projects and detects common code smells, providin
 - 🗑️ **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
+- 🔗 **Dependency Graph Visualization**: Visual SVG/HTML of component and import relationships
+- 📦 **Bundle Size Impact**: Per-component bundle size estimates and optimization suggestions
+- ⚙️ **Custom Rules Engine**: Define project-specific code quality rules in configuration
 
 ### Detected Code Smells
 
@@ -38,6 +41,7 @@ A CLI tool that analyzes React projects and detects common code smells, providin
 | **Code Complexity** | Cyclomatic complexity, cognitive complexity, deep nesting |
 | **Import Issues** | Circular dependencies, barrel file imports, excessive imports |
 | **Unused Code** | Unused exports, dead imports |
+| **Custom Rules** | User-defined code quality rules |
 | **Framework-Specific** | Next.js, React Native, Node.js, TypeScript issues |
 
 ## Installation
@@ -124,6 +128,10 @@ Or create manually:
 | `--discord <url>` | Discord webhook URL for notifications | - |
 | `--webhook <url>` | Generic webhook URL for notifications | - |
 | `--webhook-threshold <number>` | Only notify if smells exceed threshold | `10` |
+| `--graph` | Generate dependency graph visualization | `false` |
+| `--graph-format <format>` | Graph output format: svg, html | `html` |
+| `--bundle` | Analyze bundle size impact per component | `false` |
+| `--rules <file>` | Custom rules configuration file | - |
 
 ### Auto-Fix
 
@@ -252,6 +260,138 @@ react-smell ./src \
   --ci
 ```
 
+### Dependency Graph Visualization
+
+Generate interactive dependency graphs showing component and file relationships:
+
+```bash
+# Generate dependency graph
+react-smell ./src --graph
+
+# Auto-generates: dependency-graph.html
+```
+
+**Features:**
+- Visual representation of file imports and dependencies
+- Circular dependency detection and highlighting
+- Force-directed layout for clarity
+- Exportable SVG or HTML format
+- Legend showing node types and relationships
+
+**Example Usage:**
+```bash
+# Generate and analyze all at once
+react-smell ./src --graph --bundle --baseline --ci
+```
+
+### Bundle Size Impact Analysis
+
+Estimate per-component bundle size impact:
+
+```bash
+# Analyze bundle impact
+react-smell ./src --bundle
+
+# Auto-generates: bundle-analysis.html
+```
+
+**Features:**
+- Estimated size per component (in bytes)
+- Line of code (LOC) analysis
+- Dependency complexity scoring
+- Impact level classification (low/medium/high/critical)
+- Recommendations for optimization
+- Breakdown of largest components
+
+**Impact Levels:**
+- 🟢 **Low**: <2KB, <150 LOC, low complexity
+- 🟡 **Medium**: 2-5KB, 150-300 LOC, medium complexity
+- 🟠 **High**: 5-10KB, 300-500 LOC, high complexity
+- 🔴 **Critical**: >10KB, >500 LOC, very complex
+
+### Custom Rules Engine
+
+Define project-specific code quality rules:
+
+**Configuration File (.smellrc-rules.json):**
+```json
+{
+  "rules": [
+    {
+      "name": "no-hardcoded-strings",
+      "description": "Prevent hardcoded strings (use i18n)",
+      "severity": "warning",
+      "pattern": "\"(hello|world|test)\"",
+      "patternType": "regex",
+      "enabled": true
+    },
+    {
+      "name": "require-display-name",
+      "description": "All components must have displayName",
+      "severity": "info",
+      "pattern": "displayName",
+      "patternType": "text",
+      "enabled": true
+    }
+  ]
+}
+```
+
+**CLI Usage:**
+```bash
+# Use custom rules
+react-smell ./src --rules .smellrc-rules.json
+
+# Combined with other features
+react-smell ./src --rules .smellrc-rules.json --format json --ci
+```
+
+**Rule Properties:**
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `name` | string | Unique rule identifier |
+| `description` | string | Human-readable explanation |
+| `severity` | string | error, warning, or info |
+| `pattern` | string | Regex or text pattern |
+| `patternType` | string | regex, text, or ast |
+| `enabled` | boolean | Enable/disable rule |
+
+**Pattern Types:**
+
+- **regex**: Regular expression matching (e.g., `"hardcoded.*string"`)
+- **text**: Simple string matching
+- **ast**: Babel AST node type matching (e.g., `FunctionExpression`)
+
+**Real-World Examples:**
+
+```json
+{
+  "rules": [
+    {
+      "name": "no-console-in-production",
+      "pattern": "console\\.(log|warn|info)",
+      "patternType": "regex",
+      "severity": "error"
+    },
+    {
+      "name": "enforce-prop-types",
+      "pattern": "PropTypes",
+      "patternType": "text",
+      "severity": "warning",
+      "message": "Consider using TypeScript instead of PropTypes"
+    },
+    {
+      "name": "limit-nesting",
+      "description": "Flag deeply nested JSX",
+      "pattern": "<.*>.*<.*>.*<.*>.*<.*>.*<",
+      "patternType": "regex",
+      "severity": "info"
+    }
+  ]
+}
+```
+
 ## Example Output
 
 ```

package/dist/analyzer.d.ts.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"analyzer.d.ts","sourceRoot":"","sources":["../src/analyzer.ts"],"names":[],"mappings":"AA+BA,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,CA8DtF;AA0QD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/analyzer.js

@@ -2,6 +2,9 @@ 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, detectComplexity, detectMemoryLeaks, detectImportIssues, detectUnusedCode, } from './detectors/index.js';
+import { parseCustomRules, detectCustomRuleViolations } from './customRules.js';
+import { buildDependencyGraph } from './graphGenerator.js';
+import { analyzeBundleImpact } from './bundleAnalyzer.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;
@@ -30,6 +33,20 @@ export async function analyzeProject(options) {
     // Calculate summary and score
     const summary = calculateSummary(fileAnalyses);
     const debtScore = calculateTechnicalDebtScore(fileAnalyses, summary);
+    // Generate dependency graph if requested
+    if (config.generateDependencyGraph) {
+        const importsData = fileAnalyses.map(f => ({ file: f.file, imports: f.imports }));
+        const graph = buildDependencyGraph(importsData, rootDir);
+        // Graph is available via extension (not in standard result yet)
+        global._dependencyGraph = graph;
+    }
+    // Analyze bundle size if requested
+    if (config.analyzeBundleSize) {
+        const allComponents = fileAnalyses.flatMap(f => f.components);
+        const bundleAnalysis = analyzeBundleImpact(fileAnalyses.map(f => ({ components: f.components, file: f.file })), fileAnalyses, '');
+        // Bundle analysis is available via extension
+        global._bundleAnalysis = bundleAnalysis;
+    }
     return {
         files: fileAnalyses,
         summary,
@@ -83,6 +100,11 @@ function analyzeFile(parseResult, filePath, config) {
         smells.push(...detectMemoryLeaks(component, filePath, sourceCode, config));
         smells.push(...detectImportIssues(component, filePath, sourceCode, config));
         smells.push(...detectUnusedCode(component, filePath, sourceCode, config));
+        // Custom rules
+        const customRules = parseCustomRules(config);
+        if (customRules.length > 0) {
+            smells.push(...detectCustomRuleViolations(component, filePath, sourceCode, customRules));
+        }
     });
     // Run cross-component analysis
     smells.push(...analyzePropDrillingDepth(components, filePath, sourceCode, config));
@@ -191,6 +213,8 @@ function calculateSummary(files) {
         // Unused code
         'unused-export': 0,
         'dead-import': 0,
+        // Custom rules
+        'custom-rule': 0,
     };
     const smellsBySeverity = {
         error: 0,

package/dist/bundleAnalyzer.d.ts

@@ -0,0 +1,25 @@
+export interface ComponentBundleInfo {
+    name: string;
+    file: string;
+    estimatedSize: number;
+    dependencies: number;
+    exports: number;
+    complexity: number;
+    impact: 'low' | 'medium' | 'high' | 'critical';
+}
+export interface BundleAnalysisResult {
+    components: ComponentBundleInfo[];
+    totalEstimatedSize: number;
+    averageComponentSize: number;
+    largestComponents: ComponentBundleInfo[];
+    recommendations: string[];
+}
+/**
+ * Estimate bundle size impact per component
+ */
+export declare function analyzeBundleImpact(components: any[], files: any[], sourceCode: string): BundleAnalysisResult;
+/**
+ * Generate HTML bundle analysis report
+ */
+export declare function generateBundleReport(analysis: BundleAnalysisResult, projectName: string): string;
+//# sourceMappingURL=bundleAnalyzer.d.ts.map

package/dist/bundleAnalyzer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bundleAnalyzer.d.ts","sourceRoot":"","sources":["../src/bundleAnalyzer.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;CAChD;AAED,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,mBAAmB,EAAE,CAAC;IAClC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,oBAAoB,EAAE,MAAM,CAAC;IAC7B,iBAAiB,EAAE,mBAAmB,EAAE,CAAC;IACzC,eAAe,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,UAAU,EAAE,GAAG,EAAE,EACjB,KAAK,EAAE,GAAG,EAAE,EACZ,UAAU,EAAE,MAAM,GACjB,oBAAoB,CAuBtB;AAuJD;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,oBAAoB,EAC9B,WAAW,EAAE,MAAM,GAClB,MAAM,CAmOR"}

package/dist/bundleAnalyzer.js

@@ -0,0 +1,375 @@
+import _traverse from '@babel/traverse';
+const traverse = typeof _traverse === 'function' ? _traverse : _traverse.default;
+/**
+ * Estimate bundle size impact per component
+ */
+export function analyzeBundleImpact(components, files, sourceCode) {
+    const componentInfo = [];
+    for (const component of components) {
+        const info = estimateComponentSize(component, sourceCode);
+        componentInfo.push(info);
+    }
+    // Sort by size
+    componentInfo.sort((a, b) => b.estimatedSize - a.estimatedSize);
+    const totalSize = componentInfo.reduce((sum, c) => sum + c.estimatedSize, 0);
+    const avgSize = totalSize / componentInfo.length || 0;
+    const recommendations = generateBundleRecommendations(componentInfo, totalSize);
+    return {
+        components: componentInfo,
+        totalEstimatedSize: totalSize,
+        averageComponentSize: avgSize,
+        largestComponents: componentInfo.slice(0, 5),
+        recommendations,
+    };
+}
+/**
+ * Estimate size of a single component in bytes
+ */
+function estimateComponentSize(component, sourceCode) {
+    let size = 0;
+    let lineCount = 0;
+    let exportCount = 0;
+    let dependencyCount = 0;
+    let complexity = 0;
+    // Count lines
+    if (component.code) {
+        lineCount = component.code.split('\n').length;
+        size += lineCount * 4; // ~4 bytes per line average
+    }
+    // Count exports
+    component.path.traverse({
+        ExportNamedDeclaration() {
+            exportCount++;
+            size += 100; // export overhead
+        },
+        ExportDefaultDeclaration() {
+            exportCount++;
+            size += 100;
+        },
+    });
+    // Count dependencies
+    component.path.traverse({
+        ImportDeclaration() {
+            dependencyCount++;
+            size += 80;
+        },
+        CallExpression(path) {
+            if (path.node.callee.type === 'Import') {
+                dependencyCount++;
+                size += 100; // dynamic import is heavier
+            }
+        },
+    });
+    // Estimate complexity
+    component.path.traverse({
+        IfStatement() {
+            complexity++;
+            size += 30;
+        },
+        FunctionDeclaration() {
+            complexity++;
+            size += 50;
+        },
+        ArrowFunctionExpression() {
+            complexity++;
+            size += 40;
+        },
+    });
+    // Add base overhead
+    size += 200;
+    const impact = determineImpact(size, lineCount, complexity);
+    return {
+        name: component.name || 'Anonymous',
+        file: component.file || 'unknown',
+        estimatedSize: size,
+        dependencies: dependencyCount,
+        exports: exportCount,
+        complexity: lineCount,
+        impact,
+    };
+}
+/**
+ * Determine bundle impact level
+ */
+function determineImpact(size, lines, complexity) {
+    let score = 0;
+    // Size factor
+    if (size > 10000)
+        score += 3; // 10KB+
+    else if (size > 5000)
+        score += 2; // 5KB+
+    else if (size > 2000)
+        score += 1; // 2KB+
+    // Lines factor
+    if (lines > 500)
+        score += 3;
+    else if (lines > 300)
+        score += 2;
+    else if (lines > 150)
+        score += 1;
+    // Complexity factor
+    if (complexity > 50)
+        score += 2;
+    else if (complexity > 30)
+        score += 1;
+    if (score >= 7)
+        return 'critical';
+    if (score >= 5)
+        return 'high';
+    if (score >= 2)
+        return 'medium';
+    return 'low';
+}
+/**
+ * Generate recommendations to reduce bundle size
+ */
+function generateBundleRecommendations(components, totalSize) {
+    const recommendations = [];
+    // Check for large components
+    const largeComps = components.filter(c => c.impact === 'critical' || c.impact === 'high');
+    if (largeComps.length > 0) {
+        recommendations.push(`Consider splitting large components: ${largeComps.slice(0, 3).map(c => c.name).join(', ')}`);
+    }
+    // Check for high dependency count
+    const highDepComps = components.filter(c => c.dependencies > 10);
+    if (highDepComps.length > 0) {
+        recommendations.push(`These components have many dependencies (${highDepComps.length}). Consider lazy loading or code splitting.`);
+    }
+    // Check total size
+    if (totalSize > 100000) {
+        recommendations.push(`Total estimated bundle size is ${(totalSize / 1024).toFixed(1)}KB. Consider code-splitting or tree-shaking unused imports.`);
+    }
+    // Check for high complexity
+    const complexComps = components.filter(c => c.complexity > 300);
+    if (complexComps.length > 0) {
+        recommendations.push(`${complexComps.length} component(s) have high complexity (>300 LOC). Extract logic to custom hooks or utilities.`);
+    }
+    return recommendations.length > 0
+        ? recommendations
+        : ['✅ Bundle size is well-optimized. Keep monitoring as code grows.'];
+}
+/**
+ * Generate HTML bundle analysis report
+ */
+export function generateBundleReport(analysis, projectName) {
+    const formatSize = (bytes) => {
+        if (bytes > 1024 * 1024)
+            return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
+        if (bytes > 1024)
+            return `${(bytes / 1024).toFixed(1)}KB`;
+        return `${bytes}B`;
+    };
+    const impactColor = {
+        low: '#4caf50',
+        medium: '#ff9800',
+        high: '#f44336',
+        critical: '#b71c1c',
+    };
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Bundle Analysis - ${projectName}</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+      background: #f5f5f5;
+      margin: 0;
+      padding: 20px;
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      background: white;
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+      padding: 30px;
+    }
+    h1 {
+      color: #1976d2;
+      margin: 0 0 10px 0;
+    }
+    .stats-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 20px;
+      margin: 30px 0;
+    }
+    .stat-card {
+      background: #f8f9fa;
+      border-left: 4px solid #1976d2;
+      padding: 20px;
+      border-radius: 4px;
+    }
+    .stat-label {
+      font-size: 12px;
+      color: #666;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .stat-value {
+      font-size: 28px;
+      font-weight: bold;
+      color: #1976d2;
+      margin-top: 8px;
+    }
+    .recommendations {
+      background: #e3f2fd;
+      border-left: 4px solid #1976d2;
+      padding: 20px;
+      border-radius: 4px;
+      margin: 30px 0;
+    }
+    .recommendations h3 {
+      margin: 0 0 10px 0;
+      color: #1976d2;
+    }
+    .recommendations ul {
+      margin: 0;
+      padding-left: 20px;
+    }
+    .recommendations li {
+      margin: 8px 0;
+      color: #333;
+    }
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      margin-top: 30px;
+    }
+    th {
+      background: #f5f5f5;
+      padding: 12px;
+      text-align: left;
+      font-weight: 600;
+      border-bottom: 2px solid #e0e0e0;
+    }
+    td {
+      padding: 12px;
+      border-bottom: 1px solid #e0e0e0;
+    }
+    tr:hover {
+      background: #fafafa;
+    }
+    .impact-badge {
+      display: inline-block;
+      padding: 4px 12px;
+      border-radius: 12px;
+      font-size: 12px;
+      font-weight: 600;
+      color: white;
+    }
+    .impact-low {
+      background: #4caf50;
+    }
+    .impact-medium {
+      background: #ff9800;
+    }
+    .impact-high {
+      background: #f44336;
+    }
+    .impact-critical {
+      background: #b71c1c;
+    }
+    .size-bar {
+      display: inline-block;
+      height: 8px;
+      background: #1976d2;
+      border-radius: 4px;
+      margin-right: 8px;
+      vertical-align: middle;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>📦 Bundle Size Analysis - ${projectName}</h1>
+    <p style="color: #666; margin-top: 5px;">Estimated size impact per component</p>
+    
+    <div class="stats-grid">
+      <div class="stat-card">
+        <div class="stat-label">Total Size</div>
+        <div class="stat-value">${formatSize(analysis.totalEstimatedSize)}</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Components</div>
+        <div class="stat-value">${analysis.components.length}</div>
+      </div>
+      <div class="stat-card">
+        <div class="stat-label">Avg Component</div>
+        <div class="stat-value">${formatSize(analysis.averageComponentSize)}</div>
+      </div>
+    </div>
+
+    ${analysis.recommendations.length > 0
+        ? `
+    <div class="recommendations">
+      <h3>💡 Recommendations</h3>
+      <ul>
+        ${analysis.recommendations.map(rec => `<li>${rec}</li>`).join('')}
+      </ul>
+    </div>
+    `
+        : ''}
+
+    <h2 style="margin-top: 40px; color: #333;">📊 Component Breakdown</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Component</th>
+          <th>Est. Size</th>
+          <th>LOC</th>
+          <th>Dependencies</th>
+          <th>Exports</th>
+          <th>Impact</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${analysis.components
+        .map(c => `
+          <tr>
+            <td><strong>${c.name}</strong></td>
+            <td>${formatSize(c.estimatedSize)}</td>
+            <td>${c.complexity}</td>
+            <td>${c.dependencies}</td>
+            <td>${c.exports}</td>
+            <td>
+              <span class="impact-badge impact-${c.impact}">${c.impact.toUpperCase()}</span>
+            </td>
+          </tr>
+        `)
+        .join('')}
+      </tbody>
+    </table>
+
+    <h2 style="margin-top: 40px; color: #333;">🏆 Largest Components</h2>
+    <table>
+      <thead>
+        <tr>
+          <th>Rank</th>
+          <th>Component</th>
+          <th>Size</th>
+          <th>% of Total</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${analysis.largestComponents
+        .map((c, i) => `
+          <tr>
+            <td><strong>#${i + 1}</strong></td>
+            <td>${c.name}</td>
+            <td>${formatSize(c.estimatedSize)}</td>
+            <td>
+              ${((c.estimatedSize / analysis.totalEstimatedSize) * 100).toFixed(1)}%
+              <div class="size-bar" style="width: ${((c.estimatedSize / analysis.totalEstimatedSize) * 200).toFixed(0)}px;"></div>
+            </td>
+          </tr>
+        `)
+        .join('')}
+      </tbody>
+    </table>
+  </div>
+</body>
+</html>`;
+}