Skip to content

Commit 9173d8b

Browse files
dannymcgeeayazhafiz
dannymcgee
authored and
ayazhafiz
committed
feat: more detailed grammar scopes for template property binding syntax (#542)
Separate grammar scopes for binding punctuation; Pattern expanded to cover event and two-way binding; `propertyBinding` renamed to `ngBinding`; `string.quoted.html` scope moved to parent block;
1 parent 92bb8e2 commit 9173d8b

File tree

3 files changed

+131
-9
lines changed

3 files changed

+131
-9
lines changed

‎syntaxes/template.json

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,30 +32,60 @@
3232
},
3333

3434
"propertyBinding": {
35-
"begin": "(\\[.*\\])(=)(\"|')",
35+
"begin": "(\\[\\s*@?[-_a-zA-Z0-9.$]*\\s*])(=)([\"'])",
3636
"beginCaptures": {
3737
"1": {
38-
"name": "entity.other.attribute-name.html"
38+
"name": "entity.other.attribute-name.html entity.other.ng-binding-name.property.html",
39+
"patterns": [
40+
{
41+
"include": "#bindingKey"
42+
}
43+
]
3944
},
4045
"2": {
4146
"name": "punctuation.separator.key-value.html"
4247
},
4348
"3": {
44-
"name": "punctuation.definition.string.begin.html string.quoted.html"
49+
"name": "string.quoted.html punctuation.definition.string.begin.html"
4550
}
4651
},
4752
"end": "\\3",
4853
"endCaptures": {
4954
"0": {
50-
"name": "punctuation.definition.string.end.html string.quoted.html"
55+
"name": "string.quoted.html punctuation.definition.string.end.html"
5156
}
5257
},
58+
"name": "meta.ng-binding.property.html",
5359
"contentName": "source.js",
5460
"patterns": [
5561
{
5662
"include": "source.js"
5763
}
5864
]
65+
},
66+
67+
"bindingKey": {
68+
"patterns": [
69+
{
70+
"match": "([\\[\\(]{1,2})(?:\\s*)(@?[-_a-zA-Z0-9.$]*)(?:\\s*)([\\]\\)]{1,2})",
71+
"captures": {
72+
"1": {
73+
"name": "punctuation.definition.ng-binding-name.begin.html"
74+
},
75+
"2": {
76+
"patterns": [
77+
{
78+
"match": "\\.",
79+
"name": "punctuation.accessor.html"
80+
}
81+
]
82+
},
83+
"3": {
84+
"name": "punctuation.definition.ng-binding-name.end.html"
85+
}
86+
}
87+
}
88+
]
5989
}
6090
}
6191
}

‎syntaxes/test/data/template.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,15 @@
33

44
<!-- Property binding test -->
55
<div [ ngStyle ]="{'max-width.px': i * 2 + 5}"></div>
6+
<div [ngClass]="[
7+
'class-one',
8+
'class-two',
9+
'class-three'
10+
]"></div>
11+
<div [@animation.trigger]="val"></div>
12+
<img [attr.aria-label]="val" />
13+
<div [my-property]="val"></div>
14+
<div [my_property]="val"></div>
15+
<div [myProperty$]="val"></div>
16+
<div [%invalidProperty]="val"></div>
17+
<div [invalidProperty)="val"></div>

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

Lines changed: 85 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,90 @@
1111
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
1212
><div [ ngStyle ]="{'max-width.px': i * 2 + 5}"></div>
1313
#^^^^^ template.ng
14-
# ^^^^^^^^^^^ template.ng entity.other.attribute-name.html
15-
# ^ template.ng punctuation.separator.key-value.html
16-
# ^ template.ng punctuation.definition.string.begin.html string.quoted.html
17-
# ^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng source.js
18-
# ^ template.ng punctuation.definition.string.end.html string.quoted.html
14+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.begin.html
15+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html
16+
# ^^^^^^^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html
17+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html
18+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.end.html
19+
# ^ template.ng meta.ng-binding.property.html punctuation.separator.key-value.html
20+
# ^ template.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.begin.html
21+
# ^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng meta.ng-binding.property.html source.js
22+
# ^ template.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.end.html
1923
# ^^^^^^^^ template.ng
24+
><div [ngClass]="[
25+
#^^^^^ template.ng
26+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.begin.html
27+
# ^^^^^^^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html
28+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.end.html
29+
# ^ template.ng meta.ng-binding.property.html punctuation.separator.key-value.html
30+
# ^ template.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.begin.html
31+
# ^^ template.ng meta.ng-binding.property.html source.js
32+
> 'class-one',
33+
#^^^^^^^^^^^^^^^^^ template.ng meta.ng-binding.property.html source.js
34+
> 'class-two',
35+
#^^^^^^^^^^^^^^^^^ template.ng meta.ng-binding.property.html source.js
36+
> 'class-three'
37+
#^^^^^^^^^^^^^^^^^^ template.ng meta.ng-binding.property.html source.js
38+
>]"></div>
39+
#^ template.ng meta.ng-binding.property.html source.js
40+
# ^ template.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.end.html
41+
# ^^^^^^^^ template.ng
42+
><div [@animation.trigger]="val"></div>
43+
#^^^^^ template.ng
44+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.begin.html
45+
# ^^^^^^^^^^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html
46+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.accessor.html
47+
# ^^^^^^^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html
48+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.end.html
49+
# ^ template.ng meta.ng-binding.property.html punctuation.separator.key-value.html
50+
# ^ template.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.begin.html
51+
# ^^^ template.ng meta.ng-binding.property.html source.js
52+
# ^ template.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.end.html
53+
# ^^^^^^^^ template.ng
54+
><img [attr.aria-label]="val" />
55+
#^^^^^ template.ng
56+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.begin.html
57+
# ^^^^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html
58+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.accessor.html
59+
# ^^^^^^^^^^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html
60+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.end.html
61+
# ^ template.ng meta.ng-binding.property.html punctuation.separator.key-value.html
62+
# ^ template.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.begin.html
63+
# ^^^ template.ng meta.ng-binding.property.html source.js
64+
# ^ template.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.end.html
65+
# ^^^^ template.ng
66+
><div [my-property]="val"></div>
67+
#^^^^^ template.ng
68+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.begin.html
69+
# ^^^^^^^^^^^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html
70+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.end.html
71+
# ^ template.ng meta.ng-binding.property.html punctuation.separator.key-value.html
72+
# ^ template.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.begin.html
73+
# ^^^ template.ng meta.ng-binding.property.html source.js
74+
# ^ template.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.end.html
75+
# ^^^^^^^^ template.ng
76+
><div [my_property]="val"></div>
77+
#^^^^^ template.ng
78+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.begin.html
79+
# ^^^^^^^^^^^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html
80+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.end.html
81+
# ^ template.ng meta.ng-binding.property.html punctuation.separator.key-value.html
82+
# ^ template.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.begin.html
83+
# ^^^ template.ng meta.ng-binding.property.html source.js
84+
# ^ template.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.end.html
85+
# ^^^^^^^^ template.ng
86+
><div [myProperty$]="val"></div>
87+
#^^^^^ template.ng
88+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.begin.html
89+
# ^^^^^^^^^^^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html
90+
# ^ template.ng meta.ng-binding.property.html entity.other.attribute-name.html entity.other.ng-binding-name.property.html punctuation.definition.ng-binding-name.end.html
91+
# ^ template.ng meta.ng-binding.property.html punctuation.separator.key-value.html
92+
# ^ template.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.begin.html
93+
# ^^^ template.ng meta.ng-binding.property.html source.js
94+
# ^ template.ng meta.ng-binding.property.html string.quoted.html punctuation.definition.string.end.html
95+
# ^^^^^^^^ template.ng
96+
><div [%invalidProperty]="val"></div>
97+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
98+
><div [invalidProperty)="val"></div>
99+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
20100
>

0 commit comments

Comments
 (0)