Update grammar with better JSX syntax highlighting

[believer]

I have extracted code from the language-reason grammar to get better support for JSX in ReScript. It's not identical to the old syntax highlighting and it's got some issues (see below), but it's better than nothing.

Before change

After change

New syntax (.res)	Old syntax for comparison (.re)

Issues I've noticed

Highlighting of the new template string syntax isn't working correctly.

[chenglou]

Hey, this got stale. This is on us; sorry for the slow reply. We've decided not to go forward with this approach. Here's why:

First, Intro on Highlighting

Here's how code is colored in VSCode:

• We make a grammar using VSCode's grammar format, which is a bit obsolete (in terms of tech, not in terms of popularity).
• The grammar runs though the text, assigning scope names to chunks of letters. The scope names are sometime overly generic, e.g. Foo should technically be a "ReScript module" but sometime the scopes we get to choose from is like, "storage" or "namespace" or "object class" or whatever.
• The user's theme opinionatedly decide to assign colors to specific scope names agreed upon by some ad-hoc decisions. So a theme might decide to highlight "namespace" but not "storage".

Our Priorities

• Correctness of highlighting. The ReScript syntax inherit some legacy syntax and is one of the more complex ones. Most highlighting overoptimize for colorfulness instead of proper coloring of important tokens. In our case, for example, we've taken great care of distinguishing the color between a variant and a module/functor:
  
  For us, this is the important property of highlighting we'd like to preserve. Over more colors. Highlighting these correctly will greatly help newcomers (despite the fact that newcomers usually don't complain about this confusion; but that's just a bias in the kind of feedback one would publicly post).
• Simpler assignment of scopes.
  • We've decided not to overload a token with all sorts of scope names just so that probabilistically speaking, some random theme somewhere might decide to color them in some way. This is a wild goose chase; someone can always say that a certain theme X doesn't highlight the scopes we gave. Plus, this goes directly against our previous goal of correctness of highlighting.
  • (You know this, but I'm speaking to the audience here) This also means your first screenshot's problem isn't that we aren't assigning scopes to tokens; we are. It's actually because that particular theme decided not to highlight some scopes. So your first screenshot is pathological depending on the theme, not our grammar. The JSX highlighting is actually like this for the default VSCode theme and many others:
    
    
    
    (Dark+, Monokai Dimmed and Tomorrow Night Blue, respectively)
    I'm emphasizing it because folks who haven't tried the plugin thought that we don't highlight JSX. We do highlight JSX tags, with the same color we highlight module names actually; for the previous correctness reasons (ignore the differing color for <Foo.Bar; this is a shortcoming of VSCode's archaic grammar... hopefully folks don't use that often).
• Maintenance burden. We've done this 4+ times now and the grammar is plain unmaintainable once a contributor of a big grammar addition leaves. Not to mention we also maintain the Vim and Sublime Text's separate grammar (codegenning all of these from a single grammar is a bad idea too. LSP's experimental token protocol also won't work as it serves a different use-case). So we're trying to strike a sweet spot of coloring well in most cases, and not going overboard. I mean, these are fine coloring already (in terms of scope assignment, not necessarily in terms of actual colors, which is up to individual taste ofc):
  
  
  We've achieve these while maintaining one of the cleaner grammars around given our syntax complexity. Dare I presume that making your contribution wasn't as hard as contributing to another language's grammar (with similar syntactic complexity); and it's unclear that the grammar will stay as maintainable if we merged this (it went from 500 lines total to 1.3k lines just for JSX!). This doesn't mean we don't value your contribution btw, we're really happy you decided to do it.

tldr we've put the proper scopes, but your particular theme doesn't highlight JSX tags. Neither does it highlight module names, but that's less noticeable because nobody piles 10 module names one after after whereas they do for JSX.

Conclusion from the Priorities

• We won't overload scopes in the hope of backward patching some themes; it's those themes that need to properly highlight the scopes we use (which are all standard, popular scopes).
• We won't highlight JSX parameters, or we'll highlight both JSX and function parameters. For consistency.
• We recommend the themes Dark+, Monokai Dimmed and Tomorrow Night Blue, and whichever other themes that do highlight scopes well for most languages. Understandably this is asking the user to change a habit, and themes are a bit personal, but this is a rather exceptional case.

So all in all, I'm afraid I'll have to close this PR and approach. I'm really sorry for taking this long to do so. However, #57 is a bit more promising of a direction, where we highlight the lower-case JSX tags. Yes, it does mean that technically we should highlight function applications too, but that's a bit much. A little inconsistency here but it's probably fine.