perf(compiler-cli): only generate type-check code for referenced DOM elements (angular#38418)

The template type-checker would generate a statement with a call
expression for all DOM elements in a template of the form:

```
const _t1 = document.createElement("div");
```

Profiling has shown that this is a particularly expensive call to
perform type inference on, as TypeScript needs to perform signature
selection of `Document.createElement` and resolve the exact type from
the `HTMLElementTagNameMap`. However, it can be observed that the
statement by itself does not contribute anything to the type-checking
result if `_t1` is not actually used anywhere, which is only rarely the
case---it requires that the element is referenced by its name from
somewhere else in the template. Consequently, the type-checker can skip
generating this statement altogether for most DOM elements.

The effect of this optimization is significant in several phases:
1. Less type-check code to generate
2. Less type-check code to emit and parse again
3. No expensive type inference to perform for the call expression

The effect on phase 3 is the most significant here, as type-checking is
not currently incremental in the sense that only phases 1 and 2 can
be reused from a prior compilation. The actual type-checking of all
templates in phase 3 needs to be repeated on each incremental
compilation, so any performance gains we achieve here are very
beneficial.

PR Close angular#38418

Author: JoostK

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

@@ -99,6 +99,13 @@ export function generateTypeCheckBlock(
  * `ts.Expression` which can be used to reference the operation's result.
  */
 abstract class TcbOp {
+  /**
+   * Set to true if this operation can be considered optional. Optional operations are only executed
+   * when depended upon by other operations, otherwise they are disregarded. This allows for less
+   * code to generate, parse and type-check, overall positively contributing to performance.
+   */
+  abstract readonly optional: boolean;
+
   abstract execute(): ts.Expression|null;
 
   /**
@@ -125,6 +132,13 @@ class TcbElementOp extends TcbOp {
     super();
   }
 
+  get optional() {
+    // The statement generated by this operation is only used for type-inference of the DOM
+    // element's type and won't report diagnostics by itself, so the operation is marked as optional
+    // to avoid generating statements for DOM elements that are never referenced.
+    return true;
+  }
+
   execute(): ts.Identifier {
     const id = this.tcb.allocateId();
     // Add the declaration of the element using document.createElement.
@@ -148,6 +162,10 @@ class TcbVariableOp extends TcbOp {
     super();
   }
 
+  get optional() {
+    return false;
+  }
+
   execute(): ts.Identifier {
     // Look for a context variable for the template.
     const ctx = this.scope.resolve(this.template);
@@ -176,6 +194,10 @@ class TcbTemplateContextOp extends TcbOp {
     super();
   }
 
+  get optional() {
+    return false;
+  }
+
   execute(): ts.Identifier {
     // Allocate a template ctx variable and declare it with an 'any' type. The type of this variable
     // may be narrowed as a result of template guard conditions.
@@ -198,6 +220,10 @@ class TcbTemplateBodyOp extends TcbOp {
     super();
   }
 
+  get optional() {
+    return false;
+  }
+
   execute(): null {
     // An `if` will be constructed, within which the template's children will be type checked. The
     // `if` is used for two reasons: it creates a new syntactic scope, isolating variables declared
@@ -301,6 +327,10 @@ class TcbTextInterpolationOp extends TcbOp {
     super();
   }
 
+  get optional() {
+    return false;
+  }
+
   execute(): null {
     const expr = tcbExpression(this.binding.value, this.tcb, this.scope);
     this.scope.addStatement(ts.createExpressionStatement(expr));
@@ -324,6 +354,10 @@ class TcbDirectiveTypeOp extends TcbOp {
     super();
   }
 
+  get optional() {
+    return false;
+  }
+
   execute(): ts.Identifier {
     const id = this.tcb.allocateId();
 
@@ -352,6 +386,10 @@ class TcbDirectiveCtorOp extends TcbOp {
     super();
   }
 
+  get optional() {
+    return false;
+  }
+
   execute(): ts.Identifier {
     const id = this.tcb.allocateId();
 
@@ -409,6 +447,10 @@ class TcbDirectiveInputsOp extends TcbOp {
     super();
   }
 
+  get optional() {
+    return false;
+  }
+
   execute(): null {
     const dirId = this.scope.resolve(this.node, this.dir);
 
@@ -514,6 +556,10 @@ class TcbDirectiveCtorCircularFallbackOp extends TcbOp {
     super();
   }
 
+  get optional() {
+    return false;
+  }
+
   execute(): ts.Identifier {
     const id = this.tcb.allocateId();
     const typeCtor = this.tcb.env.typeCtorFor(this.dir);
@@ -541,6 +587,10 @@ class TcbDomSchemaCheckerOp extends TcbOp {
     super();
   }
 
+  get optional() {
+    return false;
+  }
+
   execute(): ts.Expression|null {
     if (this.checkElement) {
       this.tcb.domSchemaChecker.checkElement(this.tcb.id, this.element, this.tcb.schemas);
@@ -597,10 +647,14 @@ class TcbUnclaimedInputsOp extends TcbOp {
     super();
   }
 
+  get optional() {
+    return false;
+  }
+
   execute(): null {
     // `this.inputs` contains only those bindings not matched by any directive. These bindings go to
     // the element itself.
-    const elId = this.scope.resolve(this.element);
+    let elId: ts.Expression|null = null;
 
     // TODO(alxhub): this could be more efficient.
     for (const binding of this.element.inputs) {
@@ -622,6 +676,9 @@ class TcbUnclaimedInputsOp extends TcbOp {
 
       if (this.tcb.env.config.checkTypeOfDomBindings && binding.type === BindingType.Property) {
         if (binding.name !== 'style' && binding.name !== 'class') {
+          if (elId === null) {
+            elId = this.scope.resolve(this.element);
+          }
           // A direct binding to a property.
           const propertyName = ATTR_TO_PROP[binding.name] || binding.name;
           const prop = ts.createElementAccess(elId, ts.createStringLiteral(propertyName));
@@ -656,6 +713,10 @@ class TcbDirectiveOutputsOp extends TcbOp {
     super();
   }
 
+  get optional() {
+    return false;
+  }
+
   execute(): null {
     const dirId = this.scope.resolve(this.node, this.dir);
 
@@ -723,8 +784,12 @@ class TcbUnclaimedOutputsOp extends TcbOp {
     super();
   }
 
+  get optional() {
+    return false;
+  }
+
   execute(): null {
-    const elId = this.scope.resolve(this.element);
+    let elId: ts.Expression|null = null;
 
     // TODO(alxhub): this could be more efficient.
     for (const output of this.element.outputs) {
@@ -749,6 +814,9 @@ class TcbUnclaimedOutputsOp extends TcbOp {
         // base `Event` type.
         const handler = tcbCreateEventHandler(output, this.tcb, this.scope, EventParamType.Infer);
 
+        if (elId === null) {
+          elId = this.scope.resolve(this.element);
+        }
         const call = ts.createCall(
             /* expression */ ts.createPropertyAccess(elId, 'addEventListener'),
             /* typeArguments */ undefined,
@@ -965,7 +1033,7 @@ class Scope {
    */
   render(): ts.Statement[] {
     for (let i = 0; i < this.opQueue.length; i++) {
-      this.executeOp(i);
+      this.executeOp(i, /* skipOptional */ true);
     }
     return this.statements;
   }
@@ -1031,7 +1099,7 @@ class Scope {
    * Like `executeOp`, but assert that the operation actually returned `ts.Expression`.
    */
   private resolveOp(opIndex: number): ts.Expression {
-    const res = this.executeOp(opIndex);
+    const res = this.executeOp(opIndex, /* skipOptional */ false);
     if (res === null) {
       throw new Error(`Error resolving operation, got null`);
     }
@@ -1045,12 +1113,16 @@ class Scope {
    * and also protects against a circular dependency from the operation to itself by temporarily
    * setting the operation's result to a special expression.
    */
-  private executeOp(opIndex: number): ts.Expression|null {
+  private executeOp(opIndex: number, skipOptional: boolean): ts.Expression|null {
     const op = this.opQueue[opIndex];
     if (!(op instanceof TcbOp)) {
       return op;
     }
 
+    if (skipOptional && op.optional) {
+      return null;
+    }
+
     // Set the result of the operation in the queue to its circular fallback. If executing this
     // operation results in a circular dependency, this will prevent an infinite loop and allow for
     // the resolution of such cycles.

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

@@ -158,7 +158,7 @@ describe('type check blocks diagnostics', () => {
         }];
         const TEMPLATE = `<my-cmp #a></my-cmp>{{ a || a }}`;
         expect(tcbWithSpans(TEMPLATE, DIRECTIVES))
-            .toContain('((_t2 /*23,24*/) || (_t2 /*28,29*/) /*23,29*/);');
+            .toContain('((_t1 /*23,24*/) || (_t1 /*28,29*/) /*23,29*/);');
       });
     });
   });