make e2e stable

Author: Brooooooklyn

crates/oxc_angular_compiler/src/pipeline/ingest.rs

@@ -15,6 +15,7 @@
 //! Ported from Angular's `template/pipeline/src/ingest.ts`.
 
 use oxc_allocator::{Allocator, Box, Vec};
+use oxc_diagnostics::OxcDiagnostic;
 use oxc_span::Atom;
 
 use super::compilation::{
@@ -23,9 +24,10 @@ use super::compilation::{
 };
 use crate::ast::expression::AngularExpression;
 use crate::ast::r3::{
-    I18nMeta, I18nNode, R3BoundAttribute, R3BoundEvent, R3BoundText, R3Content, R3DeferredBlock,
-    R3Element, R3ForLoopBlock, R3IfBlock, R3LetDeclaration, R3Node, R3SwitchBlock, R3Template,
-    R3Text, R3TextAttribute, R3Variable, SecurityContext,
+    I18nIcuPlaceholder, I18nMeta, I18nNode, R3BoundAttribute, R3BoundEvent, R3BoundText, R3Content,
+    R3DeferredBlock, R3Element, R3ForLoopBlock, R3Icu, R3IcuPlaceholder, R3IfBlock,
+    R3LetDeclaration, R3Node, R3SwitchBlock, R3Template, R3Text, R3TextAttribute, R3Variable,
+    SecurityContext,
 };
 use crate::ir::enums::{
     BindingKind, DeferOpModifierKind, DeferTriggerKind, Namespace, SemanticVariableKind,
@@ -38,9 +40,9 @@ use crate::ir::expression::{
 use crate::ir::ops::{
     BindingOp, ConditionalBranchCreateOp, ConditionalOp, ConditionalUpdateOp, ControlCreateOp,
     CreateOp, CreateOpBase, DeclareLetOp, DeferOnOp, DeferOp, DeferWhenOp, ElementEndOp, ElementOp,
-    ElementStartOp, ExtractedAttributeOp, I18nPlaceholder, InterpolateTextOp, ListenerOp, LocalRef,
-    ProjectionOp, RepeaterCreateOp, RepeaterOp, RepeaterVarNames, SlotId, StoreLetOp, TemplateOp,
-    TextOp, UpdateOp, UpdateOpBase, VariableOp, XrefId,
+    ElementStartOp, ExtractedAttributeOp, I18nPlaceholder, IcuEndOp, IcuStartOp, InterpolateTextOp,
+    ListenerOp, LocalRef, ProjectionOp, RepeaterCreateOp, RepeaterOp, RepeaterVarNames, SlotId,
+    StoreLetOp, TemplateOp, TextOp, UpdateOp, UpdateOpBase, VariableOp, XrefId,
 };
 use crate::output::ast::OutputExpression;
 use crate::pipeline::compilation::{AliasVariable, ContextVariable};
@@ -395,8 +397,10 @@ pub fn ingest_component_with_options<'a>(
 /// Consumes the node, taking ownership of expressions.
 fn ingest_node<'a>(job: &mut ComponentCompilationJob<'a>, view_xref: XrefId, node: R3Node<'a>) {
     match node {
-        R3Node::Text(text) => ingest_text(job, view_xref, text.unbox()),
-        R3Node::BoundText(bound_text) => ingest_bound_text(job, view_xref, bound_text.unbox()),
+        R3Node::Text(text) => ingest_text(job, view_xref, text.unbox(), None),
+        R3Node::BoundText(bound_text) => {
+            ingest_bound_text(job, view_xref, bound_text.unbox(), None)
+        }
         R3Node::Element(element) => ingest_element(job, view_xref, element.unbox()),
         R3Node::Template(template) => ingest_template(job, view_xref, template.unbox()),
         R3Node::Content(content) => ingest_content(job, view_xref, content.unbox()),
@@ -414,9 +418,7 @@ fn ingest_node<'a>(job: &mut ComponentCompilationJob<'a>, view_xref: XrefId, nod
         R3Node::Comment(_) => {
             // Comments are not ingested into IR
         }
-        R3Node::Icu(_) => {
-            // ICU expressions are handled separately
-        }
+        R3Node::Icu(icu) => ingest_icu(job, view_xref, icu.unbox()),
         R3Node::UnknownBlock(_) => {
             // Unknown blocks are skipped with a warning
         }
@@ -445,16 +447,24 @@ fn ingest_node<'a>(job: &mut ComponentCompilationJob<'a>, view_xref: XrefId, nod
 }
 
 /// Ingests a static text node.
-fn ingest_text<'a>(job: &mut ComponentCompilationJob<'a>, view_xref: XrefId, text: R3Text<'a>) {
+///
+/// `icu_placeholder` is provided when this text is part of an ICU expression,
+/// indicating the placeholder name for this text within the ICU message.
+fn ingest_text<'a>(
+    job: &mut ComponentCompilationJob<'a>,
+    view_xref: XrefId,
+    text: R3Text<'a>,
+    icu_placeholder: Option<Atom<'a>>,
+) {
     let xref = job.allocate_xref_id();
 
     let op = CreateOp::Text(TextOp {
         base: CreateOpBase { source_span: Some(text.source_span), ..Default::default() },
         xref,
         slot: None,
-        initial_value: text.value, // Move instead of clone
+        initial_value: text.value,
         i18n_placeholder: None,
-        icu_placeholder: None,
+        icu_placeholder,
     });
 
     if let Some(view) = job.view_mut(view_xref) {
@@ -463,10 +473,14 @@ fn ingest_text<'a>(job: &mut ComponentCompilationJob<'a>, view_xref: XrefId, tex
 }
 
 /// Ingests a bound text node (with interpolation).
+///
+/// `icu_placeholder` is provided when this text is part of an ICU expression,
+/// indicating the placeholder name for this text within the ICU message.
 fn ingest_bound_text<'a>(
     job: &mut ComponentCompilationJob<'a>,
     view_xref: XrefId,
     bound_text: R3BoundText<'a>,
+    icu_placeholder: Option<Atom<'a>>,
 ) {
     let xref = job.allocate_xref_id();
 
@@ -477,7 +491,7 @@ fn ingest_bound_text<'a>(
         slot: None,
         initial_value: Atom::from(""),
         i18n_placeholder: None,
-        icu_placeholder: None,
+        icu_placeholder,
     });
 
     if let Some(view) = job.view_mut(view_xref) {
@@ -501,6 +515,86 @@ fn ingest_bound_text<'a>(
     }
 }
 
+/// Checks if the i18n metadata is a Message containing a single IcuPlaceholder.
+/// Returns the ICU placeholder if so, None otherwise.
+fn get_single_icu_placeholder<'a, 'b>(
+    meta: &'b Option<I18nMeta<'a>>,
+) -> Option<&'b I18nIcuPlaceholder<'a>> {
+    if let Some(I18nMeta::Message(message)) = meta {
+        if message.nodes.len() == 1 {
+            if let I18nNode::IcuPlaceholder(icu_placeholder) = &message.nodes[0] {
+                return Some(icu_placeholder);
+            }
+        }
+    }
+    None
+}
+
+/// Ingests an ICU expression node (plural, select, selectordinal).
+///
+/// Creates IcuStartOp and IcuEndOp to bracket the ICU expression,
+/// and ingests all vars and placeholders within.
+///
+/// Ported from Angular's `ingestIcu` in `template/pipeline/src/ingest.ts`.
+fn ingest_icu<'a>(job: &mut ComponentCompilationJob<'a>, view_xref: XrefId, icu: R3Icu<'a>) {
+    // Check if the i18n metadata is a Message with a single IcuPlaceholder
+    // TypeScript: if (icu.i18n instanceof i18n.Message && isSingleI18nIcu(icu.i18n))
+    let icu_placeholder_name = match get_single_icu_placeholder(&icu.i18n) {
+        Some(icu_placeholder) => icu_placeholder.name.clone(),
+        None => {
+            // TypeScript throws: Error(`Unhandled i18n metadata type for ICU: ${icu.i18n?.constructor.name}`)
+            // We report as a diagnostic and return early
+            job.diagnostics.push(OxcDiagnostic::error(
+                "Unhandled i18n metadata type for ICU: expected Message with single IcuPlaceholder",
+            ).with_label(icu.source_span));
+            return;
+        }
+    };
+
+    let xref = job.allocate_xref_id();
+
+    // Create IcuStartOp
+    let start_op = CreateOp::IcuStart(IcuStartOp {
+        base: CreateOpBase { source_span: Some(icu.source_span), ..Default::default() },
+        xref,
+        context: None, // Will be set by create_i18n_contexts phase
+        message: None, // Will be set by phases
+        icu_placeholder: Some(icu_placeholder_name),
+    });
+
+    if let Some(view) = job.view_mut(view_xref) {
+        view.create.push(start_op);
+    }
+
+    // Process vars (bound text expressions)
+    // In Rust, vars is typed as HashMap<Atom, R3BoundText> so no runtime check needed
+    for (placeholder_name, bound_text) in icu.vars {
+        ingest_bound_text(job, view_xref, bound_text, Some(placeholder_name));
+    }
+
+    // Process placeholders (text or bound text)
+    for (placeholder_name, placeholder) in icu.placeholders {
+        match placeholder {
+            R3IcuPlaceholder::Text(text) => {
+                ingest_text(job, view_xref, text, Some(placeholder_name));
+            }
+            R3IcuPlaceholder::BoundText(bound_text) => {
+                ingest_bound_text(job, view_xref, bound_text, Some(placeholder_name));
+            }
+        }
+    }
+
+    // Create IcuEndOp
+    let end_op = CreateOp::IcuEnd(IcuEndOp {
+        base: CreateOpBase { source_span: Some(icu.source_span), ..Default::default() },
+        xref,
+    });
+
+    if let Some(view) = job.view_mut(view_xref) {
+        view.create.push(end_op);
+    }
+}
+
 /// Splits a namespaced name like `:svg:path` into (namespace_key, element_name).
 ///
 /// Ported from Angular's `splitNsName` in `src/ml_parser/tags.ts`.
@@ -1581,8 +1675,20 @@ fn ingest_defer_block<'a>(
         DeferMetadata::PerBlock { blocks } => {
             // In PerBlock mode, look up the resolver from the blocks map using source_span
             // Use remove() to take ownership (move) since we can't clone OutputExpression
-            // If not found, the block has no lazy dependencies (own_resolver_fn is null)
-            blocks.remove(&defer_block.source_span).flatten()
+            // TypeScript throws if the block is not in the map at all
+            match blocks.remove(&defer_block.source_span) {
+                Some(value) => {
+                    // Key exists - value may be None (no lazy deps) or Some (has deps)
+                    value
+                }
+                None => {
+                    // TypeScript: throw Error(`AssertionError: unable to find a dependency function for this deferred block`)
+                    job.diagnostics.push(OxcDiagnostic::error(
+                        "AssertionError: unable to find a dependency function for this deferred block",
+                    ).with_label(defer_block.source_span));
+                    None
+                }
+            }
         }
         DeferMetadata::PerComponent { .. } => {
             // In PerComponent mode, own_resolver_fn is null
@@ -1591,10 +1697,10 @@ fn ingest_defer_block<'a>(
         }
     };
 
-    // For resolver_fn, take ownership from all_deferrable_deps_fn
-    // Note: In PerComponent mode, all defer blocks share this, so we take it only once
-    // and leave None for subsequent blocks (they'll get resolver_fn set by resolve_defer_deps_fns)
-    let resolver_fn = job.all_deferrable_deps_fn.take();
+    // In PerComponent mode, all defer blocks share the same allDeferrableDepsFn reference.
+    // We clone it so each defer block gets its own copy (matching TypeScript's behavior
+    // where ReadVarExpr is shared by reference).
+    let resolver_fn = job.all_deferrable_deps_fn.as_ref().map(|expr| expr.clone_in(job.allocator));
 
     let op = CreateOp::Defer(DeferOp {
         base: CreateOpBase { source_span: Some(defer_block.source_span), ..Default::default() },

napi/angular-compiler/.gitignore

@@ -1,2 +1,4 @@
 /dist
 /playground/dist
+/test-results
+/playwright-report

napi/angular-compiler/e2e/app/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Angular E2E Fixture</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
+  <body>
+    <app-root></app-root>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

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

@@ -0,0 +1,23 @@
+{
+  "name": "oxc-angular-e2e-fixture",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite"
+  },
+  "dependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/compiler": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/platform-browser": "^21.0.0",
+    "rxjs": "^7.8.2",
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "@angular/compiler-cli": "^21.0.0",
+    "@oxc/vite-plugin-angular": "workspace:^",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.0"
+  }
+}

napi/angular-compiler/e2e/app/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component, signal } from "@angular/core";
+
+@Component({
+  selector: "app-root",
+  templateUrl: "./app.html",
+  styleUrl: "./app.css",
+})
+export class App {
+  protected readonly title = signal("E2E_TITLE");
+}

napi/angular-compiler/e2e/app/src/app/app.css

@@ -0,0 +1,18 @@
+:host {
+  --primary-color: blue;
+  --text-color: black;
+  display: block;
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  color: var(--primary-color);
+  font-size: 2rem;
+  margin: 0 0 10px 0;
+}
+
+.description {
+  color: var(--text-color);
+  margin: 0;
+}

napi/angular-compiler/e2e/app/src/app/app.html

@@ -0,0 +1,4 @@
+<main>
+  <h1>{{ title() }}</h1>
+  <p class="description">E2E test fixture for HMR testing.</p>
+</main>

napi/angular-compiler/e2e/app/src/main.ts

@@ -0,0 +1,6 @@
+import "@angular/compiler";
+
+import { bootstrapApplication } from "@angular/platform-browser";
+import { App } from "./app/app.component";
+
+bootstrapApplication(App).catch((err) => console.error(err));

napi/angular-compiler/e2e/app/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve",
+    "moduleResolution": "bundler"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "include": ["src/**/*.ts"]
+}

napi/angular-compiler/e2e/app/vite.config.ts

@@ -0,0 +1,18 @@
+import path from "node:path";
+import { defineConfig } from "vite";
+import { fileURLToPath } from "node:url";
+
+import { angular } from "@oxc/vite-plugin-angular/vite-plugin";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const tsconfig = path.resolve(__dirname, "./tsconfig.json");
+
+export default defineConfig({
+  plugins: [
+    angular({
+      tsconfig,
+      liveReload: true,
+    }),
+  ],
+});