refactor(compiler-cli): type check viewport trigger options (angular#64130)

Updates the template type checker to check the options of the `viewport` trigger against `IntersectionObserver`.

PR Close angular#64130

Author: crisbeto

packages/compiler-cli/src/ngtsc/typecheck/src/oob.ts

@@ -804,7 +804,7 @@ export class OutOfBandDiagnosticRecorderImpl implements OutOfBandDiagnosticRecor
         trigger.sourceSpan,
         ts.DiagnosticCategory.Error,
         ngErrorCode(ErrorCode.DEFER_IMPLICIT_TRIGGER_MISSING_PLACEHOLDER),
-        'Trigger with no parameters can only be placed on an @defer that has a @placeholder block',
+        'Trigger with no target can only be placed on an @defer that has a @placeholder block',
       ),
     );
   }
@@ -823,7 +823,7 @@ export class OutOfBandDiagnosticRecorderImpl implements OutOfBandDiagnosticRecor
         trigger.sourceSpan,
         ts.DiagnosticCategory.Error,
         ngErrorCode(ErrorCode.DEFER_IMPLICIT_TRIGGER_INVALID_PLACEHOLDER),
-        'Trigger with no parameters can only be placed on an @defer that has a ' +
+        'Trigger with no target can only be placed on an @defer that has a ' +
           '@placeholder block with exactly one root element node',
       ),
     );

packages/compiler-cli/src/ngtsc/typecheck/src/type_check_block.ts

@@ -2121,6 +2121,34 @@ class TcbForOfOp extends TcbOp {
   }
 }
 
+/**
+ * A `TcbOp` which can be used to type check the options of an `IntersectionObserver`.
+ */
+class TcbIntersectionObserverOp extends TcbOp {
+  constructor(
+    private tcb: Context,
+    private scope: Scope,
+    private options: AST,
+  ) {
+    super();
+  }
+
+  override readonly optional = false;
+
+  override execute(): null {
+    const options = tcbExpression(this.options, this.tcb, this.scope);
+    const callback = ts.factory.createNonNullExpression(ts.factory.createNull());
+    const expression = ts.factory.createNewExpression(
+      ts.factory.createIdentifier('IntersectionObserver'),
+      undefined,
+      [callback, options],
+    );
+
+    this.scope.addStatement(ts.factory.createExpressionStatement(expression));
+    return null;
+  }
+}
+
 /**
  * Overall generation context for the type check block.
  *
@@ -3012,6 +3040,10 @@ class Scope {
       this.opQueue.push(new TcbExpressionOp(this.tcb, this, triggers.when.value));
     }
 
+    if (triggers.viewport !== undefined && triggers.viewport.options !== null) {
+      this.opQueue.push(new TcbIntersectionObserverOp(this.tcb, this, triggers.viewport.options));
+    }
+
     if (triggers.hover !== undefined) {
       this.validateReferenceBasedDeferredTrigger(block, triggers.hover);
     }

packages/compiler-cli/src/ngtsc/typecheck/test/type_check_block_spec.ts

@@ -1856,6 +1856,20 @@ describe('type check blocks', () => {
 
       expect(tcb(TEMPLATE)).toContain('((this).shouldShow()) && (((this).isVisible));');
     });
+
+    it('should generate options for `viewport` trigger', () => {
+      const TEMPLATE = `
+        @defer (on viewport({rootMargin: '123px'})) {
+          {{main()}}
+        } @placeholder {
+          <div>{{placeholder()}}</div>
+        }
+      `;
+
+      expect(tcb(TEMPLATE)).toContain(
+        'new IntersectionObserver(null!, { "rootMargin": "123px" }); "" + ((this).main()); "" + ((this).placeholder());',
+      );
+    });
   });
 
   describe('conditional blocks', () => {

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

@@ -1521,7 +1521,7 @@ runInEachFileSystem(() => {
         const diags = env.driveDiagnostics();
         expect(diags.length).toBe(1);
         expect(diags[0].messageText).toBe(
-          'Trigger with no parameters can only be placed on an @defer that has a @placeholder block',
+          'Trigger with no target can only be placed on an @defer that has a @placeholder block',
         );
       });
 
@@ -1539,7 +1539,7 @@ runInEachFileSystem(() => {
         const diags = env.driveDiagnostics();
         expect(diags.length).toBe(1);
         expect(diags[0].messageText).toBe(
-          'Trigger with no parameters can only be placed on an @defer that has a @placeholder block',
+          'Trigger with no target can only be placed on an @defer that has a @placeholder block',
         );
       });
 
@@ -1557,7 +1557,7 @@ runInEachFileSystem(() => {
         const diags = env.driveDiagnostics();
         expect(diags.length).toBe(1);
         expect(diags[0].messageText).toBe(
-          'Trigger with no parameters can only be placed on an @defer that has a @placeholder block with exactly one root element node',
+          'Trigger with no target can only be placed on an @defer that has a @placeholder block with exactly one root element node',
         );
       });
 
@@ -1575,7 +1575,7 @@ runInEachFileSystem(() => {
         const diags = env.driveDiagnostics();
         expect(diags.length).toBe(1);
         expect(diags[0].messageText).toBe(
-          'Trigger with no parameters can only be placed on an @defer that has a @placeholder block with exactly one root element node',
+          'Trigger with no target can only be placed on an @defer that has a @placeholder block with exactly one root element node',
         );
       });
 
@@ -1593,7 +1593,7 @@ runInEachFileSystem(() => {
         const diags = env.driveDiagnostics();
         expect(diags.length).toBe(1);
         expect(diags[0].messageText).toBe(
-          'Trigger with no parameters can only be placed on an @defer that has a @placeholder block',
+          'Trigger with no target can only be placed on an @defer that has a @placeholder block',
         );
       });
 
@@ -1611,7 +1611,7 @@ runInEachFileSystem(() => {
         const diags = env.driveDiagnostics();
         expect(diags.length).toBe(1);
         expect(diags[0].messageText).toBe(
-          'Trigger with no parameters can only be placed on an @defer that has a @placeholder block with exactly one root element node',
+          'Trigger with no target can only be placed on an @defer that has a @placeholder block with exactly one root element node',
         );
       });
 
@@ -1629,7 +1629,7 @@ runInEachFileSystem(() => {
         const diags = env.driveDiagnostics();
         expect(diags.length).toBe(1);
         expect(diags[0].messageText).toBe(
-          'Trigger with no parameters can only be placed on an @defer that has a @placeholder block with exactly one root element node',
+          'Trigger with no target can only be placed on an @defer that has a @placeholder block with exactly one root element node',
         );
       });
 
@@ -1650,7 +1650,7 @@ runInEachFileSystem(() => {
         const diags = env.driveDiagnostics();
         expect(diags.length).toBe(1);
         expect(diags[0].messageText).toBe(
-          'Trigger with no parameters can only be placed on an @defer that has a @placeholder block with exactly one root element node',
+          'Trigger with no target can only be placed on an @defer that has a @placeholder block with exactly one root element node',
         );
       });
     });

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

@@ -4910,6 +4910,32 @@ suppress
           'Trigger cannot find reference "trigger".',
         );
       });
+
+      it('should check the options of the `viewport` trigger', () => {
+        env.write(
+          'test.ts',
+          `
+          import {Component} from '@angular/core';
+
+          @Component({
+            template: \`
+              @defer (on viewport({trigger: target, rootMargin: '10px', doesNotExist: true})) {
+                Content
+              }
+
+              <div #target></div>
+            \`,
+          })
+          export class Main {}
+        `,
+        );
+
+        const diags = env.driveDiagnostics();
+        expect(diags.length).toBe(1);
+        expect(diags[0].messageText).toBe(
+          `Object literal may only specify known properties, and '"doesNotExist"' does not exist in type 'IntersectionObserverInit'.`,
+        );
+      });
     });
 
     describe('conditional blocks', () => {