Skip to content

Commit 980cece

Browse files
ayazhafizayazhafiz
authored
feat: add grammar for two-way bindings (#566)
This commit adds a TextMate grammar for highlighting two-way bindings.
1 parent f0b5c71 commit 980cece

File tree

3 files changed

+120
-2
lines changed

3 files changed

+120
-2
lines changed

‎syntaxes/template.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
},
1111
{
1212
"include": "#eventBinding"
13+
},
14+
{
15+
"include": "#twoWayBinding"
1316
}
1417
],
1518
"repository": {
@@ -100,6 +103,39 @@
100103
]
101104
},
102105

106+
"twoWayBinding": {
107+
"begin": "(\\[\\s*\\(\\s*@?[-_a-zA-Z0-9.$]*\\s*\\)\\s*\\])(=)([\"'])",
108+
"beginCaptures": {
109+
"1": {
110+
"name": "entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html",
111+
"patterns": [
112+
{
113+
"include": "#bindingKey"
114+
}
115+
]
116+
},
117+
"2": {
118+
"name": "punctuation.separator.key-value.html"
119+
},
120+
"3": {
121+
"name": "string.quoted.html punctuation.definition.string.begin.html"
122+
}
123+
},
124+
"end": "\\3",
125+
"endCaptures": {
126+
"0": {
127+
"name": "string.quoted.html punctuation.definition.string.end.html"
128+
}
129+
},
130+
"name": "meta.ng-binding.two-way.html",
131+
"contentName": "source.js",
132+
"patterns": [
133+
{
134+
"include": "source.js"
135+
}
136+
]
137+
},
138+
103139
"bindingKey": {
104140
"patterns": [
105141
{

‎syntaxes/test/data/template.html‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,14 @@
3333
<my-component (my_event)="onMyEvent($event)"></my-component>
3434
<my-component (myEvent$)="onMyEvent($event)"></my-component>
3535
<my-component (%invalidEvent)="onMyEvent($event)"></my-component>
36-
<my-component (invalidEvent]="onMyEvent($event)"></my-component>
36+
<my-component (invalidEvent]="onMyEvent($event)"></my-component>
37+
38+
<!-- Two-way binding test -->
39+
<button [(click)]="clickProp"></button>
40+
<div [( extraSpacing )]="extraSpacing"></div>
41+
<div [(@animation.done)]="animation"></div>
42+
<my-component [(my-prop)]="myProp"></my-component>
43+
<my-component [(my_prop)]="myProp"></my-component>
44+
<my-component [($my_prop)]="myProp"></my-component>
45+
<my-component [(%invalid)]="invalid"></my-component>
46+
<my-component ([invalid)]="invalid"></my-component>

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

Lines changed: 73 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -207,4 +207,76 @@
207207
><my-component (%invalidEvent)="onMyEvent($event)"></my-component>
208208
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
209209
><my-component (invalidEvent]="onMyEvent($event)"></my-component>
210-
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
210+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
211+
>
212+
><!-- Two-way binding test -->
213+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
214+
><button [(click)]="clickProp"></button>
215+
#^^^^^^^^ template.ng
216+
# ^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html punctuation.definition.ng-binding-name.begin.html
217+
# ^^^^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html
218+
# ^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html punctuation.definition.ng-binding-name.end.html
219+
# ^ template.ng meta.ng-binding.two-way.html punctuation.separator.key-value.html
220+
# ^ template.ng meta.ng-binding.two-way.html string.quoted.html punctuation.definition.string.begin.html
221+
# ^^^^^^^^^ template.ng meta.ng-binding.two-way.html source.js
222+
# ^ template.ng meta.ng-binding.two-way.html string.quoted.html punctuation.definition.string.end.html
223+
# ^^^^^^^^^^^ template.ng
224+
><div [( extraSpacing )]="extraSpacing"></div>
225+
#^^^^^ template.ng
226+
# ^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html punctuation.definition.ng-binding-name.begin.html
227+
# ^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html
228+
# ^^^^^^^^^^^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html
229+
# ^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html
230+
# ^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html punctuation.definition.ng-binding-name.end.html
231+
# ^ template.ng meta.ng-binding.two-way.html punctuation.separator.key-value.html
232+
# ^ template.ng meta.ng-binding.two-way.html string.quoted.html punctuation.definition.string.begin.html
233+
# ^^^^^^^^^^^^ template.ng meta.ng-binding.two-way.html source.js
234+
# ^ template.ng meta.ng-binding.two-way.html string.quoted.html punctuation.definition.string.end.html
235+
# ^^^^^^^^ template.ng
236+
><div [(@animation.done)]="animation"></div>
237+
#^^^^^ template.ng
238+
# ^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html punctuation.definition.ng-binding-name.begin.html
239+
# ^^^^^^^^^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html
240+
# ^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html punctuation.accessor.html
241+
# ^^^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html
242+
# ^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html punctuation.definition.ng-binding-name.end.html
243+
# ^ template.ng meta.ng-binding.two-way.html punctuation.separator.key-value.html
244+
# ^ template.ng meta.ng-binding.two-way.html string.quoted.html punctuation.definition.string.begin.html
245+
# ^^^^^^^^^ template.ng meta.ng-binding.two-way.html source.js
246+
# ^ template.ng meta.ng-binding.two-way.html string.quoted.html punctuation.definition.string.end.html
247+
# ^^^^^^^^ template.ng
248+
><my-component [(my-prop)]="myProp"></my-component>
249+
#^^^^^^^^^^^^^^ template.ng
250+
# ^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html punctuation.definition.ng-binding-name.begin.html
251+
# ^^^^^^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html
252+
# ^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html punctuation.definition.ng-binding-name.end.html
253+
# ^ template.ng meta.ng-binding.two-way.html punctuation.separator.key-value.html
254+
# ^ template.ng meta.ng-binding.two-way.html string.quoted.html punctuation.definition.string.begin.html
255+
# ^^^^^^ template.ng meta.ng-binding.two-way.html source.js
256+
# ^ template.ng meta.ng-binding.two-way.html string.quoted.html punctuation.definition.string.end.html
257+
# ^^^^^^^^^^^^^^^^^ template.ng
258+
><my-component [(my_prop)]="myProp"></my-component>
259+
#^^^^^^^^^^^^^^ template.ng
260+
# ^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html punctuation.definition.ng-binding-name.begin.html
261+
# ^^^^^^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html
262+
# ^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html punctuation.definition.ng-binding-name.end.html
263+
# ^ template.ng meta.ng-binding.two-way.html punctuation.separator.key-value.html
264+
# ^ template.ng meta.ng-binding.two-way.html string.quoted.html punctuation.definition.string.begin.html
265+
# ^^^^^^ template.ng meta.ng-binding.two-way.html source.js
266+
# ^ template.ng meta.ng-binding.two-way.html string.quoted.html punctuation.definition.string.end.html
267+
# ^^^^^^^^^^^^^^^^^ template.ng
268+
><my-component [($my_prop)]="myProp"></my-component>
269+
#^^^^^^^^^^^^^^ template.ng
270+
# ^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html punctuation.definition.ng-binding-name.begin.html
271+
# ^^^^^^^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html
272+
# ^^ template.ng meta.ng-binding.two-way.html entity.other.attribute-name.html entity.other.ng-binding-name.two-way.html punctuation.definition.ng-binding-name.end.html
273+
# ^ template.ng meta.ng-binding.two-way.html punctuation.separator.key-value.html
274+
# ^ template.ng meta.ng-binding.two-way.html string.quoted.html punctuation.definition.string.begin.html
275+
# ^^^^^^ template.ng meta.ng-binding.two-way.html source.js
276+
# ^ template.ng meta.ng-binding.two-way.html string.quoted.html punctuation.definition.string.end.html
277+
# ^^^^^^^^^^^^^^^^^ template.ng
278+
><my-component [(%invalid)]="invalid"></my-component>
279+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
280+
><my-component ([invalid)]="invalid"></my-component>
281+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
282+
>

0 commit comments

Comments
 (0)