demo · v133
Sync conflict detector
Two virtual editors writing to the same OPFS file. A FileSystemObserver sits on the parent directory and labels each change as appeared, modified, disappeared, or — for simultaneous writes — conflict. The collaborative-editor primitive without a server.
FileSystemObserver isn't available. Chrome 133+ required.editor A
editor B
save in either editor; the observer log fills below.
the loop
const root = await navigator.storage.getDirectory();
const obs = new FileSystemObserver((records) => {
for (const r of records) router(r);
});
obs.observe(root, { recursive: true });
function router(r) {
switch (r.type) {
case "appeared": onCreated(r.changedHandle); break;
case "modified": onModified(r.changedHandle); break;
case "disappeared": onDeleted(r.changedHandle); break;
case "moved": onMoved(r.changedHandle, r.relativePath); break;
case "errored": onError(r); break;
case "unknown": fullResync(); break;
}
}
Two saves within the same observer tick land as a single delivery batch — the merge layer can spot a conflict before it commits either write to the canonical copy. Pre-observer code polled handles every 250ms, missing fast-flickering changes.