Svelte 5 Support

[lumosminima]

Svelte 5 will be released sometime this year with the new runes API (Preview Docs) and while stores are not deprecated, $runes will allow you to do all the same things. So, are there plans to eventually support Svelte 5 when it's officially released? I really like this package's ideas and its svelte API compared to the competitors and hope it stays maintained ❤️

[thanhnguyen2187]

Hi! Can you elaborate on how would Svelte 5's runes replace the functionalities of this library? I'm interested because I've been developing an application with Svelte 3 and thinking about upgrading. I've also been considering using this library to simplify my stores' logic. Thanks!

[lumosminima]

@thanhnguyen2187 You should be able to use this library as-is in Svelte 4 and 5. The $stores API: writable(),readable() etc is not deprecated in Svelte 5 but of course it could be in future versions since $runes are the "new" way of doing things and works in both components and JS (using .svelte.js files). I don't usually care about the shiny new stuff but $runes API adds lots of performance improvements regarding reactivity but all of this will probably be under the hood for this lib. One of the things I can see that could become easier is asyncWritable() flow where doing myStore.set(newValue) instantly sets the store value but does a network call afterwards for instant-like experience which is cool! but because myStore is an array of objects (in my case), in $runes I could simply do myStore.push(newObject):

// Adding new array values (Svelte 4 & 3)
let myStore = [];
myStore.push(newValue);
myStore = myStore // Need to trigger reactivity 🫤
// OR
myStore = [...myStore, newValue]

// Adding new array values (Svelte 5)
let myStore = $state([]);
myStore.push(newValue); // fine-grained reactivity 🤯

My backend only sends the updated or new record for efficiency so then I can just myStore.filter().push() again for the backend-validated record and this will allow deep reactivity unless I'm missing something about how this all will work.

[thanhnguyen2187]

Sorry for the late reply, but what I mean was asyncDerived provides a really nice API comparing to a more clunky implementation with "vanilla" store:

// "vanilla" store
async function createCustomVanillaStore() {
  underlyingStore = writable([])
  
  fetch(...).then(underlyingStore.set)

  return underlyingStore
}

// `asyncDerived`
const niceStore = asyncDerived([], async () => { return fetch(...) })

My question is: how would we achieve the same result with runes? Would it be something like:

$derived.by(() => fetch(...).json())

Which is a promise and I think is not as nice.