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

  1. 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
  2. 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.
  3. 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.
1

There are 1 best solutions below

0
On

Insights & Solution (EDIT - April, 25)

  • If I got it, the method sort compare only 2 adjacents items, not each item with every item.
  • The $store is loaded with different order in each browser when calling sort, so the 2 adjacents 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.