Svelte 5 friends, how would you get rid of $effect here: svelte.dev/playground/c... Mainly, the real question is how to deal with async code ? - ThreadSky

jyc.dev • 33 days ago

Svelte 5 friends, how would you get rid of $effect here:
https://svelte.dev/playground/c9e38a0b0bd54c5097e346384d59d8e3?version=5.19.2

Mainly, the real question is how to deal with async code ?

Comments

fcrozatier.bsky.social•33 days ago

Use an input listener with a debounced handler for good measure

https://svelte.dev/playground/c9e38a0b0bd54c5097e346384d59d8e3?version=5.19.2#H4sIAAAAAAAAE21Rsa7UMBD8FWsFkiNCco_XhUv0aCgooKDEFD5nk_jJt7bsTeCI8u8oCRceEoUla3Zm1jOegfQVoYIO2QxCUyuw69Aw5NBZhwmqbzPwLWwc6xDyu-JDCEWa0PGKXXTC_-HGEyNxggrOyUQbWDhNfc2pUaTYXoOPLGbR4sWPZFAsoov-KhQ8dSb6X5otxpLT2wFdwJjKEP3VJkwK3q8G63HIYtJuRFGLV4k1o1QQdLRJQXYnREyj47-Meck2NSk2nhIfL2g_bk3UByDllIm6EfO2b2N7h4XzvVR7bZZ6BbmYsp2xYVLBwBxSVZYRExs_EkeLqTD-Wk6PxUNpdLCsXalAvDm0igsekGSsm1g8J0_yGNxHpm6OMOaYbpclF4-nU_YylidLYVy5El_G-DeuxIJ17JGLrcjdbLdRdC73n1t_jM673cVSW-2lz39WLCLxzWGt4IdteageTqfXCkS5y0LEZv709cvnInG01NvuJvcYuaDRuVy8y5ZzudIUQQ6MPxkqjiMu35ffpNuPl6YCAAA=

jyc.dev•11 days ago

My main point is to get rid of then.then.
Still don't have a good solution. :(

Of course, I'll use a debounced later ;)

sateesh.bsky.social•11 days ago

I'm sure I'm missing something, but why not an async function oninput?

jyc.dev•11 days ago

Here it's one input, but in real apps I'll have multiple inputs

stevealee.bsky.social•33 days ago

You can use template async support forcfinal promise. Also I think https://derived.by works. Finally rune lambda funcs can be async if you object to promise. then()

stevealee.bsky.social•33 days ago

Yeah, async is a little fiddly to integrate with runes/Signals. I seem to recall a better story is on the svelte teams road map as a priority.

jyc.dev•11 days ago

I would love to see what's the best practice for Svelte Only

paolo.ricciuti.me•11 days ago

Just wait a bit more...we are gonna publish a PR soon™️

stevealee.bsky.social•11 days ago

🥳🥳🥳

jyc.dev•11 days ago

WHAT WHAT WHAT?!

TELL ME MORE, TELL ME MORE 😁

jyc.dev•11 days ago

Okay remult admin will stay Svelte 4 for now.

await 👆()
console.log('🚀')

thiagolino8.bsky.social•33 days ago

You can, technically, use $derived
But please, don't

jyc.dev•33 days ago

Hummm, that looks like a lot of lines ! 🤣

It's more for async mechanism, not fetch only (so not abort controller)

thiagolino8.bsky.social•33 days ago

AbortController is for any asynchronous code, not just fetch
Just listen for the abort event
https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal/abort_event

thiagolino8.bsky.social•33 days ago

And you should use AbortController even with an $effect
That's why it's been added to the $effect api
https://github.com/sveltejs/svelte/pull/14753

thiagolino8.bsky.social•33 days ago

But the code using $derived was just a joke, the correct place for reactive asynchronous code (for now) is in $effect

jonathonrp.github.io•33 days ago

https://kettanaito.com/blog/dont-sleep-on-abort-controller

jyc.dev•33 days ago

Great read. Thanks for sharing

jyc.dev•11 days ago

Allowing async...

But will we be able to "await" (and double await for the .json() also)

I think I don't have the right mental model. :(

jyc.dev•33 days ago

Great to see something on this topic!
subscribed

techniq.dev•33 days ago

Personally, I created a `fetchStore()` to handle client-side fetching and is what I use (if `load()` doesn't fit my needs).

I plan to migrate all of `@layerstack/svelte-stores` to Svelte 5 state/runes (as `@layerstack/svelte-state`).

https://github.com/techniq/layerstack/blob/main/packages/svelte-stores/src/lib/fetchStore.ts

techniq.dev•33 days ago

It's especially useful for refreshing and retaining the previous data until the latest is returned.

Also smartly handles mime types, integrates with Svelte context to set common headers (ex. auth), global error handling, and a few other features.

jyc.dev•33 days ago

Yes, might be the right path 👍

I show an example with fetch, but it's generaly async that I don't really know how to handle well.

techniq.dev•33 days ago

There is also a more generic `promiseStore` you mind find helpful, and also others like `timerStore` (setInterval() store basically).

https://github.com/techniq/layerstack/tree/main/packages/svelte-stores/src/lib

jyc.dev•11 days ago

Would be great to see an example in rune mode (even using the store) 😉

Sometime I have some condition before doing the fetch, and then I format the result differently.

techniq.dev•11 days ago

Updated the docs page. Hopefully that helps. I plan to create a runes-based version (in new @layerstack/svelte-state` package)

https://www.layerstack.dev/docs/svelte-stores/fetchStore

jyc.dev•11 days ago

Noice 🚀

in "force: true", you say 👉 ignore cache. But cache is not mentioned anywhere else 🤓

techniq.dev•11 days ago

Remind me on Discord and I’ll uncover one. There is an onDataChange hook where you can process the data off the response before updating the store value, and I leveraged this a bunch for similar situations.

sarcevic.dev•33 days ago

{#await} block is an option
https://svelte.dev/playground/04cfa076e7724b47a6144a919132d2aa?version=5.19.2

jyc.dev•33 days ago

That's an option 👍

Not a big fan tho.

jyc.dev•11 days ago

It still have a then, but it's removing one await.
Maybe I could have another #await to remove all then ?

If you have some condition before the fetch ? Want to cancel ?
If you want to format things differently you wrap the result to a function that goes on top of the file ?

jonathonrp.github.io•33 days ago

I think https://derived.by or effect are the right things for async handling. Also template is effect so if you want to save an effect just use template await syntax. I'm not a big fan either and I forget about it often but unless svelte enables top-level await it's what we got.

jyc.dev•11 days ago

It actually brings some issues :/

It will run multiple times without awaiting. So it's either going into a infinite loop or thing happen not at the right time.

I'm trying to find THE way :)

jonathonrp.github.io•33 days ago

https://svelte.dev/playground/827ca4b339ae4e6ba1cf54816afc3839?version=5.19.2

Posting Rules

Be respectful to others
No spam or self-promotion
Stay on topic
Follow Bluesky's terms of service

Comments

Posting Rules

Reply