fix: _unnamed_N variable references

Author: Brooooooklyn

crates/oxc_angular_compiler/src/pipeline/phases/variable_optimization.rs

@@ -275,7 +275,61 @@ fn collect_op_fences(op: &UpdateOp<'_>) -> Fence {
         UpdateOp::Control(ctrl) => collect_fences(&ctrl.expression),
         UpdateOp::I18nExpression(i18n) => collect_fences(&i18n.expression),
         UpdateOp::DeferWhen(defer_when) => collect_fences(&defer_when.condition),
-        UpdateOp::Statement(_) => Fence::NONE,
+        UpdateOp::Statement(stmt) => collect_fences_in_output_statement(&stmt.statement),
+        _ => Fence::NONE,
+    }
+}
+
+/// Collect fences from an OutputStatement.
+fn collect_fences_in_output_statement(stmt: &OutputStatement<'_>) -> Fence {
+    match stmt {
+        OutputStatement::Expression(expr_stmt) => {
+            collect_fences_in_output_expression(&expr_stmt.expr)
+        }
+        OutputStatement::If(if_stmt) => {
+            let mut fences = collect_fences_in_output_expression(&if_stmt.condition);
+            for s in if_stmt.true_case.iter() {
+                fences |= collect_fences_in_output_statement(s);
+            }
+            for s in if_stmt.false_case.iter() {
+                fences |= collect_fences_in_output_statement(s);
+            }
+            fences
+        }
+        OutputStatement::Return(ret) => collect_fences_in_output_expression(&ret.value),
+        _ => Fence::NONE,
+    }
+}
+
+/// Collect fences from an OutputExpression.
+fn collect_fences_in_output_expression(expr: &OutputExpression<'_>) -> Fence {
+    match expr {
+        OutputExpression::WrappedIrNode(wrapped) => collect_fences(&wrapped.node),
+        OutputExpression::BinaryOperator(bin) => {
+            collect_fences_in_output_expression(&bin.lhs)
+                | collect_fences_in_output_expression(&bin.rhs)
+        }
+        OutputExpression::Conditional(cond) => {
+            let mut fences = collect_fences_in_output_expression(&cond.condition);
+            fences |= collect_fences_in_output_expression(&cond.true_case);
+            if let Some(ref false_case) = cond.false_case {
+                fences |= collect_fences_in_output_expression(false_case);
+            }
+            fences
+        }
+        OutputExpression::InvokeFunction(call) => {
+            let mut fences = collect_fences_in_output_expression(&call.fn_expr);
+            for arg in call.args.iter() {
+                fences |= collect_fences_in_output_expression(arg);
+            }
+            fences
+        }
+        OutputExpression::Not(unary) => collect_fences_in_output_expression(&unary.condition),
+        OutputExpression::ReadProp(prop) => collect_fences_in_output_expression(&prop.receiver),
+        OutputExpression::ReadKey(keyed) => {
+            collect_fences_in_output_expression(&keyed.receiver)
+                | collect_fences_in_output_expression(&keyed.index)
+        }
         _ => Fence::NONE,
     }
 }
@@ -1224,6 +1278,9 @@ where
         UpdateOp::DeferWhen(defer_when) => {
             visit_all_expressions(&defer_when.condition, &mut visitor)
         }
+        UpdateOp::Statement(stmt) => {
+            visit_ir_expressions_in_output_statement(&stmt.statement, &mut visitor);
+        }
         _ => {}
     }
 }
@@ -1356,6 +1413,86 @@ where
     }
 }
 
+/// Visit IR expressions inside an OutputStatement.
+///
+/// Statement ops are created by `convert_variables_to_statements` when unused
+/// side-effectful variables (like StoreLet) are converted from Variable ops to
+/// standalone expression statements. The IR expressions inside these statements
+/// still contain ReadVariable references that must be counted for correct
+/// context variable inlining decisions.
+fn visit_ir_expressions_in_output_statement<F>(stmt: &OutputStatement<'_>, visitor: &mut F)
+where
+    F: FnMut(&IrExpression<'_>),
+{
+    match stmt {
+        OutputStatement::Expression(expr_stmt) => {
+            visit_ir_expressions_in_output_expression(&expr_stmt.expr, visitor);
+        }
+        OutputStatement::If(if_stmt) => {
+            visit_ir_expressions_in_output_expression(&if_stmt.condition, visitor);
+            for s in if_stmt.true_case.iter() {
+                visit_ir_expressions_in_output_statement(s, visitor);
+            }
+            for s in if_stmt.false_case.iter() {
+                visit_ir_expressions_in_output_statement(s, visitor);
+            }
+        }
+        OutputStatement::Return(ret) => {
+            visit_ir_expressions_in_output_expression(&ret.value, visitor);
+        }
+        _ => {}
+    }
+}
+
+/// Visit IR expressions inside an OutputExpression.
+///
+/// Traverses OutputExpression tree to find WrappedIrNode nodes which contain
+/// actual IR expressions that may reference variables.
+fn visit_ir_expressions_in_output_expression<F>(expr: &OutputExpression<'_>, visitor: &mut F)
+where
+    F: FnMut(&IrExpression<'_>),
+{
+    match expr {
+        OutputExpression::WrappedIrNode(wrapped) => {
+            visit_all_expressions(&wrapped.node, visitor);
+        }
+        OutputExpression::BinaryOperator(bin) => {
+            visit_ir_expressions_in_output_expression(&bin.lhs, visitor);
+            visit_ir_expressions_in_output_expression(&bin.rhs, visitor);
+        }
+        OutputExpression::Conditional(cond) => {
+            visit_ir_expressions_in_output_expression(&cond.condition, visitor);
+            visit_ir_expressions_in_output_expression(&cond.true_case, visitor);
+            if let Some(ref false_case) = cond.false_case {
+                visit_ir_expressions_in_output_expression(false_case, visitor);
+            }
+        }
+        OutputExpression::InvokeFunction(call) => {
+            visit_ir_expressions_in_output_expression(&call.fn_expr, visitor);
+            for arg in call.args.iter() {
+                visit_ir_expressions_in_output_expression(arg, visitor);
+            }
+        }
+        OutputExpression::Not(unary) => {
+            visit_ir_expressions_in_output_expression(&unary.condition, visitor);
+        }
+        OutputExpression::Instantiate(inst) => {
+            visit_ir_expressions_in_output_expression(&inst.class_expr, visitor);
+            for arg in inst.args.iter() {
+                visit_ir_expressions_in_output_expression(arg, visitor);
+            }
+        }
+        OutputExpression::ReadProp(prop) => {
+            visit_ir_expressions_in_output_expression(&prop.receiver, visitor);
+        }
+        OutputExpression::ReadKey(keyed) => {
+            visit_ir_expressions_in_output_expression(&keyed.receiver, visitor);
+            visit_ir_expressions_in_output_expression(&keyed.index, visitor);
+        }
+        _ => {}
+    }
+}
+
 /// Result of collecting variables that need to be processed.
 struct VariableActions {
     /// Variables that should be completely removed (unused, not side-effectful).

crates/oxc_angular_compiler/tests/integration_test.rs

@@ -542,6 +542,40 @@ fn test_let_used_in_ngif_child_view() {
     insta::assert_snapshot!("let_used_in_ngif_child_view", js);
 }
 
+#[test]
+fn test_let_inside_for_if_with_component_method_call() {
+    // Reproduces the _unnamed_N bug from ClickUp's stylesheet-viewer.component.html.
+    //
+    // Pattern: @for → @if → TWO @let declarations calling component methods
+    //
+    // When there are two @let expressions that both need the component context,
+    // the context variable can't be inlined (used twice) and must be extracted
+    // as a named variable like `const ctx_rN = i0.ɵɵnextContext()`.
+    //
+    // Expected (Angular):
+    //   const item_rN = i0.ɵɵnextContext().$implicit;
+    //   const ctx_rN = i0.ɵɵnextContext();
+    //   i0.ɵɵstoreLet(ctx_rN.computeA(item_rN.id));
+    //   ...
+    //   const b_rN = i0.ɵɵstoreLet(ctx_rN.computeB(item_rN.text));
+    //
+    // Actual (Oxc bug):
+    //   const item_rN = i0.ɵɵnextContext().$implicit;
+    //   i0.ɵɵstoreLet(_unnamed_N.computeA(item_rN.id));
+    //   ...
+    //   const b_rN = i0.ɵɵstoreLet(i0.ɵɵnextContext().computeB(item_rN.text));
+    let js = compile_template_to_js(
+        r#"@for (item of items; track item) { @if (showDetail()) { @let a = computeA(item.id); @let b = computeB(item.text); @if (a > 0) { <div>{{b}}</div> } } }"#,
+        "TestComponent",
+    );
+    // The output must NOT contain _unnamed_ - all variables should be properly named
+    assert!(
+        !js.contains("_unnamed_"),
+        "Generated JS contains _unnamed_ references, indicating a naming bug.\nGenerated JS:\n{js}"
+    );
+    insta::assert_snapshot!("let_inside_for_if_with_component_method_call", js);
+}
+
 // ============================================================================
 // ng-content Tests
 // ============================================================================

crates/oxc_angular_compiler/tests/snapshots/integration_test__let_inside_for_if_with_component_method_call.snap

@@ -0,0 +1,54 @@
+---
+source: crates/oxc_angular_compiler/tests/integration_test.rs
+assertion_line: 576
+expression: js
+---
+function TestComponent_For_1_Conditional_1_Conditional_4_Template(rf,ctx) {
+  if ((rf & 1)) {
+    i0.ɵɵtext(0," ");
+    i0.ɵɵelementStart(1,"div");
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(3," ");
+  }
+  if ((rf & 2)) {
+    i0.ɵɵnextContext();
+    const b_r1 = i0.ɵɵreadContextLet(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(b_r1);
+  }
+}
+function TestComponent_For_1_Conditional_1_Template(rf,ctx) {
+  if ((rf & 1)) {
+    i0.ɵɵtext(0," ");
+    i0.ɵɵtext(1," ");
+    i0.ɵɵdeclareLet(2);
+    i0.ɵɵtext(3," ");
+    i0.ɵɵconditionalCreate(4,TestComponent_For_1_Conditional_1_Conditional_4_Template,
+        4,1);
+  }
+  if ((rf & 2)) {
+    const item_r2 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext();
+    const a_r4 = ctx_r2.computeA(item_r2.id);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstoreLet(ctx_r2.computeB(item_r2.text));
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(((a_r4 > 0)? 4: -1));
+  }
+}
+function TestComponent_For_1_Template(rf,ctx) {
+  if ((rf & 1)) {
+    i0.ɵɵtext(0," ");
+    i0.ɵɵconditionalCreate(1,TestComponent_For_1_Conditional_1_Template,5,2);
+  }
+  if ((rf & 2)) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵconditional((ctx_r2.showDetail()? 1: -1));
+  }
+}
+function TestComponent_Template(rf,ctx) {
+  if ((rf & 1)) { i0.ɵɵrepeaterCreate(0,TestComponent_For_1_Template,2,1,null,null,i0.ɵɵrepeaterTrackByIdentity); }
+  if ((rf & 2)) { i0.ɵɵrepeater(ctx.items); }
+}

napi/angular-compiler/e2e/compare/package.json

@@ -10,8 +10,6 @@
     "compare:clickup": "NODE_OPTIONS='--max-old-space-size=32768' oxnode src/index.ts --preset clickup --full-file",
     "compare:clickup:fast": "NODE_OPTIONS='--max-old-space-size=16384' oxnode src/index.ts --preset clickup --full-file --ng-baseline ./ng-baseline-clickup.json",
     "compare:clickup:save-baseline": "NODE_OPTIONS='--max-old-space-size=32768' oxnode src/index.ts --preset clickup --full-file --generate-ng-baseline --save-ng-baseline ./ng-baseline-clickup.json",
-    "compare:clickup-core": "NODE_OPTIONS='--max-old-space-size=16384' oxnode src/index.ts --preset clickup-core --full-file",
-    "compare:clickup-client": "NODE_OPTIONS='--max-old-space-size=16384' oxnode src/index.ts --preset clickup-client --full-file",
     "show-diff": "oxnode src/show-diff.ts",
     "test": "vitest run"
   },