Adopt in example

Author: simolus3

demos/react-supabase-todolist/.env.local.template

@@ -3,3 +3,4 @@
 VITE_SUPABASE_URL=https://foo.supabase.co
 VITE_SUPABASE_ANON_KEY=foo
 VITE_POWERSYNC_URL=https://foo.powersync.journeyapps.com
+VITE_USE_SYNC_STREAMS=false

demos/react-supabase-todolist/src/app/views/todo-lists/edit/page.tsx

@@ -19,7 +19,8 @@ import {
 } from '@mui/material';
 import Fab from '@mui/material/Fab';
 import { usePowerSync, useQuery } from '@powersync/react';
-import React, { Suspense } from 'react';
+import { SyncStreamSubscription } from '@powersync/web';
+import React, { Suspense, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 
 /**
@@ -32,6 +33,29 @@ const TodoEditSection = () => {
   const supabase = useSupabase();
   const { id: listID } = useParams();
 
+  if (import.meta.env.VITE_USE_SYNC_STREAMS == 'true') {
+    useEffect(() => {
+      let active = true;
+      let subscription: SyncStreamSubscription | null = null;
+
+      powerSync
+        .syncStream('todos', { list: listID })
+        .subscribe()
+        .then((sub) => {
+          if (!active) {
+            sub.unsubscribe();
+          } else {
+            subscription = sub;
+          }
+        });
+
+      return () => {
+        active = false;
+        subscription?.unsubscribe();
+      };
+    }, [listID]);
+  }
+
   const {
     data: [listRecord]
   } = useQuery<{ name: string }>(

demos/react-supabase-todolist/src/components/providers/SystemProvider.tsx

@@ -3,7 +3,13 @@ import { AppSchema, ListRecord, LISTS_TABLE, TODOS_TABLE } from '@/library/power
 import { SupabaseConnector } from '@/library/powersync/SupabaseConnector';
 import { CircularProgress } from '@mui/material';
 import { PowerSyncContext } from '@powersync/react';
-import { createBaseLogger, DifferentialWatchedQuery, LogLevel, PowerSyncDatabase } from '@powersync/web';
+import {
+  createBaseLogger,
+  DifferentialWatchedQuery,
+  LogLevel,
+  PowerSyncDatabase,
+  SyncClientImplementation
+} from '@powersync/web';
 import React, { Suspense } from 'react';
 import { NavigationPanelContextProvider } from '../navigation/NavigationPanelContext';
 
@@ -68,7 +74,7 @@ export const SystemProvider = ({ children }: { children: React.ReactNode }) => {
     const l = connector.registerListener({
       initialized: () => {},
       sessionStarted: () => {
-        powerSync.connect(connector);
+        powerSync.connect(connector, { clientImplementation: SyncClientImplementation.RUST });
       }
     });
 

demos/react-supabase-todolist/src/library/powersync/vite-env.d.ts

@@ -4,6 +4,7 @@ interface ImportMetaEnv {
   readonly VITE_SUPABASE_URL: string;
   readonly VITE_SUPABASE_ANON_KEY: string;
   readonly VITE_POWERSYNC_URL: string;
+  readonly VITE_USE_SYNC_STREAMS: string;
 }
 
 interface ImportMeta {

packages/common/src/client/ConnectionManager.ts

@@ -356,6 +356,7 @@ class ActiveSubscription {
 
 class SyncStreamSubscriptionHandle implements SyncStreamSubscription {
   constructor(readonly subscription: ActiveSubscription) {
+    subscription.refcount++;
     _finalizer?.register(this, subscription);
   }
 

packages/web/src/worker/sync/WorkerClient.ts

@@ -42,6 +42,7 @@ export class WorkerClient {
   private async removePort() {
     if (this.resolvedPort) {
       const release = await this.sync.removePort(this.resolvedPort);
+      this.resolvedPort = null;
       this.port.postMessage({
         event: SharedSyncClientEvent.CLOSE_ACK,
         data: {}
@@ -89,7 +90,7 @@ export class WorkerClient {
 
   updateSubscriptions(subscriptions: SubscribedStream[]) {
     if (this.resolvedPort) {
-      this.sync.updateSubscriptions;
+      this.sync.updateSubscriptions(this.resolvedPort, subscriptions);
     }
   }