refactor(compiler-cli): capture signal inputs in semantic graph for directives (angular#53521)

Whenever an input of a directive changes, the semantic symbol should reflect this change for the type check API. This is important because signal inputs require special output in the type checking blocks- hence we need to ensure that such type checking blocks are re-generated properly. Test verify that incremental type-checking builds work as expected now. PR Close angular#53521

Author: devversion

packages/compiler-cli/src/ngtsc/annotations/directive/src/symbol.ts

@@ -93,7 +93,8 @@ function isInputMappingEqual(current: InputMapping, previous: InputMapping): boo
 
 function isInputOrOutputEqual(current: InputOrOutput, previous: InputOrOutput): boolean {
  return current.classPropertyName === previous.classPropertyName &&
- current.bindingPropertyName === previous.bindingPropertyName;
+ current.bindingPropertyName === previous.bindingPropertyName &&
+ current.isSignal === previous.isSignal;
 }
 
 function isTypeCheckMetaEqual(
@@ -102,9 +103,10 @@ function isTypeCheckMetaEqual(
  return false;
  }
  if (current.isGeneric !== previous.isGeneric) {
- // Note: changes in the number of type parameters is also considered in `areTypeParametersEqual`
- // so this check is technically not needed; it is done anyway for completeness in terms of
- // whether the `DirectiveTypeCheckMeta` struct itself compares equal or not.
+ // Note: changes in the number of type parameters is also considered in
+ // `areTypeParametersEqual` so this check is technically not needed; it is done anyway for
+ // completeness in terms of whether the `DirectiveTypeCheckMeta` struct itself compares
+ // equal or not.
  return false;
  }
  if (!isArrayEqual(current.ngTemplateGuards, previous.ngTemplateGuards, isTemplateGuardEqual)) {

packages/compiler-cli/test/ngtsc/incremental_typecheck_spec.ts

@@ -80,6 +80,161 @@ runInEachFileSystem(() => {
  env.driveMain();
  });
 
+ it('should type-check correctly when a backing signal input field is renamed', () => {
+ // This test verifies that renaming the class field of an input is correctly reflected into
+ // the TCB.
+ env.write('dir.ts', `
+ import {Directive, input} from '@angular/core';
+
+ @Directive({
+ selector: '[dir]',
+ })
+ export class Dir {
+ dir = input.required<string>();
+ }
+ `);
+ env.write('cmp.ts', `
+ import {Component} from '@angular/core';
+
+ @Component({
+ selector: 'test-cmp',
+ template: '<div [dir]="foo"></div>',
+ })
+ export class Cmp {
+ foo = 'foo';
+ }
+ `);
+ env.write('mod.ts', `
+ import {NgModule} from '@angular/core';
+ import {Cmp} from './cmp';
+ import {Dir} from './dir';
+
+ @NgModule({
+ declarations: [Cmp, Dir],
+ })
+ export class Mod {}
+ `);
+ env.driveMain();
+
+ // Now rename the backing field of the input; the TCB should be updated such that the `dir`
+ // input binding is still valid.
+ env.write('dir.ts', `
+ import {Directive, input} from '@angular/core';
+
+ @Directive({
+ selector: '[dir]',
+ })
+ export class Dir {
+ dirRenamed = input.required<string>({alias: 'dir'});
+ }
+ `);
+ env.driveMain();
+ });
+
+ it('should type-check correctly when an decorator-input is changed to a signal input', () => {
+ env.write('dir.ts', `
+ import {Directive, Input} from '@angular/core';
+
+ @Directive({
+ selector: '[dir]',
+ })
+ export class Dir {
+ @Input() dir!: string;
+ }
+ `);
+ env.write('cmp.ts', `
+ import {Component} from '@angular/core';
+
+ @Component({
+ selector: 'test-cmp',
+ template: '<div [dir]="foo"></div>',
+ })
+ export class Cmp {
+ foo = 'foo';
+ }
+ `);
+ env.write('mod.ts', `
+ import {NgModule} from '@angular/core';
+ import {Cmp} from './cmp';
+ import {Dir} from './dir';
+
+ @NgModule({
+ declarations: [Cmp, Dir],
+ })
+ export class Mod {}
+ `);
+ env.driveMain();
+
+ // Now, the input is changed to a signal input. The template should still be valid.
+ // If this `isSignal` change would not be detected, `string` would never be assignable
+ // to `InputSignal` because the TCB would not unwrap it.
+ env.write('dir.ts', `
+ import {Directive, input} from '@angular/core';
+
+ @Directive({
+ selector: '[dir]',
+ })
+ export class Dir {
+ dir = input<string>();
+ }
+ `);
+ env.driveMain();
+ });
+
+ it('should type-check correctly when signal input transform is added', () => {
+ env.write('dir.ts', `
+ import {Directive, input} from '@angular/core';
+
+ @Directive({
+ selector: '[dir]',
+ })
+ export class Dir {
+ dir = input.required<string>();
+ }
+ `);
+ env.write('cmp.ts', `
+ import {Component} from '@angular/core';
+
+ @Component({
+ selector: 'test-cmp',
+ template: '<div [dir]="foo"></div>',
+ })
+ export class Cmp {
+ foo = 'foo';
+ }
+ `);
+ env.write('mod.ts', `
+ import {NgModule} from '@angular/core';
+ import {Cmp} from './cmp';
+ import {Dir} from './dir';
+
+ @NgModule({
+ declarations: [Cmp, Dir],
+ })
+ export class Mod {}
+ `);
+ env.driveMain();
+
+ // Transform is added and the input no longer accepts `string`, but only a boolean.
+ // This should result in diagnostics now, assuming the TCB is checked again.
+ env.write('dir.ts', `
+ import {Directive, input} from '@angular/core';
+
+ @Directive({
+ selector: '[dir]',
+ })
+ export class Dir {
+ dir = input.required<string, boolean>({
+ transform: v => v.toString(),
+ });
+ }
+ `);
+ const diagnostics = env.driveDiagnostics();
+ expect(diagnostics.length).toBe(1);
+ expect(diagnostics[0].messageText)
+ .toBe(`Type 'string' is not assignable to type 'boolean'.`);
+ });
+
  it('should type-check correctly when a backing output field is renamed', () => {
  // This test verifies that renaming the class field of an output is correctly reflected into
  // the TCB.