Restore RN compatibility

Author: simolus3

packages/common/src/client/AbstractPowerSyncDatabase.ts

@@ -15,7 +15,7 @@ import { UploadQueueStats } from '../db/crud/UploadQueueStatus.js';
 import { Schema } from '../db/schema/Schema.js';
 import { BaseObserver } from '../utils/BaseObserver.js';
 import { ControlledExecutor } from '../utils/ControlledExecutor.js';
-import { throttleTrailing } from '../utils/async.js';
+import { symbolAsyncIterator, throttleTrailing } from '../utils/async.js';
 import { ConnectionManager } from './ConnectionManager.js';
 import { CustomQuery } from './CustomQuery.js';
 import { ArrayQueryDefinition, Query } from './Query.js';
@@ -632,11 +632,8 @@ export abstract class AbstractPowerSyncDatabase extends BaseObserver<PowerSyncDB
    * @returns A transaction of CRUD operations to upload, or null if there are none
    */
   async getNextCrudTransaction(): Promise<CrudTransaction | null> {
-    for await (const transaction of this.getCrudTransactions()) {
-      return transaction;
-    }
-
-    return null;
+    const iterator = this.getCrudTransactions()[symbolAsyncIterator]();
+    return (await iterator.next()).value;
   }
 
   /**
@@ -652,9 +649,9 @@ export abstract class AbstractPowerSyncDatabase extends BaseObserver<PowerSyncDB
    *
    * This can be used to upload multiple transactions in a single batch, e.g with:
    *
-   * ```TypeScript
-   * let lastTransaction: CrudTransaction | null = null;
-   * let batch: CrudEntry[] = [];
+   * ```JavaScript
+   * let lastTransaction = null;
+   * let batch = [];
    *
    * for await (const transaction of database.getCrudTransactions()) {
    *   batch.push(...transaction.crud);
@@ -667,10 +664,15 @@ export abstract class AbstractPowerSyncDatabase extends BaseObserver<PowerSyncDB
    * ```
    *
    * If there is no local data to upload, the async iterator complete without emitting any items.
+   *
+   * Note that iterating over async iterables requires a [polyfill](https://github.com/powersync-ja/powersync-js/tree/main/packages/react-native#babel-plugins-watched-queries)
+   * for React Native.
    */
-  async *getCrudTransactions(): AsyncIterable<CrudTransaction> {
-    let lastCrudItemId = -1;
-    const sql = `
+  getCrudTransactions(): AsyncIterable<CrudTransaction, null> {
+    return {
+      [symbolAsyncIterator]: () => {
+        let lastCrudItemId = -1;
+        const sql = `
 WITH RECURSIVE crud_entries AS (
   SELECT id, tx_id, data FROM ps_crud WHERE id = (SELECT min(id) FROM ps_crud WHERE id > ?)
   UNION ALL
@@ -681,24 +683,30 @@ WITH RECURSIVE crud_entries AS (
 SELECT * FROM crud_entries;
     `;
 
-    while (true) {
-      const nextTransaction = await this.database.getAll<CrudEntryJSON>(sql, [lastCrudItemId]);
-      if (nextTransaction.length == 0) {
-        break;
-      }
-
-      const items = nextTransaction.map((row) => CrudEntry.fromRow(row));
-      const last = items[items.length - 1];
-      const txId = last.transactionId;
-
-      yield new CrudTransaction(
-        items,
-        async (writeCheckpoint?: string) => this.handleCrudCheckpoint(last.clientId, writeCheckpoint),
-        txId
-      );
+        return {
+          next: async () => {
+            const nextTransaction = await this.database.getAll<CrudEntryJSON>(sql, [lastCrudItemId]);
+            if (nextTransaction.length == 0) {
+              return { done: true, value: null };
+            }
 
-      lastCrudItemId = last.clientId;
-    }
+            const items = nextTransaction.map((row) => CrudEntry.fromRow(row));
+            const last = items[items.length - 1];
+            const txId = last.transactionId;
+            lastCrudItemId = last.clientId;
+
+            return {
+              done: false,
+              value: new CrudTransaction(
+                items,
+                async (writeCheckpoint?: string) => this.handleCrudCheckpoint(last.clientId, writeCheckpoint),
+                txId
+              )
+            };
+          }
+        };
+      }
+    };
   }
 
   /**

packages/common/src/utils/async.ts

@@ -1,3 +1,14 @@
+/**
+ * A ponyfill for `Symbol.asyncIterator` that is compatible with the
+ * [recommended polyfill](https://github.com/Azure/azure-sdk-for-js/blob/%40azure/core-asynciterator-polyfill_1.0.2/sdk/core/core-asynciterator-polyfill/src/index.ts#L4-L6)
+ * we recommend for React Native.
+ *
+ * As long as we use this symbol (instead of `for await` and `async *`) in this package, we can be compatible with async
+ * iterators without requiring them.
+ */
+export const symbolAsyncIterator: typeof Symbol.asyncIterator =
+  Symbol.asyncIterator ?? Symbol.for('Symbol.asyncIterator');
+
 /**
  * Throttle a function to be called at most once every "wait" milliseconds,
  * on the trailing edge.

packages/react-native/README.md

@@ -37,6 +37,7 @@ npx expo install @journeyapps/react-native-quick-sqlite
 Watched queries can be used with either a callback response or Async Iterator response.
 
 Watched queries using the Async Iterator response format require support for Async Iterators.
+`PowerSyncDatabase.getCrudTransactions()` also returns an Async Iterator and requires this workaround.
 
 Expo apps currently require polyfill and Babel plugins in order to use this functionality.