refactor(compiler): allow different kinds of directive matchers to be passed to binder (angular#60952)

Updates the target binder to allow either a selector-based or selectorless matcher to be passed in. This will allow us to skip some of the overhead when matching directives to nodes.

PR Close angular#60952

Author: crisbeto

packages/compiler-cli/src/ngtsc/annotations/component/src/handler.ts

@@ -1047,6 +1047,8 @@ export class ComponentDecoratorHandler
         }
       }
     }
+
+    // TODO(crisbeto): implement for selectorless.
     const binder = new R3TargetBinder(matcher);
     const boundTemplate = binder.bind({template: analysis.template.diagNodes});
 
@@ -1076,6 +1078,7 @@ export class ComponentDecoratorHandler
       return;
     }
 
+    // TODO(crisbeto): implement for selectorless.
     const binder = new R3TargetBinder<TypeCheckableDirectiveMeta>(scope.matcher);
     const templateContext: TemplateContext = {
       nodes: meta.template.diagNodes,
@@ -2266,6 +2269,8 @@ function createTargetBinder(dependencies: Array<PipeMeta | DirectiveMeta | NgMod
       matcher.addSelectables(CssSelector.parse(dep.selector), [dep]);
     }
   }
+
+  // TODO(crisbeto): implement for selectorless.
   return new R3TargetBinder(matcher);
 }
 

packages/compiler/src/compiler.ts

@@ -245,7 +245,7 @@ export {createCssSelectorFromNode} from './render3/view/util';
 export * from './resource_loader';
 export * from './schema/dom_element_schema_registry';
 export * from './schema/element_schema_registry';
-export * from './selector';
+export * from './directive_matching';
 export {Version} from './util';
 export * from './version';
 export {outputAst};

packages/compiler/src/core.ts

@@ -12,7 +12,7 @@
 // This is important to prevent a build cycle, as @angular/core needs to
 // be compiled with the compiler.
 
-import {CssSelector} from './selector';
+import {CssSelector} from './directive_matching';
 
 // Stores the default value of `emitDistinctChangesOnly` when the `emitDistinctChangesOnly` is not
 // explicitly set.

packages/compiler/src/selector.ts …kages/compiler/src/directive_matching.tspackages/compiler/src/selector.ts renamed to packages/compiler/src/directive_matching.ts packages/compiler/src/selector.ts renamed to packages/compiler/src/directive_matching.ts

@@ -472,3 +472,11 @@ export class SelectorContext<T = any> {
     return result;
   }
 }
+
+export class SelectorlessMatcher<T = unknown> {
+  constructor(private registry: Map<string, T>) {}
+
+  match(name: string): T | null {
+    return this.registry.get(name) ?? null;
+  }
+}

packages/compiler/src/jit_compiler_facade.ts

@@ -104,7 +104,7 @@ import {R3TargetBinder} from './render3/view/t2_binder';
 import {makeBindingParser, parseTemplate} from './render3/view/template';
 import {ResourceLoader} from './resource_loader';
 import {DomElementSchemaRegistry} from './schema/dom_element_schema_registry';
-import {SelectorMatcher} from './selector';
+import {SelectorMatcher} from './directive_matching';
 import {getJitStandaloneDefaultForVersion} from './util';
 
 export class CompilerFacadeImpl implements CompilerFacade {

packages/compiler/src/render3/view/compiler.ts

@@ -10,7 +10,7 @@ import {ConstantPool} from '../../constant_pool';
 import * as core from '../../core';
 import * as o from '../../output/output_ast';
 import {ParseError, ParseSourceSpan} from '../../parse_util';
-import {CssSelector} from '../../selector';
+import {CssSelector} from '../../directive_matching';
 import {ShadowCss} from '../../shadow_css';
 import {CompilationJobKind} from '../../template/pipeline/src/compilation';
 import {emitHostBindingFunction, emitTemplateFn, transform} from '../../template/pipeline/src/emit';

packages/compiler/src/render3/view/t2_binder.ts

@@ -16,7 +16,7 @@ import {
   SafePropertyRead,
   ThisReceiver,
 } from '../../expression_parser/ast';
-import {CssSelector, SelectorMatcher} from '../../selector';
+import {CssSelector, SelectorlessMatcher, SelectorMatcher} from '../../directive_matching';
 import {
   BoundAttribute,
   BoundEvent,
@@ -119,7 +119,7 @@ type DeferBlockScopes = [DeferredBlock, Scope][];
  *    where a host component (that owns the template) is located
  */
 export function findMatchingDirectivesAndPipes(template: string, directiveSelectors: string[]) {
-  const matcher = new SelectorMatcher<unknown[]>();
+  const matcher = new SelectorMatcher<DirectiveMeta[]>();
   for (const selector of directiveSelectors) {
     // Create a fake directive instance to account for the logic inside
     // of the `R3TargetBinder` class (which invokes the `hasBindingPropertyName`
@@ -137,11 +137,11 @@ export function findMatchingDirectivesAndPipes(template: string, directiveSelect
           return false;
         },
       },
-    };
+    } as unknown as DirectiveMeta;
     matcher.addSelectables(CssSelector.parse(selector), [fakeDirective]);
   }
   const parsedTemplate = parseTemplate(template, '' /* templateUrl */);
-  const binder = new R3TargetBinder(matcher as any);
+  const binder = new R3TargetBinder(matcher);
   const bound = binder.bind({template: parsedTemplate.nodes});
 
   const eagerDirectiveSelectors = bound.getEagerlyUsedDirectives().map((dir) => dir.selector!);
@@ -159,13 +159,18 @@ export function findMatchingDirectivesAndPipes(template: string, directiveSelect
   };
 }
 
+/** Object used to match template nodes to directives. */
+export type DirectiveMatcher<DirectiveT extends DirectiveMeta> =
+  | SelectorMatcher<DirectiveT[]>
+  | SelectorlessMatcher<DirectiveT[]>;
+
 /**
  * Processes `Target`s with a given set of directives and performs a binding operation, which
  * returns an object similar to TypeScript's `ts.TypeChecker` that contains knowledge about the
  * target.
  */
 export class R3TargetBinder<DirectiveT extends DirectiveMeta> implements TargetBinder<DirectiveT> {
-  constructor(private directiveMatcher: SelectorMatcher<DirectiveT[]>) {}
+  constructor(private directiveMatcher: DirectiveMatcher<DirectiveT>) {}
 
   /**
    * Perform a binding operation on the given `Target` and return a `BoundTarget` which contains
@@ -497,7 +502,7 @@ class DirectiveBinder<DirectiveT extends DirectiveMeta> implements Visitor {
   private isInDeferBlock = false;
 
   private constructor(
-    private matcher: SelectorMatcher<DirectiveT[]>,
+    private directiveMatcher: DirectiveMatcher<DirectiveT>,
     private directives: MatchedDirectives<DirectiveT>,
     private eagerDirectives: DirectiveT[],
     private bindings: BindingsMap<DirectiveT>,
@@ -518,14 +523,14 @@ class DirectiveBinder<DirectiveT extends DirectiveMeta> implements Visitor {
    */
   static apply<DirectiveT extends DirectiveMeta>(
     template: Node[],
-    selectorMatcher: SelectorMatcher<DirectiveT[]>,
+    directiveMatcher: DirectiveMatcher<DirectiveT>,
     directives: MatchedDirectives<DirectiveT>,
     eagerDirectives: DirectiveT[],
     bindings: BindingsMap<DirectiveT>,
     references: ReferenceMap<DirectiveT>,
   ): void {
     const matcher = new DirectiveBinder(
-      selectorMatcher,
+      directiveMatcher,
       directives,
       eagerDirectives,
       bindings,
@@ -547,23 +552,23 @@ class DirectiveBinder<DirectiveT extends DirectiveMeta> implements Visitor {
   }
 
   visitElementOrTemplate(node: Element | Template): void {
-    // First, determine the HTML shape of the node for the purpose of directive matching.
-    // Do this by building up a `CssSelector` for the node.
-    const cssSelector = createCssSelectorFromNode(node);
+    const directives: DirectiveT[] = [];
 
-    // TODO(crisbeto): account for selectorless directives here.
-    if (node.directives.length > 0) {
-      throw new Error('TODO');
-    }
+    if (this.directiveMatcher instanceof SelectorMatcher) {
+      // First, determine the HTML shape of the node for the purpose of directive matching.
+      // Do this by building up a `CssSelector` for the node.
+      const cssSelector = createCssSelectorFromNode(node);
 
-    // 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));
-    if (directives.length > 0) {
-      this.directives.set(node, directives);
-      if (!this.isInDeferBlock) {
-        this.eagerDirectives.push(...directives);
+      this.directiveMatcher.match(cssSelector, (_selector, results) => directives.push(...results));
+
+      if (directives.length > 0) {
+        this.directives.set(node, directives);
+        if (!this.isInDeferBlock) {
+          this.eagerDirectives.push(...directives);
+        }
       }
+    } else {
+      throw new Error('TODO');
     }
 
     // Resolve any references that are created on this node.

packages/compiler/src/render3/view/util.ts

@@ -10,7 +10,7 @@ import {InputFlags} from '../../core';
 import {BindingType} from '../../expression_parser/ast';
 import {splitNsName} from '../../ml_parser/tags';
 import * as o from '../../output/output_ast';
-import {CssSelector} from '../../selector';
+import {CssSelector} from '../../directive_matching';
 import * as t from '../r3_ast';
 
 import {isI18nAttribute} from './i18n/util';

packages/compiler/src/template_parser/binding_parser.ts

@@ -37,7 +37,7 @@ import {mergeNsAndName} from '../ml_parser/tags';
 import {InterpolatedAttributeToken, InterpolatedTextToken} from '../ml_parser/tokens';
 import {ParseError, ParseErrorLevel, ParseSourceSpan} from '../parse_util';
 import {ElementSchemaRegistry} from '../schema/element_schema_registry';
-import {CssSelector} from '../selector';
+import {CssSelector} from '../directive_matching';
 import {splitAtColon, splitAtPeriod} from '../util';
 
 const PROPERTY_PARTS_SEPARATOR = '.';

packages/compiler/test/render3/view/binding_spec.ts

@@ -9,9 +9,13 @@
 import * as e from '../../../src/expression_parser/ast';
 import * as a from '../../../src/render3/r3_ast';
 import {DirectiveMeta, InputOutputPropertySet} from '../../../src/render3/view/t2_api';
-import {findMatchingDirectivesAndPipes, R3TargetBinder} from '../../../src/render3/view/t2_binder';
-import {parseTemplate} from '../../../src/render3/view/template';
-import {CssSelector, SelectorMatcher} from '../../../src/selector';
+import {
+  DirectiveMatcher,
+  findMatchingDirectivesAndPipes,
+  R3TargetBinder,
+} from '../../../src/render3/view/t2_binder';
+import {parseTemplate, ParseTemplateOptions} from '../../../src/render3/view/template';
+import {CssSelector, SelectorMatcher} from '../../../src/directive_matching';
 
 import {findExpression} from './util';