Feedback on default "start" value of `me` and `any` #45

san4d · 2024-10-02T15:31:30Z

san4d
Oct 2, 2024

Currently, Surreal uses the document object as the query root when no starting point is passed to either me or any (ex. me()). Since the theme of the library is colocation, this default caught me by surprise. To scope the script when using child selectors, I had to capture a root variable with me() and then use me(selector, root) inside the script. While this works, I see it becoming a repeated pattern and worth thinking through if/how the
currentScript.parentElement should be the default.

Here's a minimal example that shows scoping to a "component" (the divs with ids):

<body>
    <div id="1">
        <h1>Should be unstyled and have no listeners</h1>
        <div>The button has been clicked <span>0</span> times.</div>
        <button>Button</button>
    </div>
    <div id="2">
        <h1>Should be styled and have listeners</h1>
        <div>The button has been clicked <span>0</span> times.</div>
        <button>Button</button>
        <script>
            const root = me();
            me("button", root).on("click", (e) => {
                me("span", root).innerText =
                    parseInt(me("span", root).innerText) + 1;
            });
        </script>
        <style>
            me {
                display: flex;
                flex-direction: column;
                gap: 1rem;
            }
            me h1 {
                color: green;
                margin-bottom: 0px;
            }
            me button {
                width: fit-content;
            }
        </style>
    </div>
</body>

Relatedly, I started experimenting with Surreal along side your css-scope-inline library. In the css library, me refers to the parent of the style element, which makes sense. Having Surreal use currentScript.parentElement would match this behavior.

Happy to discuss and brainstorm ideas. I figured I'd ask here first to understand the design decision.

gnat · 2024-10-13T08:16:13Z

gnat
Oct 13, 2024
Maintainer

Thanks for your thoughts and feedback.

As you've mentioned, the current best practice is to use:

<body>
    <div>
        <button>Button</button>
        <script>
            me("button", me()).on("click", (e) => { alert("button was clicked") })
        </script>
    </div>
</body>

Next version of Surreal will very likely add relative chained versions of me() and any(). So you can just keep chainin' intuitively ⛓️ Example...

<body>
    <div>
        <button>Button</button>
        <script>
            me().me("button").on("click", (e) => { alert("button was clicked") })
        </script>
    </div>
</body>

Also will likely be adding an alias for parentElement, so you can reach back up the DOM tree without typing so much. Considering parent() or up()

Example...

me().parent().parent().send("open")

...or Example...

me().up().up().send("open")

Will fire an event called "open", from 2 parents up the tree.

The equivalent in non-surreal JS:

let ev = new CustomEvent("open", { bubbles: true })
currentScript.parentElement.parentElement.parentElement.dispatchEvent(ev)

Thoughts and feedback appreciated!

Always starting relative to the parent element was considered many times in the past- root was kept as document so it wasn't such a major departure from jQuery- At this point I'm hesitant to break backwards compatibility- but I feel like me().me('foo') is a fair compromise.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feedback on default "start" value of `me` and `any` #45

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Feedback on default "start" value of me and any #45

san4d Oct 2, 2024

Replies: 1 comment

gnat Oct 13, 2024 Maintainer

Feedback on default "start" value of `me` and `any` #45

san4d
Oct 2, 2024

gnat
Oct 13, 2024
Maintainer