@powersync/web 2.0.0 → 2.1.1

package/README.md

@@ -18,16 +18,6 @@ See a summary of features [here](https://docs.powersync.com/client-sdk-reference
 npm install @powersync/web
 ```
 
-## Install Peer Dependency: WA-SQLite
-
-This SDK currently requires `@journeyapps/wa-sqlite` as a peer dependency.
-
-Install it in your app with:
-
-```bash
-npm install @journeyapps/wa-sqlite
-```
-
 ### Encryption with Multiple Ciphers
 
 To enable encryption you need to specify an encryption key when instantiating the PowerSync database.

package/dist/index.react_native_web.js

@@ -380,7 +380,10 @@ class DatabaseServer {
         };
     }
     async forceClose() {
-        this.#logger.log({ level: LogLevels.debug, message: `Closing connection to ${this.#inner.options}.` });
+        this.#logger.log({
+            level: LogLevels.debug,
+            message: `Closing connection to ${JSON.stringify(this.#inner.options)}.`
+        });
         const connection = this.#inner;
         this.#options.onClose();
         this.#updateBroadcastChannel.close();
@@ -395,6 +398,50 @@ const getNavigatorLocks = () => {
     throw new Error('Navigator locks are not available in an insecure context. Use a secure context such as HTTPS or http://localhost.');
 };
 
+var TemporaryStorageOption;
+(function (TemporaryStorageOption) {
+    TemporaryStorageOption["MEMORY"] = "memory";
+    TemporaryStorageOption["FILESYSTEM"] = "file";
+})(TemporaryStorageOption || (TemporaryStorageOption = {}));
+
+/**
+ * The maximum length of a db filename we support.
+ *
+ * We configure the same on WA-SQLite (which otherwise defaults to a maximum length of 64). We don't want to support
+ * very long path names as Safari maps OPFS files directly to OS files, and APFS has a 255-byte filename limit. Since
+ * some VFS append additional characters for pooled file access handles, we want to stay well below that.
+ */
+const maxPathNameLength = 128;
+/**
+ * @internal
+ */
+function resolveAndValidateOptions(options) {
+    const defaults = {
+        disableSSRWarning: false,
+        ssrMode: !('window' in globalThis),
+        /**
+         * Multiple tabs are by default not supported on Android, iOS and Safari.
+         * Other platforms will have multiple tabs enabled by default.
+         */
+        enableMultiTabs: typeof globalThis.navigator !== 'undefined' && // For SSR purposes
+            typeof SharedWorker !== 'undefined' &&
+            !navigator.userAgent.match(/(Android|iPhone|iPod|iPad)/i) &&
+            !window.safari,
+        useWebWorker: true,
+        databaseWorkerLogLevel: LogLevels.info,
+        temporaryStorage: TemporaryStorageOption.MEMORY,
+        cacheSizeKb: 50 * 1024,
+        encryptionKey: undefined,
+        vfs: WASQLiteVFS.IDBBatchAtomicVFS,
+        additionalReaders: 1
+    };
+    const resolved = Object.assign(defaults, options);
+    if (vfsRequiresDedicatedWorkers(resolved.vfs) && !resolved.useWebWorker) {
+        throw new Error(`Invalid configuration: The 'useWebWorker' flag must be true when using an OPFS-based VFS (${resolved.vfs}).`);
+    }
+    return resolved;
+}
+
 /**
  * A small wrapper around WA-sqlite to help with opening databases and running statements by preparing them internally.
  *
@@ -427,6 +474,7 @@ class RawSqliteConnection {
     }
     async openSQLiteAPI() {
         const { module, vfs } = await loadModuleAndVfs(this.options);
+        vfs.mxPathname = maxPathNameLength;
         const sqlite3 = Factory(module);
         sqlite3.vfs_register(vfs, true);
         /**
@@ -1078,7 +1126,7 @@ function readWritePoolState(writer, readers) {
             let timeout = null;
             let release;
             if (options?.timeoutMs) {
-                timeout = setTimeout(() => abortController.abort, options.timeoutMs);
+                timeout = setTimeout(() => abortController.abort('requesting database timed out'), options.timeoutMs);
             }
             try {
                 if (allowReadOnly) {
@@ -1140,43 +1188,7 @@ function readWritePoolState(writer, readers) {
     };
 }
 
-var TemporaryStorageOption;
-(function (TemporaryStorageOption) {
-    TemporaryStorageOption["MEMORY"] = "memory";
-    TemporaryStorageOption["FILESYSTEM"] = "file";
-})(TemporaryStorageOption || (TemporaryStorageOption = {}));
-
-/**
- * @internal
- */
-function resolveAndValidateOptions(options) {
-    const defaults = {
-        disableSSRWarning: false,
-        ssrMode: !('window' in globalThis),
-        /**
-         * Multiple tabs are by default not supported on Android, iOS and Safari.
-         * Other platforms will have multiple tabs enabled by default.
-         */
-        enableMultiTabs: typeof globalThis.navigator !== 'undefined' && // For SSR purposes
-            typeof SharedWorker !== 'undefined' &&
-            !navigator.userAgent.match(/(Android|iPhone|iPod|iPad)/i) &&
-            !window.safari,
-        useWebWorker: true,
-        databaseWorkerLogLevel: LogLevels.info,
-        temporaryStorage: TemporaryStorageOption.MEMORY,
-        cacheSizeKb: 50 * 1024,
-        encryptionKey: undefined,
-        vfs: WASQLiteVFS.IDBBatchAtomicVFS,
-        additionalReaders: 1
-    };
-    const resolved = Object.assign(defaults, options);
-    if (vfsRequiresDedicatedWorkers(resolved.vfs) && !resolved.useWebWorker) {
-        throw new Error(`Invalid configuration: The 'useWebWorker' flag must be true when using an OPFS-based VFS (${resolved.vfs}).`);
-    }
-    return resolved;
-}
-
-function connectToWorker({ service, databaseIdentifier, customWorker, shared }) {
+function connectToWorker({ service, databaseIdentifier, customWorker, shared, loggerForErrors }) {
     const name = `${shared ? 'shared-' : ''}powersync-${databaseIdentifier}`;
     let worker;
     if (customWorker) {
@@ -1195,7 +1207,7 @@ function connectToWorker({ service, databaseIdentifier, customWorker, shared })
     else {
         worker = spawnDefaultPowerSyncWorker();
     }
-    return connectToExistingWorker(worker, service);
+    return connectToExistingWorker(worker, loggerForErrors, service);
 }
 /**
  * Opens the default PowerSync worker.
@@ -1214,7 +1226,17 @@ function spawnDefaultPowerSyncWorker(shared, name) {
   throw new Error('You are using the React Native web build of the PowerSync SDK, which requires custom worker URLs. Please see the documentation at https://docs.powersync.com/client-sdks/frameworks/react-native-web-support for details.');
 }
 
-function connectToExistingWorker(worker, service) {
+function connectToExistingWorker(worker, logger, service) {
+    function logError(event) {
+        // TODO: Ideally, we should be able to handle worker errors by forwarding them to async Comlink callers.
+        // Currently, comlink calls on errored workers would just be stuck forever.
+        logger.log({
+            level: LogLevels.error,
+            error: event.error,
+            message: 'Error in database or sync worker, this likely disrupts PowerSync.'
+        });
+    }
+    worker.addEventListener('error', logError);
     const isShared = isSharedWorker(worker);
     if (isShared) {
         const { port1, port2 } = new MessageChannel();
@@ -1226,6 +1248,7 @@ function connectToExistingWorker(worker, service) {
             endpoint: port2,
             worker,
             close() {
+                worker.removeEventListener('error', logError);
                 port2.close();
             }
         };
@@ -1235,6 +1258,7 @@ function connectToExistingWorker(worker, service) {
             endpoint: worker,
             worker,
             close() {
+                worker.removeEventListener('error', logError);
                 worker.terminate();
             }
         };
@@ -1252,6 +1276,11 @@ class WASQLiteOpenFactory {
     logger;
     constructor(options) {
         this.options = resolveAndValidateOptions(options.open);
+        // Account for the fact that SQLite might append -journal suffixes
+        const maxLength = maxPathNameLength - 16;
+        if (this.options.dbFilename.length > maxLength) {
+            throw new Error(`dbFilename too long (max length is ${maxLength})`);
+        }
         this.logger = options.logger;
     }
     openAdapter() {
@@ -1303,7 +1332,7 @@ class WASQLiteOpenFactory {
                 let workerConnection;
                 if (typeof optionsDbWorker == 'function') {
                     const worker = optionsDbWorker(this.options);
-                    workerConnection = connectToExistingWorker(worker, 'database');
+                    workerConnection = connectToExistingWorker(worker, this.logger, 'database');
                 }
                 else {
                     const needsDedicated = vfsRequiresDedicatedWorkers(vfs);
@@ -1312,7 +1341,8 @@ class WASQLiteOpenFactory {
                         service: 'database',
                         databaseIdentifier: this.options.dbFilename,
                         shared: useShared,
-                        customWorker: optionsDbWorker
+                        customWorker: optionsDbWorker,
+                        loggerForErrors: this.logger
                     });
                 }
                 const source = Comlink.wrap(workerConnection.endpoint);
@@ -1647,14 +1677,15 @@ class SharedWebStreamingSyncImplementation extends WebStreamingSyncImplementatio
         this.enableBroadcastLogs = options.enableBroadcastLogs;
         const syncWorker = options.sync?.worker;
         if (typeof syncWorker === 'function') {
-            this.worker = connectToExistingWorker(syncWorker(), 'sync');
+            this.worker = connectToExistingWorker(syncWorker(), options.logger, 'sync');
         }
         else {
             this.worker = connectToWorker({
                 service: 'sync',
                 databaseIdentifier: this.webOptions.identifier,
                 shared: true,
-                customWorker: syncWorker
+                customWorker: syncWorker,
+                loggerForErrors: options.logger
             });
         }
         /**
@@ -1756,6 +1787,74 @@ class SharedWebStreamingSyncImplementation extends WebStreamingSyncImplementatio
     }
 }
 
+/**
+ * When multi-tab support is disabled and we don't use a shared worker for sync, only a single tab will be able to
+ * acquire the sync navigator lock and start a sync iteration.
+ *
+ * To be able to provide _some_ multi-tab support in that configuration, this utility:
+ *
+ * 1. Sends sync status updates from the syncing tab to others.
+ * 2. Allows other tabs to send notifications when their active sync stream subscriptions update, allowing the active
+ *    tab to take those subscriptions into account.
+ */
+class TabLocalStreamingSyncImplementation extends WebStreamingSyncImplementation {
+    #statusUpdated;
+    #subscriptionsChanged;
+    #hasSyncLock = false;
+    constructor(options) {
+        super(options);
+        const identifier = options.identifier;
+        this.#statusUpdated = new BroadcastChannel(`sync-status-${identifier}`);
+        this.#subscriptionsChanged = new BroadcastChannel(`subscription-change-${identifier}`);
+        this.#statusUpdated.onmessage = (event) => {
+            if (event.data == 'ping') {
+                this.#sendStatus(this.syncStatus);
+                return;
+            }
+            const { core, dataFlow } = event.data;
+            this.updateSyncStatus(core, dataFlow);
+        };
+        // Request other tabs to share their sync status.
+        this.#statusUpdated.postMessage('ping');
+        this.#subscriptionsChanged.onmessage = () => {
+            // We can't update activeStreams since we don't know when another tab referencing them is closed. However,
+            // clients will update an internal table listing streams after subscribing, and updateSubscriptions() will
+            // scan that table.
+            super.updateSubscriptions(this.activeStreams);
+        };
+        this.registerListener({
+            statusChanged: (status) => this.#sendStatus(status)
+        });
+    }
+    #sendStatus(status) {
+        // Don't share sync status if this is not the tab currently syncing.
+        if (this.#hasSyncLock) {
+            this.#statusUpdated.postMessage(status.toJSON());
+        }
+    }
+    updateSubscriptions(subscriptions) {
+        super.updateSubscriptions(subscriptions);
+        this.#subscriptionsChanged.postMessage('');
+    }
+    obtainLock({ callback, type, signal }) {
+        const wrappedCallback = async () => {
+            this.#hasSyncLock = true;
+            try {
+                return await callback();
+            }
+            finally {
+                this.#hasSyncLock = false;
+            }
+        };
+        return super.obtainLock({ callback: type == LockType.SYNC ? wrappedCallback : callback, type, signal });
+    }
+    async dispose() {
+        this.#statusUpdated.close();
+        this.#subscriptionsChanged.close();
+        await super.dispose();
+    }
+}
+
 /**
  * @internal Use {@link PowerSyncDatabase} instead, this class is only used by other SDKs also needing web support.
  */
@@ -1868,7 +1967,7 @@ class WebPowerSyncDatabase extends BasePowerSyncDatabase {
                     enableBroadcastLogs: this.enableBroadcastLogs
                 });
             default:
-                return new WebStreamingSyncImplementation(syncOptions);
+                return new TabLocalStreamingSyncImplementation(syncOptions);
         }
     }
 }