Skip to content

Commit 5ca2fc9

Browse files
sosukesuzukisosukesuzuki
authored
Support Angular @let declaration syntax (#16474)
gmail.com>
1 parent bfcfdcc commit 5ca2fc9

16 files changed

Lines changed: 508 additions & 1 deletion

File tree

‎changelog_unreleased/angular/16474.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
#### Support `@let` declaration syntax (#16474 by @sosukesuzuki)
2+
3+
Adds support for Angular v18 `@let` declaration syntax.
4+
5+
Please see the following code example. The `@let` declaration allows you to define local variables within the template:
6+
7+
<!-- prettier-ignore -->
8+
```html
9+
@let name = 'Frodo';
10+
11+
<h1>Dashboard for {{name}}</h1>
12+
Hello, {{name}}
13+
```
14+
15+
For more details, please refer to the excellent blog post by the Angular Team: [Introducing @let in Angular](https://blog.angular.dev/introducing-let-in-angular-686f9f383f0f).
16+
17+
We also appreciate the Angular Team for kindly answering our questions to implement this feature.

‎src/language-html/clean.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,10 @@ function clean(original, cloned) {
6161
if (original.type === "angularIcuExpression") {
6262
cloned.switchValue = original.switchValue.trim();
6363
}
64+
65+
if (original.type === "angularLetDeclarationInitializer") {
66+
delete cloned.value;
67+
}
6468
}
6569

6670
clean.ignoredProperties = ignoredProperties;

‎src/language-html/embed.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
import printFrontMatter from "../utils/front-matter/print.js";
99
import printAngularControlFlowBlockParameters from "./embed/angular-control-flow-block-parameters.js";
1010
import printAttribute from "./embed/attribute.js";
11+
import { formatAttributeValue } from "./embed/utils.js";
1112
import getNodeContent from "./get-node-content.js";
1213
import {
1314
needsToBorrowPrevClosingTagEndMarker,
@@ -148,6 +149,13 @@ function embed(path, options) {
148149
}
149150

150151
return printAngularControlFlowBlockParameters;
152+
153+
case "angularLetDeclarationInitializer":
154+
return (textToDoc) =>
155+
formatAttributeValue(node.value, textToDoc, {
156+
parser: "__ng_binding",
157+
__isInHtmlAttribute: false,
158+
});
151159
}
152160
}
153161

‎src/language-html/parser-html.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,24 @@ function normalizeAngularControlFlowBlock(node) {
6868
};
6969
}
7070

71+
function normalizeAngularLetDeclaration(node) {
72+
if (node.type !== "letDeclaration") {
73+
return;
74+
}
75+
76+
// Similar to `VariableDeclarator` in estree
77+
node.type = "angularLetDeclaration";
78+
node.id = node.name;
79+
node.init = {
80+
type: "angularLetDeclarationInitializer",
81+
sourceSpan: new ParseSourceSpan(node.valueSpan.start, node.valueSpan.end),
82+
value: node.value,
83+
};
84+
85+
delete node.name;
86+
delete node.value;
87+
}
88+
7189
function normalizeAngularIcuExpression(node) {
7290
if (node.type === "plural" || node.type === "select") {
7391
node.clause = node.type;
@@ -103,6 +121,7 @@ function ngHtmlParser(input, parseOptions, options) {
103121
shouldParseAsRawText(...args) ? TagContentType.RAW_TEXT : undefined
104122
: undefined,
105123
tokenizeAngularBlocks: name === "angular" ? true : undefined,
124+
tokenizeAngularLetDeclaration: name === "angular" ? true : undefined,
106125
});
107126

108127
if (name === "vue") {
@@ -395,6 +414,7 @@ function parse(
395414
}
396415

397416
normalizeAngularControlFlowBlock(node);
417+
normalizeAngularLetDeclaration(node);
398418
normalizeAngularIcuExpression(node);
399419
});
400420

‎src/language-html/printer-html.js‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* @typedef {import("../document/builders.js").Doc} Doc
33
*/
44

5-
import { fill, group, hardline } from "../document/builders.js";
5+
import { fill, group, hardline, indent, line } from "../document/builders.js";
66
import { cleanDoc, replaceEndOfLine } from "../document/utils.js";
77
import getPreferredQuote from "../utils/get-preferred-quote.js";
88
import htmlWhitespaceUtils from "../utils/html-whitespace-utils.js";
@@ -53,6 +53,18 @@ function genericPrint(path, options, print) {
5353
case "angularControlFlowBlockParameter":
5454
return htmlWhitespaceUtils.trim(node.expression);
5555

56+
case "angularLetDeclaration":
57+
// print like "break-after-operator" layout assignment in estree printer
58+
return group([
59+
"@let ",
60+
group([node.id, " =", group(indent([line, print("init")]))]),
61+
// semicolon is required
62+
";",
63+
]);
64+
case "angularLetDeclarationInitializer":
65+
// basically printed via embedded formatting
66+
return node.value;
67+
5668
case "angularIcuExpression":
5769
return printAngularIcuExpression(path, options, print);
5870
case "angularIcuCase":

‎src/language-html/visitor-keys.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ const visitorKeys = {
1414
angularControlFlowBlock: ["children", "parameters"],
1515
angularControlFlowBlockParameters: ["children"],
1616
angularControlFlowBlockParameter: [],
17+
angularLetDeclaration: ["init"],
18+
angularLetDeclarationInitializer: [],
1719
angularIcuExpression: ["cases"],
1820
angularIcuCase: ["expression"],
1921
};

0 commit comments

Comments
 (0)