Highlight only tag names in jsx

[faergeek]

Hi! First of all, thank you for this plugin! I couldn't live without it since I started diving into common lisp.

Then I decided to use it for typescript as well and noticed that you have separate queries for jsx tags. But it highlights the whole tag, from < all the way to >. It's a bit problematic, because this way you lose all other highlighting:

Note that display: flex and href="..." are highlighted entirely in blue and green respectively. And if you also have functions in jsx attributes it's an even bigger problem. So I thought it would make more sense to highlight only tag names, so here's the result with my changes applied:

But also I'm not sure if it makes sense to have the default queries that highlight only angle brackets, because I can't imagine how you nest them and why that can be useful. For me it makes more sense for this queries to be the default option, but may be I'm missing something.

If any of this is ok, I would make similar changes for html and may be we could figure out better default solution for jsx in javascript as well.

What do you think?

[HiPhish]

I have actually implemented the same change for React and HTML as well now. When I originally added React support I had never used React myself, but I have since started a new job that uses React. I agree that highlighting the entire tag is overboard, so I finally decided to do something about it.

Personally I would prefer to highlight the angle brackets as well because short tag names like p are hard to miss. But that is not possible in Neovim at the moment. I think highlighting just the name is an OK compromise for the time being.

But also I'm not sure if it makes sense to have the default queries that highlight only angle brackets, because I can't imagine how you nest them and why that can be useful. For me it makes more sense for this queries to be the default option, but may be I'm missing something.

You are right, I have made rainbow-tags the default now.

If any of this is ok, I would make similar changes for html and may be we could figure out better default solution for jsx in javascript as well.

I have already done so, please try out the latest master. If you agree with my choice please close this PR, otherwise we can continue the discussion here.

[faergeek]

I have actually implemented the same change for React and HTML as well now. When I originally added React support I had never used React myself, but I have since started a new job that uses React. I agree that highlighting the entire tag is overboard, so I finally decided to do something about it.

Great! :+1:

Personally I would prefer to highlight the angle brackets as well because short tag names like p are hard to miss.

Yeah, that would be cool! I would may be go even further with highlighting attribute names as well.

You are right, I have made rainbow-tags the default now.

Is there a reason to not enable it by default for javascript as well? Tools like eslint and prettier support jsx out of the box. And syntax highlighting in neovim for it works by default. It's a widely accepted syntax, which doesn't conflict with anything existing in the language already, unlike in typescript, where they have to have two file extensions for legacy reasons. So supporting it out of the box would make sense I guess.

And what if instead of changing default value for query option, 'rainbow-parens' would be replaced with these queries, which now become defaults? At least for now, before neovim PR mentioned in readme is merged, rainbow-parens queries result in strange coloring in these cases, so I wouldn't expect that somebody would want that as an option. But may be I'm wrong.

But if changing default option value is the way to go, then I guess docs should be updated to reflect this as well.

[HiPhish]

Yeah, that would be cool! I would may be go even further with highlighting attribute names as well.

I am not sure, that could be too vibrant. But I could try once it becomes possible to highlight more than one element from the capture.

Is there a reason to not enable it by default for javascript as well?

I don't know, I try to follow the principle of least surprise. For example, in LaTeX I could highlight the begin/end delimiters of a block and it would make sense, but it would also be more surprising than just highlighting the parentheses.

On the other hand, in HTML (and React) there aren't really any parentheses to highlight. The tags are the delimiters. So maybe it would make sense to switch the default there as well.

And what if instead of changing default value for query option, 'rainbow-parens' would be replaced with these queries, which now become defaults?

Do you mean that you want rainbow-parens to highlight tags? Yeah, that does sound reasonable.

[faergeek]

Do you mean that you want rainbow-parens to highlight tags? Yeah, that does sound reasonable.

Yes, that's what I meant. And although tags are not parens, angle brackets are not parens either :-) The "rainbow-parens" name is already not exactly accurate in some cases anyway. If it bothers you, may be it would make sense to rename queries to just rainbow or rainbow-delimiters to avoid this confusion, or even nvim-ts-rainbow2 to match package name, because IIRC these files are somewhat globally namespaced between runtime paths, right? But I'm not sure if it's really necessary, plus it would definitely break users' configs, if queries were even a little bit customized.

I don't know, I try to follow the principle of least surprise. For example, in LaTeX I could highlight the begin/end delimiters of a block and it would make sense, but it would also be more surprising than just highlighting the parentheses.

Took a look at latex examples and it makes total sense to have a complete separation of queries there, but for html/jsx tags IMHO it doesn't. At least for now, because API doesn't allow to properly highlight angle both brackets with the same color.

[HiPhish]

And although tags are not parens, angle brackets are not parens either

Yes, you are right. I am not sure why I called the default query rainbow-parens; it might be because the original repo called it parens. I think changing the name to rainbow or rainbow-delimiters is a good idea and it should not be much of the issue for users.

But I'm not sure if it's really necessary, plus it would definitely break users' configs, if queries were even a little bit customized.

Eh, if people have customized their queries they have probably chosen another name anyway.