Skip to content

Commit fa925cb

Browse files
dannymcgeeayazhafiz
dannymcgee
authored and
ayazhafiz
committed
feat: textmate grammar for template event bindings (#543)
Event binding repository added
1 parent a6676b2 commit fa925cb

File tree

3 files changed

+166
-1
lines changed

3 files changed

+166
-1
lines changed

‎syntaxes/template.json

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@
77
},
88
{
99
"include": "#propertyBinding"
10+
},
11+
{
12+
"include": "#eventBinding"
1013
}
1114
],
1215
"repository": {
@@ -64,6 +67,39 @@
6467
]
6568
},
6669

70+
"eventBinding": {
71+
"begin": "(\\(\\s*@?[-_a-zA-Z0-9.$]*\\s*\\))(=)([\"'])",
72+
"beginCaptures": {
73+
"1": {
74+
"name": "entity.other.attribute-name.html entity.other.ng-binding-name.event.html",
75+
"patterns": [
76+
{
77+
"include": "#bindingKey"
78+
}
79+
]
80+
},
81+
"2": {
82+
"name": "punctuation.separator.key-value.html"
83+
},
84+
"3": {
85+
"name": "string.quoted.html punctuation.definition.string.begin.html"
86+
}
87+
},
88+
"end": "\\3",
89+
"endCaptures": {
90+
"0": {
91+
"name": "string.quoted.html punctuation.definition.string.end.html"
92+
}
93+
},
94+
"name": "meta.ng-binding.event.html",
95+
"contentName": "source.js",
96+
"patterns": [
97+
{
98+
"include": "source.js"
99+
}
100+
]
101+
},
102+
67103
"bindingKey": {
68104
"patterns": [
69105
{

‎syntaxes/test/data/template.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,22 @@
1515
<div [myProperty$]="val"></div>
1616
<div [%invalidProperty]="val"></div>
1717
<div [invalidProperty)="val"></div>
18+
19+
<!-- Event binding test -->
20+
<button (click)="onClick($event)"></button>
21+
<input (ngModelChange)="onModelChange($event)" />
22+
<div (@animation.done)="onAnimationDone($event)"></div>
23+
<div (someEvent)="
24+
if (isCondition) {
25+
methodIfTrue($event);
26+
} else {
27+
methodIfFalse($event);
28+
}
29+
"></div>
30+
<div ( extraSpacing )="onExtraSpacing($event)"></div>
31+
<my-component (myEvent)="onMyEvent($event)"></my-component>
32+
<my-component (my-event)="onMyEvent($event)"></my-component>
33+
<my-component (my_event)="onMyEvent($event)"></my-component>
34+
<my-component (myEvent$)="onMyEvent($event)"></my-component>
35+
<my-component (%invalidEvent)="onMyEvent($event)"></my-component>
36+
<my-component (invalidEvent]="onMyEvent($event)"></my-component>

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

Lines changed: 111 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,4 +97,114 @@
9797
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
9898
><div [invalidProperty)="val"></div>
9999
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
100-
>
100+
>
101+
><!-- Event binding test -->
102+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
103+
><button (click)="onClick($event)"></button>
104+
#^^^^^^^^ template.ng
105+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.begin.html
106+
# ^^^^^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html
107+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.end.html
108+
# ^ template.ng meta.ng-binding.event.html punctuation.separator.key-value.html
109+
# ^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.begin.html
110+
# ^^^^^^^^^^^^^^^ template.ng meta.ng-binding.event.html source.js
111+
# ^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.end.html
112+
# ^^^^^^^^^^^ template.ng
113+
><input (ngModelChange)="onModelChange($event)" />
114+
#^^^^^^^ template.ng
115+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.begin.html
116+
# ^^^^^^^^^^^^^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html
117+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.end.html
118+
# ^ template.ng meta.ng-binding.event.html punctuation.separator.key-value.html
119+
# ^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.begin.html
120+
# ^^^^^^^^^^^^^^^^^^^^^ template.ng meta.ng-binding.event.html source.js
121+
# ^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.end.html
122+
# ^^^^ template.ng
123+
><div (@animation.done)="onAnimationDone($event)"></div>
124+
#^^^^^ template.ng
125+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.begin.html
126+
# ^^^^^^^^^^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html
127+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.accessor.html
128+
# ^^^^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html
129+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.end.html
130+
# ^ template.ng meta.ng-binding.event.html punctuation.separator.key-value.html
131+
# ^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.begin.html
132+
# ^^^^^^^^^^^^^^^^^^^^^^^ template.ng meta.ng-binding.event.html source.js
133+
# ^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.end.html
134+
# ^^^^^^^^ template.ng
135+
><div (someEvent)="
136+
#^^^^^ template.ng
137+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.begin.html
138+
# ^^^^^^^^^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html
139+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.end.html
140+
# ^ template.ng meta.ng-binding.event.html punctuation.separator.key-value.html
141+
# ^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.begin.html
142+
> if (isCondition) {
143+
#^^^^^^^^^^^^^^^^^^^^^^^ template.ng meta.ng-binding.event.html source.js
144+
> methodIfTrue($event);
145+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng meta.ng-binding.event.html source.js
146+
> } else {
147+
#^^^^^^^^^^^^^ template.ng meta.ng-binding.event.html source.js
148+
> methodIfFalse($event);
149+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng meta.ng-binding.event.html source.js
150+
> }
151+
#^^^^^^ template.ng meta.ng-binding.event.html source.js
152+
>"></div>
153+
#^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.end.html
154+
# ^^^^^^^^ template.ng
155+
><div ( extraSpacing )="onExtraSpacing($event)"></div>
156+
#^^^^^ template.ng
157+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.begin.html
158+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html
159+
# ^^^^^^^^^^^^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html
160+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html
161+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.end.html
162+
# ^ template.ng meta.ng-binding.event.html punctuation.separator.key-value.html
163+
# ^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.begin.html
164+
# ^^^^^^^^^^^^^^^^^^^^^^ template.ng meta.ng-binding.event.html source.js
165+
# ^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.end.html
166+
# ^^^^^^^^ template.ng
167+
><my-component (myEvent)="onMyEvent($event)"></my-component>
168+
#^^^^^^^^^^^^^^ template.ng
169+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.begin.html
170+
# ^^^^^^^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html
171+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.end.html
172+
# ^ template.ng meta.ng-binding.event.html punctuation.separator.key-value.html
173+
# ^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.begin.html
174+
# ^^^^^^^^^^^^^^^^^ template.ng meta.ng-binding.event.html source.js
175+
# ^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.end.html
176+
# ^^^^^^^^^^^^^^^^^ template.ng
177+
><my-component (my-event)="onMyEvent($event)"></my-component>
178+
#^^^^^^^^^^^^^^ template.ng
179+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.begin.html
180+
# ^^^^^^^^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html
181+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.end.html
182+
# ^ template.ng meta.ng-binding.event.html punctuation.separator.key-value.html
183+
# ^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.begin.html
184+
# ^^^^^^^^^^^^^^^^^ template.ng meta.ng-binding.event.html source.js
185+
# ^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.end.html
186+
# ^^^^^^^^^^^^^^^^^ template.ng
187+
><my-component (my_event)="onMyEvent($event)"></my-component>
188+
#^^^^^^^^^^^^^^ template.ng
189+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.begin.html
190+
# ^^^^^^^^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html
191+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.end.html
192+
# ^ template.ng meta.ng-binding.event.html punctuation.separator.key-value.html
193+
# ^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.begin.html
194+
# ^^^^^^^^^^^^^^^^^ template.ng meta.ng-binding.event.html source.js
195+
# ^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.end.html
196+
# ^^^^^^^^^^^^^^^^^ template.ng
197+
><my-component (myEvent$)="onMyEvent($event)"></my-component>
198+
#^^^^^^^^^^^^^^ template.ng
199+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.begin.html
200+
# ^^^^^^^^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html
201+
# ^ template.ng meta.ng-binding.event.html entity.other.attribute-name.html entity.other.ng-binding-name.event.html punctuation.definition.ng-binding-name.end.html
202+
# ^ template.ng meta.ng-binding.event.html punctuation.separator.key-value.html
203+
# ^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.begin.html
204+
# ^^^^^^^^^^^^^^^^^ template.ng meta.ng-binding.event.html source.js
205+
# ^ template.ng meta.ng-binding.event.html string.quoted.html punctuation.definition.string.end.html
206+
# ^^^^^^^^^^^^^^^^^ template.ng
207+
><my-component (%invalidEvent)="onMyEvent($event)"></my-component>
208+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
209+
><my-component (invalidEvent]="onMyEvent($event)"></my-component>
210+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng

0 commit comments

Comments
 (0)