Best practice subscription/observable in sveltekit

[tobiasBora]

I've been a happy Dexie user but I'm now interested in pouchdb for it's easy synchronisation with an external database. But I struggle to understand how I should use it with sveltekit (svelte 5 ideally). This old document https://pouchdb.com/2015/02/28/efficiently-managing-ui-state-in-pouchdb.html mentions quite complicated ways to deal with states (I never needed to implement my own binary search in dexie!), and the fact that I need to use multiple functions to fetch the data a first time before handling changes is quite tedius. So what would be the recommended equivalent of Dexie's code?

<script>
  import { liveQuery } from "dexie";
  import { db } from "./db";

  let friends = liveQuery(
    () => db.friends.toArray()
  );

</script>
<ul>
  {#if $friends}
    {#each $friends as friend (friend.id)}
      <li>{friend.name}, {friend.age}</li>
    {/each}
  {/if}
</ul>

[SourceR85]

Hi, I guess you've set up the PouchDB instance in "./db" (I do it similar) and you're familiar with Svelte 5 runes.
(I've no exp. with dexie, but I use PouchDB and Svelte 5/kit 2 in production)

Since you have just a listener for a collection, it's very straight forward:

<script>
  import { db } from "./db";
  import { onDestroy } from 'svelte';

  let friends = $state([]);
  const friendSelector = { kind: 'friend' };

  // Fill friends array
  db.find({ selector: friendSelector })
    .then(result => { friends = result.docs });

  // wait and apply changes to friends array
  let listener = db.changes({
    live: true,
    since: 'now',
    selector: friendSelector
  })
    .on('change', (change) => {
      // search for a known friend
      const i = friends.findIndex((v) => v._id === change.id)
      // is it deleted and in the array?
      if (change.deleted && i > -1)
        // remove it
        friends.splice(i, 1);
      // is it in the array, has a doc and the doc has a higher revision?
      else if (i > -1 && change.doc && change.doc._rev > friends[i]._rev)
        // replace it with the new doc
        friends[i] = change.doc;
      // if it's an unknown doc:
      else if (!change.deleted && change.doc)
        // append it
        friends.push(change.doc);
    })
    .on('complete', (info) => {
      console.warn('live listener exited', info);
      friends = [];
    })
    .on('error', (err) => {
      console.error("something's wrong with your friends", err);
      friends = [];
    });

  // clean up
  onDestroy(() => {
    listener.cancel();
  });
</script>

<ul>
  {#each friends as friend (friend.id)}
    <li>{friend.name}, {friend.age}</li>
  {:else}
    <li>no friends found</li>
  {/each}
</ul>

[tobiasBora]

Thanks a lot for your example… With this level of verbosity, I might stick with Dexie then, if only Dexie was proposing an open source synchronization solution ^^' Even if it might be possible to create an observable out of your code, I guess some non-trivial changes need to be made to make it more resilient, so that the sorting is preserved (here a new element is added at the end of the list, but it fact it would need to be added at the right position based on some sorting compatible with the one used in db.find). I find it quite sad that observable are not supported upstream, so I created an issue in #9072, hopefully they will provide a cleaner Dexie-like solution.

[SourceR85]

Sure, I've never sorted anything, but that has a reason:
on which criteria should be sorted?
To make it simple: the business logic is your responsibility.

In svelte 5, one of the "right" ways is to use derive runes:

let sortedFriends = $derive(friends.toSorted((a, b) => {
  let byName = a.name.localeCompare(b.name);
  return (byName !== 0) ? byName : a._id.localeCompare(b._id);
));

then iterate (in the each loop) over sortedFriends