fix: JIT transform correctly downlevels member decorators and union types

Fixes two bugs identified in code review:

1. (High) Member decorators (@input, @output, @HostBinding, etc.) were
   removed from class bodies without being emitted as `static propDecorators`.
   Angular's JIT runtime reads `propDecorators` to discover inputs/outputs/
   queries at runtime — without it, data binding silently breaks. Now emits:
     static propDecorators = {
       myInput: [{ type: Input }],
       myOutput: [{ type: Output }],
     };

2. (Medium) `extract_type_name_from_annotation` only skipped TSNullKeyword
   in union types. For `undefined | T` or `null | undefined | T`, the function
   encountered TSUndefinedKeyword first, immediately recursed and returned None,
   never reaching the actual type. Fixed to try each union member and return
   the first resolvable name.

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

Author: Brooooooklyn

crates/oxc_angular_compiler/src/component/transform.rs

@@ -675,6 +675,8 @@ struct JitClassInfo {
     is_default_export: bool,
     /// Constructor parameter info for ctorParameters.
     ctor_params: std::vec::Vec<JitCtorParam>,
+    /// Member decorator info for propDecorators.
+    member_decorators: std::vec::Vec<JitMemberDecorator>,
     /// The modified decorator expression text for __decorate call.
     decorator_text: String,
 }
@@ -695,6 +697,14 @@ struct JitParamDecorator {
     args: Option<String>,
 }
 
+/// A member (property/method) with its Angular decorators for propDecorators.
+struct JitMemberDecorator {
+    /// The property/member name.
+    member_name: String,
+    /// The Angular decorators on this member.
+    decorators: std::vec::Vec<JitParamDecorator>,
+}
+
 /// Find any Angular decorator on a class and return its kind and the decorator reference.
 fn find_angular_decorator<'a>(
     class: &'a oxc_ast::ast::Class<'a>,
@@ -788,6 +798,122 @@ fn extract_jit_ctor_params(
     params
 }
 
+/// Extract Angular member decorators for JIT propDecorators generation.
+///
+/// Collects all Angular-relevant decorators from class properties/methods
+/// (excluding constructor) so they can be emitted as a `static propDecorators` property.
+fn extract_jit_member_decorators(
+    source: &str,
+    class: &oxc_ast::ast::Class<'_>,
+) -> std::vec::Vec<JitMemberDecorator> {
+    use oxc_ast::ast::{ClassElement, MethodDefinitionKind, PropertyKey};
+
+    const ANGULAR_MEMBER_DECORATORS: &[&str] = &[
+        "Input",
+        "Output",
+        "HostBinding",
+        "HostListener",
+        "ViewChild",
+        "ViewChildren",
+        "ContentChild",
+        "ContentChildren",
+    ];
+
+    let mut result: std::vec::Vec<JitMemberDecorator> = std::vec::Vec::new();
+
+    for element in &class.body.body {
+        let (member_name, decorators) = match element {
+            ClassElement::PropertyDefinition(prop) => {
+                let name = match &prop.key {
+                    PropertyKey::StaticIdentifier(id) => id.name.to_string(),
+                    PropertyKey::StringLiteral(s) => s.value.to_string(),
+                    _ => continue,
+                };
+                (name, &prop.decorators)
+            }
+            ClassElement::MethodDefinition(method) => {
+                if method.kind == MethodDefinitionKind::Constructor {
+                    continue;
+                }
+                let name = match &method.key {
+                    PropertyKey::StaticIdentifier(id) => id.name.to_string(),
+                    PropertyKey::StringLiteral(s) => s.value.to_string(),
+                    _ => continue,
+                };
+                (name, &method.decorators)
+            }
+            ClassElement::AccessorProperty(accessor) => {
+                let name = match &accessor.key {
+                    PropertyKey::StaticIdentifier(id) => id.name.to_string(),
+                    PropertyKey::StringLiteral(s) => s.value.to_string(),
+                    _ => continue,
+                };
+                (name, &accessor.decorators)
+            }
+            _ => continue,
+        };
+
+        let mut angular_decs: std::vec::Vec<JitParamDecorator> = std::vec::Vec::new();
+
+        for decorator in decorators {
+            let (dec_name, call_args) = match &decorator.expression {
+                Expression::CallExpression(call) => {
+                    let name = match &call.callee {
+                        Expression::Identifier(id) => id.name.to_string(),
+                        Expression::StaticMemberExpression(m) => m.property.name.to_string(),
+                        _ => continue,
+                    };
+                    let args = if call.arguments.is_empty() {
+                        None
+                    } else {
+                        let start = call.arguments.first().unwrap().span().start;
+                        let end = call.arguments.last().unwrap().span().end;
+                        Some(source[start as usize..end as usize].to_string())
+                    };
+                    (name, args)
+                }
+                Expression::Identifier(id) => (id.name.to_string(), None),
+                _ => continue,
+            };
+
+            if ANGULAR_MEMBER_DECORATORS.contains(&dec_name.as_str()) {
+                angular_decs.push(JitParamDecorator { name: dec_name, args: call_args });
+            }
+        }
+
+        if !angular_decs.is_empty() {
+            result.push(JitMemberDecorator { member_name, decorators: angular_decs });
+        }
+    }
+
+    result
+}
+
+/// Build the propDecorators static property text for JIT member decorator metadata.
+fn build_prop_decorators_text(members: &[JitMemberDecorator]) -> Option<String> {
+    if members.is_empty() {
+        return None;
+    }
+
+    let mut entries: std::vec::Vec<String> = std::vec::Vec::new();
+    for member in members {
+        let dec_strs: std::vec::Vec<String> = member
+            .decorators
+            .iter()
+            .map(|d| {
+                if let Some(ref args) = d.args {
+                    format!("{{ type: {}, args: [{}] }}", d.name, args)
+                } else {
+                    format!("{{ type: {} }}", d.name)
+                }
+            })
+            .collect();
+        entries.push(format!("    {}: [{}]", member.member_name, dec_strs.join(", ")));
+    }
+
+    Some(format!("static propDecorators = {{\n{}\n}}", entries.join(",\n")))
+}
+
 /// Extract a type name from a TypeScript type annotation for JIT ctorParameters.
 fn extract_type_name_from_annotation(type_annotation: &oxc_ast::ast::TSType<'_>) -> Option<String> {
     match type_annotation {
@@ -803,10 +929,13 @@ fn extract_type_name_from_annotation(type_annotation: &oxc_ast::ast::TSType<'_>)
             }
         }
         oxc_ast::ast::TSType::TSUnionType(union) => {
-            // For union types like `T | null`, try to find the non-null type
+            // For union types like `T | null`, `undefined | T`, `null | undefined | T`,
+            // iterate all members and return the first that resolves to a name.
+            // Using try-each-and-continue handles TSNullKeyword, TSUndefinedKeyword,
+            // and any other non-reference type gracefully.
             for t in &union.types {
-                if !matches!(t, oxc_ast::ast::TSType::TSNullKeyword(_)) {
-                    return extract_type_name_from_annotation(t);
+                if let Some(name) = extract_type_name_from_annotation(t) {
+                    return Some(name);
                 }
             }
             None
@@ -1062,6 +1191,9 @@ fn transform_angular_file_jit(
         // Extract constructor parameters for ctorParameters
         let ctor_params = extract_jit_ctor_params(source, class);
 
+        // Extract member decorators for propDecorators
+        let member_decorators = extract_jit_member_decorators(source, class);
+
         jit_classes.push(JitClassInfo {
             class_name,
             decorator_span: decorator.span,
@@ -1071,6 +1203,7 @@ fn transform_angular_file_jit(
             is_exported,
             is_default_export,
             ctor_params,
+            member_decorators,
             decorator_text,
         });
 
@@ -1195,9 +1328,19 @@ fn transform_angular_file_jit(
             ));
         }
 
-        // 4d. Add ctorParameters inside class body (before closing `}`)
-        if let Some(ctor_text) = build_ctor_parameters_text(&jit_info.ctor_params) {
-            edits.push(Edit::insert(jit_info.class_body_end - 1, format!("\n{};\n", ctor_text)));
+        // 4d. Add ctorParameters and propDecorators inside class body (before closing `}`)
+        {
+            let mut class_statics = String::new();
+            if let Some(ctor_text) = build_ctor_parameters_text(&jit_info.ctor_params) {
+                class_statics.push_str(&format!("\n{};", ctor_text));
+            }
+            if let Some(prop_text) = build_prop_decorators_text(&jit_info.member_decorators) {
+                class_statics.push_str(&format!("\n{};", prop_text));
+            }
+            if !class_statics.is_empty() {
+                class_statics.push('\n');
+                edits.push(Edit::insert(jit_info.class_body_end - 1, class_statics));
+            }
         }
 
         // 4e. After class body, add __decorate call and export

crates/oxc_angular_compiler/tests/integration_test.rs

@@ -6245,3 +6245,108 @@ export class App {
 
     insta::assert_snapshot!("jit_full_component", result.code);
 }
+
+#[test]
+fn test_jit_prop_decorators_emitted() {
+    // Bug fix: member decorators (@Input, @Output, etc.) must be downleveled
+    // to static propDecorators so Angular's JIT runtime can discover inputs/outputs.
+    // Without this, @Input/@Output decorators are silently lost, breaking data binding.
+    let allocator = Allocator::default();
+    let source = r#"
+import { Directive, Input, Output, HostBinding, EventEmitter } from '@angular/core';
+
+@Directive({
+    selector: '[appHighlight]',
+})
+export class HighlightDirective {
+    @Input() color: string = 'yellow';
+    @Input('aliasName') title: string = '';
+    @Output() colorChange = new EventEmitter<string>();
+    @HostBinding('class.active') isActive = false;
+}
+"#;
+
+    let options = ComponentTransformOptions { jit: true, ..Default::default() };
+    let result =
+        transform_angular_file(&allocator, "highlight.directive.ts", source, &options, None);
+    assert!(!result.has_errors(), "Should not have errors: {:?}", result.diagnostics);
+
+    // propDecorators must be present — Angular's JIT runtime reads this
+    assert!(
+        result.code.contains("propDecorators"),
+        "JIT output must emit static propDecorators. Got:\n{}",
+        result.code
+    );
+
+    // Each decorated member should appear in propDecorators
+    assert!(result.code.contains("color:"), "propDecorators should list 'color'");
+    assert!(result.code.contains("title:"), "propDecorators should list 'title'");
+    assert!(result.code.contains("colorChange:"), "propDecorators should list 'colorChange'");
+    assert!(result.code.contains("isActive:"), "propDecorators should list 'isActive'");
+
+    // The decorator type references should be present
+    assert!(result.code.contains("type: Input"), "propDecorators should reference Input");
+    assert!(result.code.contains("type: Output"), "propDecorators should reference Output");
+    assert!(
+        result.code.contains("type: HostBinding"),
+        "propDecorators should reference HostBinding"
+    );
+
+    // The original decorators must be removed from the class body
+    assert!(
+        !result.code.contains("@Input()"),
+        "@Input decorator must be removed from class body"
+    );
+    assert!(
+        !result.code.contains("@Output()"),
+        "@Output decorator must be removed from class body"
+    );
+
+    insta::assert_snapshot!("jit_prop_decorators", result.code);
+}
+
+#[test]
+fn test_jit_union_type_ctor_params() {
+    // Bug fix: union types like `undefined | SomeService` or `null | undefined | T`
+    // must correctly extract the type name for ctorParameters.
+    // Previously only TSNullKeyword was skipped, causing TSUndefinedKeyword to short-circuit.
+    let allocator = Allocator::default();
+    let source = r#"
+import { Component } from '@angular/core';
+import { ServiceA } from './a.service';
+import { ServiceB } from './b.service';
+
+@Component({ selector: 'test', template: '' })
+export class TestComponent {
+    constructor(
+        svcA: undefined | ServiceA,
+        svcB: null | undefined | ServiceB,
+    ) {}
+}
+"#;
+
+    let options = ComponentTransformOptions { jit: true, ..Default::default() };
+    let result = transform_angular_file(&allocator, "test.component.ts", source, &options, None);
+    assert!(!result.has_errors(), "Should not have errors: {:?}", result.diagnostics);
+
+    // Both types must be correctly extracted despite union with undefined/null
+    assert!(
+        result.code.contains("type: ServiceA"),
+        "ctorParameters should resolve 'undefined | ServiceA' to ServiceA. Got:\n{}",
+        result.code
+    );
+    assert!(
+        result.code.contains("type: ServiceB"),
+        "ctorParameters should resolve 'null | undefined | ServiceB' to ServiceB. Got:\n{}",
+        result.code
+    );
+
+    // Should NOT emit 'type: undefined' for either
+    assert!(
+        !result.code.contains("type: undefined"),
+        "ctorParameters must not emit 'type: undefined' for resolvable union types. Got:\n{}",
+        result.code
+    );
+
+    insta::assert_snapshot!("jit_union_type_ctor_params", result.code);
+}

crates/oxc_angular_compiler/tests/snapshots/integration_test__jit_directive.snap

@@ -7,6 +7,10 @@ import { __decorate } from "tslib";
 
 let HighlightDirective = class HighlightDirective {
     color: string = 'yellow';
+
+static propDecorators = {
+    color: [{ type: Input }]
+};
 };
 HighlightDirective = __decorate([
     Directive({

crates/oxc_angular_compiler/tests/snapshots/integration_test__jit_prop_decorators.snap

@@ -0,0 +1,26 @@
+---
+source: crates/oxc_angular_compiler/tests/integration_test.rs
+expression: result.code
+---
+import { Directive, Input, Output, HostBinding, EventEmitter } from '@angular/core';
+import { __decorate } from "tslib";
+
+let HighlightDirective = class HighlightDirective {
+    color: string = 'yellow';
+    title: string = '';
+    colorChange = new EventEmitter<string>();
+    isActive = false;
+
+static propDecorators = {
+    color: [{ type: Input }],
+    title: [{ type: Input, args: ['aliasName'] }],
+    colorChange: [{ type: Output }],
+    isActive: [{ type: HostBinding, args: ['class.active'] }]
+};
+};
+HighlightDirective = __decorate([
+    Directive({
+    selector: '[appHighlight]',
+})
+], HighlightDirective);
+export { HighlightDirective };

crates/oxc_angular_compiler/tests/snapshots/integration_test__jit_union_type_ctor_params.snap

@@ -0,0 +1,24 @@
+---
+source: crates/oxc_angular_compiler/tests/integration_test.rs
+expression: result.code
+---
+import { Component } from '@angular/core';
+import { ServiceA } from './a.service';
+import { ServiceB } from './b.service';
+import { __decorate } from "tslib";
+
+let TestComponent = class TestComponent {
+    constructor(
+        svcA: undefined | ServiceA,
+        svcB: null | undefined | ServiceB,
+    ) {}
+
+static ctorParameters = () => [
+    { type: ServiceA },
+    { type: ServiceB }
+];
+};
+TestComponent = __decorate([
+    Component({ selector: 'test', template: '' })
+], TestComponent);
+export { TestComponent };