Merge branch 'main' into configurable-vfs

# Conflicts:
#	demos/react-supabase-todolist/package.json
#	packages/web/package.json
#	pnpm-lock.yaml

Author: Chriztiaan

demos/angular-supabase-todolist/.gitignore

@@ -166,3 +166,5 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+src/assets/@powersync

demos/angular-supabase-todolist/README.md

@@ -8,7 +8,7 @@ This demo is currently in an alpha release.
 
 Demo app demonstrating use of the [PowerSync SDK for Web](https://www.npmjs.com/package/@powersync/web) together with Supabase.
 
-A step-by-step guide on Supabase<>PowerSync integration is available [here](https://docs.powersync.com/integration-guides/supabase).
+A step-by-step guide on Supabase<>PowerSync integration is available [here](https://docs.powersync.com/integration-guides/supabase-+-powersync).
 
 ## Quick Start
 
@@ -19,7 +19,10 @@ A step-by-step guide on Supabase<>PowerSync integration is available [here](http
 5. In a new terminal run `pnpm start` to start the server
 6. Go to <http://localhost:8080>
 
-**Note:** The Angular development server (`pnpm serve`) doesn't support service worker applications
+### Notes
+
+- The Angular development server (`pnpm serve`) doesn't support service worker applications
+- For Angular, workers need to be configured when instantiating `PowerSyncDatabase`. To do this, copy the worker assets (`pnpm powersync-web copy-assets -o src/assets` - done automatically in this demo for serving and building) and ensure the worker paths are specified ([example here](./src/app/powersync.service.ts)).
 
 ## Development Server
 

demos/angular-supabase-todolist/package.json

@@ -2,12 +2,14 @@
   "name": "angular-supabase-todolist",
   "version": "0.0.25",
   "scripts": {
+    "copy-assets": "pnpm powersync-web copy-assets -o src/assets",
     "ng": "ng",
-    "serve": "ng serve",
+    "serve": "pnpm copy-assets && ng serve",
     "start": "http-server -p 8080 -c-1 dist/",
-    "build": "ng build",
+    "build": "pnpm copy-assets && ng build",
     "format": "prettier --write .",
     "test:build": "pnpm build",
+    "prewatch": "pnpm copy-assets",
     "watch": "ng build --watch --configuration development"
   },
   "private": true,
@@ -21,7 +23,7 @@
     "@angular/platform-browser-dynamic": "^18.1.1",
     "@angular/router": "^18.1.1",
     "@angular/service-worker": "^18.1.1",
-    "@journeyapps/wa-sqlite": "^1.0.0",
+    "@journeyapps/wa-sqlite": "^1.2.0",
     "@powersync/web": "workspace:*",
     "@supabase/supabase-js": "^2.44.4",
     "rxjs": "~7.8.1",

demos/angular-supabase-todolist/src/app/powersync.service.ts

@@ -6,9 +6,10 @@ import {
   Index,
   IndexedColumn,
   PowerSyncBackendConnector,
+  PowerSyncDatabase,
   Schema,
   Table,
-  WASQLitePowerSyncDatabaseOpenFactory
+  WASQLiteOpenFactory
 } from '@powersync/web';
 
 export interface ListRecord {
@@ -63,11 +64,21 @@ export class PowerSyncService {
   db: AbstractPowerSyncDatabase;
 
   constructor() {
-    const PowerSyncFactory = new WASQLitePowerSyncDatabaseOpenFactory({
+    const factory = new WASQLiteOpenFactory({
+      dbFilename: 'test.db',
+
+      // Specify the path to the worker script
+      worker: 'assets/@powersync/worker/WASQLiteDB.umd.js'
+    });
+
+    this.db = new PowerSyncDatabase({
       schema: AppSchema,
-      dbFilename: 'test.db'
+      database: factory,
+      sync: {
+        // Specify the path to the worker script
+        worker: 'assets/@powersync/worker/SharedSyncImplementation.umd.js'
+      }
     });
-    this.db = PowerSyncFactory.getInstance();
   }
 
   setupPowerSync = async (connector: PowerSyncBackendConnector) => {

demos/angular-supabase-todolist/src/app/supabase.service.ts

@@ -65,10 +65,8 @@ export class SupabaseService implements PowerSyncBackendConnector {
     }
 
     return {
-      client: this.supabase,
       endpoint: environment.powersyncUrl,
-      token: session.access_token ?? '',
-      expiresAt: session.expires_at ? new Date(session.expires_at * 1000) : undefined
+      token: session.access_token ?? ''
     };
   }
 

demos/django-react-native-todolist/app/views/todos/lists.tsx

@@ -34,7 +34,7 @@ const App = () => {
                 return;
               }
 
-              const { userID } = await system.djangoConnector.fetchCredentials();
+              const userID = await system.djangoConnector.userId();
 
               await system.powersync.execute(
                 `INSERT INTO ${LIST_TABLE} (id, created_at, name, owner_id) VALUES (uuid(), datetime(), ?, ?)`,

demos/django-react-native-todolist/library/django/DjangoConnector.ts

@@ -35,6 +35,10 @@ export class DjangoConnector implements PowerSyncBackendConnector {
     return this.apiClient.register(username, password);
   }
 
+  async userId() {
+    return Storage.getItem('id');
+  }
+
   async fetchCredentials() {
     // The demo does not invalidate or update a user token, you should implement this in your app
     // The app stores the user id in local storage
@@ -45,9 +49,7 @@ export class DjangoConnector implements PowerSyncBackendConnector {
     const session = await this.apiClient.getToken(userId);
     return {
       endpoint: AppConfig.powersyncUrl,
-      token: session.token ?? '',
-      expiresAt: undefined,
-      userID: userId
+      token: session.token ?? ''
     };
   }
 

demos/django-react-native-todolist/library/powersync/AppSchema.ts

@@ -1,9 +1,9 @@
-import { column, Schema, TableV2 } from '@powersync/react-native';
+import { column, Schema, Table } from '@powersync/react-native';
 
 export const LIST_TABLE = 'lists';
 export const TODO_TABLE = 'todos';
 
-const todos = new TableV2(
+const todos = new Table(
   {
     list_id: column.text,
     created_at: column.text,
@@ -17,7 +17,7 @@ const todos = new TableV2(
   { indexes: { list: ['list_id'] } }
 );
 
-const lists = new TableV2({
+const lists = new Table({
   created_at: column.text,
   name: column.text,
   owner_id: column.text

demos/django-react-native-todolist/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
     "@expo/vector-icons": "^14.0.0",
-    "@journeyapps/react-native-quick-sqlite": "^2.2.0",
+    "@journeyapps/react-native-quick-sqlite": "^2.3.0",
     "@powersync/common": "workspace:*",
     "@powersync/react": "workspace:*",
     "@powersync/react-native": "workspace:*",

demos/example-capacitor/package.json

@@ -23,7 +23,7 @@
     "@capacitor/core": "latest",
     "@capacitor/ios": "^6.0.0",
     "@capacitor/splash-screen": "latest",
-    "@journeyapps/wa-sqlite": "^1.0.0",
+    "@journeyapps/wa-sqlite": "^1.2.0",
     "@powersync/react": "workspace:*",
     "@powersync/web": "workspace:*",
     "js-logger": "^1.6.1",