refactor(compiler): implement let declarations in render3 ast

Introduces a new `LetDeclaration` into the Render3 AST, simiarly to the HTML AST, and adds an initial integration into the various visitors.

packages/compiler-cli/src/ngtsc/indexer/src/template.ts

@@ -28,6 +28,7 @@ import {
  TmplAstForLoopBlockEmpty,
  TmplAstIfBlock,
  TmplAstIfBlockBranch,
+ TmplAstLetDeclaration,
  TmplAstNode,
  TmplAstRecursiveVisitor,
  TmplAstReference,
@@ -351,6 +352,10 @@ class TemplateVisitor extends TmplAstRecursiveVisitor {
  this.visitAll(block.children);
  }
 
+ override visitLetDeclaration(decl: TmplAstLetDeclaration): void {
+ this.visitExpression(decl.value);
+ }
+
  /** Creates an identifier for a template element or template node. */
  private elementOrTemplateToIdentifier(
  node: TmplAstElement | TmplAstTemplate,

packages/compiler-cli/src/ngtsc/typecheck/extended/api/api.ts

@@ -27,6 +27,7 @@ import {
  TmplAstIcu,
  TmplAstIfBlock,
  TmplAstIfBlockBranch,
+ TmplAstLetDeclaration,
  TmplAstNode,
  TmplAstRecursiveVisitor,
  TmplAstReference,
@@ -264,6 +265,10 @@ class TemplateVisitor<Code extends ErrorCode>
  this.visitAllNodes(block.children);
  }
 
+ visitLetDeclaration(decl: TmplAstLetDeclaration): void {
+ this.visitAst(decl.value);
+ }
+
  getDiagnostics(template: TmplAstNode[]): NgTemplateDiagnostic<Code>[] {
  this.diagnostics = [];
  this.visitAllNodes(template);

packages/compiler/src/compiler.ts

@@ -158,6 +158,7 @@ export {
  IfBlockBranch as TmplAstIfBlockBranch,
  DeferredBlockTriggers as TmplAstDeferredBlockTriggers,
  UnknownBlock as TmplAstUnknownBlock,
+ LetDeclaration as TmplAstLetDeclaration,
 } from './render3/r3_ast';
 export * from './render3/view/t2_api';
 export * from './render3/view/t2_binder';

packages/compiler/src/render3/r3_ast.ts

@@ -508,6 +508,20 @@ export class UnknownBlock implements Node {
  }
 }
 
+export class LetDeclaration implements Node {
+ constructor(
+ public name: string,
+ public value: AST,
+ public sourceSpan: ParseSourceSpan,
+ public nameSpan: ParseSourceSpan,
+ public valueSpan: ParseSourceSpan,
+ ) {}
+
+ visit<Result>(visitor: Visitor<Result>): Result {
+ return visitor.visitLetDeclaration(this);
+ }
+}
+
 export class Template implements Node {
  constructor(
  // tagName is the name of the container element, if applicable.
@@ -613,6 +627,7 @@ export interface Visitor<Result = any> {
  visitIfBlock(block: IfBlock): Result;
  visitIfBlockBranch(block: IfBlockBranch): Result;
  visitUnknownBlock(block: UnknownBlock): Result;
+ visitLetDeclaration(decl: LetDeclaration): Result;
 }
 
 export class RecursiveVisitor implements Visitor<void> {
@@ -678,6 +693,7 @@ export class RecursiveVisitor implements Visitor<void> {
  visitIcu(icu: Icu): void {}
  visitDeferredTrigger(trigger: DeferredTrigger): void {}
  visitUnknownBlock(block: UnknownBlock): void {}
+ visitLetDeclaration(decl: LetDeclaration): void {}
 }
 
 export function visitAll<Result>(visitor: Visitor<Result>, nodes: Node[]): Result[] {

packages/compiler/src/render3/r3_template_transform.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ParsedEvent, ParsedProperty, ParsedVariable} from '../expression_parser/ast';
+import {EmptyExpr, ParsedEvent, ParsedProperty, ParsedVariable} from '../expression_parser/ast';
 import * as i18n from '../i18n/i18n_ast';
 import * as html from '../ml_parser/ast';
 import {replaceNgsp} from '../ml_parser/html_whitespaces';
@@ -390,7 +390,18 @@ class HtmlAstToIvyAst implements html.Visitor {
  }
 
  visitLetDeclaration(decl: html.LetDeclaration, context: any) {
- throw new Error('TODO: implement R3 LetDeclaration');
+ const value = this.bindingParser.parseBinding(
+ decl.value,
+ false,
+ decl.valueSpan,
+ decl.valueSpan.start.offset,
+ );
+
+ if (value.errors.length === 0 && value.ast instanceof EmptyExpr) {
+ this.reportError('@let declaration value cannot be empty', decl.valueSpan);
+ }
+
+ return new t.LetDeclaration(decl.name, value, decl.sourceSpan, decl.nameSpan, decl.valueSpan);
  }
 
  visitBlockParameter() {
@@ -894,7 +905,7 @@ class NonBindableVisitor implements html.Visitor {
  }
 
  visitLetDeclaration(decl: html.LetDeclaration, context: any) {
- throw new Error('TODO: implement R3 LetDeclaration');
+ return new t.Text(`@let ${decl.name} = ${decl.value};`, decl.sourceSpan);
  }
 }
 

packages/compiler/src/render3/view/t2_binder.ts

@@ -35,6 +35,7 @@ import {
  IfBlock,
  IfBlockBranch,
  InteractionDeferredTrigger,
+ LetDeclaration,
  Node,
  Reference,
  SwitchBlock,
@@ -273,6 +274,10 @@ class Scope implements Visitor {
  this.ingestScopedNode(content);
  }
 
+ visitLetDeclaration(decl: LetDeclaration) {
+ // TODO(crisbeto): needs further integration
+ }
+
  // Unused visitors.
  visitBoundAttribute(attr: BoundAttribute) {}
  visitBoundEvent(event: BoundEvent) {}
@@ -536,6 +541,10 @@ class DirectiveBinder<DirectiveT extends DirectiveMeta> implements Visitor {
  content.children.forEach((child) => child.visit(this));
  }
 
+ visitLetDeclaration(decl: LetDeclaration) {
+ // TODO(crisbeto): needs further integration
+ }
+
  // Unused visitors.
  visitVariable(variable: Variable): void {}
  visitReference(reference: Reference): void {}
@@ -792,6 +801,12 @@ class TemplateBinder extends RecursiveAstVisitor implements Visitor {
  visitBoundText(text: BoundText) {
  text.value.visit(this);
  }
+
+ visitLetDeclaration(decl: LetDeclaration) {
+ // TODO(crisbeto): needs further integration
+ decl.value.visit(this);
+ }
+
  override visitPipe(ast: BindingPipe, context: any): any {
  this.usedPipes.add(ast.name);
  if (!this.scope.isDeferred) {

packages/compiler/test/render3/r3_ast_spans_spec.ts

@@ -247,6 +247,15 @@ class R3AstSourceSpans implements t.Visitor<void> {
  this.result.push(['UnknownBlock', humanizeSpan(block.sourceSpan)]);
  }
 
+ visitLetDeclaration(decl: t.LetDeclaration): void {
+ this.result.push([
+ 'LetDeclaration',
+ humanizeSpan(decl.sourceSpan),
+ humanizeSpan(decl.nameSpan),
+ humanizeSpan(decl.valueSpan),
+ ]);
+ }
+
  private visitAll(nodes: t.Node[][]) {
  nodes.forEach((node) => t.visitAll(this, node));
  }
@@ -259,8 +268,8 @@ function humanizeSpan(span: ParseSourceSpan | null | undefined): string {
  return span.toString();
 }
 
-function expectFromHtml(html: string) {
- return expectFromR3Nodes(parse(html).nodes);
+function expectFromHtml(html: string, options?: {tokenizeLet?: boolean}) {
+ return expectFromR3Nodes(parse(html, options).nodes);
 }
 
 function expectFromR3Nodes(nodes: t.Node[]) {
@@ -817,4 +826,12 @@ describe('R3 AST source spans', () => {
  ]);
  });
  });
+
+ describe('@let declaration', () => {
+ it('is correct for a let declaration', () => {
+ expectFromHtml('@let foo = 123;', {tokenizeLet: true}).toEqual([
+ ['LetDeclaration', '@let foo = 123', 'foo', '123'],
+ ]);
+ });
+ });
 });

packages/compiler/test/render3/r3_template_transform_spec.ts

@@ -166,6 +166,10 @@ class R3AstHumanizer implements t.Visitor<void> {
  this.result.push(['UnknownBlock', block.name]);
  }
 
+ visitLetDeclaration(decl: t.LetDeclaration) {
+ this.result.push(['LetDeclaration', decl.name, unparse(decl.value)]);
+ }
+
  private visitAll(nodes: t.Node[][]) {
  nodes.forEach((node) => t.visitAll(this, node));
  }
@@ -2179,4 +2183,39 @@ describe('R3 template transform', () => {
  expectFromHtml('@unknown {}', true /* ignoreError */).toEqual([['UnknownBlock', 'unknown']]);
  });
  });
+
+ describe('@let declarations', () => {
+ function parseLet(html: string, ignoreError = false) {
+ return parse(html, {ignoreError, tokenizeLet: true});
+ }
+
+ function expectLet(html: string, ignoreError = false) {
+ const res = parseLet(html, ignoreError);
+ return expectFromR3Nodes(res.nodes);
+ }
+
+ it('should parse a let declaration', () => {
+ expectLet('@let foo = 123 + 456;').toEqual([['LetDeclaration', 'foo', '123 + 456']]);
+ });
+
+ it('should report syntax errors in the let declaration value', () => {
+ expect(() => parseLet('@let foo = {one: 1;')).toThrowError(
+ /Parser Error: Missing expected } at the end of the expression \[\{one: 1]/,
+ );
+ });
+
+ it('should report a let declaration with no value', () => {
+ expect(() => parseLet('@let foo = ;')).toThrowError(
+ /@let declaration value cannot be empty/,
+ );
+ });
+
+ it('should produce a text node when @let is used inside ngNonBindable', () => {
+ expectLet('<div ngNonBindable>@let foo = 123;</div>').toEqual([
+ ['Element', 'div'],
+ ['TextAttribute', 'ngNonBindable', ''],
+ ['Text', '@let foo = 123;'],
+ ]);
+ });
+ });
 });

packages/compiler/test/render3/util/expression.ts

@@ -203,6 +203,10 @@ class ExpressionSourceHumanizer extends e.RecursiveAstVisitor implements t.Visit
  block.expressionAlias?.visit(this);
  t.visitAll(this, block.children);
  }
+
+ visitLetDeclaration(decl: t.LetDeclaration) {
+ decl.value.visit(this);
+ }
 }
 
 /**

packages/compiler/test/render3/view/util.ts

@@ -148,12 +148,14 @@ export function parseR3(
  preserveWhitespaces?: boolean;
  leadingTriviaChars?: string[];
  ignoreError?: boolean;
+ tokenizeLet?: boolean;
  } = {},
 ): Render3ParseResult {
  const htmlParser = new HtmlParser();
  const parseResult = htmlParser.parse(input, 'path:://to/template', {
  tokenizeExpansionForms: true,
  leadingTriviaChars: options.leadingTriviaChars ?? LEADING_TRIVIA_CHARS,
+ tokenizeLet: options.tokenizeLet,
  });
 
  if (parseResult.errors.length > 0 && !options.ignoreError) {

packages/core/schematics/utils/template_ast_visitor.ts

@@ -32,6 +32,7 @@ import type {
  TmplAstTextAttribute,
  TmplAstVariable,
  TmplAstUnknownBlock,
+ TmplAstLetDeclaration,
 } from '@angular/compiler';
 
 /**
@@ -79,6 +80,7 @@ export class TemplateAstVisitor implements TmplAstRecursiveVisitor {
  visitForLoopBlockEmpty(block: TmplAstForLoopBlockEmpty): void {}
  visitIfBlock(block: TmplAstIfBlock): void {}
  visitIfBlockBranch(block: TmplAstIfBlockBranch): void {}
+ visitLetDeclaration(decl: TmplAstLetDeclaration): void {}
 
  /**
  * Visits all the provided nodes in order using this Visitor's visit methods.

packages/language-service/src/template_target.ts

@@ -33,6 +33,7 @@ import {
  TmplAstIcu,
  TmplAstIfBlock,
  TmplAstIfBlockBranch,
+ TmplAstLetDeclaration,
  TmplAstNode,
  TmplAstReference,
  TmplAstSwitchBlock,
@@ -610,6 +611,10 @@ class TemplateTargetVisitor implements TmplAstVisitor {
 
  visitUnknownBlock(block: TmplAstUnknownBlock) {}
 
+ visitLetDeclaration(decl: TmplAstLetDeclaration) {
+ this.visitBinding(decl.value);
+ }
+
  visitAll(nodes: TmplAstNode[]) {
  for (const node of nodes) {
  this.visit(node);