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.28k stars 26 forks source link

me() does not work as expected with 'synthetic' nodes #48

Closed utrack closed 2 hours ago

utrack commented 2 hours ago

I've ran into a bug earlier today where the me() selector did not work correctly with a synthetic (cloned) node.

You can see the reproduction here: https://jsfiddle.net/1duytq80/3/

Expected result:

"via me()", 1, "is-child"
"via native()", "is-child"

Current result:

"via me()", 1, "is-parent"
"via native()", "is-child"

Thanks for this project btw, apart from this bug I'm having a blast so far as a mostly-backend engineer :)

Full reproduction code in case JSFiddle acts up:

<html>
<head>
<script src="https://cdn.jsdelivr.net/gh/gnat/surreal@main/surreal.js"></script>
</head>
<body>
<script>
{
    let newNode = document.createElement("div");
    me(newNode).addClass("is-parent");

    let child = document.createElement("div");
    me(child).addClass("is-child");

    newNode.appendChild(child);

    gotChild = any(newNode,'.is-child');
    gotChildNative = newNode.getElementsByClassName("is-child");

    console.log("via me()",gotChild.length,gotChild[0].className);
    console.log("via native()",gotChildNative[0].className);
}
</script>
</body>
</html>
utrack commented 2 hours ago

Disregard that, right after filling this in I realized that the element should go in second, not first 😅