Merge pull request #68 from geobrowser/automerge-documents

integrate automerge document per space

Author: nikgraf

apps/events/src/routes/playground.tsx

@@ -45,20 +45,11 @@ const App = ({
   encryptionPrivateKey: string;
   encryptionPublicKey: string;
 }) => {
-  const storeState = useSelector(store, (state) => state.context);
-  const spaces = storeState.spaces;
-  const updatesInFlight = storeState.updatesInFlight;
-  const {
-    createSpace,
-    listSpaces,
-    listInvitations,
-    invitations,
-    acceptInvitation,
-    subscribeToSpace,
-    inviteToSpace,
-    repo,
-    automergeHandle,
-  } = useGraphFramework();
+  const repo = useSelector(store, (state) => state.context.repo);
+  const spaces = useSelector(store, (state) => state.context.spaces);
+  const updatesInFlight = useSelector(store, (state) => state.context.updatesInFlight);
+  const { createSpace, listSpaces, listInvitations, invitations, acceptInvitation, subscribeToSpace, inviteToSpace } =
+    useGraphFramework();
 
   return (
     <>
@@ -131,7 +122,7 @@ const App = ({
               })}
               <h3>Updates</h3>
               <RepoContext.Provider value={repo}>
-                <AutomergeApp url={automergeHandle.url} />
+                {space.automergeDocHandle && <AutomergeApp url={space.automergeDocHandle.url} />}
               </RepoContext.Provider>
               <h3>Last update clock: {space.lastUpdateClock}</h3>
               <h3>Updates in flight</h3>

packages/graph-framework-utils/package.json

@@ -28,10 +28,14 @@
     "check:fix": "pnpm biome check --write src/*"
   },
   "devDependencies": {
+    "@automerge/automerge-repo": "^1.2.1",
     "@types/uuid": "^10.0.0",
     "uuid": "^11.0.3"
   },
   "peerDependencies": {
     "uuid": "^11"
+  },
+  "dependencies": {
+    "bs58check": "^4.0.0"
   }
 }

packages/graph-framework-utils/src/automergeId.ts

@@ -0,0 +1,19 @@
+import bs58check from 'bs58check';
+
+import { decodeBase58, encodeBase58 } from './internal/base58Utils.js';
+
+/**
+ * Converts a raw Base58-encoded UUID into Base58Check
+ */
+export function idToAutomergeId(rawBase58Uuid: string, _versionByte = 0x00) {
+  const payload = decodeBase58(rawBase58Uuid);
+  return bs58check.encode(payload);
+}
+
+/**
+ * Converts a Base58Check-encoded UUID back to raw Base58
+ */
+export function automergeIdToId(base58CheckUuid: string) {
+  const versionedPayload = bs58check.decode(base58CheckUuid);
+  return encodeBase58(versionedPayload);
+}

packages/graph-framework-utils/src/base58.ts

@@ -1,4 +1,4 @@
-const BASE58_ALLOWED_CHARS = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz';
+import { BASE58_ALLOWED_CHARS } from './internal/base58Utils.js';
 
 export type Base58 = string;
 

packages/graph-framework-utils/src/index.ts

@@ -1,3 +1,4 @@
+export * from './automergeId.js';
 export * from './base58.js';
 export * from './generateId.js';
 export * from './jsc.js';

packages/graph-framework-utils/src/internal/base58Utils.ts

@@ -0,0 +1,47 @@
+export const BASE58_ALLOWED_CHARS = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz';
+
+export function decodeBase58(str: string) {
+  let x = BigInt(0);
+  for (let i = 0; i < str.length; i++) {
+    const charIndex = BASE58_ALLOWED_CHARS.indexOf(str[i]);
+    if (charIndex < 0) {
+      throw new Error('Invalid Base58 character');
+    }
+    x = x * 58n + BigInt(charIndex);
+  }
+
+  const bytes: number[] = [];
+  while (x > 0) {
+    bytes.push(Number(x % 256n));
+    x = x >> 8n;
+  }
+
+  bytes.reverse();
+  // Pad to 16 bytes for a UUID
+  while (bytes.length < 16) {
+    bytes.unshift(0);
+  }
+
+  return new Uint8Array(bytes);
+}
+
+export function encodeBase58(data: Uint8Array) {
+  let x = BigInt(0);
+  for (const byte of data) {
+    x = (x << 8n) + BigInt(byte);
+  }
+
+  let encoded = '';
+  while (x > 0) {
+    const remainder = x % 58n;
+    x = x / 58n;
+    encoded = BASE58_ALLOWED_CHARS[Number(remainder)] + encoded;
+  }
+
+  // deal with leading zeros (0x00 bytes)
+  for (let i = 0; i < data.length && data[i] === 0; i++) {
+    encoded = `1${encoded}`;
+  }
+
+  return encoded;
+}

packages/graph-framework-utils/test/automergeId.test.ts

@@ -0,0 +1,23 @@
+import { isValidDocumentId } from '@automerge/automerge-repo';
+import { describe, expect, it } from 'vitest';
+
+import { automergeIdToId, idToAutomergeId } from '../src/automergeId';
+import { generateId } from '../src/generateId';
+
+describe('id <> automergeId conversion', () => {
+  it('converts an id to an automergeId and back', () => {
+    const id = generateId();
+    const automergeId = idToAutomergeId(id);
+    const id2 = automergeIdToId(automergeId);
+    expect(id).toBe(id2);
+    expect(isValidDocumentId(automergeId)).toBe(true);
+  });
+
+  it('throws an error for invalid Base58 characters', () => {
+    expect(() => idToAutomergeId('!@#$%^&*()')).toThrowError();
+  });
+
+  it('throws an error for invalid Base58Check strings', () => {
+    expect(() => automergeIdToId('11111111111111111111111111111111')).toThrowError();
+  });
+});

packages/graph-framework/src/core.tsx

@@ -1,6 +1,5 @@
 import * as automerge from '@automerge/automerge';
 import { uuid } from '@automerge/automerge';
-import { type AutomergeUrl, type DocHandle, Repo } from '@automerge/automerge-repo';
 import { bytesToHex, hexToBytes } from '@noble/hashes/utils';
 import { useSelector as useSelectorStore } from '@xstate/store/react';
 import { Effect, Exit } from 'effect';
@@ -28,8 +27,6 @@ import { assertExhaustive } from './assertExhaustive.js';
 import type { SpaceStorageEntry } from './store.js';
 import { store } from './store.js';
 
-const hardcodedUrl = 'automerge:2JWupfYZBBm7s2NCy1VnvQa4Vdvf' as AutomergeUrl;
-
 const decodeResponseMessage = Schema.decodeUnknownEither(ResponseMessage);
 
 type Props = {
@@ -63,8 +60,6 @@ const GraphFrameworkContext = createContext<{
       encryptionPublicKey: string;
     };
   }) => Promise<unknown>;
-  repo: Repo;
-  automergeHandle: DocHandle<unknown>;
 }>({
   invitations: [],
   createSpace: async () => {},
@@ -73,59 +68,16 @@ const GraphFrameworkContext = createContext<{
   acceptInvitation: async () => {},
   subscribeToSpace: () => {},
   inviteToSpace: async () => {},
-  // @ts-expect-error repo is always set
-  repo: undefined,
-  // @ts-expect-error automergeHandle is always set
-  automergeHandle: undefined,
 });
 
 export function GraphFramework({ children, accountId }: Props) {
   const [websocketConnection, setWebsocketConnection] = useState<WebSocket>();
-  const [repo] = useState<Repo>(() => new Repo({}));
-  const [automergeHandle] = useState<DocHandle<unknown>>(() => repo.find(hardcodedUrl));
   const spaces = useSelectorStore(store, (state) => state.context.spaces);
   const invitations = useSelectorStore(store, (state) => state.context.invitations);
   // Create a stable WebSocket connection that only depends on accountId
   useEffect(() => {
     const websocketConnection = new WebSocket(`ws://localhost:3030/?accountId=${accountId}`);
 
-    const docHandle = automergeHandle;
-    // set it to ready to interact with the document
-    docHandle.doneLoading();
-
-    docHandle.on('change', (result) => {
-      const lastLocalChange = automerge.getLastLocalChange(result.doc);
-      if (!lastLocalChange) {
-        return;
-      }
-
-      try {
-        const storeState = store.getSnapshot();
-        const space = storeState.context.spaces[0];
-
-        const ephemeralId = uuid();
-
-        const nonceAndCiphertext = encryptMessage({
-          message: lastLocalChange,
-          secretKey: hexToBytes(space.keys[0].key),
-        });
-
-        const messageToSend: RequestCreateUpdate = {
-          type: 'create-update',
-          ephemeralId,
-          update: nonceAndCiphertext,
-          spaceId: space.id,
-        };
-        websocketConnection.send(serialize(messageToSend));
-      } catch (error) {
-        console.error('Error sending message', error);
-      }
-    });
-
-    store.send({
-      type: 'setAutomergeDocumentId',
-      automergeDocumentId: docHandle.url.slice(10),
-    });
     setWebsocketConnection(websocketConnection);
 
     const onOpen = () => {
@@ -150,10 +102,9 @@ export function GraphFramework({ children, accountId }: Props) {
       websocketConnection.removeEventListener('close', onClose);
       websocketConnection.close();
     };
-  }, [accountId, automergeHandle]); // Only recreate when accountId changes
+  }, [accountId]); // Only recreate when accountId changes
 
   // Handle WebSocket messages in a separate effect
-  // biome-ignore lint/correctness/useExhaustiveDependencies: automergeHandle is a mutable object
   useEffect(() => {
     if (!websocketConnection) return;
 
@@ -189,7 +140,7 @@ export function GraphFramework({ children, accountId }: Props) {
 
             const newState = state as SpaceState;
 
-            const storeState = store.getSnapshot();
+            let storeState = store.getSnapshot();
 
             const keys = response.keyBoxes.map((keyBox) => {
               const key = decryptKey({
@@ -210,6 +161,13 @@ export function GraphFramework({ children, accountId }: Props) {
               keys,
             });
 
+            storeState = store.getSnapshot();
+            const automergeDocHandle = storeState.context.spaces.find((s) => s.id === response.id)?.automergeDocHandle;
+            if (!automergeDocHandle) {
+              console.error('No automergeDocHandle found', response.id);
+              return;
+            }
+
             if (response.updates) {
               const updates = response.updates?.updates.map((update) => {
                 return decryptMessage({
@@ -219,11 +177,7 @@ export function GraphFramework({ children, accountId }: Props) {
               });
 
               for (const update of updates) {
-                if (!automergeHandle) {
-                  return;
-                }
-
-                automergeHandle.update((existingDoc) => {
+                automergeDocHandle.update((existingDoc) => {
                   const [newDoc] = automerge.applyChanges(existingDoc, [update]);
                   return newDoc;
                 });
@@ -236,6 +190,36 @@ export function GraphFramework({ children, accountId }: Props) {
                 lastUpdateClock: response.updates?.lastUpdateClock,
               });
             }
+
+            automergeDocHandle.on('change', (result) => {
+              const lastLocalChange = automerge.getLastLocalChange(result.doc);
+              if (!lastLocalChange) {
+                return;
+              }
+
+              try {
+                const storeState = store.getSnapshot();
+                const space = storeState.context.spaces[0];
+
+                const ephemeralId = uuid();
+
+                const nonceAndCiphertext = encryptMessage({
+                  message: lastLocalChange,
+                  secretKey: hexToBytes(space.keys[0].key),
+                });
+
+                const messageToSend: RequestCreateUpdate = {
+                  type: 'create-update',
+                  ephemeralId,
+                  update: nonceAndCiphertext,
+                  spaceId: space.id,
+                };
+                websocketConnection.send(serialize(messageToSend));
+              } catch (error) {
+                console.error('Error sending message', error);
+              }
+            });
+
             break;
           }
           case 'space-event': {
@@ -298,7 +282,7 @@ export function GraphFramework({ children, accountId }: Props) {
               });
             });
 
-            automergeHandle?.update((existingDoc) => {
+            space?.automergeDocHandle?.update((existingDoc) => {
               const [newDoc] = automerge.applyChanges(existingDoc, automergeUpdates);
               return newDoc;
             });
@@ -488,8 +472,6 @@ export function GraphFramework({ children, accountId }: Props) {
         acceptInvitation: acceptInvitationForContext,
         subscribeToSpace,
         inviteToSpace,
-        repo,
-        automergeHandle,
       }}
     >
       {children}