add flush to remote connection

Author: robin-drexler

.changeset/sour-timers-fail.md

@@ -0,0 +1,5 @@
+---
+'@remote-dom/core': minor
+---
+
+add flush method to BatchingRemoteConnection

packages/core/source/elements/connection.ts

@@ -25,21 +25,28 @@ export class BatchingRemoteConnection {
   }
 
   mutate(records: any[]) {
-    let queued = this.#queued;
+    const queued = this.#queued;
+
+    this.#queued ??= [];
+    this.#queued.push(...records);
 
     if (queued) {
-      queued.push(...records);
       return;
     }
 
-    queued = [...records];
-    this.#queued = queued;
-
     this.#batch(() => {
-      this.#connection.mutate(queued);
-      this.#queued = undefined;
+      this.flush();
     });
   }
+
+  flush() {
+    if (!this.#queued) {
+      return;
+    }
+
+    this.#connection.mutate(this.#queued);
+    this.#queued = undefined;
+  }
 }
 
 function createDefaultBatchFunction() {

packages/core/source/elements/tests/connection.test.ts

@@ -0,0 +1,88 @@
+import '../../polyfill.ts';
+
+import {describe, expect, it, vi, type MockedObject} from 'vitest';
+
+import {BatchingRemoteConnection, RemoteConnection} from '../../elements';
+
+describe('BatchingRemoteConnection', () => {
+  it('batches mutations', async () => {
+    const connection = createRemoteConnectionSpy();
+    const batchingConnection = new BatchingRemoteConnection(connection);
+
+    batchingConnection.mutate([1, 2, 3]);
+    batchingConnection.mutate([4, 5, 6]);
+
+    expect(connection.mutate).not.toHaveBeenCalled();
+
+    await waitForNextTask();
+
+    expect(connection.mutate).toHaveBeenCalledTimes(1);
+    expect(connection.mutate).toHaveBeenCalledWith([1, 2, 3, 4, 5, 6]);
+
+    batchingConnection.mutate([7, 8, 9]);
+
+    expect(connection.mutate).toHaveBeenCalledTimes(1);
+
+    await waitForNextTask();
+
+    expect(connection.mutate).toHaveBeenCalledTimes(2);
+    expect(connection.mutate).toHaveBeenCalledWith([7, 8, 9]);
+  });
+
+  it('flushes mutations', async () => {
+    const connection = createRemoteConnectionSpy();
+    const batchingConnection = new BatchingRemoteConnection(connection);
+
+    batchingConnection.mutate([1, 2, 3]);
+    batchingConnection.flush();
+
+    expect(connection.mutate).toHaveBeenCalledOnce();
+    expect(connection.mutate).toHaveBeenCalledWith([1, 2, 3]);
+
+    await waitForNextTask();
+
+    // ensure it wasn't called again
+    expect(connection.mutate).toHaveBeenCalledOnce();
+    batchingConnection.mutate([4, 5, 6]);
+
+    await waitForNextTask();
+
+    expect(connection.mutate).toHaveBeenCalledTimes(2);
+    expect(connection.mutate).toHaveBeenCalledWith([4, 5, 6]);
+  });
+
+  it('enqueues the batch function only once while items are in the queue', async () => {
+    const connection = createRemoteConnectionSpy();
+    const batch = vi.fn();
+    const batchingConnection = new BatchingRemoteConnection(connection, {
+      batch,
+    });
+
+    batchingConnection.mutate([1, 2, 3]);
+    batchingConnection.mutate([4, 5, 6]);
+    expect(batch).toHaveBeenCalledOnce();
+
+    const batchCallback = batch.mock.calls[0][0];
+    batchCallback();
+
+    batchingConnection.mutate([7, 8, 9]);
+    expect(batch).toHaveBeenCalledTimes(2);
+  });
+});
+
+async function waitForNextTask() {
+  const channel = new MessageChannel();
+  const promise = new Promise((resolve) => {
+    channel.port1.onmessage = resolve;
+  });
+  channel.port2.postMessage(null);
+
+  await promise;
+}
+
+function createRemoteConnectionSpy(): MockedObject<RemoteConnection> {
+  return {
+    mutate: vi.fn(),
+    call: vi.fn(),
+  };
+}