[Feature] Websocket Support (#114)

Co-authored-by: benitav <benita@journeyapps.com>

Author: stevensJourney

.changeset/rich-steaks-bake.md

@@ -0,0 +1,6 @@
+---
+'@journeyapps/powersync-yjs-text-collab-demo': patch
+'@journeyapps/powersync-react-supabase-todolist': patch
+---
+
+Updated Vite config for BSON library

.changeset/thirty-chicken-kick.md

@@ -0,0 +1,7 @@
+---
+'@journeyapps/powersync-sdk-react-native': minor
+'@journeyapps/powersync-sdk-common': minor
+'@journeyapps/powersync-sdk-web': minor
+---
+
+Added support for WebSocket sync stream connections.

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

@@ -13,7 +13,7 @@
     "@powersync/react-native": "workspace:*",
     "@powersync/react": "workspace:*",
     "@powersync/common": "workspace:*",
-    "@journeyapps/react-native-quick-sqlite": "^1.1.5",
+    "@journeyapps/react-native-quick-sqlite": "^1.1.6",
     "@react-native-community/async-storage": "^1.12.1",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-navigation/drawer": "^6.6.15",

demos/example-nextjs/package.json

@@ -13,12 +13,13 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
     "@fontsource/roboto": "^5.0.12",
-    "@powersync/react": "workspace:*",
-    "@powersync/web": "workspace:*",
     "@journeyapps/wa-sqlite": "~0.1.1",
     "@lexical/react": "^0.11.3",
     "@mui/icons-material": "^5.15.12",
     "@mui/material": "^5.15.12",
+    "@powersync/react": "workspace:*",
+    "@powersync/web": "workspace:*",
+    "buffer": "^6.0.3",
     "fast-glob": "^3.3.2",
     "formik": "^2.4.5",
     "highlight.js": "^11.9.0",

demos/example-nextjs/src/app/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { CircularProgress, Grid, ListItem, styled } from '@mui/material';
 import { usePowerSync, useQuery } from '@powersync/react';
 
@@ -14,7 +14,7 @@ export default function EntryPage() {
     const name = names[Math.floor(Math.random() * names.length)];
     db.execute('INSERT INTO customers(id, name) VALUES(uuid(), ?)', [name]);
     return () => {};
-  }, []);
+  }, [db]);
 
   if (isLoading) {
     return <CircularProgress />;

demos/example-nextjs/src/components/providers/SystemProvider.tsx

@@ -8,6 +8,14 @@ import { CircularProgress } from '@mui/material';
 import Logger from 'js-logger';
 import React, { Suspense } from 'react';
 
+import { Buffer } from 'buffer';
+
+// Polyfill for WebSockets
+if (typeof self.Buffer == 'undefined') {
+  self.Buffer = Buffer;
+}
+
+// eslint-disable-next-line react-hooks/rules-of-hooks
 Logger.useDefaults();
 Logger.setLevel(Logger.DEBUG);
 

demos/example-vite/vite.config.ts

@@ -13,6 +13,12 @@ export default defineConfig({
     },
     emptyOutDir: true
   },
+  resolve: {
+    alias: [
+      // https://jira.mongodb.org/browse/NODE-5773
+      { find: 'bson', replacement: require.resolve('bson') }
+    ]
+  },
   envDir: '..', // Use this dir for env vars, not 'src'.
   optimizeDeps: {
     // Don't optimize these packages as they contain web workers and WASM files.
@@ -22,7 +28,8 @@ export default defineConfig({
       '@powersync/web > event-iterator',
       '@powersync/web > js-logger',
       '@powersync/web > lodash/throttle',
-      '@powersync/web > can-ndjson-stream'
+      '@powersync/web > can-ndjson-stream',
+      '@powersync/web > bson'
     ]
   },
   plugins: [wasm(), topLevelAwait()],

demos/react-native-supabase-group-chat/package.json

@@ -24,7 +24,7 @@
     "@powersync/react-native": "workspace:*",
     "@powersync/common": "workspace:*",
     "@powersync/react": "workspace:*",
-    "@journeyapps/react-native-quick-sqlite": "1.1.5",
+    "@journeyapps/react-native-quick-sqlite": "1.1.6",
     "@react-native-async-storage/async-storage": "1.21.0",
     "@shopify/flash-list": "1.6.3",
     "@supabase/supabase-js": "2.39.0",
@@ -59,7 +59,7 @@
     "react-native-web": "0.19.9",
     "tamagui": "1.79.6",
     "text-encoding": "^0.7.0",
-    "web-streams-polyfill": "^3.2.1"
+    "web-streams-polyfill": "3.2.1"
   },
   "devDependencies": {
     "@babel/core": "7.23.5",

demos/react-native-supabase-todolist/android/app/src/main/java/com/powersync/example/MainApplication.kt

@@ -52,9 +52,9 @@ class MainApplication : Application(), ReactApplication {
       // If you opted-in for the New Architecture, we load the native entry point for this app.
       load()
     }
-    // if (BuildConfig.DEBUG) {
-    //   ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
-    // }
+    if (BuildConfig.DEBUG) {
+      ReactNativeFlipper.initializeFlipper(this, reactNativeHost.reactInstanceManager)
+    }
     ApplicationLifecycleDispatcher.onApplicationCreate(this)
   }
 

demos/react-native-supabase-todolist/app/views/todos/_layout.tsx

@@ -1,5 +1,4 @@
 import { Stack } from 'expo-router';
-import React from 'react';
 
 /**
  * Stack to edit a list from the todos view