Move more logic into sync-client

frontend/obsidian-plugin/package.json

@@ -6,7 +6,7 @@
     "scripts": {
         "dev": "webpack watch --mode development",
         "build": "webpack --mode production",
-        "test": "tsx --test src/**/*.test.ts",
+        "test": "echo \"no tests defined\" && exit 0",
         "version": "node version-bump.mjs"
     },
     "keywords": [],
@@ -35,4 +35,4 @@
         "webpack": "^5.99.9",
         "webpack-cli": "^6.0.1"
     }
-}
+}

frontend/obsidian-plugin/src/obsidian-file-system.ts

@@ -1,7 +1,10 @@
 import type { Stat, Vault, Workspace } from "obsidian";
 import { MarkdownView, normalizePath } from "obsidian";
-import type { FileSystemOperations, RelativePath } from "sync-client";
+import {
-import { positionToLineAndColumn } from "./utils/position-to-line-and-column";
+	utils,
+	type FileSystemOperations,
+	type RelativePath
+} from "sync-client";
 import { getSelectionsFromEditor } from "./views/cursors/get-selections-from-editor";
 import type { TextWithCursors, CursorPosition } from "reconcile-text";
 
@@ -105,10 +108,10 @@ export class ObsidianFileSystemOperations implements FileSystemOperations {
 				const from = result.cursors[2 * i];
 				const to = result.cursors[2 * i + 1];
 				const { line: fromLine, column: fromColumn } =
-					positionToLineAndColumn(result.text, from.position);
+					utils.positionToLineAndColumn(result.text, from.position);
 
 				const { line: toLine, column: toColumn } =
-					positionToLineAndColumn(result.text, to.position);
+					utils.positionToLineAndColumn(result.text, to.position);
 
 				selections.push({
 					anchor: { line: fromLine, ch: fromColumn },

frontend/obsidian-plugin/src/utils/sleep.ts

@@ -1,3 +0,0 @@
-export async function sleep(ms: number): Promise<void> {
-	return new Promise((resolve) => setTimeout(resolve, ms));
-}

frontend/obsidian-plugin/src/vault-link-plugin.ts

@@ -11,10 +11,15 @@ import { HistoryView } from "./views/history/history-view";
 import { StatusBar } from "./views/status-bar/status-bar";
 import { LogsView } from "./views/logs/logs-view";
 import { StatusDescription } from "./views/status-description/status-description";
-import { SyncClient, rateLimit, DEFAULT_SETTINGS, Logger } from "sync-client";
+import {
+	SyncClient,
+	rateLimit,
+	DEFAULT_SETTINGS,
+	Logger,
+	debugging
+} from "sync-client";
 import { ObsidianFileSystemOperations } from "./obsidian-file-system";
 import { SyncSettingsTab } from "./views/settings/settings-tab";
-import { logToConsole } from "./utils/log-to-console";
 import { EditorStatusDisplayManager } from "./views/editor-status-display-manager/editor-status-display-manager";
 import { remoteCursorsTheme } from "./views/cursors/remote-cursor-theme";
 import {
@@ -22,8 +27,6 @@ import {
 	RemoteCursorsPluginValue
 } from "./views/cursors/remote-cursors-plugin";
 import { LocalCursorUpdateListener } from "./views/cursors/local-cursor-update-listener";
-import { slowFetchFactory } from "./debugging/slow-fetch-factory";
-import { flakyWebSocketFactory } from "./debugging/flaky-websocket-factory";
 import { renderCursorsInFileExplorer } from "./views/cursors/file-explorer";
 
 const MIN_WAIT_BETWEEN_UPDATES_IN_MS = 250;
@@ -49,8 +52,8 @@ export default class VaultLinkPlugin extends Plugin {
 
 		const debugOptions = isDebugBuild
 			? {
-					fetch: slowFetchFactory(1),
+					fetch: debugging.slowFetchFactory(1),
-					webSocket: flakyWebSocketFactory(1, new Logger())
+					webSocket: debugging.slowWebSocketFactory(1, new Logger())
 				}
 			: {};
 
@@ -67,7 +70,9 @@ export default class VaultLinkPlugin extends Plugin {
 			...debugOptions
 		});
 
-		logToConsole(this.client);
+		if (isDebugBuild) {
+			debugging.logToConsole(this.client);
+		}
 
 		const statusDescription = new StatusDescription(this.client);
 

frontend/obsidian-plugin/src/views/cursors/file-explorer.scss

@@ -7,7 +7,7 @@
     span {
         border-radius: var(--radius-l);
         padding: 0 var(--size-4-1);
-        border-width: 1px;
+        border-width: 1.4px;
         border-style: solid;
         font-size: var(--font-smallest);
         font-style: italic;

frontend/obsidian-plugin/src/views/cursors/file-explorer.ts

@@ -1,8 +1,11 @@
 import "./file-explorer.scss";
 
 import type { App, View } from "obsidian";
-import { getRandomColor } from "src/utils/get-random-color";
+import {
-import type { MaybeOutdatedClientCursors, RelativePath } from "sync-client";
+	utils,
+	type MaybeOutdatedClientCursors,
+	type RelativePath
+} from "sync-client";
 
 const REMOTE_USER_CONTAINER_CLASS = "remote-users";
 
@@ -36,7 +39,7 @@ export function renderCursorsInFileExplorer(
 								createSpan({
 									text: cursor.userName,
 									attr: {
-										style: `border-color: ${getRandomColor(cursor.userName)}`
+										style: `border-color: ${utils.getRandomColor(cursor.userName)}`
 									}
 								})
 							);

frontend/obsidian-plugin/src/views/cursors/get-selections-from-editor.ts

@@ -1,5 +1,5 @@
 import type { Editor } from "obsidian";
-import { lineAndColumnToPosition } from "../../utils/line-and-column-to-position";
+import { utils } from "sync-client";
 
 export interface Selection {
 	id: number;
@@ -11,7 +11,7 @@ export function getSelectionsFromEditor(editor: Editor): Selection[] {
 	const text = editor.getValue();
 	return editor.listSelections().map(({ anchor, head }, i) => ({
 		id: i,
-		start: lineAndColumnToPosition(text, anchor.line, anchor.ch),
+		start: utils.lineAndColumnToPosition(text, anchor.line, anchor.ch),
-		end: lineAndColumnToPosition(text, head.line, head.ch)
+		end: utils.lineAndColumnToPosition(text, head.line, head.ch)
 	}));
 }

frontend/obsidian-plugin/src/views/cursors/remote-cursors-plugin.ts

@@ -9,12 +9,15 @@ import type {
 	ViewUpdate
 } from "@codemirror/view";
 import { RemoteCursorWidget } from "./remote-cursor-widget";
-import type { CursorSpan, MaybeOutdatedClientCursors } from "sync-client";
+import {
+	utils,
+	type CursorSpan,
+	type MaybeOutdatedClientCursors
+} from "sync-client";
 import type { App } from "obsidian";
 import { MarkdownView } from "obsidian";
 
 import { StateEffect } from "@codemirror/state";
-import { getRandomColor } from "src/utils/get-random-color";
 import type { SpanWithHistory } from "reconcile-text";
 import { reconcileWithHistory } from "reconcile-text";
 
@@ -155,7 +158,7 @@ export class RemoteCursorsPluginValue implements PluginValue {
 
 		RemoteCursorsPluginValue.cursors.forEach(
 			({ name, span: { start, end } }) => {
-				const color = getRandomColor(name);
+				const color = utils.getRandomColor(name);
 				const startLine = update.view.state.doc.lineAt(start);
 				const endLine = update.view.state.doc.lineAt(end);
 

frontend/sync-client/src/debugging/log-to-console.ts

@@ -1,5 +1,6 @@
-import type { LogLine, SyncClient } from "sync-client";
+import type { SyncClient } from "../sync-client";
-import { LogLevel } from "sync-client";
+import type { LogLine } from "../tracing/logger";
+import { LogLevel } from "../tracing/logger";
 
 export function logToConsole(client: SyncClient): void {
 	client.logger.addOnMessageListener((logLine: LogLine) => {

frontend/sync-client/src/debugging/slow-fetch-factory.ts

@@ -1,3 +1,5 @@
+import { sleep } from "../utils/sleep";
+
 export const slowFetchFactory =
 	(jitterScaleInSeconds: number) =>
 	async (

frontend/sync-client/src/debugging/slow-web-socket-factory.ts

@@ -1,7 +1,8 @@
-import type { Logger } from "sync-client";
+import { sleep } from "../utils/sleep";
-import { helpers } from "sync-client";
+import { Locks } from "../utils/locks";
+import type { Logger } from "../tracing/logger";
 
-export function flakyWebSocketFactory(
+export function slowWebSocketFactory(
 	jitterScaleInSeconds: number,
 	logger: Logger
 ): typeof WebSocket {
@@ -10,7 +11,7 @@ export function flakyWebSocketFactory(
 		private static readonly RECEIVE_KEY = "websocket-receive";
 		private static readonly SEND_KEY = "websocket-send";
 
-		private readonly locks = new helpers.Locks(logger);
+		private readonly locks = new Locks(logger);
 
 		public set onopen(callback: (event: Event) => void) {
 			super.onopen = async (event: Event): Promise<void> => {

frontend/sync-client/src/index.ts

@@ -1,3 +1,10 @@
+import { logToConsole } from "./debugging/log-to-console";
+import { slowFetchFactory } from "./debugging/slow-fetch-factory";
+import { slowWebSocketFactory } from "./debugging/slow-web-socket-factory";
+import { getRandomColor } from "./utils/get-random-color";
+import { lineAndColumnToPosition } from "./utils/line-and-column-to-position";
+import { positionToLineAndColumn } from "./utils/position-to-line-and-column";
+
 export {
 	SyncType,
 	SyncStatus,
@@ -22,7 +29,14 @@ export type { MaybeOutdatedClientCursors } from "./types/maybe-outdated-client-c
 export { DocumentSyncStatus } from "./types/document-sync-status";
 export { SyncClient } from "./sync-client";
 
-import { Locks } from "./utils/locks";
+export const debugging = {
-export const helpers = {
+	slowFetchFactory,
-	Locks
+	slowWebSocketFactory,
+	logToConsole
+};
+
+export const utils = {
+	getRandomColor,
+	positionToLineAndColumn,
+	lineAndColumnToPosition
 };

frontend/sync-client/src/utils/get-random-color.ts

@@ -5,5 +5,5 @@ export function getRandomColor(name: string): string {
 		hash |= 0; // Convert to 32bit integer
 	}
 	const normalised = hash / 0x7fffffff;
-	return `hsl(${Math.abs(normalised * 360)}, 55%, 55%)`; // HSL color
+	return `oklch(0.58 0.15 ${Math.round(Math.abs(normalised * 360))})`;
 }

frontend/test-client/src/agent/mock-agent.ts

@@ -2,12 +2,10 @@ import { choose } from "../utils/choose";
 import { v4 as uuidv4 } from "uuid";
 import { assert } from "../utils/assert";
 import type { RelativePath, SyncSettings } from "sync-client";
-import { Logger, LogLevel } from "sync-client";
+import { debugging, Logger, LogLevel } from "sync-client";
 import { MockClient } from "./mock-client";
 import { sleep } from "../utils/sleep";
 import type { LogLine } from "sync-client/dist/types/tracing/logger";
-import { flakyFetchFactory } from "../utils/flaky-fetch";
-import { flakyWebSocketFactory } from "../utils/flaky-websocket-factory";
 
 export class MockAgent extends MockClient {
 	private readonly writtenContents: string[] = [];
@@ -28,8 +26,8 @@ export class MockAgent extends MockClient {
 
 	public async init(): Promise<void> {
 		await super.init(
-			flakyFetchFactory(this.jitterScaleInSeconds),
+			debugging.slowFetchFactory(this.jitterScaleInSeconds),
-			flakyWebSocketFactory(
+			debugging.slowWebSocketFactory(
 				this.jitterScaleInSeconds,
 				new Logger() // this logger isn't wired anywhere, so messages to it will be ignored
 			)

frontend/test-client/src/utils/flaky-fetch.ts

@@ -1,20 +0,0 @@
-import { sleep } from "./sleep";
-
-export const flakyFetchFactory =
-	(jitterScaleInSeconds: number) =>
-	async (
-		input: string | URL | globalThis.Request,
-		init?: RequestInit
-	): Promise<Response> => {
-		if (jitterScaleInSeconds > 0) {
-			await sleep(Math.random() * jitterScaleInSeconds * 1000);
-		}
-
-		const response = await fetch(input, init);
-
-		if (jitterScaleInSeconds > 0) {
-			await sleep(Math.random() * jitterScaleInSeconds * 1000);
-		}
-
-		return response;
-	};

frontend/test-client/src/utils/flaky-websocket-factory.ts

@@ -1,82 +0,0 @@
-import type { Logger } from "sync-client";
-import { helpers } from "sync-client";
-import { sleep } from "./sleep";
-
-export function flakyWebSocketFactory(
-	jitterScaleInSeconds: number,
-	logger: Logger
-): typeof WebSocket {
-	// eslint-disable-next-line
-	return class FlakyWebSocket extends WebSocket {
-		private static readonly RECEIVE_KEY = "websocket-receive";
-		private static readonly SEND_KEY = "websocket-send";
-
-		private readonly locks = new helpers.Locks(logger);
-
-		public set onopen(callback: (event: Event) => void) {
-			super.onopen = async (event: Event): Promise<void> => {
-				if (jitterScaleInSeconds > 0) {
-					await sleep(Math.random() * jitterScaleInSeconds * 1000);
-				}
-
-				callback(event);
-			};
-		}
-
-		public set onmessage(callback: (event: MessageEvent) => void) {
-			super.onmessage = async (event: MessageEvent): Promise<void> => {
-				return this.locks.withLock(
-					FlakyWebSocket.RECEIVE_KEY,
-					async () => {
-						if (jitterScaleInSeconds > 0) {
-							await sleep(
-								Math.random() * jitterScaleInSeconds * 1000
-							);
-						}
-
-						callback(event);
-					}
-				);
-			};
-		}
-
-		public set onclose(callback: (event: CloseEvent) => void) {
-			super.onclose = async (event: CloseEvent): Promise<void> => {
-				if (jitterScaleInSeconds > 0) {
-					await sleep(Math.random() * jitterScaleInSeconds * 1000);
-				}
-				callback(event);
-			};
-		}
-
-		public set onerror(callback: (event: Event) => void) {
-			super.onerror = async (event: Event): Promise<void> => {
-				if (jitterScaleInSeconds > 0) {
-					await sleep(Math.random() * jitterScaleInSeconds * 1000);
-				}
-				callback(event);
-			};
-		}
-
-		public send(
-			data: string | ArrayBufferLike | Blob | ArrayBufferView
-		): void {
-			this.waitingSend(data).catch((error: unknown) => {
-				logger.error(`Error sending WebSocket message: ${error}`);
-			});
-		}
-
-		private async waitingSend(
-			data: string | ArrayBufferLike | Blob | ArrayBufferView
-		): Promise<void> {
-			// maintain message order
-			return this.locks.withLock(FlakyWebSocket.SEND_KEY, async () => {
-				if (jitterScaleInSeconds > 0) {
-					await sleep(Math.random() * jitterScaleInSeconds * 1000);
-				}
-
-				super.send(data);
-			});
-		}
-	} as unknown as typeof WebSocket;
-}