refactor(compiler): integrate new AST nodes into visitors (#60724)

crisbeto · atscott · commit 92c4123a7496 · 2025-04-04T11:28:47.000-07:00
Updates the various visitors to add placeholders for the new AST nodes. PR Close #60724
diff --git a/packages/compiler-cli/src/ngtsc/indexer/src/template.ts b/packages/compiler-cli/src/ngtsc/indexer/src/template.ts
@@ -18,11 +18,13 @@ import {
   TmplAstBoundDeferredTrigger,
   TmplAstBoundEvent,
   TmplAstBoundText,
+  TmplAstComponent,
   TmplAstDeferredBlock,
   TmplAstDeferredBlockError,
   TmplAstDeferredBlockLoading,
   TmplAstDeferredBlockPlaceholder,
   TmplAstDeferredTrigger,
+  TmplAstDirective,
   TmplAstElement,
   TmplAstForLoopBlock,
   TmplAstForLoopBlockEmpty,
@@ -242,6 +244,7 @@ class TemplateVisitor extends TmplAstRecursiveVisitor {
     this.visitAll(element.references);
     this.visitAll(element.inputs);
     this.visitAll(element.attributes);
+    this.visitAll(element.directives);
     this.visitAll(element.children);
     this.visitAll(element.outputs);
   }
@@ -253,6 +256,7 @@ class TemplateVisitor extends TmplAstRecursiveVisitor {
       this.identifiers.add(templateIdentifier);
     }
 
+    this.visitAll(template.directives);
     this.visitAll(template.variables);
     this.visitAll(template.attributes);
     this.visitAll(template.templateAttrs);
@@ -363,6 +367,14 @@ class TemplateVisitor extends TmplAstRecursiveVisitor {
     this.visitExpression(decl.value);
   }
 
+  override visitComponent(component: TmplAstComponent): void {
+    throw new Error('TODO');
+  }
+
+  override visitDirective(directive: TmplAstDirective): void {
+    throw new Error('TODO');
+  }
+
   /** Creates an identifier for a template element or template node. */
   private elementOrTemplateToIdentifier(
     node: TmplAstElement | TmplAstTemplate,
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/extended/api/api.ts b/packages/compiler-cli/src/ngtsc/typecheck/extended/api/api.ts
@@ -15,12 +15,14 @@ import {
   TmplAstBoundDeferredTrigger,
   TmplAstBoundEvent,
   TmplAstBoundText,
+  TmplAstComponent,
   TmplAstContent,
   TmplAstDeferredBlock,
   TmplAstDeferredBlockError,
   TmplAstDeferredBlockLoading,
   TmplAstDeferredBlockPlaceholder,
   TmplAstDeferredTrigger,
+  TmplAstDirective,
   TmplAstElement,
   TmplAstForLoopBlock,
   TmplAstForLoopBlockEmpty,
@@ -185,6 +187,7 @@ class TemplateVisitor<Code extends ErrorCode>
     this.visitAllNodes(element.attributes);
     this.visitAllNodes(element.inputs);
     this.visitAllNodes(element.outputs);
+    this.visitAllNodes(element.directives);
     this.visitAllNodes(element.references);
     this.visitAllNodes(element.children);
   }
@@ -201,6 +204,8 @@ class TemplateVisitor<Code extends ErrorCode>
       this.visitAllNodes(template.outputs);
     }
 
+    this.visitAllNodes(template.directives);
+
     // TODO(crisbeto): remove this condition when deleting `canVisitStructuralAttributes`.
     if (this.check.canVisitStructuralAttributes || isInlineTemplate) {
       // `templateAttrs` aren't transferred over to the inner element so we always have to visit them.
@@ -291,6 +296,22 @@ class TemplateVisitor<Code extends ErrorCode>
     this.visitAst(decl.value);
   }
 
+  visitComponent(component: TmplAstComponent) {
+    this.visitAllNodes(component.attributes);
+    this.visitAllNodes(component.inputs);
+    this.visitAllNodes(component.outputs);
+    this.visitAllNodes(component.directives);
+    this.visitAllNodes(component.references);
+    this.visitAllNodes(component.children);
+  }
+
+  visitDirective(directive: TmplAstDirective) {
+    this.visitAllNodes(directive.attributes);
+    this.visitAllNodes(directive.inputs);
+    this.visitAllNodes(directive.outputs);
+    this.visitAllNodes(directive.references);
+  }
+
   getDiagnostics(template: TmplAstNode[]): NgTemplateDiagnostic<Code>[] {
     this.diagnostics = [];
     this.visitAllNodes(template);
diff --git a/packages/compiler/src/render3/view/t2_binder.ts b/packages/compiler/src/render3/view/t2_binder.ts
@@ -22,12 +22,14 @@ import {
   BoundEvent,
   BoundText,
   Comment,
+  Component,
   Content,
   DeferredBlock,
   DeferredBlockError,
   DeferredBlockLoading,
   DeferredBlockPlaceholder,
   DeferredTrigger,
+  Directive,
   Element,
   ForLoopBlock,
   ForLoopBlockEmpty,
@@ -338,6 +340,8 @@ class Scope implements Visitor {
   }
 
   visitElement(element: Element) {
+    element.directives.forEach((node) => node.visit(this));
+
     // `Element`s in the template may have `Reference`s which are captured in the scope.
     element.references.forEach((node) => this.visitReference(node));
 
@@ -348,6 +352,8 @@ class Scope implements Visitor {
   }
 
   visitTemplate(template: Template) {
+    template.directives.forEach((node) => node.visit(this));
+
     // References on a <ng-template> are defined in the outer scope, so capture them before
     // processing the template's child scope.
     template.references.forEach((node) => this.visitReference(node));
@@ -418,6 +424,14 @@ class Scope implements Visitor {
     this.maybeDeclare(decl);
   }
 
+  visitComponent(component: Component) {
+    throw new Error('TODO');
+  }
+
+  visitDirective(directive: Directive) {
+    throw new Error('TODO');
+  }
+
   // Unused visitors.
   visitBoundAttribute(attr: BoundAttribute) {}
   visitBoundEvent(event: BoundEvent) {}
@@ -537,6 +551,11 @@ class DirectiveBinder<DirectiveT extends DirectiveMeta> implements Visitor {
     // Do this by building up a `CssSelector` for the node.
     const cssSelector = createCssSelectorFromNode(node);
 
+    // TODO(crisbeto): account for selectorless directives here.
+    if (node.directives.length > 0) {
+      throw new Error('TODO');
+    }
+
     // Next, use the `SelectorMatcher` to get the list of directives on the node.
     const directives: DirectiveT[] = [];
     this.matcher.match(cssSelector, (_selector, results) => directives.push(...results));
@@ -660,6 +679,14 @@ class DirectiveBinder<DirectiveT extends DirectiveMeta> implements Visitor {
     content.children.forEach((child) => child.visit(this));
   }
 
+  visitComponent(component: Component) {
+    throw new Error('TODO');
+  }
+
+  visitDirective(directive: Directive) {
+    throw new Error('TODO');
+  }
+
   // Unused visitors.
   visitVariable(variable: Variable): void {}
   visitReference(reference: Reference): void {}
@@ -806,6 +833,7 @@ class TemplateBinder extends RecursiveAstVisitor implements Visitor {
     // Visit the inputs, outputs, and children of the element.
     element.inputs.forEach(this.visitNode);
     element.outputs.forEach(this.visitNode);
+    element.directives.forEach(this.visitNode);
     element.children.forEach(this.visitNode);
     element.references.forEach(this.visitNode);
   }
@@ -814,6 +842,7 @@ class TemplateBinder extends RecursiveAstVisitor implements Visitor {
     // First, visit inputs, outputs and template attributes of the template node.
     template.inputs.forEach(this.visitNode);
     template.outputs.forEach(this.visitNode);
+    template.directives.forEach(this.visitNode);
     template.templateAttrs.forEach(this.visitNode);
     template.references.forEach(this.visitNode);
 
@@ -835,6 +864,14 @@ class TemplateBinder extends RecursiveAstVisitor implements Visitor {
     }
   }
 
+  visitComponent(component: Component) {
+    throw new Error('TODO');
+  }
+
+  visitDirective(directive: Directive) {
+    throw new Error('TODO');
+  }
+
   // Unused template visitors
   visitText(text: Text) {}
   visitTextAttribute(attribute: TextAttribute) {}
diff --git a/packages/compiler/test/render3/util/expression.ts b/packages/compiler/test/render3/util/expression.ts
@@ -137,10 +137,12 @@ class ExpressionSourceHumanizer extends e.RecursiveAstVisitor implements t.Visit
   }
 
   visitTemplate(ast: t.Template) {
+    t.visitAll(this, ast.directives);
     t.visitAll(this, ast.children);
     t.visitAll(this, ast.templateAttrs);
   }
   visitElement(ast: t.Element) {
+    t.visitAll(this, ast.directives);
     t.visitAll(this, ast.children);
     t.visitAll(this, ast.inputs);
     t.visitAll(this, ast.outputs);
@@ -231,6 +233,18 @@ class ExpressionSourceHumanizer extends e.RecursiveAstVisitor implements t.Visit
   visitLetDeclaration(decl: t.LetDeclaration) {
     decl.value.visit(this);
   }
+
+  visitComponent(ast: t.Component) {
+    t.visitAll(this, ast.children);
+    t.visitAll(this, ast.directives);
+    t.visitAll(this, ast.inputs);
+    t.visitAll(this, ast.outputs);
+  }
+
+  visitDirective(ast: t.Directive) {
+    t.visitAll(this, ast.inputs);
+    t.visitAll(this, ast.outputs);
+  }
 }
 
 /**
diff --git a/packages/compiler/test/render3/view/util.ts b/packages/compiler/test/render3/view/util.ts
@@ -105,11 +105,13 @@ export function findExpression(tmpl: a.Node[], expr: string): e.AST | null {
 }
 
 function findExpressionInNode(node: a.Node, expr: string): e.AST | null {
-  if (node instanceof a.Element || node instanceof a.Template) {
+  if (node instanceof a.Element || node instanceof a.Template || node instanceof a.Component) {
     return findExpression([...node.inputs, ...node.outputs, ...node.children], expr);
+  } else if (node instanceof a.Directive) {
+    return findExpression([...node.inputs, ...node.outputs], expr);
   } else if (node instanceof a.BoundAttribute || node instanceof a.BoundText) {
     const ts = toStringExpression(node.value);
-    return toStringExpression(node.value) === expr ? node.value : null;
+    return ts === expr ? node.value : null;
   } else if (node instanceof a.BoundEvent) {
     return toStringExpression(node.handler) === expr ? node.handler : null;
   } else {
@@ -148,12 +150,14 @@ export function parseR3(
     preserveWhitespaces?: boolean;
     leadingTriviaChars?: string[];
     ignoreError?: boolean;
+    selectorlessEnabled?: boolean;
   } = {},
 ): Render3ParseResult {
   const htmlParser = new HtmlParser();
   const parseResult = htmlParser.parse(input, 'path:://to/template', {
     tokenizeExpansionForms: true,
     leadingTriviaChars: options.leadingTriviaChars ?? LEADING_TRIVIA_CHARS,
+    selectorlessEnabled: options.selectorlessEnabled,
   });
 
   if (parseResult.errors.length > 0 && !options.ignoreError) {
diff --git a/packages/core/schematics/utils/template_ast_visitor.ts b/packages/core/schematics/utils/template_ast_visitor.ts
@@ -33,6 +33,8 @@ import type {
   TmplAstVariable,
   TmplAstUnknownBlock,
   TmplAstLetDeclaration,
+  TmplAstComponent,
+  TmplAstDirective,
 } from '@angular/compiler';
 
 /**
@@ -81,6 +83,8 @@ export class TemplateAstVisitor implements TmplAstRecursiveVisitor {
   visitIfBlock(block: TmplAstIfBlock): void {}
   visitIfBlockBranch(block: TmplAstIfBlockBranch): void {}
   visitLetDeclaration(decl: TmplAstLetDeclaration): void {}
+  visitComponent(component: TmplAstComponent): void {}
+  visitDirective(directive: TmplAstDirective): void {}
 
   /**
    * Visits all the provided nodes in order using this Visitor's visit methods.
diff --git a/packages/language-service/src/template_target.ts b/packages/language-service/src/template_target.ts
@@ -21,12 +21,14 @@ import {
   TmplAstBoundDeferredTrigger,
   TmplAstBoundEvent,
   TmplAstBoundText,
+  TmplAstComponent,
   TmplAstContent,
   TmplAstDeferredBlock,
   TmplAstDeferredBlockError,
   TmplAstDeferredBlockLoading,
   TmplAstDeferredBlockPlaceholder,
   TmplAstDeferredTrigger,
+  TmplAstDirective,
   TmplAstElement,
   TmplAstForLoopBlock,
   TmplAstForLoopBlockEmpty,
@@ -480,7 +482,11 @@ class TemplateTargetVisitor implements TmplAstVisitor {
   }
 
   visitElementOrTemplate(element: TmplAstTemplate | TmplAstElement) {
+    const isTemplate = element instanceof TmplAstTemplate;
     this.visitAll(element.attributes);
+    if (!isTemplate) {
+      this.visitAll(element.directives);
+    }
     this.visitAll(element.inputs);
     // We allow the path to contain both the `TmplAstBoundAttribute` and `TmplAstBoundEvent` for
     // two-way bindings but do not want the path to contain both the `TmplAstBoundAttribute` with
@@ -495,11 +501,11 @@ class TemplateTargetVisitor implements TmplAstVisitor {
       return;
     }
     this.visitAll(element.outputs);
-    if (element instanceof TmplAstTemplate) {
+    if (isTemplate) {
       this.visitAll(element.templateAttrs);
     }
     this.visitAll(element.references);
-    if (element instanceof TmplAstTemplate) {
+    if (isTemplate) {
       this.visitAll(element.variables);
     }
 
@@ -620,6 +626,14 @@ class TemplateTargetVisitor implements TmplAstVisitor {
     this.visitBinding(decl.value);
   }
 
+  visitComponent(component: TmplAstComponent) {
+    throw new Error('TODO');
+  }
+
+  visitDirective(directive: TmplAstDirective) {
+    throw new Error('TODO');
+  }
+
   visitAll(nodes: TmplAstNode[]) {
     for (const node of nodes) {
       this.visit(node);
