react-code-smell-detector 1.4.2 → 1.5.1

package/dist/cli.js

@@ -13,12 +13,17 @@ import { initializeBaseline, recordBaseline, formatTrendReport } from './baselin
 import { sendWebhookNotification, getWebhookConfig } from './webhooks.js';
 import { generateDependencyGraphHTML } from './graphGenerator.js';
 import { generateBundleReport } from './bundleAnalyzer.js';
+import { runInteractiveFix, previewFixes } from './interactiveFixer.js';
+import { generatePRComment, postPRComment, parseGitHubInfo, getPRNumber } from './prComments.js';
+import { loadBudget, checkBudget, formatBudgetReport, createBudgetConfig } from './performanceBudget.js';
+import { writeComponentDocs } from './docGenerator.js';
+import { runGuide, createDemoProject } from './guide.js';
 import fs from 'fs/promises';
 const program = new Command();
 program
     .name('react-smell')
     .description('Detect code smells in React projects')
-    .version('1.3.0')
+    .version('1.5.0')
     .argument('[directory]', 'Directory to analyze', '.')
     .option('-f, --format <format>', 'Output format: console, json, markdown, html', 'console')
     .option('-s, --snippets', 'Show code snippets in output', false)
@@ -43,6 +48,13 @@ program
     .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')
+    .option('--fix-interactive', 'Interactive fix mode: review and apply fixes one by one')
+    .option('--fix-preview', 'Preview fixable issues without applying')
+    .option('--pr-comment', 'Generate PR comment (for GitHub Actions)')
+    .option('--budget', 'Check against performance budget')
+    .option('--budget-config <file>', 'Path to budget config file')
+    .option('--docs', 'Generate component documentation')
+    .option('--docs-format <format>', 'Documentation format: markdown, html, json', 'markdown')
     .action(async (directory, options) => {
     const rootDir = path.resolve(process.cwd(), directory);
     // Check if directory exists
@@ -166,6 +178,59 @@ program
                 console.log(chalk.yellow('\nNo auto-fixable issues found\n'));
             }
         }
+        // Interactive fix mode
+        if (options.fixInteractive) {
+            const allSmells = result.files.flatMap(f => f.smells);
+            await runInteractiveFix({ smells: allSmells, rootDir, showDiff: true });
+        }
+        // Fix preview mode
+        if (options.fixPreview) {
+            const allSmells = result.files.flatMap(f => f.smells);
+            previewFixes(allSmells, rootDir);
+        }
+        // Performance budget check
+        if (options.budget) {
+            const budget = await loadBudget(options.budgetConfig);
+            const budgetResult = checkBudget(result, budget);
+            console.log(formatBudgetReport(budgetResult));
+            if (!budgetResult.passed && options.ci) {
+                process.exit(1);
+            }
+        }
+        // Generate documentation
+        if (options.docs) {
+            const docsPath = await writeComponentDocs(result, rootDir, {
+                format: options.docsFormat || 'markdown',
+                includeSmells: true,
+                includeMetrics: true,
+                groupByFolder: true,
+            });
+            console.log(chalk.green(`✓ Component documentation written to ${docsPath}`));
+        }
+        // PR comment generation (for GitHub Actions)
+        if (options.prComment) {
+            const comment = generatePRComment(result, rootDir);
+            // Try to post to GitHub if in Actions environment
+            const ghToken = process.env.GITHUB_TOKEN;
+            const ghInfo = parseGitHubInfo();
+            const prNumber = getPRNumber();
+            if (ghToken && ghInfo && prNumber) {
+                const posted = await postPRComment({
+                    token: ghToken,
+                    owner: ghInfo.owner,
+                    repo: ghInfo.repo,
+                    prNumber,
+                }, comment);
+                if (posted) {
+                    console.log(chalk.green('✓ PR comment posted successfully'));
+                }
+            }
+            else {
+                // Output comment to console/file for manual use
+                console.log(chalk.cyan('\n📝 PR Comment (copy to GitHub):\n'));
+                console.log(comment);
+            }
+        }
         let output;
         if (options.format === 'html') {
             output = generateHTMLReport(result, rootDir);
@@ -285,4 +350,61 @@ program
         console.log(chalk.green('✓ Created .smellrc.json'));
     }
 });
+// Init budget command
+program
+    .command('init-budget')
+    .description('Create a performance budget configuration file')
+    .action(async () => {
+    try {
+        const budgetPath = await createBudgetConfig();
+        console.log(chalk.green(`✓ Created performance budget config at ${budgetPath}`));
+    }
+    catch (error) {
+        console.error(chalk.red(`Error: ${error.message}`));
+        process.exit(1);
+    }
+});
+// Generate docs command
+program
+    .command('docs')
+    .description('Generate component documentation')
+    .argument('[directory]', 'Directory to analyze', '.')
+    .option('-f, --format <format>', 'Output format: markdown, html, json', 'markdown')
+    .option('-o, --output <dir>', 'Output directory')
+    .action(async (directory, options) => {
+    const rootDir = path.resolve(process.cwd(), directory);
+    const spinner = ora('Generating documentation...').start();
+    try {
+        const result = await analyzeProject({ rootDir });
+        spinner.stop();
+        const docsPath = await writeComponentDocs(result, rootDir, {
+            format: options.format,
+            outputDir: options.output,
+            includeSmells: true,
+            includeMetrics: true,
+            groupByFolder: true,
+        });
+        console.log(chalk.green(`✓ Documentation written to ${docsPath}`));
+    }
+    catch (error) {
+        spinner.fail(`Documentation generation failed: ${error.message}`);
+        process.exit(1);
+    }
+});
+// Interactive guide command
+program
+    .command('guide')
+    .description('Interactive guide to using react-smell with examples')
+    .action(async () => {
+    await runGuide();
+});
+// Demo project command
+program
+    .command('demo')
+    .description('Create a demo project with example code smells')
+    .argument('[directory]', 'Directory to create demo in', '.')
+    .action(async (directory) => {
+    const targetDir = path.resolve(process.cwd(), directory);
+    await createDemoProject(targetDir);
+});
 program.parse();

package/dist/detectors/contextApi.d.ts

@@ -0,0 +1,11 @@
+import { ParsedComponent } from '../parser/index.js';
+import { CodeSmell, DetectorConfig } from '../types/index.js';
+/**
+ * Detect Context API anti-patterns and performance issues
+ */
+export declare function detectContextIssues(component: ParsedComponent, filePath: string, sourceCode: string, config: DetectorConfig): CodeSmell[];
+/**
+ * Detect Context Provider issues
+ */
+export declare function detectContextProviderIssues(sourceCode: string, filePath: string, config: DetectorConfig): CodeSmell[];
+//# sourceMappingURL=contextApi.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"contextApi.d.ts","sourceRoot":"","sources":["../../src/detectors/contextApi.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE9D;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,cAAc,GACrB,SAAS,EAAE,CAkGb;AAuBD;;GAEG;AACH,wBAAgB,2BAA2B,CACzC,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,cAAc,GACrB,SAAS,EAAE,CAwCb"}

package/dist/detectors/contextApi.js

@@ -0,0 +1,151 @@
+import * as t from '@babel/types';
+/**
+ * Detect Context API anti-patterns and performance issues
+ */
+export function detectContextIssues(component, filePath, sourceCode, config) {
+    if (!config.checkContextApi)
+        return [];
+    const smells = [];
+    let useContextCount = 0;
+    const contextLocations = [];
+    // Check for useContext calls
+    component.path.traverse({
+        CallExpression(path) {
+            const node = path.node;
+            const { callee } = node;
+            // Detect useContext calls
+            if (t.isIdentifier(callee) && callee.name === 'useContext') {
+                useContextCount++;
+                const loc = node.loc;
+                if (loc) {
+                    contextLocations.push({ line: loc.start.line, column: loc.start.column });
+                }
+                // Check if context value is destructured with many properties
+                const parent = path.parentPath;
+                if (parent && t.isVariableDeclarator(parent.node)) {
+                    const id = parent.node.id;
+                    if (t.isObjectPattern(id) && id.properties.length > 5) {
+                        smells.push({
+                            type: 'large-context-value',
+                            severity: 'warning',
+                            message: `Context destructures ${id.properties.length} properties in "${component.name}" - consider splitting context`,
+                            file: filePath,
+                            line: loc?.start.line || 0,
+                            column: loc?.start.column || 0,
+                            suggestion: 'Split large contexts into smaller, focused contexts to prevent unnecessary re-renders.',
+                        });
+                    }
+                }
+            }
+            // Detect useContext inside loops or conditionals (anti-pattern)
+            if (t.isIdentifier(callee) && callee.name === 'useContext') {
+                let currentPath = path.parentPath;
+                while (currentPath) {
+                    if (t.isForStatement(currentPath.node) ||
+                        t.isWhileStatement(currentPath.node) ||
+                        t.isForInStatement(currentPath.node) ||
+                        t.isForOfStatement(currentPath.node)) {
+                        const loc = node.loc;
+                        smells.push({
+                            type: 'context-in-loop',
+                            severity: 'error',
+                            message: `useContext called inside a loop in "${component.name}"`,
+                            file: filePath,
+                            line: loc?.start.line || 0,
+                            column: loc?.start.column || 0,
+                            suggestion: 'Move useContext outside of loops. Hooks must be called at the top level.',
+                        });
+                        break;
+                    }
+                    currentPath = currentPath.parentPath;
+                }
+            }
+        },
+    });
+    // Check for too many useContext calls (context overuse)
+    if (useContextCount > config.maxContextConsumers) {
+        const firstLoc = contextLocations[0] || { line: component.path.node.loc?.start.line || 0, column: 0 };
+        smells.push({
+            type: 'context-overuse',
+            severity: 'warning',
+            message: `Component "${component.name}" uses ${useContextCount} contexts (max: ${config.maxContextConsumers})`,
+            file: filePath,
+            line: firstLoc.line,
+            column: firstLoc.column,
+            suggestion: 'Consider using composition or combining related contexts. Too many contexts can make components hard to test and maintain.',
+        });
+    }
+    // Check if component using context is not memoized
+    if (useContextCount > 0) {
+        const isMemoized = checkIfMemoized(component, sourceCode);
+        if (!isMemoized && useContextCount > 1) {
+            smells.push({
+                type: 'missing-context-memo',
+                severity: 'info',
+                message: `Component "${component.name}" uses multiple contexts but is not memoized`,
+                file: filePath,
+                line: component.path.node.loc?.start.line || 0,
+                column: 0,
+                suggestion: 'Consider wrapping with React.memo() to prevent unnecessary re-renders when unrelated context values change.',
+            });
+        }
+    }
+    return smells;
+}
+/**
+ * Check if a component is wrapped with React.memo
+ */
+function checkIfMemoized(component, sourceCode) {
+    const lines = sourceCode.split('\n');
+    const componentName = component.name;
+    // Check for React.memo or memo wrapper patterns
+    for (const line of lines) {
+        if (line.includes(`memo(${componentName})`) ||
+            line.includes(`React.memo(${componentName})`) ||
+            line.includes(`memo(function ${componentName}`)) {
+            return true;
+        }
+    }
+    return false;
+}
+/**
+ * Detect Context Provider issues
+ */
+export function detectContextProviderIssues(sourceCode, filePath, config) {
+    if (!config.checkContextApi)
+        return [];
+    const smells = [];
+    const lines = sourceCode.split('\n');
+    // Check for context provider with object literal value (causes re-renders)
+    lines.forEach((line, index) => {
+        // Pattern: <SomeContext.Provider value={{ ... }}>
+        const providerMatch = line.match(/\.Provider\s+value=\{\{/);
+        if (providerMatch) {
+            smells.push({
+                type: 'large-context-value',
+                severity: 'warning',
+                message: 'Context Provider has inline object value - causes re-renders on every render',
+                file: filePath,
+                line: index + 1,
+                column: providerMatch.index || 0,
+                suggestion: 'Memoize the context value with useMemo() or extract to a stable reference.',
+                codeSnippet: line.trim(),
+            });
+        }
+        // Pattern: <SomeContext.Provider value={[ ... ]}>
+        const arrayMatch = line.match(/\.Provider\s+value=\{\[/);
+        if (arrayMatch) {
+            smells.push({
+                type: 'large-context-value',
+                severity: 'warning',
+                message: 'Context Provider has inline array value - causes re-renders on every render',
+                file: filePath,
+                line: index + 1,
+                column: arrayMatch.index || 0,
+                suggestion: 'Memoize the context value with useMemo() or extract to a stable reference.',
+                codeSnippet: line.trim(),
+            });
+        }
+    });
+    return smells;
+}

package/dist/detectors/errorBoundary.d.ts

@@ -0,0 +1,11 @@
+import { ParsedComponent } from '../parser/index.js';
+import { CodeSmell, DetectorConfig } from '../types/index.js';
+/**
+ * Detect missing Error Boundaries and Suspense issues
+ */
+export declare function detectErrorBoundaryIssues(component: ParsedComponent, filePath: string, sourceCode: string, config: DetectorConfig): CodeSmell[];
+/**
+ * Detect file-level error boundary patterns
+ */
+export declare function detectMissingErrorBoundaries(sourceCode: string, filePath: string, config: DetectorConfig): CodeSmell[];
+//# sourceMappingURL=errorBoundary.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"errorBoundary.d.ts","sourceRoot":"","sources":["../../src/detectors/errorBoundary.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE9D;;GAEG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,cAAc,GACrB,SAAS,EAAE,CAoIb;AAED;;GAEG;AACH,wBAAgB,4BAA4B,CAC1C,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,cAAc,GACrB,SAAS,EAAE,CAyDb"}

package/dist/detectors/errorBoundary.js

@@ -0,0 +1,167 @@
+import * as t from '@babel/types';
+/**
+ * Detect missing Error Boundaries and Suspense issues
+ */
+export function detectErrorBoundaryIssues(component, filePath, sourceCode, config) {
+    if (!config.checkErrorBoundaries)
+        return [];
+    const smells = [];
+    // Track JSX elements and their wrappers
+    let hasSuspense = false;
+    let hasErrorBoundary = false;
+    let hasAsyncComponent = false;
+    let hasLazyLoad = false;
+    const suspenseLocations = [];
+    component.path.traverse({
+        JSXElement(path) {
+            const openingElement = path.node.openingElement;
+            if (t.isJSXIdentifier(openingElement.name)) {
+                const name = openingElement.name.name;
+                // Check for Suspense
+                if (name === 'Suspense') {
+                    hasSuspense = true;
+                    const loc = openingElement.loc;
+                    const hasFallback = openingElement.attributes.some(attr => t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name) && attr.name.name === 'fallback');
+                    suspenseLocations.push({
+                        line: loc?.start.line || 0,
+                        hasFallback,
+                    });
+                    if (!hasFallback) {
+                        smells.push({
+                            type: 'suspense-missing-fallback',
+                            severity: 'warning',
+                            message: `Suspense without fallback prop in "${component.name}"`,
+                            file: filePath,
+                            line: loc?.start.line || 0,
+                            column: loc?.start.column || 0,
+                            suggestion: 'Add a fallback prop to Suspense: <Suspense fallback={<Loading />}>',
+                        });
+                    }
+                }
+                // Check for ErrorBoundary (custom or library)
+                if (name === 'ErrorBoundary' ||
+                    name.includes('ErrorBoundary') ||
+                    name === 'ErrorBoundaryWrapper') {
+                    hasErrorBoundary = true;
+                    const hasFallback = openingElement.attributes.some(attr => t.isJSXAttribute(attr) &&
+                        t.isJSXIdentifier(attr.name) &&
+                        (attr.name.name === 'fallback' || attr.name.name === 'FallbackComponent' || attr.name.name === 'fallbackRender'));
+                    if (!hasFallback) {
+                        const loc = openingElement.loc;
+                        smells.push({
+                            type: 'error-boundary-missing-fallback',
+                            severity: 'warning',
+                            message: `ErrorBoundary without fallback in "${component.name}"`,
+                            file: filePath,
+                            line: loc?.start.line || 0,
+                            column: loc?.start.column || 0,
+                            suggestion: 'Add a fallback prop or FallbackComponent to ErrorBoundary.',
+                        });
+                    }
+                }
+            }
+        },
+        CallExpression(path) {
+            const node = path.node;
+            const { callee } = node;
+            // Check for React.lazy or lazy imports
+            if ((t.isIdentifier(callee) && callee.name === 'lazy') ||
+                (t.isMemberExpression(callee) &&
+                    t.isIdentifier(callee.object) &&
+                    callee.object.name === 'React' &&
+                    t.isIdentifier(callee.property) &&
+                    callee.property.name === 'lazy')) {
+                hasLazyLoad = true;
+            }
+            // Check for async data fetching patterns
+            if (t.isIdentifier(callee)) {
+                const asyncPatterns = ['useQuery', 'useSWR', 'useAsync', 'useFetch', 'useData'];
+                if (asyncPatterns.includes(callee.name)) {
+                    hasAsyncComponent = true;
+                }
+            }
+        },
+        // Detect async components (often need Suspense)
+        AwaitExpression() {
+            hasAsyncComponent = true;
+        },
+    });
+    // Check for lazy-loaded components without Suspense
+    if (hasLazyLoad && !hasSuspense) {
+        smells.push({
+            type: 'missing-error-boundary',
+            severity: 'error',
+            message: `Component "${component.name}" uses lazy loading but has no Suspense wrapper`,
+            file: filePath,
+            line: component.path.node.loc?.start.line || 0,
+            column: 0,
+            suggestion: 'Wrap lazy-loaded components with <Suspense fallback={<Loading />}>',
+        });
+    }
+    // Suggest ErrorBoundary for complex components
+    if (!hasErrorBoundary && hasAsyncComponent) {
+        smells.push({
+            type: 'missing-error-boundary',
+            severity: 'info',
+            message: `Component "${component.name}" has async operations but no ErrorBoundary`,
+            file: filePath,
+            line: component.path.node.loc?.start.line || 0,
+            column: 0,
+            suggestion: 'Consider wrapping async components with an ErrorBoundary to handle failures gracefully.',
+        });
+    }
+    return smells;
+}
+/**
+ * Detect file-level error boundary patterns
+ */
+export function detectMissingErrorBoundaries(sourceCode, filePath, config) {
+    if (!config.checkErrorBoundaries)
+        return [];
+    const smells = [];
+    const lines = sourceCode.split('\n');
+    // Check for lazy imports without corresponding Suspense
+    let hasLazyImport = false;
+    let hasSuspenseImport = false;
+    let hasErrorBoundaryImport = false;
+    for (const line of lines) {
+        if (line.includes('lazy(') || line.includes('React.lazy(')) {
+            hasLazyImport = true;
+        }
+        if (line.includes('Suspense') && (line.includes('import') || line.includes('React.Suspense'))) {
+            hasSuspenseImport = true;
+        }
+        if (line.includes('ErrorBoundary') && line.includes('import')) {
+            hasErrorBoundaryImport = true;
+        }
+    }
+    // If file has lazy imports but no Suspense import, flag it
+    if (hasLazyImport && !hasSuspenseImport) {
+        smells.push({
+            type: 'missing-error-boundary',
+            severity: 'warning',
+            message: 'File uses React.lazy but does not import Suspense',
+            file: filePath,
+            line: 1,
+            column: 0,
+            suggestion: 'Import Suspense from React and wrap lazy components.',
+        });
+    }
+    // Check for fetch/axios without error handling patterns
+    const hasDataFetching = lines.some(line => line.includes('fetch(') ||
+        line.includes('axios.') ||
+        line.includes('useQuery') ||
+        line.includes('useSWR'));
+    if (hasDataFetching && !hasErrorBoundaryImport) {
+        smells.push({
+            type: 'missing-error-boundary',
+            severity: 'info',
+            message: 'File has data fetching but no ErrorBoundary import',
+            file: filePath,
+            line: 1,
+            column: 0,
+            suggestion: 'Consider using an ErrorBoundary to handle data fetching failures gracefully.',
+        });
+    }
+    return smells;
+}

package/dist/detectors/formValidation.d.ts

@@ -0,0 +1,11 @@
+import { ParsedComponent } from '../parser/index.js';
+import { CodeSmell, DetectorConfig } from '../types/index.js';
+/**
+ * Detect form-related anti-patterns and validation issues
+ */
+export declare function detectFormIssues(component: ParsedComponent, filePath: string, sourceCode: string, config: DetectorConfig): CodeSmell[];
+/**
+ * Detect form-related patterns at file level
+ */
+export declare function detectFormPatterns(sourceCode: string, filePath: string, config: DetectorConfig): CodeSmell[];
+//# sourceMappingURL=formValidation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"formValidation.d.ts","sourceRoot":"","sources":["../../src/detectors/formValidation.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE9D;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,cAAc,GACrB,SAAS,EAAE,CA4Kb;AAwBD;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,cAAc,GACrB,SAAS,EAAE,CA4Bb"}