Automerge frontend/backend split example

backend.js

import * as Backend from 'automerge/backend'

let doc = Backend.init()

loadChangesFromDisk().then(onRemoteChanges)

function onLocalChange(change) {
  const [newDoc, patch] = Backend.applyLocalChange(doc, change)
  doc = newDoc
  saveChangeToDisk(change)
  sendToFrontend(patch)
}

function onRemoteChanges(changes) {
  const [newDoc, patch] = Backend.applyChanges(doc, changes)
  doc = newDoc
  sendToFrontend(patch)
}

frontend.js

import * as Frontend from 'automerge/frontend'

const actorId = "abc"

// This can also be set later with `doc = Frontend.setActorId(doc)`,
// but must be done before `Frontend.change` is called.
let doc = Frontend.init(actorId)

function onPatch(patch) {
  doc = Frontend.applyPatch(doc, patch)
}

function makeChange(fn) {
  const [newDoc, change] = Frontend.change(doc, fn)
  doc = newDoc
  sendToBackend(change)
}