feat: add support for signature help (#1277)

This commit adds support for signature help to the LS extension, by
translating from the TS `getSignatureHelpItems` API into LSP.

Author: alxhub

client/src/client.ts

@@ -95,6 +95,15 @@ export class AngularLanguageClient implements vscode.Disposable {
               await Promise.all([angularResultsPromise, htmlProviderResultsPromise]);
           return angularResults ?? htmlProviderResults?.[0];
         },
+        provideSignatureHelp: async (
+            document: vscode.TextDocument, position: vscode.Position,
+            context: vscode.SignatureHelpContext, token: vscode.CancellationToken,
+            next: lsp.ProvideSignatureHelpSignature) => {
+          if (await this.isInAngularProject(document) &&
+              isInsideInlineTemplateRegion(document, position)) {
+            return next(document, position, context, token);
+          }
+        },
         provideCompletionItem: async (
             document: vscode.TextDocument, position: vscode.Position,
             context: vscode.CompletionContext, token: vscode.CancellationToken,

integration/lsp/ivy_spec.ts

@@ -155,6 +155,61 @@ describe('Angular Ivy language server', () => {
     });
   });
 
+  describe('signature help', () => {
+    it('should show signature help for an empty call', async () => {
+      client.sendNotification(lsp.DidOpenTextDocumentNotification.type, {
+        textDocument: {
+          uri: `file://${FOO_TEMPLATE}`,
+          languageId: 'html',
+          version: 1,
+          text: `{{ title.toString() }}`,
+        },
+      });
+      const languageServiceEnabled = await waitForNgcc(client);
+      expect(languageServiceEnabled).toBeTrue();
+      const response = (await client.sendRequest(lsp.SignatureHelpRequest.type, {
+        textDocument: {
+          uri: `file://${FOO_TEMPLATE}`,
+        },
+        position: {line: 0, character: 18},
+      }))!;
+      expect(response).not.toBeNull();
+      expect(response.signatures.length).toEqual(1);
+      expect(response.signatures[0].label).toEqual('toString(): string');
+    });
+
+    it('should show signature help with multiple arguments', async () => {
+      client.sendNotification(lsp.DidOpenTextDocumentNotification.type, {
+        textDocument: {
+          uri: `file://${FOO_TEMPLATE}`,
+          languageId: 'html',
+          version: 1,
+          text: `{{ title.substr(0, ) }}`,
+        },
+      });
+      const languageServiceEnabled = await waitForNgcc(client);
+      expect(languageServiceEnabled).toBeTrue();
+      const response = (await client.sendRequest(lsp.SignatureHelpRequest.type, {
+        textDocument: {
+          uri: `file://${FOO_TEMPLATE}`,
+        },
+        position: {line: 0, character: 19},
+      }))!;
+      expect(response).not.toBeNull();
+      expect(response.signatures.length).toEqual(1);
+      expect(response.signatures[0].label).toEqual('substr(from: number, length?: number): string');
+      expect(response.signatures[0].parameters).not.toBeUndefined();
+      expect(response.activeParameter).toBe(1);
+
+      const label = response.signatures[0].label;
+      const paramLabels = response.signatures[0].parameters!.map(param => {
+        const [start, end] = param.label as [number, number];
+        return label.substring(start, end);
+      });
+      expect(paramLabels).toEqual(['from: number', 'length?: number']);
+    });
+  });
+
   describe('project reload', () => {
     const dummy = `${PROJECT_PATH}/node_modules/__foo__`;
 

package.json

@@ -167,7 +167,7 @@
     "test:syntaxes": "yarn compile:syntaxes-test && yarn build:syntaxes && jasmine dist/syntaxes/test/driver.js"
   },
   "dependencies": {
-    "@angular/language-service": "12.0.0-next.8",
+    "@angular/language-service": "12.0.0-next.9",
     "typescript": "4.2.4",
     "vscode-jsonrpc": "6.0.0",
     "vscode-languageclient": "7.0.0",

server/src/session.ts

@@ -21,7 +21,7 @@ import {readNgCompletionData, tsCompletionEntryToLspCompletionItem} from './comp
 import {tsDiagnosticToLspDiagnostic} from './diagnostic';
 import {resolveAndRunNgcc} from './ngcc';
 import {ServerHost} from './server_host';
-import {filePathToUri, isConfiguredProject, isDebugMode, lspPositionToTsPosition, lspRangeToTsPositions, MruTracker, tsTextSpanToLspRange, uriToFilePath} from './utils';
+import {filePathToUri, isConfiguredProject, isDebugMode, lspPositionToTsPosition, lspRangeToTsPositions, MruTracker, tsDisplayPartsToText, tsTextSpanToLspRange, uriToFilePath} from './utils';
 import {resolve, Version} from './version_provider';
 
 export interface SessionOptions {
@@ -168,6 +168,7 @@ export class Session {
     conn.onRequest(IsInAngularProject, p => this.isInAngularProject(p));
     conn.onCodeLens(p => this.onCodeLens(p));
     conn.onCodeLensResolve(p => this.onCodeLensResolve(p));
+    conn.onSignatureHelp(p => this.onSignatureHelp(p));
   }
 
   private isInAngularProject(params: IsInAngularProjectParams): boolean {
@@ -232,6 +233,57 @@ export class Session {
     return results;
   }
 
+  private onSignatureHelp(params: lsp.SignatureHelpParams): lsp.SignatureHelp|undefined {
+    const lsInfo = this.getLSAndScriptInfo(params.textDocument);
+    if (lsInfo === undefined) {
+      return undefined;
+    }
+
+    const {languageService, scriptInfo} = lsInfo;
+    const offset = lspPositionToTsPosition(scriptInfo, params.position);
+
+    const help = languageService.getSignatureHelpItems(scriptInfo.fileName, offset, undefined);
+    if (help === undefined) {
+      return undefined;
+    }
+
+    return {
+      activeParameter: help.argumentCount > 0 ? help.argumentIndex : null,
+      activeSignature: help.selectedItemIndex,
+      signatures: help.items.map((item: ts.SignatureHelpItem): lsp.SignatureInformation => {
+        // For each signature, build up a 'label' which represents the full signature text, as well
+        // as a parameter list where each parameter label is a span within the signature label.
+        let label = tsDisplayPartsToText(item.prefixDisplayParts);
+        const parameters: lsp.ParameterInformation[] = [];
+        let first = true;
+        for (const param of item.parameters) {
+          if (!first) {
+            label += tsDisplayPartsToText(item.separatorDisplayParts);
+          }
+          first = false;
+
+          // Add the parameter to the label, keeping track of its start and end positions.
+          const start = label.length;
+          label += tsDisplayPartsToText(param.displayParts);
+          const end = label.length;
+
+          // The parameter itself uses a range within the signature label as its own label.
+          parameters.push({
+            label: [start, end],
+            documentation: tsDisplayPartsToText(param.documentation),
+          });
+        }
+
+        label += tsDisplayPartsToText(item.suffixDisplayParts);
+        return {
+          label,
+          documentation: tsDisplayPartsToText(item.documentation),
+          parameters,
+        };
+      }),
+    };
+  }
+
   private onCodeLens(params: lsp.CodeLensParams): lsp.CodeLens[]|undefined {
     if (!params.textDocument.uri.endsWith('.html')) {
       return undefined;
@@ -526,6 +578,11 @@ export class Session {
         } :
                                    false,
         hoverProvider: true,
+        signatureHelpProvider: this.ivy ? {
+          triggerCharacters: ['(', ','],
+          retriggerCharacters: [','],
+        } :
+                                          undefined,
         workspace: {
           workspaceFolders: {supported: true},
         },

server/src/utils.ts

@@ -109,4 +109,8 @@ export class MruTracker {
     // we reverse the result.
     return [...this.set].reverse();
   }
-}
+}
+
+export function tsDisplayPartsToText(parts: ts.SymbolDisplayPart[]): string {
+  return parts.map(dp => dp.text).join('');
+}

yarn.lock

@@ -19,7 +19,6 @@
 
 "@angular/dev-infra-private@https://github.com/angular/dev-infra-private-builds.git#a2a81f02228a86bcd2714accd16a52eac31714f5":
   version "0.0.0"
-  uid a2a81f02228a86bcd2714accd16a52eac31714f5
   resolved "https://github.com/angular/dev-infra-private-builds.git#a2a81f02228a86bcd2714accd16a52eac31714f5"
   dependencies:
     "@angular/benchpress" "0.2.1"
@@ -52,10 +51,10 @@
     yaml "^1.10.0"
     yargs "^16.2.0"
 
-"@angular/[email protected].8":
-  version "12.0.0-next.8"
-  resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-12.0.0-next.8.tgz#3b589cec2b63e0e4512acd5ff47283fc0558254b"
-  integrity sha512-IN5LB26LonNr6aafm9lEHJwkeruLUegFTWO4L10gUzUtyBQ7FGX+GqrX6VF1ePUeUeYkjhXbE++2Ya0jFsSBEg==
+"@angular/[email protected].9":
+  version "12.0.0-next.9"
+  resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-12.0.0-next.9.tgz#7fa62e9c4c78841fac7b53fd10672f31cd19161b"
+  integrity sha512-LOUwEF2v5zG+9+hcgt2Lb3GcfPAojHsqV47sH5P0GssErgfRqFVqK5ZnHt4Kj0SmAEUXJ4e/1ZjGpP35CWFq/A==
 
 "@babel/code-frame@^7.0.0":
   version "7.12.13"