@automerge/automerge-repo-react-hooks - npm Package Compare versions

Comparing version 1.1.9 to 1.1.11

dist/useDocument.d.ts

@@ -12,3 +12,6 @@ import { ChangeFn, ChangeOptions, Doc } from '@automerge/automerge/next';
  * */
-export declare function useDocument<T>(id?: AnyDocumentId): readonly [Doc<T> | undefined, (changeFn: ChangeFn<T>, options?: ChangeOptions<T> | undefined) => void];
+export declare function useDocument<T>(id?: AnyDocumentId): [
+    Doc<T> | undefined,
+    (changeFn: ChangeFn<T>, options?: ChangeOptions<T> | undefined) => void
+];
 //# sourceMappingURL=useDocument.d.ts.map

package.json

 {
   "name": "@automerge/automerge-repo-react-hooks",
-  "version": "1.1.9",
+  "version": "1.1.11",
   "description": "Hooks to access an Automerge Repo from your react app.",
@@ -18,3 +18,3 @@ "repository": "https://github.com/automerge/automerge-repo/tree/master/packages/automerge-repo-react-hooks",
     "@automerge/automerge": "^2.1.13",
-    "@automerge/automerge-repo": "1.1.9",
+    "@automerge/automerge-repo": "1.1.11",
     "eventemitter3": "^5.0.1",
@@ -46,3 +46,3 @@ "react": "^18.2.0",
   },
-  "gitHead": "19fd7ffd69eae2ed8518bde3b3f9f60aa8e4fb9d"
+  "gitHead": "3144dec63b3074af22adcbaf36428c53b0081322"
 }

src/useDocument.ts

@@ -1,8 +0,4 @@
-import {
-  AnyDocumentId,
-  DocHandle,
-  DocHandleChangePayload,
-} from "@automerge/automerge-repo"
+import { AnyDocumentId, DocHandle } from "@automerge/automerge-repo"
 import { ChangeFn, ChangeOptions, Doc } from "@automerge/automerge/next"
-import { useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { useRepo } from "./useRepo.js"
@@ -18,53 +14,51 @@
  * */
-export function useDocument<T>(id?: AnyDocumentId) {
+export function useDocument<T>(
+  id?: AnyDocumentId
+): [
+  Doc<T> | undefined,
+  (changeFn: ChangeFn<T>, options?: ChangeOptions<T> | undefined) => void
+] {
   const repo = useRepo()
-
   const handle = id ? repo.find<T>(id) : null
-  const handleRef = useRef<DocHandle<T> | null>(null)
+  const handleRef = useRef<DocHandle<T> | null>(handle)
+  if (handle !== handleRef.current) {
+    handleRef.current = handle
+  }
 
-  const [doc, setDoc] = useState<Doc<T> | undefined>(() => handle?.docSync())
+  // a state value we use to trigger a re-render
+  const [, setGeneration] = useState(0)
+  const rerender = () => setGeneration(v => v + 1)
 
   useEffect(() => {
-    // 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(handle?.docSync())
+    if (!id || !handle) {
+      return
+    }
 
-    if (!handle) return
-
     handleRef.current = handle
     handle
       .doc()
-      .then(v => {
-        // Bail out on updating the doc if the handle has changed since we started loading.
-        // This avoids problem with out-of-order loads when the handle is changing faster
-        // than documents are loading.
-        if (handleRef.current !== handle) return
-        setDoc(v)
+      .then(() => {
+        rerender()
       })
       .catch(e => console.error(e))
 
-    const onChange = (h: DocHandleChangePayload<T>) => setDoc(h.doc)
-    handle.on("change", onChange)
-    const onDelete = () => setDoc(undefined)
-    handle.on("delete", onDelete)
+    handle.on("change", rerender)
+    handle.on("delete", rerender)
     const cleanup = () => {
-      handle.removeListener("change", onChange)
-      handle.removeListener("delete", onDelete)
+      handle.removeListener("change", rerender)
+      handle.removeListener("delete", rerender)
     }
 
     return cleanup
-  }, [handle])
+  }, [id, handle])
 
-  const changeDoc = (
-    changeFn: ChangeFn<T>,
-    options?: ChangeOptions<T> | undefined
-  ) => {
-    if (!handle) return
-    handle.change(changeFn, options)
-  }
+  const changeDoc = useCallback(
+    (changeFn: ChangeFn<T>, options?: ChangeOptions<T> | undefined) => {
+      if (!handle) return
+      handle.change(changeFn, options)
+    },
+    [handle]
+  )
 
-  return [doc, changeDoc] as const
+  return [handle?.docSync(), changeDoc] as const
 }

src/useHandle.ts

 import { AnyDocumentId, DocHandle } from "@automerge/automerge-repo"
-import { useEffect, useState } from "react"
 import { useRepo } from "./useRepo.js"
@@ -10,13 +9,4 @@
  */
-export function useHandle<T>(id?: AnyDocumentId) {
-  const repo = useRepo()
-  const [handle, setHandle] = useState<DocHandle<T> | undefined>(
-    id ? repo.find(id) : undefined
-  )
-
-  useEffect(() => {
-    setHandle(id ? repo.find(id) : undefined)
-  }, [id])
-
-  return handle
+export function useHandle<T>(id?: AnyDocumentId): DocHandle<T> | undefined {
+  return id ? useRepo().find(id) : undefined
 }

No alert changes

Improved metrics

Total package byte prevSize

2446000

increased by0.07%

Lines of code

15186

increased by0.27%

Dependency changes

• + Added@automerge/automerge-repo@1.1.11(transitive)

• - Removed@automerge/automerge-repo@1.1.9(transitive)

• Updated@automerge/automerge-repo@1.1.11