fix(compiler): incorrect spans for template literals (angular#60323)

Fixes that we were producing zero-length spans for template literals and template literal elements.

Fixes angular#60320.
Fixes angular#60319.

PR Close angular#60323

Author: crisbeto

packages/compiler/src/expression_parser/parser.ts

@@ -1449,9 +1449,10 @@ class _ParseAST {
 
   private parseNoInterpolationTemplateLiteral(): TemplateLiteral {
     const text = this.next.strValue;
+    const start = this.inputIndex;
     this.advance();
-    const span = this.span(this.inputIndex);
-    const sourceSpan = this.sourceSpan(this.inputIndex);
+    const span = this.span(start);
+    const sourceSpan = this.sourceSpan(start);
     return new TemplateLiteral(
       span,
       sourceSpan,
@@ -1474,14 +1475,15 @@ class _ParseAST {
       const token = this.next;
 
       if (token.isTemplateLiteralPart() || token.isTemplateLiteralEnd()) {
+        const partStart = this.inputIndex;
+        this.advance();
         elements.push(
           new TemplateLiteralElement(
-            this.span(this.inputIndex),
-            this.sourceSpan(this.inputIndex),
+            this.span(partStart),
+            this.sourceSpan(partStart),
             token.strValue,
           ),
         );
-        this.advance();
         if (token.isTemplateLiteralEnd()) {
           break;
         }

packages/compiler/test/expression_parser/parser_spec.ts

@@ -18,6 +18,7 @@ import {
   PropertyRead,
   TemplateBinding,
   VariableBinding,
+  TemplateLiteral,
 } from '@angular/compiler/src/expression_parser/ast';
 import {Lexer} from '@angular/compiler/src/expression_parser/lexer';
 import {Parser, SplitInterpolation} from '@angular/compiler/src/expression_parser/parser';
@@ -528,18 +529,34 @@ describe('parser', () => {
       expect(unparseWithSpan(ast)).toContain(['a.b = c', '[nameSpan] b']);
     });
 
-    it('should record template literal space', () => {
+    it('should record spans for untagged template literals with no interpolations', () => {
+      const ast = parseAction('`hello world`');
+      const unparsed = unparseWithSpan(ast);
+      expect(unparsed).toEqual([
+        ['`hello world`', '`hello world`'],
+        ['hello world', '`hello world`'],
+      ]);
+    });
+
+    it('should record spans for untagged template literals with interpolations', () => {
       const ast = parseAction('`before ${one} - ${two} - ${three} after`');
       const unparsed = unparseWithSpan(ast);
-      expect(unparsed).toContain(['before ', '']);
-      expect(unparsed).toContain(['one', 'one']);
-      expect(unparsed).toContain(['one', '[nameSpan] one']);
-      expect(unparsed).toContain([' - ', '']);
-      expect(unparsed).toContain(['two', 'two']);
-      expect(unparsed).toContain(['two', '[nameSpan] two']);
-      expect(unparsed).toContain(['three', 'three']);
-      expect(unparsed).toContain(['three', '[nameSpan] three']);
-      expect(unparsed).toContain([' after', '']);
+      expect(unparsed).toEqual([
+        ['`before ${one} - ${two} - ${three} after`', '`before ${one} - ${two} - ${three} after`'],
+        ['before ', '`before '],
+        ['one', 'one'],
+        ['one', '[nameSpan] one'],
+        ['', ''], // Implicit receiver
+        [' - ', ' - '],
+        ['two', 'two'],
+        ['two', '[nameSpan] two'],
+        ['', ''], // Implicit receiver
+        [' - ', ' - '],
+        ['three', 'three'],
+        ['three', '[nameSpan] three'],
+        ['', ''], // Implicit receiver
+        [' after', ' after`'],
+      ]);
     });
 
     it('should record spans for tagged template literal with no interpolations', () => {
@@ -549,9 +566,9 @@ describe('parser', () => {
         ['tag`text`', 'tag`text`'],
         ['tag', 'tag'],
         ['tag', '[nameSpan] tag'],
-        ['', ''],
-        ['`text`', ''],
-        ['text', ''],
+        ['', ''], // Implicit receiver
+        ['`text`', '`text`'],
+        ['text', '`text`'],
       ]);
     });
 
@@ -565,21 +582,21 @@ describe('parser', () => {
         ],
         ['tag', 'tag'],
         ['tag', '[nameSpan] tag'],
-        ['', ''],
+        ['', ''], // Implicit receiver
         ['`before ${one} - ${two} - ${three} after`', '`before ${one} - ${two} - ${three} after`'],
-        ['before ', ''],
+        ['before ', '`before '],
         ['one', 'one'],
         ['one', '[nameSpan] one'],
-        ['', ''],
-        [' - ', ''],
+        ['', ''], // Implicit receiver
+        [' - ', ' - '],
         ['two', 'two'],
         ['two', '[nameSpan] two'],
-        ['', ''],
-        [' - ', ''],
+        ['', ''], // Implicit receiver
+        [' - ', ' - '],
         ['three', 'three'],
         ['three', '[nameSpan] three'],
-        ['', ''],
-        [' after', ''],
+        ['', ''], // Implicit receiver
+        [' after', ' after`'],
       ]);
     });