@zubra/sync 5.7.0 → 5.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zubra/sync",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "description": "Local-first state for Zubra components: 'use collection' keeps a component's state in IndexedDB, across reloads, offline, and in step across tabs.",
   "type": "module",
   "main": "./src/index.js",
@@ -32,7 +32,7 @@
     "test:binary": "ZUBRA_SYNC_BACKEND=binary node --test test/browser.test.js"
   },
   "peerDependencies": {
-    "@zubra/runtime": "^5.7.0"
+    "@zubra/runtime": "^5.8.0"
   },
   "devDependencies": {
     "@zubra/compiler": "file:../compiler",

package/src/connect.js

@@ -36,15 +36,22 @@ function clock(client) {
  * server has it, exactly those changes leave (`done`): by identity, not by count, so a change
  * added while an earlier push was out is never dropped by it. Two pushes can overlap (the debounce
  * and the poll loop); this is why that's safe.
+ *
+ * It keeps one change per field: a newer one replaces what's waiting for the same field (this
+ * device's later write wins anyway), so hours of typing offline wait as one change per field,
+ * not one per keystroke, and still fit in localStorage.
  */
 export function outboxOf(changes = [], persist = () => {}) {
-  let pending = changes;
+  const same = (a, b) => a.collection === b.collection && a.key === b.key && a.field === b.field;
+  let pending = [];
+  for (const change of changes) pending = [...pending.filter((other) => !same(other, change)), change];
   return {
     get size() {
       return pending.length;
     },
     pending: () => pending.slice(),
     add(change) {
+      pending = pending.filter((other) => !same(other, change));
       pending.push(change);
       persist(pending);
     },
@@ -84,13 +91,25 @@ export function connect({ url = '/_zb/sync', interval = 2000, live = true, webrt
   const outbox = outboxOf(JSON.parse(remember('zubra-sync:outbox', () => '[]')), (pending) =>
     keep('zubra-sync:outbox', JSON.stringify(pending)));
 
+  // This device's stamps, kept here the moment a field is edited. Storing them beside the document
+  // takes an await, and a change from elsewhere merged in that time must still lose to them.
+  const mine = new Map(); // JSON [collection, key] → { field: clock }
+  const newest = (a, b) => (a && (!b || a > b) ? a : b);
+  const own = ({ collection, key, field, clock: stamp }) => {
+    const id = JSON.stringify([collection, key]);
+    if (!mine.has(id)) mine.set(id, {});
+    mine.get(id)[field] = newest(stamp, mine.get(id)[field]);
+  };
+
   // Local writes: stamp each field, remember the stamp beside the document, queue it.
   const off = onWrite(async (collection, key, fields) => {
     const stamped = {};
     for (const [field, value] of Object.entries(fields)) {
       const stamp = clocks.tick();
       stamped[field] = stamp;
-      outbox.add({ collection, key, field, value, clock: stamp });
+      const change = { collection, key, field, value, clock: stamp };
+      own(change);
+      outbox.add(change);
     }
     const doc = (await currentStore().get(collection, key)) ?? {};
     await currentStore().set(collection, key, { [CLOCKS]: { ...doc[CLOCKS], ...stamped } });
@@ -145,17 +164,21 @@ export function connect({ url = '/_zb/sync', interval = 2000, live = true, webrt
       if (!byDoc.has(id)) byDoc.set(id, []);
       byDoc.get(id).push(change);
     }
-    for (const changes of byDoc.values()) {
+    for (const [id, changes] of byDoc) {
       const { collection, key } = changes[0];
       const doc = (await currentStore().get(collection, key)) ?? {};
+      // What's stored, and what this device has stamped since that may not be stored yet.
       const known = { ...doc[CLOCKS] };
+      for (const [field, stamp] of Object.entries(mine.get(id) ?? {})) known[field] = newest(stamp, known[field]);
       const fields = {};
       for (const change of changes) {
         if (known[change.field] && known[change.field] >= change.clock) continue;
         known[change.field] = change.clock;
         fields[change.field] = change.value;
       }
-      if (Object.keys(fields).length) await receive(collection, key, { ...fields, [CLOCKS]: known });
+      // An edit made here while the change was being stored still wins on screen.
+      const stillNewer = (field) => field === CLOCKS || !(mine.get(id)?.[field] > known[field]);
+      if (Object.keys(fields).length) await receive(collection, key, { ...fields, [CLOCKS]: known }, stillNewer);
     }
     // Never move the cursor back (a live backlog can arrive after a newer push), unless the server
     // says this device's cursor was past the end of its log: then it starts over from what it sent.
@@ -222,8 +245,30 @@ export function connect({ url = '/_zb/sync', interval = 2000, live = true, webrt
   const loop = setInterval(() => flush().then(() => (open ? undefined : pull())), interval);
   const online = () => flush().then(pull);
   addEventListener('online', online);
+  // What's still waiting to be sent is newer than what's stored wherever the store says otherwise:
+  // a tab that closed with writes queued can leave the stored value behind the outbox.
+  async function replay() {
+    const byDoc = new Map();
+    for (const change of outbox.pending()) {
+      const id = JSON.stringify([change.collection, change.key]);
+      byDoc.set(id, [...(byDoc.get(id) ?? []), change]);
+    }
+    for (const changes of byDoc.values()) {
+      const { collection, key } = changes[0];
+      const doc = (await currentStore().get(collection, key)) ?? {};
+      const known = { ...doc[CLOCKS] };
+      const fields = {};
+      for (const change of changes) {
+        if (known[change.field] && known[change.field] >= change.clock) continue;
+        known[change.field] = change.clock;
+        fields[change.field] = change.value;
+      }
+      if (Object.keys(fields).length) await receive(collection, key, { ...fields, [CLOCKS]: known });
+    }
+  }
+
   // Components wait for this first pull before applying what's stored (index.js: fresh first).
-  const first = flush().then(pull);
+  const first = (applying = applying.then(replay).catch(() => {})).then(flush).then(pull);
   startingPull(first);
   first.then(listen);
   return {

package/src/index.js

@@ -39,11 +39,15 @@ const theStore = () => (store ??= typeof indexedDB === 'undefined' ? memoryStore
 const writers = new Set();
 /** @internal Called with `(collection, key, fields)` on each local save. */
 export const onWrite = (fn) => (writers.add(fn), () => writers.delete(fn));
-/** @internal A change from elsewhere: store it, and show it in this tab and the others. */
-export async function receive(collection, key, fields) {
+/**
+ * @internal A change from elsewhere: store it, and show it in this tab and the others. `keep(field)`
+ * is asked again before showing it: a field edited here while it was being stored isn't shown.
+ */
+export async function receive(collection, key, fields, keep = () => true) {
   await theStore().set(collection, key, fields);
-  deliver(collection, key, fields, null);
-  channel?.postMessage({ collection, key, fields });
+  const shown = Object.fromEntries(Object.entries(fields).filter(([field]) => keep(field)));
+  deliver(collection, key, shown, null);
+  channel?.postMessage({ collection, key, fields: shown });
 }
 /** @internal The store in use. */
 export const currentStore = () => theStore();

package/src/server.d.ts

@@ -23,8 +23,11 @@ export function memoryLog(options?: { keep?: 'all' | 'latest' }): Log;
 export interface Documents {
   /** A document's fields (a copy), or undefined when nothing has been written to it. */
   get(collection: string, key: string): Record<string, unknown> | undefined;
-  /** Every document in a collection, each with its key. */
-  all(collection: string): Array<{ key: string } & Record<string, unknown>>;
+  /**
+   * Every document in a collection whose key starts with `prefix` (all of them by default), each
+   * with its key, in the order they were first written to.
+   */
+  all(collection: string, prefix?: string): Array<{ key: string } & Record<string, unknown>>;
   /** The collections that have documents, in the order they were first written to. */
   collections(): string[];
 }

package/src/server.js

@@ -145,8 +145,14 @@ export function documentsView({ find, list, names }) {
       const fields = find(collection, key);
       return fields && structuredClone(fields);
     },
-    /** Every document in a collection: `[{ key, ...fields }]`. */
-    all: (collection) => list(collection).map(({ key, fields }) => ({ key, ...structuredClone(fields) })),
+    /**
+     * Every document in a collection whose key starts with `prefix` (all of them by default):
+     * `[{ key, ...fields }]`, in the order they were first written to.
+     */
+    all: (collection, prefix = '') =>
+      list(collection)
+        .filter(({ key }) => key.startsWith(prefix))
+        .map(({ key, fields }) => ({ key, ...structuredClone(fields) })),
     /** The collections that have documents, in the order they were first written to. */
     collections: () => names(),
   };