diff --git a/demos/react-native-supabase-group-chat/package.json b/demos/react-native-supabase-group-chat/package.json index b363269e..54b1c396 100644 --- a/demos/react-native-supabase-group-chat/package.json +++ b/demos/react-native-supabase-group-chat/package.json @@ -34,7 +34,6 @@ "@tamagui/font-inter": "1.79.6", "@tamagui/lucide-icons": "1.79.6", "@tamagui/theme-base": "1.79.6", - "base-64": "^1.0.0", "date-fns": "^2.30.0", "expo": "~50.0.6", "expo-crypto": "~12.8.0", @@ -47,9 +46,7 @@ "react": "18.2.0", "react-dom": "18.2.0", "react-native": "0.73.4", - "react-native-fetch-api": "^3.0.0", "react-native-gesture-handler": "~2.14.1", - "react-native-get-random-values": "~1.8.0", "react-native-pager-view": "6.2.3", "react-native-polyfill-globals": "^3.1.0", "react-native-reanimated": "~3.6.2", @@ -58,9 +55,7 @@ "react-native-svg": "14.1.0", "react-native-url-polyfill": "^2.0.0", "react-native-web": "0.19.9", - "tamagui": "1.79.6", - "text-encoding": "^0.7.0", - "web-streams-polyfill": "^3.2.1" + "tamagui": "1.79.6" }, "devDependencies": { "@babel/core": "7.23.5", diff --git a/demos/react-native-supabase-group-chat/src/providers/PowerSync.tsx b/demos/react-native-supabase-group-chat/src/providers/PowerSync.tsx index b7e12bb7..7660d838 100644 --- a/demos/react-native-supabase-group-chat/src/providers/PowerSync.tsx +++ b/demos/react-native-supabase-group-chat/src/providers/PowerSync.tsx @@ -1,5 +1,6 @@ import '@azure/core-asynciterator-polyfill'; import 'react-native-polyfill-globals/auto'; +import 'react-native-get-random-values'; import { PowerSyncContext, RNQSPowerSyncDatabaseOpenFactory } from '@journeyapps/powersync-sdk-react-native'; import { ReactNode, useMemo } from 'react'; diff --git a/demos/react-native-supabase-todolist/library/powersync/system.ts b/demos/react-native-supabase-todolist/library/powersync/system.ts index 853493bf..79022355 100644 --- a/demos/react-native-supabase-todolist/library/powersync/system.ts +++ b/demos/react-native-supabase-todolist/library/powersync/system.ts @@ -1,5 +1,6 @@ import '@azure/core-asynciterator-polyfill'; import 'react-native-polyfill-globals/auto'; +import 'react-native-get-random-values'; import React from 'react'; import { AbstractPowerSyncDatabase, RNQSPowerSyncDatabaseOpenFactory } from '@journeyapps/powersync-sdk-react-native'; import { SupabaseStorageAdapter } from '../storage/SupabaseStorageAdapter'; diff --git a/demos/react-native-supabase-todolist/package.json b/demos/react-native-supabase-todolist/package.json index 53e47331..0e359fd2 100644 --- a/demos/react-native-supabase-todolist/package.json +++ b/demos/react-native-supabase-todolist/package.json @@ -41,7 +41,6 @@ "react-native-elements": "^3.4.3", "react-native-encrypted-storage": "^4.0.3", "react-native-gesture-handler": "~2.14.1", - "react-native-get-random-values": "~1.10.0", "react-native-prompt-android": "^1.1.0", "react-native-reanimated": "~3.6.2", "react-native-reanimated-table": "^0.0.2", @@ -50,7 +49,6 @@ "react-native-screens": "~3.29.0", "react-native-vector-icons": "^10.0.0", "react-navigation-stack": "^2.10.4", - "text-encoding": "^0.7.0", "uuid": "3.4.0" }, "devDependencies": { diff --git a/packages/powersync-sdk-react-native/README.md b/packages/powersync-sdk-react-native/README.md index 174fb05d..b7680826 100644 --- a/packages/powersync-sdk-react-native/README.md +++ b/packages/powersync-sdk-react-native/README.md @@ -32,35 +32,43 @@ npx expo install @journeyapps/react-native-quick-sqlite This SDK can connect to a PowerSync instance via HTTP streams or Web sockets. Different polyfill configurations are required for each method. -### Common Polyfills +### React Native Common Polyfills -The following polyfills are required for general use of the SDK: +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). -- base-64 +Install the collection of polyfills with: -- react-native-get-random-values - This is required for BSON and UUID generation +```bash +npx expo install react-native-polyfill-globals +``` -- text-encoding - Required for BSON and NDJSON streaming of sync events +The `react-native-polyfill-globals` package includes peer dependencies for individual functions. Most modern package managers install peer dependencies by default. If peer dependencies are explicitly installed, install them manually with: ```bash -npx expo install react-native-polyfill-globals base-64 react-native-get-random-values text-encoding +npx expo install react-native-fetch-api react-native-polyfill-globals react-native-url-polyfill text-encoding web-streams-polyfill base-64 react-native-get-random-values ``` -### HTTP Streams +Enable the polyfills in React Native app by adding the following in your top level entry point -The following `fetch` polyfills are required for the React Native implementation of `fetch`: +```JavaScript +// App.js +import 'react-native-polyfill-globals/auto'; +``` + +### Random Values -- react-native-fetch-api - Required for live streaming of sync events -- react-native-url-polyfill -- web-streams-polyfill +This packages uses the `uuid` library for generating UUIDs. This requires `crypto.getRandomValues` to be available. -These are listed as peer dependencies and need to be added to the React Native project +Install [react-native-get-random-values](https://github.com/LinusU/react-native-get-random-values) ```bash -npx expo install react-native-fetch-api react-native-url-polyfill text-encoding web-streams-polyfill +npx expo install react-native-get-random-values +``` + +Import the polyfill in our app entry point + +```javascript +import 'react-native-get-random-values' ``` ### Web sockets @@ -92,15 +100,6 @@ if (typeof process.nextTick == 'undefined') { } ``` -### Enable Global Polyfills - -Enable the polyfills in React Native app with - -```JavaScript -// App.js -import 'react-native-polyfill-globals/auto'; -``` - ### Babel Plugins: Watched Queries Watched queries require support for Async Iterators. Expo apps currently require polyfill and Babel plugins in order to use this functionality. diff --git a/packages/powersync-sdk-react-native/package.json b/packages/powersync-sdk-react-native/package.json index ebafecfd..a35d2afe 100644 --- a/packages/powersync-sdk-react-native/package.json +++ b/packages/powersync-sdk-react-native/package.json @@ -28,22 +28,16 @@ "homepage": "https://docs.powersync.com/", "peerDependencies": { "@journeyapps/react-native-quick-sqlite": "^1.1.3", - "base-64": "^1.0.0", "react": "*", "react-native": "*", - "react-native-fetch-api": "^3.0.0", - "react-native-get-random-values": "^1.9.0", "react-native-polyfill-globals": "^3.1.0", - "react-native-url-polyfill": "^2.0.0", - "text-encoding": "^0.7.0", "web-streams-polyfill": "^3.2.1" + }, "dependencies": { - "@craftzdog/react-native-buffer": "^6.0.5", "@journeyapps/powersync-react": "workspace:*", "@journeyapps/powersync-sdk-common": "workspace:*", - "async-lock": "^1.4.0", - "react-native-quick-base64": "^2.0.8" + "async-lock": "^1.4.0" }, "devDependencies": { "@journeyapps/react-native-quick-sqlite": "^1.1.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c3dcb998..9e362e67 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -300,9 +300,6 @@ importers: '@tamagui/theme-base': specifier: 1.79.6 version: 1.79.6 - base-64: - specifier: ^1.0.0 - version: 1.0.0 date-fns: specifier: ^2.30.0 version: 2.30.0 @@ -339,15 +336,9 @@ importers: react-native: specifier: 0.73.4 version: 0.73.4(@babel/core@7.23.5)(@babel/preset-env@7.24.0)(react@18.2.0) - react-native-fetch-api: - specifier: ^3.0.0 - version: 3.0.0 react-native-gesture-handler: specifier: ~2.14.1 version: 2.14.1(react-native@0.73.4)(react@18.2.0) - react-native-get-random-values: - specifier: ~1.8.0 - version: 1.8.0(react-native@0.73.4) react-native-pager-view: specifier: 6.2.3 version: 6.2.3(react-native@0.73.4)(react@18.2.0) @@ -375,12 +366,6 @@ importers: tamagui: specifier: 1.79.6 version: 1.79.6(@types/react@18.2.55)(react-dom@18.2.0)(react-native-web@0.19.9)(react-native@0.73.4)(react@18.2.0) - text-encoding: - specifier: ^0.7.0 - version: 0.7.0 - web-streams-polyfill: - specifier: ^3.2.1 - version: 3.3.2 devDependencies: '@babel/core': specifier: 7.23.5 @@ -505,9 +490,6 @@ importers: react-native-gesture-handler: specifier: ~2.14.1 version: 2.14.1(react-native@0.73.2)(react@18.2.0) - react-native-get-random-values: - specifier: ~1.10.0 - version: 1.10.0(react-native@0.73.2) react-native-prompt-android: specifier: ^1.1.0 version: 1.1.0 @@ -532,9 +514,6 @@ importers: react-navigation-stack: specifier: ^2.10.4 version: 2.10.4(@react-native-community/masked-view@0.1.11)(react-native-gesture-handler@2.14.1)(react-native-safe-area-context@4.8.2)(react-native-screens@3.29.0)(react-native@0.73.2)(react-navigation@4.4.4)(react@18.2.0) - text-encoding: - specifier: ^0.7.0 - version: 0.7.0 uuid: specifier: 3.4.0 version: 3.4.0 @@ -974,9 +953,6 @@ importers: packages/powersync-sdk-react-native: dependencies: - '@craftzdog/react-native-buffer': - specifier: ^6.0.5 - version: 6.0.5(react-native@0.72.4)(react@18.2.0) '@journeyapps/powersync-react': specifier: workspace:* version: link:../powersync-react @@ -986,27 +962,9 @@ importers: async-lock: specifier: ^1.4.0 version: 1.4.1 - base-64: - specifier: ^1.0.0 - version: 1.0.0 - react-native-fetch-api: - specifier: ^3.0.0 - version: 3.0.0 - react-native-get-random-values: - specifier: ^1.9.0 - version: 1.10.0(react-native@0.72.4) react-native-polyfill-globals: specifier: ^3.1.0 version: 3.1.0(base-64@1.0.0)(react-native-fetch-api@3.0.0)(react-native-get-random-values@1.10.0)(react-native-url-polyfill@2.0.0)(text-encoding@0.7.0)(web-streams-polyfill@3.3.2) - react-native-quick-base64: - specifier: ^2.0.8 - version: 2.0.8(react-native@0.72.4)(react@18.2.0) - react-native-url-polyfill: - specifier: ^2.0.0 - version: 2.0.0(react-native@0.72.4) - text-encoding: - specifier: ^0.7.0 - version: 0.7.0 web-streams-polyfill: specifier: ^3.2.1 version: 3.3.2 @@ -6882,16 +6840,6 @@ packages: requiresBuild: true optional: true - /@craftzdog/react-native-buffer@6.0.5(react-native@0.72.4)(react@18.2.0): - resolution: {integrity: sha512-Av+YqfwA9e7jhgI9GFE/gTpwl/H+dRRLmZyJPOpKTy107j9Oj7oXlm3/YiMNz+C/CEGqcKAOqnXDLs4OL6AAFw==} - dependencies: - ieee754: 1.2.1 - react-native-quick-base64: 2.0.8(react-native@0.72.4)(react@18.2.0) - transitivePeerDependencies: - - react - - react-native - dev: false - /@cspotcode/source-map-support@0.8.1: resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==} engines: {node: '>=12'} @@ -27105,15 +27053,6 @@ packages: react-native: 0.72.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0)(react@18.2.0) dev: false - /react-native-get-random-values@1.10.0(react-native@0.73.2): - resolution: {integrity: sha512-gZ1zbXhbb8+Jy9qYTV8c4Nf45/VB4g1jmXuavY5rPfUn7x3ok9Vl3FTl0dnE92Z4FFtfbUNNwtSfcmomdtWg+A==} - peerDependencies: - react-native: '>=0.56' - dependencies: - fast-base64-decode: 1.0.0 - react-native: 0.73.2(@babel/core@7.23.9)(@babel/preset-env@7.23.9)(react@18.2.0) - dev: false - /react-native-get-random-values@1.8.0(react-native@0.73.4): resolution: {integrity: sha512-H/zghhun0T+UIJLmig3+ZuBCvF66rdbiWUfRSNS6kv5oDSpa1ZiVyvRWtuPesQpT8dXj+Bv7WJRQOUP+5TB1sA==} peerDependencies: @@ -27181,17 +27120,6 @@ packages: resolution: {integrity: sha512-4JoyEaT2ZnK9IH+tDFpbTiQBgva8UIFGQf4/Uw/tnEVWBERlVlzcs5B82T9BkeEhEqXhp89JaiSBnLWj30lciw==} dev: false - /react-native-quick-base64@2.0.8(react-native@0.72.4)(react@18.2.0): - resolution: {integrity: sha512-2kMlnLSy0qz4NA0KXMGugd3qNB5EAizxZ6ghEVNGIxAOlc9CGvC8miv35wgpFbSKeiaBRfcPfkdTM/5Erb/6SQ==} - peerDependencies: - react: '*' - react-native: '*' - dependencies: - base64-js: 1.5.1 - react: 18.2.0 - react-native: 0.72.4(@babel/core@7.24.0)(@babel/preset-env@7.24.0)(react@18.2.0) - dev: false - /react-native-ratings@8.0.4(react-native@0.73.2)(react@18.2.0): resolution: {integrity: sha512-Xczu5lskIIRD6BEdz9A0jDRpEck/SFxRqiglkXi0u67yAtI1/pcJC76P4MukCbT8K4BPVl+42w83YqXBoBRl7A==} peerDependencies: