fix

Author: Brooooooklyn

crates/oxc_angular_compiler/src/component/definition.rs

@@ -1130,43 +1130,36 @@ fn generate_host_directives_feature<'a>(
 
 /// Create a directive reference expression.
 ///
-/// Angular uses different rules for host directive references:
-/// - External packages (e.g., `@angular/cdk`): use bare type name
-/// - Relative imports (e.g., `./my.directive`): use namespace reference (i1.DirectiveName)
+/// For imported directives (those with a `source_module`), generates namespaced
+/// references like `i1.MyDirective`. For local directives, generates bare
+/// variable references like `MyDirective`.
 ///
-/// This matches Angular's behavior where external modules are imported as named imports
-/// but relative imports are compiled to namespace imports.
+/// See: packages/compiler/src/render3/view/compiler.ts:689-692
 fn create_directive_reference<'a>(
     allocator: &'a Allocator,
     directive: &HostDirectiveMetadata<'a>,
     namespace_registry: &mut NamespaceRegistry<'a>,
 ) -> OutputExpression<'a> {
     if let Some(ref source_module) = directive.source_module {
-        // Check if it's a relative import (starts with . or ..)
-        let is_relative = source_module.starts_with('.') || source_module.starts_with("..");
-
-        if is_relative {
-            // Relative import - use namespace.DirectiveName (e.g., i1.LocalDir)
-            let namespace = namespace_registry.get_or_assign(source_module);
-            return OutputExpression::ReadProp(Box::new_in(
-                ReadPropExpr {
-                    receiver: Box::new_in(
-                        OutputExpression::ReadVar(Box::new_in(
-                            ReadVarExpr { name: namespace, source_span: None },
-                            allocator,
-                        )),
+        // Imported directive - use namespace.DirectiveName (e.g., i1.ExternalDir)
+        let namespace = namespace_registry.get_or_assign(source_module);
+        return OutputExpression::ReadProp(Box::new_in(
+            ReadPropExpr {
+                receiver: Box::new_in(
+                    OutputExpression::ReadVar(Box::new_in(
+                        ReadVarExpr { name: namespace, source_span: None },
                         allocator,
-                    ),
-                    name: directive.directive.clone(),
-                    optional: false,
-                    source_span: None,
-                },
-                allocator,
-            ));
-        }
-        // External package import - use bare type name
+                    )),
+                    allocator,
+                ),
+                name: directive.directive.clone(),
+                optional: false,
+                source_span: None,
+            },
+            allocator,
+        ));
     }
-    // No source module or external package - use bare type name
+    // No source module - use bare type name (local directive)
     OutputExpression::ReadVar(Box::new_in(
         ReadVarExpr { name: directive.directive.clone(), source_span: None },
         allocator,
@@ -2215,8 +2208,8 @@ mod tests {
         let emitter = JsEmitter::new();
         let js = emitter.emit_expression(&result);
 
-        // Should have trailing comma inside the array
-        assert!(js.contains("[A,B,C,]"), "Array should have trailing comma: {}", js);
+        // Should contain the array with dependencies
+        assert!(js.contains("[A,B,C]"), "Array should contain dependencies: {}", js);
     }
 
     #[test]

crates/oxc_angular_compiler/src/directive/compiler.rs

@@ -1015,10 +1015,10 @@ mod tests {
         let emitter = JsEmitter::new();
         let output = result.map(|e| emitter.emit_expression(&e)).unwrap_or_default();
 
-        // Expected: {count:[0,"itemCount","count",],} - array format with flags=0
+        // Expected: {count:[0,"itemCount","count"]} - array format with flags=0
         // Key format: [flags, publicName, declaredName]
         assert!(
-            output.contains(r#"count:[0,"itemCount","count","#),
+            output.contains(r#"count:[0,"itemCount","count"]"#),
             "Aliased input should be array [flags, publicName, declaredName]: {}",
             output
         );
@@ -1045,9 +1045,9 @@ mod tests {
         let emitter = JsEmitter::new();
         let output = result.map(|e| emitter.emit_expression(&e)).unwrap_or_default();
 
-        // Expected: {disabled:[2,"disabled","disabled",booleanAttribute,],} - array with flags=2 (transform)
+        // Expected: {disabled:[2,"disabled","disabled",booleanAttribute]} - array with flags=2 (transform)
         assert!(
-            output.contains(r#"disabled:[2,"disabled","disabled",booleanAttribute,"#),
+            output.contains(r#"disabled:[2,"disabled","disabled",booleanAttribute]"#),
             "Input with transform should be array [flags, publicName, declaredName, transform]: {}",
             output
         );
@@ -1070,10 +1070,10 @@ mod tests {
         let emitter = JsEmitter::new();
         let output = result.map(|e| emitter.emit_expression(&e)).unwrap_or_default();
 
-        // Expected: {border:[1,"border",],} - array format with flags=1 (signal)
+        // Expected: {border:[1,"border"]} - array format with flags=1 (signal)
         // For signal inputs with same name, we only need [flags, publicName]
         assert!(
-            output.contains(r#"border:[1,"border","#),
+            output.contains(r#"border:[1,"border"]"#),
             "Signal input should be array [flags, publicName]: {}",
             output
         );
@@ -1102,9 +1102,9 @@ mod tests {
         let emitter = JsEmitter::new();
         let output = result.map(|e| emitter.emit_expression(&e)).unwrap_or_default();
 
-        // Expected: {borderWidth:[1,"border","borderWidth",],} - array with flags=1 and both names
+        // Expected: {borderWidth:[1,"border","borderWidth"]} - array with flags=1 and both names
         assert!(
-            output.contains(r#"borderWidth:[1,"border","borderWidth","#),
+            output.contains(r#"borderWidth:[1,"border","borderWidth"]"#),
             "Signal input with alias should be array [flags, publicName, declaredName]: {}",
             output
         );
@@ -1132,9 +1132,9 @@ mod tests {
         let emitter = JsEmitter::new();
         let output = result.map(|e| emitter.emit_expression(&e)).unwrap_or_default();
 
-        // Expected: {count:[3,"count","count",toNumber,],} - array with flags=3 (signal + transform)
+        // Expected: {count:[3,"count","count",toNumber]} - array with flags=3 (signal + transform)
         assert!(
-            output.contains(r#"count:[3,"count","count",toNumber,"#),
+            output.contains(r#"count:[3,"count","count",toNumber]"#),
             "Signal input with transform should have flags=3: {}",
             output
         );
@@ -1180,7 +1180,7 @@ mod tests {
 
         // Signal input: [1, "signalInput"]
         assert!(
-            output.contains(r#"signalInput:[1,"signalInput","#),
+            output.contains(r#"signalInput:[1,"signalInput"]"#),
             "Signal input should have flags=1: {}",
             output
         );
@@ -1189,7 +1189,7 @@ mod tests {
         // Note: The emitter may add newlines in the output, so we check for key parts
         assert!(
             output.contains(r#"boolInput:[2,"boolInput","boolInput","#)
-                && output.contains("booleanAttribute"),
+                && output.contains("booleanAttribute]"),
             "Transform input should have flags=2: {}",
             output
         );

crates/oxc_angular_compiler/src/pipeline/ingest.rs

@@ -2400,17 +2400,35 @@ fn ingest_if_block<'a>(
         let tag_name =
             ingest_control_flow_insertion_point(job, view_xref, branch_view_xref, &branch.children);
 
+        // Extract namespace from tag_name (e.g., `:svg:foreignObject` -> Namespace::Svg)
+        // Matches TypeScript's ingestIfBlock behavior for SVG/MathML namespace handling.
+        let (namespace_key, tag_name_without_namespace) =
+            tag_name.as_ref().map_or((None, None), |tag| {
+                let (ns, stripped) = split_ns_name(tag.as_str());
+                (ns, Some(stripped))
+            });
+        let namespace = namespace_for_key(namespace_key);
+
+        // Compute fn_name_suffix with namespace prefix (e.g., `:svg:Conditional` for SVG)
+        let fn_name_suffix = {
+            let suffix = prefix_with_namespace("Conditional", namespace);
+            Atom::from(allocator.alloc_str(&suffix))
+        };
+
+        // Build the tag atom from the stripped tag name (without namespace prefix)
+        let tag = tag_name_without_namespace.map(|s| Atom::from(allocator.alloc_str(s)));
+
         // Create the appropriate CREATE op
         let create_op = if i == 0 {
             // First branch uses ConditionalOp (ConditionalCreate)
             CreateOp::Conditional(ConditionalOp {
                 base: CreateOpBase { source_span: Some(branch.source_span), ..Default::default() },
                 xref: branch_view_xref,
                 slot: None,
-                namespace: Namespace::Html,
+                namespace,
                 template_kind: TemplateKind::Block,
-                fn_name_suffix: Atom::from("Conditional"),
-                tag: tag_name.clone(),
+                fn_name_suffix: fn_name_suffix.clone(),
+                tag: tag.clone(),
                 decls: None,
                 vars: None,
                 local_refs: Vec::new_in(allocator),
@@ -2425,10 +2443,10 @@ fn ingest_if_block<'a>(
                 base: CreateOpBase { source_span: Some(branch.source_span), ..Default::default() },
                 xref: branch_view_xref,
                 slot: None,
-                namespace: Namespace::Html,
+                namespace,
                 template_kind: TemplateKind::Block,
-                fn_name_suffix: Atom::from("Conditional"),
-                tag: tag_name.clone(),
+                fn_name_suffix: fn_name_suffix.clone(),
+                tag: tag.clone(),
                 decls: None,
                 vars: None,
                 local_refs: Vec::new_in(allocator),
@@ -2949,17 +2967,35 @@ fn ingest_switch_block<'a>(
         let tag_name =
             ingest_control_flow_insertion_point(job, view_xref, case_view_xref, &case.children);
 
+        // Extract namespace from tag_name (e.g., `:svg:foreignObject` -> Namespace::Svg)
+        // Matches TypeScript's ingestSwitchBlock behavior for SVG/MathML namespace handling.
+        let (namespace_key, tag_name_without_namespace) =
+            tag_name.as_ref().map_or((None, None), |tag| {
+                let (ns, stripped) = split_ns_name(tag.as_str());
+                (ns, Some(stripped))
+            });
+        let namespace = namespace_for_key(namespace_key);
+
+        // Compute fn_name_suffix with namespace prefix (e.g., `:svg:Case` for SVG)
+        let fn_name_suffix = {
+            let suffix = prefix_with_namespace("Case", namespace);
+            Atom::from(allocator.alloc_str(&suffix))
+        };
+
+        // Build the tag atom from the stripped tag name (without namespace prefix)
+        let tag = tag_name_without_namespace.map(|s| Atom::from(allocator.alloc_str(s)));
+
         // Create the appropriate CREATE op
         let create_op = if i == 0 {
             // First case uses ConditionalOp (ConditionalCreate)
             CreateOp::Conditional(ConditionalOp {
                 base: CreateOpBase { source_span: Some(case.source_span), ..Default::default() },
                 xref: case_view_xref,
                 slot: None,
-                namespace: Namespace::Html,
+                namespace,
                 template_kind: TemplateKind::Block,
-                fn_name_suffix: Atom::from("Case"),
-                tag: tag_name,
+                fn_name_suffix: fn_name_suffix.clone(),
+                tag: tag.clone(),
                 decls: None,
                 vars: None,
                 local_refs: Vec::new_in(allocator),
@@ -2974,10 +3010,10 @@ fn ingest_switch_block<'a>(
                 base: CreateOpBase { source_span: Some(case.source_span), ..Default::default() },
                 xref: case_view_xref,
                 slot: None,
-                namespace: Namespace::Html,
+                namespace,
                 template_kind: TemplateKind::Block,
-                fn_name_suffix: Atom::from("Case"),
-                tag: tag_name,
+                fn_name_suffix: fn_name_suffix.clone(),
+                tag: tag.clone(),
                 decls: None,
                 vars: None,
                 local_refs: Vec::new_in(allocator),

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

@@ -346,6 +346,27 @@ fn serialize_attributes<'a>(
         }
     }
 
+    // Add ProjectAs marker and parsed CSS selector if ngProjectAs is present
+    // This must come after the static attributes and before classes/styles/bindings
+    // Reference: Angular's const_collection.ts lines 251-258
+    if let Some(ref project_as) = attrs.project_as {
+        // Parse the ngProjectAs value as a CSS selector
+        // We only take the first selector (Angular doesn't support multiple selectors in ngProjectAs)
+        let r3_selectors = parse_selector_to_r3_selector(project_as.as_str());
+        if let Some(first_selector) = r3_selectors.first() {
+            // Add the ProjectAs marker (value 5)
+            elements.push(ConstValue::Number(AttributeMarker::ProjectAs as i32 as f64));
+
+            // Add the parsed selector as an array
+            let selector_elements = r3_selector_to_output_expr(allocator, first_selector);
+            let selector_array = OutputExpression::LiteralArray(Box::new_in(
+                LiteralArrayExpr { entries: selector_elements, source_span: None },
+                allocator,
+            ));
+            elements.push(ConstValue::Expression(selector_array));
+        }
+    }
+
     // Add classes marker and class names
     if !attrs.classes.is_empty() {
         elements.push(ConstValue::Number(AttributeMarker::Classes as i32 as f64));

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

@@ -513,8 +513,7 @@ fn collect_child_views_with_indices<'a>(
 }
 
 /// Process create ops in a view with interleaved child view recursion.
-/// This matches TypeScript's unit.ops() iteration order where child views
-/// are processed immediately when encountered.
+/// This matches TypeScript's unit.ops() iteration order.
 ///
 /// TypeScript's ops() generator yields ops in this order:
 /// 1. Create op
@@ -525,16 +524,13 @@ fn collect_child_views_with_indices<'a>(
 ///
 /// The naming phase switch handles ops as they come:
 /// - For Listener ops: names the handler function, then handler_ops (Variable) are processed
-/// - For RepeaterCreate: recurses into child views FIRST, then track_by_ops are yielded
-///
-/// So the key insight is:
-/// - For RepeaterCreate, track_by_ops are processed AFTER child view recursion
-/// - For Listeners, handler_ops can be processed inline (no child view recursion)
+/// - For RepeaterCreate: track_by_ops are yielded inline (processed as Variable ops),
+///   then the switch case recurses into child views
 ///
 /// The order for a RepeaterCreate at index N is:
 /// 1. Process RepeaterCreate op (without track_by_ops)
-/// 2. Recurse into child views (empty view, then body view)
-/// 3. Process track_by_ops
+/// 2. Process track_by_ops (yielded inline by the generator)
+/// 3. Recurse into child views (empty view, then body view)
 /// 4. Move to next create op at index N+1
 #[allow(clippy::too_many_arguments)]
 fn process_create_ops_with_child_recursion<'a>(
@@ -605,25 +601,11 @@ fn process_create_ops_with_child_recursion<'a>(
             }
         } // Borrow of job ends here
 
-        // After processing this create op, immediately recurse into any child views at this index
-        // This is the key to depth-first processing!
-        if let Some(children) = child_views_by_index.remove(&index) {
-            for (child_xref, child_base_name) in children {
-                add_names_to_child_view(
-                    job,
-                    child_xref,
-                    &child_base_name,
-                    allocator,
-                    state,
-                    var_names,
-                    semantic_var_names,
-                );
-            }
-        }
-
-        // Process track_by_ops IMMEDIATELY after child view recursion for this RepeaterCreate
-        // This matches TypeScript's generator behavior where track_by_ops are yielded
-        // right after the RepeaterCreate op is handled (which includes child view recursion)
+        // Process track_by_ops IMMEDIATELY after the create op, BEFORE child view recursion.
+        // This matches Angular's ops() generator which yields track_by_ops inline with the
+        // RepeaterCreate op. The switch statement in naming.ts processes the RepeaterCreate,
+        // then the generator yields track_by_ops (processed as Variable ops), and only then
+        // does the iteration continue to child views.
         if is_repeater_with_track_by {
             let create_ops = match view_xref {
                 None => &mut job.root.create,
@@ -652,6 +634,22 @@ fn process_create_ops_with_child_recursion<'a>(
                 }
             }
         }
+
+        // After processing the create op and its track_by_ops, recurse into any child views
+        // at this index. This is the key to depth-first processing!
+        if let Some(children) = child_views_by_index.remove(&index) {
+            for (child_xref, child_base_name) in children {
+                add_names_to_child_view(
+                    job,
+                    child_xref,
+                    &child_base_name,
+                    allocator,
+                    state,
+                    var_names,
+                    semantic_var_names,
+                );
+            }
+        }
     }
 }
 
@@ -867,10 +865,9 @@ fn process_single_create_op_ref<'a>(
             }
         }
         CreateOp::RepeaterCreate(_) => {
-            // NOTE: track_by_ops are processed AFTER child view recursion
-            // in process_create_ops_with_child_recursion, matching TypeScript's
-            // generator behavior where track_by_ops are yielded after the
-            // RepeaterCreate op is handled (which includes child view recursion)
+            // NOTE: track_by_ops are processed in process_create_ops_with_child_recursion,
+            // BEFORE child view recursion. This matches Angular's ops() generator which
+            // yields track_by_ops inline with the RepeaterCreate op.
         }
         CreateOp::Variable(var_op) => {
             name_create_variable_op(var_op, allocator, state, var_names, semantic_var_names);