In JSX/TSX is there a way to move up/down XML nodes?

[phuhl]

Maybe I don't find the function that I'd need to call but what I'd love to have is way to move from |<div> to |<p> (i.e. sexp-down?) and the other way round.

const fn = () => {
  return (
    <div className="foo">
      <p>Text</p>
    </div>
  )
}

I only found ways to go forward and backward. Is this supported, yet? If not, could this be implemented? :)

Thanks for this package, cheers

[mickeynp]

Hey there. That's definitely possible, and not just in the jsx nodes: try C-M-d and C-M-u.

[phuhl]

Hey, thanks for the response.

When there are no attributes with ={} in the tag, it seems to work (ish) but with (non string) attributes it behaves very different for me:

|<div className={foo}>
      <p className={bar}>Text</p>
 </div>

C-M-d

<div className=|{foo}>
      <p className={bar}>Text</p>
</div>

C-M-d

<div className={|foo}>
      <p className={bar}>Text</p>
</div>

C-M-d

<div className={foo}|>
      <p className={bar}>Text</p>
</div>

C-M-d

<div className={foo}>
      <p className={|bar}>Text</p>
</div>

[mickeynp]

There are some liberties taken with the definition of moving down. Namely, it tries to mimic the default Emacs behaviour of C-M-d (in the last example anyway) where C-M-d will always jump into the next pair of brackets, regardless of where it is in the structure, if it can't think of anywhere else to go, or if they are closer than another node that is not a direct descendant.

The other liberty is that C-M-d will try its best to always have somewhere to move to. It's not perfect: but the alternative is that you'll wind up entering lots of 'dead ends' in the tree, which is all too easy to do. (Try M-x treesit-explore-mode to see what the tree actually looks like.)

[mickeynp]

I should definitely document this behaviour better though.

[phuhl]

I see. The issue I have in my example from above is, that you don't ever end up with |<p> (i.e. I never end up of the child I wanted to ascend to). Also if you have lot's of attributes, it takes a lot of time and attention to go to the inner tag. Could there maybe be a dedicated function to navigate explicitly sexp (is that the right name for xml tags in this case? 😆) up and down?

[phuhl]

Actually, when I think about it, this is not really limited to XML nodes. It is great to have the behavior as is. But it would be great to also have hierarchical up/down for bigger code structures. I.e.:

• the example from above
• moving into function bodies instead of the params

|const test = (bla) => {
   console.log("test");
};

const test = (bla) => {
  |console.log("test");
};

[phuhl]

Hey, me again. I have been working a lot more on TS React code and I am really missing this feature where I can move inside any XML Tag (with Inside I mean, directly after the opening tag closes) and so on.

I totally get that you time is constrained. Sadly my lisp is not the greatest, but maybe you could point me a bit to where best to implement such a behavior and I could give it a go?

[mickeynp]

Fixed, as this is specifically one of the things the new navigation DSL resolves.