JSX related issue

[HerringtonDarkholme]

yats is a delicate syntax highlighter. It almost reimplements a TypeScript parser in vim highlighting.

So JSX requires builtin support in order for a streamlined and holistic experience.

Currently yats' JSX support is still in alpha. Please issue JSX related issue here if you are a React user :)

[mhartington]

👋 So far really liking it.

Ran into one issue within the Ionic codebase. Looks like the highlight rules are,

1. Not handling self closing tags well
2. Causing issues were functions outside of a class are getting captured in the jsx region.

You can replicate this by viewing the range.tsx file in Ionic's source.

https://github.com/ionic-team/ionic/blob/master/core/src/components/range/range.tsx

[HerringtonDarkholme]

Thanks for reporting!

I'm still busy with day job these days. But I will definitely look at this later!

[soywod]

I've just tested your plugin and I really like, except for TSX, it does not format at all (everything stays on the same line). In fact, I tested many plugin to get TSX working, and the only one I've found that works very well is https://github.com/mxw/vim-jsx, but it's for JSX. Waiting for a plugin that supports well TSX, I just forked and adapt this last one (https://github.com/soywod/vim-tsx):

You should check his code, it could give you some idea. In fact, he mixed JS and XML syntax in the same file. I hope it's gonna help.

[EDIT] Maybe I'll try a poke these days

[HerringtonDarkholme]

Thanks for suggestion. I have updated syntax file and indentation file.

[mhartington]

Updated all my plugins this morning, everything is looking good on my end!

[soywod]

It's working way better now, indeed ! I'm using it for a while and it seems good, except in few case:

• When you have a component prop that is a function than returns a component:

• When you use the Fragment component (the short way <></>):

[EDIT]

• When you also have this pattern (like {this.callMethod()}):

[HerringtonDarkholme]

@soywod I have identified the problem in render-props (fix in bound).

But I didn't see problem in the next two pictures which are about fragment and callMethod().
Would you like paste the code and point out the problem?

[HerringtonDarkholme]

I have fixed render-props in master.

[soywod]

@HerringtonDarkholme for the 2 others, the problem is the indent, see the starting and closing tags are not aligned anymore. And everything after is bad indented (it looks like you loose one indent level somewhere)

[tomaskallup]

Hi, I installed your plugin and so far it's the best Typescript one I found, but I'm facing one issue:

For some reason JSX tags with first letter being capitalized, have incorrect color. After a bit of inspection, the <div> links to tsxIntrinsicTagName which is highlited as htmlTagName and the <Test /> links to tsxTagName which is highlited as function. I'm not sure if this is intentional, but doesn't fell like it.

Also if I remove all indentation in the test.tsx file and try to auto-indent the whole file, it messes up at <Test /> but if I then auto-ident again it fixes itself.

[HerringtonDarkholme]

the

links to tsxIntrinsicTagName which is highlited as htmlTagName and the links to tsxTagName which is highlited as function

This is intended. The logic follows React naming convention: tags with lower case initials are treated as native element and tags with uppercase initials are treated as user defined components.

[tomaskallup]

Another thing: Is there any reason why TSX uses the typescriptreact filetype? This breaks all of my other plugins, because they only look for typescript, typescript.tsx or typescript.jsx filetype 😕

[HerringtonDarkholme]

I just follow VSCode's naming for typescriptreact.
Is there any example plugins for tsx files?

[tomaskallup]

For example I use ALE for linting (it uses tslint and tsserver) or completor for omnicompletion, I have completor-typesciprt which adds support for typescript. Those two rely on said filetypes

[skeate]

At least for ALE, you can use an alias to have it run typescript checkers against typescriptreact