refactor(language-service): enable host binding features

Reworks the language service to enable features like quick info and definitions inside host bindings.

**Note:** for the full range of language service features to work, the changes from angular/vscode-ng-language-service#2155 have to be released.

Author: crisbeto

packages/language-service/src/definitions.ts

@@ -427,6 +427,15 @@ function getDefinitionForExpressionAtPosition(
     }
   }
 
+  if (resourceForExpression === null && resource.hostBindings !== null) {
+    for (const binding of resource.hostBindings) {
+      if (binding.node === expression) {
+        resourceForExpression = binding;
+        break;
+      }
+    }
+  }
+
   if (resourceForExpression === null || !isExternalResource(resourceForExpression)) {
     return;
   }

packages/language-service/src/language_service.ts

@@ -804,11 +804,51 @@ function isInTypeCheckContext(program: ts.Program, fileName: string, position: n
     return false;
   }
 
-  let asgn = getPropertyAssignmentFromValue(node, 'template');
-  if (asgn === null) {
+  const assignment = getPropertyAssignmentFromValue(node, 'template');
+  if (assignment !== null) {
+    return getClassDeclFromDecoratorProp(assignment) !== null;
+  }
+  return isHostBindingExpression(node);
+}
+
+function isHostBindingExpression(node: ts.Node): boolean {
+  if (!ts.isStringLiteralLike(node)) {
+    return false;
+  }
+
+  const assignment = closestAncestorNode(node, ts.isPropertyAssignment);
+  if (assignment === null || assignment.initializer !== node) {
+    return false;
+  }
+
+  const literal = closestAncestorNode(assignment, ts.isObjectLiteralExpression);
+  if (literal === null) {
+    return false;
+  }
+
+  const parentAssignment = getPropertyAssignmentFromValue(literal, 'host');
+  if (parentAssignment === null || parentAssignment.initializer !== literal) {
     return false;
   }
-  return getClassDeclFromDecoratorProp(asgn) !== null;
+
+  return getClassDeclFromDecoratorProp(parentAssignment) !== null;
+}
+
+function closestAncestorNode<T extends ts.Node>(
+  start: ts.Node,
+  predicate: (node: ts.Node) => node is T,
+): T | null {
+  let current = start.parent;
+
+  while (current) {
+    if (predicate(current)) {
+      return current;
+    } else {
+      current = current.parent;
+    }
+  }
+
+  return null;
 }
 
 function isInAngularContext(program: ts.Program, fileName: string, position: number) {
@@ -821,6 +861,10 @@ function isInAngularContext(program: ts.Program, fileName: string, position: num
     return false;
   }
 
+  if (isHostBindingExpression(node)) {
+    return true;
+  }
+
   const assignment =
     getPropertyAssignmentFromValue(node, 'template') ??
     getPropertyAssignmentFromValue(node, 'templateUrl') ??

packages/language-service/src/template_target.ts

@@ -30,6 +30,7 @@ import {
   TmplAstElement,
   TmplAstForLoopBlock,
   TmplAstForLoopBlockEmpty,
+  TmplAstHostElement,
   TmplAstIcu,
   TmplAstIfBlock,
   TmplAstIfBlockBranch,
@@ -430,8 +431,7 @@ class TemplateTargetVisitor implements TmplAstVisitor {
   private constructor(private readonly position: number) {}
 
   visit(node: TmplAstNode) {
-    const {start, end} = getSpanIncludingEndTag(node);
-    if (end !== null && !isWithin(this.position, {start, end})) {
+    if (!isWithinNode(this.position, node)) {
       return;
     }
 
@@ -461,6 +461,10 @@ class TemplateTargetVisitor implements TmplAstVisitor {
       // If cursor is within source span but not within key span or value span,
       // do not return the node.
       this.path.push(OUTSIDE_K_V_MARKER);
+    } else if (node instanceof TmplAstHostElement) {
+      this.path.push(node);
+      this.visitAll(node.bindings);
+      this.visitAll(node.listeners);
     } else {
       this.path.push(node);
       node.visit(this);
@@ -673,3 +677,20 @@ function getSpanIncludingEndTag(ast: TmplAstNode) {
   }
   return result;
 }
+
+/** Checks whether a position is within an AST node. */
+function isWithinNode(position: number, node: TmplAstNode): boolean {
+  if (!(node instanceof TmplAstHostElement)) {
+    return isWithin(position, getSpanIncludingEndTag(node));
+  }
+
+  // Host elements are special in that they don't have a contiguous source span. E.g. some bindings
+  // can be in the `host` literal in the decorator while others are on class members. That's why we
+  // need to check each binding, rather than the host element itself.
+  return (
+    (node.bindings.length > 0 &&
+      node.bindings.some((binding) => isWithin(position, binding.sourceSpan))) ||
+    (node.listeners.length > 0 &&
+      node.listeners.some((listener) => isWithin(position, listener.sourceSpan)))
+  );
+}

packages/language-service/src/utils/index.ts

@@ -136,21 +136,43 @@ function getInlineTypeCheckInfoAtPosition(
   // Return `undefined` if the position is not on the template expression or the template resource
   // is not inline.
   const resources = compiler.getDirectiveResources(classDecl);
+  if (resources === null) {
+    return undefined;
+  }
+
   if (
-    resources === null ||
-    resources.template === null ||
-    isExternalResource(resources.template) ||
-    expression !== resources.template.node
+    resources.template !== null &&
+    !isExternalResource(resources.template) &&
+    expression === resources.template.node
   ) {
-    return undefined;
+    const template = compiler.getTemplateTypeChecker().getTemplate(classDecl);
+    if (template === null) {
+      return undefined;
+    }
+
+    return {nodes: template, declaration: classDecl};
   }
 
-  const template = compiler.getTemplateTypeChecker().getTemplate(classDecl);
-  if (template === null) {
-    return undefined;
+  if (resources.hostBindings !== null) {
+    const start = expression.getStart();
+    const end = expression.getEnd();
+
+    for (const binding of resources.hostBindings) {
+      if (
+        !isExternalResource(binding) &&
+        start >= binding.node.getStart() &&
+        end <= binding.node.getEnd()
+      ) {
+        const hostElement = compiler.getTemplateTypeChecker().getHostElement(classDecl);
+
+        if (hostElement !== null) {
+          return {nodes: [hostElement], declaration: classDecl};
+        }
+      }
+    }
   }
 
-  return {nodes: template, declaration: classDecl};
+  return undefined;
 }
 
 /**

packages/language-service/test/completions_spec.ts

@@ -13,7 +13,7 @@ import {
   DisplayInfoKind,
   unsafeCastDisplayInfoKindToScriptElementKind,
 } from '../src/utils/display_parts';
-import {LanguageServiceTestEnv, OpenBuffer} from '../testing';
+import {LanguageServiceTestEnv, OpenBuffer, TestableOptions} from '../testing';
 
 const DIR_WITH_INPUT = {
   'Dir': `
@@ -2057,6 +2057,63 @@ describe('completions', () => {
       expectContain(completions, ts.ScriptElementKind.memberVariableElement, ['hasRing', 'size']);
     });
   });
+
+  describe('host bindings', () => {
+    it('should be able to complete a property host binding', () => {
+      const {appFile} = setupInlineTemplate(
+        '',
+        `title!: string; hero!: number;`,
+        undefined,
+        `host: {'[title]': 'ti'},`,
+        {
+          typeCheckHostBindings: true,
+        },
+      );
+      appFile.moveCursorToText(`'ti¦'`);
+      const completions = appFile.getCompletionsAtPosition();
+      expectContain(completions, ts.ScriptElementKind.memberVariableElement, ['title', 'hero']);
+    });
+
+    it('should be able to complete a listener host binding', () => {
+      const {appFile} = setupInlineTemplate(
+        '',
+        `title!: string; hero!: number;`,
+        undefined,
+        `host: {'(click)': 't'},`,
+        {
+          typeCheckHostBindings: true,
+        },
+      );
+      appFile.moveCursorToText(`'(click)': 't¦'`);
+      const completions = appFile.getCompletionsAtPosition();
+      expectContain(completions, ts.ScriptElementKind.memberVariableElement, ['title', 'hero']);
+    });
+
+    it('should be able to complete inside `host` of a directive', () => {
+      const {appFile} = setupInlineTemplate(
+        '',
+        '',
+        {
+          'Dir': `
+            @Directive({
+              host: {'[title]': 'ti'},
+            })
+            export class Dir {
+              title!: string;
+              hero!: number;
+            }
+          `,
+        },
+        undefined,
+        {
+          typeCheckHostBindings: true,
+        },
+      );
+      appFile.moveCursorToText(`'ti¦'`);
+      const completions = appFile.getCompletionsAtPosition();
+      expectContain(completions, ts.ScriptElementKind.memberVariableElement, ['title', 'hero']);
+    });
+  });
 });
 
 function expectContainInsertText(
@@ -2207,6 +2264,8 @@ function setupInlineTemplate(
   template: string,
   classContents: string,
   otherDeclarations: {[name: string]: string} = {},
+  componentMetadata = '',
+  compilerOptions?: TestableOptions,
 ): {
   appFile: OpenBuffer;
 } {
@@ -2215,13 +2274,16 @@ function setupInlineTemplate(
   const otherDirectiveClassDecls = Object.values(otherDeclarations).join('\n\n');
 
   const env = LanguageServiceTestEnv.setup();
-  const project = env.addProject('test', {
-    'test.ts': `
+  const project = env.addProject(
+    'test',
+    {
+      'test.ts': `
          import {Component, Directive, NgModule, Pipe, TemplateRef} from '@angular/core';
 
          @Component({
            template: '${template}',
            selector: 'app-cmp',
+           ${componentMetadata}
          })
          export class AppCmp {
            ${classContents}
@@ -2234,6 +2296,8 @@ function setupInlineTemplate(
          })
          export class AppModule {}
          `,
-  });
+    },
+    compilerOptions,
+  );
   return {appFile: project.openFile('test.ts')};
 }