fix(39744): make template literals more spec compliant (#45304)

* fix(39744): make template literals more spec compliant

* Add evaluation test for template literals

* Add test for template literals with source map

Author: lowr

src/compiler/transformers/es2015.ts

@@ -4102,87 +4102,22 @@ namespace ts {
          * @param node A TemplateExpression node.
          */
         function visitTemplateExpression(node: TemplateExpression): Expression {
-            const expressions: Expression[] = [];
-            addTemplateHead(expressions, node);
-            addTemplateSpans(expressions, node);
-
-            // createAdd will check if each expression binds less closely than binary '+'.
-            // If it does, it wraps the expression in parentheses. Otherwise, something like
-            //    `abc${ 1 << 2 }`
-            // becomes
-            //    "abc" + 1 << 2 + ""
-            // which is really
-            //    ("abc" + 1) << (2 + "")
-            // rather than
-            //    "abc" + (1 << 2) + ""
-            const expression = reduceLeft(expressions, factory.createAdd)!;
-            if (nodeIsSynthesized(expression)) {
-                setTextRange(expression, node);
-            }
-
-            return expression;
-        }
-
-        /**
-         * Gets a value indicating whether we need to include the head of a TemplateExpression.
-         *
-         * @param node A TemplateExpression node.
-         */
-        function shouldAddTemplateHead(node: TemplateExpression) {
-            // If this expression has an empty head literal and the first template span has a non-empty
-            // literal, then emitting the empty head literal is not necessary.
-            //     `${ foo } and ${ bar }`
-            // can be emitted as
-            //     foo + " and " + bar
-            // This is because it is only required that one of the first two operands in the emit
-            // output must be a string literal, so that the other operand and all following operands
-            // are forced into strings.
-            //
-            // If the first template span has an empty literal, then the head must still be emitted.
-            //     `${ foo }${ bar }`
-            // must still be emitted as
-            //     "" + foo + bar
-
-            // There is always atleast one templateSpan in this code path, since
-            // NoSubstitutionTemplateLiterals are directly emitted via emitLiteral()
-            Debug.assert(node.templateSpans.length !== 0);
+            let expression: Expression = factory.createStringLiteral(node.head.text);
+            for (const span of node.templateSpans) {
+                const args = [visitNode(span.expression, visitor, isExpression)];
 
-            const span = node.templateSpans[0];
-            return node.head.text.length !== 0 || span.literal.text.length === 0 || !!length(getLeadingCommentRangesOfNode(span.expression, currentSourceFile));
-        }
+                if (span.literal.text.length > 0) {
+                    args.push(factory.createStringLiteral(span.literal.text));
+                }
 
-        /**
-         * Adds the head of a TemplateExpression to an array of expressions.
-         *
-         * @param expressions An array of expressions.
-         * @param node A TemplateExpression node.
-         */
-        function addTemplateHead(expressions: Expression[], node: TemplateExpression): void {
-            if (!shouldAddTemplateHead(node)) {
-                return;
+                expression = factory.createCallExpression(
+                    factory.createPropertyAccessExpression(expression, "concat"),
+                    /*typeArguments*/ undefined,
+                    args,
+                );
             }
 
-            expressions.push(factory.createStringLiteral(node.head.text));
-        }
-
-        /**
-         * Visits and adds the template spans of a TemplateExpression to an array of expressions.
-         *
-         * @param expressions An array of expressions.
-         * @param node A TemplateExpression node.
-         */
-        function addTemplateSpans(expressions: Expression[], node: TemplateExpression): void {
-            for (const span of node.templateSpans) {
-                expressions.push(visitNode(span.expression, visitor, isExpression));
-
-                // Only emit if the literal is non-empty.
-                // The binary '+' operator is left-associative, so the first string concatenation
-                // with the head will force the result up to this point to be a string.
-                // Emitting a '+ ""' has no semantic effect for middles and tails.
-                if (span.literal.text.length !== 0) {
-                    expressions.push(factory.createStringLiteral(span.literal.text));
-                }
-            }
+            return setTextRange(expression, node);
         }
 
         /**

src/testRunner/tsconfig.json

@@ -100,6 +100,7 @@
         "unittests/evaluation/optionalCall.ts",
         "unittests/evaluation/objectRest.ts",
         "unittests/evaluation/superInStaticInitializer.ts",
+        "unittests/evaluation/templateLiteral.ts",
         "unittests/evaluation/updateExpressionInModule.ts",
         "unittests/services/cancellableLanguageServiceOperations.ts",
         "unittests/services/colorization.ts",

src/testRunner/unittests/evaluation/templateLiteral.ts

@@ -0,0 +1,40 @@
+describe("unittests:: evaluation:: templateLiteral", () => {
+    it("toString() over valueOf()", () => {
+        const result = evaluator.evaluateTypeScript(`
+            class C {
+                toString() {
+                    return "toString";
+                }
+                valueOf() {
+                    return "valueOf";
+                }
+            }
+
+            export const output = \`\${new C}\`;
+        `);
+        assert.strictEqual(result.output, "toString");
+    });
+
+    it("correct evaluation order", () => {
+        const result = evaluator.evaluateTypeScript(`
+            class C {
+                counter: number;
+
+                constructor() {
+                    this.counter = 0;
+                }
+
+                get foo() {
+                    this.counter++;
+                    return {
+                        toString: () => this.counter++,
+                    };
+                }
+            }
+
+            const c = new C;
+            export const output = \`\${c.foo} \${c.foo}\`;
+        `);
+        assert.strictEqual(result.output, "1 3");
+    });
+});

tests/baselines/reference/APISample_compile.js

@@ -66,10 +66,10 @@ function compile(fileNames, options) {
             return;
         }
         var _a = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start), line = _a.line, character = _a.character;
-        console.log(diagnostic.file.fileName + " (" + (line + 1) + "," + (character + 1) + "): " + message);
+        console.log("".concat(diagnostic.file.fileName, " (").concat(line + 1, ",").concat(character + 1, "): ").concat(message));
     });
     var exitCode = emitResult.emitSkipped ? 1 : 0;
-    console.log("Process exiting with code '" + exitCode + "'.");
+    console.log("Process exiting with code '".concat(exitCode, "'."));
     process.exit(exitCode);
 }
 exports.compile = compile;

tests/baselines/reference/APISample_linter.js

@@ -114,7 +114,7 @@ function delint(sourceFile) {
     }
     function report(node, message) {
         var _a = sourceFile.getLineAndCharacterOfPosition(node.getStart()), line = _a.line, character = _a.character;
-        console.log(sourceFile.fileName + " (" + (line + 1) + "," + (character + 1) + "): " + message);
+        console.log("".concat(sourceFile.fileName, " (").concat(line + 1, ",").concat(character + 1, "): ").concat(message));
     }
 }
 exports.delint = delint;

tests/baselines/reference/APISample_parseConfig.js

@@ -56,7 +56,7 @@ function printError(error) {
     if (!error) {
         return;
     }
-    console.log((error.file && error.file.fileName) + ": " + error.messageText);
+    console.log("".concat(error.file && error.file.fileName, ": ").concat(error.messageText));
 }
 function createProgram(rootFiles, compilerOptionsJson) {
     var _a = ts.parseConfigFileTextToJson("tsconfig.json", compilerOptionsJson), config = _a.config, error = _a.error;

tests/baselines/reference/APISample_watcher.js

@@ -166,10 +166,10 @@ function watch(rootFileNames, options) {
     function emitFile(fileName) {
         var output = services.getEmitOutput(fileName);
         if (!output.emitSkipped) {
-            console.log("Emitting " + fileName);
+            console.log("Emitting ".concat(fileName));
         }
         else {
-            console.log("Emitting " + fileName + " failed");
+            console.log("Emitting ".concat(fileName, " failed"));
             logErrors(fileName);
         }
         output.outputFiles.forEach(function (o) {
@@ -184,10 +184,10 @@ function watch(rootFileNames, options) {
             var message = ts.flattenDiagnosticMessageText(diagnostic.messageText, "\n");
             if (diagnostic.file) {
                 var _a = diagnostic.file.getLineAndCharacterOfPosition(diagnostic.start), line = _a.line, character = _a.character;
-                console.log("  Error " + diagnostic.file.fileName + " (" + (line + 1) + "," + (character + 1) + "): " + message);
+                console.log("  Error ".concat(diagnostic.file.fileName, " (").concat(line + 1, ",").concat(character + 1, "): ").concat(message));
             }
             else {
-                console.log("  Error: " + message);
+                console.log("  Error: ".concat(message));
             }
         });
     }

tests/baselines/reference/TemplateExpression1.js

@@ -2,4 +2,4 @@
 var v = `foo ${ a 
 
 //// [TemplateExpression1.js]
-var v = "foo " + a;
+var v = "foo ".concat(a);

tests/baselines/reference/asOperator3.js

@@ -15,11 +15,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var a = "" + (123 + 456);
-var b = "leading " + (123 + 456);
-var c = 123 + 456 + " trailing";
-var d = "Hello " + 123 + " World";
+var a = "".concat(123 + 456);
+var b = "leading ".concat(123 + 456);
+var c = "".concat(123 + 456, " trailing");
+var d = "Hello ".concat(123, " World");
 var e = "Hello";
-var f = 1 + (1 + " end of string");
+var f = 1 + "".concat(1, " end of string");
 var g = tag(__makeTemplateObject(["Hello ", " World"], ["Hello ", " World"]), 123);
 var h = tag(__makeTemplateObject(["Hello"], ["Hello"]));

tests/baselines/reference/checkJsObjectLiteralIndexSignatures.js

@@ -16,7 +16,7 @@ stringIndex[s].toFixed();
 // @ts-check
 var _a, _b;
 var n = Math.random();
-var s = "" + n;
+var s = "".concat(n);
 var numericIndex = (_a = {}, _a[n] = 1, _a);
 numericIndex[n].toFixed();
 var stringIndex = (_b = {}, _b[s] = 1, _b);