typescriptreact support

[Andilutten]

The tagbar doesnt work with .tsx files. Is there any workarounds ?

let g:tagbar_type_typescript = {                                                  
  \ 'ctagsbin' : 'tstags.js', 
  \ 'ctagsargs' : '-f-',                                                           
  \ 'kinds': [                                                                     
    \ 'e:enums:0:1',                                                               
    \ 'f:function:0:1',                                                            
    \ 't:typealias:0:1',                                                           
    \ 'M:Module:0:1',                                                              
    \ 'I:import:0:1',                                                              
    \ 'i:interface:0:1',                                                           
    \ 'C:class:0:1',                                                               
    \ 'm:method:0:1',                                                              
    \ 'p:property:0:1',                                                            
    \ 'v:variable:0:1',                                                            
    \ 'c:const:0:1',                                                              
  \ ],                                                                            
  \ 'sort' : 0                                                                    
\ }  

[tehdb]

any news on that?

[alerque]

@tehdb, @Andilutten, or anybody — please feel free to contribute this as a PR.

(See issue 549 if you are wondering about the late action here! Hopefully we can work through some backlog.)

[alerque]

Just a note, since this issue was opened both Vim and Neovim have both added official support for React based file types with their own file type monikers: javascriptreact and typescriptreact. This will be relevant to anybody who tried to implement this and submit a PR because those are the filetypes we should use now.

[mrboli]

@alerque what's required to do this?

Is it just defining the type typescriptreact and then creating some kinds that would match up with a tag generator? I'm still a big confused as to how this works, apparently tagbar doesn't look at the tags file?

Would love some help, I'd be willing to take a crack at this.

[tsonge]

I'm facing the same issue. I followed the instruction on https://github.com/majutsushi/tagbar/wiki#typescript and it works fine with .ts files, just not with .tsx files, even though running tstags myfile.tsx manually produces the appropriate tags file.

Following the instructions in :h tagbar-issues for debugging, it seems like there is no tagbardebug.log.ctags_out file produced, unlike in the plain .ts case.

[joshfrench]

I'm taking a stab at this and running into an issue with integrating tstags, which seems to have much more accurate output than uctags.

I've added the following to autoload/tagbar.vim:

    " Use tstags if available
    let tstags = s:CheckFTCtags('tstags', 'typescript')
    if tstags !=# ''
        call tagbar#debug#log('Detected tstags, overriding typedef')
        let type_ts = tagbar#prototypes#typeinfo#new()
        let type_ts.cstagstype = 'typescript'
        let type_ts.kinds = [...]
        let type_ts.cstagsbin = tstags
        let type_ts.ctagsargs = '-f -'
        let type_ts.ftype = 'typescript'
        call type_ts.createKinddict()
        let s:known_types.typescript = type_ts
    endif

Running tagbar on a .ts file, I see the following in the debug log:

...
Detected tstags, overriding typedef
...
typeinfo for file to process: {'ftype': 'typescript', 'kinddict': {'p': 0, 'c': 10, 'C': 4, 't': 7, 'f': 3, 'v': 2, 'I': 9, 'i': 5, '?': 11, 'm': 1, 'M': 8, 'e': 6}, 'sro': '.', 'createKinddict': function('<SNR>126_createKinddict'), 'getKind': function('<SNR>126_getKind'), 'kinds': [{'short': 'p', 'long': 'property', 'fold': 0, 'stl': 1}, {'short': 'm', 'long': 'method', 'fold': 0, 'stl': 1}, {'short': 'v', 'long': 'variable', 'fold': 0, 'stl': 1}, {'short': 'f', 'long': 'function', 'fold': 0, 'stl': 1}, {'short': 'C', 'long': 'class', 'fold': 0, 'stl': 1}, {'short': 'i', 'long': 'interface', 'fold': 0, 'stl': 1}, {'short': 'e', 'long': 'enum', 'fold': 0, 'stl': 1}, {'short': 't', 'long': 'typealias', 'fold': 0, 'stl': 1}, {'short': 'M', 'long': 'module', 'fold': 0, 'stl': 1}, {'short': 'I', 'long': 'import', 'fold': 0, 'stl': 1}, {'short': 'c', 'long': 'const', 'fold': 0, 'stl': 1}, {'short': '?', 'long': 'unknown', 'fold': 0, 'stl': 1}], 'kind2scope': {'?': 'unknown'}, 'ctagsargs': '-f -', 'scope2kind': {}, 'cstagsbin': 'tstags', 'cstagstype': 'typescript'}
...
ctags_bin: /usr/local/bin/ctags
ctags_args (is a string):  -f - 
Escaped ctags command: '/usr/local/bin/ctags'  -f -  '/var/folders/xs/w3368c3x4731z3_8h4jyczs00000gp/T/nvimVc7fDd/9.ts'
Executing ctags command: '/usr/local/bin/ctags'  -f -  '/var/folders/xs/w3368c3x4731z3_8h4jyczs00000gp/T/nvimVc7fDd/9.ts'
Executing command: "'/usr/local/bin/zsh' '-c' ''/usr/local/bin/ctags'  -f -  '/var/folders/xs/w3368c3x4731z3_8h4jyczs00000gp/T/nvimVc7fDd/9.ts''"
Exit code: 0
Ctags executed successfully

It looks like Tagbar has the correct tstags bin in the file's typeinfo, yet still calls the default ctags bin. I'm not setting g:tagbar_ctags_bin in my Vim init. What am I missing?

[raven42]

Looks like there might be a typo in your code.

let type_ts.cstagsbin = tstags

should be:

let type_ts.ctagsbin = tstags

[joshfrench]

🤦 thanks :)

~~This now works, roughly speaking, for both uctags and tstags. I mostly just used existing examples or fell back to the JS definitions. Can I get a TL;DR on what sro, kind2scope, scope2kind, fold and stl mean in these definitions? Looking at the output, I suspect there's room for improvement.~~ found the docs :P

[alerque]

Hm, I'm not sure this should have been closed by #669. My understanding is that we were covering typescript support in that PR, not typescriptreact. This issue (and many other dups linked to it) are mostly people copying the wiki instructions for typescript and wondering why typescriptreact doesn't work. We now have out of the box support for typescript, but not yet typescriptreact as I understand it. Or am I missing something @raven42? I don't actually work with either filetype!

[raven42]

Hmm... you could be right. I just linked it due to @joshfrench's comment regarding this issue. I was just linking them together, I didn't know it was going to close it out.

[joshfrench]

@alerque That's correct -- this only addresses bare typescript. Is there a way to alias types from within Tagbar? If not I think people will still need to map typescriptreact and friends from ctags.d.

[remko]

Any news on this? Is there a way to alias typescriptreact to typescript?