Open lumosminima opened 9 months ago
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!
@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.
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.
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 ❤️