Context
- I'm using Svelte and SvelteKit in a project.
- I'm using a store to update other components/pages and get reactivity, and later I'll persist it on localStorage.
- That store has an array of objects.
- The objects has properties that represent dependencies and if a group is risky.
- The store has a custom sort to deal with those properties.
Problems
- Sorting a store with objects is working differently on Firefox 99.0 (64-bit) and Chrome. Check it working on these browsers and see the sorting data in the console of the repl shared below. I'm using a custom compare function to sort. You can check it in the file store.js
- When I check a group (item), the sorting seems not working properly. AFAIK, related to data, group-6 should be before group-2, because group-2 depends on group-6, but on Firefox 99.0 (64-bit) it isn't the case.
- On Firefox, when you check and update group-6, it's reordered in the first example of sorting, but when you uncheck, it doesn't come back to previous order.
EDIT:
- Running the code on my machine, I see the sorted list blink and change the order on the Firefox. And I notice that when I log the sorted list on the console, it appears sorted correctly on the console of the server, but on the browser it appears unordered.
- On chrome the same list that appears on the server is preserved on the client side.
Question
How to solve these problems?
See this repl with the code and result
Link: https://svelte.dev/repl/ac9e11a77c4e44eb9dc4d168402783c7?version=3.47.0
Insights & Solution (EDIT - April, 25)
- If I got it, the method sort compare only 2 adjacent items, not each item with every item.
- The $store is loaded with different order in each browser when calling sort, so the 2 adjacent items are different.
- Maybe if I ensure the $store is loaded with the items in the same order before I call sort, the output can be the same.
- But, I needed to compare each item with every item, so I preferred to create another kind of sort method: merge sort.
Insights & Solution (EDIT - April, 25)