react-doctor-cli-dev 1.0.0

package/core/static-ana/static/ast-parser.ts

@@ -0,0 +1,31 @@
+import * as parser from '@babel/parser';
+import { File } from '@babel/types';
+
+/**
+ * AST Parser - Converts JavaScript/TypeScript code into an Abstract Syntax Tree
+ */
+export class ASTParser {
+  /**
+   * Parse source code into an AST
+   * @param code - Source code as string
+   * @param filePath - File path (for better error messages)
+   * @returns Parsed AST
+   */
+  parse(code: string, filePath: string): File {
+    try {
+      return parser.parse(code, {
+        sourceType: 'module',
+        plugins: [
+          'jsx',                  // Parse JSX syntax
+          'typescript',           // Parse TypeScript syntax
+          'decorators-legacy',    // Support decorators
+          'classProperties',      // Support class properties
+          'dynamicImport',        // Support dynamic imports
+        ],
+      });
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown parsing error';
+      throw new Error(`Failed to parse ${filePath}: ${errorMessage}`);
+    }
+  }
+}

package/core/static-ana/static/detectors/console-log.ts

@@ -0,0 +1,49 @@
+import traverse from '@babel/traverse';
+import { File } from '@babel/types';
+import { ComponentIssue } from '../../../../shared/src/types';
+import { getParentComponentName, generateIssueId } from '../helpers';
+
+/**
+ * Detect console.log, console.warn, console.error statements
+ * 
+ * Why this is bad:
+ * - Performance impact in production
+ * - Exposes internal information
+ * - Clutters browser console
+ */
+export function detectConsoleLogs(ast: File, filePath: string): ComponentIssue[] {
+  const issues: ComponentIssue[] = [];
+
+  traverse(ast, {
+    CallExpression(path) {  // 1. Guard finds a function call
+      const node = path.node;
+
+      // Check if it's a console.* call
+      if (
+        node.callee.type === 'MemberExpression' &&  // 2. Is it a "Something.Something"?
+        node.callee.object.type === 'Identifier' &&
+        node.callee.object.name === 'console' // 3. Is the first "Something" 'console'?
+      ) {
+        const method = node.callee.property.type === 'Identifier' 
+          ? node.callee.property.name 
+          : 'unknown';
+
+        const line = node.loc?.start.line || 0;
+        const component = getParentComponentName(path);
+
+        issues.push({
+          id: generateIssueId('console', filePath, line),
+          component,
+          file: filePath,
+          line,
+          column: node.loc?.start.column,
+          severity: 'info',
+          message: `console.${method}() statement found`,
+          suggestion: 'Remove console statements before deploying to production',
+        });
+      }
+    },
+  });
+
+  return issues;
+}

package/core/static-ana/static/detectors/dead-code.ts

@@ -0,0 +1,51 @@
+import traverse from '@babel/traverse';
+import { File } from '@babel/types';
+import { ComponentIssue } from '../../../../shared/src/types';
+import { generateIssueId } from '../helpers';
+
+/**
+ * Detect unused variables and imports
+ */
+export function detectDeadCode(ast: File, filePath: string): ComponentIssue[] {
+  const issues: ComponentIssue[] = [];
+
+  traverse(ast, {
+    Program(path) {
+      // Babel automatically collects all "bindings" (variables/imports) 
+      // in the current scope.
+      const bindings = path.scope.getAllBindings();
+
+      for (const name in bindings) {
+        const binding = bindings[name];
+
+        // 1. Check if the variable was ever referenced (used)
+        if (!binding.referenced) {
+          
+          // 2. Ignore variables that start with "_" 
+          // (Standard dev practice for "intentionally unused")
+          if (name.startsWith('_')) continue;
+
+          // 3. Identify if it's an Import or a local Variable
+          const isImport = binding.kind === 'module';
+          const typeLabel = isImport ? 'Import' : 'Variable';
+          
+          const node = binding.path.node;
+          const line = node.loc?.start.line || 0;
+
+          issues.push({
+            id: generateIssueId('dead-code', filePath, line),
+            component: 'Global/Module', // Dead code is often outside components
+            file: filePath,
+            line,
+            column: node.loc?.start.column,
+            severity: 'warning',
+            message: `Unused ${typeLabel} found: "${name}"`,
+            suggestion: `Remove the unused ${typeLabel.toLowerCase()} to clean up the code and reduce bundle size.`,
+          });
+        }
+      }
+    },
+  });
+
+  return issues;
+}

package/core/static-ana/static/detectors/effect-loop.ts

@@ -0,0 +1,45 @@
+import traverse from '@babel/traverse';
+import { File } from '@babel/types';
+import { ComponentIssue } from '../../../../shared/src/types';
+import { getParentComponentName, generateIssueId } from '../helpers';
+
+/**
+ * Detect potential infinite loops in useEffect hooks
+ */
+export function detectInfiniteLoops(ast: File, filePath: string): ComponentIssue[] {
+  const issues: ComponentIssue[] = [];
+
+  traverse(ast, {
+    CallExpression(path) {
+      const node = path.node;
+
+      // 1. Is the function being called named 'useEffect'?
+      if (
+        node.callee.type === 'Identifier' &&
+        node.callee.name === 'useEffect'
+      ) {
+        
+        // 2. Check the number of arguments
+        // useEffect(callback, dependencies) should have 2 arguments.
+        // If it only has 1, it runs on EVERY render.
+        if (node.arguments.length === 1) {
+          const line = node.loc?.start.line || 0;
+          const component = getParentComponentName(path);
+
+          issues.push({
+            id: generateIssueId('infinite-loop', filePath, line),
+            component,
+            file: filePath,
+            line,
+            column: node.loc?.start.column,
+            severity: 'critical', // This is a "Critical" issue!
+            message: `Potential Infinite Loop: "useEffect" is missing a dependency array`,
+            suggestion: 'Add a dependency array (e.g., [], [data]) as the second argument to control when the effect runs.',
+          });
+        }
+      }
+    },
+  });
+
+  return issues;
+}

package/core/static-ana/static/detectors/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Central export for all detectors
+ */
+
+export { detectConsoleLogs } from './console-log';
+export { detectLargeComponents } from './large-component';
+export { detectInlineFunctions } from './inline-function';
+export { detectMissingKeys } from './missing-key';
+export { detectInfiniteLoops } from './effect-loop';
+export { detectPropDrilling } from './prop-drilling';
+export { detectMissingMemo } from './missing-memo';
+export { detectInlineStyles } from './inline-style';
+export { detectDeadCode } from './dead-code';
+// As you build more detectors, export them here
+// export { detectMissingKeys } from './missing-key';
+// export { detectMissingMemo } from './missing-memo';

package/core/static-ana/static/detectors/inline-function.ts

@@ -0,0 +1,59 @@
+import traverse from '@babel/traverse';
+import { File } from '@babel/types';
+import { ComponentIssue } from '../../../../shared/src/types';
+import { getParentComponentName, generateIssueId } from '../helpers';
+
+/**
+ * Detect inline functions in JSX props
+ * 
+ * Example of bad code:
+ *   <button onClick={() => handleClick()}>Click</button>
+ * 
+ * Why this is bad:
+ * - Creates a new function on every render
+ * - Causes child components to re-render unnecessarily
+ * - Performance impact
+ * 
+ * Better approach:
+ *   const handleClick = useCallback(() => {...}, []);
+ *   <button onClick={handleClick}>Click</button>
+ */
+export function detectInlineFunctions(ast: File, filePath: string): ComponentIssue[] {
+  const issues: ComponentIssue[] = [];
+
+  traverse(ast, {
+    JSXAttribute(path) {
+      const node = path.node;
+      
+      // Check if the attribute value is an expression container
+      if (!node.value || node.value.type !== 'JSXExpressionContainer') {
+        return;
+      }
+      
+      const expression = node.value.expression;
+      
+      // Check if the expression is an inline function
+      if (
+        expression.type === 'ArrowFunctionExpression' ||
+        expression.type === 'FunctionExpression'
+      ) {
+        const attributeName = node.name.type === 'JSXIdentifier' ? node.name.name : 'unknown';
+        const line = node.loc?.start.line || 0;
+        const component = getParentComponentName(path);
+
+        issues.push({
+          id: generateIssueId('inline-function', filePath, line),
+          component,
+          file: filePath,
+          line,
+          column: node.loc?.start.column,
+          severity: 'info',
+          message: `Inline ${expression.type} in prop "${attributeName}"`,
+          suggestion: 'Use useCallback or define function outside component to prevent re-renders',
+        });
+      }
+    },
+  });
+
+  return issues;
+}

package/core/static-ana/static/detectors/inline-style.ts

@@ -0,0 +1,52 @@
+import traverse from '@babel/traverse';
+import { File } from '@babel/types';
+import { ComponentIssue } from '../../../../shared/src/types';
+import { getParentComponentName, generateIssueId } from '../helpers';
+
+// Threshold: If an inline style has more than this many properties, flag it.
+const MAX_STYLE_PROPS = 5;
+
+/**
+ * Detect large inline style objects in JSX
+ */
+export function detectInlineStyles(ast: File, filePath: string): ComponentIssue[] {
+  const issues: ComponentIssue[] = [];
+
+  traverse(ast, {
+    JSXAttribute(path) {
+      const node = path.node;
+
+      // 1. Is the attribute named "style"?
+      if (node.name.name !== 'style') return;
+
+      // 2. Is the value an expression like {{ ... }}?
+      if (node.value?.type === 'JSXExpressionContainer') {
+        const expression = node.value.expression;
+
+        // 3. Is it an object (ObjectExpression)?
+        if (expression.type === 'ObjectExpression') {
+          const propCount = expression.properties.length;
+
+          // 4. Check if it's too big
+          if (propCount > MAX_STYLE_PROPS) {
+            const line = node.loc?.start.line || 0;
+            const component = getParentComponentName(path);
+
+            issues.push({
+              id: generateIssueId('inline-style', filePath, line),
+              component,
+              file: filePath,
+              line,
+              column: node.loc?.start.column,
+              severity: 'warning',
+              message: `Large inline style object found (${propCount} properties)`,
+              suggestion: 'Move large style objects to a constant or use CSS/Styled-components to improve performance and readability.',
+            });
+          }
+        }
+      }
+    },
+  });
+
+  return issues;
+}

package/core/static-ana/static/detectors/large-component.ts

@@ -0,0 +1,79 @@
+import * as traverse from '@babel/traverse';
+import { File } from '@babel/types';
+import { ComponentIssue } from '../../../../shared/src/types';
+import { getLineCount, returnsJSX, generateIssueId } from '../helpers';
+
+// Threshold: components over this many lines are considered large
+const MAX_COMPONENT_LINES = 300;
+
+/**
+ * Detect components that are too large (>300 lines)
+ * 
+ * Why this is bad:
+ * - Hard to understand and maintain
+ * - Likely doing too many things (violates Single Responsibility)
+ * - Hard to test
+ * - Harder to reuse
+ */
+export function detectLargeComponents(ast: File, filePath: string): ComponentIssue[] {
+  const issues: ComponentIssue[] = [];
+
+  traverse.default(ast, {
+    // Check function declarations
+    FunctionDeclaration(path) {
+      const node = path.node;
+      
+      // Only check if it's actually a React component (returns JSX)
+      if (!returnsJSX(path)) return;
+      
+      const lineCount = getLineCount(node);
+      
+      if (lineCount > MAX_COMPONENT_LINES) {
+        const componentName = node.id?.name || 'Unknown';
+        const line = node.loc?.start.line || 0;
+
+        issues.push({
+          id: generateIssueId('large-component', filePath, line),
+          component: componentName,
+          file: filePath,
+          line,
+          column: node.loc?.start.column,
+          severity: 'warning',
+          message: `Component "${componentName}" is ${lineCount} lines long`,
+          suggestion: `Split into smaller components (recommended max: ${MAX_COMPONENT_LINES} lines)`,
+        });
+      }
+    },
+
+    // Check arrow function components (const Component = () => ...)
+    VariableDeclarator(path) {
+      const node = path.node;
+      
+      // Check if it's an arrow function
+      if (node.init?.type !== 'ArrowFunctionExpression') return;
+      
+      // Check if it returns JSX (now works with updated helper!)
+      if (!returnsJSX(path.get('init'))) return;
+      
+      const lineCount = getLineCount(node.init);
+      
+      if (lineCount > MAX_COMPONENT_LINES) {
+        const componentName = node.id.type === 'Identifier' ? node.id.name : 'Unknown';
+        const line = node.loc?.start.line || 0;
+
+        issues.push({
+          id: generateIssueId('large-component', filePath, line),
+          component: componentName,
+          file: filePath,
+          line,
+          column: node.loc?.start.column,
+          severity: 'warning',
+          message: `Component "${componentName}" is ${lineCount} lines long`,
+          suggestion: `Split into smaller components (recommended max: ${MAX_COMPONENT_LINES} lines)`,
+        });
+      }
+    },
+  });
+
+  return issues;
+}

package/core/static-ana/static/detectors/missing-key.ts

@@ -0,0 +1,56 @@
+import traverse from '@babel/traverse';
+import { File, isJSXElement, isJSXAttribute, isIdentifier, isArrayExpression } from '@babel/types';
+import { ComponentIssue } from '../../../../shared/src/types';
+import { generateIssueId, getParentComponentName } from '../helpers';
+
+export function detectMissingKeys(ast: File, filePath: string): ComponentIssue[] {
+  const issues: ComponentIssue[] = [];
+
+  traverse(ast, {
+    // 1. Catch Literal Arrays: {[ <div />, <span /> ]}
+    ArrayExpression(path) {
+      const hasJSX = path.node.elements.some(el => isJSXElement(el));
+      if (!hasJSX) return;
+
+      path.node.elements.forEach((el) => {
+        if (isJSXElement(el)) {
+          const hasKey = el.openingElement.attributes.some(attr => 
+            isJSXAttribute(attr) && isIdentifier(attr.name, { name: 'key' })
+          );
+
+          if (!hasKey) {
+            pushIssue(el, issues, filePath, path);
+          }
+        }
+      });
+    },
+
+    // 2. Catch .map(), .filter(), .concat() that return JSX
+    CallExpression(path) {
+      const { node } = path;
+      // Look for array methods
+      if (node.callee.type === 'MemberExpression' && isIdentifier(node.callee.property)) {
+        const methodName = node.callee.property.name;
+        if (['map', 'filter', 'concat', 'from'].includes(methodName)) {
+           // ... logic to check if the result is JSX (similar to previous code)
+        }
+      }
+    }
+  });
+
+  return issues;
+}
+
+// Helper to keep code clean
+function pushIssue(node: any, issues: any[], filePath: string, path: any) {
+  const line = node.loc?.start.line || 0;
+  issues.push({
+    id: generateIssueId('missing-key', filePath, line),
+    component: getParentComponentName(path),
+    file: filePath,
+    line,
+    severity: 'warning',
+    message: 'Missing "key" prop in an array of elements',
+    suggestion: 'Every element in an array or iterator must have a unique "key" prop.',
+  });
+}

package/core/static-ana/static/detectors/missing-memo.ts

@@ -0,0 +1,59 @@
+import traverse from '@babel/traverse';
+import { File, isCallExpression, isIdentifier } from '@babel/types';
+import { ComponentIssue } from '../../../../shared/src/types';
+import { generateIssueId } from '../helpers';
+
+// Threshold: Only suggest memo if the component is over 40 lines
+const MIN_LINES_FOR_MEMO = 40;
+
+export function detectMissingMemo(ast: File, filePath: string): ComponentIssue[] {
+  const issues: ComponentIssue[] = [];
+
+  traverse(ast, {
+    FunctionDeclaration(path) {
+      const node = path.node;
+      
+      // 1. Check if it looks like a React Component (Capitalized name)
+      const name = node.id?.name;
+      if (!name || !/^[A-Z]/.test(name)) return;
+
+      // 2. Check size: Small components don't always need memo
+      const startLine = node.loc?.start.line || 0;
+      const endLine = node.loc?.end.line || 0;
+      const lineCount = endLine - startLine;
+      if (lineCount < MIN_LINES_FOR_MEMO) return;
+
+      // 3. Check if it's already wrapped in memo (if exported separately)
+      // or if it's an ExportDefaultDeclaration wrapped in memo
+      let isMemoized = false;
+      path.scope.path.parentPath?.traverse({
+        CallExpression(innerPath) {
+          if (
+            isIdentifier(innerPath.node.callee, { name: 'memo' }) ||
+            (innerPath.node.callee.type === 'MemberExpression' && 
+             isIdentifier(innerPath.node.callee.property, { name: 'memo' }))
+          ) {
+            // Check if our component name is passed to this memo()
+            if (innerPath.node.arguments.some(arg => isIdentifier(arg, { name }))) {
+              isMemoized = true;
+            }
+          }
+        }
+      });
+
+      if (!isMemoized) {
+        issues.push({
+          id: generateIssueId('missing-memo', filePath, startLine),
+          component: name,
+          file: filePath,
+          line: startLine,
+          severity: 'info',
+          message: `Large component "${name}" is not memoized.`,
+          suggestion: 'Wrap this component in React.memo() to prevent unnecessary re-renders when parent props change.',
+        });
+      }
+    }
+  });
+
+  return issues;
+}

package/core/static-ana/static/detectors/prop-drilling.ts

@@ -0,0 +1,66 @@
+import traverse from '@babel/traverse';
+import { File, isFunctionDeclaration, isArrowFunctionExpression, isObjectProperty, isIdentifier } from '@babel/types';
+import { ComponentIssue } from '../../../../shared/src/types';
+import { generateIssueId } from '../helpers';
+
+/**
+ * Detect potential prop drilling (props passed through without being used)
+ */
+export function detectPropDrilling(ast: File, filePath: string): ComponentIssue[] {
+  const issues: ComponentIssue[] = [];
+
+  traverse(ast, {
+    // We target both declaration styles
+    "FunctionDeclaration|ArrowFunctionExpression"(path) {
+      const node = path.node;
+
+      // 1. Tell TypeScript: "Trust me, this node has params"
+      if (!isFunctionDeclaration(node) && !isArrowFunctionExpression(node)) return;
+      
+      const params = node.params;
+      if (params.length === 0) return;
+
+      const propsNode = params[0];
+      let propNames: string[] = [];
+
+      // Handle destructured props: ({ user, theme })
+      if (propsNode.type === 'ObjectPattern') {
+        propNames = propsNode.properties
+          .filter((p): p is any => isObjectProperty(p) && isIdentifier(p.key))
+          .map(p => (p.key as any).name);
+      } 
+      // Handle single prop object: (props)
+      else if (propsNode.type === 'Identifier') {
+        propNames = [propsNode.name];
+      }
+
+      // 2. For each prop, check its references in the component scope
+      propNames.forEach(name => {
+        const binding = path.scope.getBinding(name);
+        if (!binding) return;
+
+        const totalRefs = binding.referencePaths.length;
+        const jsxRefs = binding.referencePaths.filter(refPath => 
+          refPath.findParent(p => p.isJSXAttribute())
+        ).length;
+
+        // If used, but ONLY as a pass-through to a JSX attribute
+        if (totalRefs > 0 && totalRefs === jsxRefs) {
+          const line = node.loc?.start.line || 0;
+
+          issues.push({
+            id: generateIssueId('prop-drilling', filePath, line),
+            component: (node as any).id?.name || 'UnknownComponent',
+            file: filePath,
+            line,
+            severity: 'info',
+            message: `Potential Prop Drilling: The prop "${name}" is passed through this component without being used locally.`,
+            suggestion: 'Consider using React Context or a State Management library (Redux/Zustand) to avoid deep prop drilling.',
+          });
+        }
+      });
+    }
+  });
+
+  return issues;
+}

package/core/static-ana/static/helpers.ts

@@ -0,0 +1,81 @@
+import { NodePath } from '@babel/traverse';
+import { Node } from '@babel/types';
+
+/**
+ * Get the name of the parent component
+ * Walks up the AST tree to find the nearest component name
+ */
+export function getParentComponentName(path: NodePath): string {
+  let current: NodePath | null = path;
+  
+  while (current) {
+    // Check for FunctionDeclaration with a name
+    if (current.isFunctionDeclaration() && current.node.id) {
+      return current.node.id.name;
+    }
+    
+    // Check for VariableDeclarator (const Component = ...)
+    if (current.isVariableDeclarator() && current.node.id.type === 'Identifier') {
+      return current.node.id.name;
+    }
+    
+    current = current.parentPath;
+  }
+  
+  return 'Unknown';
+}
+
+/**
+ * Check if a function/component returns JSX
+ * Safely handles null/undefined paths
+ * 
+ * @param path - NodePath to check (can be null/undefined)
+ * @returns true if the path contains JSX elements or fragments
+ */
+export function returnsJSX(path: NodePath | NodePath<Node | null | undefined> | null | undefined): boolean {
+  // Guard against null/undefined
+  if (!path || !path.node) return false;
+  
+  let hasJSX = false;
+  
+  try {
+    path.traverse({
+      JSXElement() {
+        hasJSX = true;
+      },
+      JSXFragment() {
+        hasJSX = true;
+      }
+    });
+  } catch (error) {
+    // If traversal fails for any reason, safely assume no JSX
+    return false;
+  }
+  
+  return hasJSX;
+}
+
+/**
+ * Count the number of lines in a node
+ * 
+ * @param node - AST node with location info
+ * @returns number of lines, or 0 if no location info
+ */
+export function getLineCount(node: any): number {
+  if (!node || !node.loc) return 0;
+  return node.loc.end.line - node.loc.start.line;
+}
+
+/**
+ * Generate a unique issue ID
+ * 
+ * @param type - Type of issue (e.g., 'console', 'large-component')
+ * @param filePath - File path where issue was found
+ * @param line - Line number
+ * @returns Unique identifier string
+ */
+export function generateIssueId(type: string, filePath: string, line: number): string {
+  // Sanitize file path to create valid ID
+  const sanitizedPath = filePath.replace(/[^a-zA-Z0-9]/g, '_');
+  return `${type}-${sanitizedPath}-${line}`;
+}