(feat) typescript signature help (#653)

* typescript signature help

* test

* credit

* config

* tweak

Author: jasonlyu123

packages/language-server/src/ls-config.ts

@@ -14,7 +14,8 @@ const defaultLSConfig: LSConfig = {
         documentSymbols: { enable: true },
         codeActions: { enable: true },
         rename: { enable: true },
-        selectionRange: { enable: true }
+        selectionRange: { enable: true },
+        signatureHelp: { enable: true }
     },
     css: {
         enable: true,
@@ -87,6 +88,9 @@ export interface LSTypescriptConfig {
     selectionRange: {
         enable: boolean;
     };
+    signatureHelp: {
+        enable: boolean;
+    }
 }
 
 export interface LSCSSConfig {

packages/language-server/src/plugins/PluginHost.ts

@@ -20,7 +20,9 @@ import {
     FormattingOptions,
     ReferenceContext,
     Location,
-    SelectionRange
+    SelectionRange,
+    SignatureHelp,
+    SignatureHelpContext
 } from 'vscode-languageserver';
 import { LSConfig, LSConfigManager } from '../ls-config';
 import { DocumentManager } from '../lib/documents';
@@ -347,6 +349,23 @@ export class PluginHost implements LSProvider, OnWatchFileChanges {
         );
     }
 
+    async getSignatureHelp(
+        textDocument: TextDocumentIdentifier,
+        position: Position,
+        context: SignatureHelpContext | undefined
+    ): Promise<SignatureHelp | null> {
+        const document = this.getDocument(textDocument.uri);
+        if (!document) {
+            throw new Error('Cannot call methods on an unopened document');
+        }
+
+        return await this.execute<any>(
+            'getSignatureHelp',
+            [document, position, context],
+            ExecuteMode.FirstNonNull
+        );
+    }
+
     /**
      * The selection range supports multiple cursors,
      * each position should return its own selection range tree like `Array.map`.

packages/language-server/src/plugins/interfaces.ts

@@ -1,4 +1,4 @@
-import { CompletionContext, FileChangeType } from 'vscode-languageserver';
+import { CompletionContext, FileChangeType, SignatureHelpContext } from 'vscode-languageserver';
 import {
     CodeAction,
     CodeActionContext,
@@ -19,7 +19,8 @@ import {
     TextDocumentIdentifier,
     TextEdit,
     WorkspaceEdit,
-    SelectionRange
+    SelectionRange,
+    SignatureHelp
 } from 'vscode-languageserver-types';
 import { Document } from '../lib/documents';
 
@@ -128,6 +129,14 @@ export interface FindReferencesProvider {
     ): Promise<Location[] | null>;
 }
 
+export interface SignatureHelpProvider {
+    getSignatureHelp(
+        document: Document,
+        position: Position,
+        context: SignatureHelpContext | undefined
+    ): Resolvable<SignatureHelp | null>
+}
+
 export interface SelectionRangeProvider {
     getSelectionRange(document: Document, position: Position): Resolvable<SelectionRange | null>;
 }
@@ -152,7 +161,8 @@ type ProviderBase = DiagnosticsProvider &
     UpdateImportsProvider &
     CodeActionsProvider &
     FindReferencesProvider &
-    RenameProvider;
+    RenameProvider &
+    SignatureHelpProvider;
 
 export type LSProvider = ProviderBase & BackwardsCompatibleDefinitionsProvider;
 

packages/language-server/src/plugins/typescript/TypeScriptPlugin.ts

@@ -15,7 +15,9 @@ import {
     SymbolInformation,
     WorkspaceEdit,
     CompletionList,
-    SelectionRange
+    SelectionRange,
+    SignatureHelp,
+    SignatureHelpContext
 } from 'vscode-languageserver';
 import {
     Document,
@@ -39,6 +41,7 @@ import {
     OnWatchFileChanges,
     RenameProvider,
     SelectionRangeProvider,
+    SignatureHelpProvider,
     UpdateImportsProvider,
     OnWatchFileChangesPara
 } from '../interfaces';
@@ -57,6 +60,7 @@ import { convertToLocationRange, getScriptKindFromFileName, symbolKindFromString
 import { getDirectiveCommentCompletions } from './features/getDirectiveCommentCompletions';
 import { FindReferencesProviderImpl } from './features/FindReferencesProvider';
 import { SelectionRangeProviderImpl } from './features/SelectionRangeProvider';
+import { SignatureHelpProviderImpl } from './features/SignatureHelpProvider';
 import { SnapshotManager } from './SnapshotManager';
 
 export class TypeScriptPlugin
@@ -70,6 +74,7 @@ export class TypeScriptPlugin
         RenameProvider,
         FindReferencesProvider,
         SelectionRangeProvider,
+        SignatureHelpProvider,
         OnWatchFileChanges,
         CompletionsProvider<CompletionEntryWithIdentifer> {
     private readonly configManager: LSConfigManager;
@@ -82,6 +87,7 @@ export class TypeScriptPlugin
     private readonly hoverProvider: HoverProviderImpl;
     private readonly findReferencesProvider: FindReferencesProviderImpl;
     private readonly selectionRangeProvider: SelectionRangeProviderImpl;
+    private readonly signatureHelpProvider: SignatureHelpProviderImpl;
 
     constructor(
         docManager: DocumentManager,
@@ -101,6 +107,7 @@ export class TypeScriptPlugin
         this.hoverProvider = new HoverProviderImpl(this.lsAndTsDocResolver);
         this.findReferencesProvider = new FindReferencesProviderImpl(this.lsAndTsDocResolver);
         this.selectionRangeProvider = new SelectionRangeProviderImpl(this.lsAndTsDocResolver);
+        this.signatureHelpProvider = new SignatureHelpProviderImpl(this.lsAndTsDocResolver);
     }
 
     async getDiagnostics(document: Document): Promise<Diagnostic[]> {
@@ -380,6 +387,16 @@ export class TypeScriptPlugin
         return this.selectionRangeProvider.getSelectionRange(document, position);
     }
 
+    async getSignatureHelp(
+        document: Document, position: Position, context: SignatureHelpContext | undefined
+    ): Promise<SignatureHelp | null> {
+        if (!this.featureEnabled('signatureHelp')) {
+            return null;
+        }
+
+        return this.signatureHelpProvider.getSignatureHelp(document, position, context);
+    }
+
     private getLSAndTSDoc(document: Document) {
         return this.lsAndTsDocResolver.getLSAndTSDoc(document);
     }

packages/language-server/src/plugins/typescript/features/SignatureHelpProvider.ts

@@ -0,0 +1,151 @@
+import ts from 'typescript';
+import {
+    Position,
+    SignatureHelpContext,
+    SignatureHelp,
+    SignatureHelpTriggerKind,
+    SignatureInformation,
+    ParameterInformation,
+    MarkupKind
+} from 'vscode-languageserver';
+import { SignatureHelpProvider } from '../..';
+import { Document } from '../../../lib/documents';
+import { LSAndTSDocResolver } from '../LSAndTSDocResolver';
+import { getMarkdownDocumentation } from '../previewer';
+
+export class SignatureHelpProviderImpl implements SignatureHelpProvider {
+    constructor(private readonly lsAndTsDocResolver: LSAndTSDocResolver) { }
+
+    private static readonly triggerCharacters = ['(', ',', '<'];
+    private static readonly retriggerCharacters = [')'];
+
+    async getSignatureHelp(
+        document: Document,
+        position: Position,
+        context: SignatureHelpContext | undefined
+    ): Promise<SignatureHelp | null> {
+        const { lang, tsDoc } = this.lsAndTsDocResolver.getLSAndTSDoc(document);
+        const fragment = await tsDoc.getFragment();
+
+        const offset = fragment.offsetAt(fragment.getGeneratedPosition(position));
+        const triggerReason = this.toTsTriggerReason(context);
+        const info = lang.getSignatureHelpItems(
+            tsDoc.filePath,
+            offset,
+            triggerReason ? { triggerReason } : undefined
+        );
+        if (
+            !info ||
+            info.items.some((signature) => this.isInSvelte2tsxGeneratedFunction(signature))
+        ) {
+            return null;
+        }
+
+        const signatures = info.items
+            .map(this.toSignatureHelpInformation);
+
+        return {
+            signatures,
+            activeSignature: info.selectedItemIndex,
+            activeParameter: info.argumentIndex
+        };
+    }
+
+    private isReTrigger(
+        isRetrigger: boolean,
+        triggerCharacter: string
+    ): triggerCharacter is ts.SignatureHelpRetriggerCharacter {
+        return (
+            isRetrigger &&
+            (this.isTriggerCharacter(triggerCharacter) ||
+                SignatureHelpProviderImpl.retriggerCharacters.includes(triggerCharacter))
+        );
+    }
+
+    private isTriggerCharacter(
+        triggerCharacter: string
+    ): triggerCharacter is ts.SignatureHelpTriggerCharacter {
+        return SignatureHelpProviderImpl.triggerCharacters.includes(triggerCharacter);
+    }
+
+    /**
+     * adopted from https://github.com/microsoft/vscode/blob/265a2f6424dfbd3a9788652c7d376a7991d049a3/extensions/typescript-language-features/src/languageFeatures/signatureHelp.ts#L103
+     */
+    private toTsTriggerReason(
+        context: SignatureHelpContext | undefined
+    ): ts.SignatureHelpTriggerReason {
+        switch (context?.triggerKind) {
+            case SignatureHelpTriggerKind.TriggerCharacter:
+                if (context.triggerCharacter) {
+                    if (this.isReTrigger(context.isRetrigger, context.triggerCharacter)) {
+                        return { kind: 'retrigger', triggerCharacter: context.triggerCharacter };
+                    }
+                    if (this.isTriggerCharacter(context.triggerCharacter)) {
+                        return {
+                            kind: 'characterTyped',
+                            triggerCharacter: context.triggerCharacter
+                        };
+                    }
+                }
+                return { kind: 'invoked' };
+            case SignatureHelpTriggerKind.ContentChange:
+                return context.isRetrigger ? { kind: 'retrigger' } : { kind: 'invoked' };
+
+            case SignatureHelpTriggerKind.Invoked:
+            default:
+                return { kind: 'invoked' };
+        }
+    }
+
+    /**
+     * adopted from https://github.com/microsoft/vscode/blob/265a2f6424dfbd3a9788652c7d376a7991d049a3/extensions/typescript-language-features/src/languageFeatures/signatureHelp.ts#L73
+     */
+    private toSignatureHelpInformation(item: ts.SignatureHelpItem): SignatureInformation {
+        const [prefixLabel, separatorLabel, suffixLabel] = [
+            item.prefixDisplayParts,
+            item.separatorDisplayParts,
+            item.suffixDisplayParts
+        ].map(ts.displayPartsToString);
+
+        let textIndex = prefixLabel.length;
+        let signatureLabel = '';
+        const parameters: ParameterInformation[] = [];
+        const lastIndex = item.parameters.length - 1;
+
+        item.parameters.forEach((parameter, index) => {
+            const label = ts.displayPartsToString(parameter.displayParts);
+
+            const startIndex = textIndex;
+            const endIndex = textIndex + label.length;
+            const doc = ts.displayPartsToString(parameter.documentation);
+
+            signatureLabel += label;
+            parameters.push(ParameterInformation.create([startIndex, endIndex], doc));
+
+            if (index < lastIndex) {
+                textIndex = endIndex + separatorLabel.length;
+                signatureLabel += separatorLabel;
+            }
+        });
+        const signatureDocumentation = getMarkdownDocumentation(
+            item.documentation,
+            item.tags.filter((tag) => tag.name !== 'param')
+        );
+
+        return {
+            label: prefixLabel + signatureLabel + suffixLabel,
+            documentation: signatureDocumentation ? {
+                value: signatureDocumentation,
+                kind: MarkupKind.Markdown
+            } : undefined,
+            parameters
+        };
+    }
+
+    private isInSvelte2tsxGeneratedFunction(
+        signatureHelpItem: ts.SignatureHelpItem
+    ) {
+        return signatureHelpItem.prefixDisplayParts
+            .some((part) => part.text.includes('__sveltets'));
+    }
+}

packages/language-server/src/server.ts

@@ -190,7 +190,11 @@ export function startServer(options?: LSOptions) {
                     ? { prepareProvider: true }
                     : true,
                 referencesProvider: true,
-                selectionRangeProvider: true
+                selectionRangeProvider: true,
+                signatureHelpProvider: {
+                    triggerCharacters: ['(', ',', '<'],
+                    retriggerCharacters: [')']
+                }
             }
         };
     });
@@ -263,6 +267,10 @@ export function startServer(options?: LSOptions) {
         return pluginHost.resolveCompletion(data, completionItem);
     });
 
+    connection.onSignatureHelp((evt) =>
+        pluginHost.getSignatureHelp(evt.textDocument, evt.position, evt.context)
+    );
+
     connection.onSelectionRanges((evt) =>
         pluginHost.getSelectionRanges(evt.textDocument, evt.positions)
     );