wip

demos/react-native-supabase-todolist/library/powersync/system.ts

@@ -1,18 +1,18 @@
 import '@azure/core-asynciterator-polyfill';
 
-import React from 'react';
-import { PowerSyncDatabase as PowerSyncDatabaseNative } from '@powersync/react-native';
-import { PowerSyncDatabase as PowerSyncDatabaseWeb } from '@powersync/web';
 import { AbstractPowerSyncDatabase, SyncStreamConnectionMethod } from '@powersync/common';
+import { PowerSyncDatabase as PowerSyncDatabaseNative } from '@powersync/react-native';
+import { PowerSyncDatabase as PowerSyncDatabaseWeb, WASQLiteOpenFactory } from '@powersync/web';
+import React from 'react';
 import { SupabaseStorageAdapter } from '../storage/SupabaseStorageAdapter';
 
-import { AppSchema } from './AppSchema';
-import { SupabaseConnector } from '../supabase/SupabaseConnector';
-import { KVStorage } from '../storage/KVStorage';
-import { PhotoAttachmentQueue } from './PhotoAttachmentQueue';
 import { type AttachmentRecord } from '@powersync/attachments';
-import { AppConfig } from '../supabase/AppConfig';
 import Logger from 'js-logger';
+import { KVStorage } from '../storage/KVStorage';
+import { AppConfig } from '../supabase/AppConfig';
+import { SupabaseConnector } from '../supabase/SupabaseConnector';
+import { AppSchema } from './AppSchema';
+import { PhotoAttachmentQueue } from './PhotoAttachmentQueue';
 
 Logger.useDefaults();
 
@@ -37,9 +37,10 @@ export class System {
     } else {
       this.powersync = new PowerSyncDatabaseWeb({
         schema: AppSchema,
-        database: {
-          dbFilename: 'sqlite.db'
-        },
+        database: new WASQLiteOpenFactory({
+          dbFilename: 'sqlite.db',
+          workerURL: new URL('dist/lib_src_worker_db_SharedWASQLiteDB_worker_js.index.umd.js')
+        })
       });
     }
 
@@ -64,7 +65,7 @@ export class System {
     await this.powersync.init();
     await this.powersync.connect(this.supabaseConnector, { connectionMethod: SyncStreamConnectionMethod.WEB_SOCKET });
 
-    console.log("connected")
+    console.log('connected');
     if (this.attachmentQueue) {
       await this.attachmentQueue.init();
     }

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

@@ -4,31 +4,25 @@ import {
   type DBGetUtils,
   type DBLockOptions,
   type LockContext,
-  type PowerSyncOpenFactoryOptions,
   type QueryResult,
   type Transaction,
   BaseObserver
 } from '@powersync/common';
 import * as Comlink from 'comlink';
 import Logger, { type ILogger } from 'js-logger';
-import type { DBFunctionsInterface, OpenDB } from '../../../shared/types';
 import { _openDB } from '../../../shared/open-db';
+import type { DBFunctionsInterface, OpenDB } from '../../../shared/types';
 import { getWorkerDatabaseOpener } from '../../../worker/db/open-worker-database';
-import { WebSQLFlags } from '../web-sql-flags';
+import { WebSQLFlags, WebSQLOpenFactoryOptions } from '../web-sql-flags';
 
 /**
  * These flags are the same as {@link WebSQLFlags}.
  * This export is maintained only for API consistency
  */
 export type WASQLiteFlags = WebSQLFlags;
 
-export interface WASQLiteDBAdapterOptions extends Omit<PowerSyncOpenFactoryOptions, 'schema'> {
+export interface WASQLiteDBAdapterOptions extends WebSQLOpenFactoryOptions {
   flags?: WASQLiteFlags;
-  /**
-   * Use an existing port to an initialized worker.
-   * A worker will be initialized if none is provided
-   */
-  workerPort?: MessagePort;
 }
 
 /**
@@ -86,7 +80,11 @@ export class WASQLiteDBAdapter extends BaseObserver<DBAdapterListener> implement
     if (useWebWorker) {
       const dbOpener = this.options.workerPort
         ? Comlink.wrap<OpenDB>(this.options.workerPort)
-        : getWorkerDatabaseOpener(this.options.dbFilename, enableMultiTabs);
+        : getWorkerDatabaseOpener({
+            workerIdentifier: this.options.dbFilename,
+            multipleTabs: enableMultiTabs,
+            url: this.options.workerURL
+          });
 
       this.methods = await dbOpener(this.options.dbFilename);
       this.methods.registerOnTableChange(

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

@@ -1,4 +1,5 @@
 import { SQLOpenOptions } from '@powersync/common';
+import { ILogger } from 'js-logger';
 
 /**
  * Common settings used when creating SQL connections on web.
@@ -41,6 +42,9 @@ export interface WebSQLFlags {
  */
 export interface WebSQLOpenFactoryOptions extends SQLOpenOptions {
   flags?: WebSQLFlags;
+  workerPort?: MessagePort;
+  workerURL?: URL;
+  logger?: ILogger;
 }
 
 export function isServerSide() {

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

@@ -1,16 +1,16 @@
+import { PowerSyncConnectionOptions, PowerSyncCredentials, SyncStatus, SyncStatusOptions } from '@powersync/common';
 import * as Comlink from 'comlink';
-import {
-  WebStreamingSyncImplementation,
-  WebStreamingSyncImplementationOptions
-} from './WebStreamingSyncImplementation';
+import { openWorkerDatabasePort } from '../../worker/db/open-worker-database';
+import { AbstractSharedSyncClientProvider } from '../../worker/sync/AbstractSharedSyncClientProvider';
 import {
   ManualSharedSyncPayload,
   SharedSyncClientEvent,
   SharedSyncImplementation
 } from '../../worker/sync/SharedSyncImplementation';
-import { AbstractSharedSyncClientProvider } from '../../worker/sync/AbstractSharedSyncClientProvider';
-import { PowerSyncConnectionOptions, PowerSyncCredentials, SyncStatus, SyncStatusOptions } from '@powersync/common';
-import { openWorkerDatabasePort } from '../../worker/db/open-worker-database';
+import {
+  WebStreamingSyncImplementation,
+  WebStreamingSyncImplementationOptions
+} from './WebStreamingSyncImplementation';
 
 /**
  * The shared worker will trigger methods on this side of the message port
@@ -112,7 +112,10 @@ export class SharedWebStreamingSyncImplementation extends WebStreamingSyncImplem
      * sync worker.
      */
     const { crudUploadThrottleMs, identifier, retryDelayMs } = this.options;
-    const dbOpenerPort = openWorkerDatabasePort(this.options.identifier!, true) as MessagePort;
+    const dbOpenerPort = openWorkerDatabasePort({
+      workerIdentifier: this.options.identifier!,
+      multipleTabs: true
+    }) as MessagePort;
     this.isInitialized = this.syncManager.init(Comlink.transfer(dbOpenerPort, [dbOpenerPort]), {
       dbName: this.options.identifier!,
       streamOptions: {

packages/web/src/worker/db/open-worker-database.ts

@@ -1,23 +1,29 @@
 import * as Comlink from 'comlink';
 import type { OpenDB } from '../../shared/types';
 
+export type OpenWorkerOptions = {
+  workerIdentifier: string;
+  multipleTabs?: boolean;
+  url?: URL;
+};
 /**
  * Opens a shared or dedicated worker which exposes opening of database connections
  */
-export function openWorkerDatabasePort(workerIdentifier: string, multipleTabs = true) {
+export function openWorkerDatabasePort(options: OpenWorkerOptions) {
+  const { workerIdentifier, multipleTabs = true, url } = options;
   /**
    *  Webpack V5 can bundle the worker automatically if the full Worker constructor syntax is used
    *  https://webpack.js.org/guides/web-workers/
    *  This enables multi tab support by default, but falls back if SharedWorker is not available
    *  (in the case of Android)
    */
   return multipleTabs
-    ? new SharedWorker(new URL('./SharedWASQLiteDB.worker.js', import.meta.url), {
+    ? new SharedWorker(url ?? new URL('./SharedWASQLiteDB.worker.js', import.meta.url), {
         /* @vite-ignore */
         name: `shared-DB-worker-${workerIdentifier}`,
         type: 'module'
       }).port
-    : new Worker(new URL('./WASQLiteDB.worker.js', import.meta.url), {
+    : new Worker(url ?? new URL('./WASQLiteDB.worker.js', import.meta.url), {
         /* @vite-ignore */
         name: `DB-worker-${workerIdentifier}`,
         type: 'module'
@@ -28,6 +34,6 @@ export function openWorkerDatabasePort(workerIdentifier: string, multipleTabs =
  * @returns A function which allows for opening database connections inside
  * a worker.
  */
-export function getWorkerDatabaseOpener(workerIdentifier: string, multipleTabs = true) {
-  return Comlink.wrap<OpenDB>(openWorkerDatabasePort(workerIdentifier, multipleTabs));
+export function getWorkerDatabaseOpener(options: OpenWorkerOptions) {
+  return Comlink.wrap<OpenDB>(openWorkerDatabasePort(options));
 }