Skip to content

Commit

Permalink
(feat) completion label detail support (#1816)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jasonlyu123
jasonlyu123 authored Jan 9, 2023
1 parent a240c90 commit 4e17476
Show file tree
Hide file tree
Showing 4 changed files with 54 additions and 20 deletions.
3 changes: 2 additions & 1 deletion packages/language-server/src/ls-config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -400,7 +400,8 @@ export class LSConfigManager {
config.suggest?.includeCompletionsForImportStatements ?? true,
includeAutomaticOptionalChainCompletions:
config.suggest?.includeAutomaticOptionalChainCompletions ?? true,
includeCompletionsWithInsertText: true
includeCompletionsWithInsertText: true,
useLabelDetailsInCompletionEntries: true
};
}

Expand Down
38 changes: 29 additions & 9 deletions packages/language-server/src/plugins/typescript/features/CompletionProvider.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -455,6 +455,14 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
? TextEdit.replace(convertRange(snapshot, replacementSpan), insertText ?? label)
: undefined;

const labelDetails =
comp.labelDetails ??
(comp.sourceDisplay
? {
description: ts.displayPartsToString(comp.sourceDisplay)
}
: undefined);

return {
label,
insertText,
Expand All @@ -463,6 +471,7 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
// Make sure svelte component takes precedence
sortText: isSvelteComp ? '-1' : comp.sortText,
preselect: isSvelteComp ? true : comp.isRecommended,
labelDetails,
textEdit,
// pass essential data for resolving completion
data: {
Expand Down Expand Up @@ -626,6 +635,15 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
const { detail: itemDetail, documentation: itemDocumentation } =
this.getCompletionDocument(detail, is$typeImport);

// VSCode + tsserver won't have this pop-in effect
// because tsserver has internal APIs for caching
// TODO: consider if we should adopt the internal APIs
if (detail.sourceDisplay && !completionItem.labelDetails) {
completionItem.labelDetails = {
description: ts.displayPartsToString(detail.sourceDisplay)
};
}

completionItem.detail = itemDetail;
completionItem.documentation = itemDocumentation;
}
Expand Down Expand Up @@ -661,25 +679,27 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn

private getCompletionDocument(compDetail: ts.CompletionEntryDetails, is$typeImport: boolean) {
const { sourceDisplay, documentation: tsDocumentation, displayParts, tags } = compDetail;
let detail: string = changeSvelteComponentName(ts.displayPartsToString(displayParts));
let parts = compDetail.codeActions?.map((codeAction) => codeAction.description) ?? [];

if (sourceDisplay) {
let importPath = ts.displayPartsToString(sourceDisplay);
if (is$typeImport) {
// Take into account Node16 moduleResolution
importPath = `'./$types${importPath.endsWith('.js') ? '.js' : ''}'`;
}
detail = `Auto import from ${importPath}\n${detail}`;
if (sourceDisplay && is$typeImport) {
const importPath = ts.displayPartsToString(sourceDisplay);

// Take into account Node16 moduleResolution
parts = parts.map((detail) =>
detail.replace(importPath, `'./$types${importPath.endsWith('.js') ? '.js' : ''}'`)
);
}

parts.push(changeSvelteComponentName(ts.displayPartsToString(displayParts)));

const markdownDoc = getMarkdownDocumentation(tsDocumentation, tags);
const documentation: MarkupContent | undefined = markdownDoc
? { value: markdownDoc, kind: MarkupKind.Markdown }
: undefined;

return {
documentation,
detail
detail: parts.filter(Boolean).join('\n\n')
};
}

Expand Down
5 changes: 4 additions & 1 deletion packages/language-server/src/server.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,10 @@ export function startServer(options?: LSOptions) {
// Svelte
':',
'|'
]
],
completionItem: {
labelDetailsSupport: true
}
},
documentFormattingProvider: true,
colorProvider: true,
Expand Down
28 changes: 19 additions & 9 deletions packages/language-server/test/plugins/typescript/features/CompletionProvider.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,8 @@ function test(useNewTransformation: boolean) {
sortText: '11',
commitCharacters: ['.', ',', ';', '('],
preselect: undefined,
textEdit: undefined
textEdit: undefined,
labelDetails: undefined
});
});

Expand All @@ -113,7 +114,8 @@ function test(useNewTransformation: boolean) {
sortText: '11',
commitCharacters: ['.', ',', ';', '('],
preselect: undefined,
textEdit: undefined
textEdit: undefined,
labelDetails: undefined
});
});

Expand Down Expand Up @@ -635,7 +637,7 @@ function test(useNewTransformation: boolean) {

assert.strictEqual(
detail,
'Auto import from ../definitions\nfunction blubb(): boolean'
'Add import from "../definitions"\n\nfunction blubb(): boolean'
);

assert.strictEqual(
Expand Down Expand Up @@ -671,7 +673,7 @@ function test(useNewTransformation: boolean) {

assert.strictEqual(
detail,
'Auto import from ../definitions\nfunction blubb(): boolean'
'Add import from "../definitions"\n\nfunction blubb(): boolean'
);

assert.strictEqual(
Expand Down Expand Up @@ -706,7 +708,7 @@ function test(useNewTransformation: boolean) {

assert.strictEqual(
detail,
'Auto import from ../definitions\nfunction blubb(): boolean'
'Add import from "../definitions"\n\nfunction blubb(): boolean'
);

assert.strictEqual(
Expand Down Expand Up @@ -737,7 +739,7 @@ function test(useNewTransformation: boolean) {

assert.strictEqual(
detail,
'Auto import from svelte\nfunction onMount(fn: () => any): void'
'Add import from "svelte"\n\nfunction onMount(fn: () => any): void'
);

assert.strictEqual(
Expand Down Expand Up @@ -842,7 +844,7 @@ function test(useNewTransformation: boolean) {

assert.strictEqual(
detail,
'Auto import from ../imported-file.svelte\nclass ImportedFile'
'Add import from "../imported-file.svelte"\n\nclass ImportedFile'
);

assert.strictEqual(
Expand Down Expand Up @@ -880,7 +882,7 @@ function test(useNewTransformation: boolean) {

assert.strictEqual(
detail,
'Auto import from ../imported-file.svelte\nclass ImportedFile'
'Add import from "../imported-file.svelte"\n\nclass ImportedFile'
);

assert.strictEqual(
Expand Down Expand Up @@ -1169,6 +1171,9 @@ function test(useNewTransformation: boolean) {
sortText: '11',
commitCharacters: undefined,
preselect: undefined,
labelDetails: {
description: '../definitions'
},
textEdit: {
newText: '{ blubb } from "../definitions";',
range: {
Expand Down Expand Up @@ -1227,6 +1232,7 @@ function test(useNewTransformation: boolean) {
sortText: '11',
commitCharacters: ['.', ',', ';', '('],
preselect: undefined,
labelDetails: undefined,
textEdit: {
newText: '.toString',
range: {
Expand Down Expand Up @@ -1267,6 +1273,7 @@ function test(useNewTransformation: boolean) {
sortText: '11',
preselect: undefined,
insertText: undefined,
labelDetails: undefined,
commitCharacters: ['.', ',', ';', '('],
textEdit: {
newText: '@hi',
Expand Down Expand Up @@ -1410,7 +1417,10 @@ function test(useNewTransformation: boolean) {

const { detail } = await completionProvider.resolveCompletion(document, item!);

assert.strictEqual(detail, 'Auto import from random-package2\nfunction foo(): string');
assert.strictEqual(
detail,
'Add import from "random-package2"\n\nfunction foo(): string'
);
});

// Hacky, but it works. Needed due to testing both new and old transformation
Expand Down

0 comments on commit 4e17476

Please sign in to comment.