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 <Test /> 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

[tomaskallup]

Completor used to have something similiar, but I don't see the reason to use this filetype, all other plugins use typescript.jsx or typescript.tsx and for the javascript ones it's the same.

[HerringtonDarkholme]

I will update file type.

[tomaskallup]

@HerringtonDarkholme I have it changed localy, I could push it and create PR

[mklopets]

All was perfect until I updated my vim plugins today, now syntax highlighting breaks after using generics in .tsx files:

In a .ts file:

In a .tsx file:

2ae4c9b01bb4bc0baf2e6ba54cb83c5a23aa6b8c seems to be the commit that broke it.

[tomaskallup]

I tried replicating on my system and it seemed fine tsx: ts:

Could you maybe provide a file which breaks? @mklopets

[mklopets]

interface A {
  hello: Promise<string>
}

interface Props {} // does not get highlighted in .tsx

.ts:

.tsx:

[tomaskallup]

Again this seems fine in my vim. Please add this to your vimrc:

function! SynStack()
  if !exists("*synstack")
    return
  endif
  echo map(synstack(line('.'), col('.')), 'synIDattr(v:val, "name")')
endfunc

Then go to the .tsx file, move your cursor at the string and do :call SynStack. Do the same for the .ts file and copy the results here. The string seems to have different highlight for you, so maybe that's where it breaks.

EDIT: I even tried a clean vim with only yats and it's fine, maybe there is some kind of conflict, which should't be unless you have some other TSX syntax plugin.

[mklopets]

:call SynStack() on the string

• in .tsx: ['foldBraces', 'tsxRegion', 'tsxTag', 'tsxIntrinsicTagName']
• in .ts: ['foldBraces', 'typescriptType']

to confirm, the plugin is at 2ae4c9b for me (thanks for the super quick help btw!)

[tomaskallup]

@mklopets Seems like you have some other plugin which tries to highlight, I don't think foldBraces comes from yats. Could you check what other plugins you have?

[mklopets]

Irregardless of foldBraces, surely the generic shouldn't be labeled as a tsx tag?

[tomaskallup]

Well on clean installation it isn't, so there has to be something messing it up. That's why I'm asking for other plugins you might have, because I'm unable to replicate it...

[HerringtonDarkholme]

Thank @tomaskallup following up tsx issue!

@mklopets Please do provide a minimized vimrc (less than 50 lines) when reporting issue. It will be hard for others to debug a full user config.

Also, if you have a specific issue and need extended discussion, please move it to a dedicated issue. Thanks!

[tydira]

For any passersby: I also had generics highlighted as tsx tags. As suspected, the problem originated in another plugin (vim-polyglot, in my case). Its repo has instructions on how to prevent activation for specific filetypes.

Thanks for the great plugin, @HerringtonDarkholme and friends.

[rlisowski]

@HerringtonDarkholme yats keep yelling at me "Cannot use JSX unless the '--jsx' flag is provided"

tsc and webpack from CLI works just fine. Here is my tsconfig.json file

{
  "compilerOptions": {
    "outDir": "./public/build/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "admin/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

I've tried to set g:typescript_compiler_options but with no luck.

" let g:typescript_compiler_options = "--project tsconfig.json"
let g:typescript_compiler_options = '--jsx react'

I will be grateful for any suggestion. Thanks.

[HerringtonDarkholme]

@rlisowski yats doesn't support error reporting by itself. It's probably your error lint plugin or LSP plugin.