Skip to content
This repository was archived by the owner on Nov 21, 2025. It is now read-only.

Commit d5a5059

Browse files
atscottatscott
authored
feat(syntaxes): Add support for block syntaxes (#1926)
* feat(syntaxes): Add support for block syntaxes This commit updates the syntaxes of the language service to support the upcoming blocks (if, for, defer, switch) * fixup! feat(syntaxes): Add support for block syntaxes
1 parent bd6282e commit d5a5059

File tree

10 files changed

+338
-3
lines changed

10 files changed

+338
-3
lines changed

‎.aspect/rules/external_repository_action_cache/npm_translate_lock_LTE4Nzc1MDcwNjU=‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
.npmrc=974837034
44
pnpm-lock.yaml=1086637220
55
yarn.lock=-1381666033
6-
package.json=-759122475
6+
package.json=-1589503024
77
pnpm-workspace.yaml=1711114604

‎integration/project/app/foo.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
<span class="subtitle">
33
subtitle
44
</span>
5-
<lib-post></lib-post>
5+
<lib-post></lib-post>

‎package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,18 @@
173173
"source.css": "css"
174174
}
175175
},
176+
{
177+
"path": "./syntaxes/template-blocks.json",
178+
"scopeName": "template.blocks.ng",
179+
"injectTo": [
180+
"text.html.derivative",
181+
"source.ts"
182+
],
183+
"embeddedLanguages": {
184+
"text.html": "html",
185+
"source.js": "javascript"
186+
}
187+
},
176188
{
177189
"path": "./syntaxes/expression.json",
178190
"scopeName": "expression.ng"

‎syntaxes/BUILD.bazel‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ js_run_binary(
1313
"_inline-styles.json",
1414
"_inline-template.json",
1515
"_template.json",
16+
"_template-blocks.json",
1617
]
1718
)
1819

@@ -23,6 +24,7 @@ write_source_files(
2324
"inline-styles.json": "_inline-styles.json",
2425
"inline-template.json": "_inline-template.json",
2526
"template.json": "_template.json",
27+
"template-blocks.json": "_template-blocks.json",
2628
}
2729
)
2830

@@ -43,4 +45,4 @@ filegroup(
4345
name = "npm_files",
4446
srcs = glob(["*.json"], exclude = ["tsconfig.json"]),
4547
visibility = ["//:__pkg__"]
46-
)
48+
)

‎syntaxes/src/build.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {Expression} from './expression';
1212
import {InlineStyles} from './inline-styles';
1313
import {InlineTemplate} from './inline-template';
1414
import {Template} from './template';
15+
import {TemplateBlocks} from './template-blocks';
1516
import {GrammarDefinition, JsonObject} from './types';
1617

1718
// Recursively transforms a TypeScript grammar definition into an object which can be processed by
@@ -53,3 +54,4 @@ build(Expression, 'expression');
5354
build(Template, 'template');
5455
build(InlineTemplate, 'inline-template');
5556
build(InlineStyles, 'inline-styles');
57+
build(TemplateBlocks, 'template-blocks');

‎syntaxes/src/template-blocks.ts‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/**
2+
* @license
3+
* Copyright Google Inc. All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {GrammarDefinition} from './types';
10+
11+
export const TemplateBlocks: GrammarDefinition = {
12+
scopeName: 'template.blocks.ng',
13+
injectionSelector: 'L:text.html -comment -expression.ng -meta.tag',
14+
patterns: [
15+
{include: '#block'},
16+
],
17+
repository: {
18+
19+
transition: {
20+
match: '@',
21+
name: 'keyword.control.block.transition.ng',
22+
},
23+
24+
block: {
25+
begin: /(@)((?:\w+\s*)+)/,
26+
beginCaptures: {
27+
1: {
28+
patterns: [
29+
{include: '#transition'},
30+
]
31+
},
32+
2: {name: 'keyword.control.block.kind.ng'},
33+
},
34+
patterns: [{include: '#blockExpression'}],
35+
end: '(?<=\\})',
36+
contentName: 'control.block.ng',
37+
},
38+
39+
blockExpression: {
40+
begin: /(?:(\()(.*)(\)))?\s*/,
41+
beginCaptures: {
42+
1: {name: 'meta.brace.round.ts'},
43+
2: {
44+
name: 'control.block.expression.ng',
45+
patterns: [
46+
{include: 'source.js'},
47+
]
48+
},
49+
3: {name: 'meta.brace.round.ts'},
50+
},
51+
end: '(?<=\\})',
52+
patterns: [{include: '#blockBody'}]
53+
},
54+
55+
blockBody: {
56+
begin: /\{/,
57+
beginCaptures: {
58+
0: {name: 'punctuation.definition.block.ts'},
59+
},
60+
end: /\}/,
61+
endCaptures: {
62+
0: {name: 'punctuation.definition.block.ts'},
63+
},
64+
contentName: 'control.block.body.ng',
65+
patterns: [
66+
{include: 'text.html.derivative'},
67+
{include: 'template.ng'},
68+
]
69+
},
70+
71+
},
72+
};

‎syntaxes/template-blocks.json‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
{
2+
"scopeName": "template.blocks.ng",
3+
"injectionSelector": "L:text.html -comment -expression.ng -meta.tag",
4+
"patterns": [
5+
{
6+
"include": "#block"
7+
}
8+
],
9+
"repository": {
10+
"transition": {
11+
"match": "@",
12+
"name": "keyword.control.block.transition.ng"
13+
},
14+
"block": {
15+
"begin": "(@)((?:\\w+\\s*)+)",
16+
"beginCaptures": {
17+
"1": {
18+
"patterns": [
19+
{
20+
"include": "#transition"
21+
}
22+
]
23+
},
24+
"2": {
25+
"name": "keyword.control.block.kind.ng"
26+
}
27+
},
28+
"patterns": [
29+
{
30+
"include": "#blockExpression"
31+
}
32+
],
33+
"end": "(?<=\\})",
34+
"contentName": "control.block.ng"
35+
},
36+
"blockExpression": {
37+
"begin": "(?:(\\()(.*)(\\)))?\\s*",
38+
"beginCaptures": {
39+
"1": {
40+
"name": "meta.brace.round.ts"
41+
},
42+
"2": {
43+
"name": "control.block.expression.ng",
44+
"patterns": [
45+
{
46+
"include": "source.js"
47+
}
48+
]
49+
},
50+
"3": {
51+
"name": "meta.brace.round.ts"
52+
}
53+
},
54+
"end": "(?<=\\})",
55+
"patterns": [
56+
{
57+
"include": "#blockBody"
58+
}
59+
]
60+
},
61+
"blockBody": {
62+
"begin": "\\{",
63+
"beginCaptures": {
64+
"0": {
65+
"name": "punctuation.definition.block.ts"
66+
}
67+
},
68+
"end": "\\}",
69+
"endCaptures": {
70+
"0": {
71+
"name": "punctuation.definition.block.ts"
72+
}
73+
},
74+
"contentName": "control.block.body.ng",
75+
"patterns": [
76+
{
77+
"include": "text.html.derivative"
78+
},
79+
{
80+
"include": "template.ng"
81+
}
82+
]
83+
}
84+
}
85+
}

‎syntaxes/test/cases.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ export const cases = [
1818
'grammarFiles': ['syntaxes/template.json', 'syntaxes/expression.json'],
1919
'testFile': 'syntaxes/test/data/template.html'
2020
},
21+
{
22+
'name': 'block syntax',
23+
'scopeName': 'template.blocks.ng',
24+
'grammarFiles': ['syntaxes/template-blocks.json'],
25+
'testFile': 'syntaxes/test/data/template-blocks.html'
26+
},
2127
{
2228
'name': 'expression syntax',
2329
'scopeName': 'template.ng',

‎syntaxes/test/data/template-blocks.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@defer (doSomething({111})) {
2+
<a></a>
3+
}
4+
5+
@defer {
6+
<a></a>
7+
}
8+
9+
@switch (a) {
10+
@case (1) {
11+
{{getCase1()}}
12+
}
13+
@case (2) {
14+
{{a.b.c}}
15+
}
16+
@default {
17+
default case
18+
}
19+
}
20+
21+
@if (a==b) { hello } @else { goodbye }
22+
23+
@if (a==b) {
24+
hello
25+
} @else if (b==a) {
26+
goodbye
27+
}
28+
29+
@for (let item of items; as thing; trackBy: $index) {
30+
{{item}}
31+
}

‎syntaxes/test/data/template-blocks.html.snap‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
>@defer (doSomething({111})) {
2+
#^ template.blocks.ng keyword.control.block.transition.ng
3+
# ^^^^^^ template.blocks.ng keyword.control.block.kind.ng
4+
# ^ template.blocks.ng control.block.ng meta.brace.round.ts
5+
# ^^^^^^^^^^^^^^^^^^ template.blocks.ng control.block.ng control.block.expression.ng
6+
# ^ template.blocks.ng control.block.ng meta.brace.round.ts
7+
# ^ template.blocks.ng control.block.ng
8+
# ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
9+
> <a></a>
10+
#^^^^^^^^^^^^ template.blocks.ng control.block.ng control.block.body.ng
11+
>}
12+
#^ template.blocks.ng control.block.ng punctuation.definition.block.ts
13+
>
14+
>@defer {
15+
#^ template.blocks.ng keyword.control.block.transition.ng
16+
# ^^^^^^ template.blocks.ng keyword.control.block.kind.ng
17+
# ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
18+
> <a></a>
19+
#^^^^^^^^^^^^ template.blocks.ng control.block.ng control.block.body.ng
20+
>}
21+
#^ template.blocks.ng control.block.ng punctuation.definition.block.ts
22+
>
23+
>@switch (a) {
24+
#^ template.blocks.ng keyword.control.block.transition.ng
25+
# ^^^^^^^ template.blocks.ng keyword.control.block.kind.ng
26+
# ^ template.blocks.ng control.block.ng meta.brace.round.ts
27+
# ^ template.blocks.ng control.block.ng control.block.expression.ng
28+
# ^ template.blocks.ng control.block.ng meta.brace.round.ts
29+
# ^ template.blocks.ng control.block.ng
30+
# ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
31+
> @case (1) {
32+
#^^^^^^^^^^^^^^^^ template.blocks.ng control.block.ng control.block.body.ng
33+
> {{getCase1()}}
34+
#^^^^^^^^^^^^^^^^^^^^ template.blocks.ng control.block.ng control.block.body.ng
35+
# ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
36+
# ^^ template.blocks.ng
37+
> }
38+
#^^^^^^ template.blocks.ng
39+
> @case (2) {
40+
#^^^^ template.blocks.ng
41+
# ^ template.blocks.ng keyword.control.block.transition.ng
42+
# ^^^^^ template.blocks.ng keyword.control.block.kind.ng
43+
# ^ template.blocks.ng control.block.ng meta.brace.round.ts
44+
# ^ template.blocks.ng control.block.ng control.block.expression.ng
45+
# ^ template.blocks.ng control.block.ng meta.brace.round.ts
46+
# ^ template.blocks.ng control.block.ng
47+
# ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
48+
> {{a.b.c}}
49+
#^^^^^^^^^^^^^^^ template.blocks.ng control.block.ng control.block.body.ng
50+
# ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
51+
# ^^ template.blocks.ng
52+
> }
53+
#^^^^^^ template.blocks.ng
54+
> @default {
55+
#^^^^ template.blocks.ng
56+
# ^ template.blocks.ng keyword.control.block.transition.ng
57+
# ^^^^^^^^ template.blocks.ng keyword.control.block.kind.ng
58+
# ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
59+
> default case
60+
#^^^^^^^^^^^^^^^^^^^^^ template.blocks.ng control.block.ng control.block.body.ng
61+
> }
62+
#^^^^ template.blocks.ng control.block.ng control.block.body.ng
63+
# ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
64+
>}
65+
#^^ template.blocks.ng
66+
>
67+
>@if (a==b) { hello } @else { goodbye }
68+
#^ template.blocks.ng keyword.control.block.transition.ng
69+
# ^^^ template.blocks.ng keyword.control.block.kind.ng
70+
# ^ template.blocks.ng control.block.ng meta.brace.round.ts
71+
# ^^^^ template.blocks.ng control.block.ng control.block.expression.ng
72+
# ^ template.blocks.ng control.block.ng meta.brace.round.ts
73+
# ^ template.blocks.ng control.block.ng
74+
# ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
75+
# ^^^^^^^ template.blocks.ng control.block.ng control.block.body.ng
76+
# ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
77+
# ^ template.blocks.ng
78+
# ^ template.blocks.ng keyword.control.block.transition.ng
79+
# ^^^^^^ template.blocks.ng keyword.control.block.kind.ng
80+
# ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
81+
# ^^^^^^^^^ template.blocks.ng control.block.ng control.block.body.ng
82+
# ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
83+
>
84+
>@if (a==b) {
85+
#^ template.blocks.ng keyword.control.block.transition.ng
86+
# ^^^ template.blocks.ng keyword.control.block.kind.ng
87+
# ^ template.blocks.ng control.block.ng meta.brace.round.ts
88+
# ^^^^ template.blocks.ng control.block.ng control.block.expression.ng
89+
# ^ template.blocks.ng control.block.ng meta.brace.round.ts
90+
# ^ template.blocks.ng control.block.ng
91+
# ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
92+
# ^^ template.blocks.ng control.block.ng control.block.body.ng
93+
> hello
94+
#^^^^^^^^^^^ template.blocks.ng control.block.ng control.block.body.ng
95+
>} @else if (b==a) {
96+
#^ template.blocks.ng control.block.ng punctuation.definition.block.ts
97+
# ^ template.blocks.ng
98+
# ^ template.blocks.ng keyword.control.block.transition.ng
99+
# ^^^^^^^^ template.blocks.ng keyword.control.block.kind.ng
100+
# ^ template.blocks.ng control.block.ng meta.brace.round.ts
101+
# ^^^^ template.blocks.ng control.block.ng control.block.expression.ng
102+
# ^ template.blocks.ng control.block.ng meta.brace.round.ts
103+
# ^ template.blocks.ng control.block.ng
104+
# ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
105+
# ^^ template.blocks.ng control.block.ng control.block.body.ng
106+
> goodbye
107+
#^^^^^^^^^^^^^ template.blocks.ng control.block.ng control.block.body.ng
108+
>}
109+
#^ template.blocks.ng control.block.ng punctuation.definition.block.ts
110+
>
111+
>@for (let item of items; as thing; trackBy: $index) {
112+
#^ template.blocks.ng keyword.control.block.transition.ng
113+
# ^^^^ template.blocks.ng keyword.control.block.kind.ng
114+
# ^ template.blocks.ng control.block.ng meta.brace.round.ts
115+
# ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.blocks.ng control.block.ng control.block.expression.ng
116+
# ^ template.blocks.ng control.block.ng meta.brace.round.ts
117+
# ^ template.blocks.ng control.block.ng
118+
# ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
119+
> {{item}}
120+
#^^^^^^^^^^ template.blocks.ng control.block.ng control.block.body.ng
121+
# ^ template.blocks.ng control.block.ng punctuation.definition.block.ts
122+
# ^^ template.blocks.ng
123+
>}
124+
#^^ template.blocks.ng
125+
>

0 commit comments

Comments
 (0)