[Feature]: Improve client constructors (#211)

Co-authored-by: benitav <[email protected]>

Author: stevensJourney

.changeset/fuzzy-dots-shave.md

@@ -0,0 +1,7 @@
+---
+'@powersync/react-native': minor
+'@powersync/common': minor
+'@powersync/web': minor
+---
+
+Improved constructor behavior of `PowerSyncDatabase` and logic for open factories. Deprecated `RNQSPowerSyncDatabaseOpenFactory` and `WASQLitePowerSyncDatabaseOpenFactory`.

.gitignore

@@ -6,3 +6,5 @@ tsconfig.tsbuildinfo
 .DS_STORE
 .idea
 .fleet
+# Useful if running repository in VSCode dev container
+.pnpm-store

demos/example-capacitor/src/components/providers/SystemProvider.tsx

@@ -1,5 +1,5 @@
 import { PowerSyncContext } from '@powersync/react';
-import { WASQLitePowerSyncDatabaseOpenFactory } from '@powersync/web';
+import { PowerSyncDatabase } from '@powersync/web';
 import { CircularProgress } from '@mui/material';
 import Logger from 'js-logger';
 import React, { Suspense } from 'react';
@@ -15,14 +15,14 @@ const isIOs = platform === 'ios';
 // Web worker implementation does not work on iOS
 const useWebWorker = !isIOs;
 
-const powerSync = new WASQLitePowerSyncDatabaseOpenFactory({
-  dbFilename: 'powersync2.db',
+const powerSync = new PowerSyncDatabase({
+  database: { dbFilename: 'powersync2.db' },
   schema: AppSchema,
   flags: {
     enableMultiTabs: false,
     useWebWorker
   }
-}).getInstance();
+});
 const connector = new BackendConnector();
 
 powerSync.connect(connector);

demos/example-electron/src/components/providers/SystemProvider.tsx

@@ -1,5 +1,5 @@
 import { PowerSyncContext } from '@powersync/react';
-import { WASQLitePowerSyncDatabaseOpenFactory } from '@powersync/web';
+import { PowerSyncDatabase } from '@powersync/web';
 import { CircularProgress } from '@mui/material';
 import Logger from 'js-logger';
 import React, { Suspense } from 'react';
@@ -9,13 +9,13 @@ import { BackendConnector } from '../../library/powersync/BackendConnector.js';
 Logger.useDefaults();
 Logger.setLevel(Logger.DEBUG);
 
-const powerSync = new WASQLitePowerSyncDatabaseOpenFactory({
-  dbFilename: 'powersync2.db',
+const powerSync = new PowerSyncDatabase({
+  database: { dbFilename: 'powersync2.db' },
   schema: AppSchema,
   flags: {
     disableSSRWarning: true
   }
-}).getInstance();
+});
 const connector = new BackendConnector();
 
 powerSync.connect(connector);

demos/example-nextjs/src/components/providers/SystemProvider.tsx

@@ -3,7 +3,7 @@
 import { AppSchema } from '@/library/powersync/AppSchema';
 import { BackendConnector } from '@/library/powersync/BackendConnector';
 import { PowerSyncContext } from '@powersync/react';
-import { WASQLitePowerSyncDatabaseOpenFactory } from '@powersync/web';
+import { PowerSyncDatabase } from '@powersync/web';
 import { CircularProgress } from '@mui/material';
 import Logger from 'js-logger';
 import React, { Suspense } from 'react';
@@ -19,13 +19,13 @@ if (typeof self.Buffer == 'undefined') {
 Logger.useDefaults();
 Logger.setLevel(Logger.DEBUG);
 
-const powerSync = new WASQLitePowerSyncDatabaseOpenFactory({
-  dbFilename: 'powersync2.db',
+const powerSync = new PowerSyncDatabase({
+  database: { dbFilename: 'powersync2.db' },
   schema: AppSchema,
   flags: {
     disableSSRWarning: true
   }
-}).getInstance();
+});
 const connector = new BackendConnector();
 
 powerSync.connect(connector);

demos/example-vite/src/index.js

@@ -1,4 +1,4 @@
-import { Column, ColumnType, WASQLitePowerSyncDatabaseOpenFactory, Schema, Table } from '@powersync/web';
+import { Column, ColumnType, Schema, Table, PowerSyncDatabase } from '@powersync/web';
 import Logger from 'js-logger';
 
 Logger.useDefaults();
@@ -26,10 +26,10 @@ export const AppSchema = new Schema([
 let PowerSync;
 
 const openDatabase = async () => {
-  PowerSync = new WASQLitePowerSyncDatabaseOpenFactory({
+  PowerSync = new PowerSyncDatabase({
     schema: AppSchema,
-    dbFilename: 'test.sqlite'
-  }).getInstance();
+    database: { dbFilename: 'test.sqlite' }
+  });
 
   await PowerSync.init();
 

demos/example-webpack/src/index.js

@@ -1,4 +1,4 @@
-import { Column, ColumnType, WASQLitePowerSyncDatabaseOpenFactory, Schema, Table } from '@powersync/web';
+import { Column, ColumnType, Schema, Table, PowerSyncDatabase } from '@powersync/web';
 import Logger from 'js-logger';
 
 Logger.useDefaults();
@@ -26,10 +26,10 @@ export const AppSchema = new Schema([
 let PowerSync;
 
 const openDatabase = async () => {
-  PowerSync = new WASQLitePowerSyncDatabaseOpenFactory({
+  PowerSync = new PowerSyncDatabase({
     schema: AppSchema,
-    dbFilename: 'test.sqlite'
-  }).getInstance();
+    database: { dbFilename: 'test.sqlite' }
+  });
 
   await PowerSync.init();
 

demos/react-multi-client/src/library/TimedPowerSyncDatabase.ts

@@ -29,7 +29,7 @@ export class TimedPowerSyncDatabase extends PowerSyncDatabase {
 
   constructor(options: WebPowerSyncDatabaseOptions) {
     super(options);
-    this.localKey = `${this.options.database.name}_connecting`;
+    this.localKey = `${this.database.name}_connecting`;
   }
 
   registerListener(listener: Partial<TimedPowerSyncListener>) {

demos/react-native-supabase-group-chat/src/providers/PowerSync.tsx

@@ -1,6 +1,6 @@
 import '@azure/core-asynciterator-polyfill';
 import 'react-native-polyfill-globals/auto';
-import { PowerSyncContext, RNQSPowerSyncDatabaseOpenFactory } from '@powersync/react-native';
+import { PowerSyncContext, PowerSyncDatabase } from '@powersync/react-native';
 import Logger from 'js-logger';
 import { ReactNode, useMemo } from 'react';
 
@@ -10,19 +10,18 @@ import { schema } from '../lib/schema';
 
 Logger.useDefaults();
 
-const factory = new RNQSPowerSyncDatabaseOpenFactory({
-  schema,
-  dbFilename: 'test.sqlite'
-  //location: 'optional location directory to DB file'
-});
-
 const connector = new Connector();
 
 export const PowerSyncProvider = ({ children }: { children: ReactNode }) => {
   const { isSyncEnabled } = useAuth();
 
   const powerSync = useMemo(() => {
-    const powerSync = factory.getInstance();
+    const powerSync = new PowerSyncDatabase({
+      schema,
+      database: { dbFilename: 'test.sqlite' }
+      //location: 'optional location directory to DB file'
+    });
+
     powerSync.init();
 
     if (isSyncEnabled) {

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

@@ -1,11 +1,7 @@
 import '@azure/core-asynciterator-polyfill';
 import 'react-native-polyfill-globals/auto';
 import React from 'react';
-import {
-  AbstractPowerSyncDatabase,
-  RNQSPowerSyncDatabaseOpenFactory,
-  SyncStreamConnectionMethod
-} from '@powersync/react-native';
+import { PowerSyncDatabase, SyncStreamConnectionMethod } from '@powersync/react-native';
 import { SupabaseStorageAdapter } from '../storage/SupabaseStorageAdapter';
 
 import { AppSchema } from './AppSchema';
@@ -31,19 +27,19 @@ export class System {
   kvStorage: KVStorage;
   storage: SupabaseStorageAdapter;
   supabaseConnector: SupabaseConnector;
-  powersync: AbstractPowerSyncDatabase;
+  powersync: PowerSyncDatabase;
   attachmentQueue: PhotoAttachmentQueue | undefined = undefined;
 
   constructor() {
     this.kvStorage = new KVStorage();
-    const factory = new RNQSPowerSyncDatabaseOpenFactory({
-      schema: AppSchema,
-      dbFilename: 'sqlite.db'
-    });
-
     this.supabaseConnector = new SupabaseConnector(this);
     this.storage = this.supabaseConnector.storage;
-    this.powersync = factory.getInstance();
+    this.powersync = new PowerSyncDatabase({
+      schema: AppSchema,
+      database: {
+        dbFilename: 'sqlite.db'
+      }
+    });
 
     if (AppConfig.supabaseBucket) {
       this.attachmentQueue = new PhotoAttachmentQueue({