Broken .tsx highlighting for arrow functions using generics

[noahbrenner]

I'm running into inconsistencies in highlighting between ft=typescript and ft=typescriptreact.

I'm using yats.vim, vim-javascript, and of course vim-jsx-pretty, all just updated using vim-plug.

Some example code:

const doFoo = <K extends keyof Foo>(key: K, value: Foo[K], foos: Foo[]) => {
  foos[0][key] = value;
};

const doBar = (bar: string) => {
  return bar;
};

• When filetype is typescript:

• When filetype is typescriptreact:

  • Highlighting is broken for the generic parameter, which looks like it's treated as a JSX element.
  • Highlighting is broken for the function parameters, function body, and for the next function (it's broken for all following functions, I just included 1 in the example).

• Surprisingly (to me :smile:), the behavior is affected by the name of the generic variable. If I use T instead of K, I get this:

  • Highlighting for the generic parameter is still broken, but in a different way than above. Now it's all the default text color.
  • Highlighting is correct for the function parameters, function body, and the following function(s).

For simple generics, I can get away with just using T for now, but that's not always the best type variable to use, doesn't cover functions that need more than one generic parameter, and is still missing highlighting for the type parameters themselves.

[wchargin]

I'm also running into this.

Here's a hacky one-line patch to broaden it to at least accept [A-Z] instead of just T:

diff --git a/after/syntax/jsx_pretty.vim b/after/syntax/jsx_pretty.vim
index 74b200c..71e97d3 100644
--- a/after/syntax/jsx_pretty.vim
+++ b/after/syntax/jsx_pretty.vim
@@ -3,5 +3,5 @@ let s:highlight_close_tag = get(g:, 'vim_jsx_pretty_highlight_close_tag', 0)
 " detect jsx region
 syntax region jsxRegion
-      \ start=+\%(\%(\_[([,?:=+\-*/>{}]\|<\s\+\|&&\|||\|=>\|\<return\|\<default\|\<await\|\<yield\)\_s*\)\@<=<\_s*\%(>\|\z(\%(script\|\s*\<T\>\)\@!\<[_$A-Za-z][-:._$A-Za-z0-9]*\>\)\%(\_s*\%([-+*)\]}&|?,]\|/\%([/*]\|\_s*>\)\@!\)\)\@!\)+
+      \ start=+\%(\%(\_[([,?:=+\-*/>{}]\|<\s\+\|&&\|||\|=>\|\<return\|\<default\|\<await\|\<yield\)\_s*\)\@<=<\_s*\%(>\|\z(\%(script\|\s*\<[A-Z]\>\)\@!\<[_$A-Za-z][-:._$A-Za-z0-9]*\>\)\%(\_s*\%([-+*)\]}&|?,]\|/\%([/*]\|\_s*>\)\@!\)\)\@!\)+
       \ end=++
       \ contains=jsxElement