@@ -1,6 +1,28 @@
11; JSX
22;----
33
4+; Highlight component names differently
5+
6+(jsx_opening_element ((identifier) @constructor
7+ (#match? @constructor "^[A-Z]")))
8+
9+; Handle the dot operator effectively - <My.Component>
10+(jsx_opening_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
11+
12+(jsx_closing_element ((identifier) @constructor
13+ (#match? @constructor "^[A-Z]")))
14+
15+; Handle the dot operator effectively - </My.Component>
16+(jsx_closing_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
17+
18+(jsx_self_closing_element ((identifier) @constructor
19+ (#match? @constructor "^[A-Z]")))
20+
21+; Handle the dot operator effectively - <My.Component />
22+(jsx_self_closing_element ((nested_identifier (identifier) @tag (identifier) @constructor)))
23+
24+; TODO: also tag @punctuation.delimiter?
25+
426(jsx_opening_element (identifier) @tag)
527(jsx_closing_element (identifier) @tag)
628(jsx_self_closing_element (identifier) @tag)