@vibecheckai/cli 3.3.0 → 3.5.0

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

@@ -0,0 +1,457 @@
+/**
+ * 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,
+};