[JSX Highlighting] Use new @tag & @tag.delimiter directives, and if possible highlight component tags as Type

[bluz71]

Hello Treesitter folks,

In issue #465 it was agreed upon to add new @tag and @tag.delimiter directives for HTML (and similar markup languages).

JSX is just such a case.

Currently, the highlights.scm for JSX is:

(jsx_element
  open_tag: (jsx_opening_element ["<" ">"] @operator))
(jsx_element
  close_tag: (jsx_closing_element ["<" "/" ">"] @operator))
(jsx_self_closing_element ["/" ">" "<"] @operator)
(jsx_fragment [">" "<" "/"] @operator)

(jsx_closing_element name: (identifier) @variable.builtin)
(jsx_opening_element name: (identifier) @variable.builtin)
(jsx_self_closing_element name: (identifier) @variable.builtin)

(jsx_text) @none

It could be improved as follows:

(jsx_element
  open_tag: (jsx_opening_element ["<" ">"] @tag.delimiter))
(jsx_element
  close_tag: (jsx_closing_element ["<" "/" ">"] @tag.delimiter))
(jsx_self_closing_element ["/" ">" "<"] @tag.delimiter)
(jsx_fragment [">" "<" "/"] @tag.delimiter)

(jsx_closing_element name: (identifier) @tag)
(jsx_opening_element name: (identifier) @tag)
(jsx_self_closing_element name: (identifier) @tag)

(jsx_text) @none

I could do a pull request for that....BUT I want something even better, something that Atom via it's Treesitter does, and that would be to highlight component Tags as TSType as seen in this image:

Notice the Yellow for Row (Yellow being the Type color for Atom's default theme).
HTML tags such as div are highlighted differently.
This is useful since in my Neovim setup I can just type gf on the Row and go to the definition.

In JSX tag names that start with an uppercase letter mean Component instance.

Is that possible to do in highlights.scm file? Query the first letter of jsx_opening_element or jsx_self_closing_element name? What is the syntax?

If possible we should do that.

Best regards.

[stsewd]

Is that possible to do in highlights.scm file? Query the first letter of jsx_opening_element or jsx_self_closing_element name? What is the syntax?

Yes, that's possible. You would need to use the #match? predicate.

[bluz71]

From the Python highlights.scm file:

((identifier) @type
 (#match? @type "^[A-Z]"))

Whoever does this, probably not me since I still can't grok the query syntax, should ideally add something like that to the JSX highlights file.

Highlighting Component tags as TSType and normal tags as TSTag would be genuinely outstanding.

[bluz71]

Just tested master with merged #500. Fantastic, this enhancement works really well, especially inside React-based JavaScript files.

This genuinely feels like a quantum leap in terms of syntax highlight quality and smarts. Old Vim style regex is like a 1950s VW Beetle and Treesitter is like a modern Porsche. A game-changer for sure imo.

Many thanks again @kyazdani42 for the PR and the wider Treesitter team.