Merge branch 'main' into rename-websocket-exports

automerge · Feb 1, 2025 · 706a4f2 · 706a4f2
2 parents 92ca86b + b30af98
commit 706a4f2
Show file tree

Hide file tree

Showing 67 changed files with 4,272 additions and 1,777 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -1,4 +1,5 @@
 import typescriptEslint from "@typescript-eslint/eslint-plugin"
+import pluginReact from "eslint-plugin-react"
 import globals from "globals"
 import tsParser from "@typescript-eslint/parser"
 import path from "node:path"
@@ -76,7 +77,16 @@ export default [
       "testSetup.ts",
     ],
   },
+  {
+    settings: {
+      react: {
+        version: "^18.2.0",
+      },
+    },
+  },
   js.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  pluginReact.configs.flat["jsx-runtime"],
   ...compat.extends(
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended"

diff --git a/examples/react-counter/package.json b/examples/react-counter/package.json
@@ -2,7 +2,7 @@
   "name": "@automerge/automerge-repo-demo-counter",
   "repository": "https://github.com/automerge/automerge-repo/tree/master/examples/react-counter",
   "private": true,
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.22",
   "type": "module",
   "scripts": {
     "dev": "vite --open",
@@ -15,7 +15,7 @@
     "@automerge/automerge-repo-network-websocket": "workspace:*",
     "@automerge/automerge-repo-react-hooks": "workspace:*",
     "@automerge/automerge-repo-storage-indexeddb": "workspace:*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
   }
 }
diff --git a/examples/react-counter/src/main.tsx b/examples/react-counter/src/main.tsx
@@ -38,7 +38,7 @@ declare global {
 const rootDocUrl = `${document.location.hash.substring(1)}`
 let handle
 if (isValidAutomergeUrl(rootDocUrl)) {
-  handle = repo.find(rootDocUrl)
+  handle = await repo.find(rootDocUrl)
 } else {
   handle = repo.create<{ count: number }>({ count: 0 })
 }

diff --git a/examples/react-todo/package.json b/examples/react-todo/package.json
@@ -2,7 +2,7 @@
   "name": "@automerge/automerge-repo-demo-todo",
   "repository": "https://github.com/automerge/automerge-repo/tree/master/examples/react-todo",
   "private": true,
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.22",
   "type": "module",
   "scripts": {
     "dev": "vite --open",
@@ -15,12 +15,12 @@
     "@automerge/automerge-repo-network-websocket": "workspace:*",
     "@automerge/automerge-repo-react-hooks": "workspace:*",
     "@automerge/automerge-repo-storage-indexeddb": "workspace:*",
-    "@ibm/plex": "^6.1.1",
     "autoprefixer": "^10.4.13",
     "classnames": "^2.3.2",
     "postcss": "^8.4.21",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "react-error-boundary": "^5.0.0"
   },
   "devDependencies": {
     "tailwindcss": "^3.2.4"

diff --git a/examples/react-todo/src/App.tsx b/examples/react-todo/src/App.tsx
@@ -1,7 +1,7 @@
 import { AutomergeUrl } from "@automerge/automerge-repo"
 import { useDocument, useRepo } from "@automerge/automerge-repo-react-hooks"
 import cx from "classnames"
-import { useRef, useState } from "react"
+import { Suspense, useRef, useState } from "react"
 
 import { Todo } from "./Todo.js"
 import { ExtendedArray, Filter, State, TodoData } from "./types.js"
@@ -28,7 +28,7 @@ export function App({ url }: { url: AutomergeUrl }) {
     if (!state) return []
     return state.todos.filter(async url => {
       if (filter === Filter.all) return true
-      const todo = await repo.find<TodoData>(url).doc()
+      const todo = (await repo.find<TodoData>(url)).doc()
       if (filter === Filter.completed) return todo.completed
       if (filter === Filter.incomplete) return !todo.completed
       return false
@@ -38,7 +38,7 @@ export function App({ url }: { url: AutomergeUrl }) {
   const destroyCompleted = async () => {
     if (!state) return
     for (const url of await getFilteredTodos(Filter.completed)) {
-      const todo = await repo.find<TodoData>(url).doc()
+      const todo = (await repo.find<TodoData>(url)).doc()
       if (todo.completed) destroy(url)
     }
   }
@@ -89,16 +89,18 @@ export function App({ url }: { url: AutomergeUrl }) {
 
           {/* todos */}
           <section>
-            <ul className="border-y divide-y divide-solid">
-              {state.todos.map(url => (
-                <Todo
-                  key={url}
-                  url={url}
-                  onDestroy={url => destroy(url)}
-                  filter={filter}
-                />
-              ))}
-            </ul>
+            <Suspense fallback={<li>Loading todo items...</li>}>
+              <ul className="border-y divide-y divide-solid">
+                {state.todos.map(url => (
+                  <Todo
+                    key={url}
+                    url={url}
+                    onDestroy={url => destroy(url)}
+                    filter={filter}
+                  />
+                ))}
+              </ul>
+            </Suspense>
           </section>
 
           {/* footer tools */}

diff --git a/examples/react-todo/src/main.tsx b/examples/react-todo/src/main.tsx
@@ -3,7 +3,8 @@ import { BroadcastChannelNetworkAdapter } from "@automerge/automerge-repo-networ
 import { WebSocketClientAdapter } from "@automerge/automerge-repo-network-websocket"
 import { RepoContext } from "@automerge/automerge-repo-react-hooks"
 import { IndexedDBStorageAdapter } from "@automerge/automerge-repo-storage-indexeddb"
-import React from "react"
+import React, { Suspense } from "react"
+import { ErrorBoundary } from "react-error-boundary"
 import ReactDOM from "react-dom/client"
 import { App } from "./App.js"
 import { State } from "./types.js"
@@ -27,7 +28,7 @@ declare global {
 const rootDocUrl = `${document.location.hash.substring(1)}`
 let handle
 if (isValidAutomergeUrl(rootDocUrl)) {
-  handle = repo.find(rootDocUrl)
+  handle = await repo.find(rootDocUrl)
 } else {
   handle = repo.create<State>({ todos: [] })
 }
@@ -38,7 +39,11 @@ window.repo = repo
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <RepoContext.Provider value={repo}>
     <React.StrictMode>
-      <App url={docUrl} />
+      <ErrorBoundary fallback={<div>Something went wrong</div>}>
+        <Suspense fallback={<div>Loading...</div>}>
+          <App url={docUrl} />
+        </Suspense>
+      </ErrorBoundary>
     </React.StrictMode>
   </RepoContext.Provider>
 )
diff --git a/examples/react-todo/tailwind.config.cjs b/examples/react-todo/tailwind.config.cjs
@@ -1,22 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 const colors = require("tailwindcss/colors")
 
-const emoji = "Segoe UI Emoji"
-const mono = "IBM Plex Mono"
-const sans = "IBM Plex Sans"
-const condensed = "IBM Plex Sans Condensed"
-const serif = "IBM Plex Serif"
-
 module.exports = {
   content: ["./**/*.{html,tsx}"],
   theme: {
     extend: {
-      fontFamily: {
-        mono: [mono, emoji, "monospace"],
-        sans: [sans, emoji, "sans-serif"],
-        condensed: [condensed, emoji, "sans-serif"],
-        serif: [serif, emoji, "serif"],
-      },
       zIndex: {},
       colors: {
         primary: colors.blue,

diff --git a/examples/react-use-awareness/package.json b/examples/react-use-awareness/package.json
@@ -1,6 +1,6 @@
 {
   "name": "automerge-use-awareness-example-project",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.22",
   "private": true,
   "repository": "https://github.com/automerge/automerge-repo/tree/master/examples/react-use-awareness",
   "type": "module",
@@ -14,8 +14,8 @@
     "@automerge/automerge-repo-react-hooks": "workspace:*",
     "@automerge/automerge-repo-storage-indexeddb": "workspace:*",
     "eventemitter3": "^5.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
     "react-usestateref": "^1.0.8",
     "uuid": "^9.0.0"
   },

diff --git a/examples/svelte-counter/package.json b/examples/svelte-counter/package.json
@@ -2,7 +2,7 @@
   "name": "@automerge/automerge-repo-demo-counter-svelte",
   "repository": "https://github.com/automerge/automerge-repo/tree/master/examples/svelte-counter",
   "private": true,
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.22",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/examples/sync-server/index.js b/examples/sync-server/index.js
@@ -5,8 +5,35 @@ import { WebSocketServer } from "ws"
 import { Repo } from "@automerge/automerge-repo"
 import { WebSocketServerAdapter } from "@automerge/automerge-repo-network-websocket"
 import { NodeFSStorageAdapter } from "@automerge/automerge-repo-storage-nodefs"
+import { default as Prometheus } from "prom-client"
 import os from "os"
 
+const registry = new Prometheus.Registry()
+Prometheus.collectDefaultMetrics({ register: registry })
+
+const buckets = Prometheus.linearBuckets(0, 1000, 60)
+
+const metrics = {
+  docLoaded: new Prometheus.Histogram({
+    name: "automerge_repo_doc_loaded_duration_millis",
+    help: "Duration of loading a document",
+    buckets,
+    registers: [registry],
+  }),
+  receiveSyncMessage: new Prometheus.Histogram({
+    name: "automerge_repo_receive_sync_message_duration_millis",
+    help: "Duration of receiving a sync message",
+    buckets,
+    registers: [registry],
+  }),
+  numOps: new Prometheus.Histogram({
+    name: "automerge_repo_num_ops",
+    help: "Number of operations in a document",
+    buckets: Prometheus.exponentialBuckets(1, 2, 20),
+    registers: [registry],
+  }),
+}
+
 export class Server {
   /** @type WebSocketServer */
   #socket
@@ -45,12 +72,25 @@ export class Server {
     }
     const serverRepo = new Repo(config)
 
+    // Observe metrics for prometheus and also log the events so log aggregators like loki can pick them up
+    serverRepo.on("doc-metrics", (event) => {
+      console.log(JSON.stringify(event))
+      metrics.numOps.observe(event.numOps)
+      if (event.type === "doc-loaded") {
+        metrics.docLoaded.observe(event.durationMillis)
+      } else if (event.type === "receive-sync-message") {
+        metrics.receiveSyncMessage.observe(event.durationMillis)
+      }
+    })
+
     app.get("/", (req, res) => {
       res.send(`👍 @automerge/example-sync-server is running`)
     })
 
-    app.get("/metrics", (req, res) => {
-      res.json(serverRepo.metrics())
+    // In a real server this endpoint would be authenticated or not event part of the same express app
+    app.get("/prometheus_metrics", async (req, res) => {
+      res.set("Content-Type", registry.contentType)
+      res.end(await registry.metrics())
     })
 
     this.#server = app.listen(PORT, () => {

diff --git a/examples/sync-server/package.json b/examples/sync-server/package.json
@@ -2,7 +2,7 @@
   "name": "@automerge/example-sync-server",
   "repository": "https://github.com/automerge/automerge-repo/tree/master/examples/sync-server",
   "private": true,
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.22",
   "main": "index.js",
   "license": "MIT",
   "type": "module",
@@ -15,6 +15,7 @@
     "@automerge/automerge-repo-network-websocket": "workspace:*",
     "@automerge/automerge-repo-storage-nodefs": "workspace:*",
     "express": "^4.18.1",
+    "prom-client": "^15.1.3",
     "ws": "^8.7.0"
   },
   "devDependencies": {

diff --git a/lerna.json b/lerna.json
@@ -1,5 +1,5 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
   "npmClient": "pnpm",
-  "version": "2.0.0-alpha.11"
+  "version": "2.0.0-alpha.22"
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@automerge/automerge-repo-monorepo",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.22",
   "description": "Automerge Repo monorepo",
   "main": "packages/automerge-repo/dist/index.js",
   "repository": "https://github.com/automerge/automerge-repo",
@@ -26,7 +26,7 @@
     "watch": "pnpm run --parallel --stream -r watch "
   },
   "engines": {
-    "node": ">= 18.x"
+    "node": ">=18.2.0 <22.0.0"
   },
   "packageManager": "pnpm@9.7.0",
   "prettier": {
@@ -46,9 +46,9 @@
     "@types/ws": "^8.5.10",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
-    "@vitejs/plugin-react": "^4.3.1",
-    "@vitest/coverage-v8": "^1.4.0",
-    "@vitest/ui": "^1.4.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^3.0.3",
+    "@vitest/ui": "^3.0.3",
     "c8": "^7.14.0",
     "cross-env": "^7.0.3",
     "dev-null-cli": "^2.0.0",
@@ -68,8 +68,8 @@
     "ts-node": "^10.9.2",
     "typedoc": "^0.25.12",
     "typescript": "^5.4.2",
-    "vite": "^5.2.0",
-    "vite-plugin-wasm": "^3.3.0",
-    "vitest": "^1.4.0"
+    "vite": "^6.0.11",
+    "vite-plugin-wasm": "^3.4.1",
+    "vitest": "^3.0.4"
   }
 }
diff --git a/packages/automerge-repo-network-broadcastchannel/package.json b/packages/automerge-repo-network-broadcastchannel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@automerge/automerge-repo-network-broadcastchannel",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.22",
   "description": "BroadcastChannel network adapter for Automerge Repo",
   "repository": "https://github.com/automerge/automerge-repo/tree/master/packages/automerge-repo-network-broadcastchannel",
   "author": "Peter van Hardenberg <pvh@pvh.ca>",

diff --git a/packages/automerge-repo-network-broadcastchannel/src/index.ts b/packages/automerge-repo-network-broadcastchannel/src/index.ts
@@ -107,7 +107,12 @@ export class BroadcastChannelNetworkAdapter extends NetworkAdapter {
             if (!("data" in message)) {
               this.emit("message", message)
             } else {
-              const data = message.data as ArrayBufferLike
+              if (!message.data) {
+                throw new Error(
+                  "We got a message without data, we can't send this."
+                )
+              }
+              const data = message.data
               this.emit("message", {
                 ...message,
                 data: new Uint8Array(data),

diff --git a/packages/automerge-repo-network-messagechannel/package.json b/packages/automerge-repo-network-messagechannel/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@automerge/automerge-repo-network-messagechannel",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.22",
   "description": "MessageChannel network adapter for Automerge Repo",
   "repository": "https://github.com/automerge/automerge-repo/tree/master/packages/automerge-repo-network-messagechannel",
   "author": "Peter van Hardenberg <pvh@pvh.ca>",

diff --git a/packages/automerge-repo-network-websocket/package.json b/packages/automerge-repo-network-websocket/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@automerge/automerge-repo-network-websocket",
-  "version": "2.0.0-alpha.11",
+  "version": "2.0.0-alpha.22",
   "description": "isomorphic node/browser Websocket network adapter for Automerge Repo",
   "repository": "https://github.com/automerge/automerge-repo/tree/master/packages/automerge-repo-network-websocket",
   "author": "Peter van Hardenberg <pvh@pvh.ca>",

diff --git a/packages/automerge-repo-network-websocket/src/WebSocketServerAdapter.ts b/packages/automerge-repo-network-websocket/src/WebSocketServerAdapter.ts
@@ -123,7 +123,14 @@ export class WebSocketServerAdapter extends NetworkAdapter {
   }
 
   receiveMessage(messageBytes: Uint8Array, socket: WebSocket) {
-    const message: FromClientMessage = decode(messageBytes)
+    let message: FromClientMessage
+    try {
+      message = decode(messageBytes)
+    } catch (e) {
+      log("invalid message received, closing connection")
+      socket.close()
+      return
+    }
 
     const { type, senderId } = message