@automerge/automerge-repo-react-hooks 0.0.1

package/README.md

@@ -0,0 +1,80 @@
+# React Hooks for Automerge Repo
+
+## Example usage
+
+### App Setup
+
+```ts
+import React, { StrictMode } from "react"
+import ReactDOM from "react-dom/client"
+import localforage from "localforage"
+
+import { Repo, DocCollection } from "@automerge/automerge-repo"
+
+import { BroadcastChannelNetworkAdapter } from "@automerge/automerge-repo-network-broadcastchannel"
+import { LocalFirstRelayNetworkAdapter } from "@automerge/automerge-repo-network-localfirstrelay"
+
+import App, { RootDocument } from "./App.js"
+import { RepoContext } from "@automerge/automerge-repo-react-hooks"
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const sharedWorker = new SharedWorker(
+  new URL("./shared-worker.js", import.meta.url),
+  { type: "module", name: "@automerge/automerge-repo-shared-worker" }
+)
+
+async function getRepo(url: string): Promise<DocCollection> {
+  return await Repo({
+    network: [
+      new BroadcastChannelNetworkAdapter(),
+      new LocalFirstRelayNetworkAdapter("wss://local-first-relay.glitch.me/"),
+    ],
+    sharePolicy: peerId => peerId.includes("shared-worker"),
+  })
+}
+
+async function getRootDocument(repo: DocCollection, initFunction: any) {
+  let docId: string | null = window.location.hash.replace(/^#/, "")
+  if (!docId) {
+    docId = await localforage.getItem("root")
+  }
+  let rootHandle
+
+  if (!docId) {
+    rootHandle = repo.create()
+    rootHandle.change(initFunction)
+    await localforage.setItem("root", rootHandle.documentId)
+  } else {
+    rootHandle = await repo.find(docId)
+    window.location.hash = docId
+  }
+  return rootHandle
+}
+
+const initFunction = (d: RootDocument) => {
+  d.items = []
+}
+
+const queryString = window.location.search // Returns:'?q=123'
+
+// Further parsing:
+const params = new URLSearchParams(queryString)
+const hostname = params.get("host") || "automerge-storage-demo.glitch.me"
+
+getRepo(`wss://${hostname}`).then(repo => {
+  getRootDocument(repo, initFunction).then(rootDoc => {
+    const rootElem = document.getElementById("root")
+    if (!rootElem) {
+      throw new Error("The 'root' element wasn't found in the host HTML doc.")
+    }
+    const root = ReactDOM.createRoot(rootElem)
+    root.render(
+      <StrictMode>
+        <RepoContext.Provider value={repo}>
+          <App rootDocumentId={rootDoc.documentId} />
+        </RepoContext.Provider>
+      </StrictMode>
+    )
+  })
+})
+```

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { useDocument } from "./useDocument.js";
+export { useHandle } from "./useHandle.js";
+export { RepoContext, useRepo } from "./useRepo.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA"}

package/dist/index.js

@@ -0,0 +1,3 @@
+export { useDocument } from "./useDocument.js";
+export { useHandle } from "./useHandle.js";
+export { RepoContext, useRepo } from "./useRepo.js";

package/dist/useDocument.d.ts

@@ -0,0 +1,4 @@
+import { Doc, ChangeFn } from "@automerge/automerge";
+import { DocumentId } from "@automerge/automerge-repo";
+export declare function useDocument<T>(documentId?: DocumentId): [Doc<T>, (changeFn: ChangeFn<T>) => void];
+//# sourceMappingURL=useDocument.d.ts.map

package/dist/useDocument.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDocument.d.ts","sourceRoot":"","sources":["../src/useDocument.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAE,UAAU,EAAyB,MAAM,2BAA2B,CAAA;AAI7E,wBAAgB,WAAW,CAAC,CAAC,EAAE,UAAU,CAAC,EAAE,UAAU,uBAyBL,SAAS,CAAC,CAAC,KAAK,IAAI,EACpE"}

package/dist/useDocument.js

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { useRepo } from "./useRepo";
+export function useDocument(documentId) {
+    const [doc, setDoc] = useState();
+    const repo = useRepo();
+    const handle = documentId ? repo.find(documentId) : null;
+    useEffect(() => {
+        if (!handle)
+            return;
+        handle.value().then(v => setDoc(v));
+        const onPatch = (h) => setDoc(h.after);
+        handle.on("patch", onPatch);
+        const cleanup = () => {
+            handle.removeListener("patch", onPatch);
+        };
+        return cleanup;
+    }, [handle]);
+    const changeDoc = (changeFn) => {
+        if (!handle)
+            return;
+        handle.change(changeFn);
+    };
+    return [doc, changeDoc];
+}

package/dist/useHandle.d.ts

@@ -0,0 +1,3 @@
+import { DocHandle, DocumentId } from "@automerge/automerge-repo";
+export declare function useHandle<T>(documentId: DocumentId): DocHandle<T>;
+//# sourceMappingURL=useHandle.d.ts.map

package/dist/useHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHandle.d.ts","sourceRoot":"","sources":["../src/useHandle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AAIjE,wBAAgB,SAAS,CAAC,CAAC,EAAE,UAAU,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC,CAAC,CAIjE"}

package/dist/useHandle.js

@@ -0,0 +1,7 @@
+import { useState } from "react";
+import { useRepo } from "./useRepo.js";
+export function useHandle(documentId) {
+    const repo = useRepo();
+    const [handle] = useState(repo.find(documentId));
+    return handle;
+}

package/dist/useRepo.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Repo } from "@automerge/automerge-repo";
+export declare const RepoContext: import("react").Context<Repo>;
+export declare function useRepo(): Repo;
+//# sourceMappingURL=useRepo.d.ts.map

package/dist/useRepo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRepo.d.ts","sourceRoot":"","sources":["../src/useRepo.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAA;AAGhD,eAAO,MAAM,WAAW,+BAAmC,CAAA;AAE3D,wBAAgB,OAAO,IAAI,IAAI,CAI9B"}

package/dist/useRepo.js

@@ -0,0 +1,8 @@
+import { createContext, useContext } from "react";
+export const RepoContext = createContext(null);
+export function useRepo() {
+    const repo = useContext(RepoContext);
+    if (!repo)
+        throw new Error("Repo was not found on RepoContext.");
+    return repo;
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@automerge/automerge-repo-react-hooks",
+  "version": "0.0.1",
+  "description": "Hooks to access an Automerge Repo from your react app.",
+  "repository": "https://github.com/pvh/automerge-repo",
+  "author": "Peter van Hardenberg <pvh@pvh.ca>",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc",
+    "watch": "npm-watch"
+  },
+  "dependencies": {
+    "@automerge/automerge-repo": "^0.0.1"
+  },
+  "watch": {
+    "build": {
+      "patterns": "./src/**/*",
+      "extensions": [
+        ".ts"
+      ]
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "e572f26ae416140b025c3ba557d9f781abbdada1"
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export { useDocument } from "./useDocument.js"
+export { useHandle } from "./useHandle.js"
+export { RepoContext, useRepo } from "./useRepo.js"

package/src/useDocument.ts

@@ -0,0 +1,32 @@
+import { Doc, ChangeFn } from "@automerge/automerge"
+import { DocumentId, DocHandlePatchPayload } from "@automerge/automerge-repo"
+import { useEffect, useState } from "react"
+import { useRepo } from "./useRepo"
+
+export function useDocument<T>(documentId?: DocumentId) {
+  const [doc, setDoc] = useState<Doc<T>>()
+  const repo = useRepo()
+
+  const handle = documentId ? repo.find<T>(documentId) : null
+
+  useEffect(() => {
+    if (!handle) return
+
+    handle.value().then(v => setDoc(v))
+
+    const onPatch = (h: DocHandlePatchPayload<T>) => setDoc(h.after)
+    handle.on("patch", onPatch)
+    const cleanup = () => {
+      handle.removeListener("patch", onPatch)
+    }
+
+    return cleanup
+  }, [handle])
+
+  const changeDoc = (changeFn: ChangeFn<T>) => {
+    if (!handle) return
+    handle.change(changeFn)
+  }
+
+  return [doc, changeDoc] as [Doc<T>, (changeFn: ChangeFn<T>) => void]
+}

package/src/useHandle.ts

@@ -0,0 +1,9 @@
+import { DocHandle, DocumentId } from "@automerge/automerge-repo"
+import { useState } from "react"
+import { useRepo } from "./useRepo.js"
+
+export function useHandle<T>(documentId: DocumentId): DocHandle<T> {
+  const repo = useRepo()
+  const [handle] = useState<DocHandle<T>>(repo.find(documentId))
+  return handle
+}

package/src/useRepo.ts

@@ -0,0 +1,10 @@
+import { Repo } from "@automerge/automerge-repo"
+import { createContext, useContext } from "react"
+
+export const RepoContext = createContext<Repo | null>(null)
+
+export function useRepo(): Repo {
+  const repo = useContext(RepoContext)
+  if (!repo) throw new Error("Repo was not found on RepoContext.")
+  return repo
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "react",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": false,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts"]
+}