@codeyam/codeyam-cli 0.1.0-staging.c90f8c9 → 0.1.0-staging.c9dc00c

package/packages/ai/src/lib/astScopes/processExpression.js

@@ -7,6 +7,84 @@ import { isArithmeticOperator, isAssignmentOperator, isBitwiseCompoundOperator,
 import { processBindingPattern } from "./processBindings.js";
 import { extractConditionalEffectsFromTernary, findUseStateSetters, } from "./conditionalEffectsExtractor.js";
 import { detectArrayDerivedPattern } from "./arrayDerivationDetector.js";
+/**
+ * Checks if a JSX element has props that reference variables from the parent scope.
+ * This is used to detect unconditionally-rendered children that should have their
+ * execution flows merged into the parent.
+ *
+ * We want to track children where the parent controls data that affects the child's
+ * conditional rendering. Static props (like title="Dashboard") don't need tracking
+ * because they don't create variable execution flows.
+ *
+ * Examples:
+ * - <WorkoutsView workouts={workouts} /> → true (workouts is a variable)
+ * - <ItemList items={items} count={count} /> → true (items, count are variables)
+ * - <Header title="Dashboard" /> → false (static string)
+ * - <Footer /> → false (no props)
+ * - <Button onClick={handleClick} /> → false (only callback, no data props)
+ *
+ * @returns true if the component has at least one prop that references a variable
+ *          (excluding callbacks which typically start with 'on' or 'handle')
+ */
+function hasDataPropsFromParent(node, componentName) {
+    const attributes = ts.isJsxElement(node)
+        ? node.openingElement.attributes.properties
+        : node.attributes.properties;
+    const dataProps = [];
+    for (const attr of attributes) {
+        // Spread attributes always reference parent data: {...props}
+        if (ts.isJsxSpreadAttribute(attr)) {
+            const spreadText = attr.expression?.getText() || '...spread';
+            dataProps.push(`{...${spreadText}}`);
+            console.log(`[UnconditionalChild] ${componentName}: Found spread attribute {${spreadText}}`);
+            continue;
+        }
+        if (ts.isJsxAttribute(attr)) {
+            const propName = attr.name.getText();
+            // Skip callback props - they don't create data-driven execution flows
+            // Callbacks typically start with 'on' (onClick, onChange) or 'handle' (handleSubmit)
+            if (propName.startsWith('on') ||
+                propName.startsWith('handle') ||
+                propName === 'ref') {
+                console.log(`[UnconditionalChild] ${componentName}: Skipping callback prop '${propName}'`);
+                continue;
+            }
+            // Check if the prop value is a JSX expression (references a variable)
+            // vs a string literal which is static
+            if (attr.initializer) {
+                if (ts.isJsxExpression(attr.initializer)) {
+                    // JSX expression like prop={value} - this references a variable
+                    // Could be a simple identifier, property access, or more complex expression
+                    const expression = attr.initializer.expression;
+                    if (expression) {
+                        // Skip if it's just a function/arrow function (callback)
+                        if (ts.isArrowFunction(expression) ||
+                            ts.isFunctionExpression(expression)) {
+                            console.log(`[UnconditionalChild] ${componentName}: Skipping inline callback prop '${propName}'`);
+                            continue;
+                        }
+                        // This is a data prop that references parent state/props
+                        const exprText = expression.getText();
+                        dataProps.push(`${propName}={${exprText}}`);
+                        console.log(`[UnconditionalChild] ${componentName}: Found data prop '${propName}' = {${exprText}}`);
+                    }
+                }
+                else {
+                    // String literals like prop="value" are static
+                    console.log(`[UnconditionalChild] ${componentName}: Skipping static prop '${propName}'`);
+                }
+            }
+        }
+    }
+    const hasDataProps = dataProps.length > 0;
+    if (hasDataProps) {
+        console.log(`[UnconditionalChild] ${componentName}: Has ${dataProps.length} data props: [${dataProps.join(', ')}]`);
+    }
+    else {
+        console.log(`[UnconditionalChild] ${componentName}: No data props found, will NOT track`);
+    }
+    return { hasDataProps, dataProps };
+}
 /**
  * Extracts the component name from a JSX element.
  * Returns null for intrinsic elements (div, span, etc.) since we only care about
@@ -690,18 +768,40 @@ function extractConditionalsFromJsx(node, context, parentConditions = []) {
         // Recursively process nested JSX elements - Fix 32: pass parent conditions
         else if (ts.isJsxElement(child)) {
             // Check if this is a user-defined component (vs intrinsic element like div)
-            // If it's a component AND there are parent conditions, record the gating conditions
             const componentName = getComponentNameFromJsx(child);
-            if (componentName && parentConditions.length > 0) {
-                for (const condition of parentConditions) {
-                    context.addChildBoundaryGatingCondition(componentName, {
-                        path: condition.path,
-                        conditionType: 'truthiness',
-                        location: 'ternary',
-                        sourceLocation: condition.sourceLocation,
-                        controlsJsxRendering: true,
-                        isNegated: condition.isNegated,
-                    });
+            if (componentName) {
+                if (parentConditions.length > 0) {
+                    // If there are parent conditions, record them as gating conditions
+                    console.log(`[ChildBoundary] ${componentName}: Conditionally rendered with ${parentConditions.length} gating conditions`);
+                    for (const condition of parentConditions) {
+                        console.log(`[ChildBoundary] ${componentName}: Adding gating condition path='${condition.path}' isNegated=${condition.isNegated}`);
+                        context.addChildBoundaryGatingCondition(componentName, {
+                            path: condition.path,
+                            conditionType: 'truthiness',
+                            location: 'ternary',
+                            sourceLocation: condition.sourceLocation,
+                            controlsJsxRendering: true,
+                            isNegated: condition.isNegated,
+                        });
+                    }
+                }
+                else {
+                    // No parent conditions - check if it has data props for unconditional tracking
+                    console.log(`[ChildBoundary] ${componentName}: Checking for unconditional rendering with data props...`);
+                    const { hasDataProps, dataProps } = hasDataPropsFromParent(child, componentName);
+                    if (hasDataProps) {
+                        // Fix: Track unconditionally-rendered children that receive data props
+                        // These need to be tracked for flow merging even without gating conditions
+                        // Example: <WorkoutsView workouts={workouts} /> - parent controls workouts data
+                        console.log(`[ChildBoundary] ${componentName}: TRACKING as unconditionally-rendered with data props: [${dataProps.join(', ')}]`);
+                        context.addChildBoundaryGatingCondition(componentName, {
+                            path: '__unconditional__',
+                            conditionType: 'truthiness',
+                            location: 'unconditional',
+                            controlsJsxRendering: true,
+                            isNegated: false,
+                        });
+                    }
                 }
             }
             extractConditionalsFromJsx(child, context, parentConditions);
@@ -709,18 +809,38 @@ function extractConditionalsFromJsx(node, context, parentConditions = []) {
         // Handle self-closing JSX elements (e.g., <ScenarioViewer />)
         else if (ts.isJsxSelfClosingElement(child)) {
             // Check if this is a user-defined component (vs intrinsic element like div)
-            // If it's a component AND there are parent conditions, record the gating conditions
             const componentName = getComponentNameFromJsx(child);
-            if (componentName && parentConditions.length > 0) {
-                for (const condition of parentConditions) {
-                    context.addChildBoundaryGatingCondition(componentName, {
-                        path: condition.path,
-                        conditionType: 'truthiness',
-                        location: 'ternary',
-                        sourceLocation: condition.sourceLocation,
-                        controlsJsxRendering: true,
-                        isNegated: condition.isNegated,
-                    });
+            if (componentName) {
+                if (parentConditions.length > 0) {
+                    // If there are parent conditions, record them as gating conditions
+                    console.log(`[ChildBoundary] ${componentName}: Conditionally rendered (self-closing) with ${parentConditions.length} gating conditions`);
+                    for (const condition of parentConditions) {
+                        console.log(`[ChildBoundary] ${componentName}: Adding gating condition path='${condition.path}' isNegated=${condition.isNegated}`);
+                        context.addChildBoundaryGatingCondition(componentName, {
+                            path: condition.path,
+                            conditionType: 'truthiness',
+                            location: 'ternary',
+                            sourceLocation: condition.sourceLocation,
+                            controlsJsxRendering: true,
+                            isNegated: condition.isNegated,
+                        });
+                    }
+                }
+                else {
+                    // No parent conditions - check if it has data props for unconditional tracking
+                    console.log(`[ChildBoundary] ${componentName}: Checking for unconditional rendering (self-closing) with data props...`);
+                    const { hasDataProps, dataProps } = hasDataPropsFromParent(child, componentName);
+                    if (hasDataProps) {
+                        // Fix: Track unconditionally-rendered children that receive data props
+                        console.log(`[ChildBoundary] ${componentName}: TRACKING as unconditionally-rendered (self-closing) with data props: [${dataProps.join(', ')}]`);
+                        context.addChildBoundaryGatingCondition(componentName, {
+                            path: '__unconditional__',
+                            conditionType: 'truthiness',
+                            location: 'unconditional',
+                            controlsJsxRendering: true,
+                            isNegated: false,
+                        });
+                    }
                 }
             }
             // Self-closing elements have no children, so no recursion needed
@@ -1086,15 +1206,21 @@ export function processExpression({ node, context, targetPath, typeHint, }) {
             const equivalentVariables = context.getEquivalentVariables();
             const structure = context.getStructure();
             // Propagate existing equivalencies for sub-properties
-            for (const [key, value] of Object.entries(equivalentVariables)) {
+            for (const [key, rawValue] of Object.entries(equivalentVariables)) {
                 // Check if this equivalency is for a sub-property of the identifier
                 // e.g., completeDataStructure['Function Arguments'] or completeDataStructure.foo
                 if (key.startsWith(nodePathStr + '.') ||
                     key.startsWith(nodePathStr + '[')) {
                     const subPath = key.substring(nodePathStr.length);
                     const newTargetPath = StructuredPath.fromBase(targetPath.toString() + subPath);
-                    const valuePath = StructuredPath.fromBase(value);
-                    context.addEquivalence(newTargetPath, valuePath);
+                    // Handle both string and string[] values
+                    const values = Array.isArray(rawValue) ? rawValue : [rawValue];
+                    for (const value of values) {
+                        if (typeof value === 'string') {
+                            const valuePath = StructuredPath.fromBase(value);
+                            context.addEquivalence(newTargetPath, valuePath);
+                        }
+                    }
                 }
             }
             // Propagate existing structure entries for sub-properties
@@ -1436,20 +1562,38 @@ export function processExpression({ node, context, targetPath, typeHint, }) {
                     //   - items[] (from the find result)
                     //   - null (from the fallback)
                     if (targetPath) {
-                        // Process left side recursively to capture its full equivalency chain
+                        // Get paths for both sides
+                        const leftPath = StructuredPath.fromNode(unwrappedNode.left, context.sourceFile);
+                        const rightPath = StructuredPath.fromNode(unwrappedNode.right, context.sourceFile);
+                        // Collect all valid paths
+                        const allPaths = [];
+                        if (leftPath)
+                            allPaths.push(leftPath);
+                        if (rightPath)
+                            allPaths.push(rightPath);
+                        // Add multiple equivalencies to track both sources
+                        if (allPaths.length > 0) {
+                            context.addMultipleEquivalencies(targetPath, allPaths);
+                        }
+                        // Process both sides to capture their internal structures
                         processExpression({
                             node: unwrappedNode.left,
                             context,
-                            targetPath,
                         });
-                        // Process right side recursively for completeness
                         processExpression({
                             node: unwrappedNode.right,
                             context,
-                            targetPath,
                         });
-                        // Set resultPath to left side for type inference
-                        resultPath = StructuredPath.fromNode(unwrappedNode.left, context.sourceFile);
+                        // Register the type for the target path
+                        const leftType = context.inferTypeFromNode(unwrappedNode.left);
+                        const rightType = context.inferTypeFromNode(unwrappedNode.right);
+                        const orResultType = isDefinedType(leftType)
+                            ? leftType
+                            : rightType || 'unknown';
+                        context.addType(targetPath, orResultType);
+                        // Return early - we've already handled equivalencies with addMultipleEquivalencies
+                        // Don't fall through to the generic addEquivalence call below
+                        return true;
                     }
                     // Note: When there's no targetPath, we don't recursively process
                     // because || is often used in boolean contexts where the full expression matters
@@ -1529,18 +1673,44 @@ export function processExpression({ node, context, targetPath, typeHint, }) {
                 const semantics = semanticsList[0];
                 // Get the source expression path (e.g., the object for obj.method())
                 const sourceExpr = unwrappedNode.expression.expression;
-                const sourcePath = StructuredPath.fromNode(sourceExpr, context.sourceFile);
-                if (sourcePath) {
-                    // For array-specific semantics (like push), verify the source is actually an array
-                    // This prevents router.push() from being mistakenly treated as Array.push()
-                    const isArraySemantics = semantics instanceof ArrayPushSemantics;
-                    const shouldApply = !isArraySemantics ||
-                        isLikelyArrayType(sourceExpr, context.typeChecker);
-                    if (shouldApply) {
-                        // Apply method semantics
-                        semantics.addEquivalences(callPath, sourcePath, context);
-                        returnType = semantics.getReturnType();
-                        handledBySemantics = true;
+                const unwrappedSourceExpr = unwrapExpression(sourceExpr);
+                // When the source is a ternary expression like (cond ? arr : arr.slice()),
+                // apply method semantics to BOTH branches directly. The ternary itself isn't
+                // a variable - it's just a choice between two paths that both flow to the result.
+                if (ts.isConditionalExpression(unwrappedSourceExpr)) {
+                    const branches = [
+                        unwrappedSourceExpr.whenTrue,
+                        unwrappedSourceExpr.whenFalse,
+                    ];
+                    for (const branch of branches) {
+                        const branchPath = StructuredPath.fromNode(branch, context.sourceFile);
+                        if (branchPath) {
+                            const isArraySemantics = semantics instanceof ArrayPushSemantics;
+                            const shouldApply = !isArraySemantics ||
+                                isLikelyArrayType(branch, context.typeChecker);
+                            if (shouldApply) {
+                                semantics.addEquivalences(callPath, branchPath, context);
+                                returnType = semantics.getReturnType();
+                                handledBySemantics = true;
+                            }
+                        }
+                    }
+                }
+                else {
+                    // Regular (non-ternary) source expression
+                    const sourcePath = StructuredPath.fromNode(sourceExpr, context.sourceFile);
+                    if (sourcePath) {
+                        // For array-specific semantics (like push), verify the source is actually an array
+                        // This prevents router.push() from being mistakenly treated as Array.push()
+                        const isArraySemantics = semantics instanceof ArrayPushSemantics;
+                        const shouldApply = !isArraySemantics ||
+                            isLikelyArrayType(sourceExpr, context.typeChecker);
+                        if (shouldApply) {
+                            // Apply method semantics
+                            semantics.addEquivalences(callPath, sourcePath, context);
+                            returnType = semantics.getReturnType();
+                            handledBySemantics = true;
+                        }
                     }
                 }
             }
@@ -1969,6 +2139,32 @@ export function processExpression({ node, context, targetPath, typeHint, }) {
     }
     // Handle Arrow Functions: (p) => p.prop, (a, b) => { ... }
     if (ts.isArrowFunction(unwrappedNode)) {
+        // If this arrow function is a child boundary (e.g., a .map() callback),
+        // don't process its parameters here - they will be processed when the
+        // child scope is analyzed separately. This prevents parameter variables
+        // from leaking into the parent scope's equivalencies.
+        // Check if this arrow function is a child boundary (i.e., should be processed
+        // as a separate child scope, not here in the parent scope).
+        //
+        // We use two checks because childBoundary positions can be unreliable:
+        // 1. Position-based check (standard isChildBoundary)
+        // 2. Text-based check: if the arrow function text doesn't appear in the
+        //    statement text, it was replaced with a cyScope placeholder
+        const isChildBoundary = context.isChildBoundary(unwrappedNode);
+        // Text-based child scope detection for when positions are unreliable
+        const arrowFnText = unwrappedNode.getText(context.sourceFile);
+        const firstLine = arrowFnText.split('\n')[0].trim();
+        const searchText = firstLine.substring(0, Math.min(20, firstLine.length));
+        const isInStatementText = context.statementInfo.text.includes(searchText);
+        const isChildScope = !isInStatementText && arrowFnText.length > 10;
+        if (isChildBoundary || isChildScope) {
+            // The method semantics (e.g., ArrayMapSemantics) have already established
+            // the necessary equivalences between the child scope placeholder and array elements
+            if (targetPath) {
+                context.addType(targetPath, 'function');
+            }
+            return true;
+        }
         // Create a path for the function
         const functionPath = StructuredPath.empty();
         // Process parameters