react-code-smell-detector 1.3.1 → 1.4.2

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>`;
+}

package/dist/cli.js

@@ -9,6 +9,10 @@ import { generateHTMLReport } from './htmlReporter.js';
 import { fixFile, isFixable } from './fixer.js';
 import { startWatch } from './watcher.js';
 import { getAllModifiedFiles, filterReactFiles, getGitInfo } from './git.js';
+import { initializeBaseline, recordBaseline, formatTrendReport } from './baseline.js';
+import { sendWebhookNotification, getWebhookConfig } from './webhooks.js';
+import { generateDependencyGraphHTML } from './graphGenerator.js';
+import { generateBundleReport } from './bundleAnalyzer.js';
 import fs from 'fs/promises';
 const program = new Command();
 program
@@ -30,6 +34,15 @@ program
     .option('--include <patterns>', 'Glob patterns to include (comma-separated)')
     .option('--exclude <patterns>', 'Glob patterns to exclude (comma-separated)')
     .option('-o, --output <file>', 'Write output to file')
+    .option('--baseline', 'Enable baseline tracking and trend analysis', false)
+    .option('--slack <url>', 'Slack webhook URL for notifications')
+    .option('--discord <url>', 'Discord webhook URL for notifications')
+    .option('--webhook <url>', 'Generic webhook URL for notifications')
+    .option('--webhook-threshold <number>', 'Only notify if smells exceed this threshold', parseInt)
+    .option('--graph', 'Generate dependency graph visualization', false)
+    .option('--graph-format <format>', 'Graph output format: svg, html', 'html')
+    .option('--bundle', 'Analyze bundle size impact per component', false)
+    .option('--rules <file>', 'Custom rules configuration file')
     .action(async (directory, options) => {
     const rootDir = path.resolve(process.cwd(), directory);
     // Check if directory exists
@@ -53,6 +66,18 @@ program
             process.exit(1);
         }
     }
+    // Load custom rules if specified
+    let customRules;
+    if (options.rules) {
+        try {
+            const rulesPath = path.resolve(process.cwd(), options.rules);
+            const rulesContent = await fs.readFile(rulesPath, 'utf-8');
+            customRules = JSON.parse(rulesContent);
+        }
+        catch (error) {
+            console.warn(chalk.yellow(`Warning: Could not load custom rules: ${error.message}`));
+        }
+    }
     // Build config from options
     const config = {
         ...DEFAULT_CONFIG,
@@ -60,6 +85,10 @@ program
         ...(options.maxEffects && { maxUseEffectsPerComponent: options.maxEffects }),
         ...(options.maxProps && { maxPropsCount: options.maxProps }),
         ...(options.maxLines && { maxComponentLines: options.maxLines }),
+        ...(options.graph && { generateDependencyGraph: true }),
+        ...(options.graphFormat && { graphOutputFormat: options.graphFormat }),
+        ...(options.bundle && { analyzeBundleSize: true }),
+        ...(customRules && { customRules }),
     };
     const include = options.include?.split(',').map((p) => p.trim()) || ['**/*.tsx', '**/*.jsx'];
     const exclude = options.exclude?.split(',').map((p) => p.trim()) || ['**/node_modules/**', '**/dist/**'];
@@ -104,6 +133,10 @@ program
             config,
         });
         spinner.stop();
+        // Initialize baseline if enabled
+        if (options.baseline) {
+            initializeBaseline(rootDir);
+        }
         // Fix mode - apply auto-fixes
         if (options.fix) {
             const fixableSmells = result.files.flatMap(f => f.smells.filter(isFixable).map(s => ({ ...s, file: f.file })));
@@ -156,6 +189,47 @@ program
         else {
             console.log(output);
         }
+        // Record baseline and show trend analysis
+        if (options.baseline) {
+            const gitInfo = getGitInfo(rootDir);
+            const baselineRecord = recordBaseline(rootDir, result.files.flatMap(f => f.smells), gitInfo.currentCommit);
+            console.log(formatTrendReport(rootDir));
+        }
+        // Send webhook notification
+        const webhookConfig = getWebhookConfig(options.slack, options.discord, options.webhook);
+        if (webhookConfig) {
+            webhookConfig.threshold = options.webhookThreshold;
+            const gitInfo = getGitInfo(rootDir);
+            const metadata = {
+                branch: gitInfo.branch,
+                commit: gitInfo.currentCommit,
+                author: gitInfo.authorName,
+            };
+            const sent = await sendWebhookNotification(webhookConfig, result.files.flatMap(f => f.smells), path.basename(rootDir), metadata);
+            if (sent) {
+                console.log(chalk.green('✓ Notification sent to webhook'));
+            }
+        }
+        // Generate dependency graph if requested
+        if (options.graph) {
+            const graph = global._dependencyGraph;
+            if (graph) {
+                const graphHTML = generateDependencyGraphHTML(graph, path.basename(rootDir), graph.circularDependencies.length);
+                const graphPath = path.resolve(process.cwd(), 'dependency-graph.html');
+                await fs.writeFile(graphPath, graphHTML, 'utf-8');
+                console.log(chalk.green(`✓ Dependency graph written to ${graphPath}`));
+            }
+        }
+        // Generate bundle analysis if requested
+        if (options.bundle) {
+            const bundleAnalysis = global._bundleAnalysis;
+            if (bundleAnalysis) {
+                const bundleHTML = generateBundleReport(bundleAnalysis, path.basename(rootDir));
+                const bundlePath = path.resolve(process.cwd(), 'bundle-analysis.html');
+                await fs.writeFile(bundlePath, bundleHTML, 'utf-8');
+                console.log(chalk.green(`✓ Bundle analysis written to ${bundlePath}`));
+            }
+        }
         // CI/CD exit code handling
         const { smellsBySeverity } = result.summary;
         let shouldFail = false;

package/dist/customRules.d.ts

@@ -0,0 +1,31 @@
+import { CodeSmell } from './types/index.js';
+export interface CustomRule {
+    name: string;
+    description?: string;
+    severity: 'error' | 'warning' | 'info';
+    pattern: string | RegExp;
+    patternType: 'regex' | 'ast' | 'text';
+    message?: string;
+    enabled?: boolean;
+}
+export interface CustomRulesConfig {
+    rules: CustomRule[];
+    enabled?: boolean;
+}
+/**
+ * Parse custom rules from configuration
+ */
+export declare function parseCustomRules(config: any): CustomRule[];
+/**
+ * Detect violations of custom rules
+ */
+export declare function detectCustomRuleViolations(component: any, filePath: string, sourceCode: string, customRules: CustomRule[]): CodeSmell[];
+/**
+ * Example custom rules configuration
+ */
+export declare const EXAMPLE_CUSTOM_RULES: CustomRulesConfig;
+/**
+ * Generate custom rules documentation
+ */
+export declare function generateRulesDocumentation(): string;
+//# sourceMappingURL=customRules.d.ts.map

package/dist/customRules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"customRules.d.ts","sourceRoot":"","sources":["../src/customRules.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAK7C,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IACvC,OAAO,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IACtC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,GAAG,GAAG,UAAU,EAAE,CAY1D;AAsBD;;GAEG;AACH,wBAAgB,0BAA0B,CACxC,SAAS,EAAE,GAAG,EACd,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,UAAU,EAAE,GACxB,SAAS,EAAE,CA2Bb;AAuDD;;GAEG;AACH,eAAO,MAAM,oBAAoB,EAAE,iBAoClC,CAAC;AAEF;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,MAAM,CA8InD"}