From cb64a1f34ffd23d0cc0a5420e7bd55aeaa2a314a Mon Sep 17 00:00:00 2001
From: "Lyu, Wei Da" <b00605009@ntu.edu.tw>
Date: Wed, 28 Dec 2022 12:08:24 +0800
Subject: [PATCH 1/3] (feat) completion label detail support

---
 packages/language-server/src/ls-config.ts      |  3 ++-
 .../typescript/features/CompletionProvider.ts  | 18 ++++++++++++++++++
 packages/language-server/src/server.ts         |  5 ++++-
 .../features/CompletionProvider.test.ts        | 11 +++++++++--
 4 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/packages/language-server/src/ls-config.ts b/packages/language-server/src/ls-config.ts
index 49daa4564..b8ad15f8a 100644
--- a/packages/language-server/src/ls-config.ts
+++ b/packages/language-server/src/ls-config.ts
@@ -400,7 +400,8 @@ export class LSConfigManager {
                 config.suggest?.includeCompletionsForImportStatements ?? true,
             includeAutomaticOptionalChainCompletions:
                 config.suggest?.includeAutomaticOptionalChainCompletions ?? true,
-            includeCompletionsWithInsertText: true
+            includeCompletionsWithInsertText: true,
+            useLabelDetailsInCompletionEntries: true
         };
     }
 
diff --git a/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts b/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts
index 46d8e4efe..bcb3dca39 100644
--- a/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts
+++ b/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts
@@ -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,
@@ -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: {
@@ -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 it's resolved during the incomplete trigger
+            // which requires typescript internal api IncompleteCompletionsCache
+            if (detail.sourceDisplay && !completionItem.labelDetails) {
+                completionItem.labelDetails = {
+                    description: ts.displayPartsToString(detail.sourceDisplay)
+                };
+            }
+
             completionItem.detail = itemDetail;
             completionItem.documentation = itemDocumentation;
         }
diff --git a/packages/language-server/src/server.ts b/packages/language-server/src/server.ts
index 0391acf61..bd2b409cb 100644
--- a/packages/language-server/src/server.ts
+++ b/packages/language-server/src/server.ts
@@ -222,7 +222,10 @@ export function startServer(options?: LSOptions) {
                         // Svelte
                         ':',
                         '|'
-                    ]
+                    ],
+                    completionItem: {
+                        labelDetailsSupport: true
+                    }
                 },
                 documentFormattingProvider: true,
                 colorProvider: true,
diff --git a/packages/language-server/test/plugins/typescript/features/CompletionProvider.test.ts b/packages/language-server/test/plugins/typescript/features/CompletionProvider.test.ts
index 8c47b2fe8..7ffe66096 100644
--- a/packages/language-server/test/plugins/typescript/features/CompletionProvider.test.ts
+++ b/packages/language-server/test/plugins/typescript/features/CompletionProvider.test.ts
@@ -87,7 +87,8 @@ function test(useNewTransformation: boolean) {
                 sortText: '11',
                 commitCharacters: ['.', ',', ';', '('],
                 preselect: undefined,
-                textEdit: undefined
+                textEdit: undefined,
+                labelDetails: undefined
             });
         });
 
@@ -113,7 +114,8 @@ function test(useNewTransformation: boolean) {
                 sortText: '11',
                 commitCharacters: ['.', ',', ';', '('],
                 preselect: undefined,
-                textEdit: undefined
+                textEdit: undefined,
+                labelDetails: undefined
             });
         });
 
@@ -1169,6 +1171,9 @@ function test(useNewTransformation: boolean) {
                 sortText: '11',
                 commitCharacters: undefined,
                 preselect: undefined,
+                labelDetails: {
+                    description: '../definitions'
+                },
                 textEdit: {
                     newText: '{ blubb } from "../definitions";',
                     range: {
@@ -1227,6 +1232,7 @@ function test(useNewTransformation: boolean) {
                 sortText: '11',
                 commitCharacters: ['.', ',', ';', '('],
                 preselect: undefined,
+                labelDetails: undefined,
                 textEdit: {
                     newText: '.toString',
                     range: {
@@ -1267,6 +1273,7 @@ function test(useNewTransformation: boolean) {
                 sortText: '11',
                 preselect: undefined,
                 insertText: undefined,
+                labelDetails: undefined,
                 commitCharacters: ['.', ',', ';', '('],
                 textEdit: {
                     newText: '@hi',

From fa8e2dcc24964fa5f6be75ca9a7c4d23fa9041ac Mon Sep 17 00:00:00 2001
From: "Lyu, Wei Da" <b00605009@ntu.edu.tw>
Date: Thu, 29 Dec 2022 09:30:36 +0800
Subject: [PATCH 2/3] typescript code action description for auto import

---
 .../typescript/features/CompletionProvider.ts | 20 ++++++++++---------
 .../features/CompletionProvider.test.ts       | 17 +++++++++-------
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts b/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts
index bcb3dca39..d942af167 100644
--- a/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts
+++ b/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts
@@ -679,17 +679,19 @@ 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 }
@@ -697,7 +699,7 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
 
         return {
             documentation,
-            detail
+            detail: parts.filter(Boolean).join('\n\n')
         };
     }
 
diff --git a/packages/language-server/test/plugins/typescript/features/CompletionProvider.test.ts b/packages/language-server/test/plugins/typescript/features/CompletionProvider.test.ts
index 7ffe66096..33ed44146 100644
--- a/packages/language-server/test/plugins/typescript/features/CompletionProvider.test.ts
+++ b/packages/language-server/test/plugins/typescript/features/CompletionProvider.test.ts
@@ -637,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(
@@ -673,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(
@@ -708,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(
@@ -739,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(
@@ -844,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(
@@ -882,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(
@@ -1417,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

From c813a2cbbe4c4ac4048a9a0801461c04b45b2107 Mon Sep 17 00:00:00 2001
From: "Lyu, Wei Da" <b00605009@ntu.edu.tw>
Date: Thu, 29 Dec 2022 14:56:57 +0800
Subject: [PATCH 3/3] there's also other caching apis

---
 .../src/plugins/typescript/features/CompletionProvider.ts     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts b/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts
index d942af167..9ff99d725 100644
--- a/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts
+++ b/packages/language-server/src/plugins/typescript/features/CompletionProvider.ts
@@ -636,8 +636,8 @@ export class CompletionsProviderImpl implements CompletionsProvider<CompletionEn
                 this.getCompletionDocument(detail, is$typeImport);
 
             // VSCode + tsserver won't have this pop-in effect
-            // because it's resolved during the incomplete trigger
-            // which requires typescript internal api IncompleteCompletionsCache
+            // 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)