feat(language-service): add quick info for inline templates in ivy (angular#39060)

Adds implementation for `getQuickInfoAtPosition` to the Ivy Language
Service, which now returns `ts.QuickInfo` for inline templates.

PR Close angular#39060

Author: atscott

packages/language-service/ivy/BUILD.bazel

@@ -15,6 +15,8 @@ ts_library(
         "//packages/compiler-cli/src/ngtsc/shims",
         "//packages/compiler-cli/src/ngtsc/typecheck",
         "//packages/compiler-cli/src/ngtsc/typecheck/api",
+        # TODO(atscott): Pull functions/variables common to VE and Ivy into a new package
+        "//packages/language-service",
         "@npm//typescript",
     ],
 )

packages/language-service/ivy/hybrid_visitor.ts

@@ -10,6 +10,8 @@ import {AbsoluteSourceSpan, ParseSourceSpan} from '@angular/compiler';
 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 {isTemplateNode, isTemplateNodeWithKeyAndValue} from './utils';
+
 /**
  * Return the template AST node or expression AST node that most accurately
  * represents the node at the specified cursor `position`.
@@ -165,24 +167,6 @@ class ExpressionVisitor extends e.RecursiveAstVisitor {
   }
 }
 
-export function isTemplateNode(node: t.Node|e.AST): node is t.Node {
-  // Template node implements the Node interface so we cannot use instanceof.
-  return node.sourceSpan instanceof ParseSourceSpan;
-}
-
-interface NodeWithKeyAndValue extends t.Node {
-  keySpan: ParseSourceSpan;
-  valueSpan?: ParseSourceSpan;
-}
-
-export function isTemplateNodeWithKeyAndValue(node: t.Node|e.AST): node is NodeWithKeyAndValue {
-  return isTemplateNode(node) && node.hasOwnProperty('keySpan');
-}
-
-export function isExpressionNode(node: t.Node|e.AST): node is e.AST {
-  return node instanceof e.AST;
-}
-
 function getSpanIncludingEndTag(ast: t.Node) {
   const result = {
     start: ast.sourceSpan.start.offset,

packages/language-service/ivy/language_service.ts

@@ -16,6 +16,8 @@ import {TypeCheckShimGenerator} from '@angular/compiler-cli/src/ngtsc/typecheck'
 import {OptimizeFor, TypeCheckingProgramStrategy} from '@angular/compiler-cli/src/ngtsc/typecheck/api';
 import * as ts from 'typescript/lib/tsserverlibrary';
 
+import {QuickInfoBuilder} from './quick_info';
+
 export class LanguageService {
   private options: CompilerOptions;
   private lastKnownProgram: ts.Program|null = null;
@@ -45,6 +47,12 @@ export class LanguageService {
     throw new Error('Ivy LS currently does not support external template');
   }
 
+  getQuickInfoAtPosition(fileName: string, position: number): ts.QuickInfo|undefined {
+    const program = this.strategy.getProgram();
+    const compiler = this.createCompiler(program);
+    return new QuickInfoBuilder(this.tsLS, compiler).get(fileName, position);
+  }
+
   private createCompiler(program: ts.Program): NgCompiler {
     return new NgCompiler(
         this.adapter,

packages/language-service/ivy/quick_info.ts

@@ -0,0 +1,237 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+import {AST, BindingPipe, ImplicitReceiver, MethodCall, TmplAstBoundAttribute, TmplAstNode, TmplAstTextAttribute} from '@angular/compiler';
+import {NgCompiler} from '@angular/compiler-cli/src/ngtsc/core';
+import {DirectiveSymbol, DomBindingSymbol, ElementSymbol, ExpressionSymbol, InputBindingSymbol, OutputBindingSymbol, ReferenceSymbol, ShimLocation, Symbol, SymbolKind, VariableSymbol} from '@angular/compiler-cli/src/ngtsc/typecheck/api';
+import * as ts from 'typescript';
+
+import {createQuickInfo, SYMBOL_PUNC, SYMBOL_SPACE, SYMBOL_TEXT} from '../src/hover';
+
+import {findNodeAtPosition} from './hybrid_visitor';
+import {filterAliasImports, getDirectiveMatches, getDirectiveMatchesForAttribute, getTemplateInfoAtPosition, getTextSpanOfNode} from './utils';
+
+/**
+ * The type of Angular directive. Used for QuickInfo in template.
+ */
+export enum QuickInfoKind {
+  COMPONENT = 'component',
+  DIRECTIVE = 'directive',
+  EVENT = 'event',
+  REFERENCE = 'reference',
+  ELEMENT = 'element',
+  VARIABLE = 'variable',
+  PIPE = 'pipe',
+  PROPERTY = 'property',
+  METHOD = 'method',
+  TEMPLATE = 'template',
+}
+
+export class QuickInfoBuilder {
+  private readonly typeChecker = this.compiler.getNextProgram().getTypeChecker();
+  constructor(private readonly tsLS: ts.LanguageService, private readonly compiler: NgCompiler) {}
+
+  get(fileName: string, position: number): ts.QuickInfo|undefined {
+    const templateInfo = getTemplateInfoAtPosition(fileName, position, this.compiler);
+    if (templateInfo === undefined) {
+      return undefined;
+    }
+    const {template, component} = templateInfo;
+
+    const node = findNodeAtPosition(template, position);
+    if (node === undefined) {
+      return undefined;
+    }
+
+    const symbol = this.compiler.getTemplateTypeChecker().getSymbolOfNode(node, component);
+    if (symbol === null) {
+      return isDollarAny(node) ? createDollarAnyQuickInfo(node) : undefined;
+    }
+
+    return this.getQuickInfoForSymbol(symbol, node);
+  }
+
+  private getQuickInfoForSymbol(symbol: Symbol, node: TmplAstNode|AST): ts.QuickInfo|undefined {
+    switch (symbol.kind) {
+      case SymbolKind.Input:
+      case SymbolKind.Output:
+        return this.getQuickInfoForBindingSymbol(symbol, node);
+      case SymbolKind.Template:
+        return createNgTemplateQuickInfo(node);
+      case SymbolKind.Element:
+        return this.getQuickInfoForElementSymbol(symbol);
+      case SymbolKind.Variable:
+        return this.getQuickInfoForVariableSymbol(symbol, node);
+      case SymbolKind.Reference:
+        return this.getQuickInfoForReferenceSymbol(symbol, node);
+      case SymbolKind.DomBinding:
+        return this.getQuickInfoForDomBinding(node, symbol);
+      case SymbolKind.Directive:
+        return this.getQuickInfoAtShimLocation(symbol.shimLocation, node);
+      case SymbolKind.Expression:
+        return node instanceof BindingPipe ?
+            this.getQuickInfoForPipeSymbol(symbol, node) :
+            this.getQuickInfoAtShimLocation(symbol.shimLocation, node);
+    }
+  }
+
+  private getQuickInfoForBindingSymbol(
+      symbol: InputBindingSymbol|OutputBindingSymbol, node: TmplAstNode|AST): ts.QuickInfo
+      |undefined {
+    if (symbol.bindings.length === 0) {
+      return undefined;
+    }
+
+    const kind = symbol.kind === SymbolKind.Input ? QuickInfoKind.PROPERTY : QuickInfoKind.EVENT;
+
+    const quickInfo = this.getQuickInfoAtShimLocation(symbol.bindings[0].shimLocation, node);
+    return quickInfo === undefined ? undefined : updateQuickInfoKind(quickInfo, kind);
+  }
+
+  private getQuickInfoForElementSymbol(symbol: ElementSymbol): ts.QuickInfo {
+    const {templateNode} = symbol;
+    const matches = getDirectiveMatches(symbol.directives, templateNode.name);
+    if (matches.size > 0) {
+      return this.getQuickInfoForDirectiveSymbol(matches.values().next().value, templateNode);
+    }
+
+    return createQuickInfo(
+        templateNode.name, QuickInfoKind.ELEMENT, getTextSpanOfNode(templateNode),
+        undefined /* containerName */, this.typeChecker.typeToString(symbol.tsType));
+  }
+
+  private getQuickInfoForVariableSymbol(symbol: VariableSymbol, node: TmplAstNode|AST):
+      ts.QuickInfo {
+    const documentation = this.getDocumentationFromTypeDefAtLocation(symbol.shimLocation);
+    return createQuickInfo(
+        symbol.declaration.name, QuickInfoKind.VARIABLE, getTextSpanOfNode(node),
+        undefined /* containerName */, this.typeChecker.typeToString(symbol.tsType), documentation);
+  }
+
+  private getQuickInfoForReferenceSymbol(symbol: ReferenceSymbol, node: TmplAstNode|AST):
+      ts.QuickInfo {
+    const documentation = this.getDocumentationFromTypeDefAtLocation(symbol.shimLocation);
+    return createQuickInfo(
+        symbol.declaration.name, QuickInfoKind.REFERENCE, getTextSpanOfNode(node),
+        undefined /* containerName */, this.typeChecker.typeToString(symbol.tsType), documentation);
+  }
+
+  private getQuickInfoForPipeSymbol(symbol: ExpressionSymbol, node: TmplAstNode|AST): ts.QuickInfo
+      |undefined {
+    const quickInfo = this.getQuickInfoAtShimLocation(symbol.shimLocation, node);
+    return quickInfo === undefined ? undefined : updateQuickInfoKind(quickInfo, QuickInfoKind.PIPE);
+  }
+
+  private getQuickInfoForDomBinding(node: TmplAstNode|AST, symbol: DomBindingSymbol) {
+    if (!(node instanceof TmplAstTextAttribute) && !(node instanceof TmplAstBoundAttribute)) {
+      return undefined;
+    }
+    const directives = getDirectiveMatchesForAttribute(
+        node.name, symbol.host.templateNode, symbol.host.directives);
+    if (directives.size === 0) {
+      return undefined;
+    }
+
+    return this.getQuickInfoForDirectiveSymbol(directives.values().next().value, node);
+  }
+
+  private getQuickInfoForDirectiveSymbol(dir: DirectiveSymbol, node: TmplAstNode|AST):
+      ts.QuickInfo {
+    const kind = dir.isComponent ? QuickInfoKind.COMPONENT : QuickInfoKind.DIRECTIVE;
+    const documentation = this.getDocumentationFromTypeDefAtLocation(dir.shimLocation);
+    return createQuickInfo(
+        this.typeChecker.typeToString(dir.tsType), kind, getTextSpanOfNode(node),
+        undefined /* containerName */, undefined, documentation);
+  }
+
+  private getDocumentationFromTypeDefAtLocation(shimLocation: ShimLocation):
+      ts.SymbolDisplayPart[]|undefined {
+    const typeDefs = this.tsLS.getTypeDefinitionAtPosition(
+        shimLocation.shimPath, shimLocation.positionInShimFile);
+    if (typeDefs === undefined || typeDefs.length === 0) {
+      return undefined;
+    }
+    return this.tsLS.getQuickInfoAtPosition(typeDefs[0].fileName, typeDefs[0].textSpan.start)
+        ?.documentation;
+  }
+
+  private getQuickInfoAtShimLocation(location: ShimLocation, node: TmplAstNode|AST): ts.QuickInfo
+      |undefined {
+    const quickInfo =
+        this.tsLS.getQuickInfoAtPosition(location.shimPath, location.positionInShimFile);
+    if (quickInfo === undefined || quickInfo.displayParts === undefined) {
+      return quickInfo;
+    }
+
+    quickInfo.displayParts = filterAliasImports(quickInfo.displayParts);
+
+    const textSpan = getTextSpanOfNode(node);
+    return {...quickInfo, textSpan};
+  }
+}
+
+function updateQuickInfoKind(quickInfo: ts.QuickInfo, kind: QuickInfoKind): ts.QuickInfo {
+  if (quickInfo.displayParts === undefined) {
+    return quickInfo;
+  }
+
+  const startsWithKind = quickInfo.displayParts.length >= 3 &&
+      displayPartsEqual(quickInfo.displayParts[0], {text: '(', kind: SYMBOL_PUNC}) &&
+      quickInfo.displayParts[1].kind === SYMBOL_TEXT &&
+      displayPartsEqual(quickInfo.displayParts[2], {text: ')', kind: SYMBOL_PUNC});
+  if (startsWithKind) {
+    quickInfo.displayParts[1].text = kind;
+  } else {
+    quickInfo.displayParts = [
+      {text: '(', kind: SYMBOL_PUNC},
+      {text: kind, kind: SYMBOL_TEXT},
+      {text: ')', kind: SYMBOL_PUNC},
+      {text: ' ', kind: SYMBOL_SPACE},
+      ...quickInfo.displayParts,
+    ];
+  }
+  return quickInfo;
+}
+
+function displayPartsEqual(a: {text: string, kind: string}, b: {text: string, kind: string}) {
+  return a.text === b.text && a.kind === b.kind;
+}
+
+function isDollarAny(node: TmplAstNode|AST): node is MethodCall {
+  return node instanceof MethodCall && node.receiver instanceof ImplicitReceiver &&
+      node.name === '$any' && node.args.length === 1;
+}
+
+function createDollarAnyQuickInfo(node: MethodCall): ts.QuickInfo {
+  return createQuickInfo(
+      '$any',
+      QuickInfoKind.METHOD,
+      getTextSpanOfNode(node),
+      /** containerName */ undefined,
+      'any',
+      [{
+        kind: SYMBOL_TEXT,
+        text: 'function to cast an expression to the `any` type',
+      }],
+  );
+}
+
+// TODO(atscott): Create special `ts.QuickInfo` for `ng-template` and `ng-container` as well.
+function createNgTemplateQuickInfo(node: TmplAstNode|AST): ts.QuickInfo {
+  return createQuickInfo(
+      'ng-template',
+      QuickInfoKind.TEMPLATE,
+      getTextSpanOfNode(node),
+      /** containerName */ undefined,
+      /** type */ undefined,
+      [{
+        kind: SYMBOL_TEXT,
+        text:
+            'The `<ng-template>` is an Angular element for rendering HTML. It is never displayed directly.',
+      }],
+  );
+}

packages/language-service/ivy/test/hybrid_visitor_spec.ts

@@ -10,7 +10,8 @@ import {ParseError, parseTemplate} from '@angular/compiler';
 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 {findNodeAtPosition, isExpressionNode, isTemplateNode} from '../hybrid_visitor';
+import {findNodeAtPosition} from '../hybrid_visitor';
+import {isExpressionNode, isTemplateNode} from '../utils';
 
 interface ParseResult {
   nodes: t.Node[];

packages/language-service/ivy/test/language_service_spec.ts

@@ -17,7 +17,7 @@ describe('parseNgCompilerOptions', () => {
     const options = parseNgCompilerOptions(project);
     expect(options).toEqual(jasmine.objectContaining({
       enableIvy: true,  // default for ivy is true
-      fullTemplateTypeCheck: true,
+      strictTemplates: true,
       strictInjectionParameters: true,
     }));
   });