chore(refactor): handle open data in websocket polyfill

Signed-off-by: Max <max@nextcloud.com>

Author: max-nextcloud

src/helpers/yjs.ts

@@ -7,6 +7,7 @@ import * as decoding from 'lib0/decoding.js'
 import * as encoding from 'lib0/encoding.js'
 import * as syncProtocol from 'y-protocols/sync'
 import * as Y from 'yjs'
+import type { OpenData } from '../apis/connect'
 import type { Step } from '../services/SyncService'
 import { messageSync } from '../services/y-websocket.js'
 import { decodeArrayBuffer, encodeArrayBuffer } from './base64'
@@ -37,6 +38,21 @@ export function applyDocumentState(
 	Y.applyUpdate(ydoc, update, origin)
 }
 
+/**
+ * Create a steps from the open response
+ * i.e. create a sync protocol update message from the document state
+ * and encode it and wrap it in a step data structure.
+ *
+ * @param data - data returned by the open request
+ * @return steps extracted from the open data.
+ */
+export function stepsFromOpenData(data: OpenData): Step[] {
+	if (!data.documentState) {
+		return []
+	}
+	return [documentStateToStep(data.documentState, data.document.lastSavedVersion)]
+}
+
 /**
  * Create a step from a document state
  * i.e. create a sync protocol update message from it

src/services/SyncService.ts

@@ -176,13 +176,6 @@ class SyncService {
 		this.backend = new PollingBackend(this, this.connection.value, data)
 		// Make sure to only emit this once the backend is in place.
 		this.bus.emit('opened', data)
-		// Emit sync after opened, so websocket onmessage comes after onopen.
-		if (data.documentState) {
-			this.#emitDocumentStateStep(
-				data.documentState,
-				data.document.lastSavedVersion,
-			)
-		}
 	}
 
 	startSync() {

src/services/WebSocketPolyfill.ts

@@ -3,8 +3,10 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+import type { OpenData } from '../apis/connect'
 import { decodeArrayBuffer, encodeArrayBuffer } from '../helpers/base64'
 import { logger } from '../helpers/logger.js'
+import { stepsFromOpenData } from '../helpers/yjs'
 import getNotifyBus from './NotifyService'
 import type { Step, SyncService } from './SyncService'
 
@@ -35,10 +37,11 @@ export default function initWebSocketPolyfill(
 			this.#url = url
 			logger.debug('WebSocketPolyfill#constructor', { url, fileId })
 
-			this.#onOpened = () => {
+			this.#onOpened = (data: OpenData) => {
 				if (syncService.hasActiveConnection()) {
 					this.onopen?.()
 				}
+				this.#processSteps(stepsFromOpenData(data))
 			}
 			syncService.bus.on('opened', this.#onOpened)
 
@@ -104,6 +107,7 @@ export default function initWebSocketPolyfill(
 
 		async close() {
 			syncService.bus.off('sync', this.#onSync)
+			syncService.bus.off('opened', this.#onOpened)
 			this.#notifyPushBus?.off('notify_push', this.#onNotifyPush.bind(this))
 			this.onclose?.(new CloseEvent('closing'))
 			logger.debug('Websocket closed')