@automerge/automerge-repo-react-hooks 1.1.3 → 1.1.5

package/README.md

@@ -3,24 +3,29 @@
 These hooks are provided as helpers for using Automerge in your React project.
 
 #### [useBootstrap](./src/useBootstrap.ts)
+
 This hook is used to load a document based on the URL hash, for example `//myapp/#documentId=[document ID]`.
 It can also load the document ID from localStorage, or create a new document if none is specified.
 
 #### [useLocalAwareness](./src/useLocalAwareness.ts) & [useRemoteAwareness](./src/useRemoteAwareness.ts)
+
 These hooks implement ephemeral awareness/presence, similar to [Yjs Awareness](https://docs.yjs.dev/getting-started/adding-awareness).
-They allow temporary state to be shared, such as cursor positions or peer online/offline status. 
+They allow temporary state to be shared, such as cursor positions or peer online/offline status.
 
 Ephemeral messages are replicated between peers, but not saved to the Automerge doc, and are used for temporary updates that will be discarded.
 
 #### [useRepo/RepoContext](./src/useRepo.ts)
+
 Use RepoContext to set up react context for an Automerge repo.
 Use useRepo to lookup the repo from context.
 Most hooks depend on RepoContext being available.
 
 #### [useDocument](./src/useDocument.ts)
+
 Return a document & updater fn, by ID.
 
 #### [useHandle](./src/useHandle.ts)
+
 Return a handle, by ID.
 
 ## Example usage
@@ -46,9 +51,7 @@ const sharedWorker = new SharedWorker(
 
 async function getRepo(): Promise<DocCollection> {
   return await Repo({
-    network: [
-      new BroadcastChannelNetworkAdapter(),
-    ],
+    network: [new BroadcastChannelNetworkAdapter()],
     sharePolicy: peerId => peerId.includes("shared-worker"),
   })
 }

package/dist/index.js

@@ -1 +1 @@
-import T,{createContext as k,useContext as A,useState as x,useRef as U,useEffect as g,useMemo as D}from"react";const O=k(null);function b(){const t=A(O);if(!t)throw new Error("Repo was not found on RepoContext.");return t}function P(t){const[s,o]=x(),i=b(),f=t?i.find(t):null,d=U(null);return g(()=>{if(o(void 0),!f)return;d.current=f,f.doc().then(a=>{d.current===f&&o(a)}).catch(a=>console.error(a));const u=a=>o(a.doc);return f.on("change",u),()=>{f.removeListener("change",u)}},[f]),[s,(u,a)=>{f&&f.change(u,a)}]}const H=t=>{const[s,o]=x({}),[i,f]=x({}),d=b();return g(()=>{const u=(e,r)=>{r&&o(l=>({...l,[e]:r}))},a=e=>{const r=e.documentId,l=({doc:v})=>u(r,v);e.on("change",l),f(v=>({...v,[r]:l}))},n=e=>{d.find(e).off("change",i[e]),o(r=>{const{[e]:l,...v}=r;return v})};return t&&(t.filter(e=>!s[e]).forEach(e=>{const r=d.find(e);r.doc().then(l=>{u(e,l),a(r)}).catch(l=>{console.error(`Error loading document ${e} in useDocuments: `,l)})}),Object.keys(s).map(e=>e).filter(e=>!t.includes(e)).forEach(n)),()=>{Object.entries(i).forEach(([e,r])=>{d.find(e).off("change",r)})}},[t]),s},M=(t,s=!1)=>{history[s?"pushState":"replaceState"]("","","#"+t),window.dispatchEvent(new HashChangeEvent("hashchange",{newURL:window.location.origin+window.location.pathname+t,oldURL:window.location.href}))},N=()=>{const[t,s]=x(window.location.hash);return g(()=>{const o=()=>void s(window.location.hash);return window.addEventListener("hashchange",o),()=>void window.removeEventListener("hashchange",o)},[]),t},S=(t,s)=>new URLSearchParams(s.slice(1)).get(t),B=(t,s,o)=>{const i=new URLSearchParams(o.slice(1));return i.set(t,s),i.toString()},$=(t,s)=>t&&(S(t,s)||localStorage.getItem(t)),q=(t,s)=>{t&&s!==S(t,window.location.hash)&&M(B(t,s,window.location.hash)),t&&localStorage.setItem(t,s)},z=({key:t="automergeUrl",onNoDocument:s=i=>i.create(),onInvalidAutomergeUrl:o}={})=>{const i=b(),f=N(),d=D(()=>{const u=$(t,f);try{return u?i.find(u):s(i)}catch(a){if(u&&o)return o(i,a);throw a}},[f,i,s,o]);return g(()=>{d&&q(t,d.url)},[f,d]),d};function F(t){const s=b(),[o,i]=x(t?s.find(t):void 0);return g(()=>{i(t?s.find(t):void 0)},[t]),o}function R(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var L=T,J=function(t){return typeof t=="function"},K=function(t){var s=L.useState(t),o=s[0],i=s[1],f=L.useRef(o),d=L.useCallback(function(u){f.current=J(u)?u(f.current):u,i(f.current)},[]);return[o,d,f]},Q=K;const E=R(Q);var I={exports:{}};(function(t){var s=Object.prototype.hasOwnProperty,o="~";function i(){}Object.create&&(i.prototype=Object.create(null),new i().__proto__||(o=!1));function f(n,e,r){this.fn=n,this.context=e,this.once=r||!1}function d(n,e,r,l,v){if(typeof r!="function")throw new TypeError("The listener must be a function");var p=new f(r,l||n,v),h=o?o+e:e;return n._events[h]?n._events[h].fn?n._events[h]=[n._events[h],p]:n._events[h].push(p):(n._events[h]=p,n._eventsCount++),n}function u(n,e){--n._eventsCount===0?n._events=new i:delete n._events[e]}function a(){this._events=new i,this._eventsCount=0}a.prototype.eventNames=function(){var n=[],e,r;if(this._eventsCount===0)return n;for(r in e=this._events)s.call(e,r)&&n.push(o?r.slice(1):r);return Object.getOwnPropertySymbols?n.concat(Object.getOwnPropertySymbols(e)):n},a.prototype.listeners=function(n){var e=o?o+n:n,r=this._events[e];if(!r)return[];if(r.fn)return[r.fn];for(var l=0,v=r.length,p=new Array(v);l<v;l++)p[l]=r[l].fn;return p},a.prototype.listenerCount=function(n){var e=o?o+n:n,r=this._events[e];return r?r.fn?1:r.length:0},a.prototype.emit=function(n,e,r,l,v,p){var h=o?o+n:n;if(!this._events[h])return!1;var c=this._events[h],m=arguments.length,y,w;if(c.fn){switch(c.once&&this.removeListener(n,c.fn,void 0,!0),m){case 1:return c.fn.call(c.context),!0;case 2:return c.fn.call(c.context,e),!0;case 3:return c.fn.call(c.context,e,r),!0;case 4:return c.fn.call(c.context,e,r,l),!0;case 5:return c.fn.call(c.context,e,r,l,v),!0;case 6:return c.fn.call(c.context,e,r,l,v,p),!0}for(w=1,y=new Array(m-1);w<m;w++)y[w-1]=arguments[w];c.fn.apply(c.context,y)}else{var j=c.length,_;for(w=0;w<j;w++)switch(c[w].once&&this.removeListener(n,c[w].fn,void 0,!0),m){case 1:c[w].fn.call(c[w].context);break;case 2:c[w].fn.call(c[w].context,e);break;case 3:c[w].fn.call(c[w].context,e,r);break;case 4:c[w].fn.call(c[w].context,e,r,l);break;default:if(!y)for(_=1,y=new Array(m-1);_<m;_++)y[_-1]=arguments[_];c[w].fn.apply(c[w].context,y)}}return!0},a.prototype.on=function(n,e,r){return d(this,n,e,r,!1)},a.prototype.once=function(n,e,r){return d(this,n,e,r,!0)},a.prototype.removeListener=function(n,e,r,l){var v=o?o+n:n;if(!this._events[v])return this;if(!e)return u(this,v),this;var p=this._events[v];if(p.fn)p.fn===e&&(!l||p.once)&&(!r||p.context===r)&&u(this,v);else{for(var h=0,c=[],m=p.length;h<m;h++)(p[h].fn!==e||l&&!p[h].once||r&&p[h].context!==r)&&c.push(p[h]);c.length?this._events[v]=c.length===1?c[0]:c:u(this,v)}return this},a.prototype.removeAllListeners=function(n){var e;return n?(e=o?o+n:n,this._events[e]&&u(this,e)):(this._events=new i,this._eventsCount=0),this},a.prototype.off=a.prototype.removeListener,a.prototype.addListener=a.prototype.on,a.prefixed=o,a.EventEmitter=a,t.exports=a})(I);var V=I.exports;const W=R(V),C=new W,X=({handle:t,localUserId:s,offlineTimeout:o=3e4,getTime:i=()=>new Date().getTime()})=>{const[f,d,u]=E({}),[a,n,e]=E({});return g(()=>{const r=p=>{const[h,c]=p.message;h!==s&&(e.current[h]||C.emit("new_peer",p),d({...u.current,[h]:c}),n({...e.current,[h]:i()}))},l=()=>{const p=u.current,h=e.current,c=i();for(const m in h)c-h[m]>o&&(delete p[m],delete h[m]);d(p),n(h)};t.on("ephemeral-message",r);const v=setInterval(l,o);return()=>{t.removeListener("ephemeral-message",r),clearInterval(v)}},[t,s,o,i]),[f,a]},Y=({handle:t,userId:s,initialState:o,heartbeatTime:i=15e3})=>{const[f,d,u]=E(o),a=n=>{const e=typeof n=="function"?n(u.current):n;d(e),t.broadcast([s,e])};return g(()=>{if(!s)return;const n=()=>void t.broadcast([s,u.current]);n();const e=setInterval(n,i);return()=>void clearInterval(e)},[t,s,i]),g(()=>{let n;const e=C.on("new_peer",()=>{n=setTimeout(()=>t.broadcast([s,u.current]),500)});return()=>{e.off("new_peer"),n&&clearTimeout(n)}},[t,s,C]),[f,a]};export{O as RepoContext,z as useBootstrap,P as useDocument,H as useDocuments,F as useHandle,Y as useLocalAwareness,X as useRemoteAwareness,b as useRepo};
+import T,{createContext as k,useContext as A,useRef as U,useState as x,useEffect as g,useMemo as D}from"react";const C=k(null);function L(){const n=A(C);if(!n)throw new Error("Repo was not found on RepoContext.");return n}function P(n){const s=L(),r=n?s.find(n):null,i=U(null),[m,v]=x(()=>r==null?void 0:r.docSync());return g(()=>{if(v(r==null?void 0:r.docSync()),!r)return;i.current=r,r.doc().then(e=>{i.current===r&&v(e)}).catch(e=>console.error(e));const p=e=>v(e.doc);r.on("change",p);const l=()=>v(void 0);return r.on("delete",l),()=>{r.removeListener("change",p),r.removeListener("delete",l)}},[r]),[m,(p,l)=>{r&&r.change(p,l)}]}const H=n=>{const[s,r]=x({}),[i,m]=x({}),v=L();return g(()=>{const p=(t,a)=>{a&&r(f=>({...f,[t]:a}))},l=t=>{r(a=>{const{[t]:f,...u}=a;return u})},e=t=>{const a=t.documentId,f={change:({doc:u})=>p(a,u),delete:()=>l(a)};t.on("change",f.change),t.on("delete",f.delete),m(u=>({...u,[a]:u}))},o=t=>{const a=v.find(t);a.off("change",i[t].change),a.off("delete",i[t].delete),r(f=>{const{[t]:u,...h}=f;return h})};return n&&(n.filter(t=>!s[t]).forEach(t=>{const a=v.find(t);a.doc().then(f=>{p(t,f),e(a)}).catch(f=>{console.error(`Error loading document ${t} in useDocuments: `,f)})}),Object.keys(s).map(t=>t).filter(t=>!n.includes(t)).forEach(o)),()=>{Object.entries(i).forEach(([t,a])=>{const f=v.find(t);f.off("change",a.change),f.off("delete",a.delete)})}},[n]),s},M=(n,s=!1)=>{history[s?"pushState":"replaceState"]("","","#"+n),window.dispatchEvent(new HashChangeEvent("hashchange",{newURL:window.location.origin+window.location.pathname+n,oldURL:window.location.href}))},N=()=>{const[n,s]=x(window.location.hash);return g(()=>{const r=()=>void s(window.location.hash);return window.addEventListener("hashchange",r),()=>void window.removeEventListener("hashchange",r)},[]),n},O=(n,s)=>new URLSearchParams(s.slice(1)).get(n),B=(n,s,r)=>{const i=new URLSearchParams(r.slice(1));return i.set(n,s),i.toString()},$=(n,s)=>n&&(O(n,s)||localStorage.getItem(n)),q=(n,s)=>{n&&s!==O(n,window.location.hash)&&M(B(n,s,window.location.hash)),n&&localStorage.setItem(n,s)},z=({key:n="automergeUrl",onNoDocument:s=i=>i.create(),onInvalidAutomergeUrl:r}={})=>{const i=L(),m=N(),v=D(()=>{const p=$(n,m);try{return p?i.find(p):s(i)}catch(l){if(p&&r)return r(i,l);throw l}},[m,i,s,r]);return g(()=>{v&&q(n,v.url)},[m,v]),v};function F(n){const s=L(),[r,i]=x(n?s.find(n):void 0);return g(()=>{i(n?s.find(n):void 0)},[n]),r}function R(n){return n&&n.__esModule&&Object.prototype.hasOwnProperty.call(n,"default")?n.default:n}var b=T,J=function(n){return typeof n=="function"},K=function(n){var s=b.useState(n),r=s[0],i=s[1],m=b.useRef(r),v=b.useCallback(function(p){m.current=J(p)?p(m.current):p,i(m.current)},[]);return[r,v,m]},Q=K;const S=R(Q);var I={exports:{}};(function(n){var s=Object.prototype.hasOwnProperty,r="~";function i(){}Object.create&&(i.prototype=Object.create(null),new i().__proto__||(r=!1));function m(e,o,t){this.fn=e,this.context=o,this.once=t||!1}function v(e,o,t,a,f){if(typeof t!="function")throw new TypeError("The listener must be a function");var u=new m(t,a||e,f),h=r?r+o:o;return e._events[h]?e._events[h].fn?e._events[h]=[e._events[h],u]:e._events[h].push(u):(e._events[h]=u,e._eventsCount++),e}function p(e,o){--e._eventsCount===0?e._events=new i:delete e._events[o]}function l(){this._events=new i,this._eventsCount=0}l.prototype.eventNames=function(){var e=[],o,t;if(this._eventsCount===0)return e;for(t in o=this._events)s.call(o,t)&&e.push(r?t.slice(1):t);return Object.getOwnPropertySymbols?e.concat(Object.getOwnPropertySymbols(o)):e},l.prototype.listeners=function(e){var o=r?r+e:e,t=this._events[o];if(!t)return[];if(t.fn)return[t.fn];for(var a=0,f=t.length,u=new Array(f);a<f;a++)u[a]=t[a].fn;return u},l.prototype.listenerCount=function(e){var o=r?r+e:e,t=this._events[o];return t?t.fn?1:t.length:0},l.prototype.emit=function(e,o,t,a,f,u){var h=r?r+e:e;if(!this._events[h])return!1;var c=this._events[h],w=arguments.length,y,d;if(c.fn){switch(c.once&&this.removeListener(e,c.fn,void 0,!0),w){case 1:return c.fn.call(c.context),!0;case 2:return c.fn.call(c.context,o),!0;case 3:return c.fn.call(c.context,o,t),!0;case 4:return c.fn.call(c.context,o,t,a),!0;case 5:return c.fn.call(c.context,o,t,a,f),!0;case 6:return c.fn.call(c.context,o,t,a,f,u),!0}for(d=1,y=new Array(w-1);d<w;d++)y[d-1]=arguments[d];c.fn.apply(c.context,y)}else{var j=c.length,_;for(d=0;d<j;d++)switch(c[d].once&&this.removeListener(e,c[d].fn,void 0,!0),w){case 1:c[d].fn.call(c[d].context);break;case 2:c[d].fn.call(c[d].context,o);break;case 3:c[d].fn.call(c[d].context,o,t);break;case 4:c[d].fn.call(c[d].context,o,t,a);break;default:if(!y)for(_=1,y=new Array(w-1);_<w;_++)y[_-1]=arguments[_];c[d].fn.apply(c[d].context,y)}}return!0},l.prototype.on=function(e,o,t){return v(this,e,o,t,!1)},l.prototype.once=function(e,o,t){return v(this,e,o,t,!0)},l.prototype.removeListener=function(e,o,t,a){var f=r?r+e:e;if(!this._events[f])return this;if(!o)return p(this,f),this;var u=this._events[f];if(u.fn)u.fn===o&&(!a||u.once)&&(!t||u.context===t)&&p(this,f);else{for(var h=0,c=[],w=u.length;h<w;h++)(u[h].fn!==o||a&&!u[h].once||t&&u[h].context!==t)&&c.push(u[h]);c.length?this._events[f]=c.length===1?c[0]:c:p(this,f)}return this},l.prototype.removeAllListeners=function(e){var o;return e?(o=r?r+e:e,this._events[o]&&p(this,o)):(this._events=new i,this._eventsCount=0),this},l.prototype.off=l.prototype.removeListener,l.prototype.addListener=l.prototype.on,l.prefixed=r,l.EventEmitter=l,n.exports=l})(I);var V=I.exports;const W=R(V),E=new W,X=({handle:n,localUserId:s,offlineTimeout:r=3e4,getTime:i=()=>new Date().getTime()})=>{const[m,v,p]=S({}),[l,e,o]=S({});return g(()=>{const t=u=>{const[h,c]=u.message;h!==s&&(o.current[h]||E.emit("new_peer",u),v({...p.current,[h]:c}),e({...o.current,[h]:i()}))},a=()=>{const u=p.current,h=o.current,c=i();for(const w in h)c-h[w]>r&&(delete u[w],delete h[w]);v(u),e(h)};n.on("ephemeral-message",t);const f=setInterval(a,r);return()=>{n.removeListener("ephemeral-message",t),clearInterval(f)}},[n,s,r,i]),[m,l]},Y=({handle:n,userId:s,initialState:r,heartbeatTime:i=15e3})=>{const[m,v,p]=S(r),l=e=>{const o=typeof e=="function"?e(p.current):e;v(o),n.broadcast([s,o])};return g(()=>{if(!s)return;const e=()=>void n.broadcast([s,p.current]);e();const o=setInterval(e,i);return()=>void clearInterval(o)},[n,s,i]),g(()=>{let e;const o=E.on("new_peer",()=>{e=setTimeout(()=>n.broadcast([s,p.current]),500)});return()=>{o.off("new_peer"),e&&clearTimeout(e)}},[n,s,E]),[m,l]};export{C as RepoContext,z as useBootstrap,P as useDocument,H as useDocuments,F as useHandle,Y as useLocalAwareness,X as useRemoteAwareness,L as useRepo};

package/dist/useDocument.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDocument.d.ts","sourceRoot":"","sources":["../src/useDocument.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EAGd,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAA;AAIxE;;;;;;;KAOK;AACL,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,aAAa,4CAqCnC,SAAS,CAAC,CAAC,YACX,cAAc,CAAC,CAAC,GAAG,SAAS,WAOzC"}
+{"version":3,"file":"useDocument.d.ts","sourceRoot":"","sources":["../src/useDocument.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,aAAa,EAGd,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAA;AAIxE;;;;;;;KAOK;AACL,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,aAAa,4CA2CnC,SAAS,CAAC,CAAC,YACX,cAAc,CAAC,CAAC,GAAG,SAAS,WAOzC"}

package/dist/useDocuments.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDocuments.d.ts","sourceRoot":"","sources":["../src/useDocuments.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAGZ,UAAU,EACX,MAAM,2BAA2B,CAAA;AAIlC;;;GAGG;AACH,eAAO,MAAM,YAAY,YAAa,KAAK,EAAE,qBAqE5C,CAAA;AAED,KAAK,KAAK,GAAG,UAAU,GAAG,YAAY,CAAA"}
+{"version":3,"file":"useDocuments.d.ts","sourceRoot":"","sources":["../src/useDocuments.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EAIZ,UAAU,EACX,MAAM,2BAA2B,CAAA;AAIlC;;;GAGG;AACH,eAAO,MAAM,YAAY,YAAa,KAAK,EAAE,qBAyF5C,CAAA;AAED,KAAK,KAAK,GAAG,UAAU,GAAG,YAAY,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automerge/automerge-repo-react-hooks",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "Hooks to access an Automerge Repo from your react app.",
   "repository": "https://github.com/automerge/automerge-repo/tree/master/packages/automerge-repo-react-hooks",
   "author": "Peter van Hardenberg <pvh@pvh.ca>",
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@automerge/automerge": "^2.1.9",
-    "@automerge/automerge-repo": "1.1.3",
+    "@automerge/automerge-repo": "1.1.5",
     "eventemitter3": "^5.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -42,5 +42,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f59ba3612d1110003e2365fe0fe5a799539f1b59"
+  "gitHead": "64edfaea5e53e77cd9158fc1df52fea85801db71"
 }

package/src/useDocument.ts

@@ -16,17 +16,20 @@ import { useRepo } from "./useRepo.js"
  * This requires a {@link RepoContext} to be provided by a parent component.
  * */
 export function useDocument<T>(id?: AnyDocumentId) {
-  const [doc, setDoc] = useState<Doc<T>>()
   const repo = useRepo()
 
   const handle = id ? repo.find<T>(id) : null
   const handleRef = useRef<DocHandle<T> | null>(null)
 
+  const [doc, setDoc] = useState<Doc<T> | undefined>(() => handle?.docSync())
+
   useEffect(() => {
-    // When the handle has changed, reset the doc to an empty state.
+    // When the handle has changed, reset the doc to the current value of docSync().
+    // For already-loaded documents this will be the last known value, for unloaded documents
+    // this will be undefined.
     // This ensures that if loading the doc takes a long time, the UI
     // shows a loading state during that time rather than a stale doc.
-    setDoc(undefined)
+    setDoc(handle?.docSync())
 
     if (!handle) return
 
@@ -44,8 +47,11 @@ export function useDocument<T>(id?: AnyDocumentId) {
 
     const onChange = (h: DocHandleChangePayload<T>) => setDoc(h.doc)
     handle.on("change", onChange)
+    const onDelete = () => setDoc(undefined)
+    handle.on("delete", onDelete)
     const cleanup = () => {
       handle.removeListener("change", onChange)
+      handle.removeListener("delete", onDelete)
     }
 
     return cleanup

package/src/useDocuments.ts

@@ -2,6 +2,7 @@ import {
   AutomergeUrl,
   DocHandle,
   DocHandleChangePayload,
+  DocHandleDeletePayload,
   DocumentId,
 } from "@automerge/automerge-repo"
 import { useEffect, useState } from "react"
@@ -13,7 +14,7 @@ import { useRepo } from "./useRepo.js"
  */
 export const useDocuments = <T>(ids?: DocId[]) => {
   const [documents, setDocuments] = useState({} as Record<DocId, T>)
-  const [listeners, setListeners] = useState({} as Record<DocId, Listener<T>>)
+  const [listeners, setListeners] = useState({} as Record<DocId, Listeners<T>>)
   const repo = useRepo()
 
   useEffect(
@@ -21,22 +22,35 @@ export const useDocuments = <T>(ids?: DocId[]) => {
       const updateDocument = (id: DocId, doc?: T) => {
         if (doc) setDocuments(docs => ({ ...docs, [id]: doc }))
       }
+      const updateDocumentDeleted = (id: DocId) => {
+        // (don't remove listeners)
+        // remove the document from the document map
+        setDocuments(docs => {
+          const { [id]: _removedDoc, ...remainingDocs } = docs
+          return remainingDocs
+        })
+      }
 
       const addListener = (handle: DocHandle<T>) => {
         const id = handle.documentId
 
         // whenever a document changes, update our map
-        const listener: Listener<T> = ({ doc }) => updateDocument(id, doc)
-        handle.on("change", listener)
+        const listeners: Listeners<T> = {
+          change: ({ doc }) => updateDocument(id, doc),
+          delete: () => updateDocumentDeleted(id),
+        }
+        handle.on("change", listeners.change)
+        handle.on("delete", listeners.delete)
 
         // store the listener so we can remove it later
-        setListeners(listeners => ({ ...listeners, [id]: listener }))
+        setListeners(listeners => ({ ...listeners, [id]: listeners }))
       }
 
       const removeDocument = (id: DocId) => {
         // remove the listener
         const handle = repo.find<T>(id)
-        handle.off("change", listeners[id])
+        handle.off("change", listeners[id].change)
+        handle.off("delete", listeners[id].delete)
 
         // remove the document from the document map
         setDocuments(docs => {
@@ -51,12 +65,18 @@ export const useDocuments = <T>(ids?: DocId[]) => {
         newIds.forEach(id => {
           const handle = repo.find<T>(id)
           // As each document loads, update our map
-          handle.doc().then(doc => {
-            updateDocument(id, doc)
-            addListener(handle)
-          }).catch(err => {
-            console.error(`Error loading document ${id} in useDocuments: `, err)
-          })
+          handle
+            .doc()
+            .then(doc => {
+              updateDocument(id, doc)
+              addListener(handle)
+            })
+            .catch(err => {
+              console.error(
+                `Error loading document ${id} in useDocuments: `,
+                err
+              )
+            })
         })
 
         // remove any documents that are no longer in the list
@@ -68,9 +88,10 @@ export const useDocuments = <T>(ids?: DocId[]) => {
 
       // on unmount, remove all listeners
       const teardown = () => {
-        Object.entries(listeners).forEach(([id, listener]) => {
+        Object.entries(listeners).forEach(([id, listeners]) => {
           const handle = repo.find<T>(id as DocId)
-          handle.off("change", listener)
+          handle.off("change", listeners.change)
+          handle.off("delete", listeners.delete)
         })
       }
 
@@ -83,4 +104,6 @@ export const useDocuments = <T>(ids?: DocId[]) => {
 }
 
 type DocId = DocumentId | AutomergeUrl
-type Listener<T> = (p: DocHandleChangePayload<T>) => void
+type ChangeListener<T> = (p: DocHandleChangePayload<T>) => void
+type DeleteListener<T> = (p: DocHandleDeletePayload<T>) => void
+type Listeners<T> = { change: ChangeListener<T>, delete: DeleteListener<T> }

package/src/useLocalAwareness.ts

@@ -1,87 +1,87 @@
-import { useEffect } from "react"
-import useStateRef from "react-usestateref"
-import { peerEvents } from "./useRemoteAwareness.js"
-import { DocHandle } from "@automerge/automerge-repo"
-
-export interface UseLocalAwarenessProps {
-  /** The document handle to send ephemeral state on */
-  handle: DocHandle<unknown>
-  /** Our user ID **/
-  userId: string
-  /** The initial state object/primitive we should advertise */
-  initialState: any
-  /** How frequently to send heartbeats */
-  heartbeatTime?: number
-}
-/**
- * This hook maintains state for the local client.
- * Like React.useState, it returns a [state, setState] array.
- * It is intended to be used alongside useRemoteAwareness.
- *
- * When state is changed it is broadcast to all clients.
- * It also broadcasts a heartbeat to let other clients know it is online.
- *
- * Note that userIds aren't secure (yet). Any client can lie about theirs.
- *
- * @param {string} props.userId Unique user ID. Clients can lie about this.
- * @param {any} props.initialState Initial state object/primitive
- * @param {number?1500} props.heartbeatTime How often to send a heartbeat (in ms)
- * @returns [state, setState]
- */
-export const useLocalAwareness = ({
-  handle,
-  userId,
-  initialState,
-  heartbeatTime = 15000,
-}: UseLocalAwarenessProps) => {
-  const [localState, setLocalState, localStateRef] = useStateRef(initialState)
-
-  const setState = (stateOrUpdater: any) => {
-    const state =
-      typeof stateOrUpdater === "function"
-        ? stateOrUpdater(localStateRef.current)
-        : stateOrUpdater
-    setLocalState(state)
-    // TODO: Send deltas instead of entire state
-    handle.broadcast([userId, state])
-  }
-
-  useEffect(() => {
-    // Don't broadcast if userId isn't set: this avoids bogus broadcasts
-    // during the loading of a userId document.
-    if (!userId) {
-      return
-    }
-
-    // Send periodic heartbeats
-    const heartbeat = () =>
-      void handle.broadcast([userId, localStateRef.current])
-    heartbeat() // Initial heartbeat
-    // TODO: we don't need to send a heartbeat if we've changed state recently; use recursive setTimeout instead of setInterval
-    const heartbeatIntervalId = setInterval(heartbeat, heartbeatTime)
-    return () => void clearInterval(heartbeatIntervalId)
-  }, [handle, userId, heartbeatTime])
-
-  useEffect(() => {
-    // Send entire state to new peers
-    let broadcastTimeoutId: ReturnType<typeof setTimeout>
-    const newPeerEvents = peerEvents.on("new_peer", () => {
-      broadcastTimeoutId = setTimeout(
-        () => handle.broadcast([userId, localStateRef.current]),
-        500 // Wait for the peer to be ready
-      )
-    })
-    return () => {
-      newPeerEvents.off("new_peer")
-      broadcastTimeoutId && clearTimeout(broadcastTimeoutId)
-    }
-  }, [handle, userId, peerEvents])
-
-  // TODO: Send an "offline" message on unmount
-  // useEffect(
-  //   () => () => void handle.broadcast(null), // Same as Yjs awareness
-  //   []
-  // );
-
-  return [localState, setState]
-}
+import { useEffect } from "react"
+import useStateRef from "react-usestateref"
+import { peerEvents } from "./useRemoteAwareness.js"
+import { DocHandle } from "@automerge/automerge-repo"
+
+export interface UseLocalAwarenessProps {
+  /** The document handle to send ephemeral state on */
+  handle: DocHandle<unknown>
+  /** Our user ID **/
+  userId: string
+  /** The initial state object/primitive we should advertise */
+  initialState: any
+  /** How frequently to send heartbeats */
+  heartbeatTime?: number
+}
+/**
+ * This hook maintains state for the local client.
+ * Like React.useState, it returns a [state, setState] array.
+ * It is intended to be used alongside useRemoteAwareness.
+ *
+ * When state is changed it is broadcast to all clients.
+ * It also broadcasts a heartbeat to let other clients know it is online.
+ *
+ * Note that userIds aren't secure (yet). Any client can lie about theirs.
+ *
+ * @param {string} props.userId Unique user ID. Clients can lie about this.
+ * @param {any} props.initialState Initial state object/primitive
+ * @param {number?1500} props.heartbeatTime How often to send a heartbeat (in ms)
+ * @returns [state, setState]
+ */
+export const useLocalAwareness = ({
+  handle,
+  userId,
+  initialState,
+  heartbeatTime = 15000,
+}: UseLocalAwarenessProps) => {
+  const [localState, setLocalState, localStateRef] = useStateRef(initialState)
+
+  const setState = (stateOrUpdater: any) => {
+    const state =
+      typeof stateOrUpdater === "function"
+        ? stateOrUpdater(localStateRef.current)
+        : stateOrUpdater
+    setLocalState(state)
+    // TODO: Send deltas instead of entire state
+    handle.broadcast([userId, state])
+  }
+
+  useEffect(() => {
+    // Don't broadcast if userId isn't set: this avoids bogus broadcasts
+    // during the loading of a userId document.
+    if (!userId) {
+      return
+    }
+
+    // Send periodic heartbeats
+    const heartbeat = () =>
+      void handle.broadcast([userId, localStateRef.current])
+    heartbeat() // Initial heartbeat
+    // TODO: we don't need to send a heartbeat if we've changed state recently; use recursive setTimeout instead of setInterval
+    const heartbeatIntervalId = setInterval(heartbeat, heartbeatTime)
+    return () => void clearInterval(heartbeatIntervalId)
+  }, [handle, userId, heartbeatTime])
+
+  useEffect(() => {
+    // Send entire state to new peers
+    let broadcastTimeoutId: ReturnType<typeof setTimeout>
+    const newPeerEvents = peerEvents.on("new_peer", () => {
+      broadcastTimeoutId = setTimeout(
+        () => handle.broadcast([userId, localStateRef.current]),
+        500 // Wait for the peer to be ready
+      )
+    })
+    return () => {
+      newPeerEvents.off("new_peer")
+      broadcastTimeoutId && clearTimeout(broadcastTimeoutId)
+    }
+  }, [handle, userId, peerEvents])
+
+  // TODO: Send an "offline" message on unmount
+  // useEffect(
+  //   () => () => void handle.broadcast(null), // Same as Yjs awareness
+  //   []
+  // );
+
+  return [localState, setState]
+}

package/test/useDocument.test.tsx

@@ -2,6 +2,7 @@ import { AutomergeUrl, PeerId, Repo } from "@automerge/automerge-repo"
 import { DummyStorageAdapter } from "@automerge/automerge-repo/test/helpers/DummyStorageAdapter"
 import { render, waitFor } from "@testing-library/react"
 import React from "react"
+import { act } from "react-dom/test-utils"
 import { describe, expect, it, vi } from "vitest"
 import { useDocument } from "../src/useDocument"
 import { RepoContext } from "../src/useRepo"
@@ -34,9 +35,14 @@ describe("useDocument", () => {
       const result = await oldDoc()
       return result
     }
+    handleSlow.docSync = () => {
+      return undefined
+    }
 
     const wrapper = ({ children }) => {
-      return <RepoContext.Provider value={repo}>{children}</RepoContext.Provider>
+      return (
+        <RepoContext.Provider value={repo}>{children}</RepoContext.Provider>
+      )
     }
 
     return {
@@ -48,9 +54,12 @@ describe("useDocument", () => {
     }
   }
 
-  const Component = ({ url, onDoc }: {
-    url: AutomergeUrl,
-    onDoc: (doc: ExampleDoc) => void,
+  const Component = ({
+    url,
+    onDoc,
+  }: {
+    url: AutomergeUrl
+    onDoc: (doc: ExampleDoc) => void
   }) => {
     const [doc] = useDocument(url)
     onDoc(doc)
@@ -61,15 +70,47 @@ describe("useDocument", () => {
     const { handleA, wrapper } = setup()
     const onDoc = vi.fn()
 
-    render(<Component url={handleA.url} onDoc={onDoc} />, {wrapper})
+    render(<Component url={handleA.url} onDoc={onDoc} />, { wrapper })
     await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith({ foo: "A" }))
   })
 
+  it("should immediately return a document if it has already been loaded", async () => {
+    const { handleA, wrapper } = setup()
+    const onDoc = vi.fn()
+
+    render(<Component url={handleA.url} onDoc={onDoc} />, { wrapper })
+    await waitFor(() => expect(onDoc).not.toHaveBeenCalledWith(undefined))
+  })
+
+  it("should update if the doc changes", async () => {
+    const { wrapper, handleA } = setup()
+    const onDoc = vi.fn()
+
+    render(<Component url={handleA.url} onDoc={onDoc} />, {wrapper})
+    await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith({ foo: "A" }))
+
+    act(() => handleA.change(doc => (doc.foo = "new value")))
+    await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith({ foo: "new value" }))
+  });
+
+  it("should update if the doc is deleted", async () => {
+    const { wrapper, handleA } = setup()
+    const onDoc = vi.fn()
+
+    render(<Component url={handleA.url} onDoc={onDoc} />, {wrapper})
+    await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith({ foo: "A" }))
+
+    act(() => handleA.delete())
+    await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith(undefined))
+  });
+
   it("should update if the url changes", async () => {
     const { handleA, handleB, wrapper } = setup()
     const onDoc = vi.fn()
 
-    const { rerender } = render(<Component url={undefined} onDoc={onDoc} />, {wrapper})
+    const { rerender } = render(<Component url={undefined} onDoc={onDoc} />, {
+      wrapper,
+    })
     await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith(undefined))
 
     // set url to doc A
@@ -89,7 +130,9 @@ describe("useDocument", () => {
     const { handleA, handleSlow, wrapper } = setup()
     const onDoc = vi.fn()
 
-    const { rerender } = render(<Component url={undefined} onDoc={onDoc} />, {wrapper})
+    const { rerender } = render(<Component url={undefined} onDoc={onDoc} />, {
+      wrapper,
+    })
     await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith(undefined))
 
     // start by setting url to doc A
@@ -107,7 +150,9 @@ describe("useDocument", () => {
     const { handleA, handleSlow, wrapper } = setup()
     const onDoc = vi.fn()
 
-    const { rerender } = render(<Component url={undefined} onDoc={onDoc} />, {wrapper})
+    const { rerender } = render(<Component url={undefined} onDoc={onDoc} />, {
+      wrapper,
+    })
     await waitFor(() => expect(onDoc).toHaveBeenLastCalledWith(undefined))
 
     // Set the URL to a slow doc and then a fast doc.

package/test/useDocuments.test.tsx

@@ -15,20 +15,29 @@ describe("useDocuments", () => {
     })
 
     const wrapper = ({ children }) => {
-      return <RepoContext.Provider value={repo}>{children}</RepoContext.Provider>
+      return (
+        <RepoContext.Provider value={repo}>{children}</RepoContext.Provider>
+      )
     }
 
+    let documentValues: Record<string, any> = {}
+
     const documentIds = range(10).map(i => {
-      const handle = repo.create({ foo: i })
+      const value = { foo: i }
+      const handle = repo.create(value)
+      documentValues[handle.documentId] = value
       return handle.documentId
     })
 
-    return { repo, wrapper, documentIds }
+    return { repo, wrapper, documentIds, documentValues }
   }
 
-  const Component = ({ ids, onDocs }: {
-    ids: DocumentId[],
-    onDocs: (documents: Record<DocumentId, unknown>) => void,
+  const Component = ({
+    ids,
+    onDocs,
+  }: {
+    ids: DocumentId[]
+    onDocs: (documents: Record<DocumentId, unknown>) => void
   }) => {
     const documents = useDocuments(ids)
     onDocs(documents)
@@ -40,9 +49,11 @@ describe("useDocuments", () => {
     const onDocs = vi.fn()
 
     render(<Component ids={documentIds} onDocs={onDocs} />, { wrapper })
-    await waitFor(() => expect(onDocs).toHaveBeenCalledWith(
-      Object.fromEntries(documentIds.map((id, i) => [id, { foo: i }]))
-    ))
+    await waitFor(() =>
+      expect(onDocs).toHaveBeenCalledWith(
+        Object.fromEntries(documentIds.map((id, i) => [id, { foo: i }]))
+      )
+    )
   })
 
   it("updates documents when they change", async () => {
@@ -50,9 +61,11 @@ describe("useDocuments", () => {
     const onDocs = vi.fn()
 
     render(<Component ids={documentIds} onDocs={onDocs} />, { wrapper })
-    await waitFor(() => expect(onDocs).toHaveBeenCalledWith(
-      Object.fromEntries(documentIds.map((id, i) => [id, { foo: i }]))
-    ))
+    await waitFor(() =>
+      expect(onDocs).toHaveBeenCalledWith(
+        Object.fromEntries(documentIds.map((id, i) => [id, { foo: i }]))
+      )
+    )
 
     act(() => {
       // multiply the value of foo in each document by 10
@@ -61,28 +74,39 @@ describe("useDocuments", () => {
         handle.change(s => (s.foo *= 10))
       })
     })
-    await waitFor(() => expect(onDocs).toHaveBeenCalledWith(
-      Object.fromEntries(documentIds.map((id, i) => [id, { foo: i * 10 }]))
-    ))
+    await waitFor(() =>
+      expect(onDocs).toHaveBeenCalledWith(
+        Object.fromEntries(documentIds.map((id, i) => [id, { foo: i * 10 }]))
+      )
+    )
   })
 
   it(`removes documents when they're removed from the list of ids`, async () => {
     const { documentIds, wrapper } = setup()
     const onDocs = vi.fn()
 
-    const { rerender } = render(<Component ids={documentIds} onDocs={onDocs} />, { wrapper })
-    await waitFor(() => expect(onDocs).toHaveBeenCalledWith(
-      Object.fromEntries(documentIds.map((id, i) => [id, { foo: i }]))
-    ))
+    const { rerender } = render(
+      <Component ids={documentIds} onDocs={onDocs} />,
+      { wrapper }
+    )
+    await waitFor(() =>
+      expect(onDocs).toHaveBeenCalledWith(
+        Object.fromEntries(documentIds.map((id, i) => [id, { foo: i }]))
+      )
+    )
 
     // remove the first document
     rerender(<Component ids={documentIds.slice(1)} onDocs={onDocs} />)
     // 👆 Note that this only works because documentIds.slice(1) is a different
     // object from documentIds. If we modified documentIds directly, the hook
     // wouldn't re-run.
-    await waitFor(() => expect(onDocs).toHaveBeenCalledWith(
-      Object.fromEntries(documentIds.map((id, i) => [id, { foo: i }]).slice(1))
-    ))
+    await waitFor(() =>
+      expect(onDocs).toHaveBeenCalledWith(
+        Object.fromEntries(
+          documentIds.map((id, i) => [id, { foo: i }]).slice(1)
+        )
+      )
+    )
   })
 })
 

package/test/useHandle.test.tsx

@@ -1,4 +1,9 @@
-import { AutomergeUrl, DocHandle, PeerId, Repo } from "@automerge/automerge-repo"
+import {
+  AutomergeUrl,
+  DocHandle,
+  PeerId,
+  Repo,
+} from "@automerge/automerge-repo"
 import { DummyStorageAdapter } from "@automerge/automerge-repo/test/helpers/DummyStorageAdapter"
 import { render, waitFor } from "@testing-library/react"
 import React from "react"
@@ -38,9 +43,12 @@ describe("useHandle", () => {
     }
   }
 
-  const Component = ({ url, onHandle }: {
-    url: AutomergeUrl,
-    onHandle: (handle: DocHandle<unknown> | undefined) => void,
+  const Component = ({
+    url,
+    onHandle,
+  }: {
+    url: AutomergeUrl
+    onHandle: (handle: DocHandle<unknown> | undefined) => void
   }) => {
     const handle = useHandle(url)
     onHandle(handle)
@@ -51,7 +59,7 @@ describe("useHandle", () => {
     const { handleA, wrapper } = setup()
     const onHandle = vi.fn()
 
-    render(<Component url={handleA.url} onHandle={onHandle} />, {wrapper})
+    render(<Component url={handleA.url} onHandle={onHandle} />, { wrapper })
     await waitFor(() => expect(onHandle).toHaveBeenLastCalledWith(handleA))
   })
 
@@ -59,7 +67,7 @@ describe("useHandle", () => {
     const { wrapper } = setup()
     const onHandle = vi.fn()
 
-    render(<Component url={undefined} onHandle={onHandle} />, {wrapper})
+    render(<Component url={undefined} onHandle={onHandle} />, { wrapper })
     await waitFor(() => expect(onHandle).toHaveBeenLastCalledWith(undefined))
   })
 
@@ -67,7 +75,10 @@ describe("useHandle", () => {
     const { wrapper, handleA, handleB } = setup()
     const onHandle = vi.fn()
 
-    const { rerender } = render(<Component url={undefined} onHandle={onHandle} />, {wrapper})
+    const { rerender } = render(
+      <Component url={undefined} onHandle={onHandle} />,
+      { wrapper }
+    )
     await waitFor(() => expect(onHandle).toHaveBeenLastCalledWith(undefined))
 
     // set url to doc A

package/test/useRepo.test.tsx

@@ -5,9 +5,7 @@ import { describe, expect, test, vi } from "vitest"
 import { RepoContext, useRepo } from "../src/useRepo.js"
 
 describe("useRepo", () => {
-  const Component = ({ onRepo }: {
-    onRepo: (repo: Repo) => void,
-  }) => {
+  const Component = ({ onRepo }: { onRepo: (repo: Repo) => void }) => {
     const repo = useRepo()
     onRepo(repo)
     return null
@@ -18,7 +16,7 @@ describe("useRepo", () => {
     // Prevent console spam by swallowing console.error "uncaught error" message
     const spy = vi.spyOn(console, "error")
     spy.mockImplementation(() => {})
-    expect(() => render(<Component onRepo={() => {}}/>)).toThrow(
+    expect(() => render(<Component onRepo={() => {}} />)).toThrow(
       /Repo was not found on RepoContext/
     )
     spy.mockRestore()

package/tsconfig.json

@@ -12,7 +12,5 @@
     "strict": true,
     "skipLibCheck": true
   },
-  "include": [
-    "src/**/*.ts"
-  ]
-}
+  "include": ["src/**/*.ts"]
+}

package/vite.config.ts

@@ -18,22 +18,22 @@ export default defineConfig({
   ],
   build: {
     lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      formats: ['es'],
-      fileName: 'index',
+      entry: resolve(__dirname, "src/index.ts"),
+      formats: ["es"],
+      fileName: "index",
     },
     rollupOptions: {
-      external: ['react', 'react/jsx-runtime', 'react-dom', 'tailwindcss'],
+      external: ["react", "react/jsx-runtime", "react-dom", "tailwindcss"],
       output: {
         globals: {
-          react: 'React',
-          'react/jsx-runtime': 'react/jsx-runtime',
-          'react-dom': 'ReactDOM',
-        }
-      }
+          react: "React",
+          "react/jsx-runtime": "react/jsx-runtime",
+          "react-dom": "ReactDOM",
+        },
+      },
     },
   },
   worker: {
     plugins: [wasm(), topLevelAwait()],
-  }
+  },
 })