refactor: demos now use attachments functionality from the core libraries

Amine · Amine · commit 20bb3a317d61 · 2025-11-28T12:16:08.000+08:00
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
@@ -1,5 +1,4 @@
-import { ATTACHMENT_TABLE, attachmentFromSql, AttachmentRecord } from '@powersync/attachments';
-import { usePowerSync, useQuery } from '@powersync/react-native';
+import { usePowerSync, useQuery, ATTACHMENT_TABLE, attachmentFromSql, AttachmentRecord } from '@powersync/react-native';
 import { CameraCapturedPicture } from 'expo-camera';
 import _ from 'lodash';
 import * as React from 'react';
diff --git a/demos/react-native-supabase-todolist/library/powersync/AppSchema.ts b/demos/react-native-supabase-todolist/library/powersync/AppSchema.ts
@@ -1,5 +1,4 @@
-import { AttachmentTable } from '@powersync/attachments';
-import { column, Schema, Table } from '@powersync/react-native';
+import { column, Schema, Table, AttachmentTable } from '@powersync/react-native';
 
 export const LIST_TABLE = 'lists';
 export const TODO_TABLE = 'todos';
@@ -27,9 +26,7 @@ const lists = new Table({
 export const AppSchema = new Schema({
   todos,
   lists,
-  attachments: new AttachmentTable({
-    viewName: 'attachments',
-  }),
+  attachments: new AttachmentTable(),
 });
 
 export type Database = (typeof AppSchema)['types'];
diff --git a/demos/react-native-supabase-todolist/library/powersync/system.ts b/demos/react-native-supabase-todolist/library/powersync/system.ts
@@ -1,14 +1,11 @@
 import '@azure/core-asynciterator-polyfill';
 
-import { createBaseLogger, LogLevel, PowerSyncDatabase, SyncClientImplementation } from '@powersync/react-native';
-import React from 'react';
-
-import { 
+import { createBaseLogger, LogLevel, PowerSyncDatabase, SyncClientImplementation,   
   AttachmentQueue, 
   type AttachmentRecord, 
   ExpoFileSystemAdapter, 
-  type WatchedAttachmentItem 
-} from '@powersync/attachments';
+  type WatchedAttachmentItem } from '@powersync/react-native';
+import React from 'react';
 import { configureFts } from '../fts/fts_setup';
 import { KVStorage } from '../storage/KVStorage';
 import { SupabaseRemoteStorageAdapter } from '../storage/SupabaseRemoteStorageAdapter';
@@ -95,7 +92,8 @@ export class System {
           onDeleteError: async (attachment: AttachmentRecord, error: Error) => {
             return true; // Retry deletes by default
           }
-        }
+        },
+        logger,
       });
     }
   }
diff --git a/demos/react-native-supabase-todolist/library/storage/SupabaseRemoteStorageAdapter.ts b/demos/react-native-supabase-todolist/library/storage/SupabaseRemoteStorageAdapter.ts
@@ -1,5 +1,5 @@
 import { SupabaseClient } from '@supabase/supabase-js';
-import { AttachmentRecord, RemoteStorageAdapter } from '@powersync/attachments';
+import { AttachmentRecord, RemoteStorageAdapter } from '@powersync/react-native';
 
 export interface SupabaseRemoteStorageAdapterOptions {
   client: SupabaseClient;
diff --git a/demos/react-native-supabase-todolist/library/widgets/TodoItemWidget.tsx b/demos/react-native-supabase-todolist/library/widgets/TodoItemWidget.tsx
@@ -4,7 +4,7 @@ import { ActivityIndicator, Alert, View, Modal, StyleSheet, Text } from 'react-n
 import { ListItem, Button, Icon, Image } from '@rneui/themed';
 import { CameraWidget } from './CameraWidget';
 import { TodoRecord } from '../powersync/AppSchema';
-import { AttachmentRecord } from '@powersync/attachments';
+import { AttachmentRecord } from '@powersync/react-native';
 import { AppConfig } from '../supabase/AppConfig';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
diff --git a/demos/react-native-web-supabase-todolist/app/views/todos/edit/[id].tsx b/demos/react-native-web-supabase-todolist/app/views/todos/edit/[id].tsx
@@ -1,4 +1,4 @@
-import { ATTACHMENT_TABLE, AttachmentRecord } from '@powersync/attachments';
+import { ATTACHMENT_TABLE, AttachmentRecord } from '@powersync/react-native';
 import { usePowerSync, useQuery } from '@powersync/react';
 import { CameraCapturedPicture } from 'expo-camera';
 import _ from 'lodash';
@@ -78,9 +78,16 @@ const TodoView: React.FC = () => {
 
   const savePhoto = async (id: string, data: CameraCapturedPicture) => {
     // We are sure the base64 is not null, as we are using the base64 option in the CameraWidget
-    const { id: photoId } = await system.attachmentQueue.savePhoto(data.base64!);
-
-    await system.powersync.execute(`UPDATE ${TODO_TABLE} SET photo_id = ? WHERE id = ?`, [photoId, id]);
+    if (system.photoAttachmentQueue) {
+      // We are sure the base64 is not null, as we are using the base64 option in the CameraWidget
+      const { id: photoId } = await system.photoAttachmentQueue.saveFile({
+        data: data.base64!,
+        fileExtension: 'jpg',
+        mediaType: 'image/jpeg'
+      });
+
+      await system.powersync.execute(`UPDATE ${TODO_TABLE} SET photo_id = ? WHERE id = ?`, [photoId, id]);
+    }
   };
 
   const createNewTodo = async (description: string) => {
diff --git a/demos/react-native-web-supabase-todolist/library/powersync/AppSchema.ts b/demos/react-native-web-supabase-todolist/library/powersync/AppSchema.ts
@@ -1,5 +1,4 @@
-import { AttachmentTable } from '@powersync/attachments';
-import { column, Schema, Table } from '@powersync/common';
+import { column, Schema, Table, AttachmentTable } from '@powersync/react-native';
 
 export const LIST_TABLE = 'lists';
 export const TODO_TABLE = 'todos';
@@ -27,9 +26,7 @@ const lists = new Table({
 export const AppSchema = new Schema({
   todos,
   lists,
-  attachments: new AttachmentTable({
-    name: 'attachments'
-  })
+  attachments: new AttachmentTable()
 });
 
 export type Database = (typeof AppSchema)['types'];
diff --git a/demos/react-native-web-supabase-todolist/library/powersync/PhotoAttachmentQueue.ts b/demos/react-native-web-supabase-todolist/library/powersync/PhotoAttachmentQueue.ts
diff --git a/demos/react-native-web-supabase-todolist/library/powersync/system.ts b/demos/react-native-web-supabase-todolist/library/powersync/system.ts
@@ -1,38 +1,40 @@
 import '@azure/core-asynciterator-polyfill';
 
 import React from 'react';
-import { LogLevel, PowerSyncDatabase as PowerSyncDatabaseNative } from '@powersync/react-native';
-import { PowerSyncDatabase as PowerSyncDatabaseWeb, WASQLiteOpenFactory } from '@powersync/web';
-import { AbstractPowerSyncDatabase, createBaseLogger } from '@powersync/common';
-import { SupabaseStorageAdapter } from '../storage/SupabaseStorageAdapter';
-import { type AttachmentRecord } from '@powersync/attachments';
-import { KVStorage } from '../storage/KVStorage';
+import { AttachmentQueue, LogLevel, PowerSyncDatabase as PowerSyncDatabaseNative, AbstractPowerSyncDatabase, createBaseLogger, ExpoFileSystemAdapter, WatchedAttachmentItem } from '@powersync/react-native';
+import { PowerSyncDatabase as PowerSyncDatabaseWeb, WASQLiteOpenFactory, IndexDBFileSystemStorageAdapter } from '@powersync/web';
+import { type AttachmentRecord } from '@powersync/common';
+import { SupabaseRemoteStorageAdapter } from '../storage/SupabaseRemoteStorageAdapter';
+import { ExpoKVStorage, WebKVStorage } from '../storage/KVStorage';
 import { AppConfig } from '../supabase/AppConfig';
 import { SupabaseConnector } from '../supabase/SupabaseConnector';
-import { AppSchema } from './AppSchema';
-import { PhotoAttachmentQueue } from './PhotoAttachmentQueue';
+import { AppSchema, TODO_TABLE } from './AppSchema';
+import { Platform } from 'react-native';
 
 const logger = createBaseLogger();
 logger.useDefaults();
 logger.setLevel(LogLevel.DEBUG);
 
 export class System {
-  kvStorage: KVStorage;
-  storage: SupabaseStorageAdapter;
+  kvStorage: ExpoKVStorage | WebKVStorage;
   supabaseConnector: SupabaseConnector;
   powersync: AbstractPowerSyncDatabase;
-  attachmentQueue: PhotoAttachmentQueue | undefined = undefined;
+  photoAttachmentQueue: AttachmentQueue | undefined = undefined;
 
   constructor() {
-    this.kvStorage = new KVStorage();
-    this.supabaseConnector = new SupabaseConnector(this);
-    this.storage = this.supabaseConnector.storage;
+    this.kvStorage = Platform.OS === 'web' ? new WebKVStorage() : new ExpoKVStorage();
+    this.supabaseConnector = new SupabaseConnector({
+      kvStorage: this.kvStorage,
+      supabaseUrl: AppConfig.supabaseUrl,
+      supabaseAnonKey: AppConfig.supabaseAnonKey
+    });
     if (PowerSyncDatabaseNative) {
       this.powersync = new PowerSyncDatabaseNative({
         schema: AppSchema,
         database: {
           dbFilename: 'sqlite.db'
-        }
+        },
+        logger,
       });
     } else {
       const factory = new WASQLiteOpenFactory({
@@ -69,23 +71,48 @@ export class System {
           //     name: `shared-sync-${options?.dbFilename}`
           //   });
           // }
-        }
+        },
+        logger,
       });
     }
 
     if (AppConfig.supabaseBucket) {
-      this.attachmentQueue = new PhotoAttachmentQueue({
-        powersync: this.powersync,
-        storage: this.storage,
-        // Use this to handle download errors where you can use the attachment
-        // and/or the exception to decide if you want to retry the download
-        onDownloadError: async (attachment: AttachmentRecord, exception: any) => {
-          if (exception.toString() === 'StorageApiError: Object not found') {
-            return { retry: false };
+      const isWeb = Platform.OS === 'web';
+      const localStorage = isWeb ? new IndexDBFileSystemStorageAdapter() : new ExpoFileSystemAdapter();
+      const remoteStorage = new SupabaseRemoteStorageAdapter({
+        client: this.supabaseConnector.client,
+        bucket: AppConfig.supabaseBucket
+      });
+      this.photoAttachmentQueue = new AttachmentQueue({
+        db: this.powersync,
+        localStorage,
+        remoteStorage,
+        watchAttachments: (onUpdate) => {
+          this.powersync.watch(`SELECT photo_id as id FROM ${TODO_TABLE} WHERE photo_id IS NOT NULL`, [], {
+            onResult: (result) => {
+              const attachments: WatchedAttachmentItem[] = (result.rows?._array ?? []).map((row: any) => ({
+                id: row.id,
+                fileExtension: 'jpg'
+              }));
+              onUpdate(attachments);
+            }
+          });
+        },
+        errorHandler: {
+          onDownloadError: async (attachment: AttachmentRecord, error: Error) => {
+            if (error.toString() === 'StorageApiError: Object not found') {
+              return false; // Don't retry
+            }
+            return true; // Retry
+          },
+          onUploadError: async (attachment: AttachmentRecord, error: Error) => {
+            return true; // Retry uploads by default
+          },
+          onDeleteError: async (attachment: AttachmentRecord, error: Error) => {
+            return true; // Retry deletes by default
           }
-
-          return { retry: true };
-        }
+        },
+        logger,
       });
     }
   }
@@ -94,8 +121,8 @@ export class System {
     await this.powersync.init();
     await this.powersync.connect(this.supabaseConnector);
 
-    if (this.attachmentQueue) {
-      await this.attachmentQueue.init();
+    if (this.photoAttachmentQueue) {
+      await this.photoAttachmentQueue.startSync();
     }
   }
 }
diff --git a/demos/react-native-web-supabase-todolist/library/storage/KVStorage.ts b/demos/react-native-web-supabase-todolist/library/storage/KVStorage.ts
@@ -1,8 +1,7 @@
 import * as ExpoStorage from 'expo-secure-store';
 import AsyncStorage from '@react-native-async-storage/async-storage';
-import { Platform } from 'react-native';
 
-class ExpoKVStorage {
+export class ExpoKVStorage {
   async getItem(key: string): Promise<string | null> {
     try {
       const session = await ExpoStorage.getItemAsync(key);
@@ -22,7 +21,7 @@ class ExpoKVStorage {
   }
 }
 
-class WebKVStorage {
+export class WebKVStorage {
   async getItem(key: string): Promise<string | null> {
     try {
       const value = await AsyncStorage.getItem(key);
@@ -41,6 +40,3 @@ class WebKVStorage {
     await AsyncStorage.removeItem(key);
   }
 }
-
-const isWeb = Platform.OS === 'web';
-export const KVStorage = isWeb ? WebKVStorage : ExpoKVStorage;
diff --git a/demos/react-native-web-supabase-todolist/library/storage/SupabaseRemoteStorageAdapter.ts b/demos/react-native-web-supabase-todolist/library/storage/SupabaseRemoteStorageAdapter.ts
@@ -0,0 +1,53 @@
+import { SupabaseClient } from '@supabase/supabase-js';
+import { AttachmentRecord, RemoteStorageAdapter } from '@powersync/react-native';
+
+export interface SupabaseRemoteStorageAdapterOptions {
+  client: SupabaseClient;
+  bucket: string;
+}
+
+/**
+ * SupabaseRemoteStorageAdapter implements RemoteStorageAdapter for Supabase Storage.
+ * Handles upload, download, and deletion of files from Supabase Storage buckets.
+ */
+export class SupabaseRemoteStorageAdapter implements RemoteStorageAdapter {
+  constructor(private options: SupabaseRemoteStorageAdapterOptions) {}
+
+  async uploadFile(fileData: ArrayBuffer, attachment: AttachmentRecord): Promise<void> {
+    const mediaType = attachment.mediaType ?? 'application/octet-stream';
+
+    const { error } = await this.options.client.storage
+      .from(this.options.bucket)
+      .upload(attachment.filename, fileData, { contentType: mediaType });
+
+    if (error) {
+      throw error;
+    }
+  }
+
+  async downloadFile(attachment: AttachmentRecord): Promise<ArrayBuffer> {
+    const { data, error } = await this.options.client.storage.from(this.options.bucket).download(attachment.filename);
+
+    if (error) {
+      throw error;
+    }
+
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        resolve(reader.result as ArrayBuffer);
+      };
+      reader.onerror = reject;
+      reader.readAsArrayBuffer(data);
+    });
+  }
+
+  async deleteFile(attachment: AttachmentRecord): Promise<void> {
+    const { error } = await this.options.client.storage.from(this.options.bucket).remove([attachment.filename]);
+
+    if (error) {
+      console.debug('Failed to delete file from Supabase Storage', error);
+      throw error;
+    }
+  }
+}
diff --git a/demos/react-native-web-supabase-todolist/library/storage/SupabaseStorageAdapter.ts b/demos/react-native-web-supabase-todolist/library/storage/SupabaseStorageAdapter.ts
diff --git a/demos/react-native-web-supabase-todolist/library/supabase/SupabaseConnector.ts b/demos/react-native-web-supabase-todolist/library/supabase/SupabaseConnector.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,7 @@`
`1`	`1`	`import * as ExpoStorage from 'expo-secure-store';`
`2`	`2`	`import AsyncStorage from '@react-native-async-storage/async-storage';`
`3`		`-import { Platform } from 'react-native';`
`4`	`3`
`5`		`-class ExpoKVStorage {`
	`4`	`+export class ExpoKVStorage {`
`6`	`5`	`async getItem(key: string): Promise<string \| null> {`
`7`	`6`	`try {`
`8`	`7`	`const session = await ExpoStorage.getItemAsync(key);`
`@@ -22,7 +21,7 @@ class ExpoKVStorage {`
`22`	`21`	`}`
`23`	`22`	`}`
`24`	`23`
`25`		`-class WebKVStorage {`
	`24`	`+export class WebKVStorage {`
`26`	`25`	`async getItem(key: string): Promise<string \| null> {`
`27`	`26`	`try {`
`28`	`27`	`const value = await AsyncStorage.getItem(key);`
`@@ -41,6 +40,3 @@ class WebKVStorage {`
`41`	`40`	`await AsyncStorage.removeItem(key);`
`42`	`41`	`}`
`43`	`42`	`}`
`44`		`-`
`45`		`-const isWeb = Platform.OS === 'web';`
`46`		`-export const KVStorage = isWeb ? WebKVStorage : ExpoKVStorage;`