fix(angular): resolve e2e comparison mismatches

Fix multiple compiler output divergences from Angular TS:

- fix(variable_optimization): handle Oxc's split handler_expression architecture
  in optimizeSaveRestoreView, removing unnecessary restoreView/resetView wrapping
- fix(variable_optimization): reorder optimization steps to match Angular TS
  (arrow functions and listener handlers before create/update ops)
- fix(variable_optimization): include Animation handlers in save/restore optimization
- fix(emitter): emit non-ASCII characters as raw UTF-8 instead of \uNNNN escapes
- fix(ordering): add OpKind::Control to update op ordering phase (priority 8, last)
- fix(reify): add missing name string literal as second argument to ɵɵcontrol()
- fix(emit): emit host binding pool constants (pure functions) alongside template
  declarations, matching Angular TS's shared ConstantPool behavior
- fix(entities): use greedy &-to-; matching in decode_entities_in_string to
  replicate Angular TS's /&([^;]+);/g regex behavior

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Brooooooklyn

crates/oxc_angular_compiler/src/component/transform.rs

@@ -1569,10 +1569,20 @@ fn compile_component_full<'a>(
         compile_component_host_bindings(allocator, metadata, template_pool_index);
 
     // Extract the result and update pool index if host bindings were compiled
-    let (host_binding_result, host_binding_next_pool_index) = match host_binding_output {
-        Some(output) => (Some(output.result), Some(output.next_pool_index)),
-        None => (None, None),
-    };
+    let (host_binding_result, host_binding_next_pool_index, host_binding_declarations) =
+        match host_binding_output {
+            Some(output) => {
+                let declarations = output.result.declarations;
+                let result = HostBindingCompilationResult {
+                    host_binding_fn: output.result.host_binding_fn,
+                    host_attrs: output.result.host_attrs,
+                    host_vars: output.result.host_vars,
+                    declarations: OxcVec::new_in(allocator),
+                };
+                (Some(result), Some(output.next_pool_index), declarations)
+            }
+            None => (None, None, OxcVec::new_in(allocator)),
+        };
 
     // Stage 7: Generate ɵcmp/ɵfac definitions
     // The namespace registry is shared across all components in the file to ensure
@@ -1599,6 +1609,11 @@ fn compile_component_full<'a>(
         declarations_js.push_str(&emitter.emit_statement(decl));
         declarations_js.push('\n');
     }
+    // Emit host binding declarations (pooled constants like pure functions)
+    for decl in host_binding_declarations.iter() {
+        declarations_js.push_str(&emitter.emit_statement(decl));
+        declarations_js.push('\n');
+    }
 
     // For HMR, we emit the template separately using compile_template_to_js
     // The ɵcmp already contains the template function inline

crates/oxc_angular_compiler/src/output/emitter.rs

@@ -1234,11 +1234,10 @@ fn is_nullish_coalesce(expr: &OutputExpression<'_>) -> bool {
 /// Escape a string for JavaScript output.
 ///
 /// Uses double quotes to match Angular's output style.
-/// Escapes `"`, `\`, `\n`, `\r`, `$` (when requested), ASCII control characters,
-/// and all non-ASCII characters (code point > 0x7E) as `\uNNNN` sequences.
-/// Characters above the BMP (U+10000+) are encoded as UTF-16 surrogate pairs
-/// (`\uXXXX\uXXXX`). This matches TypeScript's emitter behavior, which escapes
-/// non-ASCII characters in string literals.
+/// Escapes `"`, `\`, `\n`, `\r`, `$` (when requested), and ASCII control characters
+/// as `\uNNNN` sequences. Non-ASCII characters (code point > 0x7E) are emitted as
+/// raw UTF-8 to match Angular's TypeScript emitter behavior (see `escapeIdentifier`
+/// in `abstract_emitter.ts`), which only escapes `'`, `\`, `\n`, `\r`, and `$`.
 pub(crate) fn escape_string(input: &str, escape_dollar: bool) -> String {
     let mut result = String::with_capacity(input.len() + 2);
     result.push('"');
@@ -1251,18 +1250,14 @@ pub(crate) fn escape_string(input: &str, escape_dollar: bool) -> String {
             '$' if escape_dollar => result.push_str("\\$"),
             // ASCII printable characters (0x20-0x7E) are emitted literally
             c if (' '..='\x7E').contains(&c) => result.push(c),
-            // Everything else (ASCII control chars, non-ASCII) is escaped as \uNNNN.
-            // Characters above the BMP are encoded as UTF-16 surrogate pairs.
+            // DEL (0x7F) is an ASCII control character and must be escaped
+            '\x7F' => push_unicode_escape(&mut result, 0x7F),
+            // Non-ASCII characters (> 0x7F) are emitted as raw UTF-8 to match
+            // Angular's TypeScript emitter, which does not escape them.
+            c if (c as u32) > 0x7F => result.push(c),
+            // ASCII control characters (0x00-0x1F) are escaped as \uNNNN.
             c => {
-                let code = c as u32;
-                if code <= 0xFFFF {
-                    push_unicode_escape(&mut result, code);
-                } else {
-                    let hi = 0xD800 + ((code - 0x10000) >> 10);
-                    let lo = 0xDC00 + ((code - 0x10000) & 0x3FF);
-                    push_unicode_escape(&mut result, hi);
-                    push_unicode_escape(&mut result, lo);
-                }
+                push_unicode_escape(&mut result, c as u32);
             }
         }
     }
@@ -1514,35 +1509,35 @@ mod tests {
 
     #[test]
     fn test_escape_string_unicode_literals() {
-        // Non-ASCII characters should be escaped as \uNNNN to match
-        // TypeScript's emitter behavior.
+        // Non-ASCII characters should be emitted as raw UTF-8 to match
+        // Angular's TypeScript emitter behavior (escapeIdentifier in abstract_emitter.ts).
 
-        // &times; (multiplication sign U+00D7) -> \u00D7
-        assert_eq!(escape_string("\u{00D7}", false), "\"\\u00D7\"");
+        // &times; (multiplication sign U+00D7) -> raw UTF-8
+        assert_eq!(escape_string("\u{00D7}", false), "\"\u{00D7}\"");
 
-        // &nbsp; (non-breaking space U+00A0) -> \u00A0
-        assert_eq!(escape_string("\u{00A0}", false), "\"\\u00A0\"");
+        // &nbsp; (non-breaking space U+00A0) -> raw UTF-8
+        assert_eq!(escape_string("\u{00A0}", false), "\"\u{00A0}\"");
 
         // Mixed ASCII and non-ASCII
-        assert_eq!(escape_string("a\u{00D7}b", false), "\"a\\u00D7b\"");
+        assert_eq!(escape_string("a\u{00D7}b", false), "\"a\u{00D7}b\"");
 
         // Multiple non-ASCII characters
-        assert_eq!(escape_string("\u{00D7}\u{00A0}", false), "\"\\u00D7\\u00A0\"");
+        assert_eq!(escape_string("\u{00D7}\u{00A0}", false), "\"\u{00D7}\u{00A0}\"");
 
-        // Characters outside BMP (emoji) -> surrogate pair
-        assert_eq!(escape_string("\u{1F600}", false), "\"\\uD83D\\uDE00\"");
+        // Characters outside BMP (emoji) -> raw UTF-8
+        assert_eq!(escape_string("\u{1F600}", false), "\"\u{1F600}\"");
 
-        // Common HTML entities -> all escaped as \uNNNN
-        assert_eq!(escape_string("\u{00A9}", false), "\"\\u00A9\""); // &copy; ©
-        assert_eq!(escape_string("\u{00AE}", false), "\"\\u00AE\""); // &reg; ®
-        assert_eq!(escape_string("\u{2014}", false), "\"\\u2014\""); // &mdash; —
-        assert_eq!(escape_string("\u{2013}", false), "\"\\u2013\""); // &ndash; –
+        // Common HTML entities -> all emitted as raw UTF-8
+        assert_eq!(escape_string("\u{00A9}", false), "\"\u{00A9}\""); // &copy; ©
+        assert_eq!(escape_string("\u{00AE}", false), "\"\u{00AE}\""); // &reg; ®
+        assert_eq!(escape_string("\u{2014}", false), "\"\u{2014}\""); // &mdash; —
+        assert_eq!(escape_string("\u{2013}", false), "\"\u{2013}\""); // &ndash; –
 
         // Greek letter alpha
-        assert_eq!(escape_string("\u{03B1}", false), "\"\\u03B1\""); // α
+        assert_eq!(escape_string("\u{03B1}", false), "\"\u{03B1}\""); // α
 
         // Accented Latin letter
-        assert_eq!(escape_string("\u{00E9}", false), "\"\\u00E9\""); // é
+        assert_eq!(escape_string("\u{00E9}", false), "\"\u{00E9}\""); // é
     }
 
     #[test]
@@ -1561,34 +1556,33 @@ mod tests {
     }
 
     #[test]
-    fn test_escape_string_non_ascii_as_unicode_escapes() {
-        // Non-ASCII characters should be escaped as \uNNNN to match
-        // TypeScript's emitter behavior (which escapes non-ASCII in string literals).
+    fn test_escape_string_non_ascii_as_raw_utf8() {
+        // Non-ASCII characters should be emitted as raw UTF-8 to match
+        // Angular's TypeScript emitter behavior (escapeIdentifier in abstract_emitter.ts).
 
         // Non-breaking space U+00A0
-        assert_eq!(escape_string("\u{00A0}", false), "\"\\u00A0\"");
+        assert_eq!(escape_string("\u{00A0}", false), "\"\u{00A0}\"");
 
         // En dash U+2013
-        assert_eq!(escape_string("\u{2013}", false), "\"\\u2013\"");
+        assert_eq!(escape_string("\u{2013}", false), "\"\u{2013}\"");
 
         // Trademark U+2122
-        assert_eq!(escape_string("\u{2122}", false), "\"\\u2122\"");
+        assert_eq!(escape_string("\u{2122}", false), "\"\u{2122}\"");
 
         // Infinity U+221E
-        assert_eq!(escape_string("\u{221E}", false), "\"\\u221E\"");
+        assert_eq!(escape_string("\u{221E}", false), "\"\u{221E}\"");
 
         // Mixed ASCII and non-ASCII
-        assert_eq!(escape_string("a\u{00D7}b", false), "\"a\\u00D7b\"");
+        assert_eq!(escape_string("a\u{00D7}b", false), "\"a\u{00D7}b\"");
 
         // Multiple non-ASCII characters
-        assert_eq!(escape_string("\u{00D7}\u{00A0}", false), "\"\\u00D7\\u00A0\"");
+        assert_eq!(escape_string("\u{00D7}\u{00A0}", false), "\"\u{00D7}\u{00A0}\"");
 
-        // Characters above BMP should use surrogate pairs
-        // U+1F600 (grinning face) = surrogate pair D83D DE00
-        assert_eq!(escape_string("\u{1F600}", false), "\"\\uD83D\\uDE00\"");
+        // Characters above BMP (emoji) -> raw UTF-8
+        assert_eq!(escape_string("\u{1F600}", false), "\"\u{1F600}\"");
 
-        // U+10000 (first supplementary char) = surrogate pair D800 DC00
-        assert_eq!(escape_string("\u{10000}", false), "\"\\uD800\\uDC00\"");
+        // U+10000 (first supplementary char) -> raw UTF-8
+        assert_eq!(escape_string("\u{10000}", false), "\"\u{10000}\"");
 
         // ASCII printable chars (0x20-0x7E) should remain literal
         assert_eq!(escape_string(" ~", false), "\" ~\"");

crates/oxc_angular_compiler/src/parser/html/entities.rs

@@ -50,42 +50,55 @@ pub fn decode_entity(entity: &str) -> Option<String> {
 /// For backward compatibility (matching Angular's behavior), this decodes
 /// HTML entities that appear in interpolation expressions.
 ///
-/// Pattern: `&entity;` where entity can be:
-/// - Named: `amp`, `lt`, `gt`, `quot`, etc.
-/// - Decimal: `#123`
-/// - Hex: `#x7B` or `#X7B`
+/// Uses greedy matching to replicate Angular TS's `/&([^;]+);/g` regex behavior
+/// in `parser.ts` line 365. The regex matches from `&` to the first `;` with
+/// ANY characters in between. When decoding fails, the regex cursor advances
+/// past the `;`, which means earlier `&` characters can "consume" later `;`
+/// characters and prevent entity decoding.
+///
+/// Example: `foo && bar ? '&infin;' : baz` — the regex matches from the first
+/// `&` of `&&` all the way to the `;` in `&infin;`, creating one invalid match.
+/// The entity is not decoded because the entire span is consumed.
 pub fn decode_entities_in_string(s: &str) -> String {
     let mut result = String::with_capacity(s.len());
     let mut chars = s.char_indices().peekable();
 
     while let Some((i, ch)) = chars.next() {
         if ch == '&' {
-            // Look for entity pattern: &...;
-            let mut entity_end = None;
+            // Greedy match: find the first ';' (mimics /&([^;]+);/g)
             let remaining = &s[i..];
+            let mut entity_end_byte = None;
+            let mut chars_after_ampersand = 0u32;
 
-            // Find the semicolon
+            // Skip the '&' at j=0, find the first ';'
             for (j, c) in remaining.char_indices() {
-                if c == ';' {
-                    entity_end = Some(j);
-                    break;
-                }
-                // Entities shouldn't be too long, and should contain valid chars
-                if j > 32 || (!c.is_ascii_alphanumeric() && c != '#' && c != '&') {
-                    break;
+                if j > 0 {
+                    chars_after_ampersand += 1;
+                    if c == ';' {
+                        entity_end_byte = Some(j);
+                        break;
+                    }
                 }
             }
 
-            if let Some(end) = entity_end {
+            if let Some(end) = entity_end_byte {
                 let entity = &remaining[..=end];
                 if let Some(decoded) = decode_entity(entity) {
                     result.push_str(&decoded);
-                    // Skip past the entity in the input
-                    for _ in 0..end {
+                    // Skip past the entity in the outer iterator.
+                    // Use char count (not byte offset) since .next() advances by character.
+                    for _ in 0..chars_after_ampersand {
                         chars.next();
                     }
                     continue;
                 }
+                // Failed to decode: push the full matched text and advance past ';'
+                // This matches regex behavior where the cursor advances past the match
+                result.push_str(entity);
+                for _ in 0..chars_after_ampersand {
+                    chars.next();
+                }
+                continue;
             }
         }
         result.push(ch);
@@ -2277,4 +2290,64 @@ mod tests {
         // "Afr" maps to Mathematical Fraktur A (U+1D504)
         assert!(entities.contains_key("Afr"));
     }
+
+    #[test]
+    fn test_decode_entities_in_string_basic() {
+        assert_eq!(decode_entities_in_string("hello &amp; world"), "hello & world");
+        assert_eq!(decode_entities_in_string("&lt;div&gt;"), "<div>");
+        assert_eq!(decode_entities_in_string("no entities here"), "no entities here");
+    }
+
+    #[test]
+    fn test_decode_entities_greedy_matching() {
+        // Angular TS regex /&([^;]+);/g greedily matches from && to &infin;'s semicolon,
+        // consuming the entire span as one failed match — so &infin; is NOT decoded.
+        let input = "foo && bar ? '&infin;' : baz";
+        assert_eq!(
+            decode_entities_in_string(input),
+            "foo && bar ? '&infin;' : baz",
+            "greedy match from && should prevent &infin; decoding"
+        );
+    }
+
+    #[test]
+    fn test_decode_entities_multibyte_between_ampersand_and_semicolon() {
+        // When multi-byte characters appear between & and ;, the skip count must use
+        // character count (not byte offset) to avoid over-consuming from the iterator.
+        // 'café' has 4 chars but 5 bytes (é is 2 bytes in UTF-8).
+        // &café; is not a valid entity, so the full span is pushed as-is.
+        // The text after the semicolon ("rest") must be preserved.
+        let input = "&café;rest";
+        assert_eq!(
+            decode_entities_in_string(input),
+            "&café;rest",
+            "multi-byte chars between & and ; must not cause data loss after ;"
+        );
+    }
+
+    #[test]
+    fn test_decode_entities_multibyte_cjk_between_ampersand_and_semicolon() {
+        // CJK characters are 3 bytes each in UTF-8.
+        // &日本; has 3 chars between & and ; but 7 bytes.
+        // Using byte offset as skip count would consume 7 chars instead of 3,
+        // eating into " after" and silently dropping characters.
+        let input = "&日本;after";
+        assert_eq!(
+            decode_entities_in_string(input),
+            "&日本;after",
+            "CJK chars between & and ; must not cause data loss"
+        );
+    }
+
+    #[test]
+    fn test_decode_entities_emoji_between_ampersand_and_semicolon() {
+        // Emoji are 4 bytes each in UTF-8.
+        // &😀; byte offset of ; is 5, but only 1 char to skip after &.
+        let input = "&😀;tail";
+        assert_eq!(
+            decode_entities_in_string(input),
+            "&😀;tail",
+            "4-byte emoji between & and ; must not cause data loss"
+        );
+    }
 }

crates/oxc_angular_compiler/src/pipeline/emit.rs

@@ -1525,6 +1525,10 @@ pub struct HostBindingCompilationResult<'a> {
     /// Number of host variables for change detection.
     /// Only set if > 0.
     pub host_vars: Option<u32>,
+    /// Additional declarations (pooled constants like pure functions).
+    /// In Angular TS, template and host binding share the same ConstantPool,
+    /// so host binding constants get emitted alongside template constants.
+    pub declarations: OxcVec<'a, OutputStatement<'a>>,
 }
 
 /// Compile host bindings from start to finish.
@@ -1538,6 +1542,10 @@ pub struct HostBindingCompilationResult<'a> {
 pub fn compile_host_bindings<'a>(
     job: &mut HostBindingCompilationJob<'a>,
 ) -> HostBindingCompilationResult<'a> {
+    use crate::output::ast::DeclareVarStmt;
+
+    let allocator = job.allocator;
+
     // Run all transformation phases for host bindings
     transform_host(job);
 
@@ -1553,7 +1561,28 @@ pub fn compile_host_bindings<'a>(
     let host_attrs = job.root.attributes.take();
     let host_vars = job.root.vars.filter(|&v| v > 0);
 
-    HostBindingCompilationResult { host_binding_fn, host_attrs, host_vars }
+    // Collect declarations from host binding pool constants.
+    // In Angular TS, template and host binding share the same ConstantPool,
+    // so host binding pure functions get emitted alongside template constants.
+    let mut declarations = OxcVec::new_in(allocator);
+    for constant in job.pool.constants_mut() {
+        let value = emit_pooled_constant_value(allocator, &mut constant.kind);
+        declarations.push(OutputStatement::DeclareVar(Box::new_in(
+            DeclareVarStmt {
+                name: constant.name.clone(),
+                value: Some(value),
+                modifiers: StmtModifier::FINAL,
+                leading_comment: None,
+                source_span: None,
+            },
+            allocator,
+        )));
+    }
+    for stmt in job.pool.statements.iter() {
+        declarations.push(clone_output_statement(stmt, allocator));
+    }
+
+    HostBindingCompilationResult { host_binding_fn, host_attrs, host_vars, declarations }
 }
 
 /// Converts an IR binary operator to an output binary operator.

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

@@ -27,6 +27,7 @@ fn is_handled_update_op_kind(kind: OpKind) -> bool {
             | OpKind::TwoWayProperty
             | OpKind::DomProperty
             | OpKind::Attribute
+            | OpKind::Control
     )
 }
 
@@ -64,8 +65,10 @@ fn update_op_priority(op: &UpdateOp<'_>) -> u32 {
         (OpKind::TwoWayProperty, _) => 6, // Non-interpolation TwoWayProperty
         (OpKind::Property, false) => 6, // Non-interpolation Property
         (OpKind::Attribute, false) => 7, // Attribute without interpolation
+        // Control comes last per Angular's UPDATE_ORDERING (line 69 of ordering.ts)
+        (OpKind::Control, _) => 8,
         // DomProperty is not used in template bindings, but include for completeness
-        (OpKind::DomProperty, _) => 8,
+        (OpKind::DomProperty, _) => 9,
         _ => 100, // Other ops go last
     }
 }
@@ -124,6 +127,7 @@ fn get_update_op_target(op: &UpdateOp<'_>) -> Option<XrefId> {
         UpdateOp::ClassMap(p) => Some(p.target),
         UpdateOp::Attribute(p) => Some(p.target),
         UpdateOp::DomProperty(p) => Some(p.target),
+        UpdateOp::Control(c) => Some(c.target),
         _ => None,
     }
 }