@automerge/automerge-repo-react-hooks 2.0.0-beta.1 → 2.0.0-beta.5

package/dist/helpers/DummyNetworkAdapter.d.ts

@@ -0,0 +1,22 @@
+import { Message, NetworkAdapter, PeerId } from '@automerge/automerge-repo/slim';
+
+export declare const pause: (t?: number) => Promise<void>;
+export declare class DummyNetworkAdapter extends NetworkAdapter {
+    #private;
+    isReady(): boolean;
+    whenReady(): Promise<void>;
+    forceReady(): void;
+    constructor(opts?: {
+        startReady: boolean;
+        sendMessage: (_message: Message) => void;
+    });
+    connect(peerId: PeerId): void;
+    disconnect(): void;
+    peerCandidate(peerId: PeerId): void;
+    send(message: Message): void;
+    receive(message: Message): void;
+    static createConnectedPair({ latency }?: {
+        latency?: number | undefined;
+    }): DummyNetworkAdapter[];
+}
+//# sourceMappingURL=DummyNetworkAdapter.d.ts.map

package/dist/helpers/DummyNetworkAdapter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DummyNetworkAdapter.d.ts","sourceRoot":"","sources":["../../src/helpers/DummyNetworkAdapter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAEhF,eAAO,MAAM,KAAK,GAAI,UAAK,kBACmC,CAAA;AAI9D,qBAAa,mBAAoB,SAAQ,cAAc;;IAOrD,OAAO;IAGP,SAAS;IAUT,UAAU;gBAIR,IAAI;;gCAA+C,OAAO;KAAS;IAQrE,OAAO,CAAC,MAAM,EAAE,MAAM;IAGtB,UAAU;IACV,aAAa,CAAC,MAAM,EAAE,MAAM;IAG5B,IAAI,CAAC,OAAO,EAAE,OAAO;IAGrB,OAAO,CAAC,OAAO,EAAE,OAAO;IAGxB,MAAM,CAAC,mBAAmB,CAAC,EAAE,OAAY,EAAE;;KAAK;CAajD"}

package/dist/index.js

@@ -1,4 +1,4 @@
-import q, { createContext as I, useContext as j, useRef as $, useState as x, useEffect as _, useCallback as P } from "react";
+import q, { createContext as I, useContext as j, useRef as $, useState as x, useEffect as _, useCallback as S } from "react";
 function O(s) {
   let l = "pending", r, f;
   const h = s.then(
@@ -32,21 +32,26 @@ function k() {
 const E = /* @__PURE__ */ new Map();
 function N(s, { suspense: l } = { suspense: !1 }) {
   const r = k(), f = $(), [h, p] = x();
-  let u = s ? E.get(s) : void 0;
-  if (!u && s) {
+  let u = h;
+  if (s && !u) {
+    const t = r.findWithProgress(s);
+    t.state === "ready" && (u = t.handle);
+  }
+  let n = s ? E.get(s) : void 0;
+  if (!n && s) {
     f.current?.abort(), f.current = new AbortController();
-    const n = r.find(s, { signal: f.current.signal });
-    u = O(n), E.set(s, u);
+    const t = r.find(s, { signal: f.current.signal });
+    n = O(t), E.set(s, n);
   }
   return _(() => {
-    l || !u || u.promise.then((n) => {
-      p(n);
+    l || !n || n.promise.then((t) => {
+      p(t);
     }).catch(() => {
       p(void 0);
     });
-  }, [l, u]), l && u ? u.read() : h;
+  }, [l, n]), u || !l || !n ? u : n.read();
 }
-function V(s, l = { suspense: !1 }) {
+function Q(s, l = { suspense: !1 }) {
   const r = N(s, l), [f, h] = x(() => r?.doc()), [p, u] = x();
   _(() => {
     h(r?.doc());
@@ -60,7 +65,7 @@ function V(s, l = { suspense: !1 }) {
       r.removeListener("change", t), r.removeListener("delete", e);
     };
   }, [r, s]);
-  const n = P(
+  const n = S(
     (t, e) => {
       r.change(t, e);
     },
@@ -104,7 +109,7 @@ function T(s, { suspense: l = !1 } = {}) {
     throw Promise.all(p.map((n) => n.promise));
   return f;
 }
-function W(s, { suspense: l = !0 } = {}) {
+function V(s, { suspense: l = !0 } = {}) {
   const r = T(s, { suspense: l }), [f, h] = x(() => /* @__PURE__ */ new Map());
   _(() => {
     const u = /* @__PURE__ */ new Map();
@@ -133,7 +138,7 @@ function W(s, { suspense: l = !0 } = {}) {
       });
     };
   }, [r]);
-  const p = P(
+  const p = S(
     (u, n, t) => {
       const e = r.get(u);
       e && e.change(n, t);
@@ -142,11 +147,11 @@ function W(s, { suspense: l = !0 } = {}) {
   );
   return [f, p];
 }
-function A(s) {
+function H(s) {
   return s && s.__esModule && Object.prototype.hasOwnProperty.call(s, "default") ? s.default : s;
 }
 var C, R;
-function z() {
+function W() {
   if (R) return C;
   R = 1;
   var s = q, l = function(f) {
@@ -159,11 +164,11 @@ function z() {
   };
   return C = r, C;
 }
-var B = z();
-const L = /* @__PURE__ */ A(B);
-var D = { exports: {} }, S;
-function G() {
-  return S || (S = 1, function(s) {
+var z = W();
+const L = /* @__PURE__ */ H(z);
+var D = { exports: {} }, P;
+function B() {
+  return P || (P = 1, function(s) {
     var l = Object.prototype.hasOwnProperty, r = "~";
     function f() {
     }
@@ -222,8 +227,8 @@ function G() {
           y[d - 1] = arguments[d];
         a.fn.apply(a.context, y);
       } else {
-        var H = a.length, b;
-        for (d = 0; d < H; d++)
+        var A = a.length, b;
+        for (d = 0; d < A; d++)
           switch (a[d].once && this.removeListener(e, a[d].fn, void 0, !0), g) {
             case 1:
               a[d].fn.call(a[d].context);
@@ -268,8 +273,8 @@ function G() {
     }, n.prototype.off = n.prototype.removeListener, n.prototype.addListener = n.prototype.on, n.prefixed = r, n.EventEmitter = n, s.exports = n;
   }(D)), D.exports;
 }
-var J = G();
-const K = /* @__PURE__ */ A(J), M = new K(), X = ({
+var G = B();
+const J = /* @__PURE__ */ H(G), M = new J(), X = ({
   handle: s,
   localUserId: l,
   offlineTimeout: r = 3e4,
@@ -336,8 +341,8 @@ export {
   F as RepoContext,
   N as useDocHandle,
   T as useDocHandles,
-  V as useDocument,
-  W as useDocuments,
+  Q as useDocument,
+  V as useDocuments,
   Y as useLocalAwareness,
   X as useRemoteAwareness,
   k as useRepo

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@automerge/automerge-repo-react-hooks",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.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,10 +15,8 @@
   },
   "dependencies": {
     "@automerge/automerge": "^2.2.8",
-    "@automerge/automerge-repo": "2.0.0-beta.1",
+    "@automerge/automerge-repo": "2.0.0-beta.5",
     "eventemitter3": "^5.0.1",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0",
     "react-usestateref": "^1.0.8"
   },
   "devDependencies": {
@@ -26,14 +24,16 @@
     "@testing-library/react": "^14.0.0",
     "eslint-plugin-react-hooks": "^5.1.0",
     "jsdom": "^22.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-error-boundary": "^5.0.0",
     "rollup-plugin-visualizer": "^5.9.3",
     "vite": "^6.0.7",
     "vite-plugin-dts": "^3.9.1"
   },
   "peerDependencies": {
-    "react": ">18.3.0",
-    "react-dom": ">18.3.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "watch": {
     "build": {
@@ -46,5 +46,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "561e9142496d89cf34ad78cb72b27329990cae07"
+  "gitHead": "0a1f8195dbe0a84c21611c5f58003b68f35b9dc1"
 }

package/src/helpers/DummyNetworkAdapter.ts

@@ -0,0 +1,66 @@
+import { Message, NetworkAdapter, PeerId } from "@automerge/automerge-repo/slim"
+
+export const pause = (t = 0) =>
+  new Promise<void>(resolve => setTimeout(() => resolve(), t))
+
+type SendMessageFn = (message: Message) => void
+
+export class DummyNetworkAdapter extends NetworkAdapter {
+  #sendMessage: SendMessageFn
+  #ready = false
+  #readyResolver: ((value: void) => void) | undefined
+  #readyPromise = new Promise<void>(resolve => {
+    this.#readyResolver = resolve
+  })
+  isReady() {
+    return this.#ready
+  }
+  whenReady() {
+    return this.#readyPromise
+  }
+  #forceReady() {
+    if (!this.#ready) {
+      this.#ready = true
+      this.#readyResolver?.()
+    }
+  }
+  // A public wrapper for use in tests!
+  forceReady() {
+    this.#forceReady()
+  }
+  constructor(
+    opts = { startReady: true, sendMessage: (_message: Message) => {} }
+  ) {
+    super()
+    if (opts.startReady) {
+      this.#forceReady()
+    }
+    this.#sendMessage = opts.sendMessage
+  }
+  connect(peerId: PeerId) {
+    this.peerId = peerId
+  }
+  disconnect() {}
+  peerCandidate(peerId: PeerId) {
+    this.emit("peer-candidate", { peerId, peerMetadata: {} })
+  }
+  send(message: Message) {
+    this.#sendMessage?.(message)
+  }
+  receive(message: Message) {
+    this.emit("message", message)
+  }
+  static createConnectedPair({ latency = 10 } = {}) {
+    const adapter1 = new DummyNetworkAdapter({
+      startReady: true,
+      sendMessage: (message: Message) =>
+        pause(latency).then(() => adapter2.receive(message)),
+    })
+    const adapter2 = new DummyNetworkAdapter({
+      startReady: true,
+      sendMessage: message =>
+        pause(latency).then(() => adapter1.receive(message)),
+    })
+    return [adapter1, adapter2]
+  }
+}

package/src/useDocHandle.ts

@@ -39,6 +39,15 @@ export function useDocHandle<T>(
   const controllerRef = useRef<AbortController>()
   const [handle, setHandle] = useState<DocHandle<T> | undefined>()
 
+  let currentHandle: DocHandle<T> | undefined = handle
+  if (id && !currentHandle) {
+    // if we haven't saved a handle yet, check if one is immediately available
+    const progress = repo.findWithProgress<T>(id)
+    if (progress.state === "ready") {
+      currentHandle = progress.handle
+    }
+  }
+
   let wrapper = id ? wrapperCache.get(id) : undefined
   if (!wrapper && id) {
     controllerRef.current?.abort()
@@ -68,9 +77,9 @@ export function useDocHandle<T>(
       })
   }, [suspense, wrapper])
 
-  if (suspense && wrapper) {
-    return wrapper.read() as DocHandle<T>
-  } else {
-    return handle
+  if (currentHandle || !suspense || !wrapper) {
+    return currentHandle
   }
+
+  return wrapper.read() as DocHandle<T>
 }

package/test/useDocHandle.test.tsx

@@ -13,6 +13,7 @@ import { describe, expect, it, vi } from "vitest"
 import { useDocHandle } from "../src/useDocHandle"
 import { RepoContext } from "../src/useRepo"
 import { ErrorBoundary } from "react-error-boundary"
+import { DummyNetworkAdapter } from "../src/helpers/DummyNetworkAdapter"
 
 interface ExampleDoc {
   foo: string
@@ -44,6 +45,39 @@ describe("useDocHandle", () => {
     }
   }
 
+  function setupPairedRepos(latency = 10) {
+    // Create two connected repos with network delay
+    const [adapterCreator, adapterFinder] =
+      DummyNetworkAdapter.createConnectedPair({
+        latency,
+      })
+
+    // TODO: fix types here
+    const repoCreator = new Repo({
+      peerId: "peer-creator" as PeerId,
+      network: [adapterCreator],
+    })
+    const repoFinder = new Repo({
+      peerId: "peer-finder" as PeerId,
+      network: [adapterFinder],
+    })
+
+    // TODO: dummynetwork adapter should probably take care of this
+    // Initialize the network.
+    adapterCreator.peerCandidate(`peer-finder` as PeerId)
+    adapterFinder.peerCandidate(`peer-creator` as PeerId)
+
+    const wrapper = ({ children }) => {
+      return (
+        <RepoContext.Provider value={repoFinder}>
+          {children}
+        </RepoContext.Provider>
+      )
+    }
+
+    return { repoCreator, repoFinder, wrapper }
+  }
+
   const Component = ({
     url,
     onHandle,
@@ -133,16 +167,10 @@ describe("useDocHandle", () => {
   })
 
   it("handles slow network correctly", async () => {
-    const { handleA, repo, wrapper } = await setup()
+    const { repoCreator, wrapper } = await setupPairedRepos()
+    const handleA = repoCreator.create({ foo: "A" })
     const onHandle = vi.fn()
 
-    // Mock find to simulate slow network
-    const originalFind = repo.find.bind(repo)
-    repo.find = vi.fn().mockImplementation(async (...args) => {
-      await new Promise(resolve => setTimeout(resolve, 100))
-      return originalFind(...args)
-    })
-
     render(
       <ErrorBoundary fallback={<div data-testid="error">Error</div>}>
         <Suspense fallback={<div data-testid="loading">Loading...</div>}>
@@ -163,25 +191,18 @@ describe("useDocHandle", () => {
     })
 
     // Verify callback was called with correct handle
-    expect(onHandle).toHaveBeenCalledWith(handleA)
+    expect(onHandle).toHaveBeenCalledWith(
+      expect.objectContaining({ url: handleA.url })
+    )
 
     // Verify error boundary never rendered
     expect(screen.queryByTestId("error")).not.toBeInTheDocument()
   })
 
   it("suspends while loading a handle", async () => {
-    const { handleA, wrapper } = await setup()
+    const { repoCreator, wrapper } = await setupPairedRepos()
+    const handleA = repoCreator.create({ foo: "A" })
     const onHandle = vi.fn()
-    let promiseResolve: (value: DocHandle<ExampleDoc>) => void
-
-    // Mock find to return a delayed promise
-    const originalFind = repo.find.bind(repo)
-    repo.find = vi.fn().mockImplementation(
-      () =>
-        new Promise(resolve => {
-          promiseResolve = resolve
-        })
-    )
 
     render(
       <Suspense fallback={<div data-testid="loading">Loading...</div>}>
@@ -194,31 +215,19 @@ describe("useDocHandle", () => {
     expect(screen.getByTestId("loading")).toBeInTheDocument()
     expect(onHandle).not.toHaveBeenCalled()
 
-    // Resolve the find
-    promiseResolve!(await originalFind(handleA.url))
-
     // Should show content
     await waitFor(() => {
-      expect(onHandle).toHaveBeenCalledWith(handleA)
-      // return repo.find to its natural state
-      repo.find = originalFind
+      expect(onHandle).toHaveBeenCalledWith(
+        expect.objectContaining({ url: handleA.url })
+      )
     })
   })
 
   it("handles rapid url changes during loading", async () => {
-    const { handleA, handleB, wrapper } = await setup()
+    const { repoCreator, repoFinder, wrapper } = await setupPairedRepos()
+    const handleA = repoCreator.create({ foo: "A" })
+    const handleB = repoFinder.create({ foo: "B" })
     const onHandle = vi.fn()
-    const delays: Record<string, number> = {
-      [handleA.url]: 100,
-      [handleB.url]: 50,
-    }
-
-    // Mock find to simulate different network delays
-    const originalFind = repo.find.bind(repo)
-    repo.find = vi.fn().mockImplementation(async (url: string) => {
-      await new Promise(resolve => setTimeout(resolve, delays[url]))
-      return originalFind(url)
-    })
 
     const { rerender } = render(
       <Suspense fallback={<div data-testid="loading">Loading...</div>}>
@@ -237,21 +246,18 @@ describe("useDocHandle", () => {
     // Should eventually resolve with B, not A
     await waitFor(() => {
       expect(onHandle).toHaveBeenLastCalledWith(handleB)
-      expect(onHandle).not.toHaveBeenCalledWith(handleA)
+      expect(onHandle).not.toHaveBeenCalledWith(
+        expect.objectContaining({ url: handleA.url })
+      )
     })
   })
 
   describe("useDocHandle with suspense: false", () => {
     it("returns undefined while loading then resolves to handle", async () => {
-      const { handleA, repo, wrapper } = await setup()
-      const onHandle = vi.fn()
+      const { repoCreator, wrapper } = await setupPairedRepos()
+      const handleA = repoCreator.create({ foo: "A" })
 
-      // Mock find to simulate network delay
-      const originalFind = repo.find.bind(repo)
-      repo.find = vi.fn().mockImplementation(async (...args) => {
-        await new Promise(resolve => setTimeout(resolve, 100))
-        return originalFind(...args)
-      })
+      const onHandle = vi.fn()
 
       const NonSuspenseComponent = ({
         url,
@@ -274,11 +280,10 @@ describe("useDocHandle", () => {
 
       // Wait for handle to load
       await waitFor(() => {
-        expect(onHandle).toHaveBeenLastCalledWith(handleA)
+        expect(onHandle).toHaveBeenCalledWith(
+          expect.objectContaining({ url: handleA.url })
+        )
       })
-
-      // Restore original find implementation
-      repo.find = originalFind
     })
 
     it("handles unavailable documents by returning undefined", async () => {
@@ -338,9 +343,6 @@ describe("useDocHandle", () => {
       // Change URL
       rerender(<NonSuspenseComponent url={handleB.url} onHandle={onHandle} />)
 
-      // Should temporarily return to undefined
-      expect(onHandle).toHaveBeenCalledWith(undefined)
-
       // Then resolve to new handle
       await waitFor(() => expect(onHandle).toHaveBeenLastCalledWith(handleB))
     })

package/test/useDocument.test.tsx

@@ -4,6 +4,8 @@ import {
   generateAutomergeUrl,
   PeerId,
   Repo,
+  NetworkAdapter,
+  Message,
 } from "@automerge/automerge-repo"
 import { render, screen, waitFor } from "@testing-library/react"
 import React, { Suspense } from "react"
@@ -13,7 +15,7 @@ import "@testing-library/jest-dom"
 import { useDocument } from "../src/useDocument"
 import { RepoContext } from "../src/useRepo"
 import { ErrorBoundary } from "react-error-boundary"
-
+import { DummyNetworkAdapter, pause } from "../src/helpers/DummyNetworkAdapter"
 interface ExampleDoc {
   foo: string
 }
@@ -48,6 +50,37 @@ describe("useDocument", () => {
     }
   }
 
+  function setupPairedRepos(latency = 10) {
+    // Create two connected repos with network delay
+    const [adapterCreator, adapterFinder] =
+      DummyNetworkAdapter.createConnectedPair({
+        latency,
+      })
+
+    const repoCreator = new Repo({
+      peerId: "peer-creator" as PeerId,
+      network: [adapterCreator],
+    })
+    const repoFinder = new Repo({
+      peerId: "peer-finder" as PeerId,
+      network: [adapterFinder],
+    })
+
+    // TODO: dummynetwork adapter should probably take care of this
+    // Initialize the network.
+    adapterCreator.peerCandidate(`peer-finder` as PeerId)
+    adapterFinder.peerCandidate(`peer-creator` as PeerId)
+
+    const wrapper = ({ children }) => {
+      return (
+        <RepoContext.Provider value={repoFinder}>
+          {children}
+        </RepoContext.Provider>
+      )
+    }
+
+    return { repoCreator, repoFinder, wrapper }
+  }
   const Component = ({
     url,
     onDoc,
@@ -71,13 +104,9 @@ describe("useDocument", () => {
       { wrapper }
     )
 
-    // First we should see the loading state
-    expect(screen.getByTestId("loading")).toBeInTheDocument()
-
-    // Wait for content to appear and check it's correct
-    await waitFor(() => {
-      expect(screen.getByTestId("content")).toHaveTextContent("A")
-    })
+    // Because this document is already loaded locally (we made it)
+    // we should see results immediately.
+    expect(screen.getByTestId("content")).toHaveTextContent("A")
 
     // Now check our spy got called with the document
     expect(onDoc).toHaveBeenCalledWith({ foo: "A" })
@@ -95,9 +124,7 @@ describe("useDocument", () => {
     )
 
     // Wait for initial render
-    await waitFor(() => {
-      expect(screen.getByTestId("content")).toHaveTextContent("A")
-    })
+    expect(screen.getByTestId("content")).toHaveTextContent("A")
     expect(onDoc).toHaveBeenCalledWith({ foo: "A" })
 
     // Change the document
@@ -156,9 +183,7 @@ describe("useDocument", () => {
     )
 
     // Wait for first document
-    await waitFor(() => {
-      expect(screen.getByTestId("content")).toHaveTextContent("A")
-    })
+    expect(screen.getByTestId("content")).toHaveTextContent("A")
     expect(onDoc).toHaveBeenCalledWith({ foo: "A" })
 
     // Switch to second document
@@ -169,9 +194,7 @@ describe("useDocument", () => {
     )
 
     // Should show loading then new content
-    await waitFor(() => {
-      expect(screen.getByTestId("content")).toHaveTextContent("B")
-    })
+    expect(screen.getByTestId("content")).toHaveTextContent("B")
     expect(onDoc).toHaveBeenCalledWith({ foo: "B" })
   })
 
@@ -202,28 +225,23 @@ describe("useDocument", () => {
 
   // Test slow-loading document
   it("should handle slow-loading documents", async () => {
-    const { wrapper, repo } = setup()
-    const onDoc = vi.fn()
+    const { repoCreator, wrapper } = setupPairedRepos()
 
-    // Create handle but delay its availability
-    const slowHandle = repo.create({ foo: "slow" })
-    const originalFind = repo.find.bind(repo)
-    repo.find = vi.fn().mockImplementation(async (...args) => {
-      await new Promise(resolve => setTimeout(resolve, 100))
-      return originalFind(...args)
-    })
+    // Create document in first repo
+    const handle = repoCreator.create({ foo: "slow" })
+    const onDoc = vi.fn()
 
     render(
       <Suspense fallback={<div data-testid="loading">Loading...</div>}>
-        <Component url={slowHandle.url} onDoc={onDoc} />
+        <Component url={handle.url} onDoc={onDoc} />
       </Suspense>,
       { wrapper }
     )
 
-    // Should show loading state
+    // Should show loading state initially
     expect(screen.getByTestId("loading")).toBeInTheDocument()
 
-    // Eventually shows content
+    // Eventually shows content after network delay
     await waitFor(() => {
       expect(screen.getByTestId("content")).toHaveTextContent("slow")
     })
@@ -263,17 +281,10 @@ describe("useDocument", () => {
 
   // Test document changes during loading
   it("should handle document changes while loading", async () => {
-    const { wrapper, repo } = setup()
+    const { wrapper, repoCreator } = setupPairedRepos()
     const onDoc = vi.fn()
 
-    const handle = repo.create({ foo: "initial" })
-    let resolveFind: (value: any) => void
-    const originalFind = repo.find.bind(repo)
-    repo.find = vi.fn().mockImplementation(async (...args) => {
-      return new Promise(resolve => {
-        resolveFind = resolve
-      })
-    })
+    const handle = repoCreator.create({ foo: "initial" })
 
     render(
       <Suspense fallback={<div data-testid="loading">Loading...</div>}>
@@ -285,9 +296,6 @@ describe("useDocument", () => {
     // Modify document while it's still loading
     handle.change(doc => (doc.foo = "changed"))
 
-    // Resolve the find
-    resolveFind!(await originalFind(handle.url))
-
     // Should show final state
     await waitFor(() => {
       expect(screen.getByTestId("content")).toHaveTextContent("changed")