fix(40610): handle template string concatenation (#40653)

a-tarasyuk · web-flow · commit 98aaeb7f4830 · 2020-11-05T10:09:21.000-08:00
diff --git a/src/services/refactors/convertStringOrTemplateLiteral.ts b/src/services/refactors/convertStringOrTemplateLiteral.ts
@@ -78,6 +78,7 @@ namespace ts.refactor.convertStringOrTemplateLiteral {
                 case SyntaxKind.PropertyAccessExpression:
                 case SyntaxKind.ElementAccessExpression:
                     return false;
+                case SyntaxKind.TemplateExpression:
                 case SyntaxKind.BinaryExpression:
                     return !(isBinaryExpression(n.parent) && isNotEqualsOperator(n.parent));
                 default:
@@ -97,7 +98,7 @@ namespace ts.refactor.convertStringOrTemplateLiteral {
         if (isBinaryExpression(current)) {
             const { nodes, operators, containsString: leftHasString, areOperatorsValid: leftOperatorValid } = treeToArray(current.left);
 
-            if (!leftHasString && !isStringLiteral(current.right)) {
+            if (!leftHasString && !isStringLiteral(current.right) && !isTemplateExpression(current.right)) {
                 return { nodes: [current], operators: [], containsString: false, areOperatorsValid: true };
             }
 
@@ -133,20 +134,27 @@ namespace ts.refactor.convertStringOrTemplateLiteral {
     };
 
     function concatConsecutiveString(index: number, nodes: readonly Expression[]): [number, string, number[]] {
-        let text = "";
         const indexes = [];
-
-        while (index < nodes.length && isStringLiteral(nodes[index])) {
-            const stringNode = nodes[index] as StringLiteral;
-            text = text + stringNode.text;
-            indexes.push(index);
-            index++;
+        let text = "";
+        while (index < nodes.length) {
+            const node = nodes[index];
+            if (isStringLiteralLike(node)) {
+                text = text + node.text;
+                indexes.push(index);
+                index++;
+            }
+            else if (isTemplateExpression(node)) {
+                text = text + node.head.text;
+                break;
+            }
+            else {
+                break;
+            }
         }
-
         return [index, text, indexes];
     }
 
-    function nodesToTemplate({nodes, operators}: {nodes: readonly Expression[], operators: Token<BinaryOperator>[]}, file: SourceFile) {
+    function nodesToTemplate({ nodes, operators }: { nodes: readonly Expression[], operators: Token<BinaryOperator>[] }, file: SourceFile) {
         const copyOperatorComments = copyTrailingOperatorComments(operators, file);
         const copyCommentFromStringLiterals = copyCommentFromMultiNode(nodes, file, copyOperatorComments);
         const [begin, headText, headIndexes] = concatConsecutiveString(0, nodes);
@@ -167,26 +175,38 @@ namespace ts.refactor.convertStringOrTemplateLiteral {
 
             const [newIndex, subsequentText, stringIndexes] = concatConsecutiveString(i + 1, nodes);
             i = newIndex - 1;
-
-            const templatePart = i === nodes.length - 1 ? factory.createTemplateTail(subsequentText) : factory.createTemplateMiddle(subsequentText);
-            copyCommentFromStringLiterals(stringIndexes, templatePart);
-            templateSpans.push(factory.createTemplateSpan(currentNode, templatePart));
+            const isLast = i === nodes.length - 1;
+
+            if (isTemplateExpression(currentNode)) {
+                const spans = map(currentNode.templateSpans, (span, index) => {
+                    copyExpressionComments(span);
+                    const nextSpan = currentNode.templateSpans[index + 1];
+                    const text = span.literal.text + (nextSpan ? "" : subsequentText);
+                    return factory.createTemplateSpan(span.expression, isLast ? factory.createTemplateTail(text) : factory.createTemplateMiddle(text));
+                });
+                templateSpans.push(...spans);
+            }
+            else {
+                const templatePart = isLast ? factory.createTemplateTail(subsequentText) : factory.createTemplateMiddle(subsequentText);
+                copyCommentFromStringLiterals(stringIndexes, templatePart);
+                templateSpans.push(factory.createTemplateSpan(currentNode, templatePart));
+            }
         }
 
         return factory.createTemplateExpression(templateHead, templateSpans);
     }
 
     // to copy comments following the opening & closing parentheses
     // "foo" + ( /* comment */ 5 + 5 ) /* comment */ + "bar"
-    function copyCommentsWhenParenthesized(node: ParenthesizedExpression) {
+    function copyExpressionComments(node: ParenthesizedExpression | TemplateSpan) {
         const file = node.getSourceFile();
         copyTrailingComments(node, node.expression, file, SyntaxKind.MultiLineCommentTrivia, /* hasTrailingNewLine */ false);
         copyTrailingAsLeadingComments(node.expression, node.expression, file, SyntaxKind.MultiLineCommentTrivia, /* hasTrailingNewLine */ false);
     }
 
     function getExpressionFromParenthesesOrExpression(node: Expression) {
         if (isParenthesizedExpression(node)) {
-            copyCommentsWhenParenthesized(node);
+            copyExpressionComments(node);
             node = node.expression;
         }
         return node;
diff --git a/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString1.ts b/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString1.ts
@@ -0,0 +1,11 @@
+/// <reference path='fourslash.ts' />
+
+////const foo = /*start*/"" + ``/*end*/;
+
+goTo.select("start", "end");
+edit.applyRefactor({
+    refactorName: "Convert to template string",
+    actionName: "Convert to template string",
+    actionDescription: ts.Diagnostics.Convert_to_template_string.message,
+    newContent: "const foo = ``;",
+});
diff --git a/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString10.ts b/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString10.ts
@@ -0,0 +1,11 @@
+/// <reference path='fourslash.ts' />
+
+////const a = /*x*/`${1}`/*y*/ + "a" + "b" + ` ${2}.`;
+
+goTo.select("x", "y");
+edit.applyRefactor({
+    refactorName: "Convert to template string",
+    actionName: "Convert to template string",
+    actionDescription: ts.Diagnostics.Convert_to_template_string.message,
+    newContent: "const a = `${1}ab ${2}.`;"
+});
diff --git a/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString2.ts b/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString2.ts
@@ -0,0 +1,15 @@
+/// <reference path='fourslash.ts' />
+
+////const foo = 1;
+////const bar = /*start*/"a" + `${foo}`/*end*/;
+
+goTo.select("start", "end");
+edit.applyRefactor({
+    refactorName: "Convert to template string",
+    actionName: "Convert to template string",
+    actionDescription: ts.Diagnostics.Convert_to_template_string.message,
+    newContent: [
+        "const foo = 1;",
+        "const bar = `a${foo}`;"
+    ].join("\n")
+});
diff --git a/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString3.ts b/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString3.ts
@@ -0,0 +1,11 @@
+/// <reference path='fourslash.ts' />
+
+////const foo = /*start*/`` + ""/*end*/;
+
+goTo.select("start", "end");
+edit.applyRefactor({
+    refactorName: "Convert to template string",
+    actionName: "Convert to template string",
+    actionDescription: ts.Diagnostics.Convert_to_template_string.message,
+    newContent: "const foo = ``;"
+});
diff --git a/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString4.ts b/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString4.ts
@@ -0,0 +1,15 @@
+/// <reference path='fourslash.ts' />
+
+////const foo = 1;
+////const bar = /*start*/`` + "1" + `` + `${foo}`/*end*/;
+
+goTo.select("start", "end");
+edit.applyRefactor({
+    refactorName: "Convert to template string",
+    actionName: "Convert to template string",
+    actionDescription: ts.Diagnostics.Convert_to_template_string.message,
+    newContent: [
+        "const foo = 1;",
+        "const bar = `1${foo}`;"
+    ].join("\n")
+});
diff --git a/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString5.ts b/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString5.ts
@@ -0,0 +1,15 @@
+/// <reference path='fourslash.ts' />
+
+////const foo = 1;
+////const bar = /*start*/`1` + "2" + `3` + `${foo}`/*end*/;
+
+goTo.select("start", "end");
+edit.applyRefactor({
+    refactorName: "Convert to template string",
+    actionName: "Convert to template string",
+    actionDescription: ts.Diagnostics.Convert_to_template_string.message,
+    newContent: [
+        "const foo = 1;",
+        "const bar = `123${foo}`;"
+    ].join("\n")
+});
diff --git a/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString6.ts b/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString6.ts
@@ -0,0 +1,15 @@
+/// <reference path='fourslash.ts' />
+
+////const foo = 1;
+////const bar = /*start*/"a" + `${foo}` + "b"/*end*/;
+
+goTo.select("start", "end");
+edit.applyRefactor({
+    refactorName: "Convert to template string",
+    actionName: "Convert to template string",
+    actionDescription: ts.Diagnostics.Convert_to_template_string.message,
+    newContent: [
+        "const foo = 1;",
+        "const bar = `a${foo}b`;"
+    ].join("\n")
+});
diff --git a/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString7.ts b/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString7.ts
@@ -0,0 +1,15 @@
+/// <reference path='fourslash.ts' />
+
+////const foo = 1;
+////const bar = /*start*/"a " + `${foo}` + " b " + " c"/*end*/;
+
+goTo.select("start", "end");
+edit.applyRefactor({
+    refactorName: "Convert to template string",
+    actionName: "Convert to template string",
+    actionDescription: ts.Diagnostics.Convert_to_template_string.message,
+    newContent: [
+        "const foo = 1;",
+        "const bar = `a ${foo} b  c`;"
+    ].join("\n")
+});
diff --git a/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString8.ts b/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString8.ts
@@ -0,0 +1,21 @@
+/// <reference path='fourslash.ts' />
+
+////const a = 1;
+////const b = 1;
+////const c = 1;
+////const d = 1;
+////const d = `a${/* a */ a /* a */} ${b}` + /*start*/" other "/*end*/ + c + `${/* d */ d /* d */}`;
+
+goTo.select("start", "end");
+edit.applyRefactor({
+    refactorName: "Convert to template string",
+    actionName: "Convert to template string",
+    actionDescription: ts.Diagnostics.Convert_to_template_string.message,
+    newContent: [
+        "const a = 1;",
+        "const b = 1;",
+        "const c = 1;",
+        "const d = 1;",
+        "const d = `a${/* a */ a /* a */} ${b} other ${c}${/* d */ d /* d */}`;"
+    ].join("\n")
+});
diff --git a/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString9.ts b/tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_TemplateString9.ts
@@ -0,0 +1,21 @@
+/// <reference path='fourslash.ts' />
+
+////const a = 1;
+////const b = 1;
+////const c = 1;
+////const d = 1;
+////const d = /*start*/"start" + ` / a start ${a} a end / b start ${b} b end / ` + c + ` / d start ${d} d end / ` + "end"/*end*/;
+
+goTo.select("start", "end");
+edit.applyRefactor({
+    refactorName: "Convert to template string",
+    actionName: "Convert to template string",
+    actionDescription: ts.Diagnostics.Convert_to_template_string.message,
+    newContent: [
+        "const a = 1;",
+        "const b = 1;",
+        "const c = 1;",
+        "const d = 1;",
+        "const d = `start / a start ${a} a end / b start ${b} b end / ${c} / d start ${d} d end / end`;"
+    ].join("\n")
+});
