π Problem Statement
Debugra's README documents: "Real-Time Collaboration β Create rooms, share a Room ID, and code together with live Firebase sync." The useRoom hook syncs code changes via Firebase Realtime Database or Firestore. However, the current implementation appears to use last-write-wins synchronization: when two users type simultaneously, each keystroke is written to Firebase and the last write wins, causing:
- Lost keystrokes: User A types "function" while User B types "const" simultaneously. Depending on network timing, one user's changes are silently discarded.
- Garbled state: Interleaved writes from two users can produce syntactically invalid code like
funccotnst ion that neither user wrote.
- No operational transformation or CRDT: Without OT/CRDT, any simultaneous edit is a race condition.
Proposed Fix
Implement Yjs (a battle-tested CRDT library) with Firebase as the sync backend:
// src/hooks/useRoom.js β replace raw Firebase write with Yjs
import * as Y from 'yjs';
import { FirebaseProvider } from 'y-firebase'; // or y-webrtc as fallback
const ydoc = new Y.Doc();
const yText = ydoc.getText('monaco');
// Connect Yjs document to Firebase for sync
const provider = new FirebaseProvider(firebaseDb, `rooms/${roomId}`, ydoc);
// Bind Monaco editor to Yjs document
import { MonacoBinding } from 'y-monaco';
new MonacoBinding(yText, monacoEditorRef.current.getModel(), new Set([monacoEditorRef.current]), provider.awareness);
Yjs's CRDT guarantees convergence β all users always reach the same final state regardless of write order or simultaneous edits. y-monaco provides a drop-in binding for Monaco Editor that requires no changes to the editor itself.
Dependencies to add:
npm install yjs y-firebase y-monaco
Files to Modify
| File |
Change |
src/hooks/useRoom.js |
Replace raw Firebase code writes with Yjs + FirebaseProvider |
package.json |
Add yjs, y-firebase, y-monaco |
Suggested labels: bug, collaboration, frontend, level: advanced
I would like to work on this. Could you please assign it to me?
π Problem Statement
Debugra's README documents: "Real-Time Collaboration β Create rooms, share a Room ID, and code together with live Firebase sync." The
useRoomhook syncs code changes via Firebase Realtime Database or Firestore. However, the current implementation appears to use last-write-wins synchronization: when two users type simultaneously, each keystroke is written to Firebase and the last write wins, causing:funccotnst ionthat neither user wrote.Proposed Fix
Implement Yjs (a battle-tested CRDT library) with Firebase as the sync backend:
Yjs's CRDT guarantees convergence β all users always reach the same final state regardless of write order or simultaneous edits.
y-monacoprovides a drop-in binding for Monaco Editor that requires no changes to the editor itself.Dependencies to add:
Files to Modify
src/hooks/useRoom.jspackage.jsonyjs,y-firebase,y-monacoSuggested labels:
bug,collaboration,frontend,level: advancedI would like to work on this. Could you please assign it to me?