fix(i18n): match ngc for attribute and ICU messages, and cover i18n with Angular's own tests

README.md

@@ -125,11 +125,10 @@ interface TransformOptions {
   hmr?: boolean
 
   // Enable cross-file type elision
-  enableCrossFileElision?: boolean
+  crossFileElision?: boolean
 
-  // i18n configuration
-  i18nNormalizeLineEndingsInIcus?: boolean
-  i18nUseExternalIds?: boolean
+  // i18n configuration (note the capital N, as the N-API bindings generate it)
+  i18NUseExternalIds?: boolean
 
   // Style encapsulation mode
   // 'emulated' | 'none' | 'shadow-dom'

crates/oxc_angular_compiler/src/ast/r3.rs

@@ -10,7 +10,6 @@ use oxc_span::Span;
 use oxc_str::Ident;
 
 use crate::ast::expression::{ASTWithSource, AngularExpression, BindingType, ParsedEventType};
-use crate::i18n::serializer::format_i18n_placeholder_name;
 
 // ============================================================================
 // i18n Metadata
@@ -56,6 +55,10 @@ pub struct I18nMessage<'a> {
     /// The serialized message string for goog.getMsg and $localize.
     /// Contains the message text with placeholder markers like "{$interpolation}".
     pub message_string: Ident<'a>,
+    /// For an ICU sub-message, its `$localize` id (Angular's
+    /// `computeMsgId(message.messageString, message.meaning)`), written on the parent message's
+    /// ICU placeholder. Empty otherwise.
+    pub associated_message_id: Ident<'a>,
 }
 
 /// i18n AST node.
@@ -214,6 +217,7 @@ impl<'a> I18nMessage<'a> {
             id: self.id.clone(),
             legacy_ids,
             message_string: self.message_string.clone(),
+            associated_message_id: self.associated_message_id,
         }
     }
 }
@@ -339,99 +343,6 @@ impl<'a> I18nBlockPlaceholder<'a> {
     }
 }
 
-// ============================================================================
-// i18n Message Serialization
-// ============================================================================
-
-/// Serialize i18n nodes to the $localize / goog.getMsg message format.
-///
-/// This produces a message string with placeholder markers like "{$interpolation}"
-/// for expression placeholders and "{$startTag}/{$closeTag}" for element boundaries.
-///
-/// Ported from Angular's `serialize_message` in `i18n/i18n_ast.ts`.
-pub fn serialize_i18n_nodes(nodes: &[I18nNode<'_>]) -> String {
-    let mut result = String::new();
-    for node in nodes {
-        serialize_i18n_node(node, &mut result);
-    }
-    result
-}
-
-/// Serialize a single i18n node to the message string format.
-///
-/// Placeholder names are formatted to camelCase for goog.getMsg compatibility.
-/// For example: `INTERPOLATION` -> `{$interpolation}`, `START_TAG_DIV` -> `{$startTagDiv}`
-fn serialize_i18n_node(node: &I18nNode<'_>, result: &mut String) {
-    match node {
-        I18nNode::Text(text) => {
-            result.push_str(text.value.as_str());
-        }
-        I18nNode::Container(container) => {
-            for child in container.children.iter() {
-                serialize_i18n_node(child, result);
-            }
-        }
-        I18nNode::Icu(icu) => {
-            serialize_i18n_icu(icu, result);
-        }
-        I18nNode::TagPlaceholder(ph) => {
-            let start_name = format_i18n_placeholder_name(ph.start_name.as_str(), true);
-            let close_name = format_i18n_placeholder_name(ph.close_name.as_str(), true);
-            result.push_str(&format!("{{${start_name}}}"));
-            for child in ph.children.iter() {
-                serialize_i18n_node(child, result);
-            }
-            result.push_str(&format!("{{${close_name}}}"));
-        }
-        I18nNode::Placeholder(ph) => {
-            let name = format_i18n_placeholder_name(ph.name.as_str(), true);
-            result.push_str(&format!("{{${name}}}"));
-        }
-        I18nNode::IcuPlaceholder(ph) => {
-            let name = format_i18n_placeholder_name(ph.name.as_str(), true);
-            result.push_str(&format!("{{${name}}}"));
-        }
-        I18nNode::BlockPlaceholder(ph) => {
-            let start_name = format_i18n_placeholder_name(ph.start_name.as_str(), true);
-            let close_name = format_i18n_placeholder_name(ph.close_name.as_str(), true);
-            result.push_str(&format!("{{${start_name}}}"));
-            for child in ph.children.iter() {
-                serialize_i18n_node(child, result);
-            }
-            result.push_str(&format!("{{${close_name}}}"));
-        }
-    }
-}
-
-/// Serialize an ICU expression to the message string format.
-fn serialize_i18n_icu(icu: &I18nIcu<'_>, result: &mut String) {
-    // Use expression_placeholder if available, otherwise use expression directly
-    let expr =
-        icu.expression_placeholder.as_ref().map_or_else(|| icu.expression.as_str(), |p| p.as_str());
-
-    result.push('{');
-    result.push_str(expr);
-    result.push_str(", ");
-    result.push_str(icu.icu_type.as_str());
-    result.push_str(", ");
-
-    // Serialize cases - must be sorted for deterministic output
-    let mut cases: std::vec::Vec<_> = icu.cases.iter().collect();
-    cases.sort_by(|a, b| a.0.as_str().cmp(b.0.as_str()));
-
-    for (i, (key, value)) in cases.iter().enumerate() {
-        if i > 0 {
-            result.push(' ');
-        }
-        result.push_str(key.as_str());
-        result.push_str(" {");
-        serialize_i18n_node(value, result);
-        result.push('}');
-    }
-
-    result.push('}');
-}
-
 // ============================================================================
 // Core Node Enum
 // ============================================================================

crates/oxc_angular_compiler/src/i18n/ast.rs

@@ -413,22 +413,86 @@ pub trait Visitor {
 // Serialization
 // ============================================================================
 
+/// Serialize message nodes as Angular's `serializeMessage` does for `Message.messageString`.
+///
+/// This is the text from which `$localize` message ids are computed (`computeMsgId`).
+/// Placeholders are `{$NAME}` everywhere, including inside ICUs, and a void tag keeps its empty
+/// close placeholder. This differs from the string used for code generation.
+pub fn serialize_message_for_id(nodes: &[Node]) -> String {
+    struct MessageStringVisitor;
+    impl Visitor for MessageStringVisitor {
+        type Context = ();
+        type Result = String;
+        fn visit_text(&mut self, text: &Text, (): &mut ()) -> String {
+            text.value.clone()
+        }
+        fn visit_container(&mut self, container: &Container, ctx: &mut ()) -> String {
+            container.children.iter().map(|c| c.visit(self, ctx)).collect()
+        }
+        fn visit_icu(&mut self, icu: &Icu, ctx: &mut ()) -> String {
+            let cases: Vec<String> =
+                icu.cases.iter().map(|(k, v)| format!("{k} {{{}}}", v.visit(self, ctx))).collect();
+            let placeholder = icu.expression_placeholder.as_deref().unwrap_or_default();
+            format!("{{{placeholder}, {}, {}}}", icu.icu_type, cases.join(" "))
+        }
+        fn visit_tag_placeholder(&mut self, ph: &TagPlaceholder, ctx: &mut ()) -> String {
+            let children: String = ph.children.iter().map(|c| c.visit(self, ctx)).collect();
+            format!("{{${}}}{children}{{${}}}", ph.start_name, ph.close_name)
+        }
+        fn visit_placeholder(&mut self, ph: &Placeholder, (): &mut ()) -> String {
+            format!("{{${}}}", ph.name)
+        }
+        fn visit_icu_placeholder(&mut self, ph: &IcuPlaceholder, (): &mut ()) -> String {
+            format!("{{${}}}", ph.name)
+        }
+        fn visit_block_placeholder(&mut self, ph: &BlockPlaceholder, ctx: &mut ()) -> String {
+            let children: String = ph.children.iter().map(|c| c.visit(self, ctx)).collect();
+            format!("{{${}}}{children}{{${}}}", ph.start_name, ph.close_name)
+        }
+    }
+    nodes.iter().map(|n| n.visit(&mut MessageStringVisitor, &mut ())).collect()
+}
+
 /// Serialize the message to the $localize backtick string format.
 fn serialize_message(nodes: &[Node]) -> String {
-    let mut visitor = LocalizeMessageStringVisitor;
+    let mut visitor = LocalizeMessageStringVisitor { in_icu: false };
     let mut ctx = ();
     nodes.iter().map(|n| n.visit(&mut visitor, &mut ctx)).collect::<Vec<_>>().join("")
 }
 
-/// Visitor that serializes i18n nodes to $localize format.
-struct LocalizeMessageStringVisitor;
+/// Visitor that serializes i18n nodes to the message string stored for code generation.
+///
+/// Placeholders are written as `{$NAME}` markers with their original names: `$localize` uses
+/// the name as-is and `goog.getMsg` its camelCase form, as Angular's two serializers do.
+/// Inside an ICU, Angular's `IcuSerializerVisitor` keeps them as literal `{UPPER_CASE}` ICU
+/// text that is resolved by `ɵɵi18nPostprocess` at runtime.
+struct LocalizeMessageStringVisitor {
+    in_icu: bool,
+}
+
+impl LocalizeMessageStringVisitor {
+    fn format_ph(&self, name: &str) -> String {
+        if self.in_icu {
+            format!("{{{}}}", format_i18n_placeholder_name(name, false))
+        } else {
+            format!("{{${name}}}")
+        }
+    }
+}
+
+/// Escapes message text so that code generation can tell `{$NAME}` placeholder markers from
+/// text that looks like one, such as `{$notAPlaceholder}`: `{\` becomes `{\\` and `{$`
+/// becomes `{\$`.
+pub fn escape_placeholder_markers(text: &str) -> String {
+    text.replace("{\\", "{\\\\").replace("{$", "{\\$")
+}
 
 impl Visitor for LocalizeMessageStringVisitor {
     type Context = ();
     type Result = String;
 
     fn visit_text(&mut self, text: &Text, _context: &mut Self::Context) -> Self::Result {
-        text.value.clone()
+        escape_placeholder_markers(&text.value)
     }
 
     fn visit_container(
@@ -445,11 +509,13 @@ impl Visitor for LocalizeMessageStringVisitor {
     }
 
     fn visit_icu(&mut self, icu: &Icu, context: &mut Self::Context) -> Self::Result {
+        let was_in_icu = std::mem::replace(&mut self.in_icu, true);
         let cases: Vec<String> = icu
             .cases
             .iter()
             .map(|(k, v)| format!("{} {{{}}}", k, v.visit(self, context)))
             .collect();
+        self.in_icu = was_in_icu;
         let expr_placeholder = icu.expression_placeholder.as_deref().unwrap_or(&icu.expression);
         format!("{{{}, {}, {}}}", expr_placeholder, icu.icu_type, cases.join(" "))
     }
@@ -459,29 +525,29 @@ impl Visitor for LocalizeMessageStringVisitor {
         ph: &TagPlaceholder,
         context: &mut Self::Context,
     ) -> Self::Result {
+        // A void element is a single placeholder, as in Angular's serializers.
+        if ph.is_void {
+            return self.format_ph(&ph.start_name);
+        }
         let children: String =
-            ph.children.iter().map(|child| child.visit(self, context)).collect::<Vec<_>>().join("");
-        let start_name = format_i18n_placeholder_name(&ph.start_name, true);
-        let close_name = format_i18n_placeholder_name(&ph.close_name, true);
-        format!("{{${start_name}}}{children}{{${close_name}}}")
+            ph.children.iter().map(|child| child.visit(self, context)).collect::<String>();
+        format!("{}{children}{}", self.format_ph(&ph.start_name), self.format_ph(&ph.close_name))
     }
 
     fn visit_placeholder(
         &mut self,
         ph: &Placeholder,
         _context: &mut Self::Context,
     ) -> Self::Result {
-        let name = format_i18n_placeholder_name(&ph.name, true);
-        format!("{{${name}}}")
+        self.format_ph(&ph.name)
     }
 
     fn visit_icu_placeholder(
         &mut self,
         ph: &IcuPlaceholder,
         _context: &mut Self::Context,
     ) -> Self::Result {
-        let name = format_i18n_placeholder_name(&ph.name, true);
-        format!("{{${name}}}")
+        self.format_ph(&ph.name)
     }
 
     fn visit_block_placeholder(
@@ -490,10 +556,8 @@ impl Visitor for LocalizeMessageStringVisitor {
         context: &mut Self::Context,
     ) -> Self::Result {
         let children: String =
-            ph.children.iter().map(|child| child.visit(self, context)).collect::<Vec<_>>().join("");
-        let start_name = format_i18n_placeholder_name(&ph.start_name, true);
-        let close_name = format_i18n_placeholder_name(&ph.close_name, true);
-        format!("{{${start_name}}}{children}{{${close_name}}}")
+            ph.children.iter().map(|child| child.visit(self, context)).collect::<String>();
+        format!("{}{children}{}", self.format_ph(&ph.start_name), self.format_ph(&ph.close_name))
     }
 }
 
@@ -701,6 +765,7 @@ mod tests {
             String::new(),
             String::new(),
         );
-        assert_eq!(msg.message_string, "Hello {$interpolation}!");
+        // Original placeholder names; goog.getMsg converts them to camelCase.
+        assert_eq!(msg.message_string, "Hello {$INTERPOLATION}!");
     }
 }