React native web support via webpack

.changeset/light-dots-unite.md

@@ -0,0 +1,9 @@
+---
+'@powersync/attachments': patch
+'@powersync/common': patch
+'@powersync/kysely-driver': patch
+'@powersync/react': patch
+'@powersync/react-native': patch
+---
+
+Added react-native-web support.

.changeset/two-bats-return.md

@@ -0,0 +1,5 @@
+---
+'@powersync/web': patch
+---
+
+Added react-native-web support.

demos/react-native-supabase-todolist/app/_layout.tsx

@@ -1,7 +1,7 @@
 import { Stack } from 'expo-router';
 import React, { useMemo } from 'react';
 import { useSystem } from '../library/powersync/system';
-import { PowerSyncContext } from '@powersync/react-native';
+import { PowerSyncContext } from '@powersync/react';
 
 /**
  * This App uses a nested navigation stack.

demos/react-native-supabase-todolist/app/views/console.tsx

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import React from 'react';
 import { Table, Row } from 'react-native-reanimated-table';
-import { QueryResult } from '@powersync/react-native';
+import { QueryResult } from '@powersync/common';
 import { useSystem } from '../../library/powersync/system';
 import { ScrollView, TextInput } from 'react-native-gesture-handler';
 

demos/react-native-supabase-todolist/app/views/todos/edit/[id].tsx

@@ -1,16 +1,16 @@
 import { ATTACHMENT_TABLE, AttachmentRecord } from '@powersync/attachments';
-import { usePowerSync, useQuery } from '@powersync/react-native';
+import { usePowerSync, useQuery } from '@powersync/react';
 import { CameraCapturedPicture } from 'expo-camera';
 import _ from 'lodash';
 import * as React from 'react';
 import { StatusBar } from 'expo-status-bar';
 import { ScrollView, View, Text } from 'react-native';
 import { FAB } from 'react-native-elements';
 import { Stack, useLocalSearchParams } from 'expo-router';
-import prompt from 'react-native-prompt-android';
 import { TODO_TABLE, TodoRecord, LIST_TABLE } from '../../../../library/powersync/AppSchema';
 import { useSystem } from '../../../../library/powersync/system';
 import { TodoItemWidget } from '../../../../library/widgets/TodoItemWidget';
+import { prompt } from '../../../../library/utils/prompt';
 
 type TodoEntry = TodoRecord & Partial<Omit<AttachmentRecord, 'id'>> & { todo_id: string; attachment_id: string | null };
 
@@ -147,7 +147,7 @@ const TodoView: React.FC = () => {
 
               return createNewTodo(text);
             },
-            { placeholder: 'Todo description', style: 'shimo' }
+            { placeholder: 'Todo description' }
           );
         }}
       />

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

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { StatusBar } from 'expo-status-bar';
 import { ScrollView, View } from 'react-native';
 import { FAB, Text } from 'react-native-elements';
-import prompt from 'react-native-prompt-android';
 
 import { router, Stack } from 'expo-router';
 import { LIST_TABLE, TODO_TABLE, ListRecord } from '../../../library/powersync/AppSchema';
 import { useSystem } from '../../../library/powersync/system';
-import { useQuery, useStatus } from '@powersync/react-native';
+import { useQuery, useStatus } from '@powersync/react';
 import { ListItemWidget } from '../../../library/widgets/ListItemWidget';
+import { prompt } from '../../../library/utils/prompt';
 
 const description = (total: number, completed: number = 0) => {
   return `${total - completed} pending, ${completed} completed`;
@@ -63,7 +63,7 @@ const ListsViewWidget: React.FC = () => {
         icon={{ name: 'add', color: 'white' }}
         size="small"
         placement="right"
-        onPress={() => {
+        onPress={async () => {
           prompt(
             'Add a new list',
             '',
@@ -73,7 +73,7 @@ const ListsViewWidget: React.FC = () => {
               }
               await createNewList(name);
             },
-            { placeholder: 'List name', style: 'shimo' }
+            { placeholder: 'List name' }
           );
         }}
       />

demos/react-native-supabase-todolist/copy-files.js

@@ -0,0 +1,30 @@
+const fs = require('fs');
+const path = require('path');
+
+const sourceDir = path.join(__dirname, 'node_modules', '@powersync', 'web', 'dist');
+const destDir = path.join(__dirname, 'public');
+
+function copyRecursiveSync(src, dest) {
+  if (fs.existsSync(src) && fs.statSync(src).isDirectory()) {
+    // Create the destination directory if it doesn't exist
+    if (!fs.existsSync(dest)) {
+      fs.mkdirSync(dest, { recursive: true });
+    }
+    const files = fs.readdirSync(src);
+    // Copy each file/directory
+    files.forEach((file) => {
+      const srcFile = path.join(src, file);
+      const destFile = path.join(dest, file);
+      if (fs.statSync(srcFile).isDirectory()) {
+        copyRecursiveSync(srcFile, destFile);
+      } else {
+        fs.copyFileSync(srcFile, destFile);
+      }
+    });
+  } else {
+    console.error(`Source directory ${src} does not exist or is not a directory.`);
+  }
+}
+
+copyRecursiveSync(sourceDir, destDir);
+console.log(`Files copied from ${sourceDir} to ${destDir} successfully.`);

demos/react-native-supabase-todolist/ios/Podfile.lock

@@ -1241,6 +1241,8 @@ PODS:
     - React-logger (= 0.74.1)
     - React-perflogger (= 0.74.1)
     - React-utils (= 0.74.1)
+  - RNCAsyncStorage (1.23.1):
+    - React-Core
   - RNCMaskedView (0.1.11):
     - React
   - RNGestureHandler (2.16.2):
@@ -1407,6 +1409,7 @@ DEPENDENCIES:
   - React-runtimescheduler (from `../../../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
   - React-utils (from `../../../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../../../node_modules/react-native/ReactCommon`)
+  - "RNCAsyncStorage (from `../../../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCMaskedView (from `../../../node_modules/@react-native-community/masked-view`)"
   - RNGestureHandler (from `../../../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../../../node_modules/react-native-reanimated`)
@@ -1558,6 +1561,8 @@ EXTERNAL SOURCES:
     :path: "../../../node_modules/react-native/ReactCommon/react/utils"
   ReactCommon:
     :path: "../../../node_modules/react-native/ReactCommon"
+  RNCAsyncStorage:
+    :path: "../../../node_modules/@react-native-async-storage/async-storage"
   RNCMaskedView:
     :path: "../../../node_modules/@react-native-community/masked-view"
   RNGestureHandler:
@@ -1641,6 +1646,7 @@ SPEC CHECKSUMS:
   React-runtimescheduler: e2152ed146b6a35c07386fc2ac4827b27e6aad12
   React-utils: 3285151c9d1e3a28a9586571fc81d521678c196d
   ReactCommon: f42444e384d82ab89184aed5d6f3142748b54768
+  RNCAsyncStorage: 826b603ae9c0f88b5ac4e956801f755109fa4d5c
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
   RNGestureHandler: 2282cfbcf86c360d29f44ace393203afd5c6cff7
   RNReanimated: 33c6135cdf421b795c2f1173075a11cca2a39bf2

demos/react-native-supabase-todolist/ios/powersyncexample.xcodeproj/project.pbxproj

@@ -292,6 +292,7 @@
 				"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/ExpoConstants_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/ExpoFileSystem/ExpoFileSystem_privacy.bundle",
+				"${PODS_CONFIGURATION_BUILD_DIR}/RNCAsyncStorage/RNCAsyncStorage_resources.bundle",
 				"${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf",
 				"${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/Entypo.ttf",
 				"${PODS_ROOT}/../../../../node_modules/react-native-vector-icons/Fonts/EvilIcons.ttf",
@@ -318,6 +319,7 @@
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoConstants_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoFileSystem_privacy.bundle",
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNCAsyncStorage_resources.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AntDesign.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/Entypo.ttf",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EvilIcons.ttf",

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

@@ -1,5 +1,5 @@
 import { AttachmentTable } from '@powersync/attachments';
-import { Column, ColumnType, Index, IndexedColumn, Schema, Table } from '@powersync/react-native';
+import { Column, ColumnType, Index, IndexedColumn, Schema, Table } from '@powersync/common';
 
 export const TODO_TABLE = 'todos';
 export const LIST_TABLE = 'lists';

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

@@ -1,8 +1,8 @@
-import * as FileSystem from 'expo-file-system';
 import { randomUUID } from 'expo-crypto';
 import { AppConfig } from '../supabase/AppConfig';
-import { AbstractAttachmentQueue, AttachmentRecord, AttachmentState } from '@powersync/attachments';
+import { AbstractAttachmentQueue, AttachmentRecord, AttachmentState, EncodingType } from '@powersync/attachments';
 import { TODO_TABLE } from './AppSchema';
+import { FileSystem } from '../storage/FileSystem';
 
 export class PhotoAttachmentQueue extends AbstractAttachmentQueue {
   async init() {
@@ -38,7 +38,7 @@ export class PhotoAttachmentQueue extends AbstractAttachmentQueue {
     const photoAttachment = await this.newAttachmentRecord();
     photoAttachment.local_uri = this.getLocalFilePathSuffix(photoAttachment.filename);
     const localUri = this.getLocalUri(photoAttachment.local_uri);
-    await this.storage.writeFile(localUri, base64Data, { encoding: FileSystem.EncodingType.Base64 });
+    await this.storage.writeFile(localUri, base64Data, { encoding: EncodingType.Base64 });
 
     const fileInfo = await FileSystem.getInfoAsync(localUri);
     if (fileInfo.exists) {

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

@@ -1,7 +1,9 @@
 import '@azure/core-asynciterator-polyfill';
 
 import React from 'react';
-import { PowerSyncDatabase, SyncStreamConnectionMethod } from '@powersync/react-native';
+import { PowerSyncDatabase as PowerSyncDatabaseNative } from '@powersync/react-native';
+import { PowerSyncDatabase as PowerSyncDatabaseWeb } from '@powersync/web/umd';
+import { AbstractPowerSyncDatabase, SyncStreamConnectionMethod } from '@powersync/common';
 import { SupabaseStorageAdapter } from '../storage/SupabaseStorageAdapter';
 
 import { AppSchema } from './AppSchema';
@@ -18,19 +20,32 @@ export class System {
   kvStorage: KVStorage;
   storage: SupabaseStorageAdapter;
   supabaseConnector: SupabaseConnector;
-  powersync: PowerSyncDatabase;
+  powersync: AbstractPowerSyncDatabase;
   attachmentQueue: PhotoAttachmentQueue | undefined = undefined;
 
   constructor() {
     this.kvStorage = new KVStorage();
     this.supabaseConnector = new SupabaseConnector(this);
     this.storage = this.supabaseConnector.storage;
-    this.powersync = new PowerSyncDatabase({
-      schema: AppSchema,
-      database: {
-        dbFilename: 'sqlite.db'
-      }
-    });
+    if (PowerSyncDatabaseNative) {
+      this.powersync = new PowerSyncDatabaseNative({
+        schema: AppSchema,
+        database: {
+          dbFilename: 'sqlite.db'
+        }
+      });
+    } else {
+      this.powersync = new PowerSyncDatabaseWeb({
+        schema: AppSchema,
+        database: {
+          dbFilename: 'sqlite.db'
+        },
+        flags: {
+          // Only works when `enableMultiTabs` is true.
+          workerPath: '/node_modules/@powersync/web/dist/'
+        }
+      });
+    }
 
     if (AppConfig.supabaseBucket) {
       this.attachmentQueue = new PhotoAttachmentQueue({
@@ -51,7 +66,7 @@ export class System {
 
   async init() {
     await this.powersync.init();
-    await this.powersync.connect(this.supabaseConnector, { connectionMethod: SyncStreamConnectionMethod.WEB_SOCKET });
+    await this.powersync.connect(this.supabaseConnector);
 
     if (this.attachmentQueue) {
       await this.attachmentQueue.init();

demos/react-native-supabase-todolist/library/storage/FileSystem.ts

@@ -0,0 +1,37 @@
+import * as ExpoFileSystem from 'expo-file-system';
+import { Platform } from 'react-native';
+
+class WebFileSystem {
+  static documentDirectory = '';
+
+  static async getInfoAsync(...args: any[]): Promise<ExpoFileSystem.FileInfo> {
+    return {
+      exists: false,
+      isDirectory: false,
+      uri: ''
+    };
+  }
+
+  static async writeAsStringAsync(...args: any[]): Promise<void> {
+    // No operation, mock implementation
+  }
+
+  static async readAsStringAsync(...args: any[]): Promise<string> {
+    return ''; // Return an empty string as mock data
+  }
+
+  static async deleteAsync(...args: any[]): Promise<void> {
+    // No operation, mock implementation
+  }
+
+  static async makeDirectoryAsync(...args: any[]): Promise<void> {
+    // No operation, mock implementation
+  }
+
+  static async copyAsync(...args: any[]): Promise<void> {
+    // No operation, mock implementation
+  }
+}
+
+const isWeb = Platform.OS === 'web';
+export const FileSystem = isWeb ? WebFileSystem : ExpoFileSystem;

demos/react-native-supabase-todolist/library/storage/KVStorage.ts

@@ -1,9 +1,11 @@
-import { deleteItemAsync, getItemAsync, setItemAsync } from 'expo-secure-store';
+import * as ExpoStorage from 'expo-secure-store';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import { Platform } from 'react-native';
 
-export class KVStorage {
+class ExpoKVStorage {
   async getItem(key: string): Promise<string | null> {
     try {
-      const session = await getItemAsync(key);
+      const session = await ExpoStorage.getItemAsync(key);
       return session ?? null;
     } catch (error) {
       // There was an error on the native side
@@ -12,10 +14,33 @@ export class KVStorage {
   }
 
   async setItem(key: string, value: string): Promise<void> {
-    await setItemAsync(key, value);
+    await ExpoStorage.setItemAsync(key, value);
   }
 
   async removeItem(key: string): Promise<void> {
-    await deleteItemAsync(key);
+    await ExpoStorage.deleteItemAsync(key);
   }
 }
+
+class WebKVStorage {
+  async getItem(key: string): Promise<string | null> {
+    try {
+      const value = await AsyncStorage.getItem(key);
+      return value ?? null;
+    } catch (error) {
+      // There was an error
+      return null;
+    }
+  }
+
+  async setItem(key: string, value: string): Promise<void> {
+    await AsyncStorage.setItem(key, value);
+  }
+
+  async removeItem(key: string): Promise<void> {
+    await AsyncStorage.removeItem(key);
+  }
+}
+
+const isWeb = Platform.OS === 'web';
+export const KVStorage = isWeb ? WebKVStorage : ExpoKVStorage;

demos/react-native-supabase-todolist/library/storage/SupabaseStorageAdapter.ts

@@ -1,8 +1,8 @@
 import { SupabaseClient } from '@supabase/supabase-js';
 import { decode as decodeBase64 } from 'base64-arraybuffer';
-import * as FileSystem from 'expo-file-system';
 import { AppConfig } from '../supabase/AppConfig';
-import { StorageAdapter } from '@powersync/attachments';
+import { EncodingType, StorageAdapter } from '@powersync/attachments';
+import { FileSystem } from './FileSystem';
 
 export interface SupabaseStorageAdapterOptions {
   client: SupabaseClient;
@@ -49,23 +49,20 @@ export class SupabaseStorageAdapter implements StorageAdapter {
     fileURI: string,
     base64Data: string,
     options?: {
-      encoding?: FileSystem.EncodingType;
+      encoding?: EncodingType;
     }
   ): Promise<void> {
-    const { encoding = FileSystem.EncodingType.UTF8 } = options ?? {};
+    const { encoding = EncodingType.UTF8 } = options ?? {};
     await FileSystem.writeAsStringAsync(fileURI, base64Data, { encoding });
   }
-  async readFile(
-    fileURI: string,
-    options?: { encoding?: FileSystem.EncodingType; mediaType?: string }
-  ): Promise<ArrayBuffer> {
-    const { encoding = FileSystem.EncodingType.UTF8 } = options ?? {};
+  async readFile(fileURI: string, options?: { encoding?: EncodingType; mediaType?: string }): Promise<ArrayBuffer> {
+    const { encoding = EncodingType.UTF8 } = options ?? {};
     const { exists } = await FileSystem.getInfoAsync(fileURI);
     if (!exists) {
       throw new Error(`File does not exist: ${fileURI}`);
     }
     const fileContent = await FileSystem.readAsStringAsync(fileURI, options);
-    if (encoding === FileSystem.EncodingType.Base64) {
+    if (encoding === EncodingType.Base64) {
       return this.base64ToArrayBuffer(fileContent);
     }
     return this.stringToArrayBuffer(fileContent);

demos/react-native-supabase-todolist/library/supabase/SupabaseConnector.ts

@@ -1,4 +1,4 @@
-import { AbstractPowerSyncDatabase, CrudEntry, PowerSyncBackendConnector, UpdateType } from '@powersync/react-native';
+import { AbstractPowerSyncDatabase, CrudEntry, PowerSyncBackendConnector, UpdateType } from '@powersync/common';
 
 import { SupabaseClient, createClient } from '@supabase/supabase-js';
 import { AppConfig } from './AppConfig';