wip

Author: Chriztiaan

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

@@ -1,6 +1,14 @@
 import '@azure/core-asynciterator-polyfill';
 
-import { createBaseLogger, LogLevel, PowerSyncDatabase, SyncClientImplementation } from '@powersync/react-native';
+import {
+  createBaseLogger,
+  LogLevel,
+  PowerSyncDatabase,
+  SyncClientImplementation,
+  SyncStreamConnectionMethod
+} from '@powersync/react-native';
+
+import { SQLJSOpenFactory } from '@powersync/adapter-sql-js';
 import React from 'react';
 import { SupabaseStorageAdapter } from '../storage/SupabaseStorageAdapter';
 
@@ -27,13 +35,22 @@ export class System {
     this.kvStorage = new KVStorage();
     this.supabaseConnector = new SupabaseConnector(this);
     this.storage = this.supabaseConnector.storage;
+    // this.powersync = new PowerSyncDatabase({
+    //   schema: AppSchema,
+    //   database: {
+    //     dbFilename: 'sqlite.db'
+    //   },
+    //   logger
+    // });
+
     this.powersync = new PowerSyncDatabase({
       schema: AppSchema,
-      database: {
+      database: new SQLJSOpenFactory({
         dbFilename: 'sqlite.db'
-      },
+      }),
       logger
     });
+
     /**
      * The snippet below uses OP-SQLite as the default database adapter.
      * You will have to uninstall `@journeyapps/react-native-quick-sqlite` and
@@ -68,7 +85,10 @@ export class System {
 
   async init() {
     await this.powersync.init();
-    await this.powersync.connect(this.supabaseConnector, { clientImplementation: SyncClientImplementation.RUST });
+    await this.powersync.connect(this.supabaseConnector, {
+      clientImplementation: SyncClientImplementation.RUST
+      // connectionMethod: SyncStreamConnectionMethod.HTTP
+    });
 
     if (this.attachmentQueue) {
       await this.attachmentQueue.init();

demos/react-native-supabase-todolist/package.json

@@ -5,12 +5,14 @@
   "scripts": {
     "android": "expo run:android",
     "ios": "expo run:ios",
+    "start": "expo start",
     "clean": "watchman watch-del-all && rm -rf .expo"
   },
   "dependencies": {
     "@azure/core-asynciterator-polyfill": "^1.0.2",
     "@expo/vector-icons": "^14.0.3",
     "@journeyapps/react-native-quick-sqlite": "^2.4.6",
+    "@powersync/adapter-sql-js": "workspace:*",
     "@powersync/attachments": "workspace:*",
     "@powersync/common": "workspace:*",
     "@powersync/react": "workspace:*",

packages/adapter-sql-js/src/SQLJSAdapter.ts

@@ -113,6 +113,39 @@ export class SQLJSDBAdapter extends BaseObserver<DBAdapterListener> implements D
     };
   }
 
+  /**
+   * Preprocesses parameters to convert ArrayBuffer objects to Uint8Array
+   * which SQL.js can properly handle in React Native environments
+   */
+  protected preprocessParams(params?: any[]): any[] | undefined {
+    if (!params) {
+      return params;
+    }
+
+    return params.map((param) => {
+      // Only convert actual ArrayBuffer instances, be very specific to avoid
+      // accidentally converting numeric values or other legitimate types
+      if (param instanceof ArrayBuffer) {
+        return new Uint8Array(param);
+      }
+
+      // More conservative check for cross-context ArrayBuffer detection
+      // Only convert if it's clearly an ArrayBuffer with the right properties
+      if (
+        param &&
+        typeof param === 'object' &&
+        param.constructor?.name === 'ArrayBuffer' &&
+        typeof param.byteLength === 'number' &&
+        typeof param.slice === 'function'
+      ) {
+        return new Uint8Array(param);
+      }
+
+      // Leave all other parameters unchanged (numbers, strings, etc.)
+      return param;
+    });
+  }
+
   protected async init(): Promise<SQLJs.Database> {
     const SQL = await SQLJs({
       locateFile: (filename: any) => `../dist/${filename}`,
@@ -143,8 +176,9 @@ export class SQLJSDBAdapter extends BaseObserver<DBAdapterListener> implements D
       const rawResults: any[][] = [];
       let columnNames: string[] | null = null;
       try {
-        if (params) {
-          statement.bind(params);
+        const processedParams = this.preprocessParams(params);
+        if (processedParams) {
+          statement.bind(processedParams);
         }
         while (statement.step()) {
           if (!columnNames) {
@@ -194,8 +228,9 @@ export class SQLJSDBAdapter extends BaseObserver<DBAdapterListener> implements D
       const statement = db.prepare(query);
       const rawResults: any[][] = [];
       try {
-        if (params) {
-          statement.bind(params);
+        const processedParams = this.preprocessParams(params);
+        if (processedParams) {
+          statement.bind(processedParams);
         }
         while (statement.step()) {
           rawResults.push(statement.get());
@@ -230,7 +265,8 @@ export class SQLJSDBAdapter extends BaseObserver<DBAdapterListener> implements D
     const stmt = db.prepare(query);
     try {
       for (const paramSet of params) {
-        stmt.run(paramSet);
+        const processedParams = this.preprocessParams(paramSet);
+        stmt.run(processedParams);
         totalRowsAffected += db.getRowsModified();
       }