M5: Change-Intensive Apps

// v1: a rich-text editor whose state is saved whole on a debounce. perfect for one author
const editor = useEditor({ content: doc.html, onUpdate: debounce(({ editor }) => api.put(`/docs/${id}`, { html: editor.getHTML() }), 2000) })
// two authors: the second PUT overwrites the first's paragraph with a body that never had it. no error. "the app deleted my work"
// with If-Match (ETag): the second PUT gets 409; the client must merge whole bodies: the problem v2 solves

// v2: the document is a CRDT; the editor binds to it; a provider syncs it. no PUT, no debounce, no merge code in the app
import * as Y from 'yjs'
import { WebsocketProvider } from 'y-websocket'
import { IndexeddbPersistence } from 'y-indexeddb'          // v4: local-first persistence, one line

const doc = new Y.Doc()
const local = new IndexeddbPersistence('doc-42', doc)        // loads instantly from the device; writes every update
const net = new WebsocketProvider(WS_URL, 'doc-42', doc)     // sync protocol: state vectors, diffs, reconnection with backoff
const fragment = doc.getXmlFragment('prosemirror')           // the editor's tree lives in the CRDT

// Tiptap / ProseMirror binding: the editor renders the fragment and writes changes into it as CRDT ops
const editor = new Editor({ extensions: [StarterKit.configure({ history: false }),      // history must be CRDT-aware: use the collaboration undo manager
  Collaboration.configure({ document: doc }),
  CollaborationCursor.configure({ provider: net, user: { name, color: colorFor(clientId) } })] })   // v3: awareness, relative positions, overlays

// observing for the rest of the UI (title, word count): the CRDT emits granular events
doc.getText('title').observe(e => setTitle(doc.getText('title').toString()))
net.on('status', ({ status }) => setOnline(status === 'connected'))   // UI shows offline honestly; editing continues

// undo: per-user, over the user's own ops, across remote interleaving. Y.UndoManager(fragment, { trackedOrigins: new Set([editor]) })

// the server for a CRDT document is small: authenticate, relay updates to the room, persist snapshots
// y-websocket's server does this; a custom one is ~200 lines. the document logic is in the CRDT library on both sides
wss.on('connection', async (ws, req) => {
  const { docId, user } = await authorise(req)                    // who may read / write this document
  const room = rooms.get(docId) ?? await loadRoom(docId)         // Y.Doc from the latest snapshot + updates since
  room.add(ws, user)
  ws.on('message', buf => {
    const msg = decode(buf)
    if (msg.type === 'sync') room.handleSync(ws, msg)             // state vector exchange / update apply + broadcast to others
    if (msg.type === 'awareness') room.broadcastAwareness(ws, msg) // ephemeral: relay, never store
  })
  ws.on('close', () => { room.remove(ws); if (room.empty) scheduleSnapshot(room) })
})
// persistence: append updates to a log table (docId, seq, bytes); every N updates or M minutes, write Y.encodeStateAsUpdate(doc) as a snapshot and truncate
// read-only viewers: same sync, writes rejected by authorise; history / versions: snapshots with timestamps; a "restore" is a new update that sets the content