<script>

import { projectStore, compare, mergeSort } from './store.js';

$: sortedGroups = $projectStore.sort(compare);

$: mergeSortGroups = mergeSort([...$projectStore]);

</script>

<div>

<h1>

Context

</h1>

<ul>

<li>I'm using a store to update other components/pages and get reactivity, and later I'll persist it on localStorage. </li>

<li>That store has an array of objects.</li>

<li>The objects has properties that represent dependencies and if a group is risky.</li>

<li>The store has a custom sort to deal with those properties.</li>

</ul>

<h1>

Problems

</h1>

<ol>

<li>Sorting a store with objects is working differently on Firefox 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 to sort. You can check the file store.js</li>

<li>When check a group, 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.</li>

<li>On Firefox, when you check group-6, it's reordered, but when you uncheck, it doesn't come back to previous order.</li>

<li>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.</li>

<li>On chrome the same list that appears on the server is preserved on the client side.</li>

</ol>

<h1>

Question

</h1>

<ul>

<li>How to solve that?</li>

</ul>

<h1>Insights</h1>