@powersync/web 0.0.0-dev-20250207081035 → 0.0.0-dev-20250220093908

package/lib/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@powersync/web",
-    "version": "1.13.1",
+    "version": "1.14.0",
     "description": "A Web SDK for JourneyApps PowerSync",
     "main": "lib/src/index.js",
     "types": "lib/src/index.d.ts",
@@ -61,7 +61,7 @@
     "license": "Apache-2.0",
     "peerDependencies": {
         "@journeyapps/wa-sqlite": "^1.2.0",
-        "@powersync/common": "workspace:^1.23.0"
+        "@powersync/common": "workspace:^1.24.0"
     },
     "dependencies": {
         "@powersync/common": "workspace:*",

package/lib/src/db/adapters/wa-sqlite/WASQLiteConnection.js

@@ -184,6 +184,7 @@ export class WASqliteConnection extends BaseObserver {
         await this.openDB();
         this.registerBroadcastListeners();
         await this.executeSingleStatement(`PRAGMA temp_store = ${this.options.temporaryStorage};`);
+        await this.executeSingleStatement(`PRAGMA cache_size = -${this.options.cacheSizeKb};`);
         await this.executeEncryptionPragma();
         this.sqliteAPI.update_hook(this.dbP, (updateType, dbName, tableName) => {
             if (!tableName) {

package/lib/src/db/adapters/wa-sqlite/WASQLiteDBAdapter.d.ts

@@ -17,6 +17,7 @@ export interface WASQLiteDBAdapterOptions extends Omit<PowerSyncOpenFactoryOptio
     worker?: string | URL | ((options: ResolvedWebSQLOpenOptions) => Worker | SharedWorker);
     vfs?: WASQLiteVFS;
     temporaryStorage?: TemporaryStorageOption;
+    cacheSizeKb?: number;
     /**
      * Encryption key for the database.
      * If set, the database will be encrypted using multiple-ciphers.

package/lib/src/db/adapters/wa-sqlite/WASQLiteDBAdapter.js

@@ -1,7 +1,7 @@
 import * as Comlink from 'comlink';
 import { resolveWebPowerSyncFlags } from '../../PowerSyncDatabase';
 import { LockedAsyncDatabaseAdapter } from '../LockedAsyncDatabaseAdapter';
-import { TemporaryStorageOption } from '../web-sql-flags';
+import { DEFAULT_CACHE_SIZE_KB, TemporaryStorageOption } from '../web-sql-flags';
 import { WorkerWrappedAsyncDatabaseConnection } from '../WorkerWrappedAsyncDatabaseConnection';
 import { WASQLiteOpenFactory } from './WASQLiteOpenFactory';
 /**
@@ -12,7 +12,7 @@ export class WASQLiteDBAdapter extends LockedAsyncDatabaseAdapter {
         super({
             name: options.dbFilename,
             openConnection: async () => {
-                const { workerPort, temporaryStorage } = options;
+                const { workerPort, temporaryStorage, cacheSizeKb } = options;
                 if (workerPort) {
                     const remote = Comlink.wrap(workerPort);
                     return new WorkerWrappedAsyncDatabaseConnection({
@@ -21,6 +21,7 @@ export class WASQLiteDBAdapter extends LockedAsyncDatabaseAdapter {
                         baseConnection: await remote({
                             ...options,
                             temporaryStorage: temporaryStorage ?? TemporaryStorageOption.MEMORY,
+                            cacheSizeKb: cacheSizeKb ?? DEFAULT_CACHE_SIZE_KB,
                             flags: resolveWebPowerSyncFlags(options.flags),
                             encryptionKey: options.encryptionKey
                         })
@@ -32,6 +33,7 @@ export class WASQLiteDBAdapter extends LockedAsyncDatabaseAdapter {
                     debugMode: options.debugMode,
                     flags: options.flags,
                     temporaryStorage,
+                    cacheSizeKb,
                     logger: options.logger,
                     vfs: options.vfs,
                     encryptionKey: options.encryptionKey,

package/lib/src/db/adapters/wa-sqlite/WASQLiteOpenFactory.js

@@ -2,7 +2,7 @@ import * as Comlink from 'comlink';
 import { openWorkerDatabasePort, resolveWorkerDatabasePortFactory } from '../../../worker/db/open-worker-database';
 import { AbstractWebSQLOpenFactory } from '../AbstractWebSQLOpenFactory';
 import { LockedAsyncDatabaseAdapter } from '../LockedAsyncDatabaseAdapter';
-import { TemporaryStorageOption } from '../web-sql-flags';
+import { DEFAULT_CACHE_SIZE_KB, TemporaryStorageOption } from '../web-sql-flags';
 import { WorkerWrappedAsyncDatabaseConnection } from '../WorkerWrappedAsyncDatabaseConnection';
 import { WASqliteConnection, WASQLiteVFS } from './WASQLiteConnection';
 /**
@@ -27,7 +27,7 @@ export class WASQLiteOpenFactory extends AbstractWebSQLOpenFactory {
     }
     async openConnection() {
         const { enableMultiTabs, useWebWorker } = this.resolvedFlags;
-        const { vfs = WASQLiteVFS.IDBBatchAtomicVFS, temporaryStorage = TemporaryStorageOption.MEMORY, encryptionKey } = this.waOptions;
+        const { vfs = WASQLiteVFS.IDBBatchAtomicVFS, temporaryStorage = TemporaryStorageOption.MEMORY, cacheSizeKb = DEFAULT_CACHE_SIZE_KB, encryptionKey } = this.waOptions;
         if (!enableMultiTabs) {
             this.logger.warn('Multiple tabs are not enabled in this browser');
         }
@@ -37,6 +37,7 @@ export class WASQLiteOpenFactory extends AbstractWebSQLOpenFactory {
                 ? resolveWorkerDatabasePortFactory(() => optionsDbWorker({
                     ...this.options,
                     temporaryStorage,
+                    cacheSizeKb,
                     flags: this.resolvedFlags,
                     encryptionKey
                 }))
@@ -48,6 +49,7 @@ export class WASQLiteOpenFactory extends AbstractWebSQLOpenFactory {
                     dbFilename: this.options.dbFilename,
                     vfs,
                     temporaryStorage,
+                    cacheSizeKb,
                     flags: this.resolvedFlags,
                     encryptionKey: encryptionKey
                 }),
@@ -70,6 +72,7 @@ export class WASQLiteOpenFactory extends AbstractWebSQLOpenFactory {
                 debugMode: this.options.debugMode,
                 vfs,
                 temporaryStorage,
+                cacheSizeKb,
                 flags: this.resolvedFlags,
                 encryptionKey: encryptionKey
             });

package/lib/src/db/adapters/web-sql-flags.d.ts

@@ -39,6 +39,7 @@ export interface ResolvedWebSQLOpenOptions extends SQLOpenOptions {
      * Setting this to `FILESYSTEM` can cause issues with larger queries or datasets.
      */
     temporaryStorage: TemporaryStorageOption;
+    cacheSizeKb: number;
     /**
      * Encryption key for the database.
      * If set, the database will be encrypted using ChaCha20.
@@ -49,6 +50,7 @@ export declare enum TemporaryStorageOption {
     MEMORY = "memory",
     FILESYSTEM = "file"
 }
+export declare const DEFAULT_CACHE_SIZE_KB: number;
 /**
  * Options for opening a Web SQL connection
  */
@@ -65,8 +67,16 @@ export interface WebSQLOpenFactoryOptions extends SQLOpenOptions {
     /**
      * Where to store SQLite temporary files. Defaults to 'MEMORY'.
      * Setting this to `FILESYSTEM` can cause issues with larger queries or datasets.
+     *
+     * For details, see: https://www.sqlite.org/pragma.html#pragma_temp_store
      */
     temporaryStorage?: TemporaryStorageOption;
+    /**
+     * Maximum SQLite cache size. Defaults to 50MB.
+     *
+     * For details, see: https://www.sqlite.org/pragma.html#pragma_cache_size
+     */
+    cacheSizeKb?: number;
     /**
      * Encryption key for the database.
      * If set, the database will be encrypted using ChaCha20.

package/lib/src/db/adapters/web-sql-flags.js

@@ -3,6 +3,7 @@ export var TemporaryStorageOption;
     TemporaryStorageOption["MEMORY"] = "memory";
     TemporaryStorageOption["FILESYSTEM"] = "file";
 })(TemporaryStorageOption || (TemporaryStorageOption = {}));
+export const DEFAULT_CACHE_SIZE_KB = 50 * 1024;
 export function isServerSide() {
     return typeof window == 'undefined';
 }

package/lib/src/db/sync/SharedWebStreamingSyncImplementation.js

@@ -1,7 +1,7 @@
 import * as Comlink from 'comlink';
 import { AbstractSharedSyncClientProvider } from '../../worker/sync/AbstractSharedSyncClientProvider';
 import { SharedSyncClientEvent } from '../../worker/sync/SharedSyncImplementation';
-import { resolveWebSQLFlags, TemporaryStorageOption } from '../adapters/web-sql-flags';
+import { DEFAULT_CACHE_SIZE_KB, resolveWebSQLFlags, TemporaryStorageOption } from '../adapters/web-sql-flags';
 import { WebStreamingSyncImplementation } from './WebStreamingSyncImplementation';
 /**
  * The shared worker will trigger methods on this side of the message port
@@ -86,10 +86,10 @@ export class SharedWebStreamingSyncImplementation extends WebStreamingSyncImplem
          * This worker will manage all syncing operations remotely.
          */
         const resolvedWorkerOptions = {
-            ...options,
             dbFilename: this.options.identifier,
-            // TODO
             temporaryStorage: TemporaryStorageOption.MEMORY,
+            cacheSizeKb: DEFAULT_CACHE_SIZE_KB,
+            ...options,
             flags: resolveWebSQLFlags(options.flags)
         };
         const syncWorker = options.sync?.worker;

package/lib/src/worker/sync/SharedSyncImplementation.js

@@ -102,6 +102,9 @@ export class SharedSyncImplementation extends BaseObserver {
         await this.waitForReady();
         // This effectively queues connect and disconnect calls. Ensuring multiple tabs' requests are synchronized
         return getNavigatorLocks().request('shared-sync-connect', async () => {
+            if (!this.dbAdapter) {
+                await this.openInternalDB();
+            }
             this.syncStreamClient = this.generateStreamingImplementation();
             this.lastConnectOptions = options;
             this.syncStreamClient.registerListener({
@@ -125,10 +128,7 @@ export class SharedSyncImplementation extends BaseObserver {
      * Adds a new client tab's message port to the list of connected ports
      */
     addPort(port) {
-        const portProvider = {
-            port,
-            clientProvider: Comlink.wrap(port)
-        };
+        const portProvider = { port, clientProvider: Comlink.wrap(port) };
         this.ports.push(portProvider);
         // Give the newly connected client the latest status
         const status = this.syncStreamClient?.syncStatus;
@@ -147,11 +147,7 @@ export class SharedSyncImplementation extends BaseObserver {
             return;
         }
         const trackedPort = this.ports[index];
-        if (trackedPort.db) {
-            trackedPort.db.close();
-        }
-        // Release proxy
-        trackedPort.clientProvider[Comlink.releaseProxy]();
+        // Remove from the list of active ports
         this.ports.splice(index, 1);
         /**
          * The port might currently be in use. Any active functions might
@@ -162,12 +158,22 @@ export class SharedSyncImplementation extends BaseObserver {
                 abortController.controller.abort(new AbortOperation('Closing pending requests after client port is removed'));
             }
         });
-        if (this.dbAdapter == trackedPort.db && this.syncStreamClient) {
-            await this.disconnect();
-            // Ask for a new DB worker port handler
-            await this.openInternalDB();
-            await this.connect(this.lastConnectOptions);
+        const shouldReconnect = !!this.syncStreamClient;
+        if (this.dbAdapter && this.dbAdapter == trackedPort.db) {
+            if (shouldReconnect) {
+                await this.disconnect();
+            }
+            // Clearing the adapter will result in a new one being opened in connect
+            this.dbAdapter = null;
+            if (shouldReconnect) {
+                await this.connect(this.lastConnectOptions);
+            }
+        }
+        if (trackedPort.db) {
+            trackedPort.db.close();
         }
+        // Release proxy
+        trackedPort.clientProvider[Comlink.releaseProxy]();
     }
     triggerCrudUpload() {
         this.waitForReady().then(() => this.syncStreamClient?.triggerCrudUpload());
@@ -195,10 +201,7 @@ export class SharedSyncImplementation extends BaseObserver {
                     const lastPort = this.ports[this.ports.length - 1];
                     return new Promise(async (resolve, reject) => {
                         const abortController = new AbortController();
-                        this.fetchCredentialsController = {
-                            controller: abortController,
-                            activePort: lastPort
-                        };
+                        this.fetchCredentialsController = { controller: abortController, activePort: lastPort };
                         abortController.signal.onabort = reject;
                         try {
                             console.log('calling the last port client provider for credentials');
@@ -217,10 +220,7 @@ export class SharedSyncImplementation extends BaseObserver {
                 const lastPort = this.ports[this.ports.length - 1];
                 return new Promise(async (resolve, reject) => {
                     const abortController = new AbortController();
-                    this.uploadDataController = {
-                        controller: abortController,
-                        activePort: lastPort
-                    };
+                    this.uploadDataController = { controller: abortController, activePort: lastPort };
                     // Resolving will make it retry
                     abortController.signal.onabort = () => resolve();
                     try {
@@ -241,6 +241,10 @@ export class SharedSyncImplementation extends BaseObserver {
     }
     async openInternalDB() {
         const lastClient = this.ports[this.ports.length - 1];
+        if (!lastClient) {
+            // Should not really happen in practice
+            throw new Error(`Could not open DB connection since no client is connected.`);
+        }
         const workerPort = await lastClient.clientProvider.getDBWorkerPort();
         const remote = Comlink.wrap(workerPort);
         const identifier = this.syncParams.dbParams.dbFilename;
@@ -248,11 +252,7 @@ export class SharedSyncImplementation extends BaseObserver {
         const locked = new LockedAsyncDatabaseAdapter({
             name: identifier,
             openConnection: async () => {
-                return new WorkerWrappedAsyncDatabaseConnection({
-                    remote,
-                    baseConnection: db,
-                    identifier
-                });
+                return new WorkerWrappedAsyncDatabaseConnection({ remote, baseConnection: db, identifier });
             },
             logger: this.logger
         });