peitalin / vim-jsx-typescript

React JSX syntax highlighting for vim and Typescript
The Unlicense
305 stars 29 forks source link

Using generics in tsx modules parses as tsxTagName & tsxTagAttrib #15

Closed joefiorini closed 4 years ago

joefiorini commented 5 years ago

When I have an arrow function that uses generics in a TSX file it parses the first generic argument (up to and including the "," after the argument) as tsxTagName and the second argument as tsxAttrib. I'm using the excellent vim-HiLinkTrace plugin to see the syntax highlighting trace.

image

image

You can see that although the type def works fine, the generics in the arrow definition do not.

If I change it to a named function instead it seems like it gets parsed as plain text:

image

I feel like in both cases this should parse as a tsxType or tsxGenerics, no?

I tried to fix it myself, but these regexes are a little beyond my reach at the moment. Any thoughts?

I created a simple repo to reproduce the issue: https://github.com/joefiorini/tsx-generics-syntax-repro

It uses vim-plugged to install the plugins. Can be run in NeoVim with nvim -u init.vim.

peitalin commented 5 years ago

Hi Joe, Thanks for providing the repo, I've made some edits to include those generics that exist in those places (outside of tsxRegions). Let me know if it works. image

joefiorini commented 5 years ago

Sorry it took me so long to respond. I think it's a little better, but I still see some issues. I've updated my example repo to include a few more examples that seem to break for me. I'll also include a screenshot here

image

peitalin commented 5 years ago

Hi Joe, Thanks for providing the new examples. Let's see if this latest commit helps solve the issue. Screen Shot 2019-09-27 at 12 03 56 pm

We could also add syntax rules for say the Props['type'] part and make it customizable as an additional feature in the future.