Add replacement span for string literal (#37490)

* Add replacement span for string literal

* fix change requests

* fix lint

* Avoid flag

* Fix baseline

* ADd misising baseline

Author: Kingwl

src/services/completions.ts

@@ -245,6 +245,7 @@ namespace ts.Completions {
             const uniqueNames = getCompletionEntriesFromSymbols(
                 symbols,
                 entries,
+                /* contextToken */ undefined,
                 location,
                 sourceFile,
                 typeChecker,
@@ -269,6 +270,7 @@ namespace ts.Completions {
             getCompletionEntriesFromSymbols(
                 symbols,
                 entries,
+                /* contextToken */ undefined,
                 location,
                 sourceFile,
                 typeChecker,
@@ -353,6 +355,7 @@ namespace ts.Completions {
     function createCompletionEntry(
         symbol: Symbol,
         sortText: SortText,
+        contextToken: Node | undefined,
         location: Node | undefined,
         sourceFile: SourceFile,
         typeChecker: TypeChecker,
@@ -365,7 +368,7 @@ namespace ts.Completions {
         preferences: UserPreferences,
     ): CompletionEntry | undefined {
         let insertText: string | undefined;
-        let replacementSpan: TextSpan | undefined;
+        let replacementSpan = getReplacementSpanForContextToken(contextToken);
 
         const insertQuestionDot = origin && originIsNullableMember(origin);
         const useBraces = origin && originIsSymbolMember(origin) || needsConvertPropertyAccess;
@@ -462,6 +465,7 @@ namespace ts.Completions {
     export function getCompletionEntriesFromSymbols(
         symbols: readonly Symbol[],
         entries: Push<CompletionEntry>,
+        contextToken: Node | undefined,
         location: Node | undefined,
         sourceFile: SourceFile,
         typeChecker: TypeChecker,
@@ -496,6 +500,7 @@ namespace ts.Completions {
             const entry = createCompletionEntry(
                 symbol,
                 symbolToSortTextMap && symbolToSortTextMap[getSymbolId(symbol)] || SortText.LocationPriority,
+                contextToken,
                 location,
                 sourceFile,
                 typeChecker,

src/services/stringCompletions.ts

@@ -8,11 +8,11 @@ namespace ts.Completions.StringCompletions {
         if (isInString(sourceFile, position, contextToken)) {
             if (!contextToken || !isStringLiteralLike(contextToken)) return undefined;
             const entries = getStringLiteralCompletionEntries(sourceFile, contextToken, position, checker, options, host);
-            return convertStringLiteralCompletions(entries, sourceFile, checker, log, preferences);
+            return convertStringLiteralCompletions(entries, contextToken, sourceFile, checker, log, preferences);
         }
     }
 
-    function convertStringLiteralCompletions(completion: StringLiteralCompletion | undefined, sourceFile: SourceFile, checker: TypeChecker, log: Log, preferences: UserPreferences): CompletionInfo | undefined {
+    function convertStringLiteralCompletions(completion: StringLiteralCompletion | undefined, contextToken: Node, sourceFile: SourceFile, checker: TypeChecker, log: Log, preferences: UserPreferences): CompletionInfo | undefined {
         if (completion === undefined) {
             return undefined;
         }
@@ -24,6 +24,7 @@ namespace ts.Completions.StringCompletions {
                 getCompletionEntriesFromSymbols(
                     completion.symbols,
                     entries,
+                    contextToken,
                     sourceFile,
                     sourceFile,
                     checker,
@@ -35,7 +36,13 @@ namespace ts.Completions.StringCompletions {
                 return { isGlobalCompletion: false, isMemberCompletion: true, isNewIdentifierLocation: completion.hasIndexSignature, entries };
             }
             case StringLiteralCompletionKind.Types: {
-                const entries = completion.types.map(type => ({ name: type.value, kindModifiers: ScriptElementKindModifier.none, kind: ScriptElementKind.string, sortText: "0" }));
+                const entries = completion.types.map(type => ({
+                    name: type.value,
+                    kindModifiers: ScriptElementKindModifier.none,
+                    kind: ScriptElementKind.string,
+                    sortText: "0",
+                    replacementSpan: getReplacementSpanForContextToken(contextToken)
+                }));
                 return { isGlobalCompletion: false, isMemberCompletion: false, isNewIdentifierLocation: completion.isNewIdentifier, entries };
             }
             default:

src/services/utilities.ts

@@ -1600,10 +1600,27 @@ namespace ts {
         return !!range && shouldBeReference === tripleSlashDirectivePrefixRegex.test(sourceFile.text.substring(range.pos, range.end));
     }
 
+    export function getReplacementSpanForContextToken(contextToken: Node | undefined) {
+        if (!contextToken) return undefined;
+
+        switch (contextToken.kind) {
+            case SyntaxKind.StringLiteral:
+            case SyntaxKind.NoSubstitutionTemplateLiteral:
+                return createTextSpanFromStringLiteralLikeContent(<StringLiteralLike>contextToken);
+            default:
+                return createTextSpanFromNode(contextToken);
+        }
+    }
+
     export function createTextSpanFromNode(node: Node, sourceFile?: SourceFile, endNode?: Node): TextSpan {
         return createTextSpanFromBounds(node.getStart(sourceFile), (endNode || node).getEnd());
     }
 
+    export function createTextSpanFromStringLiteralLikeContent(node: StringLiteralLike) {
+        if (node.isUnterminated) return undefined;
+        return createTextSpanFromBounds(node.getStart() + 1, node.getEnd() - 1);
+    }
+
     export function createTextRangeFromNode(node: Node, sourceFile: SourceFile): TextRange {
         return createRange(node.getStart(sourceFile), node.end);
     }

tests/cases/fourslash/completionForQuotedPropertyInPropertyAssignment1.ts

@@ -8,10 +8,14 @@
 //// let files: Configfiles;
 //// files = {
 ////    /*0*/: '',
-////    '/*1*/': ''
+////    '[|/*1*/|]': ''
 //// }
 
+const replacementSpan = test.ranges()[0]
 verify.completions(
     { marker: "0", exact: ["jspm", '"jspm:browser"'] },
-    { marker: "1", exact: ["jspm", "jspm:browser"] },
+    { marker: "1", exact: [
+        { name: "jspm", replacementSpan },
+        { name: "jspm:browser", replacementSpan }
+    ] },
 );

tests/cases/fourslash/completionForQuotedPropertyInPropertyAssignment2.ts

@@ -13,11 +13,15 @@
 //// config = {
 ////    files: {
 ////        /*0*/: '',
-////        '/*1*/': ''
+////        '[|/*1*/|]': ''
 ////    }
 //// }
 
+const replacementSpan = test.ranges()[0]
 verify.completions(
     { marker: "0", exact: ["jspm", '"jspm:browser"'] },
-    { marker: "1", exact: ["jspm", "jspm:browser"] },
+    { marker: "1", exact: [
+        { name: "jspm", replacementSpan },
+        { name: "jspm:browser", replacementSpan }
+    ] },
 );

tests/cases/fourslash/completionForQuotedPropertyInPropertyAssignment3.ts

@@ -12,10 +12,14 @@
 ////      'jspm:browser': string;
 ////  } = {
 ////         jspm: "",
-////         '/*1*/': ""
+////         '[|/*1*/|]': ""
 ////  }
 
+const replacementSpan = test.ranges()[0]
 verify.completions(
     { marker: "0", exact: ["jspm", '"jspm:browser"'] },
-    { marker: "1", exact: ["jspm", "jspm:browser"] },
+    { marker: "1", exact: [
+        { name: "jspm", replacementSpan },
+        { name: "jspm:browser", replacementSpan }
+    ] }
 );

tests/cases/fourslash/completionForQuotedPropertyInPropertyAssignment4.ts

@@ -8,11 +8,14 @@
 //// function foo(c: ConfigFiles) {}
 //// foo({
 ////     j/*0*/: "",
-////     "/*1*/": "",
+////     "[|/*1*/|]": "",
 //// })
 
-
+const replacementSpan = test.ranges()[0]
 verify.completions(
     { marker: "0", exact: ["jspm", '"jspm:browser"'] },
-    { marker: "1", exact: ["jspm", "jspm:browser"] },
+    { marker: "1", exact: [
+        { name: "jspm", replacementSpan },
+        { name: "jspm:browser", replacementSpan }
+    ] }
 );

tests/cases/fourslash/completionForStringLiteral.ts

@@ -1,9 +1,20 @@
 /// <reference path='fourslash.ts'/>
 
 ////type Options = "Option 1" | "Option 2" | "Option 3";
-////var x: Options = "/*1*/Option 3";
+////var x: Options = "[|/*1*/Option 3|]";
 ////
 ////function f(a: Options) { };
 ////f("/*2*/
 
-verify.completions({ marker: ["1", "2"], exact: ["Option 1", "Option 2", "Option 3"] });
+verify.completions(
+    { marker: "1", exact: [
+        { name: "Option 1", replacementSpan: test.ranges()[0] },
+        { name: "Option 2", replacementSpan: test.ranges()[0] },
+        { name: "Option 3", replacementSpan: test.ranges()[0] }
+    ] },
+    { marker: "2", exact: [
+        { name: "Option 1", replacementSpan: test.ranges()[1] },
+        { name: "Option 2", replacementSpan: test.ranges()[1] },
+        { name: "Option 3", replacementSpan: test.ranges()[1] }
+    ] }
+);

tests/cases/fourslash/completionForStringLiteral10.ts

@@ -2,6 +2,9 @@
 
 ////type As = 'arf' | 'abacus' | 'abaddon';
 ////let a: As;
-////if ('/**/' != a
+////if ('[|/**/|]' != a
 
-verify.completions({ marker: "", exact: ["arf", "abacus", "abaddon"] });
+verify.completions({ marker: "", exact: ["arf", "abacus", "abaddon"].map(name => ({
+    name,
+    replacementSpan: test.ranges()[0]
+})) });

tests/cases/fourslash/completionForStringLiteral11.ts

@@ -3,7 +3,7 @@
 ////type As = 'arf' | 'abacus' | 'abaddon';
 ////let a: As;
 ////switch (a) {
-////    case '/**/
+////    case '[|/**/|]
 ////}
 
 verify.completions({ marker: "", exact: ["arf", "abacus", "abaddon" ] });

tests/cases/fourslash/completionForStringLiteral12.ts

@@ -3,6 +3,9 @@
 ////function foo(x: "bla"): void;
 ////function foo(x: "bla"): void;
 ////function foo(x: string) {}
-////foo("/**/")
+////foo("[|/**/|]")
 
-verify.completions({ marker: "", exact: "bla" });
+verify.completions({ marker: "", exact: {
+    name: "bla",
+    replacementSpan: test.ranges()[0]
+} });

tests/cases/fourslash/completionForStringLiteral2.ts

@@ -7,11 +7,22 @@
 ////};
 ////declare const p: { [s: string]: any, a: number };
 ////
-////o["/*1*/bar"];
+////o["[|/*1*/bar|]"];
 ////o["/*2*/ ;
-////p["/*3*/"];
+////p["[|/*3*/|]"];
+
+const replacementSpan0 = test.ranges()[0]
 
 verify.completions(
-    { marker: ["1", "2"], exact: ["foo", "bar", "some other name"] },
-    { marker: "3", exact: "a", isNewIdentifierLocation: true },
+    { marker: "1", exact: [
+        { name: "foo", replacementSpan: replacementSpan0 },
+        { name: "bar", replacementSpan: replacementSpan0 },
+        { name: "some other name", replacementSpan: replacementSpan0 }
+    ] },
+    { marker: "2", exact: [ "foo", "bar", "some other name" ] },
+    { marker: "3", exact: {
+        name: "a",
+        replacementSpan: test.ranges()[1]
+    },
+    isNewIdentifierLocation: true },
 );

tests/cases/fourslash/completionForStringLiteral3.ts

@@ -5,8 +5,14 @@
 ////declare function f(a: "C", b: number): void;
 ////declare function f(a: string, b: number): void;
 ////
-////f("/*1*/C", 2);
+////f("[|/*1*/C|]", 2);
 ////
 ////f("/*2*/
 
-verify.completions({ marker: ["1", "2"], exact: ["A", "B", "C"], isNewIdentifierLocation: true });
+verify.completions({ marker: "1", exact: [
+    { name: "A", replacementSpan: test.ranges()[0] },
+    { name: "B", replacementSpan: test.ranges()[0] },
+    { name: "C", replacementSpan: test.ranges()[0] }
+], isNewIdentifierLocation: true });
+
+verify.completions({ marker: "2", exact: [ "A", "B", "C"], isNewIdentifierLocation: true });

tests/cases/fourslash/completionForStringLiteral4.ts

@@ -11,10 +11,14 @@
 ////function f(p1, p2, p3, p4, p5) {
 ////    return p1 + p2 + p3 + p4 + p5 + '.';
 ////}
-////f/*1*/('literal', 'literal', "o/*2*/ther1", 12);
+////f/*1*/('literal', 'literal', "[|o/*2*/ther1|]", 12);
 
 goTo.marker('1');
 verify.quickInfoExists();
 verify.quickInfoIs('function f(p1: "literal", p2: "literal", p3: "other1" | "other2", p4: number | "literal", p5: true | 12): string', 'I am documentation');
 
-verify.completions({ marker: "2", exact: ["other1", "other2"] });
+const replacementSpan = test.ranges()[0]
+verify.completions({ marker: "2", exact: [
+    { name: "other1", replacementSpan },
+    { name: "other2", replacementSpan }
+] });

tests/cases/fourslash/completionForStringLiteral6.ts

@@ -4,6 +4,9 @@
 ////    x: "abc" | "def";
 ////}
 ////function bar(f: Foo) { };
-////bar({x: "/**/"});
+////bar({x: "[|/**/|]"});
 
-verify.completions({ marker: "", exact: ["abc", "def"] });
+verify.completions({ marker: "", exact: ["abc", "def"].map(name => ({
+    name,
+    replacementSpan: test.ranges()[0]
+})) });

tests/cases/fourslash/completionForStringLiteral7.ts

@@ -3,9 +3,16 @@
 ////type T = "foo" | "bar";
 ////type U = "oof" | "rab";
 ////function f(x: T, ...args: U[]) { };
-////f("/*1*/", "/*2*/", "/*3*/");
+////f("[|/*1*/|]", "[|/*2*/|]", "[|/*3*/|]");
 
 verify.completions(
-    { marker: "1", exact: ["foo", "bar"] },
-    { marker: ["2", "3"], exact: ["oof", "rab"] },
+    { marker: "1", exact: ["foo", "bar"].map(name => ({
+        name, replacementSpan: test.ranges()[0]
+    })) },
+    { marker: "2", exact: ["oof", "rab"].map(name => ({
+        name, replacementSpan: test.ranges()[1]
+    })) },
+    { marker: "3", exact: ["oof", "rab"].map(name => ({
+        name, replacementSpan: test.ranges()[2]
+    })) },
 );

tests/cases/fourslash/completionForStringLiteralFromSignature.ts

@@ -2,6 +2,9 @@
 
 ////declare function f(a: "x"): void;
 ////declare function f(a: string): void;
-////f("/**/");
+////f("[|/**/|]");
 
-verify.completions({ marker: "", exact: "x", isNewIdentifierLocation: true });
+verify.completions({ marker: "", exact: {
+    name: "x",
+    replacementSpan: test.ranges()[0]
+}, isNewIdentifierLocation: true });

tests/cases/fourslash/completionForStringLiteralInIndexedAccess01.ts

@@ -5,6 +5,10 @@
 ////    bar: string;
 ////}
 ////
-////let x: Foo["/*1*/"]
+////let x: Foo["[|/*1*/|]"]
 
-verify.completions({ marker: "1", exact: ["foo", "bar"] });
+const replacementSpan = test.ranges()[0]
+verify.completions({ marker: "1", exact: [
+    { name: "foo", replacementSpan },
+    { name: "bar", replacementSpan }
+] });

tests/cases/fourslash/completionForStringLiteral_details.ts

@@ -6,7 +6,7 @@
 // @Filename: /a.ts
 ////import {} from ".//*path*/";
 ////
-////const x: "a" = "/*type*/";
+////const x: "a" = "[|/*type*/|]";
 ////
 ////interface I {
 ////    /** Prop doc */
@@ -15,16 +15,16 @@
 ////    m(): void;
 ////}
 ////declare const o: I;
-////o["/*prop*/"];
+////o["[|/*prop*/|]"];
 
 verify.completions(
     { marker: "path", includes: { name: "other", text: "other", kind: "script", kindModifiers: ".ts" }, isNewIdentifierLocation: true },
-    { marker: "type", exact: { name: "a", text: "a", kind: "string" } },
+    { marker: "type", exact: { name: "a", text: "a", kind: "string", replacementSpan: test.ranges()[0] } },
     {
         marker: "prop",
         exact: [
-            { name: "x", text: "(property) I.x: number", documentation: "Prop doc", kind: "property" },
-            { name: "m", text: "(method) I.m(): void", documentation: "Method doc", kind: "method" },
+            { name: "x", text: "(property) I.x: number", documentation: "Prop doc", kind: "property", replacementSpan: test.ranges()[1] },
+            { name: "m", text: "(method) I.m(): void", documentation: "Method doc", kind: "method", replacementSpan: test.ranges()[1] },
         ],
     },
 );