Move more logic into sync-client

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

@@ -0,0 +1,24 @@
+import type { SyncClient } 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) => {
+		const formatted = `${logLine.timestamp.toISOString()} ${logLine.level} ${logLine.message}`;
+
+		switch (logLine.level) {
+			case LogLevel.ERROR:
+				console.error(formatted);
+				break;
+			case LogLevel.WARNING:
+				console.warn(formatted);
+				break;
+			case LogLevel.INFO:
+				console.info(formatted);
+				break;
+			case LogLevel.DEBUG:
+				console.debug(formatted);
+				break;
+		}
+	});
+}

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

@@ -0,0 +1,16 @@
+import { sleep } from "../utils/sleep";
+
+export const slowFetchFactory =
+	(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);
+
+		return response;
+	};

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

@@ -0,0 +1,81 @@
+import { sleep } from "../utils/sleep";
+import { Locks } from "../utils/locks";
+import type { Logger } from "../tracing/logger";
+
+export function slowWebSocketFactory(
+	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 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> => {
+				await 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
+			await this.locks.withLock(FlakyWebSocket.SEND_KEY, async () => {
+				if (jitterScaleInSeconds > 0) {
+					await sleep(Math.random() * jitterScaleInSeconds * 1000);
+				}
+				super.send(data);
+			});
+		}
+	} as unknown as typeof WebSocket;
+}

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 helpers = {
-	Locks
+export const debugging = {
+	slowFetchFactory,
+	slowWebSocketFactory,
+	logToConsole
+};
+
+export const utils = {
+	getRandomColor,
+	positionToLineAndColumn,
+	lineAndColumnToPosition
 };

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

@@ -0,0 +1,9 @@
+export function getRandomColor(name: string): string {
+	let hash = 0;
+	for (let i = 0; i < name.length; i++) {
+		hash = (hash << 5) - hash + name.charCodeAt(i);
+		hash |= 0; // Convert to 32bit integer
+	}
+	const normalised = hash / 0x7fffffff;
+	return `oklch(0.58 0.15 ${Math.round(Math.abs(normalised * 360))})`;
+}

frontend/sync-client/src/utils/line-and-column-to-position.test.ts

@@ -0,0 +1,44 @@
+import { describe, it } from "node:test";
+import assert from "node:assert";
+import { lineAndColumnToPosition } from "./line-and-column-to-position";
+
+describe("lineAndColumnToPosition", () => {
+	it("should return the correct position for the first line", () => {
+		const text = "Hello\nWorld";
+		const position = lineAndColumnToPosition(text, 0, 3);
+		assert.strictEqual(position, 3);
+	});
+
+	it("should return the correct position for the second line", () => {
+		const text = "Hello\nWorld";
+		const position = lineAndColumnToPosition(text, 1, 2);
+		assert.strictEqual(position, 8);
+	});
+
+	it("should return the correct position for an empty string", () => {
+		const text = "";
+		const position = lineAndColumnToPosition(text, 0, 0);
+		assert.strictEqual(position, 0);
+	});
+
+	it("with carrige return", () => {
+		assert.strictEqual(lineAndColumnToPosition("a\nb", 1, 1), 3);
+		assert.strictEqual(lineAndColumnToPosition("a\r\nb", 1, 1), 3);
+	});
+
+	it("should handle multi-line strings with varying lengths", () => {
+		const text = "Line1\nLongerLine2\nShort3";
+		const position = lineAndColumnToPosition(text, 2, 4);
+		assert.strictEqual(position, 22);
+	});
+
+	it("should throw an error if the line number is out of range", () => {
+		const text = "Line1\nLine2";
+		assert.throws(() => lineAndColumnToPosition(text, 3, 0));
+	});
+
+	it("should throw an error if the column number is out of range", () => {
+		const text = "Line1\nLine2";
+		assert.throws(() => lineAndColumnToPosition(text, 1, 10));
+	});
+});

frontend/sync-client/src/utils/line-and-column-to-position.ts

@@ -0,0 +1,34 @@
+/**
+ * Converts line and column coordinates to an absolute character position in a text string.
+ *
+ * @param line - The zero-based line number
+ * @param column - The zero-based column number
+ * @param text - The text string to calculate position in
+ * @returns The absolute character position (zero-based index) in the text string
+ * @throws Error if line number is out of range
+ * @throws Error if column number is out of range
+ */
+export function lineAndColumnToPosition(
+	text: string,
+	line: number,
+	column: number
+): number {
+	const lines = text.replace("\r", "").split("\n");
+
+	if (line >= lines.length) {
+		throw new Error(`Line number ${line} is out of range.`);
+	}
+
+	if (column > lines[line].length) {
+		throw new Error(`Column number ${column} is out of range.`);
+	}
+
+	let position = 0;
+	for (let i = 0; i < line; i++) {
+		position += lines[i].length + 1;
+	}
+
+	position += column;
+
+	return position;
+}

frontend/sync-client/src/utils/position-to-line-and-column.test.ts

@@ -0,0 +1,66 @@
+import { describe, test } from "node:test";
+import assert from "node:assert";
+import { positionToLineAndColumn } from "./position-to-line-and-column";
+
+describe("positionToLineAndColumn", () => {
+	test("converts position to line and column in multi-line text", () => {
+		const text = "ab\ncd\n";
+		assert.deepStrictEqual(positionToLineAndColumn(text, 0), {
+			line: 0,
+			column: 0
+		});
+		assert.deepStrictEqual(positionToLineAndColumn(text, 1), {
+			line: 0,
+			column: 1
+		});
+		assert.deepStrictEqual(positionToLineAndColumn(text, 2), {
+			line: 0,
+			column: 2
+		});
+		assert.deepStrictEqual(positionToLineAndColumn(text, 3), {
+			line: 1,
+			column: 0
+		});
+		assert.deepStrictEqual(positionToLineAndColumn(text, 4), {
+			line: 1,
+			column: 1
+		});
+		assert.deepStrictEqual(positionToLineAndColumn(text, 6), {
+			line: 2,
+			column: 0
+		});
+	});
+
+	test("with carrige returns", () => {
+		assert.deepStrictEqual(positionToLineAndColumn("a\nb", 3), {
+			line: 1,
+			column: 1
+		});
+
+		assert.deepStrictEqual(positionToLineAndColumn("a\r\nb", 3), {
+			line: 1,
+			column: 1
+		});
+	});
+
+	test("handles empty input", () => {
+		assert.deepStrictEqual(positionToLineAndColumn("", 0), {
+			line: 0,
+			column: 0
+		});
+	});
+
+	test("handles positions at the end of text", () => {
+		const text = "End";
+		assert.deepStrictEqual(positionToLineAndColumn(text, 3), {
+			line: 0,
+			column: 3
+		});
+	});
+
+	test("throws error for position out of range", () => {
+		const text = "Short text";
+		assert.throws(() => positionToLineAndColumn(text, 15));
+		assert.throws(() => positionToLineAndColumn(text, -1));
+	});
+});

frontend/sync-client/src/utils/position-to-line-and-column.ts

@@ -0,0 +1,36 @@
+/**
+ * Converts a character position in text to line and column numbers.
+ *
+ * @param text The text content to analyze
+ * @param position The character position to convert
+ * @returns An object containing line and column numbers
+ * @throws Will throw an error if the position is negative or exceeds the text length
+ */
+export function positionToLineAndColumn(
+	text: string,
+	position: number
+): { line: number; column: number } {
+	if (position < 0) {
+		throw new Error("Position cannot be negative");
+	}
+
+	text = text.replace("\r", "");
+
+	if (
+		position >
+		text.length + 1
+		// +1 to account for the cursor being after last character
+	) {
+		throw new Error(
+			`Position ${position} exceeds text length ${text.length}`
+		);
+	}
+
+	const textUpToPosition = text.substring(0, position);
+	const lines = textUpToPosition.split("\n");
+
+	const line = lines.length - 1;
+	const column = lines[lines.length - 1].length;
+
+	return { line, column };
+}