How can I invoke functions responsively inside html markup?

[CNSeniorious000]

I want to run some function based on the state inside a large {#each} block, so the responsive values are not accessible in the component's <script> tag.

Here is how I implement it for now:

{#each parent.children as item}
...
  <Command.Item let:focused>
    <!-- eslint-disable-next-line no-unused-vars -->
    {@const _ = (browser && focused && preloadData(item.href))}
    <a href={item.href}>
      {item.text}
    </a>
  </Command.Item>
...
{/each}

In the example above, the focused is a mutable state. I want to preload for the focused anchor element. I can't think of another way to do this.

I really wonder how I can implement this more elegantly.

If you find the example above a bit confusing, in fact it is a minified example from here.

[brunnerh]

Can't you use the onSelect event, or is that for clicking rather than highlighting?

(Something like this should be done via events, so if there is none, I would recommend opening an issue in cmdk-sv about it.)

[CNSeniorious000]

Thanks for answering! I created huntabyte/cmdk-sv#95 for this.

1. Yes, onSelect is for clicking (or the Enter key), and there is no event for highlighting. I do agree this cmdk-sv should improve this on their side.
2. Wrapping this with events will cause we have to access the payload with .detail, which is wasting for me. I think events should be used when the DOM structure matters, otherwise a callback as prop is elegant enough.

Finally, if they really added a onHighlight callback, the ugly {@const _ = ... && ...} hack can be removed.

But I still think adding a primitive to solve this is useful too. Because watching a temporal value in a {@each} block is usual for me. I don't want to write a .svelte file for every this use case.

Proposal

Add a {@run ...}, which will be compiled just like {@const _ = ...}

Alternative

Add a {@ ... } and allow any statements/expressions inside, so that {@const ... } is just a special case of it.

Because this won't touch anything with the responsive system, so I think it's easy to implement.

[brunnerh]

I doubt that this is a common problem and don't remember ever running into this myself.
Besides using events, there might also be other patterns to avoid this situation.

[7nik]

I personally probably would used action here with focused param.