refactor(compiler-cli): pass in tag name to schema checker (angular#60977)

Updates the `DomSchemaChecker` to require the tag name as a string, rather than the entire DOM node. This makes selectorless a bit easier to intergrate.

PR Close angular#60977

Author: crisbeto

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

@@ -10,7 +10,6 @@ import {
   DomElementSchemaRegistry,
   ParseSourceSpan,
   SchemaMetadata,
-  TmplAstElement,
   TmplAstHostElement,
 } from '@angular/compiler';
 import ts from 'typescript';
@@ -43,16 +42,17 @@ export interface DomSchemaChecker {
   /**
    * Check a non-Angular element and record any diagnostics about it.
    *
-   * @param id the template ID, suitable for resolution with a `TcbSourceResolver`.
-   * @param element the element node in question.
-   * @param schemas any active schemas for the template, which might affect the validity of the
+   * @param id Template ID, suitable for resolution with a `TcbSourceResolver`.
+   * @param tagName Tag name of the element in question
+   * @param sourceSpanForDiagnostics Span that should be used when reporting diagnostics.
+   * @param schemas Any active schemas for the template, which might affect the validity of the
    * element.
-   * @param hostIsStandalone boolean indicating whether the element's host is a standalone
-   *     component.
+   * @param hostIsStandalone Indicates whether the element's host is a standalone component.
    */
   checkElement(
-    id: string,
-    element: TmplAstElement,
+    id: TypeCheckId,
+    tagName: string,
+    sourceSpanForDiagnostics: ParseSourceSpan,
     schemas: SchemaMetadata[],
     hostIsStandalone: boolean,
   ): void;
@@ -61,7 +61,7 @@ export interface DomSchemaChecker {
    * Check a property binding on an element and record any diagnostics about it.
    *
    * @param id the type check ID, suitable for resolution with a `TcbSourceResolver`.
-   * @param element the element node in question.
+   * @param tagName tag name of the element.
    * @param name the name of the property being checked.
    * @param span the source span of the binding. This is redundant with `element.attributes` but is
    * passed separately to avoid having to look up the particular property name.
@@ -70,7 +70,7 @@ export interface DomSchemaChecker {
    */
   checkTemplateElementProperty(
     id: string,
-    element: TmplAstElement,
+    tagName: string,
     name: string,
     span: ParseSourceSpan,
     schemas: SchemaMetadata[],
@@ -110,14 +110,15 @@ export class RegistryDomSchemaChecker implements DomSchemaChecker {
 
   checkElement(
     id: TypeCheckId,
-    element: TmplAstElement,
+    tagName: string,
+    sourceSpanForDiagnostics: ParseSourceSpan,
     schemas: SchemaMetadata[],
     hostIsStandalone: boolean,
   ): void {
     // HTML elements inside an SVG `foreignObject` are declared in the `xhtml` namespace.
     // We need to strip it before handing it over to the registry because all HTML tag names
     // in the registry are without a namespace.
-    const name = element.name.replace(REMOVE_XHTML_REGEX, '');
+    const name = tagName.replace(REMOVE_XHTML_REGEX, '');
 
     if (!REGISTRY.hasElement(name, schemas)) {
       const mapping = this.resolver.getTemplateSourceMapping(id);
@@ -138,7 +139,7 @@ export class RegistryDomSchemaChecker implements DomSchemaChecker {
       const diag = makeTemplateDiagnostic(
         id,
         mapping,
-        element.startSourceSpan,
+        sourceSpanForDiagnostics,
         ts.DiagnosticCategory.Error,
         ngErrorCode(ErrorCode.SCHEMA_INVALID_ELEMENT),
         errorMsg,
@@ -149,32 +150,32 @@ export class RegistryDomSchemaChecker implements DomSchemaChecker {
 
   checkTemplateElementProperty(
     id: TypeCheckId,
-    element: TmplAstElement,
+    tagName: string,
     name: string,
     span: ParseSourceSpan,
     schemas: SchemaMetadata[],
     hostIsStandalone: boolean,
   ): void {
-    if (!REGISTRY.hasProperty(element.name, name, schemas)) {
+    if (!REGISTRY.hasProperty(tagName, name, schemas)) {
       const mapping = this.resolver.getTemplateSourceMapping(id);
 
       const decorator = hostIsStandalone ? '@Component' : '@NgModule';
       const schemas = `'${decorator}.schemas'`;
-      let errorMsg = `Can't bind to '${name}' since it isn't a known property of '${element.name}'.`;
-      if (element.name.startsWith('ng-')) {
+      let errorMsg = `Can't bind to '${name}' since it isn't a known property of '${tagName}'.`;
+      if (tagName.startsWith('ng-')) {
         errorMsg +=
           `\n1. If '${name}' is an Angular directive, then add 'CommonModule' to the '${decorator}.imports' of this component.` +
           `\n2. To allow any property add 'NO_ERRORS_SCHEMA' to the ${schemas} of this component.`;
-      } else if (element.name.indexOf('-') > -1) {
+      } else if (tagName.indexOf('-') > -1) {
         errorMsg +=
           `\n1. If '${
-            element.name
+            tagName
           }' is an Angular component and it has '${name}' input, then verify that it is ${
             hostIsStandalone
               ? "included in the '@Component.imports' of this component"
               : 'part of this module'
           }.` +
-          `\n2. If '${element.name}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the ${schemas} of this component to suppress this message.` +
+          `\n2. If '${tagName}' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the ${schemas} of this component to suppress this message.` +
           `\n3. To allow any property add 'NO_ERRORS_SCHEMA' to the ${schemas} of this component.`;
       }
 

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

@@ -1152,7 +1152,8 @@ class TcbDomSchemaCheckerOp extends TcbOp {
     if (this.checkElement && isTemplateElement) {
       this.tcb.domSchemaChecker.checkElement(
         this.tcb.id,
-        element,
+        element.name,
+        element.startSourceSpan,
         this.tcb.schemas,
         this.tcb.hostIsStandalone,
       );
@@ -1175,7 +1176,7 @@ class TcbDomSchemaCheckerOp extends TcbOp {
         if (isTemplateElement) {
           this.tcb.domSchemaChecker.checkTemplateElementProperty(
             this.tcb.id,
-            element,
+            element.name,
             propertyName,
             binding.sourceSpan,
             this.tcb.schemas,