Merge branch 'main' into configurable-vfs

# Conflicts: # demos/react-supabase-todolist/package.json # packages/web/package.json # pnpm-lock.yaml
powersync-ja · Jan 13, 2025 · 319e403 · 319e403
2 parents 77543e3 + f0b6394
commit 319e403
Show file tree

Hide file tree

Showing 105 changed files with 30,580 additions and 19,396 deletions.
diff --git a/demos/angular-supabase-todolist/.gitignore b/demos/angular-supabase-todolist/.gitignore
@@ -166,3 +166,5 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+src/assets/@powersync
diff --git a/demos/angular-supabase-todolist/README.md b/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
 

diff --git a/demos/angular-supabase-todolist/package.json b/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",

diff --git a/demos/angular-supabase-todolist/src/app/powersync.service.ts b/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) => {

diff --git a/demos/angular-supabase-todolist/src/app/supabase.service.ts b/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 ?? ''
     };
   }
 

diff --git a/demos/django-react-native-todolist/app/views/todos/lists.tsx b/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(), ?, ?)`,

diff --git a/demos/django-react-native-todolist/library/django/DjangoConnector.ts b/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 ?? ''
     };
   }
 

diff --git a/demos/django-react-native-todolist/library/powersync/AppSchema.ts b/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

diff --git a/demos/django-react-native-todolist/package.json b/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:*",

diff --git a/demos/example-capacitor/package.json b/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",

diff --git a/demos/example-capacitor/src/library/powersync/AppSchema.ts b/demos/example-capacitor/src/library/powersync/AppSchema.ts
@@ -1,6 +1,6 @@
-import { column, Schema, TableV2 } from '@powersync/web';
+import { column, Schema, Table } from '@powersync/web';
 
-const customers = new TableV2({
+const customers = new Table({
   name: column.text,
   created_at: column.text
 });

diff --git a/demos/example-electron/package.json b/demos/example-electron/package.json
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
-    "@journeyapps/wa-sqlite": "^1.0.0",
+    "@journeyapps/wa-sqlite": "^1.2.0",
     "@mui/icons-material": "^5.15.16",
     "@mui/material": "^5.15.16",
     "@mui/x-data-grid": "^6.19.11",

diff --git a/demos/example-electron/src/library/powersync/AppSchema.ts b/demos/example-electron/src/library/powersync/AppSchema.ts
@@ -1,6 +1,6 @@
-import { column, Schema, TableV2 } from '@powersync/web';
+import { column, Schema, Table } from '@powersync/web';
 
-const customers = new TableV2({
+const customers = new Table({
   name: column.text,
   created_at: column.text
 });

diff --git a/demos/example-nextjs/package.json b/demos/example-nextjs/package.json
@@ -14,7 +14,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@fontsource/roboto": "^5.0.13",
-    "@journeyapps/wa-sqlite": "^1.0.0",
+    "@journeyapps/wa-sqlite": "^1.2.0",
     "@lexical/react": "^0.15.0",
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",

diff --git a/demos/example-nextjs/src/library/powersync/AppSchema.ts b/demos/example-nextjs/src/library/powersync/AppSchema.ts
@@ -1,6 +1,6 @@
-import { column, Schema, TableV2 } from '@powersync/web';
+import { column, Schema, Table } from '@powersync/web';
 
-const customers = new TableV2({
+const customers = new Table({
   name: column.text,
   created_at: column.text
 });

diff --git a/demos/react-multi-client/package.json b/demos/react-multi-client/package.json
@@ -10,7 +10,7 @@
     "test:build": "pnpm build"
   },
   "dependencies": {
-    "@journeyapps/wa-sqlite": "^1.0.0",
+    "@journeyapps/wa-sqlite": "^1.2.0",
     "@powersync/react": "workspace:*",
     "@powersync/web": "workspace:*",
     "@supabase/supabase-js": "^2.43.1",

diff --git a/demos/react-multi-client/src/library/SupabaseConnector.ts b/demos/react-multi-client/src/library/SupabaseConnector.ts
@@ -70,8 +70,7 @@ export class SupabaseConnector extends BaseObserver<SupabaseConnectorListener> i
 
     return {
       token: token,
-      endpoint: import.meta.env.VITE_POWERSYNC_URL,
-      expiresAt: expires_at ? new Date(expires_at) : undefined
+      endpoint: import.meta.env.VITE_POWERSYNC_URL
     };
   }
 

diff --git a/demos/react-native-supabase-group-chat/package.json b/demos/react-native-supabase-group-chat/package.json
@@ -21,7 +21,7 @@
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
     "@faker-js/faker": "8.3.1",
-    "@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:*",

diff --git a/demos/react-native-supabase-group-chat/src/lib/connector.ts b/demos/react-native-supabase-group-chat/src/lib/connector.ts
@@ -36,11 +36,8 @@ export class Connector implements PowerSyncBackendConnector {
     console.debug('session expires at', session.expires_at);
 
     return {
-      client: this.supabaseClient,
       endpoint: config.powerSyncUrl,
-      token: session.access_token ?? '',
-      expiresAt: session.expires_at ? new Date(session.expires_at * 1000) : undefined,
-      userID: session.user.id
+      token: session.access_token ?? ''
     };
   }
 

diff --git a/demos/react-native-supabase-todolist/README.md b/demos/react-native-supabase-todolist/README.md
@@ -4,7 +4,7 @@
 
 Demo app demonstrating use of the [PowerSync SDK for React Native](https://www.npmjs.com/package/@powersync/react-native) 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).
 Follow all the steps until, but not including, [Test Everything (Using Our Demo App)](https://docs.powersync.com/integration-guides/supabase-+-powersync#test-everything-using-our-demo-app).
 
 ## Getting Started
@@ -51,4 +51,3 @@ General information on defining environment variables with Expo can be found her
 Check out [the PowerSync SDK for React Native on GitHub](https://github.com/powersync-ja/powersync-js/tree/main/packages/react-native) - your feedback and contributions are welcome!
 
 To learn more about PowerSync, see the [PowerSync docs](https://docs.powersync.com).
-
diff --git a/demos/react-native-supabase-todolist/app/_layout.tsx b/demos/react-native-supabase-todolist/app/_layout.tsx
@@ -1,7 +1,9 @@
-import { Stack } from 'expo-router';
+import { router, Stack } from 'expo-router';
 import React, { useMemo } from 'react';
 import { useSystem } from '../library/powersync/system';
 import { PowerSyncContext } from '@powersync/react-native';
+import { Pressable } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
 
 /**
  * This App uses a nested navigation stack.
@@ -30,6 +32,21 @@ const HomeLayout = () => {
 
         <Stack.Screen name="index" options={{ headerShown: false }} />
         <Stack.Screen name="views" options={{ headerShown: false }} />
+        <Stack.Screen
+          name="search_modal"
+          options={{
+            headerTitle: 'Search',
+            headerRight: () => (
+              <Pressable
+                onPress={() => {
+                  router.back();
+                }}>
+                <MaterialIcons name="close" color="#fff" size={24} />
+              </Pressable>
+            ),
+            presentation: 'fullScreenModal'
+          }}
+        />
       </Stack>
     </PowerSyncContext.Provider>
   );

diff --git a/demos/react-native-supabase-todolist/app/search_modal.tsx b/demos/react-native-supabase-todolist/app/search_modal.tsx
@@ -0,0 +1,21 @@
+import { StatusBar } from 'expo-status-bar';
+import { StyleSheet, View } from 'react-native';
+import { SearchBarWidget } from '../library/widgets/SearchBarWidget';
+
+export default function Modal() {
+  return (
+    <View style={styles.container}>
+      <SearchBarWidget />
+      <StatusBar style={'light'} />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexGrow: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
diff --git a/demos/react-native-supabase-todolist/app/views/todos/edit/[id].tsx b/demos/react-native-supabase-todolist/app/views/todos/edit/[id].tsx
@@ -59,7 +59,7 @@ const TodoView: React.FC = () => {
   const toggleCompletion = async (record: TodoRecord, completed: boolean) => {
     const updatedRecord = { ...record, completed: completed };
     if (completed) {
-      const { userID } = await system.supabaseConnector.fetchCredentials();
+      const userID = await system.supabaseConnector.userId();
       updatedRecord.completed_at = new Date().toISOString();
       updatedRecord.completed_by = userID;
     } else {
@@ -86,7 +86,7 @@ const TodoView: React.FC = () => {
   };
 
   const createNewTodo = async (description: string) => {
-    const { userID } = await system.supabaseConnector.fetchCredentials();
+    const userID = await system.supabaseConnector.userId();
 
     await powerSync.execute(
       `INSERT INTO

diff --git a/demos/react-native-supabase-todolist/app/views/todos/lists.tsx b/demos/react-native-supabase-todolist/app/views/todos/lists.tsx
@@ -29,7 +29,7 @@ const ListsViewWidget: React.FC = () => {
       `);
 
   const createNewList = async (name: string) => {
-    const { userID } = await system.supabaseConnector.fetchCredentials();
+    const userID = await system.supabaseConnector.userId();
 
     const res = await system.powersync.execute(
       `INSERT INTO ${LIST_TABLE} (id, created_at, name, owner_id) VALUES (uuid(), datetime(), ?, ?) RETURNING *`,