react-code-smell-detector 1.4.2 → 1.5.1

package/dist/detectors/stateManagement.js

@@ -0,0 +1,193 @@
+import * as t from '@babel/types';
+/**
+ * Detect state management anti-patterns (Redux, Zustand, MobX, etc.)
+ */
+export function detectStateManagementIssues(component, filePath, sourceCode, config) {
+    if (!config.checkStateManagement)
+        return [];
+    const smells = [];
+    let useSelectorCount = 0;
+    let useStoreCount = 0;
+    const selectorLocations = [];
+    component.path.traverse({
+        CallExpression(path) {
+            const node = path.node;
+            const { callee } = node;
+            // Detect Redux useSelector
+            if (t.isIdentifier(callee) && callee.name === 'useSelector') {
+                useSelectorCount++;
+                const loc = node.loc;
+                selectorLocations.push({ line: loc?.start.line || 0, column: loc?.start.column || 0 });
+                // Check if selector is defined inline (anti-pattern)
+                if (node.arguments.length > 0 && t.isArrowFunctionExpression(node.arguments[0])) {
+                    smells.push({
+                        type: 'redux-in-render',
+                        severity: 'warning',
+                        message: `Inline selector in useSelector in "${component.name}" - will cause re-renders`,
+                        file: filePath,
+                        line: loc?.start.line || 0,
+                        column: loc?.start.column || 0,
+                        suggestion: 'Define selectors outside the component or use createSelector for memoization.',
+                    });
+                }
+            }
+            // Detect Zustand useStore
+            if (t.isIdentifier(callee) && (callee.name === 'useStore' || callee.name.endsWith('Store'))) {
+                useStoreCount++;
+                const loc = node.loc;
+                // Check if selecting entire store (anti-pattern)
+                if (node.arguments.length === 0) {
+                    smells.push({
+                        type: 'excessive-redux-selectors',
+                        severity: 'warning',
+                        message: `Using entire store without selector in "${component.name}"`,
+                        file: filePath,
+                        line: loc?.start.line || 0,
+                        column: loc?.start.column || 0,
+                        suggestion: 'Use a selector function to subscribe only to needed state slices.',
+                    });
+                }
+            }
+            // Detect useDispatch in render
+            if (t.isIdentifier(callee) && callee.name === 'useDispatch') {
+                // Check if dispatch is being called directly in render body
+                let currentPath = path.parentPath;
+                let inCallback = false;
+                while (currentPath) {
+                    if (t.isArrowFunctionExpression(currentPath.node) ||
+                        t.isFunctionExpression(currentPath.node)) {
+                        inCallback = true;
+                        break;
+                    }
+                    if (t.isJSXAttribute(currentPath.node)) {
+                        inCallback = true;
+                        break;
+                    }
+                    currentPath = currentPath.parentPath;
+                }
+            }
+        },
+        // Detect derived state stored in state (anti-pattern)
+        VariableDeclarator(path) {
+            const node = path.node;
+            // Check for useState with computed value from props or other state
+            if (t.isCallExpression(node.init) &&
+                t.isIdentifier(node.init.callee) &&
+                node.init.callee.name === 'useState') {
+                const args = node.init.arguments;
+                if (args.length > 0) {
+                    // Check if initial value is derived from props
+                    const initValue = args[0];
+                    if (t.isIdentifier(initValue) && initValue.name.startsWith('props')) {
+                        const loc = node.loc;
+                        smells.push({
+                            type: 'derived-state-in-state',
+                            severity: 'warning',
+                            message: `State initialized from props in "${component.name}" - may cause sync issues`,
+                            file: filePath,
+                            line: loc?.start.line || 0,
+                            column: loc?.start.column || 0,
+                            suggestion: 'Derive values directly from props instead of copying to state, or use a key to reset.',
+                        });
+                    }
+                }
+            }
+        },
+    });
+    // Check for too many selectors (component doing too much)
+    if (useSelectorCount > 3) {
+        const firstLoc = selectorLocations[0] || { line: component.path.node.loc?.start.line || 0, column: 0 };
+        smells.push({
+            type: 'excessive-redux-selectors',
+            severity: 'warning',
+            message: `Component "${component.name}" has ${useSelectorCount} useSelector calls - consider splitting`,
+            file: filePath,
+            line: firstLoc.line,
+            column: firstLoc.column,
+            suggestion: 'Create a combined selector or split into smaller connected components.',
+        });
+    }
+    // Detect state sync anti-patterns
+    detectStateSyncAntiPatterns(component, filePath, smells);
+    return smells;
+}
+/**
+ * Detect state synchronization anti-patterns
+ */
+function detectStateSyncAntiPatterns(component, filePath, smells) {
+    // Check useEffect that sets state based on other state (state sync)
+    for (const effect of component.hooks.useEffect) {
+        if (!t.isArrowFunctionExpression(effect.arguments[0]) &&
+            !t.isFunctionExpression(effect.arguments[0])) {
+            continue;
+        }
+        const callback = effect.arguments[0];
+        let setsState = false;
+        let dependsOnState = false;
+        // Simple check: look for setState calls in the effect
+        if (t.isBlockStatement(callback.body)) {
+            const bodyStr = JSON.stringify(callback.body);
+            setsState = bodyStr.includes('"callee":{"name":"set') ||
+                bodyStr.includes('setState');
+        }
+        // Check dependency array for state variables
+        if (effect.arguments.length > 1 && t.isArrayExpression(effect.arguments[1])) {
+            const deps = effect.arguments[1].elements;
+            dependsOnState = deps.length > 0;
+        }
+        if (setsState && dependsOnState) {
+            const loc = effect.loc;
+            smells.push({
+                type: 'state-sync-anti-pattern',
+                severity: 'warning',
+                message: `useEffect syncs state from dependencies in "${component.name}" - potential infinite loop or unnecessary re-renders`,
+                file: filePath,
+                line: loc?.start.line || 0,
+                column: 0,
+                suggestion: 'Consider deriving the value during render instead of syncing in useEffect.',
+            });
+        }
+    }
+}
+/**
+ * Detect file-level state management patterns
+ */
+export function detectStateManagementPatterns(sourceCode, filePath, config) {
+    if (!config.checkStateManagement)
+        return [];
+    const smells = [];
+    const lines = sourceCode.split('\n');
+    lines.forEach((line, index) => {
+        // Check for dispatch in JSX (anti-pattern - should be in handler)
+        if (line.includes('onClick={') && line.includes('dispatch(')) {
+            smells.push({
+                type: 'redux-in-render',
+                severity: 'info',
+                message: 'Inline dispatch in JSX - consider extracting to handler function',
+                file: filePath,
+                line: index + 1,
+                column: 0,
+                suggestion: 'Extract dispatch calls to named handler functions for better readability and debugging.',
+                codeSnippet: line.trim(),
+            });
+        }
+        // Check for createSelector without memoization
+        if (line.includes('useSelector(state =>') && !line.includes('createSelector')) {
+            // Check if it's a complex selector (has multiple property accesses)
+            const accessCount = (line.match(/\./g) || []).length;
+            if (accessCount > 2) {
+                smells.push({
+                    type: 'redux-in-render',
+                    severity: 'info',
+                    message: 'Complex inline selector without createSelector',
+                    file: filePath,
+                    line: index + 1,
+                    column: 0,
+                    suggestion: 'Use createSelector from reselect for complex derived data to enable memoization.',
+                    codeSnippet: line.trim(),
+                });
+            }
+        }
+    });
+    return smells;
+}

package/dist/detectors/testingGaps.d.ts

@@ -0,0 +1,15 @@
+import { ParsedComponent } from '../parser/index.js';
+import { CodeSmell, DetectorConfig } from '../types/index.js';
+/**
+ * Detect components that are likely hard to test or should have tests
+ */
+export declare function detectTestingGaps(component: ParsedComponent, filePath: string, sourceCode: string, config: DetectorConfig): CodeSmell[];
+/**
+ * Generate test file suggestions for components
+ */
+export declare function generateTestSuggestions(component: ParsedComponent, filePath: string, sourceCode: string, config: DetectorConfig): string[];
+/**
+ * Check if a test file exists for a component
+ */
+export declare function hasTestFile(filePath: string): boolean;
+//# sourceMappingURL=testingGaps.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"testingGaps.d.ts","sourceRoot":"","sources":["../../src/detectors/testingGaps.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,iBAAiB,CAC/B,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,cAAc,GACrB,SAAS,EAAE,CAgDb;AAsHD;;GAEG;AACH,wBAAgB,uBAAuB,CACrC,SAAS,EAAE,eAAe,EAC1B,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,cAAc,GACrB,MAAM,EAAE,CAiCV;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAUrD"}

package/dist/detectors/testingGaps.js

@@ -0,0 +1,182 @@
+import * as t from '@babel/types';
+/**
+ * Detect components that are likely hard to test or should have tests
+ */
+export function detectTestingGaps(component, filePath, sourceCode, config) {
+    if (!config.checkTestingGaps)
+        return [];
+    const smells = [];
+    // Calculate testability metrics
+    const metrics = calculateTestabilityMetrics(component, sourceCode);
+    // Flag complex components without apparent tests
+    if (metrics.complexityScore > config.testComplexityThreshold) {
+        smells.push({
+            type: 'complex-untestable',
+            severity: 'info',
+            message: `Component "${component.name}" has high complexity (${metrics.complexityScore}) - ensure adequate test coverage`,
+            file: filePath,
+            line: component.path.node.loc?.start.line || 0,
+            column: 0,
+            suggestion: `This component has ${metrics.hooks} hooks, ${metrics.effects} effects, and ${metrics.conditionals} conditionals. Consider splitting or ensuring thorough test coverage.`,
+        });
+    }
+    // Flag components with many side effects
+    if (metrics.sideEffects > 3) {
+        smells.push({
+            type: 'side-effect-heavy',
+            severity: 'warning',
+            message: `Component "${component.name}" has ${metrics.sideEffects} side effects - difficult to test`,
+            file: filePath,
+            line: component.path.node.loc?.start.line || 0,
+            column: 0,
+            suggestion: 'Extract side effects into custom hooks or separate functions for easier testing and mocking.',
+        });
+    }
+    // Flag tightly coupled components
+    if (metrics.externalDependencies > 5) {
+        smells.push({
+            type: 'tightly-coupled',
+            severity: 'info',
+            message: `Component "${component.name}" has ${metrics.externalDependencies} external dependencies`,
+            file: filePath,
+            line: component.path.node.loc?.start.line || 0,
+            column: 0,
+            suggestion: 'Consider dependency injection or using a container pattern to make testing easier.',
+        });
+    }
+    return smells;
+}
+/**
+ * Calculate testability metrics for a component
+ */
+function calculateTestabilityMetrics(component, sourceCode) {
+    let conditionals = 0;
+    let sideEffects = 0;
+    let externalDependencies = 0;
+    let callbacks = 0;
+    component.path.traverse({
+        // Count conditionals
+        IfStatement() {
+            conditionals++;
+        },
+        ConditionalExpression() {
+            conditionals++;
+        },
+        SwitchStatement() {
+            conditionals++;
+        },
+        LogicalExpression(path) {
+            const node = path.node;
+            if (node.operator === '&&' || node.operator === '||') {
+                conditionals++;
+            }
+        },
+        // Count callbacks/event handlers
+        ArrowFunctionExpression() {
+            callbacks++;
+        },
+        FunctionExpression() {
+            callbacks++;
+        },
+        // Count side effects
+        CallExpression(path) {
+            const node = path.node;
+            const { callee } = node;
+            if (t.isIdentifier(callee)) {
+                // Side effect indicators
+                const sideEffectFns = [
+                    'fetch', 'axios', 'console', 'localStorage', 'sessionStorage',
+                    'setInterval', 'setTimeout', 'addEventListener', 'removeEventListener',
+                    'dispatch', 'navigate', 'push', 'replace',
+                ];
+                if (sideEffectFns.some(fn => callee.name.includes(fn))) {
+                    sideEffects++;
+                }
+                // External dependencies (hooks that likely need mocking)
+                const externalHooks = [
+                    'useQuery', 'useMutation', 'useSWR', 'useRouter', 'useNavigate',
+                    'useLocation', 'useParams', 'useSelector', 'useDispatch',
+                    'useAuth', 'useUser', 'useApi',
+                ];
+                if (externalHooks.some(hook => callee.name === hook || callee.name.includes(hook))) {
+                    externalDependencies++;
+                }
+            }
+            // Member expression side effects (e.g., router.push, api.get)
+            if (t.isMemberExpression(callee) && t.isIdentifier(callee.property)) {
+                const methodName = callee.property.name;
+                const sideEffectMethods = ['push', 'replace', 'get', 'post', 'put', 'delete', 'fetch'];
+                if (sideEffectMethods.includes(methodName)) {
+                    sideEffects++;
+                }
+            }
+        },
+    });
+    const hooks = component.hooks.useState.length +
+        component.hooks.useEffect.length +
+        component.hooks.useMemo.length +
+        component.hooks.useCallback.length +
+        component.hooks.useRef.length;
+    const effects = component.hooks.useEffect.length;
+    // Calculate overall complexity score
+    const complexityScore = hooks * 1 +
+        effects * 2 +
+        conditionals * 1.5 +
+        sideEffects * 2 +
+        externalDependencies * 1.5 +
+        callbacks * 0.5;
+    return {
+        complexityScore: Math.round(complexityScore),
+        hooks,
+        effects,
+        conditionals,
+        sideEffects,
+        externalDependencies,
+        callbacks,
+    };
+}
+/**
+ * Generate test file suggestions for components
+ */
+export function generateTestSuggestions(component, filePath, sourceCode, config) {
+    const suggestions = [];
+    const metrics = calculateTestabilityMetrics(component, sourceCode);
+    // Basic render test
+    suggestions.push(`it('should render ${component.name} without crashing', () => {
+  render(<${component.name} />);
+});`);
+    // Props tests if component has props
+    if (component.path.node.type === 'FunctionDeclaration' ||
+        (component.path.node.type === 'VariableDeclarator' &&
+            t.isArrowFunctionExpression(component.path.node.init))) {
+        suggestions.push(`it('should pass props correctly', () => {
+  // TODO: Add prop tests for ${component.name}
+});`);
+    }
+    // Effect tests
+    if (metrics.effects > 0) {
+        suggestions.push(`it('should handle side effects in ${component.name}', async () => {
+  // TODO: Test useEffect behavior
+});`);
+    }
+    // Interaction tests
+    if (metrics.callbacks > 0) {
+        suggestions.push(`it('should handle user interactions', async () => {
+  // TODO: Add interaction tests for ${component.name}
+});`);
+    }
+    return suggestions;
+}
+/**
+ * Check if a test file exists for a component
+ */
+export function hasTestFile(filePath) {
+    const testPatterns = [
+        filePath.replace(/\.(tsx?|jsx?)$/, '.test.$1'),
+        filePath.replace(/\.(tsx?|jsx?)$/, '.spec.$1'),
+        filePath.replace(/\/([^/]+)\.(tsx?|jsx?)$/, '/__tests__/$1.$2'),
+    ];
+    // Note: This is a simple pattern check. In real usage, 
+    // you'd want to actually check the file system
+    return false; // Placeholder - actual implementation would check fs
+}

package/dist/docGenerator.d.ts

@@ -0,0 +1,37 @@
+import { AnalysisResult, CodeSmell } from './types/index.js';
+export interface DocGeneratorOptions {
+    format: 'markdown' | 'html' | 'json';
+    outputDir?: string;
+    includeSmells?: boolean;
+    includeMetrics?: boolean;
+    groupByFolder?: boolean;
+}
+export interface ComponentDoc {
+    name: string;
+    file: string;
+    relativePath: string;
+    lineCount: number;
+    props: string[];
+    hooks: {
+        useState: number;
+        useEffect: number;
+        useMemo: number;
+        useCallback: number;
+        useRef: number;
+        custom: string[];
+    };
+    smells: CodeSmell[];
+    metrics: {
+        complexity: string;
+        maintainability: string;
+    };
+}
+/**
+ * Generate documentation from component analysis
+ */
+export declare function generateComponentDocs(result: AnalysisResult, rootDir: string, options?: DocGeneratorOptions): Promise<string>;
+/**
+ * Write documentation to file
+ */
+export declare function writeComponentDocs(result: AnalysisResult, rootDir: string, options: DocGeneratorOptions): Promise<string>;
+//# sourceMappingURL=docGenerator.d.ts.map

package/dist/docGenerator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"docGenerator.d.ts","sourceRoot":"","sources":["../src/docGenerator.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAA+B,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAE1F,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,OAAO,EAAE,MAAM,CAAC;QAChB,WAAW,EAAE,MAAM,CAAC;QACpB,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,EAAE,CAAC;KAClB,CAAC;IACF,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,OAAO,EAAE;QACP,UAAU,EAAE,MAAM,CAAC;QACnB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;CACH;AAED;;GAEG;AACH,wBAAsB,qBAAqB,CACzC,MAAM,EAAE,cAAc,EACtB,OAAO,EAAE,MAAM,EACf,OAAO,GAAE,mBAA4C,GACpD,OAAO,CAAC,MAAM,CAAC,CAYjB;AAqTD;;GAEG;AACH,wBAAsB,kBAAkB,CACtC,MAAM,EAAE,cAAc,EACtB,OAAO,EAAE,MAAM,EACf,OAAO,EAAE,mBAAmB,GAC3B,OAAO,CAAC,MAAM,CAAC,CAYjB"}