surround for TSX generic tags

[emmanueltouzery]

Contributing guidelines

• I have read CODE_OF_CONDUCT.md

Module(s)

mini.surround

Question

mini.surround supports 'tags', which works great also for JSX (including the <></> empty tag which is a thing in JSX).

However it seems TSX generic components are not recognized as 'tags'. For instance, see:
https://mariusschulz.com/blog/passing-generics-to-jsx-elements-in-typescript

If I just modify a little that example...

function Form() {
  // ...

  return (
    <Select<string>
      options={targets}
      value={target}
      onChange={setTarget}
    >
     <Item key="1" />
     <Item key="2" />
    </Select>
  );
}

Now if I put the cursor before the <Item key="1" />, on that line, and type srt, i would like for surround to realize I'm talking about the Select tag. Ideally it would then allow me to replace the whole Select<string> of the start tag, and the Select of the end tag. Same for sdt and so on.

I do realize it's a bizarre syntax and really a torture test... But it's a real use-case so I thought I'd ask.

I imagine this could be sorted out using custom surroundings, and maybe using treesitter, or a regex. I tried a little, but didn't make it quickly. If noone answers and I manage to make it work, i'll paste my solution here, but i'll be grateful if someone beats me to it :)

[echasnovski]

I am afraid, this is a too complicated use case for built-in t because it uses Lua patterns. Account for a Select<string> as a tag name is very not trivial with the Lua pattern surrounding specification (because it needs to "know" that > after string does not close the tag).

As always the case with tag surrounding and textobject, the suggestion is to use tree-sitter to define them. This might or might not require writing custom tree-sitter queries, which is not trivial.

Now if I put the cursor before the <Item key="1" />, on that line, and type srt, i would like for surround to realize I'm talking about the Select tag. Ideally it would then allow me to replace the whole Select<string> of the start tag, and the Select of the end tag. Same for sdt and so on.

I am pretty sure that sdt deleting only Select<string> in opening tag and Select in closing tag is expected. This will lead to something like <options={targets} ... > ... </> which is probably not what is usually the goal. The sdt arguably needs to delete the whole left+right tag pair and preserve only inside the tag.

As both "delete" and first step of "replace" share the logic of finding the target region, it is not possible to achieve this with a single surrounding. There has to be separate tag and tag_name surrounding. For example:

• Reference text <tag kind="val">Text</tag>
• The tag surrounding would match <tag kind="val"> on left and </tag> on right.
• The tag_name surrounding would match tag on left and tag on right.

---

Here is my attempt on enabling this kind of behavior for tsx files using tree-sitter (make sure to use 'nvim-treesitter' on main branch):

• Create a file '~/.config/nvim/after/queries/tsx/textobjects.scm' with the following content (Edit: this comment contains better queries):

  ; extends
  
  (jsx_element
    open_tag: (_)
    (_)+ @tag.inner ; Capture everything between open and close tag
                    ; This works because 'mini.surround' computes matching
                    ; region based on all captures: from the start of the leftmost
                    ; one to the end of the rightmost one (i.e. union of regions).
    close_tag: (_)) @tag.outer
  
  ; For @tag_name.inner + @tag_name.outer pair to work with 'mini.surround', they
  ; need to capture so that the different between them is left and right tag name.
  ; So something like this:
  ; - `@tag_name.inner` should capture everything to the right of left tag name
  ;   up until the start of the right tag name (including `</`).
  ;   In the query this is done by making multiple captures, which works because
  ;   'mini.surround' matches a region based on their union.
  ; - `@tag_name.outer` should capture `@tag_name.inner` PLUS left and right names.
  (
   (jsx_element
      open_tag: (jsx_opening_element
        name: (identifier) @tag_name.outer ; Match the tag name (e.g., Select), but DO NOT capture it
        (_)* @tag_name.inner; Match and capture everything else after tag name
      )
      (_)+ @tag_name.inner ; Match everything inside
      close_tag: ( jsx_closing_element
        (_)* @tag_name.inner; Match and capture everything before tag name
        name: (identifier) @tag_name.outer
      )
    )
    (#offset! @tag_name.inner 0 0 0 2) ; Extend inner capture by 2 to the right
                                       ; to also match `</`
  )

• Use the following 'mini.surround' setup:

  local ts_input = require('mini.surround').gen_spec.input.treesitter
  require('mini.surround').setup({
    custom_surroundings = {
      -- Use tree-sitter to search for function call
      t = {
        input = ts_input({ outer = '@tag.outer', inner = '@tag.inner' }),
      },
      T = {
        input = ts_input({ outer = '@tag_name.outer', inner = '@tag_name.inner' }),
        output = function()
          local tag_name = MiniSurround.user_input('Tag name')
          return { left = tag_name, right = tag_name }
        end,
      },
    },
  })

Now sdt will delete/find/highlight the whole tag correctly.

The srTT works in limited cases, but my tree-sitter querying knowledge is limited here, I am afraid.

Let's hope there will be an improvement in this area with time.

[emmanueltouzery]

well, i actually managed to migrate way faster than i thought! i was pessimistic due to the number of errors but in the end it went quite well. However I'm still getting the same error than on the master branch 🤔

E5108: Error executing lua ...4-0.11.4/share/nvim/runtime/lua/vim/treesitter/query.lua:648: #offset! does not support captures on multiple nodes
stack traceback:
[C]: in function 'assert'
...4-0.11.4/share/nvim/runtime/lua/vim/treesitter/query.lua:648: in function 'handler'
...4-0.11.4/share/nvim/runtime/lua/vim/treesitter/query.lua:909: in function '_apply_directives'
...4-0.11.4/share/nvim/runtime/lua/vim/treesitter/query.lua:1104: in function '(for generator)'
...te/pack/packer/start/mini.surround/lua/mini/surround.lua:1589: in function 'get_match_ranges_builtin'
...te/pack/packer/start/mini.surround/lua/mini/surround.lua:1561: in function 'range_pair_querier'
...te/pack/packer/start/mini.surround/lua/mini/surround.lua:1062: in function 'res'
...te/pack/packer/start/mini.surround/lua/mini/surround.lua:1313: in function 'get_surround_spec'
...te/pack/packer/start/mini.surround/lua/mini/surround.lua:839: in function <...te/pack/packer/start/mini.surround/lua/mini/surround.lua:837>

However @TheLeoP 's version seems to work.

Then there is the sad followup question, what if I want to keep the attributes 🙃 [i'm terribly sorry]
I'm otherwise using #1293 (comment) for that purpose.

[emmanueltouzery]

ah yes TT is to keep the attributes! works great!

[emmanueltouzery]

sorry, yet another question. any way that I can say "use this version for TSX files, and that one for eg XML files"?

i'd "override" only for TSX files, as then it doesn't work on eg XML files anymore.

[echasnovski]

What versions do you mean here? If queries, then they should already be separated by putting them in a specially named files (queries/tsx/textobjects.scm and queries/<other-lang>/textobjects.scm).

If you want to adjust surroundings based on the language, then you can use buffer-local configs. Here is an example from MiniMax.

[emmanueltouzery]

Thank you, that's exactly what I needed 👍

[TheLeoP]

A query for tag_name that doesn't require the offset directive is

(jsx_element
  open_tag: (jsx_opening_element
    name: (identifier) @tag_name.outer
    (_)* @tag_name.inner
    ">" @tag_name.inner)
  _+ @tag_name.inner
  close_tag: (jsx_closing_element
    "</" @tag_name.inner
    (_)* @tag_name.inner
    name: (identifier) @tag_name.outer))

I also played with queries for a self closing tag

(jsx_self_closing_element) @tag.outer

(jsx_self_closing_element
  (jsx_attribute)+ @tag.inner)

and

(jsx_self_closing_element
  name: (_) @tag_name.outer
  (_)* @tag_name.outer @tag_name.inner)

But, in both cases, for tag_name the difference between the inner and outer regions do not include possible trailing whitespace after the tag name, which may result in a malformed tag name unless a space is inserted. (There's also the need to special case the output of the self closing tag to return "" as the right side of the surrounding).

[emmanueltouzery]

thank you! your version works for me, with the other version the offset directive gives me trouble :)

although even then I asked a followup question about keeping the attributes.

EDIT: ah yes TT is to keep the attributes! works great!

[echasnovski]

Another alternative you mentioned is a more concise one, which I think I like more:

(jsx_element
  open_tag: (jsx_opening_element
    name: (identifier) @tag_name.outer
    _* @tag_name.inner)
  _+ @tag_name.inner
  close_tag: (jsx_closing_element
    _* @tag_name.inner
    name: (identifier) @tag_name.outer))