feat: cleaner error handling and basic client tests

README.md

@@ -48,9 +48,9 @@ const decorator = useCursor(editor)
 ## Backend
 
 ```ts
-const { SocketIOConnection } = require('@hiveteams/collab-backend')
+const { AutomergeCollaboration } = require('@hiveteams/collab-backend')
 
-const connection = new SocketIOConnection(options)
+const collabBackend = new AutomergeCollaboration(options)
 ```
 
 ### options:

packages/backend/src/AutomergeBackend.ts

@@ -53,7 +53,6 @@ class AutomergeBackend {
 
   closeConnection(id: string) {
     this.connectionMap[id]?.close()
-
     delete this.connectionMap[id]
   }
 
@@ -62,16 +61,12 @@ class AutomergeBackend {
    */
 
   receiveOperation = (id: string, data: CollabAction) => {
-    try {
+    if (!this.connectionMap[id]) {
-      if (!this.connectionMap[id]) {
+      debugCollabBackend('Could not receive op for closed connection %s', id)
-        debugCollabBackend('Could not receive op for closed connection %s', id)
+      return
-        return
-      }
-
-      this.connectionMap[id].receiveMsg(data.payload)
-    } catch (e) {
-      console.error('Unexpected error in receiveOperation', e)
     }
+
+    this.connectionMap[id].receiveMsg(data.payload)
   }
 
   /**
@@ -85,19 +80,15 @@ class AutomergeBackend {
    */
 
   appendDocument = (docId: string, data: Node[]) => {
-    try {
+    if (this.getDocument(docId)) {
-      if (this.getDocument(docId)) {
+      throw new Error(`Already has document with id: ${docId}`)
-        throw new Error(`Already has document with id: ${docId}`)
-      }
-
-      const sync = toSync({ cursors: {}, children: data })
-
-      const doc = Automerge.from<SyncDoc>(sync)
-      this.documentSetMap[docId] = new Automerge.DocSet<SyncDoc>()
-      this.documentSetMap[docId].setDoc(docId, doc)
-    } catch (e) {
-      console.error(e, docId)
     }
+
+    const sync = toSync({ cursors: {}, children: data })
+
+    const doc = Automerge.from<SyncDoc>(sync)
+    this.documentSetMap[docId] = new Automerge.DocSet<SyncDoc>()
+    this.documentSetMap[docId].setDoc(docId, doc)
   }
 
   /**
@@ -105,10 +96,8 @@ class AutomergeBackend {
    */
 
   removeDocument = (docId: string) => {
-    if (this.documentSetMap[docId]) {
+    this.documentSetMap[docId]?.removeDoc(docId)
-      this.documentSetMap[docId].removeDoc(docId)
+    delete this.documentSetMap[docId]
-      delete this.documentSetMap[docId]
-    }
   }
 
   /**
@@ -116,19 +105,16 @@ class AutomergeBackend {
    */
 
   garbageCursor = (docId: string, id: string) => {
-    try {
+    const doc = this.getDocument(docId)
-      const doc = this.getDocument(docId)
 
-      if (!doc || !doc.cursors) return
+    // no need to delete cursor if the document or cursors have already been deleted
+    if (!doc || !doc.cursors) return
 
-      const change = Automerge.change(doc, (d: any) => {
+    const change = Automerge.change(doc, (d: any) => {
-        delete d.cursors[id]
+      delete d.cursors[id]
-      })
+    })
 
-      this.documentSetMap[docId].setDoc(docId, change)
+    this.documentSetMap[docId].setDoc(docId, change)
-    } catch (e) {
-      console.error('Unexpected error in garbageCursor', e)
-    }
   }
 }
 

packages/backend/src/AutomergeCollaboration.ts

@@ -1,4 +1,4 @@
-import io from 'socket.io'
+import io, { Socket } from 'socket.io'
 import * as Automerge from 'automerge'
 import { Node } from 'slate'
 import { Server } from 'http'
@@ -8,26 +8,35 @@ import { getClients } from './utils/index'
 import { debugCollabBackend } from './utils/debug'
 import AutomergeBackend from './AutomergeBackend'
 
+interface ErrorData {
+  user: any
+  docId: string
+  serializedData: string
+  opData?: string
+}
+
 export interface IAutomergeCollaborationOptions {
   entry: Server
   connectOpts?: SocketIO.ServerOptions
   defaultValue: Node[]
   saveFrequency?: number
   onAuthRequest?: (query: any, socket?: SocketIO.Socket) => Promise<any>
-  onDocumentLoad?: (pathname: string, query?: any) => Promise<Node[]> | Node[]
+  onDocumentLoad?: (docId: string, query?: any) => Promise<Node[]> | Node[]
   onDocumentSave?: (
-    pathname: string,
+    docId: string,
     doc: Node[],
     user: any
   ) => Promise<void> | void
-  onDisconnect?: (pathname: string, user: any) => Promise<void> | void
+  onDisconnect?: (docId: string, user: any) => Promise<void> | void
+  onError: (error: Error, data: ErrorData) => Promise<void> | void
 }
 
 export default class AutomergeCollaboration {
   private io: SocketIO.Server
   private options: IAutomergeCollaborationOptions
-  private backend: AutomergeBackend
+  public backend: AutomergeBackend
   private userMap: { [key: string]: any | undefined }
+  private autoSaveDoc: (socket: SocketIO.Socket, docId: string) => void
 
   /**
    * Constructor
@@ -44,6 +53,15 @@ export default class AutomergeCollaboration {
 
     this.userMap = {}
 
+    /**
+     * Save document with throttle
+     */
+    this.autoSaveDoc = throttle(
+      async (socket: SocketIO.Socket, docId: string) =>
+        this.backend.getDocument(docId) && this.saveDocument(socket, docId),
+      this.options?.saveFrequency || 2000
+    )
+
     return this
   }
 
@@ -57,6 +75,24 @@ export default class AutomergeCollaboration {
       .use(this.authMiddleware)
       .on('connect', this.onConnect)
 
+  /**
+   * Construct error data and call onError callback
+   */
+  private handleError(socket: SocketIO.Socket, err: Error, opData?: string) {
+    const { id } = socket
+    const { name: docId } = socket.nsp
+
+    if (this.options.onError) {
+      const document = this.backend.getDocument(docId)
+      this.options.onError(err, {
+        user: this.userMap[id],
+        docId: docId,
+        serializedData: document ? Automerge.save(document) : 'No document',
+        opData
+      })
+    }
+  }
+
   /**
    * Namespace SocketIO middleware. Load document value and append it to CollaborationBackend.
    */
@@ -73,13 +109,12 @@ export default class AutomergeCollaboration {
     socket: SocketIO.Socket,
     next: (e?: any) => void
   ) => {
-    const { id } = socket
     const { query } = socket.handshake
     const { onAuthRequest } = this.options
 
     // we connect before any async logic so that we
     // never miss a socket disconnection event
-    socket.on('disconnect', this.onDisconnect(id, socket))
+    socket.on('disconnect', this.onDisconnect(socket))
 
     if (onAuthRequest) {
       const user = await onAuthRequest(query, socket)
@@ -98,55 +133,65 @@ export default class AutomergeCollaboration {
 
   private onConnect = async (socket: SocketIO.Socket) => {
     const { id, conn } = socket
+
     // do nothing if the socket connection has already been closed
     if (conn.readyState === 'closed') {
       return
     }
 
-    const { name } = socket.nsp
+    const { name: docId } = socket.nsp
     const { onDocumentLoad } = this.options
 
-    if (!this.backend.getDocument(name)) {
+    try {
-      const doc = onDocumentLoad
+      // Load document if no document state is already stored in our automerge backend
-        ? await onDocumentLoad(name)
+      if (!this.backend.getDocument(docId)) {
-        : this.options.defaultValue
+        // If the user provided an onDocumentLoad function use that, otherwise use the
+        // default value that was provided in the options
+        const doc = onDocumentLoad
+          ? await onDocumentLoad(docId)
+          : this.options.defaultValue
 
-      // Ensure socket is still opened
+        // Ensure socket is still opened
-      // recheck ready state after async operation
+        // recheck websocket connection state after the previous potentially async document load
-      if (conn.readyState === 'closed') {
+        if (conn.readyState === 'closed') {
-        return
+          return
+        }
+
+        // recheck backend getDocument after async operation
+        // to avoid duplicatively loading a document
+        if (!this.backend.getDocument(docId)) {
+          debugCollabBackend('Append document\t\t%s', id)
+          this.backend.appendDocument(docId, doc)
+        }
       }
 
-      // recheck backend getDocument after async operation
+      // Create a new backend connection for this socketId and docId
-      if (!this.backend.getDocument(name)) {
+      debugCollabBackend('Create connection\t%s', id)
-        debugCollabBackend('Append document\t\t%s', id)
+      this.backend.createConnection(
-        this.backend.appendDocument(name, doc)
+        id,
-      }
+        docId,
-    }
+        ({ type, payload }: CollabAction) => {
+          if (payload.docId === docId) {
+            socket.emit('msg', { type, payload: { id: conn.id, ...payload } })
+          }
+        }
+      )
 
-    debugCollabBackend('Create connection\t%s', id)
+      // Setup the on message callback
-    this.backend.createConnection(
+      socket.on('msg', this.onMessage(socket, docId))
-      id,
-      name,
-      ({ type, payload }: CollabAction) => {
-        socket.emit('msg', { type, payload: { id: conn.id, ...payload } })
-      }
-    )
-
-    socket.on('msg', this.onMessage(id, name))
-
-    socket.join(id, () => {
-      const doc = this.backend.getDocument(name)
 
+      const doc = this.backend.getDocument(docId)
       if (!doc) {
         debugCollabBackend(
           'onConnect: No document available at the time of socket.io join docId=%s socketId=%s',
-          name,
+          docId,
           id
         )
         return
       }
 
+      // Emit the socket message needed for receiving the automerge document
+      // on connect and reconnect
       socket.emit('msg', {
         type: 'document',
         payload: Automerge.save<SyncDoc>(doc)
@@ -154,47 +199,41 @@ export default class AutomergeCollaboration {
 
       debugCollabBackend('Open connection\t\t%s', id)
       this.backend.openConnection(id)
-    })
+      this.garbageCursors(socket)
-
+    } catch (err) {
-    this.garbageCursors(name)
+      this.handleError(socket, err)
+    }
   }
 
   /**
    * On 'message' handler
    */
 
-  private onMessage = (id: string, name: string) => (data: any) => {
+  private onMessage = (socket: SocketIO.Socket, docId: string) => (
+    data: any
+  ) => {
+    const { id } = socket
     switch (data.type) {
       case 'operation':
         try {
           this.backend.receiveOperation(id, data)
 
-          this.autoSaveDoc(id, name)
+          this.autoSaveDoc(socket, docId)
 
-          this.garbageCursors(name)
+          this.garbageCursors(socket)
         } catch (e) {
-          console.log(e)
+          this.handleError(socket, e, JSON.stringify(data))
         }
     }
   }
 
-  /**
-   * Save document with throttle
-   */
-
-  private autoSaveDoc = throttle(
-    async (id: string, docId: string) =>
-      this.backend.getDocument(docId) && this.saveDocument(id, docId),
-    // @ts-ignore: property used before initialization
-    this.options?.saveFrequency || 2000
-  )
-
   /**
    * Save document
    */
 
-  private saveDocument = async (id: string, docId: string) => {
+  private saveDocument = async (socket: SocketIO.Socket, docId: string) => {
     try {
+      const { id } = socket
       const { onDocumentSave } = this.options
 
       const doc = this.backend.getDocument(docId)
@@ -212,7 +251,7 @@ export default class AutomergeCollaboration {
         await onDocumentSave(docId, toJS(doc.children), user)
       }
     } catch (e) {
-      console.error(e, docId)
+      this.handleError(socket, e)
     }
   }
 
@@ -220,43 +259,56 @@ export default class AutomergeCollaboration {
    * On 'disconnect' handler
    */
 
-  private onDisconnect = (id: string, socket: SocketIO.Socket) => async () => {
+  private onDisconnect = (socket: SocketIO.Socket) => async () => {
-    debugCollabBackend('Connection closed\t%s', id)
+    try {
-    this.backend.closeConnection(id)
+      const { id } = socket
+      const { name: docId } = socket.nsp
+      socket.leave(docId)
 
-    await this.saveDocument(id, socket.nsp.name)
+      debugCollabBackend('Connection closed\t%s', id)
+      this.backend.closeConnection(id)
 
-    // trigger onDisconnect callback if one was provided
+      await this.saveDocument(socket, docId)
-    // and if a user has been loaded for this socket connection
+
-    const user = this.userMap[id]
+      // trigger onDisconnect callback if one was provided
-    if (this.options.onDisconnect && user) {
+      // and if a user has been loaded for this socket connection
-      await this.options.onDisconnect(socket.nsp.name, user)
+      const user = this.userMap[id]
+      if (this.options.onDisconnect && user) {
+        await this.options.onDisconnect(docId, user)
+      }
+
+      // cleanup automerge cursor and socket connection
+      this.garbageCursors(socket)
+      socket.leave(id)
+      this.garbageNsp(socket)
+
+      // cleanup usermap
+      delete this.userMap[id]
+    } catch (err) {
+      this.handleError(socket, err)
     }
-
-    // cleanup automerge cursor and socket connection
-    this.garbageCursors(socket.nsp.name)
-    socket.leave(id)
-    this.garbageNsp(id)
-
-    // cleanup usermap
-    delete this.userMap[id]
   }
 
   /**
    * Clean up unused SocketIO namespaces.
    */
 
-  garbageNsp = (id: string) => {
+  garbageNsp = (socket: SocketIO.Socket) => {
+    const { name: docId } = socket.nsp
     Object.keys(this.io.nsps)
       .filter(n => n !== '/')
       .forEach(nsp => {
-        getClients(this.io, nsp).then((clientsList: any) => {
+        getClients(this.io, nsp)
-          if (!clientsList.length) {
+          .then((clientsList: any) => {
-            debugCollabBackend('Removing document\t%s', id)
+            if (!clientsList.length) {
-            this.backend.removeDocument(nsp)
+              debugCollabBackend('Removing document\t%s', docId)
-            delete this.io.nsps[nsp]
+              this.backend.removeDocument(nsp)
-          }
+              delete this.io.nsps[nsp]
-        })
+            }
+          })
+          .catch(err => {
+            this.handleError(socket, err)
+          })
       })
   }
 
@@ -264,19 +316,24 @@ export default class AutomergeCollaboration {
    * Clean up unused cursor data.
    */
 
-  garbageCursors = (nsp: string) => {
+  garbageCursors = (socket: SocketIO.Socket) => {
-    const doc = this.backend.getDocument(nsp)
+    const { name: docId } = socket.nsp
-    // if document has already been cleaned up, it is safe to return early
+    try {
-    if (!doc || !doc.cursors) return
+      const doc = this.backend.getDocument(docId)
+      // if document has already been cleaned up, it is safe to return early
+      if (!doc || !doc.cursors) return
 
-    const namespace = this.io.of(nsp)
+      const namespace = this.io.of(docId)
 
-    Object.keys(doc?.cursors)?.forEach(key => {
+      Object.keys(doc?.cursors)?.forEach(key => {
-      if (!namespace.sockets[key]) {
+        if (!namespace.sockets[key]) {
-        debugCollabBackend('Garbage cursor\t\t%s', key)
+          debugCollabBackend('Garbage cursor\t\t%s', key)
-        this.backend.garbageCursor(nsp, key)
+          this.backend.garbageCursor(docId, key)
-      }
+        }
-    })
+      })
+    } catch (err) {
+      this.handleError(socket, err)
+    }
   }
 
   /**

packages/backend/src/SocketIOConnection.ts

@@ -1,282 +0,0 @@
-import io from 'socket.io'
-import * as Automerge from 'automerge'
-import { Node } from 'slate'
-import { Server } from 'http'
-
-import throttle from 'lodash/throttle'
-
-import { SyncDoc, CollabAction, toJS } from '@hiveteams/collab-bridge'
-
-import { getClients } from './utils'
-
-import AutomergeBackend from './AutomergeBackend'
-import { debugCollabBackend } from './utils/debug'
-
-export interface SocketIOCollaborationOptions {
-  entry: Server
-  connectOpts?: SocketIO.ServerOptions
-  defaultValue: Node[]
-  saveFrequency?: number
-  onAuthRequest?: (
-    query: Object,
-    socket?: SocketIO.Socket
-  ) => Promise<boolean> | boolean
-  onDocumentLoad?: (
-    pathname: string,
-    query?: Object
-  ) => Promise<Node[]> | Node[]
-  onDocumentSave?: (pathname: string, doc: Node[]) => Promise<void> | void
-}
-
-export default class SocketIOCollaboration {
-  private io: SocketIO.Server
-  private options: SocketIOCollaborationOptions
-  private backend: AutomergeBackend
-  private autoSaveDoc: (id: string, docId: string) => void
-
-  /**
-   * Constructor
-   */
-
-  constructor(options: SocketIOCollaborationOptions) {
-    this.io = io(options.entry, options.connectOpts)
-
-    this.backend = new AutomergeBackend()
-
-    this.options = options
-
-    /**
-     * Save document with throttle
-     */
-    this.autoSaveDoc = throttle(
-      async (id: string, docId: string) =>
-        this.backend.getDocument(docId) && this.saveDocument(id, docId),
-      this.options?.saveFrequency || 2000
-    )
-
-    this.configure()
-
-    return this
-  }
-
-  /**
-   * Initial IO configuration
-   */
-
-  private configure = () =>
-    this.io
-      .of(this.nspMiddleware)
-      .use(this.authMiddleware)
-      .on('connect', this.onConnect)
-
-  /**
-   * Namespace SocketIO middleware. Load document value and append it to CollaborationBackend.
-   */
-
-  private nspMiddleware = async (path: string, query: any, next: any) => {
-    return next(null, true)
-  }
-
-  /**
-   * SocketIO auth middleware. Used for user authentification.
-   */
-
-  private authMiddleware = async (
-    socket: SocketIO.Socket,
-    next: (e?: any) => void
-  ) => {
-    const { id } = socket
-    const { query } = socket.handshake
-    const { onAuthRequest } = this.options
-
-    // we connect before any async logic so that we
-    // never miss a socket disconnection event
-    socket.on('disconnect', this.onDisconnect(id, socket))
-
-    if (onAuthRequest) {
-      const permit = await onAuthRequest(query, socket)
-
-      if (!permit)
-        return next(new Error(`Authentification error: ${socket.id}`))
-    }
-
-    return next()
-  }
-
-  /**
-   * On 'connect' handler.
-   */
-
-  private onConnect = async (socket: SocketIO.Socket) => {
-    const { id, conn } = socket
-    // do nothing if the socket connection has already been closed
-    if (conn.readyState === 'closed') {
-      return
-    }
-
-    const { name } = socket.nsp
-    const { onDocumentLoad } = this.options
-
-    if (!this.backend.getDocument(name)) {
-      const doc = onDocumentLoad
-        ? await onDocumentLoad(name)
-        : this.options.defaultValue
-
-      // Ensure socket is still opened
-      // recheck ready state after async operation
-      if (conn.readyState === 'closed') {
-        return
-      }
-
-      // recheck backend getDocument after async operation
-      if (!this.backend.getDocument(name)) {
-        debugCollabBackend('Append document\t\t%s', id)
-        this.backend.appendDocument(name, doc)
-      }
-    }
-
-    debugCollabBackend('Create connection\t%s', id)
-    this.backend.createConnection(
-      id,
-      name,
-      ({ type, payload }: CollabAction) => {
-        socket.emit('msg', { type, payload: { id: conn.id, ...payload } })
-      }
-    )
-
-    socket.on('msg', this.onMessage(id, name))
-
-    socket.join(id, () => {
-      const doc = this.backend.getDocument(name)
-
-      if (!doc) {
-        debugCollabBackend(
-          'onConnect: No document available at the time of socket.io join docId=%s socketId=%s',
-          name,
-          id
-        )
-        return
-      }
-
-      socket.emit('msg', {
-        type: 'document',
-        payload: Automerge.save<SyncDoc>(doc)
-      })
-
-      debugCollabBackend('Open connection\t\t%s', id)
-      this.backend.openConnection(id)
-    })
-
-    this.garbageCursors(name)
-  }
-
-  /**
-   * On 'message' handler
-   */
-
-  private onMessage = (id: string, name: string) => (data: any) => {
-    switch (data.type) {
-      case 'operation':
-        try {
-          this.backend.receiveOperation(id, data)
-
-          this.autoSaveDoc(id, name)
-
-          this.garbageCursors(name)
-        } catch (e) {
-          console.log(e)
-        }
-    }
-  }
-
-  /**
-   * Save document
-   */
-
-  private saveDocument = async (id: string, docId: string) => {
-    try {
-      const { onDocumentSave } = this.options
-
-      const doc = this.backend.getDocument(docId)
-
-      // Return early if there is no valid document in our crdt backend
-      // Note: this will happen when user disconnects from the collab server
-      // before document load has completed
-      if (!doc) {
-        return
-      }
-
-      onDocumentSave && (await onDocumentSave(docId, toJS(doc.children)))
-    } catch (e) {
-      console.error(e, docId)
-    }
-  }
-
-  /**
-   * On 'disconnect' handler
-   */
-
-  private onDisconnect = (id: string, socket: SocketIO.Socket) => async () => {
-    debugCollabBackend('Connection closed\t%s', id)
-    this.backend.closeConnection(id)
-
-    await this.saveDocument(id, socket.nsp.name)
-
-    // cleanup automerge cursor and socket connection
-    this.garbageCursors(socket.nsp.name)
-
-    socket.leave(id)
-    this.garbageNsp(id)
-  }
-
-  /**
-   * Clean up unused SocketIO namespaces.
-   */
-
-  garbageNsp = (id: string) => {
-    Object.keys(this.io.nsps)
-      .filter(n => n !== '/')
-      .forEach(nsp => {
-        getClients(this.io, nsp).then((clientsList: any) => {
-          debugCollabBackend(
-            'Garbage namespace\t%s clientsList=%o %s',
-            id,
-            clientsList,
-            nsp
-          )
-          if (!clientsList.length) {
-            debugCollabBackend('Removing document\t%s', id)
-            this.backend.removeDocument(nsp)
-            delete this.io.nsps[nsp]
-          }
-        })
-      })
-  }
-
-  /**
-   * Clean up unused cursor data.
-   */
-
-  garbageCursors = (nsp: string) => {
-    const doc = this.backend.getDocument(nsp)
-    // if document has already been cleaned up, it is safe to return early
-    if (!doc || !doc.cursors) return
-
-    const namespace = this.io.of(nsp)
-
-    Object.keys(doc?.cursors)?.forEach(key => {
-      if (!namespace.sockets[key]) {
-        debugCollabBackend('Garbage cursor\t\t%s', key)
-        this.backend.garbageCursor(nsp, key)
-      }
-    })
-  }
-
-  /**
-   * Destroy SocketIO connection
-   */
-
-  destroy = async () => {
-    this.io.close()
-  }
-}

packages/backend/src/index.ts

@@ -1,3 +1,3 @@
-import SocketIOConnection from './SocketIOConnection'
+import AutomergeCollaboration from './AutomergeCollaboration'
 
-export { SocketIOConnection }
+export { AutomergeCollaboration }

packages/backend/src/utils/debug.ts

@@ -1,3 +1,3 @@
 import debug from 'debug'
 
-export const debugCollabBackend = debug('collab-backend')
+export const debugCollabBackend = debug('app-collab')

packages/client/package.json

@@ -29,6 +29,7 @@
     "@babel/preset-react": "^7.0.0",
     "@hiveteams/collab-bridge": "^0.7.19",
     "automerge": "0.14.0",
+    "lodash": "^4.17.20",
     "slate": "0.58.3",
     "slate-history": "0.58.3",
     "socket.io-client": "^2.3.0",

packages/client/src/automerge-connector.ts

@@ -13,35 +13,13 @@ import {
   toSlateOp,
   CursorData
 } from '@hiveteams/collab-bridge'
-
+import { AutomergeEditor } from './interfaces'
-export interface AutomergeEditor extends Editor {
-  clientId: string
-
-  isRemote: boolean
-
-  docSet: Automerge.DocSet<SyncDoc>
-  connection: Automerge.Connection<SyncDoc>
-
-  onConnectionMsg: (msg: Automerge.Message) => void
-
-  openConnection: () => void
-  closeConnection: () => void
-
-  receiveDocument: (data: string) => void
-  receiveOperation: (data: Automerge.Message) => void
-
-  gabageCursor: () => void
-
-  onCursor: (data: any) => void
-
-  automergeCleanup: () => void
-}
 
 /**
  * `AutomergeEditor` contains methods for collaboration-enabled editors.
  */
 
-export const AutomergeEditor = {
+export const AutomergeConnector = {
   /**
    * Create Automerge connection
    */
@@ -62,7 +40,7 @@ export const AutomergeEditor = {
     const doc = e.docSet.getDoc(docId)
 
     if (!doc) {
-      throw new TypeError(`Unknown docId: ${docId}!`)
+      throw new TypeError('Cannot apply slate ops for missing docId')
     }
 
     let changed: any
@@ -114,7 +92,7 @@ export const AutomergeEditor = {
     preserveExternalHistory?: boolean
   ) => {
     try {
-      const current: any = e.docSet.getDoc(docId)
+      const current = e.docSet.getDoc(docId)
 
       const updated = e.connection.receiveMsg(data)
 
@@ -160,7 +138,7 @@ export const AutomergeEditor = {
       delete d.cursors
     })
 
-    e.docSet.setDoc(docId, changed)
+    e.docSet.setDoc(docId, changed as any)
 
     e.onCursor && e.onCursor(null)
 

packages/client/src/client-copy.spec.ts

@@ -1,185 +0,0 @@
-// import { createEditor, Element, Node, Transforms } from 'slate'
-// import * as Automerge from 'automerge'
-// import withAutomerge, { AutomergeOptions } from './withAutomerge'
-// import { SyncDoc, toJS } from '@hiveteams/collab-bridge'
-// import AutomergeCollaboration from '@hiveteams/collab-backend/lib/AutomergeCollaboration'
-// import { insertText } from '../../bridge/src/apply/text'
-
-// describe('automerge editor client tests', () => {
-//   const docId = 'test'
-//   const automergeOptions: AutomergeOptions = {
-//     docId,
-//     onError: msg => console.log('Encountered test error', msg)
-//   }
-//   const editor = withAutomerge(createEditor(), automergeOptions)
-//   const automergeBackend = new AutomergeBackend()
-//   const backendSend = (msg: any) => {
-//     serverMessages.push(msg)
-//   }
-//   const clientId = 'test-client'
-//   editor.clientId = clientId
-
-//   /**
-//    * Initialize a basic automerge backend
-//    */
-
-//   // Create a new server automerge connection with a basic send function
-//   let serverMessages: any[] = []
-//   automergeBackend.appendDocument(docId, [
-//     { type: 'paragraph', children: [{ text: 'Hi' }] }
-//   ])
-//   automergeBackend.createConnection(clientId, docId, backendSend)
-
-//   // define an editor send function for the clientside automerge editor
-//   let clientMessages: any[] = []
-//   editor.send = (msg: any) => {
-//     clientMessages.push(msg)
-//   }
-
-//   automergeBackend.openConnection(clientId)
-//   // open the editor connection
-//   editor.openConnection()
-
-//   /**
-//    * Helper function to flush client messages and send them to the server
-//    */
-//   const sendClientMessagesToServer = () => {
-//     if (!clientMessages.length) return
-
-//     console.log('clientMessages', JSON.stringify(clientMessages))
-//     clientMessages.forEach(msg => {
-//       automergeBackend.receiveOperation(clientId, msg)
-//     })
-//     clientMessages = []
-//   }
-
-//   /**
-//    * Helper function to flush server messages and send them to the client
-//    */
-//   const receiveMessagesFromServer = () => {
-//     if (!serverMessages.length) return
-
-//     console.log('serverMessages', JSON.stringify(serverMessages))
-//     serverMessages.forEach(msg => {
-//       editor.receiveOperation(msg.payload)
-//     })
-//     serverMessages = []
-//   }
-
-//   afterEach(() => {
-//     sendClientMessagesToServer()
-//     receiveMessagesFromServer()
-//   })
-
-//   it('should properly receiveDocument', () => {
-//     const initialDocData = Automerge.save(automergeBackend.getDocument(docId))
-//     editor.receiveDocument(initialDocData)
-
-//     expect(editor.children.length).toEqual(1)
-//     const paragraphNode = editor.children[0] as Element
-//     expect(paragraphNode.type).toEqual('paragraph')
-//     expect(paragraphNode.children.length).toEqual(1)
-//     expect(Node.string(paragraphNode)).toEqual('Hi')
-//   })
-
-//   it('should sync insert node operation with server', done => {
-//     Transforms.insertNodes(editor, {
-//       type: 'paragraph',
-//       children: [{ text: 'a' }]
-//     })
-
-//     // ensure that we eventually send a message for the insert_node oepration
-//     const handle = setInterval(() => {
-//       sendClientMessagesToServer()
-//       receiveMessagesFromServer()
-
-//       const serverDoc = toJS(automergeBackend.getDocument(docId))
-//       if (serverDoc.children.length === 2) {
-//         const paragraphNode = serverDoc.children[1]
-//         expect(Node.string(paragraphNode)).toEqual('a')
-//         clearInterval(handle)
-//         done()
-//       }
-//     }, 10)
-//   })
-
-//   it('should sync insert text operation with client', done => {
-//     const serverDoc = automergeBackend.getDocument(docId)
-
-//     const updatedServerDoc = Automerge.change(serverDoc, newServerDoc => {
-//       insertText(newServerDoc as any, {
-//         type: 'insert_text',
-//         path: [1, 0],
-//         offset: 1,
-//         text: 'b'
-//       })
-//     })
-//     automergeBackend.documentSetMap[docId].setDoc(docId, updatedServerDoc)
-
-//     // ensure that we eventually send a message for the insert_node oepration
-//     const handle = setInterval(() => {
-//       sendClientMessagesToServer()
-//       receiveMessagesFromServer()
-//       const [, secondParagraph] = editor.children
-//       if (Node.string(secondParagraph) === 'ab') {
-//         clearInterval(handle)
-//         done()
-//       }
-//     }, 10)
-//   })
-
-//   it('should reapply server state client side when server restarts', done => {
-//     automergeBackend.closeConnection(clientId)
-//     automergeBackend.removeDocument(docId)
-//     automergeBackend.appendDocument(docId, [
-//       { type: 'paragraph', children: [{ text: 'Hi' }] }
-//     ])
-//     automergeBackend.createConnection(clientId, docId, backendSend)
-//     automergeBackend.openConnection(clientId)
-
-//     const docData = Automerge.save(automergeBackend.getDocument(docId))
-//     editor.receiveDocument(docData)
-
-//     const handle = setInterval(() => {
-//       sendClientMessagesToServer()
-//       receiveMessagesFromServer()
-//       console.log('server doc', toJS(automergeBackend.getDocument(docId)))
-//       if (editor.children.length === 1) {
-//         done()
-//         clearInterval(handle)
-//       }
-//     }, 1000)
-//   })
-
-//   // it('should ? on client restart', done => {
-//   //   editor.closeConnection()
-
-//   //   Transforms.insertNodes(
-//   //     editor,
-//   //     {
-//   //       type: 'paragraph',
-//   //       children: [{ text: 'a' }]
-//   //     },
-//   //     { at: [1] }
-//   //   )
-
-//   //   editor.openConnection()
-//   //   const docData = Automerge.save(automergeBackend.getDocument(docId))
-//   //   editor.receiveDocument(docData)
-//   //   // ensure that we eventually send a message for the insert_node operation
-//   //   const handle = setInterval(() => {
-//   //     sendClientMessagesToServer()
-//   //     receiveMessagesFromServer()
-
-//   //     const serverDoc = toJS(automergeBackend.getDocument(docId))
-//   //     console.log(JSON.stringify(serverDoc))
-//   //     console.log(editor.children)
-//   //     if (serverDoc.children.length === 2) {
-//   //       const paragraphNode = serverDoc.children[1]
-//   //       expect(Node.string(paragraphNode)).toEqual('a')
-//   //       clearInterval(handle)
-//   //       done()
-//   //     }
-//   //   }, 1000)
-//   // })
-// })

packages/client/src/client.spec.ts

@@ -1,185 +1,193 @@
-import { createEditor, Element, Node, Transforms } from 'slate'
+import { createServer } from 'http'
-import * as Automerge from 'automerge'
+import isEqual from 'lodash/isEqual'
-import withAutomerge, { AutomergeOptions } from './withAutomerge'
+import { createEditor, Node, Transforms } from 'slate'
-import { SyncDoc, toJS } from '@hiveteams/collab-bridge'
+import { toJS } from '@hiveteams/collab-bridge'
-import AutomergeBackend from '@hiveteams/collab-backend/lib/AutomergeBackend'
+import AutomergeCollaboration from '@hiveteams/collab-backend/lib/AutomergeCollaboration'
-import { insertText } from '../../bridge/src/apply/text'
+import withIOCollaboration from './withIOCollaboration'
+import { AutomergeOptions, SocketIOPluginOptions } from './interfaces'
+
+const connectionSlug = 'test'
+const docId = `/${connectionSlug}`
+const options: AutomergeOptions & SocketIOPluginOptions = {
+  docId,
+  onError: msg => console.log('Encountered test error', msg),
+  url: `http://localhost:5000/${connectionSlug}`,
+  connectOpts: {
+    query: {
+      name: 'test-user',
+      slug: connectionSlug
+    },
+    forceNew: true
+  }
+}
+
+const waitForCondition = (condition: () => boolean, ms = 10) =>
+  new Promise<void>(resolve => {
+    const handle = setInterval(() => {
+      if (condition()) {
+        clearInterval(handle)
+        resolve()
+      }
+    }, ms)
+  })
+
+const server = createServer(function(req, res) {
+  res.writeHead(200, { 'Content-Type': 'text/plain' })
+  res.write('Hello World!')
+  res.end()
+})
+
+const defaultSlateJson = [{ type: 'paragraph', children: [{ text: '' }] }]
+const collabBackend = new AutomergeCollaboration({
+  entry: server,
+  defaultValue: defaultSlateJson,
+  saveFrequency: 1000,
+  async onAuthRequest(query) {
+    return { _id: 'test-id', name: 'Eric' }
+  },
+  async onDocumentLoad(pathname) {
+    return defaultSlateJson
+  }
+})
 
 describe('automerge editor client tests', () => {
-  const docId = 'test'
+  beforeAll(done => {
-  const automergeOptions: AutomergeOptions = {
+    //pass a callback to tell jest it is async
-    docId,
+    //start the server before any test
-    onError: msg => console.log('Encountered test error', msg)
+    server.listen(5000, () => done())
-  }
-  const editor = withAutomerge(createEditor(), automergeOptions)
-  const automergeBackend = new AutomergeBackend()
-  const backendSend = (msg: any) => {
-    serverMessages.push(msg)
-  }
-  const clientId = 'test-client'
-  editor.clientId = clientId
-
-  /**
-   * Initialize a basic automerge backend
-   */
-
-  // Create a new server automerge connection with a basic send function
-  let serverMessages: any[] = []
-  automergeBackend.appendDocument(docId, [
-    { type: 'paragraph', children: [{ text: 'Hi' }] }
-  ])
-  automergeBackend.createConnection(clientId, docId, backendSend)
-
-  // define an editor send function for the clientside automerge editor
-  let clientMessages: any[] = []
-  editor.send = (msg: any) => {
-    clientMessages.push(msg)
-  }
-
-  automergeBackend.openConnection(clientId)
-  // open the editor connection
-  editor.openConnection()
-
-  /**
-   * Helper function to flush client messages and send them to the server
-   */
-  const sendClientMessagesToServer = () => {
-    if (!clientMessages.length) return
-
-    console.log('clientMessages', JSON.stringify(clientMessages))
-    clientMessages.forEach(msg => {
-      automergeBackend.receiveOperation(clientId, msg)
-    })
-    clientMessages = []
-  }
-
-  /**
-   * Helper function to flush server messages and send them to the client
-   */
-  const receiveMessagesFromServer = () => {
-    if (!serverMessages.length) return
-
-    console.log('serverMessages', JSON.stringify(serverMessages))
-    serverMessages.forEach(msg => {
-      editor.receiveOperation(msg.payload)
-    })
-    serverMessages = []
-  }
-
-  afterEach(() => {
-    sendClientMessagesToServer()
-    receiveMessagesFromServer()
   })
 
-  it('should properly receiveDocument', () => {
+  const createCollabEditor = async (
-    const initialDocData = Automerge.save(automergeBackend.getDocument(docId))
+    editorOptions: AutomergeOptions & SocketIOPluginOptions = options
-    editor.receiveDocument(initialDocData)
+  ) => {
+    const editor = withIOCollaboration(createEditor(), editorOptions)
 
+    const oldReceiveDocument = editor.receiveDocument
+    const promise = new Promise<void>(resolve => {
+      editor.receiveDocument = data => {
+        oldReceiveDocument(data)
+        resolve()
+      }
+    })
+    editor.connect()
+
+    await promise
+    return editor
+  }
+
+  it('should receiveDocument', async () => {
+    const editor = await createCollabEditor()
     expect(editor.children.length).toEqual(1)
-    const paragraphNode = editor.children[0] as Element
+    editor.destroy()
-    expect(paragraphNode.type).toEqual('paragraph')
-    expect(paragraphNode.children.length).toEqual(1)
-    expect(Node.string(paragraphNode)).toEqual('Hi')
   })
 
-  it('should sync insert node operation with server', done => {
+  it('should send client update to server', async () => {
-    Transforms.insertNodes(editor, {
+    const editor = await createCollabEditor()
-      type: 'paragraph',
+
-      children: [{ text: 'a' }]
+    editor.insertNode({ type: 'paragraph', children: [{ text: 'hi' }] })
+
+    await waitForCondition(() => {
+      const serverDoc = toJS(collabBackend.backend.getDocument(docId))
+      return serverDoc.children.length === 2
     })
 
-    // ensure that we eventually send a message for the insert_node oepration
+    editor.destroy()
-    const handle = setInterval(() => {
-      sendClientMessagesToServer()
-      receiveMessagesFromServer()
-
-      const serverDoc = toJS(automergeBackend.getDocument(docId))
-      if (serverDoc.children.length === 2) {
-        const paragraphNode = serverDoc.children[1]
-        expect(Node.string(paragraphNode)).toEqual('a')
-        clearInterval(handle)
-        done()
-      }
-    }, 10)
   })
 
-  it('should sync insert text operation with client', done => {
+  it('should sync updates across two clients', async () => {
-    const serverDoc = automergeBackend.getDocument(docId)
+    const editor1 = await createCollabEditor()
+    const editor2 = await createCollabEditor()
 
-    const updatedServerDoc = Automerge.change(serverDoc, newServerDoc => {
+    editor1.insertNode({ type: 'paragraph', children: [{ text: 'hi' }] })
-      insertText(newServerDoc as any, {
+
-        type: 'insert_text',
+    await waitForCondition(() => {
-        path: [1, 0],
+      const serverDoc = toJS(collabBackend.backend.getDocument(docId))
-        offset: 1,
+      return serverDoc.children.length === 2 && editor2.children.length === 2
-        text: 'b'
-      })
     })
-    automergeBackend.documentSetMap[docId].setDoc(docId, updatedServerDoc)
 
-    // ensure that we eventually send a message for the insert_node oepration
+    editor1.destroy()
-    const handle = setInterval(() => {
+    editor2.destroy()
-      sendClientMessagesToServer()
-      receiveMessagesFromServer()
-      const [, secondParagraph] = editor.children
-      if (Node.string(secondParagraph) === 'ab') {
-        clearInterval(handle)
-        done()
-      }
-    }, 10)
   })
 
-  it('should reapply server state client side when server restarts', done => {
+  it('should sync offline changes on reconnect', async () => {
-    automergeBackend.closeConnection(clientId)
+    const editor1 = await createCollabEditor()
-    automergeBackend.removeDocument(docId)
+    const editor2 = await createCollabEditor()
-    automergeBackend.appendDocument(docId, [
-      { type: 'paragraph', children: [{ text: 'Hi' }] }
-    ])
-    automergeBackend.createConnection(clientId, docId, backendSend)
-    automergeBackend.openConnection(clientId)
 
-    const docData = Automerge.save(automergeBackend.getDocument(docId))
+    editor1.insertNode({ type: 'paragraph', children: [{ text: 'hi' }] })
-    editor.receiveDocument(docData)
 
-    const handle = setInterval(() => {
+    await waitForCondition(() => {
-      sendClientMessagesToServer()
+      const serverDoc = toJS(collabBackend.backend.getDocument(docId))
-      receiveMessagesFromServer()
+      return serverDoc.children.length === 2 && editor2.children.length === 2
-      console.log('server doc', toJS(automergeBackend.getDocument(docId)))
+    })
-      if (editor.children.length === 1) {
+
-        done()
+    editor1.destroy()
-        clearInterval(handle)
+
-      }
+    editor1.insertNode({ type: 'paragraph', children: [{ text: 'offline' }] })
-    }, 1000)
+
+    editor1.connect()
+
+    await waitForCondition(() => {
+      const serverDoc = toJS(collabBackend.backend.getDocument(docId))
+      return serverDoc.children.length === 3 && editor2.children.length === 3
+    })
+
+    expect(Node.string(editor2.children[2])).toEqual('offline')
+
+    editor1.destroy()
+    editor2.destroy()
   })
 
-  // it('should ? on client restart', done => {
+  it('should work with concurrent edits', async () => {
-  //   editor.closeConnection()
+    const editor1 = await createCollabEditor()
+    const editor2 = await createCollabEditor()
 
-  //   Transforms.insertNodes(
+    const numEdits = 10
-  //     editor,
+    for (let i = 0; i < numEdits; i++) {
-  //     {
+      editor1.insertNode({ type: 'paragraph', children: [{ text: '' }] })
-  //       type: 'paragraph',
+      editor2.insertNode({ type: 'paragraph', children: [{ text: '' }] })
-  //       children: [{ text: 'a' }]
+    }
-  //     },
-  //     { at: [1] }
-  //   )
 
-  //   editor.openConnection()
+    await waitForCondition(() => {
-  //   const docData = Automerge.save(automergeBackend.getDocument(docId))
+      return (
-  //   editor.receiveDocument(docData)
+        editor1.children.length === numEdits * 2 + 1 &&
-  //   // ensure that we eventually send a message for the insert_node operation
+        editor2.children.length === numEdits * 2 + 1
-  //   const handle = setInterval(() => {
+      )
-  //     sendClientMessagesToServer()
+    })
-  //     receiveMessagesFromServer()
 
-  //     const serverDoc = toJS(automergeBackend.getDocument(docId))
+    expect(isEqual(editor1.children, editor2.children)).toBeTruthy()
-  //     console.log(JSON.stringify(serverDoc))
+
-  //     console.log(editor.children)
+    editor1.destroy()
-  //     if (serverDoc.children.length === 2) {
+    editor2.destroy()
-  //       const paragraphNode = serverDoc.children[1]
+  })
-  //       expect(Node.string(paragraphNode)).toEqual('a')
+
-  //       clearInterval(handle)
+  it('should work with concurrent insert text operations', async () => {
-  //       done()
+    const editor1 = await createCollabEditor()
-  //     }
+    const editor2 = await createCollabEditor()
-  //   }, 1000)
+
-  // })
+    Transforms.select(editor1, [0, 0])
+    Transforms.select(editor2, [0, 0])
+
+    const numEdits = 10
+    for (let i = 0; i < numEdits; i++) {
+      editor1.insertText('a')
+      editor2.insertText('b')
+    }
+
+    await waitForCondition(() => {
+      return (
+        Node.string(editor1.children[0]).length === numEdits * 2 &&
+        Node.string(editor2.children[0]).length === numEdits * 2
+      )
+    })
+
+    expect(isEqual(editor1.children, editor2.children)).toBeTruthy()
+
+    editor1.destroy()
+    editor2.destroy()
+  })
+
+  afterAll(() => {
+    collabBackend.destroy()
+    server.close()
+  })
 })

packages/client/src/interfaces.ts

@@ -0,0 +1,58 @@
+import Automerge from 'automerge'
+import { Editor } from 'slate'
+import { CollabAction, CursorData, SyncDoc } from '@hiveteams/collab-bridge'
+
+interface ErrorData {
+  docId: string
+  serializedData: string
+  opData?: string
+  slateOperations?: string
+}
+
+export interface AutomergeOptions {
+  docId: string
+  cursorData?: CursorData
+  preserveExternalHistory?: boolean
+  onError?: (msg: string | Error, data: ErrorData) => void
+}
+
+export interface AutomergeEditor extends Editor {
+  clientId: string
+
+  isRemote: boolean
+
+  docSet: Automerge.DocSet<SyncDoc>
+  connection: Automerge.Connection<SyncDoc>
+
+  onConnectionMsg: (msg: Automerge.Message) => void
+
+  openConnection: () => void
+  closeConnection: () => void
+
+  receiveDocument: (data: string) => void
+  receiveOperation: (data: Automerge.Message) => void
+
+  gabageCursor: () => void
+
+  onCursor: (data: any) => void
+
+  handleError: (err: Error | string, opData?: string) => void
+}
+
+export interface SocketIOPluginOptions {
+  url: string
+  connectOpts: SocketIOClient.ConnectOpts
+  onConnect?: () => void
+  onDisconnect?: () => void
+  onError?: (msg: string | Error, data: ErrorData) => void
+}
+
+export interface WithSocketIOEditor {
+  clientId: string
+  socket: SocketIOClient.Socket
+  connect: () => void
+  disconnect: () => void
+  send: (op: CollabAction) => void
+  receive: (op: CollabAction) => void
+  destroy: () => void
+}

packages/client/src/useCursor.ts

@@ -4,8 +4,8 @@ import { Text, Range, Path, NodeEntry } from 'slate'
 
 import { toJS, Cursor, Cursors } from '@hiveteams/collab-bridge'
 
-import { AutomergeEditor } from './automerge-editor'
 import useMounted from './useMounted'
+import { AutomergeEditor } from './interfaces'
 
 const useCursor = (
   e: AutomergeEditor

packages/client/src/withAutomerge.ts

@@ -2,59 +2,69 @@ import Automerge from 'automerge'
 
 import { Editor } from 'slate'
 
-import { AutomergeEditor } from './automerge-editor'
+import { AutomergeConnector } from './automerge-connector'
 
-import { CursorData, CollabAction } from '@hiveteams/collab-bridge'
+import { CollabAction } from '@hiveteams/collab-bridge'
-
+import {
-export interface AutomergeOptions {
+  AutomergeEditor,
-  docId: string
+  AutomergeOptions,
-  cursorData?: CursorData
+  WithSocketIOEditor
-  preserveExternalHistory?: boolean
+} from './interfaces'
-  onError?: (msg: string | Error) => void
-}
 
 /**
  * The `withAutomerge` plugin contains core collaboration logic.
  */
 
 const withAutomerge = <T extends Editor>(
-  editor: T,
+  slateEditor: T,
   options: AutomergeOptions
 ) => {
-  const e = editor as T & AutomergeEditor
+  const { docId, cursorData, preserveExternalHistory } = options || {}
 
-  const { onChange } = e
+  const editor = slateEditor as T & AutomergeEditor & WithSocketIOEditor
 
-  const {
+  const { onChange } = editor
-    docId,
-    cursorData,
-    preserveExternalHistory,
-    onError = (err: string | Error) => console.log('AutomergeEditor error', err)
-  } = options || {}
 
-  e.docSet = new Automerge.DocSet()
+  editor.docSet = new Automerge.DocSet()
+
+  /**
+   * Helper function for handling errors
+   */
+
+  editor.handleError = (err: Error | string, opData?: string) => {
+    const { docId, cursorData, onError } = options
+    if (onError && cursorData) {
+      const document = editor.docSet.getDoc(docId)
+      onError(err, {
+        docId: docId,
+        serializedData: document ? Automerge.save(document) : 'No document',
+        opData,
+        slateOperations: JSON.stringify(editor.operations)
+      })
+    }
+  }
 
   /**
    * Open Automerge Connection
    */
 
-  e.openConnection = () => {
+  editor.openConnection = () => {
-    e.connection = AutomergeEditor.createConnection(e, (data: CollabAction) =>
+    editor.connection = AutomergeConnector.createConnection(
-      //@ts-ignore
+      editor,
-      e.send(data)
+      (data: CollabAction) => editor.send(data)
     )
 
-    e.connection.open()
+    editor.connection.open()
   }
 
   /**
    * Close Automerge Connection
    */
 
-  e.closeConnection = () => {
+  editor.closeConnection = () => {
     // close any actively open connections
-    if (e.connection) {
+    if (editor.connection) {
-      e.connection.close()
+      editor.connection.close()
     }
   }
 
@@ -62,30 +72,25 @@ const withAutomerge = <T extends Editor>(
    * Clear cursor data
    */
 
-  e.gabageCursor = () => {
+  editor.gabageCursor = () => {
     try {
-      AutomergeEditor.garbageCursor(e, docId)
+      AutomergeConnector.garbageCursor(editor, docId)
     } catch (err) {
-      console.log('garbageCursor error', err)
+      editor.handleError(err)
     }
   }
 
-  e.automergeCleanup = () => {
-    e.docSet = new Automerge.DocSet()
-  }
-
   /**
    * Editor onChange
    */
+  editor.onChange = () => {
+    const operations = editor.operations
 
-  e.onChange = () => {
+    if (!editor.isRemote) {
-    const operations: any = e.operations
-
-    if (!e.isRemote) {
       try {
-        AutomergeEditor.applySlateOps(e, docId, operations, cursorData)
+        AutomergeConnector.applySlateOps(editor, docId, operations, cursorData)
       } catch (err) {
-        onError(err)
+        editor.handleError(err)
       }
 
       onChange()
@@ -96,11 +101,11 @@ const withAutomerge = <T extends Editor>(
    * Receive document value
    */
 
-  e.receiveDocument = data => {
+  editor.receiveDocument = data => {
     try {
-      AutomergeEditor.receiveDocument(e, docId, data)
+      AutomergeConnector.receiveDocument(editor, docId, data)
     } catch (err) {
-      onError(err)
+      editor.handleError(err, JSON.stringify(data))
     }
   }
 
@@ -108,18 +113,23 @@ const withAutomerge = <T extends Editor>(
    * Receive Automerge sync operations
    */
 
-  e.receiveOperation = data => {
+  editor.receiveOperation = data => {
+    // ignore document updates for differnt docIds
     if (docId !== data.docId) return
 
     try {
-      AutomergeEditor.applyOperation(e, docId, data, preserveExternalHistory)
+      AutomergeConnector.applyOperation(
+        editor,
+        docId,
+        data,
+        preserveExternalHistory
+      )
     } catch (err) {
-      // report any errors during apply operation
+      editor.handleError(err, JSON.stringify(data))
-      onError(err)
     }
   }
 
-  return e
+  return editor
 }
 
 export default withAutomerge

packages/client/src/withIOCollaboration.ts

@@ -1,11 +1,13 @@
 import { Editor } from 'slate'
-import { AutomergeEditor } from './automerge-editor'
 
-import withAutomerge, { AutomergeOptions } from './withAutomerge'
+import withAutomerge from './withAutomerge'
-import withSocketIO, {
+import {
-  WithSocketIOEditor,
+  AutomergeEditor,
-  SocketIOPluginOptions
+  AutomergeOptions,
-} from './withSocketIO'
+  SocketIOPluginOptions,
+  WithSocketIOEditor
+} from './interfaces'
+import withSocketIO from './withSocketIO'
 
 /**
  * The `withIOCollaboration` plugin contains collaboration with SocketIO.

packages/client/src/withSocketIO.ts

@@ -1,102 +1,85 @@
 import io from 'socket.io-client'
 
-import { AutomergeEditor } from './automerge-editor'
+import Automerge from 'automerge'
-
 import { CollabAction } from '@hiveteams/collab-bridge'
-
+import {
-export interface SocketIOPluginOptions {
+  AutomergeEditor,
-  url: string
+  AutomergeOptions,
-  connectOpts: SocketIOClient.ConnectOpts
+  SocketIOPluginOptions,
-
+  WithSocketIOEditor
-  onConnect?: () => void
+} from './interfaces'
-  onDisconnect?: () => void
-
-  onError?: (msg: string | Error) => void
-}
-
-export interface WithSocketIOEditor {
-  socket: SocketIOClient.Socket
-
-  connect: () => void
-  disconnect: () => void
-
-  send: (op: CollabAction) => void
-  receive: (op: CollabAction) => void
-
-  destroy: () => void
-}
 
 /**
  * The `withSocketIO` plugin contains SocketIO layer logic.
  */
 
 const withSocketIO = <T extends AutomergeEditor>(
-  editor: T,
+  slateEditor: T,
-  options: SocketIOPluginOptions
+  options: SocketIOPluginOptions & AutomergeOptions
 ) => {
-  const e = editor as T & WithSocketIOEditor
+  const { onConnect, onDisconnect, connectOpts, url } = options
+  const editor = slateEditor as T & WithSocketIOEditor & AutomergeEditor
   let socket: SocketIOClient.Socket
 
-  const { onConnect, onDisconnect, onError, connectOpts, url } = options
-
   /**
    * Connect to Socket.
    */
 
-  e.connect = () => {
+  editor.connect = () => {
     socket = io(url, { ...connectOpts })
 
+    // On socket io connect, open a new automerge connection
     socket.on('connect', () => {
-      e.clientId = socket.id
+      editor.clientId = socket.id
-
+      editor.openConnection()
-      e.openConnection()
-
       onConnect && onConnect()
     })
 
+    // On socket io error
     socket.on('error', (msg: string) => {
-      onError && onError(msg)
+      editor.handleError(msg)
     })
 
+    // On socket io msg, process the collab operation
     socket.on('msg', (data: CollabAction) => {
-      e.receive(data)
+      editor.receive(data)
     })
 
+    // On socket io disconnect, cleanup cursor and call the provided onDisconnect callback
     socket.on('disconnect', () => {
-      e.gabageCursor()
+      editor.gabageCursor()
-
       onDisconnect && onDisconnect()
     })
 
     socket.connect()
 
-    return e
+    return editor
   }
 
   /**
    * Disconnect from Socket.
    */
 
-  e.disconnect = () => {
+  editor.disconnect = () => {
     socket.removeListener('msg')
 
     socket.close()
 
-    e.closeConnection()
+    editor.closeConnection()
 
-    return e
+    return editor
   }
 
   /**
    * Receive transport msg.
    */
 
-  e.receive = (msg: CollabAction) => {
+  editor.receive = (msg: CollabAction) => {
     switch (msg.type) {
       case 'operation':
-        return e.receiveOperation(msg.payload)
+        return editor.receiveOperation(msg.payload)
       case 'document':
-        return e.receiveDocument(msg.payload)
+        return editor.receiveDocument(msg.payload)
     }
   }
 
@@ -104,7 +87,7 @@ const withSocketIO = <T extends AutomergeEditor>(
    * Send message to socket.
    */
 
-  e.send = (msg: CollabAction) => {
+  editor.send = (msg: CollabAction) => {
     socket.emit('msg', msg)
   }
 
@@ -112,13 +95,12 @@ const withSocketIO = <T extends AutomergeEditor>(
    * Close socket and connection.
    */
 
-  e.destroy = () => {
+  editor.destroy = () => {
     socket.close()
-    e.closeConnection()
+    editor.closeConnection()
-    e.automergeCleanup()
   }
 
-  return e
+  return editor
 }
 
 export default withSocketIO

packages/client/tsconfig.json

@@ -7,8 +7,9 @@
     "outDir": "./lib",
     "composite": true,
     "paths": {
-      "@hiveteams/collab-bridge": ["../../bridge"]
+      "@hiveteams/collab-bridge": ["../../bridge"],
+      "@hiveteams/collab-backend": ["../../backend"]
     }
   },
-  "references": [{ "path": "../bridge" }]
+  "references": [{ "path": "../bridge" }, { "path": "../backend" }]
 }

packages/example/server.js

@@ -1,4 +1,4 @@
-const { SocketIOConnection } = require('@hiveteams/collab-backend')
+const { AutomergeCollaboration } = require('@hiveteams/collab-backend')
 const express = require('express')
 
 const defaultValue = [
@@ -36,4 +36,4 @@ const config = {
   }
 }
 
-const connection = new SocketIOConnection(config)
+const connection = new AutomergeCollaboration(config)