Allow me() and any() to pick up previousElementSibling before parentElement.

[figuerom16]

This is a breaking change for people who don't already have their <script> directly below the opening parentElement. It does allow for the ability to pick up void elements like <input>

[ilkiri23]

Maybe instead of changing the current behavior, add the ability to configure it using the data-* attribute on <script>, for example

...
<input />
<script data-me="previous">
me().on('change', (event) => { ... }) // where `me` is input element
</script>

[figuerom16]

@ilkiri23 I'm in favor of anything that lets me get an adjacent element easily. I like mine for simplicity, but yours has a lot more flexibility and won't break people.

I was honestly already under the assumption that LoB meant me() would grab the above sibling element first then parent.

Either way I'll do what @gnat prefers.

[gnat]

It's a really cool idea, bravo @figuerom16 !!!

I'd like to add this too but I gotta give it more thought, because:

• Multiple <script> will break.
• Placement of <script> tags that are swapped in via htmx (or other ajax) etc. become more fragile / less intuitive.

The original idea to work around this (already in surreal!) was to just use the existing start= option. @ilkiri23

<form>
    <input n1 type="date" />
    <script>me('[n1]', me()).styles({"background":"red"})</script>
    <input n2 type="date" />
    <script>me('[n2]', me()).styles({"background":"green"})</script>
</form>

May be a bit verbose- but it's the same strategy used by the companion project css-scope-inline (basically Surreal for <style> tags) If you're using both projects, it's really nice to use the same pattern.

Was also considering adding 2 special textual selectors:

• me('next') / me('prev')
  • Short for nextElementSibling and previousElementSibling
  • Similar to jQuery.
  • Maybe alternate? me(next=1) / me(prev=1)

Of course, open to other suggestions!

[gnat]

Apologies for the edits folks, had to get all the perspective out so we make good long term decisions here.

[figuerom16]

@gnat no worries. Allow me a day to convert a few projects for testing. me('next') / me('prev') is nice looking/easy and breaks no one. I checked the MDN for confirmation :). Alterations are welcome to my code implementation.

I hate that I forgot that some people continuously append <script> in some projects upon response. Instant sibling grabbing would make things worse. (that's something I never thought I'd type out.). I question their sanity. Your project shouldn't break them either other than offer them psychological help.

For your me('[n1]', me()) please don't. I have very limited brain capacity. That's not easy for someone like me. I'm already doing datatables with your code and it's great. Your suggestion for chaining is nice on #14 but I don't think very important since we are already very happy devs with the current LoB.

https://gitlab.com/figuerom16/basic/-/blob/main/views/admin.html I'll be converting this first.

[gnat]

Cool, glad you like me('next') / me('prev') I like it too!

I'll push out the patch shortly if there's no further refinements of ideas.

https://gitlab.com/figuerom16/basic/-/blob/main/views/admin.html I'll be converting this first.

Lovely, always great to see more sites using Surreal.

[figuerom16]

If you're implementing it then feel free to shut this PR down. You are my unsung hero mate.

[figuerom16]

I'm dyslexic. Thank you for merging my PR.

[gnat]

Latest version of Surreal (1.1.5) has this feature, feel free to try it out @figuerom16 @ilkiri23

me('-') or me('prev') or me('previous') are all valid shortcuts for me(document.currentScript.previousElementSibling)

Inspired by the CSS "adjacency" selector (+) but in reverse, so: -

See the docs: https://github.com/gnat/surreal?tab=readme-ov-file#-conventions--tips

Couldn't do + or next because Surreal, just like normal Javascript, invokes before that part of the DOM loads, so it was left out.

[figuerom16]

Works perfectly thank you!