Adopt bucket priorities in yjs demo

Author: simolus3

demos/yjs-react-supabase-text-collab/src/app/editor/page.tsx

@@ -1,5 +1,5 @@
 import { usePowerSync, useQuery, useStatus } from '@powersync/react';
-import { Box, Container, Typography } from '@mui/material';
+import { Box, Container, FormControlLabel, Switch, Typography } from '@mui/material';
 import { useEffect, useMemo, useState } from 'react';
 import MenuBar from '@/components/widgets/MenuBar';
 import { PowerSyncYjsProvider } from '@/library/powersync/PowerSyncYjsProvider';
@@ -12,6 +12,7 @@ import StarterKit from '@tiptap/starter-kit';
 import * as Y from 'yjs';
 import './tiptap-styles.scss';
 import { useParams } from 'react-router-dom';
+import { connector } from '@/components/providers/SystemProvider';
 
 export default function EditorPage() {
   const powerSync = usePowerSync();
@@ -24,6 +25,7 @@ export default function EditorPage() {
   }
 
   const [totalDocUpdates, setTotalDocUpdates] = useState(0);
+  const [allowUploads, setAllowUploads] = useState(connector.enableUploads);
 
   const ydoc = useMemo(() => {
     return new Y.Doc();
@@ -36,6 +38,10 @@ export default function EditorPage() {
     };
   }, [ydoc, powerSync]);
 
+  useEffect(() => {
+    connector.enableUploads = allowUploads;
+  }, [allowUploads]);
+
   // watch for total number of document updates changing to update the counter
   const { data: docUpdatesCount } = useQuery(
     'SELECT COUNT(*) as total_updates FROM document_updates WHERE document_id=?',
@@ -89,6 +95,10 @@ export default function EditorPage() {
             <Typography variant="caption" display="block" gutterBottom>
               {totalDocUpdates} total edit(s) in this document.
             </Typography>
+            <FormControlLabel
+              control={<Switch checked={allowUploads} onChange={(e) => setAllowUploads(e.target.checked)} />}
+              label="Enable uploads"
+            />
           </Box>
         </>
       )}

demos/yjs-react-supabase-text-collab/src/library/powersync/SupabaseConnector.ts

@@ -40,6 +40,8 @@ export class SupabaseConnector extends BaseObserver<SupabaseConnectorListener> i
   readonly client: SupabaseClient;
   readonly config: SupabaseConfig;
 
+  enableUploads: boolean = true;
+
   constructor() {
     super();
     this.config = {
@@ -74,6 +76,11 @@ export class SupabaseConnector extends BaseObserver<SupabaseConnectorListener> i
   }
 
   async uploadData(database: AbstractPowerSyncDatabase): Promise<void> {
+    if (!this.enableUploads) {
+      console.log('Skipping uploadData because uploads were disabled manually');
+      return;
+    }
+
     const batch = await database.getCrudBatch(200);
 
     if (!batch) {

demos/yjs-react-supabase-text-collab/sync-rules.yaml

@@ -1,6 +1,10 @@
 # Sync-rule docs: https://docs.powersync.com/usage/sync-rules
 bucket_definitions:
-  global:
+  documents:
     data:
       - SELECT * FROM documents
+  updates:
+    # Allow remote changes to be synchronized even while there are local changes
+    priority: 0
+    data:
       - SELECT id, document_id, base64(update_data) as update_b64 FROM document_updates