refactor(language-service): make selector nullable (#48193)

crisbeto · dylhunn · commit 665d4650cd30 · 2022-11-23T09:27:03.000-08:00
This is a follow-up from #48147. Changes the `DirectiveSymbol.selector` to be nullable since it's possible to have directives without a selector. PR Close #48193
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/api/scope.ts b/packages/compiler-cli/src/ngtsc/typecheck/api/scope.ts
@@ -49,7 +49,7 @@ export interface PotentialDirective {
   /**
    * The selector for the directive or component.
    */
-  selector: string;
+  selector: string|null;
 
   /**
    * `true` if this directive is a component.
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/checker.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/checker.ts
@@ -601,6 +601,10 @@ export class TemplateTypeCheckerImpl implements TemplateTypeChecker {
     const scope = this.getScopeData(component);
     if (scope !== null) {
       for (const directive of scope.directives) {
+        if (directive.selector === null) {
+          continue;
+        }
+
         for (const selector of CssSelector.parse(directive.selector)) {
           if (selector.element === null || tagMap.has(selector.element)) {
             // Skip this directive if it doesn't match an element tag, or if another directive has
diff --git a/packages/compiler-cli/src/ngtsc/typecheck/src/template_symbol_builder.ts b/packages/compiler-cli/src/ngtsc/typecheck/src/template_symbol_builder.ts
@@ -180,9 +180,7 @@ export class SymbolBuilder {
           tsSymbol: symbol.tsSymbol,
           exposedInputs: current.inputs,
           exposedOutputs: current.outputs,
-          // TODO(crisbeto): rework `DirectiveSymbol` to make
-          // `selector` nullable and remove the `|| ''` here.
-          selector: meta.selector || '',
+          selector: meta.selector,
           isComponent: meta.isComponent,
           ngModule: this.getDirectiveModule(current.directive.node),
           kind: SymbolKind.Directive,
diff --git a/packages/language-service/src/utils.ts b/packages/language-service/src/utils.ts
@@ -10,7 +10,7 @@ import {NgCompiler} from '@angular/compiler-cli/src/ngtsc/core';
 import {absoluteFrom, absoluteFromSourceFile, AbsoluteFsPath} from '@angular/compiler-cli/src/ngtsc/file_system';
 import {isExternalResource} from '@angular/compiler-cli/src/ngtsc/metadata';
 import {DeclarationNode} from '@angular/compiler-cli/src/ngtsc/reflection';
-import {DirectiveSymbol, PotentialDirective, TemplateTypeChecker} from '@angular/compiler-cli/src/ngtsc/typecheck/api';
+import {DirectiveSymbol, TemplateTypeChecker} from '@angular/compiler-cli/src/ngtsc/typecheck/api';
 import * as e from '@angular/compiler/src/expression_parser/ast';  // e for expression AST
 import * as t from '@angular/compiler/src/render3/r3_ast';         // t for template AST
 import ts from 'typescript';
@@ -224,7 +224,7 @@ function difference<T>(left: Set<T>, right: Set<T>): Set<T> {
  * @returns The list of directives matching the tag name via the strategy described above.
  */
 // TODO(atscott): Add unit tests for this and the one for attributes
-export function getDirectiveMatchesForElementTag<T extends {selector: string}>(
+export function getDirectiveMatchesForElementTag<T extends {selector: string | null}>(
     element: t.Template|t.Element, directives: T[]): Set<T> {
   const attributes = getAttributes(element);
   const allAttrs = attributes.map(toAttributeCssSelector);
@@ -269,7 +269,7 @@ export function getDirectiveMatchesForAttribute(
  * Given a list of directives and a text to use as a selector, returns the directives which match
  * for the selector.
  */
-function getDirectiveMatchesForSelector<T extends {selector: string}>(
+function getDirectiveMatchesForSelector<T extends {selector: string | null}>(
     directives: T[], selector: string): Set<T> {
   try {
     const selectors = CssSelector.parse(selector);
