chore: use new approach

Author: DominicGBauer

packages/web/src/db/PowerSyncDatabase.ts

@@ -28,7 +28,7 @@ import {
   WebStreamingSyncImplementation,
   WebStreamingSyncImplementationOptions
 } from './sync/WebStreamingSyncImplementation';
-import { sdkNavigator } from '../shared/navigator';
+import { getNavigationLocks } from '../shared/navigator';
 
 export interface WebPowerSyncFlags extends WebSQLFlags {
   /**
@@ -161,7 +161,7 @@ export class PowerSyncDatabase extends AbstractPowerSyncDatabase {
     if (this.resolvedFlags.ssrMode) {
       return PowerSyncDatabase.SHARED_MUTEX.runExclusive(cb);
     }
-    return sdkNavigator.locks.request(`lock-${this.database.name}`, cb);
+    return getNavigationLocks().request(`lock-${this.database.name}`, cb);
   }
 
   protected generateSyncStreamImplementation(connector: PowerSyncBackendConnector): StreamingSyncImplementation {

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

@@ -15,7 +15,7 @@ import type { DBFunctionsInterface, OpenDB } from '../../../shared/types';
 import { _openDB } from '../../../shared/open-db';
 import { getWorkerDatabaseOpener, resolveWorkerDatabasePortFactory } from '../../../worker/db/open-worker-database';
 import { ResolvedWebSQLOpenOptions, resolveWebSQLFlags, WebSQLFlags } from '../web-sql-flags';
-import { sdkNavigator } from '../../../shared/navigator';
+import { getNavigationLocks } from '../../../shared/navigator';
 
 /**
  * These flags are the same as {@link WebSQLFlags}.
@@ -187,7 +187,7 @@ export class WASQLiteDBAdapter extends BaseObserver<DBAdapterListener> implement
   }
 
   protected acquireLock(callback: () => Promise<any>): Promise<any> {
-    return sdkNavigator.locks.request(`db-lock-${this.options.dbFilename}`, callback);
+    return getNavigationLocks().request(`db-lock-${this.options.dbFilename}`, callback);
   }
 
   async readTransaction<T>(fn: (tx: Transaction) => Promise<T>, options?: DBLockOptions | undefined): Promise<T> {

packages/web/src/db/adapters/web-sql-flags.ts

@@ -1,5 +1,4 @@
 import { SQLOpenOptions } from '@powersync/common';
-import { sdkNavigator } from '../../shared/navigator';
 
 /**
  * Common settings used when creating SQL connections on web.
@@ -73,7 +72,7 @@ export const DEFAULT_WEB_SQL_FLAGS: ResolvedWebSQLFlags = {
   enableMultiTabs:
     typeof globalThis.navigator !== 'undefined' && // For SSR purposes
     typeof SharedWorker !== 'undefined' &&
-    !sdkNavigator.userAgent.match(/(Android|iPhone|iPod|iPad)/i) &&
+    !navigator.userAgent.match(/(Android|iPhone|iPod|iPad)/i) &&
     !(window as any).safari,
   useWebWorker: true
 };

packages/web/src/db/sync/WebStreamingSyncImplementation.ts

@@ -5,7 +5,7 @@ import {
   LockType
 } from '@powersync/common';
 import { ResolvedWebSQLOpenOptions, WebSQLFlags } from '../adapters/web-sql-flags';
-import { sdkNavigator } from '../../shared/navigator';
+import { getNavigationLocks } from '../../shared/navigator';
 
 export interface WebStreamingSyncImplementationOptions extends AbstractStreamingSyncImplementationOptions {
   flags?: WebSQLFlags;
@@ -33,6 +33,6 @@ export class WebStreamingSyncImplementation extends AbstractStreamingSyncImpleme
   obtainLock<T>(lockOptions: LockOptions<T>): Promise<T> {
     const identifier = `streaming-sync-${lockOptions.type}-${this.webOptions.identifier}`;
     lockOptions.type == LockType.SYNC && console.debug('requesting lock for ', identifier);
-    return sdkNavigator.locks.request(identifier, { signal: lockOptions.signal }, lockOptions.callback);
+    return getNavigationLocks().request(identifier, { signal: lockOptions.signal }, lockOptions.callback);
   }
 }

packages/web/src/shared/navigator.ts

@@ -1,30 +1,50 @@
-class SDKNavigator extends Navigator {
-  private static instance: SDKNavigator | null = null;
+import { Mutex } from 'async-mutex';
 
-  constructor() {
-    super();
-    Object.setPrototypeOf(this, SDKNavigator.prototype);
+export const getNavigationLocks = (): LockManager => {
+  if ('locks' in navigator && navigator.locks) {
+    return navigator.locks;
   }
+  console.warn('Navigator locks are not available in this context.' +
+                'This may be due to running in an unsecure context. ' +
+                'Consider using HTTPS or a secure context for full functionality.' +
+                'Using fallback implementation.');
 
-  public static getInstance(): SDKNavigator {
-    if (!SDKNavigator.instance) {
-      SDKNavigator.instance = new SDKNavigator();
-    }
-    return SDKNavigator.instance;
-  }
+  const mutexes = new Map<string, Mutex>();
 
-  get locks(): LockManager {
-    if (!super.locks) {
-    throw new Error('Navigator locks are not available in this context. ' +
-                    'This may be due to running in an unsecure context. ' +
-                    'Consider using HTTPS or a secure context for full functionality.');
+  const getMutex = (name: string): Mutex => {
+    if (!mutexes.has(name)) {
+      mutexes.set(name, new Mutex());
     }
-    return new Proxy(super.locks, {
-      get(target: LockManager, prop: keyof LockManager) {
-        return target[prop];
+    return mutexes.get(name)!;
+  };
+
+  const fallbackLockManager: LockManager = {
+    request: async (
+      name: string,
+      optionsOrCallback: LockOptions | LockGrantedCallback,
+      maybeCallback?: LockGrantedCallback
+    ): Promise<LockManagerSnapshot> => {
+      const callback = typeof optionsOrCallback === 'function' ? optionsOrCallback : maybeCallback!;
+      const options: LockOptions = typeof optionsOrCallback === 'object' ? optionsOrCallback : {};
+
+      const mutex = getMutex(name);
+      const release = await mutex.acquire();
+      try {
+        const lock: Lock = { name, mode: options.mode || 'exclusive' };
+        return await callback(lock);
+      } finally {
+        release();
+        mutexes.delete(name);
       }
-    });
-  }
-}
+    },
+
+    query: async (): Promise<LockManagerSnapshot> => {
+      return {
+        held: Array.from(mutexes.keys()).map(name => ({ name, mode: 'exclusive' as const })),
+        pending: [] // We can't accurately track pending locks in this implementation as this requires a queue
+      };
+    }
+  };
 
-export const sdkNavigator = SDKNavigator.getInstance();
+  return fallbackLockManager;
+}

packages/web/src/worker/db/WASQLiteDB.worker.ts

@@ -6,7 +6,7 @@ import '@journeyapps/wa-sqlite';
 import * as Comlink from 'comlink';
 import { _openDB } from '../../shared/open-db';
 import type { DBFunctionsInterface } from '../../shared/types';
-import { sdkNavigator } from '../../shared/navigator';
+import { getNavigationLocks } from '../../shared/navigator';
 
 /**
  * Keeps track of open DB connections and the clients which
@@ -24,7 +24,7 @@ let nextClientId = 1;
 
 const openDBShared = async (dbFileName: string): Promise<DBFunctionsInterface> => {
   // Prevent multiple simultaneous opens from causing race conditions
-  return sdkNavigator.locks.request(OPEN_DB_LOCK, async () => {
+  return getNavigationLocks().request(OPEN_DB_LOCK, async () => {
     const clientId = nextClientId++;
 
     if (!DBMap.has(dbFileName)) {

packages/web/src/worker/sync/SharedSyncImplementation.ts

@@ -23,7 +23,7 @@ import {
 import { WASQLiteDBAdapter } from '../../db/adapters/wa-sqlite/WASQLiteDBAdapter';
 import { AbstractSharedSyncClientProvider } from './AbstractSharedSyncClientProvider';
 import { BroadcastLogger } from './BroadcastLogger';
-import { sdkNavigator } from '../../shared/navigator';
+import { getNavigationLocks } from '../../shared/navigator';
 
 /**
  * Manual message events for shared sync clients
@@ -166,7 +166,7 @@ export class SharedSyncImplementation
   async connect(options?: PowerSyncConnectionOptions) {
     await this.waitForReady();
     // This effectively queues connect and disconnect calls. Ensuring multiple tabs' requests are synchronized
-    return sdkNavigator.locks.request('shared-sync-connect', async () => {
+    return getNavigationLocks().request('shared-sync-connect', async () => {
       this.syncStreamClient = this.generateStreamingImplementation();
 
       this.syncStreamClient.registerListener({
@@ -182,7 +182,7 @@ export class SharedSyncImplementation
   async disconnect() {
     await this.waitForReady();
     // This effectively queues connect and disconnect calls. Ensuring multiple tabs' requests are synchronized
-    return sdkNavigator.locks.request('shared-sync-connect', async () => {
+    return getNavigationLocks().request('shared-sync-connect', async () => {
       await this.syncStreamClient?.disconnect();
       await this.syncStreamClient?.dispose();
       this.syncStreamClient = null;

packages/web/tests/main.test.ts

@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { AbstractPowerSyncDatabase } from '@powersync/common';
 import { v4 as uuid } from 'uuid';
 import { TestDatabase, generateTestDb } from './utils/testDb';
@@ -64,4 +64,18 @@ describe('Basic', () => {
       expect(result[2].name).equals('Chris');
     });
   });
+
+  describe('navigator.locks fallback', () => {
+    itWithDBs('should work with PowerSync when navigator.locks is not available', async (db) => {
+      // This test assumes that PowerSync uses getNavigationLocks internally
+      // You may need to modify PowerSync to use getNavigationLocks if it doesn't already
+      //@ts-ignore
+      vi.spyOn(navigator, 'locks', 'get').mockReturnValue(undefined);
+      const testName = 'LockTest';
+      await db.execute('INSERT INTO customers (id, name) VALUES(?, ?)', [uuid(), testName]);
+      const result = await db.get<TestDatabase['customers']>('SELECT * FROM customers');
+
+      expect(result.name).equals(testName);
+    });
+  });
 });

packages/web/tests/shared/navigator.test.ts

@@ -1,48 +1,87 @@
-import { describe, test, expect, beforeEach, vi, afterEach } from 'vitest';
-import { sdkNavigator } from '../../src/shared/navigator';
-
-describe('sdkNavigator', () => {
-  let originalNavigator: Navigator;
-
-  beforeEach(() => {
-    originalNavigator = global.navigator;
-    vi.stubGlobal('navigator', {
-      ...originalNavigator,
-      locks: {
-        request: vi.fn(),
-      },
-    });
-  });
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { getNavigationLocks } from '../../src/shared/navigator';
 
+describe('getNavigationLocks', () => {
   afterEach(() => {
-    vi.stubGlobal('navigator', originalNavigator);
+    vi.restoreAllMocks();
   });
 
-  test('should inherit properties from Navigator', () => {
-    expect(sdkNavigator.userAgent).toBe(navigator.userAgent);
+  it('should return native navigator.locks if available', () => {
+    const mockLocks = {
+      request: vi.fn(),
+      query: vi.fn(),
+    };
+
+    vi.spyOn(navigator, 'locks', 'get').mockReturnValue(mockLocks);
+
+    const result = getNavigationLocks();
+    expect(result).toBe(mockLocks);
   });
 
-  test('should have locks property', () => {
-    expect(sdkNavigator.locks).toBeDefined();
-    expect(typeof sdkNavigator.locks.request).toBe('function');
+  it('should return fallback implementation if navigator.locks is not available', () => {
+    // @ts-ignore
+    vi.spyOn(navigator, 'locks', 'get').mockReturnValue(undefined);
+
+    const result = getNavigationLocks();
+    expect(result).toHaveProperty('request');
+    expect(result).toHaveProperty('query');
+    expect(result).not.toBe(navigator.locks);
   });
 
-  test('should throw error when locks are not available', () => {
-    vi.stubGlobal('navigator', { ...originalNavigator, locks: undefined });
-    expect(() => sdkNavigator.locks).toThrowError('Navigator locks are not available in this context.');
+  it('fallback request should acquire and release a lock', async () => {
+    // @ts-ignore
+    vi.spyOn(navigator, 'locks', 'get').mockReturnValue(undefined);
+    const locks = getNavigationLocks();
+
+    const mockCallback = vi.fn().mockResolvedValue('result');
+    const result = await locks.request('test-lock', mockCallback);
+
+    expect(mockCallback).toHaveBeenCalledWith(expect.objectContaining({
+      name: 'test-lock',
+      mode: 'exclusive'
+    }));
+    expect(result).toBe('result');
   });
 
-  test('locks proxy should pass through method calls when locks are available', () => {
-    const mockCallback = vi.fn();
-    sdkNavigator.locks.request('test', mockCallback);
-    expect(navigator.locks.request).toHaveBeenCalledWith('test', mockCallback);
+  it('fallback query should return held locks', async () => {
+    // @ts-ignore
+    vi.spyOn(navigator, 'locks', 'get').mockReturnValue(undefined);
+    const locks = getNavigationLocks();
+
+    // Acquire a lock first
+    await locks.request('test-lock', async () => {
+      const queryResult = await locks.query();
+      expect(queryResult.held).toHaveLength(1);
+      expect(queryResult.held![0]).toEqual(expect.objectContaining({
+        name: 'test-lock',
+        mode: 'exclusive'
+      }));
+      expect(queryResult.pending).toHaveLength(0);
+    });
+
+    const finalQueryResult = await locks.query();
+    expect(finalQueryResult.held).toHaveLength(0);
   });
 
-  test('should only expose expected Navigator properties', () => {
-    const sdkNavigatorKeys = Object.keys(sdkNavigator);
-    const navigatorKeys = Object.keys(navigator);
-    sdkNavigatorKeys.forEach(key => {
-      expect(navigatorKeys).toContain(key);
+  it('fallback implementation should handle concurrent requests', async () => {
+    // @ts-ignore
+    vi.spyOn(navigator, 'locks', 'get').mockReturnValue(undefined);
+    const locks = getNavigationLocks();
+
+    const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
+
+    const request1 = locks.request('test-lock', async () => {
+      await delay(200);
+      return 'first';
     });
+
+    const request2 = locks.request('test-lock', async () => {
+      return 'second';
+    });
+
+    const [result1, result2] = await Promise.all([request1, request2]);
+
+    expect(result1).toBe('first');
+    expect(result2).toBe('second');
   });
 });