@powersync/react-native 0.0.0-dev-20240722121738 → 0.0.0-dev-20240726145618

package/README.md

@@ -4,9 +4,9 @@
 
 # PowerSync SDK for React Native
 
-_[PowerSync](https://www.powersync.com) is a Postgres-SQLite sync layer, which helps developers to create local-first real-time reactive apps that work seamlessly both online and offline._
+*[PowerSync](https://www.powersync.com) is a Postgres-SQLite sync layer, which helps developers to create local-first real-time reactive apps that work seamlessly both online and offline.*
 
-This package (`packages/react-native`) is the PowerSync SDK for React Native clients. It is an extension of `packages/common`. It connects to a PowerSync instance via HTTP streams (enabled by default) or WebSockets.
+This package (`packages/react-native`) is the PowerSync SDK for React Native clients. It is an extension of `packages/common`.
 
 See a summary of features [here](https://docs.powersync.co/client-sdk-references/react-native-and-expo).
 
@@ -30,7 +30,68 @@ npx expo install @journeyapps/react-native-quick-sqlite
 
 ## Install Polyfills
 
-- Polyfills are required for [watched queries](#babel-plugins-watched-queries) using the Async Iterator response format.
+This package connects to a PowerSync instance via HTTP streams (enabled by default) or WebSockets. 
+* Both connection methods require the [React Native Common Polyfills](#react-native-common-polyfills), as detailed below. 
+* The WebSocket method requires an [additional polyfill](#web-sockets-buffer) for the `Buffer` interface.
+* Other polyfills are required for [watched queries](#babel-plugins-watched-queries) using the Async Iterator response format.
+
+### React Native Common Polyfills
+
+This package requires polyfills for HTTP streaming and other text encoding functions. These functions can be provided with [react-native-polyfill-globals](https://www.npmjs.com/package/react-native-polyfill-globals).
+
+Install the collection of polyfills with:
+
+```bash
+npx expo install react-native-polyfill-globals
+```
+
+The `react-native-polyfill-globals` package uses peer dependencies for individual functions. Most modern package managers install peer dependencies by default, however currently the peer dependency version ranges are quite broad and might result in certain packages being incompatible. Currently an [issue](https://github.com/acostalima/react-native-polyfill-globals/issues/6) is open for a breaking change in one of the dependencies. The best practice is to currently add the packages as explicit dependencies with version ranges to your project with the command below.
+
+```bash
+npx expo install react-native-fetch-api@^3.0.0 react-native-url-polyfill@^2.0.0 text-encoding@^0.7.0 web-streams-polyfill@3.2.1 base-64@^1.0.0
+```
+
+Enable the polyfills in React Native app by adding the following in your top level entry point
+
+```JavaScript
+// App.js
+import 'react-native-polyfill-globals/auto';
+```
+
+### HTTP Connections
+
+HTTP connections require the HTTP streaming polyfills included in the [common section](#react-native-common-polyfills). See additional [setup](https://docs.powersync.com/client-sdk-references/react-native-and-expo#android-flipper-network-plugin) required for Android.
+
+### WebSocket Connections: Buffer
+
+Note: Beta Release - WebSockets are currently in a beta release. It should be safe to use in production if sufficient testing is done on the client side.
+
+Our WebSocket implementation supports binary payloads which are encoded as BSON documents.
+
+This requires support for the `Buffer` interface.
+
+Apply the `Buffer` polyfill
+
+```bash
+npx expo install @craftzdog/react-native-buffer
+```
+
+```javascript
+import { Buffer } from '@craftzdog/react-native-buffer';
+
+if (typeof global.Buffer == 'undefined') {
+  // @ts-ignore If using TypeScript
+  global.Buffer = Buffer;
+}
+```
+
+This library uses `RSocket` for reactive WebSocket streams which requires `process.nextTick` to be available. Apply a polyfill if not available.
+
+```javascript
+if (typeof process.nextTick == 'undefined') {
+  process.nextTick = setImmediate;
+}
+```
 
 ### Babel Plugins: Watched Queries
 

package/lib/db/PowerSyncDatabase.d.ts

@@ -1,4 +1,4 @@
-import { AbstractPowerSyncDatabase, AbstractStreamingSyncImplementation, PowerSyncBackendConnector, BucketStorageAdapter, DBAdapter, SQLOpenOptions } from '@powersync/common';
+import { AbstractPowerSyncDatabase, AbstractStreamingSyncImplementation, BucketStorageAdapter, DBAdapter, PowerSyncBackendConnector, PowerSyncDatabaseOptionsWithSettings } from '@powersync/common';
 /**
  * A PowerSync database which provides SQLite functionality
  * which is automatically synced.
@@ -19,7 +19,7 @@ export declare class PowerSyncDatabase extends AbstractPowerSyncDatabase {
      * Opens a DBAdapter using React Native Quick SQLite as the
      * default SQLite open factory.
      */
-    protected openDBAdapter(options: SQLOpenOptions): DBAdapter;
+    protected openDBAdapter(options: PowerSyncDatabaseOptionsWithSettings): DBAdapter;
     protected generateBucketStorageAdapter(): BucketStorageAdapter;
     protected generateSyncStreamImplementation(connector: PowerSyncBackendConnector): AbstractStreamingSyncImplementation;
 }

package/lib/db/PowerSyncDatabase.js

@@ -23,7 +23,7 @@ export class PowerSyncDatabase extends AbstractPowerSyncDatabase {
      * default SQLite open factory.
      */
     openDBAdapter(options) {
-        const defaultFactory = new ReactNativeQuickSqliteOpenFactory(options);
+        const defaultFactory = new ReactNativeQuickSqliteOpenFactory(options.database);
         return defaultFactory.openDB();
     }
     generateBucketStorageAdapter() {
@@ -44,4 +44,3 @@ export class PowerSyncDatabase extends AbstractPowerSyncDatabase {
         });
     }
 }
-//# sourceMappingURL=PowerSyncDatabase.js.map

package/lib/db/adapters/react-native-quick-sqlite/RNQSDBAdapter.js

@@ -98,4 +98,3 @@ export class RNQSDBAdapter extends BaseObserver {
         };
     }
 }
-//# sourceMappingURL=RNQSDBAdapter.js.map

package/lib/db/adapters/react-native-quick-sqlite/RNQSDBOpenFactory.js

@@ -31,4 +31,3 @@ export class RNQSPowerSyncDatabaseOpenFactory extends AbstractPowerSyncDatabaseO
         return new PowerSyncDatabase(options);
     }
 }
-//# sourceMappingURL=RNQSDBOpenFactory.js.map

package/lib/db/adapters/react-native-quick-sqlite/ReactNativeQuickSQLiteOpenFactory.js

@@ -36,4 +36,3 @@ export class ReactNativeQuickSqliteOpenFactory {
         return new RNQSDBAdapter(DB, this.options.dbFilename);
     }
 }
-//# sourceMappingURL=ReactNativeQuickSQLiteOpenFactory.js.map

package/lib/index.js

@@ -7,4 +7,3 @@ export * from './db/adapters/react-native-quick-sqlite//RNQSDBOpenFactory';
 export * from './sync/stream/ReactNativeRemote';
 export * from './sync/stream/ReactNativeStreamingSyncImplementation';
 export * from './db/adapters/react-native-quick-sqlite/ReactNativeQuickSQLiteOpenFactory';
-//# sourceMappingURL=index.js.map

package/lib/sync/stream/ReactNativeRemote.js

@@ -14,6 +14,44 @@ class ReactNativeFetchProvider extends FetchImplementationProvider {
         return fetch.bind(globalThis);
     }
 }
+const CommonPolyfills = [
+    {
+        name: 'TextEncoder',
+        test: () => typeof TextEncoder == 'undefined'
+    }
+];
+const SocketPolyfillTests = [
+    ...CommonPolyfills,
+    {
+        name: 'nextTick',
+        test: () => typeof process.nextTick == 'undefined'
+    },
+    {
+        name: 'Buffer',
+        test: () => typeof global.Buffer == 'undefined'
+    }
+];
+const HttpPolyfillTests = [
+    ...CommonPolyfills,
+    {
+        name: 'TextDecoder',
+        test: () => typeof TextDecoder == 'undefined'
+    },
+    {
+        name: 'ReadableStream',
+        test: () => typeof ReadableStream == 'undefined'
+    }
+];
+const validatePolyfills = (tests) => {
+    const missingPolyfills = tests.filter((t) => t.test()).map((t) => t.name);
+    if (missingPolyfills.length) {
+        throw new Error(`
+Polyfills are undefined. Please ensure React Native polyfills are installed and imported in the app entrypoint.
+See package README for detailed instructions.
+The following polyfills appear to be missing:
+${missingPolyfills.join('\n')}`);
+    }
+};
 export class ReactNativeRemote extends AbstractRemote {
     connector;
     logger;
@@ -29,9 +67,11 @@ export class ReactNativeRemote extends AbstractRemote {
         return BSON;
     }
     async socketStream(options) {
+        validatePolyfills(SocketPolyfillTests);
         return super.socketStream(options);
     }
     async postStream(options) {
+        validatePolyfills(HttpPolyfillTests);
         const timeout = Platform.OS == 'android'
             ? setTimeout(() => {
                 this.logger.warn(`HTTP Streaming POST is taking longer than ${Math.ceil(STREAMING_POST_TIMEOUT_MS / 1000)} seconds to resolve. If using a debug build, please ensure Flipper Network plugin is disabled.`);
@@ -56,4 +96,3 @@ export class ReactNativeRemote extends AbstractRemote {
         return result;
     }
 }
-//# sourceMappingURL=ReactNativeRemote.js.map

package/lib/sync/stream/ReactNativeStreamingSyncImplementation.js

@@ -40,4 +40,3 @@ export class ReactNativeStreamingSyncImplementation extends AbstractStreamingSyn
         });
     }
 }
-//# sourceMappingURL=ReactNativeStreamingSyncImplementation.js.map

package/package.json

@@ -1,16 +1,15 @@
 {
   "name": "@powersync/react-native",
-  "version": "0.0.0-dev-20240722121738",
+  "version": "0.0.0-dev-20240726145618",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "description": "PowerSync - sync Postgres with SQLite in your React Native app for offline-first and real-time data",
-  "main": "./dist/index.js",
+  "main": "./lib/index.js",
   "types": "./lib/index.d.ts",
   "files": [
-    "lib",
-    "dist"
+    "lib"
   ],
   "repository": {
     "type": "git",
@@ -26,32 +25,22 @@
     "@journeyapps/react-native-quick-sqlite": "^1.1.8",
     "react": "*",
     "react-native": "*",
-    "@powersync/common": "^0.0.0-dev-20240722121738"
+    "react-native-polyfill-globals": "^3.1.0",
+    "@powersync/common": "0.0.0-dev-20240726145618"
   },
   "dependencies": {
-    "@powersync/common": "0.0.0-dev-20240722121738",
-    "@powersync/react": "0.0.0-dev-20240722121738"
+    "async-lock": "^1.4.0",
+    "bson": "^6.6.0",
+    "react-native-fetch-api": "^3.0.0",
+    "@powersync/react": "1.3.8",
+    "@powersync/common": "0.0.0-dev-20240726145618"
   },
   "devDependencies": {
-    "@craftzdog/react-native-buffer": "^6.0.5",
     "@journeyapps/react-native-quick-sqlite": "^1.1.8",
-    "@rollup/plugin-alias": "^5.1.0",
-    "@rollup/plugin-commonjs": "^25.0.7",
-    "@rollup/plugin-inject": "^5.0.5",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "15.2.3",
-    "@rollup/plugin-replace": "^5.0.7",
     "@types/async-lock": "^1.4.0",
-    "async-lock": "^1.4.0",
-    "bson": "^6.6.0",
-    "fast-base64-decode": "^1.0.0",
     "react": "18.2.0",
     "react-native": "0.72.4",
-    "react-native-fetch-api": "^3.0.0",
-    "rollup": "4.14.3",
-    "text-encoding": "^0.7.0",
-    "typescript": "^5.5.3",
-    "web-streams-polyfill": "3.2.1"
+    "typescript": "^5.5.3"
   },
   "keywords": [
     "data sync",
@@ -61,7 +50,7 @@
     "live data"
   ],
   "scripts": {
-    "build": "tsc -b && rollup -c rollup.config.mjs",
+    "build": "tsc -b",
     "clean": "rm -rf lib tsconfig.tsbuildinfo",
     "watch": "tsc -b -w"
   }