Skip to content

Commit 0076e2e

Browse files
ayazhafizayazhafiz
authored
feat: add syntax highlighting grammar for interpolations (#516)
* feat: add syntax highlighting grammar for interpolations Adds a grammar for Angular interpolations. Because the grammar relies only on regex expressions, we cannot currently support any interpolation delimiters other than the default `{{`/`}}` -- to do more would require a more sophisticated highlighting solution. For convinience, everything inside an interpolation is treated as JavaScript syntax, even though the expressions available in an Angular interpolations are a distinct subset of JavaScript. Attached to this PR are several before/after images of this change. Partially addresses #483. * fixup! feat: add syntax highlighting grammar for interpolations
1 parent 0bb57ae commit 0076e2e

10 files changed

+112
-14
lines changed

‎package.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,18 @@
7070
"embeddedLanguages": {
7171
"source.css": "css"
7272
}
73+
},
74+
{
75+
"path": "./syntaxes/template.json",
76+
"scopeName": "template.ng",
77+
"injectTo": [
78+
"text.html"
79+
],
80+
"embeddedLanguages": {
81+
"text.html": "html",
82+
"source.css": "css",
83+
"source.js": "javascript"
84+
}
7385
}
7486
]
7587
},

‎syntaxes/inline-template.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,9 @@
6868
"patterns": [
6969
{
7070
"include": "text.html.basic"
71+
},
72+
{
73+
"include": "template.ng"
7174
}
7275
]
7376
}

‎syntaxes/template.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"scopeName": "template.ng",
3+
"injectionSelector": "L:text.html -comment",
4+
"patterns": [
5+
{
6+
"include": "#interpolation"
7+
}
8+
],
9+
"repository": {
10+
"interpolation": {
11+
"begin": "{{",
12+
"beginCaptures": {
13+
"0": {
14+
"name": "punctuation.definition.block.ts"
15+
}
16+
},
17+
"end": "}}",
18+
"endCaptures": {
19+
"0": {
20+
"name": "punctuation.definition.block.ts"
21+
}
22+
},
23+
"contentName": "source.js",
24+
"patterns": [
25+
{
26+
"include": "source.js"
27+
}
28+
]
29+
}
30+
}
31+
}

‎syntaxes/test/cases.json

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
[
22
{
33
"scopeName": "inline-template.ng",
4-
"grammarFiles": ["syntaxes/inline-template.json"],
4+
"grammarFiles": ["syntaxes/inline-template.json", "syntaxes/template.json"],
55
"testFile": "syntaxes/test/data/inline-template.ts"
66
},
77
{
88
"scopeName": "inline-styles.ng",
99
"grammarFiles": ["syntaxes/inline-styles.json"],
1010
"testFile": "syntaxes/test/data/inline-styles.ts"
11+
},
12+
{
13+
"scopeName": "template.ng",
14+
"grammarFiles": ["syntaxes/template.json"],
15+
"testFile": "syntaxes/test/data/template.html"
1116
}
1217
]

‎syntaxes/test/data/inline-template.ts

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,19 @@
11
/* clang-format off */
22

3+
/* Inline template recognition tests */
34
@Component({
4-
//// Property key/value test
5+
//// Property key/value test
56
template: '<div></div>',
67

7-
//// String delimiter tests
8+
//// String delimiter tests
89
template: `<div></div>`,
910
template: "<div></div>",
1011
template: '<div></div>',
1112

12-
//// Parenthesization tests
13+
//// Parenthesization tests
1314
template: ( (( '<div></div>' )) ),
1415

15-
//// Comments tests
16+
//// Comments tests
1617
// template: '<div></div>'
1718
/*
1819
* template: '<div></div>'
@@ -22,3 +23,10 @@
2223
*/
2324
})
2425
export class TMComponent{}
26+
27+
/* Template syntax tests */
28+
@Component({
29+
// Interpolation test
30+
template: '{{property}}',
31+
})
32+
export class TMComponent{}

‎syntaxes/test/data/inline-template.ts.snap

Lines changed: 32 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
>/* clang-format off */
22
#^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng
33
>
4+
>/* Inline template recognition tests */
5+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng
46
>@Component({
57
#^^^^^^^^^^^^^ inline-template.ng
6-
>//// Property key/value test
7-
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng
8+
> //// Property key/value test
9+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng
810
> template: '<div></div>',
911
#^^ inline-template.ng
1012
# ^^^^^^^^ inline-template.ng meta.object-literal.key.ts
@@ -15,8 +17,8 @@
1517
# ^ inline-template.ng string
1618
# ^^ inline-template.ng
1719
>
18-
>//// String delimiter tests
19-
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng
20+
> //// String delimiter tests
21+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng
2022
> template: `<div></div>`,
2123
#^^ inline-template.ng
2224
# ^^^^^^^^ inline-template.ng meta.object-literal.key.ts
@@ -45,8 +47,8 @@
4547
# ^ inline-template.ng string
4648
# ^^ inline-template.ng
4749
>
48-
>//// Parenthesization tests
49-
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng
50+
> //// Parenthesization tests
51+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng
5052
> template: ( (( '<div></div>' )) ),
5153
#^^ inline-template.ng
5254
# ^^^^^^^^ inline-template.ng meta.object-literal.key.ts
@@ -67,8 +69,8 @@
6769
# ^ inline-template.ng meta.brace.round.ts
6870
# ^^ inline-template.ng
6971
>
70-
>//// Comments tests
71-
#^^^^^^^^^^^^^^^^^^^^ inline-template.ng
72+
> //// Comments tests
73+
#^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng
7274
> // template: '<div></div>'
7375
#^^^^^ inline-template.ng
7476
# ^^^^^^^^ inline-template.ng meta.object-literal.key.ts
@@ -93,4 +95,26 @@
9395
#^^^ inline-template.ng
9496
>export class TMComponent{}
9597
#^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng
98+
>
99+
>/* Template syntax tests */
100+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng
101+
>@Component({
102+
#^^^^^^^^^^^^^ inline-template.ng
103+
> // Interpolation test
104+
#^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng
105+
> template: '{{property}}',
106+
#^^ inline-template.ng
107+
# ^^^^^^^^ inline-template.ng meta.object-literal.key.ts
108+
# ^ inline-template.ng meta.object-literal.key.ts punctuation.separator.key-value.ts
109+
# ^ inline-template.ng
110+
# ^ inline-template.ng string
111+
# ^^ inline-template.ng text.html punctuation.definition.block.ts
112+
# ^^^^^^^^ inline-template.ng text.html source.js
113+
# ^^ inline-template.ng text.html punctuation.definition.block.ts
114+
# ^ inline-template.ng string
115+
# ^^ inline-template.ng
116+
>})
117+
#^^^ inline-template.ng
118+
>export class TMComponent{}
119+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^ inline-template.ng
96120
>

‎syntaxes/test/data/template.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<!-- Interpolation test -->
2+
<div>{{ call(1 + 2 + 3) }}</div>

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
><!-- Interpolation test -->
2+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
3+
><div>{{ call(1 + 2 + 3) }}</div>
4+
#^^^^^ template.ng
5+
# ^^ template.ng punctuation.definition.block.ts
6+
# ^^^^^^^^^^^^^^^^^ template.ng source.js
7+
# ^^ template.ng punctuation.definition.block.ts
8+
# ^^^^^^^ template.ng
9+
>

‎syntaxes/test/dummy/css.tmLanguage-dummy.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"comment": "Dummy HTML TextMate grammar for use in testing",
2+
"comment": "Dummy CSS TextMate grammar for use in testing",
33
"scopeName": "source.css"
44
}

‎syntaxes/test/dummy/js.tmLanguage-dummy.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"comment": "Dummy JS TextMate grammar for use in testing",
3+
"scopeName": "source.js"
4+
}

0 commit comments

Comments
 (0)