Nodes in JSX are matched with wrong part

[hoschi]

trafficstars

Explain the issue

Matchup sometime doesn't find the right matching part.

1. What vim version are you using? NVIM v0.5.0-132-g83b6d9f19

Matchup sometime doesn't find the right matching part.

Right:

Wrong match:

Wrong, no match at all:

Wrong, same as above:

Wrong match:

Minimal working example

Please provide a minimal working example, e.g.,

export const TypographyBox = ({ children, variant }) => (
    <TypographyBoxOuter>
        <Variant variant={variant}>{children}</Variant>
        <Box display="flex">
            <Box>
                <div>
                    <BoxHeading>
                        <FormattedMessage defaultMessage="font" />:
                    </BoxHeading>
                </div>
                <div>
                    <FormattedMessage defaultMessage="Source Sans Pro" />
                </div>
            </Box>
            <Box>
                <div>
                    <BoxHeading>
                        <FormattedMessage defaultMessage="weight" />:
                    </BoxHeading>
                </div>
                <div>
                    <FormattedMessage defaultMessage="Regular 400" />
                </div>
            </Box>
            <Box>
                <div>
                    <BoxHeading>
                        <FormattedMessage defaultMessage="size" />:
                    </BoxHeading>
                </div>
                <div>
                    <FormattedMessage defaultMessage="responsive" />
                </div>
            </Box>
            <Box>
                <div>
                    <BoxHeading>
                        <FormattedMessage defaultMessage="letter spacing" />:
                    </BoxHeading>
                </div>
                <div>0px</div>
            </Box>
            <Box>
                <div>
                    <BoxHeading>
                        <FormattedMessage defaultMessage="html tag" />:
                    </BoxHeading>
                </div>
                <div>{variant}</div>
            </Box>
        </Box>
    </TypographyBoxOuter>
)

Minimal vimrc file

Please provide a minimal vimrc file that reproduces the issue. The following should often suffice:

let g:python_host_prog='/home/hoschi/.pyenv/versions/neovim2/bin/python'
let g:python3_host_prog = '/home/hoschi/.pyenv/versions/neovim3/bin/python'

function! DoRemote(arg)
  UpdateRemotePlugins
endfunction

call plug#begin('~/.config/nvim/plugged')
Plug 'lifepillar/vim-solarized8' " https://github.com/lifepillar/vim-solarized8
Plug 'sheerun/vim-polyglot' " https://github.com/sheerun/vim-polyglot
Plug 'andymass/vim-matchup' " https://github.com/andymass/vim-matchup
call plug#end()

set nocompatible

set termguicolors
set background=light
let g:solarized_termtrans = 1
colorscheme solarized8

filetype plugin indent on
syntax enable

"------------------------------
"vim-matchup
"------------------------------
" solarized8_light_high: hi! MatchParen cterm=NONE,bold gui=NONE,bold ctermfg=15 guifg=#fdf6e3 ctermbg=12 guibg=#839496
autocmd Colorscheme * hi MatchParen cterm=italic gui=italic ctermfg=15 guifg=#586e75 ctermbg=12 guibg=#d8bd82

" Enable experimental transmute module
" See https://github.com/andymass/vim-matchup#d1-parallel-transmutation
let g:matchup_transmute_enabled = 1

" Deferred highlight for performance reasons
let g:matchup_matchparen_deferred = 1

" done by context.vim now
let g:matchup_matchparen_status_offscreen = 0

let g:matchup_matchpref = {
    \ 'html': { 'tagnameonly': 1, },
    \ 'javascript.jsx': { 'tagnameonly': 1, },
    \ 'javascript': { 'tagnameonly': 1, },
    \ 'jsx': { 'tagnameonly': 1, },
    \}

" for JSX see `after/ftplugin/javascript.vim` and:
" https://github.com/andymass/vim-matchup/issues/35#issuecomment-413252215

[andymass]

What is the actual filetype (output of set filetype / echo &filetype)?

Are you using the workaround mentioned in #35 / comment of the vimrc or only what's in the vimrc posted?

[hoschi]

oh sorry, I totally overlooked that one, I use it. after/ftplugin/javascript.vim:

setlocal matchpairs=(:),{:},[:],<:>
let b:match_words = '<\@<=\([^/][^ \t>]*\)\g{hlend}[^>]*\%(/\@<!>\|$\):<\@<=/\1>'

set ft?: filetype=javascript

[andymass]

Thanks. There is a bit of a race condition with your config, can you also tell me what is the output of

:echo b:match_words in the file?

[hoschi]

the command outputs: <\@<=\([^/][^ \t>]*\)\g{hlend}[^>]*\%(/\@<!>\|$\):<\@<=/\1>

[andymass]

Strangely, I cannot reproduce this using the exact same b:match_words. I am having trouble understanding whether vim-polyglot is part of the problem somehow. Does removing that cause it to work?

If all else fails you can try a "hot fix"; note there are two alternative regexes, you can see if either work (note that the second one has a reported problem in #103).

function! JSXHotFix()
    setlocal matchpairs=(:),{:},[:],<:>
    let b:match_words = '<\@<=\([^/][^ \t>]*\)\g{hlend}\%(>\|$\|[ \t][^>]*\%(>\|$\)\):<\@<=/\1\g{hlend}>'
    " let b:match_words = '<\@<=\([^/][^ \t>]*\)\g{hlend}[^>]*\%(/\@<!>\|$\):<\@<=/\1>'
endfunction

let g:matchup_hotfix = {'jsx': 'JSXHotFix'}

[hoschi]

I removed the other plugins now:

let g:python_host_prog='/home/hoschi/.pyenv/versions/neovim2/bin/python'
let g:python3_host_prog = '/home/hoschi/.pyenv/versions/neovim3/bin/python'

function! DoRemote(arg)
  UpdateRemotePlugins
endfunction

call plug#begin('~/.config/nvim/plugged')
"Plug 'lifepillar/vim-solarized8' " https://github.com/lifepillar/vim-solarized8
"Plug 'sheerun/vim-polyglot' " https://github.com/sheerun/vim-polyglot
Plug 'andymass/vim-matchup' " https://github.com/andymass/vim-matchup
call plug#end()

set nocompatible

set termguicolors
set background=light
"let g:solarized_termtrans = 1
"colorscheme solarized8

filetype plugin indent on
syntax enable

"------------------------------
"vim-matchup
"------------------------------
" solarized8_light_high: hi! MatchParen cterm=NONE,bold gui=NONE,bold ctermfg=15 guifg=#fdf6e3 ctermbg=12 guibg=#839496
"autocmd Colorscheme * hi MatchParen cterm=italic gui=italic ctermfg=15 guifg=#586e75 ctermbg=12 guibg=#d8bd82

" Enable experimental transmute module
" See https://github.com/andymass/vim-matchup#d1-parallel-transmutation
let g:matchup_transmute_enabled = 1

" Deferred highlight for performance reasons
let g:matchup_matchparen_deferred = 1

" done by context.vim now
let g:matchup_matchparen_status_offscreen = 0

let g:matchup_matchpref = {
    \ 'html': { 'tagnameonly': 1, },
    \ 'javascript.jsx': { 'tagnameonly': 1, },
    \ 'javascript': { 'tagnameonly': 1, },
    \ 'jsx': { 'tagnameonly': 1, },
    \}

" for JSX see `after/ftplugin/javascript.vim` and:
" https://github.com/andymass/vim-matchup/issues/35#issuecomment-413252215

I also have nothing other files in after and autoload dirs, only the one for the hotfix.

But still the same problem

Hotflix applied to filetype javascript instead of jsx works for me with the first regex! :100: Putting the regex from the hotfix into the file in after/ftplugin/javascript.vim seems to work as well, instead of using g:matchup_hotfix. Is this OK or should I use g:matchup_hotfix? From my side we can close the issue.

[andymass]

Closing this old issue out as some things have changed meanwhile.

1. This fix from a previous comment was incorporated into the main html patterns.
2. Using after/ftplugin/javascript.vim is totally fine and equivalent to using g:matchup_hotfix['javascript']; it is a matter of preference.
3. For reference, the standard pattern above can also be invoked using;

$ cat after/ftplugin/javascript.vim
let b:match_words = matchup#util#standard_html()