refactor(core): add internal signal input support for @Input decorator (#53808)

devversion · devversion · commit eee0af05993d · 2024-01-10T12:21:04.000Z
We are adding internal support for declaring signal inputs via the `@Input` decorator. This is needed for JIT unit testing, or JIT applications. In JIT, Angular is not able to recognize signal inputs due to the lack of static reflection metadata. Decorators attach their information on the class- without it needing to be instantiated. This allows Angular to know inputs when preparing/generating the directive definition. With signal inputs this is not possible- so we need a way to tell Angular about inputs for JIT applications. We've decided that this is not something users should have to deal with, so a transform will be added in a follow-up that will automatically derive/and add the decorators for signal inputs when requested in JIT environments. PR Close #53808
diff --git a/packages/compiler/src/core.ts b/packages/compiler/src/core.ts
@@ -34,6 +34,9 @@ export interface Input {
   alias?: string;
   required?: boolean;
   transform?: (value: any) => any;
+  // Note: This field is marked as `internal` in `@angular/core`, but in the compiler
+  // we rely on it for JIT processing at runtime.
+  isSignal: boolean;
 }
 
 /** Flags describing an input for a directive. */
diff --git a/packages/compiler/src/jit_compiler_facade.ts b/packages/compiler/src/jit_compiler_facade.ts
@@ -335,8 +335,10 @@ function convertDirectiveFacadeToMetadata(facade: R3DirectiveMetadataFacade): R3
             bindingPropertyName: ann.alias || field,
             classPropertyName: field,
             required: ann.required || false,
-            // TODO(signals): Support JIT signal inputs via decorator transform.
-            isSignal: false,
+            // For JIT, decorators are used to declare signal inputs. That is because of
+            // a technical limitation where it's not possible to statically reflect class
+            // members of a directive/component at runtime before instantiating the class.
+            isSignal: !!ann.isSignal,
             transformFunction: ann.transform != null ? new WrappedNodeExpr(ann.transform) : null,
           };
         } else if (isOutput(ann)) {
diff --git a/packages/core/src/metadata/directives.ts b/packages/core/src/metadata/directives.ts
@@ -832,6 +832,20 @@ export interface Input {
    * Function with which to transform the input value before assigning it to the directive instance.
    */
   transform?: (value: any) => any;
+
+  /**
+   * @internal
+   *
+   * Whether the input is a signal input.
+   *
+   * This option exists for JIT compatibility. Users are not expected to use this.
+   * Angular needs a way to capture inputs from classes so that the internal data
+   * structures can be set up. This needs to happen before the component is instantiated.
+   * Due to this, for JIT compilation, signal inputs need an additional decorator
+   * declaring the input. Angular provides a TS transformer to automatically handle this
+   * for JIT usage (e.g. in tests).
+   */
+  isSignal?: boolean;
 }
 
 /**

Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,9 @@ export interface Input {`
`34`	`34`	`alias?: string;`
`35`	`35`	`required?: boolean;`
`36`	`36`	`transform?: (value: any) => any;`
	`37`	+ // Note: This field is marked as `internal` in `@angular/core`, but in the compiler
	`38`	`+ // we rely on it for JIT processing at runtime.`
	`39`	`+ isSignal: boolean;`
`37`	`40`	`}`
`38`	`41`
`39`	`42`	`/** Flags describing an input for a directive. */`