WIP: add refactoring: string concatenation to template literals

src/compiler/diagnosticMessages.json

@@ -4799,5 +4799,17 @@
     "Add names to all parameters without names": {
         "category": "Message",
         "code": 95073
+    },
+    "Convert string concatenation or template literal": {
+        "category": "Message",
+        "code": 95074
+    },
+    "Convert to template literal": {
+        "category": "Message",
+        "code": 95075
+    },
+    "Convert to string concatenation": {
+        "category": "Message",
+        "code": 95076
     }
 }

src/services/refactors/convertStringOrTemplateLiteral.ts

@@ -0,0 +1,201 @@
+/* @internal */
+namespace ts.refactor.convertStringOrTemplateLiteral {
+    const refactorName = "Convert string concatenation or template literal";
+    const toTemplateLiteralActionName = "Convert to template literal";
+    const toStringConcatenationActionName = "Convert to string concatenation";
+
+    const refactorDescription = getLocaleSpecificMessage(Diagnostics.Convert_string_concatenation_or_template_literal);
+    const toTemplateLiteralDescription = getLocaleSpecificMessage(Diagnostics.Convert_to_template_literal);
+    const toStringConcatenationDescription = getLocaleSpecificMessage(Diagnostics.Convert_to_string_concatenation);
+
+    registerRefactor(refactorName, { getEditsForAction, getAvailableActions });
+
+    function getAvailableActions(context: RefactorContext): ReadonlyArray<ApplicableRefactorInfo> {
+        const { file, startPosition } = context;
+        const node = getNodeOrParentOfParentheses(file, startPosition);
+        const maybeBinary = getParentBinaryExpression(node);
+        const actions: RefactorActionInfo[] = [];
+
+        if ((isBinaryExpression(maybeBinary) || isStringLiteral(maybeBinary)) && isStringConcatenationValid(maybeBinary)) {
+            actions.push({ name: toTemplateLiteralActionName, description: toTemplateLiteralDescription });
+        }
+
+        const templateLiteral = findAncestor(node, n => isTemplateLiteral(n));
+
+        if (templateLiteral && !isTaggedTemplateExpression(templateLiteral.parent)) {
+            actions.push({ name: toStringConcatenationActionName, description: toStringConcatenationDescription });
+        }
+
+        return [{ name: refactorName, description: refactorDescription, actions }];
+    }
+
+    function getNodeOrParentOfParentheses(file: SourceFile, startPosition: number) {
+        const node = getTokenAtPosition(file, startPosition);
+        if (isParenthesizedExpression(node.parent) && isBinaryExpression(node.parent.parent)) return node.parent.parent;
+        return node;
+    }
+
+    function getEditsForAction(context: RefactorContext, actionName: string): RefactorEditInfo | undefined {
+        const { file, startPosition } = context;
+        const node = getNodeOrParentOfParentheses(file, startPosition);
+
+        switch (actionName) {
+            case toTemplateLiteralActionName:
+                return { edits: getEditsForToTemplateLiteral(context, node) };
+
+            case toStringConcatenationActionName:
+                return { edits: getEditsForToStringConcatenation(context, node) };
+
+            default:
+                return Debug.fail("invalid action");
+        }
+    }
+
+    function getEditsForToTemplateLiteral(context: RefactorContext, node: Node) {
+        const maybeBinary = getParentBinaryExpression(node);
+        const arrayOfNodes = transformTreeToArray(maybeBinary);
+        const templateLiteral = nodesToTemplate(arrayOfNodes);
+        return textChanges.ChangeTracker.with(context, t => t.replaceNode(context.file, maybeBinary, templateLiteral));
+    }
+
+    function getEditsForToStringConcatenation(context: RefactorContext, node: Node) {
+        const templateLiteral = findAncestor(node, n => isTemplateLiteral(n))! as TemplateLiteral;
+
+        if (isTemplateExpression(templateLiteral)) {
+            const { head, templateSpans } = templateLiteral;
+            const arrayOfNodes = templateSpans.map(templateSpanToExpressions)
+                                              .reduce((accumulator, nextArray) => accumulator.concat(nextArray));
+
+            if (head.text.length !== 0) arrayOfNodes.unshift(createStringLiteral(head.text));
+
+            const binaryExpression = arrayToTree(arrayOfNodes);
+            return textChanges.ChangeTracker.with(context, t => t.replaceNode(context.file, templateLiteral, binaryExpression));
+        }
+        else {
+            const stringLiteral = createStringLiteral(templateLiteral.text);
+            return textChanges.ChangeTracker.with(context, t => t.replaceNode(context.file, node, stringLiteral));
+        }
+    }
+
+    function templateSpanToExpressions(templateSpan: TemplateSpan): Expression[] {
+        const { expression, literal } = templateSpan;
+        const text = literal.text;
+        return text.length === 0 ? [expression] : [expression, createStringLiteral(text)];
+    }
+
+    function getParentBinaryExpression(expr: Node) {
+        while (isBinaryExpression(expr.parent)) {
+            expr = expr.parent;
+        }
+        return expr;
+    }
+
+    function arrayToTree(nodes: ReadonlyArray<Expression>, accumulator?: BinaryExpression): BinaryExpression {
+        if (nodes.length === 0) return accumulator!;
+
+        if (!accumulator) {
+            const left = nodes[0];
+            const right = nodes[1];
+
+            const binary = createBinary(left, SyntaxKind.PlusToken, right);
+            return arrayToTree(nodes.slice(2), binary);
+        }
+
+        const right = nodes[0];
+        const binary = createBinary(accumulator, SyntaxKind.PlusToken, right);
+        return arrayToTree(nodes.slice(1), binary);
+    }
+
+    function isStringConcatenationValid(node: Node): boolean {
+        const { containsString, areOperatorsValid } = treeToArray(node);
+        return containsString && areOperatorsValid;
+    }
+
+    function transformTreeToArray(node: Node): ReadonlyArray<Expression> {
+        return treeToArray(node).nodes;
+    }
+
+    function treeToArray(node: Node): { nodes: ReadonlyArray<Expression>, containsString: boolean, areOperatorsValid: boolean} {
+        if (isBinaryExpression(node)) {
+            const { nodes: leftNodes, containsString: leftHasString, areOperatorsValid: leftOperatorValid } = treeToArray(node.left);
+            const { nodes: rightNodes, containsString: rightHasString, areOperatorsValid: rightOperatorValid } = treeToArray(node.right);
+
+            if (!leftHasString && !rightHasString) {
+                return { nodes: [node], containsString: false, areOperatorsValid: true };
+            }
+
+            const nodeOperatorValid = node.operatorToken.kind === SyntaxKind.PlusToken;
+            const isPlus = leftOperatorValid && nodeOperatorValid && rightOperatorValid;
+
+            return { nodes: leftNodes.concat(rightNodes), containsString: true, areOperatorsValid: isPlus };
+        }
+
+        return { nodes: [node as Expression], containsString: isStringLiteral(node), areOperatorsValid: true };
+    }
+
+    function createHead(nodes: ReadonlyArray<Expression>): [number, TemplateHead] {
+        let begin = 0;
+        let text = "";
+
+        while (begin < nodes.length && isStringLiteral(nodes[begin])) {
+            const next = nodes[begin] as StringLiteral;
+            text = text + decodeRawString(next.getText());
+            begin++;
+        }
+
+        text = escapeText(text);
+        return [begin, createTemplateHead(text)];
+    }
+
+    function nodesToTemplate(nodes: ReadonlyArray<Expression>) {
+        const templateSpans: TemplateSpan[] = [];
+        const [begin, head] = createHead(nodes);
+
+        if (begin === nodes.length) {
+            return createNoSubstitutionTemplateLiteral(head.text);
+        }
+
+        for (let i = begin; i < nodes.length; i++) {
+            let current = nodes[i];
+            let text = "";
+
+            while (i + 1 < nodes.length && isStringLiteral(nodes[i + 1])) {
+                const next = nodes[i + 1] as StringLiteral;
+                text = text + decodeRawString(next.getText());
+                i++;
+            }
+
+            text = escapeText(text);
+            const templatePart = i === nodes.length - 1 ? createTemplateTail(text) : createTemplateMiddle(text);
+
+            if (isParenthesizedExpression(current)) current = current.expression;
+            templateSpans.push(createTemplateSpan(current, templatePart));
+        }
+
+        return createTemplateExpression(head, templateSpans);
+    }
+
+    const hexToUnicode = (_match: string, grp: string) => String.fromCharCode(parseInt(grp, 16));
+    const octalToUnicode = (_match: string, grp: string) => String.fromCharCode(parseInt(grp, 8));
+
+    function decodeRawString(content: string) {
+        const outerQuotes = /"((.|\s)*)"/;
+        const unicodeEscape = /\\u([\d\w]+)/gi;
+        const unicodeEscapeWithBraces = /\\u\{([\d\w]+\})/gi;
+        const hexEscape = /\\x([\d\w]+)/gi;
+        const octalEscape = /\\([0-7]+)/g;
+
+        return content.replace(outerQuotes, (_match, grp) => grp)
+                      .replace(unicodeEscape, hexToUnicode)
+                      .replace(unicodeEscapeWithBraces, hexToUnicode)
+                      .replace(hexEscape, hexToUnicode)
+                      .replace(octalEscape, octalToUnicode);
+
+    }
+
+    function escapeText(content: string) {
+        return content.replace("`", "\`")       // back-tick
+                      .replace("\${", `$\\{`);  // placeholder alike beginning
+    }
+
+}

src/services/tsconfig.json

@@ -83,6 +83,7 @@
         "refactors/generateGetAccessorAndSetAccessor.ts",
         "refactors/moveToNewFile.ts",
         "refactors/addOrRemoveBracesToArrowFunction.ts",
+        "refactors/convertStringOrTemplateLiteral.ts",
         "services.ts",
         "breakpoints.ts",
         "transform.ts",

tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_ToStringAsFnArgument.ts

@@ -0,0 +1,12 @@
+/// <reference path='fourslash.ts' />
+
+//// console.log(`/*x*/f/*y*/oobar is ${ 32 } years old`)
+
+goTo.select("x", "y");
+edit.applyRefactor({
+    refactorName: "Convert string concatenation or template literal",
+    actionName: "Convert to string concatenation",
+    actionDescription: "Convert to string concatenation",
+    newContent:
+`console.log("foobar is " + 32 + " years old")`,
+});

tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_ToStringAvailability.ts

@@ -0,0 +1,29 @@
+/// <reference path='fourslash.ts' />
+
+//// const age = 22
+//// const name = "Eddy"
+//// const /*z*/f/*y*/oo = /*x*/`/*w*/M/*v*/r/*u*/ /*t*/$/*s*/{ /*r*/n/*q*/ame } is ${ /*p*/a/*o*/ge + 34 } years old`
+
+goTo.select("z", "y");
+verify.not.refactorAvailable("Convert string concatenation or template literal", "Convert to string concatenation");
+verify.not.refactorAvailable("Convert string concatenation or template literal", "Convert to template literal");
+
+goTo.select("x", "w");
+verify.refactorAvailable("Convert string concatenation or template literal", "Convert to string concatenation");
+verify.not.refactorAvailable("Convert string concatenation or template literal", "Convert to template literal");
+
+goTo.select("v", "u");
+verify.refactorAvailable("Convert string concatenation or template literal", "Convert to string concatenation");
+verify.not.refactorAvailable("Convert string concatenation or template literal", "Convert to template literal");
+
+goTo.select("t", "s");
+verify.refactorAvailable("Convert string concatenation or template literal", "Convert to string concatenation");
+verify.not.refactorAvailable("Convert string concatenation or template literal", "Convert to template literal");
+
+goTo.select("r", "q");
+verify.refactorAvailable("Convert string concatenation or template literal", "Convert to string concatenation");
+verify.not.refactorAvailable("Convert string concatenation or template literal", "Convert to template literal");
+
+goTo.select("p", "o");
+verify.refactorAvailable("Convert string concatenation or template literal", "Convert to string concatenation");
+verify.not.refactorAvailable("Convert string concatenation or template literal", "Convert to template literal");

tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_ToStringAvailabilityTagged.ts

@@ -0,0 +1,17 @@
+/// <reference path='fourslash.ts' />
+
+//// function tag(literals: TemplateStringsArray, ...placeholders: string[]) { return "tagged" }
+//// const alpha = tag/*z*/`/*y*/foobar`
+//// const beta = tag/*x*/`/*w*/foobar ${/*v*/4/*u*/2}`
+
+goTo.select("z", "y");
+verify.not.refactorAvailable("Convert string concatenation or template literal", "Convert to string concatenation");
+verify.not.refactorAvailable("Convert string concatenation or template literal", "Convert to template literal");
+
+goTo.select("x", "w");
+verify.not.refactorAvailable("Convert string concatenation or template literal", "Convert to string concatenation");
+verify.not.refactorAvailable("Convert string concatenation or template literal", "Convert to template literal");
+
+goTo.select("v", "u");
+verify.not.refactorAvailable("Convert string concatenation or template literal", "Convert to string concatenation");
+verify.not.refactorAvailable("Convert string concatenation or template literal", "Convert to template literal");

tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_ToStringBackTick.ts

@@ -0,0 +1,12 @@
+/// <reference path='fourslash.ts' />
+
+//// const foo = `/*x*/w/*y*/ith back\`tick`
+
+goTo.select("x", "y");
+edit.applyRefactor({
+    refactorName: "Convert string concatenation or template literal",
+    actionName: "Convert to string concatenation",
+    actionDescription: "Convert to string concatenation",
+    newContent:
+"const foo = \"with back`tick\"",
+});

tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_ToStringBinaryExpr.ts

@@ -0,0 +1,12 @@
+/// <reference path='fourslash.ts' />
+
+//// const foo = `/*x*/f/*y*/oobar is ${ 42 + 6 } years old`
+
+goTo.select("x", "y");
+edit.applyRefactor({
+    refactorName: "Convert string concatenation or template literal",
+    actionName: "Convert to string concatenation",
+    actionDescription: "Convert to string concatenation",
+    newContent:
+`const foo = "foobar is " + (42 + 6) + " years old"`,
+});

tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_ToStringDollar.ts

@@ -0,0 +1,12 @@
+/// <reference path='fourslash.ts' />
+
+//// const foo = `/*x*/w/*y*/ith \${dollar}`
+
+goTo.select("x", "y");
+edit.applyRefactor({
+    refactorName: "Convert string concatenation or template literal",
+    actionName: "Convert to string concatenation",
+    actionDescription: "Convert to string concatenation",
+    newContent:
+"const foo = \"with \${dollar}\"",
+});

tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_ToStringExprInRow.ts

@@ -0,0 +1,12 @@
+/// <reference path='fourslash.ts' />
+
+//// const foo = `/*x*/f/*y*/oobar is ${ 42 }${ 6 } years old`
+
+goTo.select("x", "y");
+edit.applyRefactor({
+    refactorName: "Convert string concatenation or template literal",
+    actionName: "Convert to string concatenation",
+    actionDescription: "Convert to string concatenation",
+    newContent:
+`const foo = "foobar is " + 42 + 6 + " years old"`,
+});

tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_ToStringMultiExpr.ts

@@ -0,0 +1,16 @@
+/// <reference path='fourslash.ts' />
+
+//// const age = 22
+//// const name = "Eddy"
+//// const foo = `/*x*/$/*y*/{ name } is ${ age } years old`
+
+goTo.select("x", "y");
+edit.applyRefactor({
+    refactorName: "Convert string concatenation or template literal",
+    actionName: "Convert to string concatenation",
+    actionDescription: "Convert to string concatenation",
+    newContent:
+`const age = 22
+const name = "Eddy"
+const foo = name + " is " + age + " years old"`,
+});

tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_ToStringNestedInner.ts

@@ -0,0 +1,14 @@
+/// <reference path='fourslash.ts' />
+
+//// const age = 42
+//// const foo = `foobar is a ${ age < 18 ? 'child' : /*x*/`/*y*/grown-up ${ age > 40 ? 'who needs probaply assistance' : ''}` }`
+
+goTo.select("x", "y");
+edit.applyRefactor({
+    refactorName: "Convert string concatenation or template literal",
+    actionName: "Convert to string concatenation",
+    actionDescription: "Convert to string concatenation",
+    newContent:
+`const age = 42
+const foo = \`foobar is a \${ age < 18 ? 'child' : "grown-up " + (age > 40 ? 'who needs probaply assistance' : '') }\``,
+});

tests/cases/fourslash/refactorConvertStringOrTemplateLiteral_ToStringNestedInnerNonSub.ts

@@ -0,0 +1,14 @@
+/// <reference path='fourslash.ts' />
+
+//// const age = 42
+//// const foo = `foobar is a ${ `/*x*/3/*y*/4` }`
+
+goTo.select("x", "y");
+edit.applyRefactor({
+    refactorName: "Convert string concatenation or template literal",
+    actionName: "Convert to string concatenation",
+    actionDescription: "Convert to string concatenation",
+    newContent:
+`const age = 42
+const foo = \`foobar is a \${ "34" }\``,
+});