feat(compiler): Add keySpan to Variable Node (#38965)

Now that we have `keySpan` for `BoundAttribute` (implemented in
https://github.com/angular/angular/pull/38898) we could do the same
for `Variable`.

This would allow us to distinguish the LHS and RHS from the whole source
span.

PR Close #38965

packages/compiler/src/render3/r3_ast.ts

@@ -118,7 +118,7 @@ export class Content implements Node {
 export class Variable implements Node {
   constructor(
       public name: string, public value: string, public sourceSpan: ParseSourceSpan,
-      public valueSpan?: ParseSourceSpan) {}
+      readonly keySpan: ParseSourceSpan, public valueSpan?: ParseSourceSpan) {}
   visit<Result>(visitor: Visitor<Result>): Result {
     return visitor.visitVariable(this);
   }

packages/compiler/src/render3/r3_template_transform.ts

@@ -159,7 +159,7 @@ class HtmlAstToIvyAst implements html.Visitor {
             templateKey, templateValue, attribute.sourceSpan, absoluteValueOffset, [],
             templateParsedProperties, parsedVariables);
         templateVariables.push(...parsedVariables.map(
-            v => new t.Variable(v.name, v.value, v.sourceSpan, v.valueSpan)));
+            v => new t.Variable(v.name, v.value, v.sourceSpan, v.keySpan, v.valueSpan)));
       } else {
         // Check for variables, events, property bindings, interpolation
         hasBinding = this.parseAttribute(
@@ -356,7 +356,8 @@ class HtmlAstToIvyAst implements html.Visitor {
       } else if (bindParts[KW_LET_IDX]) {
         if (isTemplateElement) {
           const identifier = bindParts[IDENT_KW_IDX];
-          this.parseVariable(identifier, value, srcSpan, attribute.valueSpan, variables);
+          const keySpan = createKeySpan(srcSpan, bindParts[KW_LET_IDX], identifier);
+          this.parseVariable(identifier, value, srcSpan, keySpan, attribute.valueSpan, variables);
         } else {
           this.reportError(`"let-" is only supported on ng-template elements.`, srcSpan);
         }
@@ -425,7 +426,7 @@ class HtmlAstToIvyAst implements html.Visitor {
   }
 
   private parseVariable(
-      identifier: string, value: string, sourceSpan: ParseSourceSpan,
+      identifier: string, value: string, sourceSpan: ParseSourceSpan, keySpan: ParseSourceSpan,
       valueSpan: ParseSourceSpan|undefined, variables: t.Variable[]) {
     if (identifier.indexOf('-') > -1) {
       this.reportError(`"-" is not allowed in variable names`, sourceSpan);
@@ -433,7 +434,7 @@ class HtmlAstToIvyAst implements html.Visitor {
       this.reportError(`Variable does not have a name`, sourceSpan);
     }
 
-    variables.push(new t.Variable(identifier, value, sourceSpan, valueSpan));
+    variables.push(new t.Variable(identifier, value, sourceSpan, keySpan, valueSpan));
   }
 
   private parseReference(

packages/compiler/test/render3/r3_ast_spans_spec.ts

@@ -50,8 +50,12 @@ class R3AstSourceSpans implements t.Visitor<void> {
   }
 
   visitVariable(variable: t.Variable) {
-    this.result.push(
-        ['Variable', humanizeSpan(variable.sourceSpan), humanizeSpan(variable.valueSpan)]);
+    this.result.push([
+      'Variable',
+      humanizeSpan(variable.sourceSpan),
+      humanizeSpan(variable.keySpan),
+      humanizeSpan(variable.valueSpan),
+    ]);
   }
 
   visitReference(reference: t.Reference) {
@@ -233,7 +237,7 @@ describe('R3 AST source spans', () => {
           'Template', '<ng-template let-a="b"></ng-template>', '<ng-template let-a="b">',
           '</ng-template>'
         ],
-        ['Variable', 'let-a="b"', 'b'],
+        ['Variable', 'let-a="b"', 'a', 'b'],
       ]);
     });
 
@@ -243,7 +247,7 @@ describe('R3 AST source spans', () => {
           'Template', '<ng-template data-let-a="b"></ng-template>', '<ng-template data-let-a="b">',
           '</ng-template>'
         ],
-        ['Variable', 'data-let-a="b"', 'b'],
+        ['Variable', 'data-let-a="b"', 'a', 'b'],
       ]);
     });
 
@@ -282,7 +286,7 @@ describe('R3 AST source spans', () => {
         ],
         ['TextAttribute', 'ngFor', '<empty>'],
         ['BoundAttribute', '*ngFor="let item of items"', 'of', 'items'],
-        ['Variable', 'let item ', '<empty>'],
+        ['Variable', 'let item ', 'item', '<empty>'],
         [
           'Element', '<div *ngFor="let item of items"></div>', '<div *ngFor="let item of items">',
           '</div>'
@@ -314,7 +318,7 @@ describe('R3 AST source spans', () => {
         [
           'BoundAttribute', '*ngFor="let item of items; trackBy: trackByFn"', 'trackBy', 'trackByFn'
         ],
-        ['Variable', 'let item ', '<empty>'],
+        ['Variable', 'let item ', 'item', '<empty>'],
         [
           'Element', '<div *ngFor="let item of items; trackBy: trackByFn"></div>',
           '<div *ngFor="let item of items; trackBy: trackByFn">', '</div>'
@@ -327,7 +331,7 @@ describe('R3 AST source spans', () => {
       expectFromHtml('<div *ngIf="let a=b"></div>').toEqual([
         ['Template', '<div *ngIf="let a=b"></div>', '<div *ngIf="let a=b">', '</div>'],
         ['TextAttribute', 'ngIf', '<empty>'],
-        ['Variable', 'let a=b', 'b'],
+        ['Variable', 'let a=b', 'a', 'b'],
         ['Element', '<div *ngIf="let a=b"></div>', '<div *ngIf="let a=b">', '</div>'],
       ]);
     });
@@ -336,7 +340,7 @@ describe('R3 AST source spans', () => {
       expectFromHtml('<div *ngIf="expr as local"></div>').toEqual([
         ['Template', '<div *ngIf="expr as local"></div>', '<div *ngIf="expr as local">', '</div>'],
         ['BoundAttribute', '*ngIf="expr as local"', 'ngIf', 'expr'],
-        ['Variable', 'ngIf="expr as local', 'ngIf'],
+        ['Variable', 'ngIf="expr as local', 'local', 'ngIf'],
         ['Element', '<div *ngIf="expr as local"></div>', '<div *ngIf="expr as local">', '</div>'],
       ]);
     });