Merge pull request #266 from powersync-ja/fix-web-performance

[web] debounce update notifications

Author: rkistner

.changeset/strange-feet-explain.md

@@ -0,0 +1,5 @@
+---
+'@powersync/web': patch
+---
+
+Debounce update notifications to fix performance issue with large amounts of data synced

packages/web/src/db/adapters/wa-sqlite/WASQLiteDBAdapter.ts

@@ -90,16 +90,16 @@ export class WASQLiteDBAdapter extends BaseObserver<DBAdapterListener> implement
 
       this.methods = await dbOpener(this.options.dbFilename);
       this.methods.registerOnTableChange(
-        Comlink.proxy((opType: number, tableName: string, rowId: number) => {
-          this.iterateListeners((cb) => cb.tablesUpdated?.({ opType, table: tableName, rowId }));
+        Comlink.proxy((event) => {
+          this.iterateListeners((cb) => cb.tablesUpdated?.(event));
         })
       );
 
       return;
     }
     this.methods = await _openDB(this.options.dbFilename, { useWebWorker: false });
-    this.methods.registerOnTableChange((opType: number, tableName: string, rowId: number) => {
-      this.iterateListeners((cb) => cb.tablesUpdated?.({ opType, table: tableName, rowId }));
+    this.methods.registerOnTableChange((event) => {
+      this.iterateListeners((cb) => cb.tablesUpdated?.(event));
     });
   }
 

packages/web/src/shared/open-db.ts

@@ -3,6 +3,7 @@ import '@journeyapps/wa-sqlite';
 import * as Comlink from 'comlink';
 import type { DBFunctionsInterface, OnTableChangeCallback, WASQLExecuteResult } from './types';
 import { Mutex } from 'async-mutex';
+import { BatchedUpdateNotification } from '@powersync/common';
 
 let nextId = 1;
 
@@ -26,8 +27,21 @@ export async function _openDB(
    */
   const listeners = new Map<number, OnTableChangeCallback>();
 
+  let updatedTables = new Set<string>();
+  let updateTimer: any = null;
+
+  function fireUpdates() {
+    updateTimer = null;
+    const event: BatchedUpdateNotification = { tables: [...updatedTables], groupedUpdates: {}, rawUpdates: [] };
+    updatedTables.clear();
+    Array.from(listeners.values()).forEach((l) => l(event));
+  }
+
   sqlite3.register_table_onchange_hook(db, (opType: number, tableName: string, rowId: number) => {
-    Array.from(listeners.values()).forEach((l) => l(opType, tableName, rowId));
+    updatedTables.add(tableName);
+    if (updateTimer == null) {
+      updateTimer = setTimeout(fireUpdates, 0);
+    }
   });
 
   /**

packages/web/src/shared/types.ts

@@ -1,4 +1,4 @@
-import type { QueryResult } from '@powersync/common';
+import type { BatchedUpdateNotification, QueryResult } from '@powersync/common';
 
 export type WASQLExecuteResult = Omit<QueryResult, 'rows'> & {
   rows: {
@@ -22,7 +22,7 @@ export type DBWorkerInterface = DBFunctionsInterface;
 
 export type WASQLiteExecuteMethod = (sql: string, params?: any[]) => Promise<WASQLExecuteResult>;
 export type WASQLiteExecuteBatchMethod = (sql: string, params?: any[]) => Promise<WASQLExecuteResult>;
-export type OnTableChangeCallback = (opType: number, tableName: string, rowId: number) => void;
+export type OnTableChangeCallback = (event: BatchedUpdateNotification) => void;
 export type OpenDB = (dbFileName: string) => DBWorkerInterface;
 
 export type SQLBatchTuple = [string] | [string, Array<any> | Array<Array<any>>];