Remove react native polyfills and RNQS support (#1010)

Author: simolus3

.changeset/dirty-planets-battle.md

@@ -0,0 +1,15 @@
+---
+'@powersync/react-native': major
+---
+
+This release removes polyfills previously embedded into the React Native SDK to support
+older React Native versions.
+
+In particular, the following polyfills have been removed:
+
+- `TextEncoder` and `TextDecoder`: Support for `TextDecoder` has recently been added to React Native,
+  and the SDK only uses it with very old PowerSync service versions as binary streams are preferred.
+- `react-native-fetch-api`: The package was effectively unmaintained. We now use `expo/fetch` as a default
+  HTTP client. When unavailable, we fall back to the builtin `fetch` polyfill in React Native.
+  Note that this doesn't support streams, so we recommend enabling `{ connectionMethod: SyncStreamConnectionMethod.WEB_SOCKET }` for non-Expo apps with PowerSync.
+- `ReadableStream`: We expect that `fetch` implementations correctly implement `Response.getReader()`.

.changeset/sixty-peas-grow.md

@@ -2,7 +2,6 @@
 '@powersync/react-native': major
 '@powersync/web': major
 '@powersync/common': major
-'@powersync/op-sqlite': minor
 '@powersync/node': minor
 'tauri-plugin-powersync': patch
 '@powersync/tauri-plugin': patch

.changeset/wicked-waves-doubt.md

@@ -0,0 +1,24 @@
+---
+'@powersync/react-native': major
+---
+
+Remove support for React Native Quick SQLite (RNQS). Additionally, `OPSqliteOpenFactory` is now the default and part
+of the `@powersync/react-native` package.
+
+To upgrade, drop dependencies on `@powersync/op-sqlite`. If you've previously used RNQS, also add a dependency on
+`@op-engineering/op-sqlite`.
+
+If you've previously used a `OPSqliteOpenFactory`, all options are now available on the `PowerSyncDatabase`
+constructor directly:
+
+```TypeScript
+// Before
+const db = new PowerSyncDatabase({
+  database: new OPSqliteOpenFactory({dbFilename: 'test.db'})
+});
+
+// After
+const db = new PowerSyncDatabase({
+  database: { dbFilename: 'test.db' }
+});
+```

demos/react-native-barebones-opsqlite/App.tsx

@@ -11,8 +11,15 @@ import {
   ActivityIndicator
 } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
-import { OPSqliteOpenFactory } from '@powersync/op-sqlite';
-import { column, Table, Schema, type PowerSyncBackendConnector, PowerSyncDatabase } from '@powersync/react-native';
+import {
+  column,
+  Table,
+  Schema,
+  type PowerSyncBackendConnector,
+  PowerSyncDatabase,
+  createConsoleLogger,
+  LogLevels
+} from '@powersync/react-native';
 
 const Colors = {
   primary: '#0a7ea4',
@@ -24,18 +31,7 @@ const Colors = {
   darker: '#1a1a1a'
 };
 
-const RANDOM_NAMES = [
-  'Alex',
-  'Jordan',
-  'Sam',
-  'Casey',
-  'Riley',
-  'Morgan',
-  'Quinn',
-  'Avery',
-  'Taylor',
-  'Jamie'
-];
+const RANDOM_NAMES = ['Alex', 'Jordan', 'Sam', 'Casey', 'Riley', 'Morgan', 'Quinn', 'Avery', 'Taylor', 'Jamie'];
 
 /**
  * A placeholder connector which doesn't do anything but used to confirm connect can run.
@@ -59,13 +55,12 @@ let powerSync: PowerSyncDatabase | null = null;
 const setupDatabase = async (): Promise<PowerSyncDatabase> => {
   if (powerSync) return powerSync;
 
-  const factory = new OPSqliteOpenFactory({
-    dbFilename: 'powersync.db'
-  });
-
   powerSync = new PowerSyncDatabase({
     schema,
-    database: factory
+    database: {
+      dbFilename: 'powersync.db'
+    },
+    logger: createConsoleLogger({ minLevel: LogLevels.debug })
   });
 
   await powerSync.init();
@@ -155,9 +150,7 @@ function App(): React.JSX.Element {
         />
         <View style={styles.header}>
           <Text style={[styles.headerTitle, { color: textColor }]}>Customers</Text>
-          <Text style={[styles.headerSubtitle, { color: mutedColor }]}>
-            PowerSync + OP-SQLite
-          </Text>
+          <Text style={[styles.headerSubtitle, { color: mutedColor }]}>PowerSync + OP-SQLite</Text>
         </View>
 
         {loading ? (
@@ -169,8 +162,7 @@ function App(): React.JSX.Element {
           <ScrollView
             contentInsetAdjustmentBehavior="automatic"
             style={backgroundStyle}
-            contentContainerStyle={styles.scrollContent}
-          >
+            contentContainerStyle={styles.scrollContent}>
             <View style={[styles.card, { backgroundColor: cardBg }]}>
               {customers.length === 0 ? (
                 <Text style={[styles.emptyText, { color: mutedColor }]}>No customers yet.</Text>
@@ -181,8 +173,7 @@ function App(): React.JSX.Element {
                     <TouchableOpacity
                       style={styles.deleteButton}
                       onPress={() => deleteCustomer(c.id)}
-                      disabled={deletingId !== null}
-                    >
+                      disabled={deletingId !== null}>
                       {deletingId === c.id ? (
                         <ActivityIndicator size="small" color={Colors.primary} />
                       ) : (
@@ -197,8 +188,7 @@ function App(): React.JSX.Element {
             <TouchableOpacity
               style={[styles.button, adding && styles.buttonDisabled]}
               onPress={addRandomCustomer}
-              disabled={adding}
-            >
+              disabled={adding}>
               {adding ? (
                 <ActivityIndicator size="small" color={Colors.white} />
               ) : (