@vibecheckai/cli 3.5.0 → 3.5.2

package/bin/runners/lib/engines/react-patterns-engine.js

@@ -1,457 +0,0 @@
-/**
- * React Patterns Engine
- * Detects:
- * - Missing key props in lists
- * - Array index as key
- * - Direct state mutation
- * - Missing dependency arrays in hooks
- * - Stale closure issues
- * - Conditional hook calls
- * - Props spreading issues
- * - Missing error boundaries
- * - useEffect cleanup issues
- * - Excessive re-renders
- */
-
-const { getAST } = require("./ast-cache");
-const traverse = require("@babel/traverse").default;
-const t = require("@babel/types");
-const { shouldExcludeFile, isTestContext, hasIgnoreDirective } = require("./file-filter");
-
-function snippetForLine(lines, line) {
-  return lines[line - 1] ? lines[line - 1].trim() : "";
-}
-
-/**
- * Check if inside a React component or hook
- */
-function isInReactContext(path) {
-  const fnParent = path.getFunctionParent();
-  if (!fnParent) return false;
-  
-  const fnNode = fnParent.node;
-  let fnName = "";
-  
-  if (fnNode.id?.name) {
-    fnName = fnNode.id.name;
-  } else if (fnParent.parentPath?.isVariableDeclarator()) {
-    fnName = fnParent.parentPath.node.id?.name || "";
-  }
-  
-  // Check if component (PascalCase) or hook (useXxx)
-  return /^[A-Z]/.test(fnName) || /^use[A-Z]/.test(fnName);
-}
-
-/**
- * Check if inside a loop
- */
-function isInLoop(path) {
-  return !!path.findParent(p => 
-    p.isForStatement() || 
-    p.isForInStatement() || 
-    p.isForOfStatement() ||
-    p.isWhileStatement() ||
-    p.isDoWhileStatement()
-  );
-}
-
-/**
- * Check if inside a conditional
- */
-function isInConditional(path) {
-  return !!path.findParent(p => 
-    p.isIfStatement() || 
-    p.isConditionalExpression() ||
-    p.isSwitchStatement() ||
-    (p.isLogicalExpression() && (p.node.operator === "&&" || p.node.operator === "||"))
-  );
-}
-
-/**
- * Get variable name from setState pattern
- */
-function getStateVarFromSetter(setterName) {
-  if (setterName.startsWith("set") && setterName.length > 3) {
-    const varName = setterName.slice(3);
-    return varName.charAt(0).toLowerCase() + varName.slice(1);
-  }
-  return null;
-}
-
-/**
- * Analyze React patterns
- */
-function analyzeReactPatterns(code, filePath) {
-  const findings = [];
-  
-  if (shouldExcludeFile(filePath)) return findings;
-  if (isTestContext(code, filePath)) return findings;
-  if (hasIgnoreDirective(code, "react-patterns")) return findings;
-  
-  // Only analyze React files
-  if (!/\.(tsx|jsx)$/.test(filePath)) return findings;
-  
-  const ast = getAST(code, filePath);
-  if (!ast) return findings;
-  
-  const lines = code.split("\n");
-  
-  // Track useState variables
-  const stateVars = new Map(); // varName -> setterName
-  const setterToVar = new Map(); // setterName -> varName
-  
-  // Track hooks order violations
-  const hookCalls = [];
-  let hasConditionalHook = false;
-  let hasLoopHook = false;
-  
-  traverse(ast, {
-    // Detect missing key prop in JSX arrays
-    JSXElement(path) {
-      const node = path.node;
-      
-      // Check if inside map/forEach
-      const callParent = path.findParent(p => 
-        p.isCallExpression() && 
-        t.isMemberExpression(p.node.callee) &&
-        t.isIdentifier(p.node.callee.property) &&
-        ["map", "forEach", "filter", "reduce"].includes(p.node.callee.property.name)
-      );
-      
-      if (callParent) {
-        // Check if this JSX element has a key prop
-        const hasKey = node.openingElement.attributes.some(attr => 
-          t.isJSXAttribute(attr) && 
-          t.isJSXIdentifier(attr.name, { name: "key" })
-        );
-        
-        if (!hasKey) {
-          const loc = node.loc?.start;
-          if (loc) {
-            findings.push({
-              type: "missing_key",
-              severity: "WARN",
-              category: "ReactPatterns",
-              file: filePath,
-              line: loc.line,
-              column: loc.column,
-              title: "Missing 'key' prop in list item",
-              message: "Each child in a list should have a unique 'key' prop.",
-              codeSnippet: snippetForLine(lines, loc.line),
-              confidence: "high",
-              fixHint: "Add key={uniqueId} to the JSX element",
-            });
-          }
-        }
-      }
-    },
-    
-    // Detect array index as key
-    JSXAttribute(path) {
-      const node = path.node;
-      
-      if (t.isJSXIdentifier(node.name, { name: "key" })) {
-        const value = node.value;
-        
-        // Check for key={index} or key={i}
-        if (t.isJSXExpressionContainer(value)) {
-          const expr = value.expression;
-          
-          // Direct index variable
-          if (t.isIdentifier(expr) && 
-              (expr.name === "index" || expr.name === "i" || expr.name === "idx")) {
-            
-            const loc = node.loc?.start;
-            if (loc) {
-              findings.push({
-                type: "index_as_key",
-                severity: "WARN",
-                category: "ReactPatterns",
-                file: filePath,
-                line: loc.line,
-                column: loc.column,
-                title: "Array index used as key",
-                message: "Using array index as key can cause issues with list reordering and component state.",
-                codeSnippet: snippetForLine(lines, loc.line),
-                confidence: "high",
-                fixHint: "Use a unique identifier from your data as key",
-              });
-            }
-          }
-        }
-      }
-    },
-    
-    // Track useState calls
-    CallExpression(path) {
-      const node = path.node;
-      const callee = node.callee;
-      const loc = node.loc?.start;
-      
-      // Track useState
-      if (t.isIdentifier(callee, { name: "useState" })) {
-        const varDecl = path.findParent(p => p.isVariableDeclarator());
-        if (varDecl && t.isArrayPattern(varDecl.node.id)) {
-          const [stateVar, setterVar] = varDecl.node.id.elements;
-          if (t.isIdentifier(stateVar) && t.isIdentifier(setterVar)) {
-            stateVars.set(stateVar.name, setterVar.name);
-            setterToVar.set(setterVar.name, stateVar.name);
-          }
-        }
-        
-        // Track for conditional/loop detection
-        if (isInReactContext(path)) {
-          hookCalls.push({ name: "useState", loc, path });
-          
-          if (isInConditional(path)) {
-            hasConditionalHook = true;
-            if (loc) {
-              findings.push({
-                type: "conditional_hook",
-                severity: "BLOCK",
-                category: "ReactPatterns",
-                file: filePath,
-                line: loc.line,
-                column: loc.column,
-                title: "Hook called conditionally",
-                message: "Hooks must be called in the same order every render. Don't call hooks inside conditions.",
-                codeSnippet: snippetForLine(lines, loc.line),
-                confidence: "high",
-                fixHint: "Move hook call to top level of component",
-              });
-            }
-          }
-          
-          if (isInLoop(path)) {
-            hasLoopHook = true;
-            if (loc) {
-              findings.push({
-                type: "hook_in_loop",
-                severity: "BLOCK",
-                category: "ReactPatterns",
-                file: filePath,
-                line: loc.line,
-                column: loc.column,
-                title: "Hook called inside loop",
-                message: "Hooks must be called in the same order every render. Don't call hooks inside loops.",
-                codeSnippet: snippetForLine(lines, loc.line),
-                confidence: "high",
-                fixHint: "Move hook call to top level of component",
-              });
-            }
-          }
-        }
-      }
-      
-      // Track other hooks
-      if (t.isIdentifier(callee) && /^use[A-Z]/.test(callee.name)) {
-        if (isInReactContext(path)) {
-          hookCalls.push({ name: callee.name, loc, path });
-          
-          if (isInConditional(path) && !hasConditionalHook) {
-            hasConditionalHook = true;
-            if (loc) {
-              findings.push({
-                type: "conditional_hook",
-                severity: "BLOCK",
-                category: "ReactPatterns",
-                file: filePath,
-                line: loc.line,
-                column: loc.column,
-                title: `Hook '${callee.name}' called conditionally`,
-                message: "Hooks must be called in the same order every render.",
-                codeSnippet: snippetForLine(lines, loc.line),
-                confidence: "high",
-                fixHint: "Move hook call to top level of component",
-              });
-            }
-          }
-        }
-      }
-      
-      // Check useEffect for missing dependencies
-      if (t.isIdentifier(callee, { name: "useEffect" }) || 
-          t.isIdentifier(callee, { name: "useLayoutEffect" }) ||
-          t.isIdentifier(callee, { name: "useCallback" }) ||
-          t.isIdentifier(callee, { name: "useMemo" })) {
-        
-        const args = node.arguments;
-        
-        // Check for missing dependency array
-        if (args.length === 1 && callee.name === "useEffect") {
-          if (loc) {
-            findings.push({
-              type: "missing_deps_array",
-              severity: "WARN",
-              category: "ReactPatterns",
-              file: filePath,
-              line: loc.line,
-              column: loc.column,
-              title: "useEffect without dependency array",
-              message: "useEffect without dependency array runs on every render. Add [] for mount-only or specify dependencies.",
-              codeSnippet: snippetForLine(lines, loc.line),
-              confidence: "med",
-              fixHint: "Add dependency array: useEffect(() => { ... }, [])",
-            });
-          }
-        }
-        
-        // Check for empty dependency array with external references
-        if (args.length === 2 && t.isArrayExpression(args[1]) && args[1].elements.length === 0) {
-          // Check if callback uses external variables
-          const callback = args[0];
-          if (t.isArrowFunctionExpression(callback) || t.isFunctionExpression(callback)) {
-            const usedVars = new Set();
-            
-            traverse(callback.body, {
-              Identifier(innerPath) {
-                // Skip if it's a declaration
-                if (innerPath.isBindingIdentifier()) return;
-                // Skip property names
-                if (innerPath.parentPath.isMemberExpression() && 
-                    innerPath.key === "property" && 
-                    !innerPath.parentPath.node.computed) return;
-                
-                usedVars.add(innerPath.node.name);
-              },
-              noScope: true,
-            }, path.scope);
-            
-            // Check if any state variables are used
-            const stateUsed = [];
-            for (const [stateVar, _] of stateVars) {
-              if (usedVars.has(stateVar)) {
-                stateUsed.push(stateVar);
-              }
-            }
-            
-            if (stateUsed.length > 0) {
-              if (loc) {
-                findings.push({
-                  type: "stale_closure",
-                  severity: "WARN",
-                  category: "ReactPatterns",
-                  file: filePath,
-                  line: loc.line,
-                  column: loc.column,
-                  title: "Possible stale closure",
-                  message: `Effect uses state [${stateUsed.join(", ")}] but has empty deps. Values may be stale.`,
-                  codeSnippet: snippetForLine(lines, loc.line),
-                  confidence: "med",
-                  fixHint: `Add dependencies: [${stateUsed.join(", ")}]`,
-                });
-              }
-            }
-          }
-        }
-      }
-    },
-    
-    // Detect direct state mutation
-    AssignmentExpression(path) {
-      const node = path.node;
-      const left = node.left;
-      const loc = node.loc?.start;
-      
-      if (!loc) return;
-      
-      // Check for state.x = ... or state[x] = ...
-      if (t.isMemberExpression(left)) {
-        const objName = t.isIdentifier(left.object) ? left.object.name : null;
-        
-        if (objName && stateVars.has(objName)) {
-          findings.push({
-            type: "direct_state_mutation",
-            severity: "WARN",
-            category: "ReactPatterns",
-            file: filePath,
-            line: loc.line,
-            column: loc.column,
-            title: `Direct mutation of state '${objName}'`,
-            message: "Don't mutate state directly. Use the setter function instead.",
-            codeSnippet: snippetForLine(lines, loc.line),
-            confidence: "high",
-            fixHint: `Use ${stateVars.get(objName)}(prev => ({ ...prev, ... }))`,
-          });
-        }
-      }
-    },
-    
-    // Check for array/object methods that mutate state directly
-    MemberExpression(path) {
-      const node = path.node;
-      const loc = node.loc?.start;
-      
-      if (!loc) return;
-      
-      // Methods that mutate arrays
-      const mutatingMethods = ["push", "pop", "shift", "unshift", "splice", "sort", "reverse", "fill"];
-      
-      if (t.isIdentifier(node.property) && mutatingMethods.includes(node.property.name)) {
-        const objName = t.isIdentifier(node.object) ? node.object.name : null;
-        
-        if (objName && stateVars.has(objName)) {
-          // Check if it's being called
-          if (path.parentPath.isCallExpression() && path.parentPath.node.callee === node) {
-            findings.push({
-              type: "mutating_state_array",
-              severity: "WARN",
-              category: "ReactPatterns",
-              file: filePath,
-              line: loc.line,
-              column: loc.column,
-              title: `Mutating state array with '${node.property.name}'`,
-              message: `${node.property.name}() mutates the array. Create a new array instead.`,
-              codeSnippet: snippetForLine(lines, loc.line),
-              confidence: "high",
-              fixHint: "Use spread: setArr([...arr, newItem]) or filter/map",
-            });
-          }
-        }
-      }
-    },
-    
-    // Check for props spreading anti-pattern
-    JSXSpreadAttribute(path) {
-      const node = path.node;
-      const loc = node.loc?.start;
-      
-      if (!loc) return;
-      
-      // Check if spreading props directly to DOM element
-      const jsxElement = path.findParent(p => p.isJSXElement());
-      if (jsxElement) {
-        const elementName = jsxElement.node.openingElement.name;
-        
-        // Check if it's a DOM element (lowercase)
-        if (t.isJSXIdentifier(elementName) && /^[a-z]/.test(elementName.name)) {
-          findings.push({
-            type: "props_spreading_dom",
-            severity: "INFO",
-            category: "ReactPatterns",
-            file: filePath,
-            line: loc.line,
-            column: loc.column,
-            title: "Props spreading to DOM element",
-            message: "Spreading props to DOM elements can pass invalid attributes.",
-            codeSnippet: snippetForLine(lines, loc.line),
-            confidence: "low",
-            fixHint: "Explicitly list props or filter before spreading",
-          });
-        }
-      }
-    },
-    
-    // Check for missing displayName on components
-    // (useful for debugging in React DevTools)
-  });
-  
-  return findings;
-}
-
-module.exports = {
-  analyzeReactPatterns,
-  isInReactContext,
-  isInConditional,
-  isInLoop,
-};