gnat / surreal

🗿 Mini jQuery alternative. Dependency-free animations. Locality of Behavior. Use one element or arrays transparently. Pairs with htmx. Vanilla querySelector() but better!
https://gnat.github.io/surreal/example.html
MIT License
1.2k stars 24 forks source link

Tree Traversal? #4

Closed gazpachoking closed 12 months ago

gazpachoking commented 1 year ago

I'm not fully sure this is a good idea, or there is a nice way to do it. More a discussion point at the moment. I found myself needing to do a bit of modification of parent, child, or sibling elements. Having me() is still nice, but the moment you need to do any tree traversal from there you lose the sugar methods, or end up with some awkward constructs to get them back (or you just go with vanilla js).

I was thinking the sugar call could automatically sugar some attributes like parentElement nextElementSibling and methods like querySelector to make tree traversal chainable while retaining the sugar methods. e.g.

PS: After having written this out, and come up with the examples, I don't mind this syntax and nested me calls as much. The only thing that's weird to me is the use of the name me whenever we provide a selector. It no longer has anything to do with the current location, and is just adding the sugar methods, which makes the me name feel awkward.

gnat commented 12 months ago

The issue here is: Adding that style would require surreal to edit all existing nodes in the DOM (to add surreal chaining), which I'd like us to avoid.

I think this comes down to getting comfortable with the patterns, but feel free to continue the discussion if you feel I'm missing something important!

gazpachoking commented 12 months ago

Yeah, I came to the same conclusion. Adding the me() wrapping is not bad, and after using it some more I sorta like that it's explicit.

That being said, chaining doesn't require editing all the existing nodes in the DOM, it can be done lazily via property descriptors.