feat: support autocompletion details

The Angular Language Service for Ivy will be able to provide completion
details for a template location, so we need to add `resolveProvider` to the
capabilities, and to translate completion resolution requests between LSP
and the `ts.LanguageService`.

Author: alxhub

integration/lsp/viewengine_spec.ts

@@ -62,6 +62,8 @@ describe('Angular language server', () => {
         },
         newText: 'charAt()',
       },
+      // The 'data' field is only meaningful in Ivy mode.
+      data: jasmine.anything(),
     });
   });
 

server/src/completion.ts

@@ -27,6 +27,42 @@ enum CompletionKind {
   entity = 'entity',
 }
 
+/**
+ * Information about the origin of an `lsp.CompletionItem`, which is stored in the
+ * `lsp.CompletionItem.data` property.
+ *
+ * On future requests for details about a completion item, this information allows the language
+ * service to determine the context for the original completion request, in order to return more
+ * detailed results.
+ */
+export interface NgCompletionOriginData {
+  /**
+   * Used to validate the type of `lsp.CompletionItem.data` is correct, since that field is type
+   * `any`.
+   */
+  kind: 'ngCompletionOriginData';
+
+  filePath: string;
+  position: lsp.Position;
+}
+
+/**
+ * Extract `NgCompletionOriginData` from an `lsp.CompletionItem` if present.
+ */
+export function readNgCompletionData(item: lsp.CompletionItem): NgCompletionOriginData|null {
+  if (item.data === undefined) {
+    return null;
+  }
+
+  // Validate that `item.data.kind` is actually the right tag, and narrow its type in the process.
+  const data: NgCompletionOriginData|{kind?: never} = item.data;
+  if (data.kind !== 'ngCompletionOriginData') {
+    return null;
+  }
+
+  return data;
+}
+
 /**
  * Convert Angular's CompletionKind to LSP CompletionItemKind.
  * @param kind Angular's CompletionKind
@@ -81,5 +117,10 @@ export function tsCompletionEntryToLspCompletionItem(
   item.textEdit = entry.replacementSpan ?
       lsp.TextEdit.replace(tsTextSpanToLspRange(scriptInfo, entry.replacementSpan), insertText) :
       lsp.TextEdit.insert(position, insertText);
+  item.data = {
+    kind: 'ngCompletionOriginData',
+    filePath: scriptInfo.fileName,
+    position,
+  } as NgCompletionOriginData;
   return item;
 }

server/src/session.ts

@@ -13,7 +13,7 @@ import {ServerOptions} from '../common/initialize';
 import {ProjectLanguageService, ProjectLoadingFinish, ProjectLoadingStart} from '../common/notifications';
 import {NgccProgressToken, NgccProgressType} from '../common/progress';
 
-import {tsCompletionEntryToLspCompletionItem} from './completion';
+import {readNgCompletionData, tsCompletionEntryToLspCompletionItem} from './completion';
 import {tsDiagnosticToLspDiagnostic} from './diagnostic';
 import {resolveAndRunNgcc} from './ngcc';
 import {ServerHost} from './server_host';
@@ -113,6 +113,7 @@ export class Session {
     conn.onReferences(p => this.onReferences(p));
     conn.onHover(p => this.onHover(p));
     conn.onCompletion(p => this.onCompletion(p));
+    conn.onCompletionResolve(p => this.onCompletionResolve(p));
   }
 
   private async runNgcc(configFilePath: string) {
@@ -313,9 +314,8 @@ export class Session {
       capabilities: {
         textDocumentSync: lsp.TextDocumentSyncKind.Incremental,
         completionProvider: {
-          // The server does not provide support to resolve additional information
-          // for a completion item.
-          resolveProvider: false,
+          // Only the Ivy LS provides support for additional completion resolution.
+          resolveProvider: this.ivy,
           triggerCharacters: ['<', '.', '*', '[', '(', '$', '|']
         },
         definitionProvider: true,
@@ -581,6 +581,42 @@ export class Session {
         (e) => tsCompletionEntryToLspCompletionItem(e, params.position, scriptInfo));
   }
 
+  private onCompletionResolve(item: lsp.CompletionItem): lsp.CompletionItem {
+    const data = readNgCompletionData(item);
+    if (data === null) {
+      // This item wasn't tagged with Angular LS completion data - it probably didn't originate from
+      // this language service.
+      return item;
+    }
+
+    const {filePath, position} = data;
+    const lsInfo = this.getLSAndScriptInfo(filePath);
+    if (lsInfo === undefined) {
+      return item;
+    }
+    const {languageService, scriptInfo} = lsInfo;
+
+    const offset = lspPositionToTsPosition(scriptInfo, position);
+    const details = languageService.getCompletionEntryDetails(
+        filePath, offset, item.insertText ?? item.label, undefined, undefined, undefined);
+    if (details === undefined) {
+      return item;
+    }
+
+    const {kind, kindModifiers, displayParts, documentation} = details;
+    let desc = kindModifiers ? kindModifiers + ' ' : '';
+    if (displayParts) {
+      // displayParts does not contain info about kindModifiers
+      // but displayParts does contain info about kind
+      desc += displayParts.map(dp => dp.text).join('');
+    } else {
+      desc += kind;
+    }
+    item.detail = desc;
+    item.documentation = documentation?.map(d => d.text).join('');
+    return item;
+  }
+
   /**
    * Show an error message in the remote console and log to file.
    *