Add support for jsx html element highlights

[TomiS]

I'm not sure if this is at all how you want to solve this. But since I spent some time toying with this approach, I might as well post it as a PR.

Some notes:

• Regex matches all html tags based on the existence of opening chevron and one of explicitly listed tag names. The opening tag then expects either closing chevron or at least one whitespace character (to avoid collisions with type arguments)
• Closing tag works similarly except that it doesn't allow any content other than the tag name.
• The tag list is just pasted from somewhere and is almost certainly not complete. I can figure out where to find a complete list if the approach is considered good otherwise.

[TomiS]

Hmm, I realized this fails with code that uses html tag names as type names.

type div = bool
let foo: option<div> = Some(false)

Might be super hard to get around the fact that both jsx tags and types use chevrons now, assuming there is no deeper knowledge of the syntax tree.

EDIT: After thinking about this a bit, unless there exists a significantly better approach, I would personally just accept that there are a few corner cases like this and still implement the highlight. The pros overweight the cons clearly.

[chenglou]

Whoever's reading this: make sure you've seen my comment at #8 (comment) first

I'm open to consider coloring lower-cased JSX tags. But not if they discolor option<foo>. There might be some circumventions for this. I'll think about it.

[amiralies]

what about just coloring angle brackets and equal signs?

This is from vim-rescript

[chenglou]

That could work, but requires detection the jsx block anyway. We already detect most of them, but don't highlight them, since highlighting them requires detecting all of them. Note how the ligature is already active.

The troubling one is the open and closing angular brackets for the opening tag

[chenglou]

Btw @amiralies see https://github.com/rescript-lang/rescript-vscode/#recommendation and #8 (comment). = is already recognized, though not colored in your particular theme.

[chenglou]

The highlighting (using the same ported grammar) in Sublime Text:

Unfortunately vscode's default dark theme doesn't highlight any operator...

[amiralies]

is that the same exact tm grammar mapped to submile-syntax?
I think submile-syntax is more powerful than tm grammar.

[chenglou]

It's the same, though for the example above I've tweaked a few things for clarity, ignore that. But the main point is that your theme (and mine, the default vscode dark theme) don't highlight stuff like operators.

Yeah I'm familiar with the difference between the two grammars. Part of why I didn't lazy out with reusing TM grammar for Sublime is precisely because the new Sublime grammar is much nicer.

[zth]

Note: #367 will implement the equivalent of this. Thank you @TomiS !