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

Commit 5370b85

Browse files
ayazhafizayazhafiz
authored
feat: add grammar for template bindings (#567)
* feat: add grammar for template bindings This commit adds a TextMate grammar for highlighting template binding (microsyntax) expressions. Part of #483. * fixup! feat: add grammar for two-way bindings (#566)
1 parent 330c7e4 commit 5370b85

File tree

3 files changed

+89
-0
lines changed

3 files changed

+89
-0
lines changed

‎syntaxes/template.json‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,9 @@
1313
},
1414
{
1515
"include": "#twoWayBinding"
16+
},
17+
{
18+
"include": "#templateBinding"
1619
}
1720
],
1821
"repository": {
@@ -136,6 +139,39 @@
136139
]
137140
},
138141

142+
"templateBinding": {
143+
"begin": "(\\*[-_a-zA-Z0-9.$]*)(=)([\"'])",
144+
"beginCaptures": {
145+
"1": {
146+
"name": "entity.other.attribute-name.html entity.other.ng-binding-name.template.html",
147+
"patterns": [
148+
{
149+
"include": "#bindingKey"
150+
}
151+
]
152+
},
153+
"2": {
154+
"name": "punctuation.separator.key-value.html"
155+
},
156+
"3": {
157+
"name": "string.quoted.html punctuation.definition.string.begin.html"
158+
}
159+
},
160+
"end": "\\3",
161+
"endCaptures": {
162+
"0": {
163+
"name": "string.quoted.html punctuation.definition.string.end.html"
164+
}
165+
},
166+
"name": "meta.ng-binding.template.html",
167+
"contentName": "source.js",
168+
"patterns": [
169+
{
170+
"include": "source.js"
171+
}
172+
]
173+
},
174+
139175
"bindingKey": {
140176
"patterns": [
141177
{

‎syntaxes/test/data/template.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,3 +44,11 @@
4444
<my-component [($my_prop)]="myProp"></my-component>
4545
<my-component [(%invalid)]="invalid"></my-component>
4646
<my-component ([invalid)]="invalid"></my-component>
47+
48+
<!-- Event binding test -->
49+
<button *ngModel="title"></button>
50+
<div *ngFor="let book of books"></div>
51+
<my-component *custom-if="true != false"></my-component>
52+
<my-component *custom_if="true != false"></my-component>
53+
<my-component *custom_$if="true != false"></my-component>
54+
<my-component *%invalid="expr"></my-component>

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,4 +279,49 @@
279279
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
280280
><my-component ([invalid)]="invalid"></my-component>
281281
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
282+
>
283+
><!-- Event binding test -->
284+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
285+
><button *ngModel="title"></button>
286+
#^^^^^^^^ template.ng
287+
# ^^^^^^^^ template.ng meta.ng-binding.template.html entity.other.attribute-name.html entity.other.ng-binding-name.template.html
288+
# ^ template.ng meta.ng-binding.template.html punctuation.separator.key-value.html
289+
# ^ template.ng meta.ng-binding.template.html string.quoted.html punctuation.definition.string.begin.html
290+
# ^^^^^ template.ng meta.ng-binding.template.html source.js
291+
# ^ template.ng meta.ng-binding.template.html string.quoted.html punctuation.definition.string.end.html
292+
# ^^^^^^^^^^^ template.ng
293+
><div *ngFor="let book of books"></div>
294+
#^^^^^ template.ng
295+
# ^^^^^^ template.ng meta.ng-binding.template.html entity.other.attribute-name.html entity.other.ng-binding-name.template.html
296+
# ^ template.ng meta.ng-binding.template.html punctuation.separator.key-value.html
297+
# ^ template.ng meta.ng-binding.template.html string.quoted.html punctuation.definition.string.begin.html
298+
# ^^^^^^^^^^^^^^^^^ template.ng meta.ng-binding.template.html source.js
299+
# ^ template.ng meta.ng-binding.template.html string.quoted.html punctuation.definition.string.end.html
300+
# ^^^^^^^^ template.ng
301+
><my-component *custom-if="true != false"></my-component>
302+
#^^^^^^^^^^^^^^ template.ng
303+
# ^^^^^^^^^^ template.ng meta.ng-binding.template.html entity.other.attribute-name.html entity.other.ng-binding-name.template.html
304+
# ^ template.ng meta.ng-binding.template.html punctuation.separator.key-value.html
305+
# ^ template.ng meta.ng-binding.template.html string.quoted.html punctuation.definition.string.begin.html
306+
# ^^^^^^^^^^^^^ template.ng meta.ng-binding.template.html source.js
307+
# ^ template.ng meta.ng-binding.template.html string.quoted.html punctuation.definition.string.end.html
308+
# ^^^^^^^^^^^^^^^^^ template.ng
309+
><my-component *custom_if="true != false"></my-component>
310+
#^^^^^^^^^^^^^^ template.ng
311+
# ^^^^^^^^^^ template.ng meta.ng-binding.template.html entity.other.attribute-name.html entity.other.ng-binding-name.template.html
312+
# ^ template.ng meta.ng-binding.template.html punctuation.separator.key-value.html
313+
# ^ template.ng meta.ng-binding.template.html string.quoted.html punctuation.definition.string.begin.html
314+
# ^^^^^^^^^^^^^ template.ng meta.ng-binding.template.html source.js
315+
# ^ template.ng meta.ng-binding.template.html string.quoted.html punctuation.definition.string.end.html
316+
# ^^^^^^^^^^^^^^^^^ template.ng
317+
><my-component *custom_$if="true != false"></my-component>
318+
#^^^^^^^^^^^^^^ template.ng
319+
# ^^^^^^^^^^^ template.ng meta.ng-binding.template.html entity.other.attribute-name.html entity.other.ng-binding-name.template.html
320+
# ^ template.ng meta.ng-binding.template.html punctuation.separator.key-value.html
321+
# ^ template.ng meta.ng-binding.template.html string.quoted.html punctuation.definition.string.begin.html
322+
# ^^^^^^^^^^^^^ template.ng meta.ng-binding.template.html source.js
323+
# ^ template.ng meta.ng-binding.template.html string.quoted.html punctuation.definition.string.end.html
324+
# ^^^^^^^^^^^^^^^^^ template.ng
325+
><my-component *%invalid="expr"></my-component>
326+
#^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ template.ng
282327
>

0 commit comments

Comments
 (0)