Support observable for easy integration in sveltekit/react/vuejs/…

[tobiasBora]

The popularity of React and similar tools (svelte, vuejs…) show how one can elegantly code with reactive data, i.e. changing a variable automatically update the DOM accordingly… and I'd love to do that with PouchDb. Alternatives like Dexie.js already provide such things like:

<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>

and unfortunately I can't find such elegant one-line solution in PouchDb. The best alternative that was proposed to me involves a combinaison of db.find to first populate $friends followed by db.changes and some complex code to decide what to do based on the change… but this is not only really verbose (like 26 lines instead of 1), but also not very resilient, for instance the insertion of the new item is not following the same order as the db.find list, let alone when using custom sorting options etc.

It would be great to provide instead a simple observable (now observable are well standardize and quite framework-independent), so that I can use them for instance in sveltekit.

Also, to be able to use sveltekit with pouchdb, I needed to install the events npm package. Maybe it would be worth mentionning it in the doc.