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);

tests/baselines/reference/classAttributeInferenceTemplate.js

@@ -19,8 +19,8 @@ var MyClass = /** @class */ (function () {
     function MyClass() {
         var variable = 'something';
         this.property = "foo"; // Correctly inferred as `string`
-        this.property2 = "foo-" + variable; // Causes an error
-        var localProperty = "foo-" + variable; // Correctly inferred as `string`
+        this.property2 = "foo-".concat(variable); // Causes an error
+        var localProperty = "foo-".concat(variable); // Correctly inferred as `string`
     }
     return MyClass;
 }());

tests/baselines/reference/computedPropertyNames10_ES5.js

@@ -32,5 +32,5 @@ var v = (_a = {},
     _a[a] = function () { },
     _a[true] = function () { },
     _a["hello bye"] = function () { },
-    _a["hello " + a + " bye"] = function () { },
+    _a["hello ".concat(a, " bye")] = function () { },
     _a);

tests/baselines/reference/computedPropertyNames11_ES5.js

@@ -72,7 +72,7 @@ var v = (_a = {},
         enumerable: false,
         configurable: true
     }),
-    Object.defineProperty(_a, "hello " + a + " bye", {
+    Object.defineProperty(_a, "hello ".concat(a, " bye"), {
         get: function () { return 0; },
         enumerable: false,
         configurable: true

tests/baselines/reference/computedPropertyNames12_ES5.js

@@ -27,7 +27,7 @@ var C = /** @class */ (function () {
         this["hello bye"] = 0;
     }
     var _a, _b, _c;
-    _a = n, s + s, _b = s + n, +s, _c = "hello " + a + " bye";
+    _a = n, s + s, _b = s + n, +s, _c = "hello ".concat(a, " bye");
     C[_c] = 0;
     return C;
 }());

tests/baselines/reference/computedPropertyNames13_ES5.js

@@ -33,6 +33,6 @@ var C = /** @class */ (function () {
     C.prototype[a] = function () { };
     C[true] = function () { };
     C.prototype["hello bye"] = function () { };
-    C["hello " + a + " bye"] = function () { };
+    C["hello ".concat(a, " bye")] = function () { };
     return C;
 }());

tests/baselines/reference/computedPropertyNames16_ES5.js

@@ -73,7 +73,7 @@ var C = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(C.prototype, "hello " + a + " bye", {
+    Object.defineProperty(C.prototype, "hello ".concat(a, " bye"), {
         get: function () { return 0; },
         enumerable: false,
         configurable: true

tests/baselines/reference/computedPropertyNames4_ES5.js

@@ -32,5 +32,5 @@ var v = (_a = {},
     _a[a] = 1,
     _a[true] = 0,
     _a["hello bye"] = 0,
-    _a["hello " + a + " bye"] = 0,
+    _a["hello ".concat(a, " bye")] = 0,
     _a);

tests/baselines/reference/constEnumErrors.js

@@ -52,7 +52,7 @@ var E;
 var y0 = E2[1];
 var name = "A";
 var y1 = E2[name];
-var y2 = E2["" + name];
+var y2 = E2["".concat(name)];
 var x = E2;
 var y = [E2];
 function foo(t) {

tests/baselines/reference/declarationNoDanglingGenerics.js

@@ -54,7 +54,7 @@ exports.CKind = exports.BKind = exports.AKind = void 0;
 var kindCache = {};
 function register(kind) {
     if (kindCache[kind]) {
-        throw new Error("Class with kind \"" + kind + "\" is already registered.");
+        throw new Error("Class with kind \"".concat(kind, "\" is already registered."));
     }
     kindCache[kind] = true;
 }

tests/baselines/reference/destructuringInitializerContextualTypeFromContext.js

@@ -55,7 +55,7 @@ var Parent = function (_a) {
 };
 var Child = function (_a) {
     var children = _a.children, _b = _a.name, name = _b === void 0 ? "Artemis" : _b, props = __rest(_a, ["children", "name"]);
-    return "name: " + name + " props: " + JSON.stringify(props);
+    return "name: ".concat(name, " props: ").concat(JSON.stringify(props));
 };
 f(function (_a) {
     var _1 = _a[0], _b = _a[1], _2 = _b === void 0 ? undefined : _b;

tests/baselines/reference/emitExponentiationOperatorInTempalteString4.js

@@ -31,22 +31,22 @@ var t1 = 10;
 var t2 = 10;
 var s;
 // With TemplateTail
-Math.pow(t1, -t2) + " world";
-Math.pow((-t1), t2) - t1 + " world";
-Math.pow((-++t1), t2) - t1 + " world";
-Math.pow((-t1++), t2) - t1 + " world";
-Math.pow((~t1), Math.pow(t2, --t1)) + " world";
-typeof (Math.pow(t1, Math.pow(t2, t1))) + " world";
+"".concat(Math.pow(t1, -t2), " world");
+"".concat(Math.pow((-t1), t2) - t1, " world");
+"".concat(Math.pow((-++t1), t2) - t1, " world");
+"".concat(Math.pow((-t1++), t2) - t1, " world");
+"".concat(Math.pow((~t1), Math.pow(t2, --t1)), " world");
+"".concat(typeof (Math.pow(t1, Math.pow(t2, t1))), " world");
 // TempateHead & TemplateTail are empt
-Math.pow(t1, -t2) + " hello world " + Math.pow(t1, -t2);
-Math.pow((-t1), t2) - t1 + " hello world " + (Math.pow((-t1), t2) - t1);
-Math.pow((-++t1), t2) - t1 + " hello world " + Math.pow(t1, Math.pow((-++t1), -t1));
-Math.pow((-t1++), t2) - t1 + " hello world " + Math.pow(t2, Math.pow((-t1++), -t1));
-Math.pow((~t1), Math.pow(t2, --t1)) + " hello world " + Math.pow((~t1), Math.pow(t2, --t1));
-typeof (Math.pow(t1, Math.pow(t2, t1))) + " hello world " + typeof (Math.pow(t1, Math.pow(t2, t1)));
+"".concat(Math.pow(t1, -t2), " hello world ").concat(Math.pow(t1, -t2));
+"".concat(Math.pow((-t1), t2) - t1, " hello world ").concat(Math.pow((-t1), t2) - t1);
+"".concat(Math.pow((-++t1), t2) - t1, " hello world ").concat(Math.pow(t1, Math.pow((-++t1), -t1)));
+"".concat(Math.pow((-t1++), t2) - t1, " hello world ").concat(Math.pow(t2, Math.pow((-t1++), -t1)));
+"".concat(Math.pow((~t1), Math.pow(t2, --t1)), " hello world ").concat(Math.pow((~t1), Math.pow(t2, --t1)));
+"".concat(typeof (Math.pow(t1, Math.pow(t2, t1))), " hello world ").concat(typeof (Math.pow(t1, Math.pow(t2, t1))));
 // With templateHead
-"hello " + (Math.pow((-t1), t2) - t1);
-"hello " + (Math.pow((-++t1), t2) - t1);
-"hello " + (Math.pow((-t1++), t2) - t1);
-"hello " + Math.pow((~t1), Math.pow(t2, --t1));
-"hello " + typeof (Math.pow(t1, Math.pow(t2, t1)));
+"hello ".concat(Math.pow((-t1), t2) - t1);
+"hello ".concat(Math.pow((-++t1), t2) - t1);
+"hello ".concat(Math.pow((-t1++), t2) - t1);
+"hello ".concat(Math.pow((~t1), Math.pow(t2, --t1)));
+"hello ".concat(typeof (Math.pow(t1, Math.pow(t2, t1))));