Better JSX / TSX support

[AnatoleLucet]

Hi, this color scheme is great. But it doesn't seem to work well with jsx / tsx files:

jsx:

tsx:

While it's working on html files:

[romgrk]

Are you using a jsx/tsx filetype plugin? If so which one?

[AnatoleLucet]

Yes, I'm using vim-jsx-improve https://github.com/neoclide/vim-jsx-improve

[romgrk]

And does other colorschemes work with JSX? Can you tell me the output of echom &filetype? Is it set to javascript.jsx, and if not does setfiletype javascript.jsx solves the issue?

[AnatoleLucet]

And does other colorschemes work with JSX?

I've used rakr/vim-one for a long time, and it's working without any issue for jsx.

Can you tell me the output of echom &filetype

typescriptreact

Is it set to javascript.jsx, and if not does setfiletype javascript.jsx solves the issue?

No, unfortunately it doesn't.

[romgrk]

With your cursor over one of the non-highlighted groups, run the folllowing command.

com! SynStack              call SyntaxStack()
fu! SyntaxStack() "                                                          {{{
    let synNames = []
    let lastID       = 0
    for id in synstack(line("."), col("."))
        call add(synNames, synIDattr(id, "name"))
        let lastID = id
    endfor
    if lastID == 0 | return | end
    echohl synIDattr(synIDtrans(lastID), "name")
    echon synIDattr(synIDtrans(lastID), "name")
    echon ' ' . string(synNames)
    echohl None
endfu "                                                                      }}}

[AnatoleLucet]

With my cursor on one of the non-highlighted jsx element:

[romgrk]

And is the highlighting issue fixed if you open an html file before opening a typescriptreact file? (in the same neovim instance)

[AnatoleLucet]

yes

[AnatoleLucet]

If I apply another scheme before this one, the jsx syntax is going to be from the other scheme.

[romgrk]

From what I understand, this issue belongs to https://github.com/neoclide/vim-jsx-improve. The typescriptreact syntax expects other highlight groups to be defined, but those are not defined. The javascript.jsx syntax from the same repository doesn't seem to have the issue. For example jsxComponentName is correctly linked to Statement, while tsxIntrisicTagName is linked to htmlTagName. I 100% understand that they want it colored as HTML is, but they should be doing the loading if required.

It's definitely not the colorscheme's job to link htmlTagName or tsxIntrisicTagName to Statement, that's the filetype/syntax plugin's job. This should be fixed in the syntax plugin.

Open the issue with that repository to get their opinion, I might consider fixing it here if they provide a convincing reason to.

[romgrk]

Also I don't understand why your JSX doesn't work. Mine does, I use the same plugin.

Provide more details with the above command about the jsx groups. Use verbose hi jsxXxxx to print more details where those groups were defined.

[AnatoleLucet]

Right, do you think I should open an issue on vim-jsx-improve's repo?

Provide more details with the above command about the jsx groups. Use verbose hi jsxXxxx to print more details where those groups were defined.

Not sure if I correctly understand what you mean. But:

This one is only there once I've opened an html file and the highlighting is working:

Totally unrelated question: what font / terminal are you using? Everything look so good and smooth compared to my vim :smile:

[romgrk]

Right, do you think I should open an issue on vim-jsx-improve's repo?

Yes, open an issue with them let's see what they think.

font / terminal are you using

Roxterm with "SauceCodePro Nerd Font" which is the patched version of "Source Code Pro" from the nerd fonts repo.

[kiprasmel]

hey lads -- I have the same issue, but for me, the following advice works:

@romgrk

And does other colorschemes work with JSX? Can you tell me the output of echom &filetype? Is it set to javascript.jsx, and if not does setfiletype javascript.jsx solves the issue?

(setting the filetype to javascript.jsx) solves the issue. Also, just renaming the file from .tsx to .jsx also works.

I tried looking for typescript-related issues in the vim-jsx-improve repo, but didn't find much:

https://github.com/neoclide/vim-jsx-improve/issues?q=is%3Aissue+sort%3Aupdated-desc+typescript

The https://github.com/neoclide/vim-jsx-improve/issues/16 issue suggested some fixes, but they don't seem to help either. Any ideas?

[romgrk]

Sorry I'm not sure I understand, is there still an issue after you set the filetype to javascript.jsx? If not, why isn't that enough?

[kiprasmel]

The issue does indeed disappear when I set the filetype to javascript.jsx.

How would I do that automatically for all .tsx files, and should I do that in the first place?

[romgrk]

I have something like this to auto-switch the filetype to what I want:

" $config_dir/after/ftplugin/javascript.vim
if &ft ==# 'javascript.jsx'
  finish
end

function! s:set_jsx()
  if &ft ==# 'javascript'
    setfiletype javascript.jsx
  end
endfunc
call timer_start(0, {->s:set_jsx()})

Note that typescriptreact is the correct FT for typescript files.

For the typescript highlights not being shown due to HTHML groups not loaded, maybe you should add something like in after/ftplugin/typescript.vim:

# pseudo-code
if not(html_is_loaded()):
  load_runtime('syntax/html.vim')

I'll close the issue because I don't see any of the behavior above being the responsability of the colorscheme, but you can re-open if you see something that should be done here.