chore(refactor): sync service with new connection

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

Author: max-nextcloud

cypress/support/sessions.js

@@ -6,12 +6,13 @@
 import axios from '@nextcloud/axios'
 import { SessionConnection } from '../../src/services/SessionConnection.js'
 import { open, close } from '../../src/apis/Connect.ts'
+import { push } from '../../src/apis/Sync.ts'
 
 const url = Cypress.config('baseUrl').replace(/\/index.php\/?$/g, '')
 
 Cypress.Commands.add('createTextSession', async (fileId, options = {}) => {
-	const { data } = await open({ fileId, token: options.shareToken, ...options })
-	return new SessionConnection({ data }, options)
+	const { connection, data } = await open({ fileId, token: options.shareToken, ...options })
+	return new SessionConnection({ data }, connection)
 })
 
 Cypress.Commands.add('destroySession', async (sessionConnection) => {
@@ -27,16 +28,20 @@ Cypress.Commands.add('failToCreateTextSession', (fileId, baseVersionEtag = null,
 		}, (err) => err.response)
 })
 
-Cypress.Commands.add('pushSteps', ({ connection, steps, version, awareness = '' }) => {
-	return connection.push({ steps, version, awareness })
-		.then(response => response.data)
+Cypress.Commands.add('pushSteps', ({ connection: sessionConnection, steps, version, awareness = '' }) => {
+	return push(
+		sessionConnection.connection,
+		{ steps, version, awareness }
+	).then(response => response.data)
 })
 
-Cypress.Commands.add('failToPushSteps', ({ connection, steps, version, awareness = '' }) => {
-	return connection.push({ steps, version, awareness })
-		.then((response) => {
-			throw new Error('Expected request to fail - but it succeeded!')
-		}, (err) => err.response)
+Cypress.Commands.add('failToPushSteps', ({ connection: sessionConnection, steps, version, awareness = '' }) => {
+	return push(
+		sessionConnection.connection,
+		{ steps, version, awareness }
+	).then((_response) => {
+		throw new Error('Expected request to fail - but it succeeded!')
+	}, (err) => err.response)
 })
 
 Cypress.Commands.add('syncSteps', (connection, options = { version: 0 }) => {

src/apis/Connect.ts

@@ -35,6 +35,9 @@ export async function open(
 		documentId: document.id,
 		sessionId: session.id,
 		sessionToken: session.token,
+		baseVersionEtag: document.baseVersionEtag,
+		filePath: params.filePath,
+		shareToken: params.token,
 	}
 	return { connection, data: response.data }
 }
@@ -46,6 +49,10 @@ export async function open(
 export async function close(connection: Connection) {
 	const id = connection.documentId
 	const url = generateUrl(`/apps/text/session/${id}/close`)
-	const response = await axios.post(url, connection)
+	const response = await axios.post(url, {
+		documentId: connection.documentId,
+		sessionId: connection.sessionId,
+		sessionToken: connection.sessionToken,
+	})
 	return response.data
 }

src/apis/Mention.ts

@@ -18,7 +18,7 @@ import { unref, type ShallowRef } from 'vue'
 export function emitMention(
 	mention: string,
 	scope: object,
-	{ connection }: { connection: ShallowRef<Connection> },
+	{ connection }: { connection: ShallowRef<Connection> | Connection },
 ): Promise<void> {
 	// TODO: Require actual connection - handle disconnected state early on
 	const con = unref(connection)
@@ -27,8 +27,11 @@ export function emitMention(
 		console.warn(err.message, { err, mention })
 		return Promise.resolve()
 	}
-	return axios.put(generateUrl(`apps/text/session/${con.documentId}/mention`), {
-		...con,
+	const url = generateUrl(`apps/text/session/${con.documentId}/mention`)
+	return axios.put(url, {
+		documentId: con.documentId,
+		sessionId: con.sessionId,
+		sessionToken: con.sessionToken,
 		mention,
 		scope,
 	})

src/components/Editor.vue

@@ -246,7 +246,7 @@ export default defineComponent({
 		]
 		const { connection, openConnection, baseVersionEtag } =
 			provideConnection(props)
-		const { syncService } = provideSyncService(connection, openConnection, props)
+		const { syncService } = provideSyncService(connection, openConnection)
 		const editor = isRichEditor
 			? createRichEditor({
 					connection,

src/composables/useConnection.ts

@@ -11,6 +11,9 @@ export interface Connection {
 	documentId: number
 	sessionId: number
 	sessionToken: string
+	baseVersionEtag: string
+	filePath: string
+	shareToken?: string
 }
 
 export interface InitialData {
@@ -70,14 +73,24 @@ export const useConnection = () => {
 /**
  * Get the connection and additional data from the initial session if available.
  * @param props Props of the editor component
- * @param props.initialSession InitialSession to use.
+ * @param props.relativePath Relative path to the file.
+ * @param props.initialSession Initial session handed to the editor in direct editing
+ * @param props.shareToken Share token of the file.
  */
-function openInitialSession(props: { initialSession?: InitialData }) {
+function openInitialSession(props: {
+	relativePath: string
+	initialSession?: InitialData
+	shareToken?: string
+}) {
 	if (props.initialSession) {
+		const { document, session } = props.initialSession
 		const connection = {
-			documentId: props.initialSession.document.id,
-			sessionId: props.initialSession.session.id,
-			sessionToken: props.initialSession.session.token,
+			documentId: document.id,
+			sessionId: session.id,
+			sessionToken: session.token,
+			baseVersionEtag: document.baseVersionEtag,
+			filePath: props.relativePath,
+			shareToken: props.shareToken,
 		}
 		return { connection, data: props.initialSession }
 	}

src/composables/useSyncService.ts

@@ -13,20 +13,14 @@ const syncServiceKey = Symbol('text:sync') as InjectionKey<SyncService>
  * Define a sync service and provide it to child components
  * @param connection Connection to the text api.
  * @param openConnection Function to open the connection.
- * @param props Props of the editor component.
- * @param props.shareToken Share token of the file.
- * @param props.relativePath Relative path to the file.
  */
 export function provideSyncService(
 	connection: ShallowRef<Connection>,
 	openConnection: () => Promise<InitialData>,
-	props: { shareToken: string; relativePath: string },
 ) {
 	const syncService = new SyncService({
 		connection,
 		openConnection,
-		shareToken: props.shareToken,
-		filePath: props.relativePath,
 	})
 	provide(syncServiceKey, syncService)
 	return { syncService }

src/services/SessionConnection.js

@@ -24,9 +24,9 @@ export class SessionConnection {
 	#lock
 	#readOnly
 	#hasOwner
-	#options
+	connection
 
-	constructor(response, options) {
+	constructor(response, connection) {
 		const {
 			document,
 			session,
@@ -43,8 +43,8 @@ export class SessionConnection {
 		this.#content = content
 		this.#documentState = documentState
 		this.#hasOwner = hasOwner
-		this.#options = options
-		this.isPublic = !!options.shareToken
+		this.connection = connection
+		this.isPublic = !!connection.shareToken
 		this.closed = false
 	}
 
@@ -82,14 +82,14 @@ export class SessionConnection {
 			documentId: this.#document.id,
 			sessionId: this.#session.id,
 			sessionToken: this.#session.token,
-			token: this.#options.shareToken,
+			token: this.connection.shareToken,
 		}
 	}
 
 	sync({ version }) {
 		return this.#post(this.#url(`session/${this.#document.id}/sync`), {
 			...this.#defaultParams,
-			filePath: this.#options.filePath,
+			filePath: this.connection.filePath,
 			baseVersionEtag: this.#document.baseVersionEtag,
 			version,
 		})
@@ -99,7 +99,7 @@ export class SessionConnection {
 		const url = this.#url(`session/${this.#document.id}/save`)
 		const postData = {
 			...this.#defaultParams,
-			filePath: this.#options.filePath,
+			filePath: this.connection.filePath,
 			baseVersionEtag: this.#document.baseVersionEtag,
 			...data,
 		}
@@ -111,7 +111,7 @@ export class SessionConnection {
 		const url = this.#url(`session/${this.#document.id}/save`)
 		const postData = {
 			...this.#defaultParams,
-			filePath: this.#options.filePath,
+			filePath: this.connection.filePath,
 			baseVersionEtag: this.#document.baseVersionEtag,
 			...data,
 			requestToken: getRequestToken() ?? '',
@@ -123,17 +123,6 @@ export class SessionConnection {
 		return navigator.sendBeacon(url, blob)
 	}
 
-	push({ steps, version, awareness }) {
-		return this.#post(this.#url(`session/${this.#document.id}/push`), {
-			...this.#defaultParams,
-			filePath: this.#options.filePath,
-			baseVersionEtag: this.#document.baseVersionEtag,
-			steps,
-			version,
-			awareness,
-		})
-	}
-
 	// TODO: maybe return a new connection here so connections have immutable state
 	update(guestName) {
 		return this.#post(this.#url(`session/${this.#document.id}/session`), {
@@ -156,7 +145,7 @@ export class SessionConnection {
 			+ '&sessionToken='
 			+ encodeURIComponent(this.#session.token)
 			+ '&token='
-			+ encodeURIComponent(this.#options.shareToken || '')
+			+ encodeURIComponent(this.connection.shareToken || '')
 		return this.#post(url, formData, {
 			headers: {
 				'Content-Type': 'multipart/form-data',

src/services/SyncService.ts

@@ -15,6 +15,7 @@ import { logger } from '../helpers/logger.js'
 import type { ShallowRef } from 'vue'
 import type { InitialData, Connection } from '../composables/useConnection.js'
 import { close } from '../apis/Connect.js'
+import { push } from '../apis/Sync.js'
 
 /**
  * Timeout after which the editor will consider a document without changes being synced as idle
@@ -51,7 +52,7 @@ const ERROR_TYPE = {
 /*
  * Step as what we expect to be returned from the server right now.
  */
-interface Step {
+export interface Step {
 	data: string[]
 	version: number
 	sessionId: number
@@ -109,7 +110,7 @@ export declare type EventTypes = {
 }
 
 class SyncService {
-	#connection: ShallowRef<Connection | undefined>
+	connection: ShallowRef<Connection | undefined>
 	sessionConnection?: SessionConnection
 	version = -1
 	pushError = 0
@@ -120,24 +121,16 @@ class SyncService {
 	#openConnection: () => Promise<InitialData>
 	#lastStepPush = Date.now()
 	#sending = false
-	#filePath?: string
-	#shareToken?: string
 
 	constructor({
 		connection,
 		openConnection,
-		filePath,
-		shareToken,
 	}: {
 		connection: ShallowRef<Connection | undefined>
 		openConnection: () => Promise<InitialData>
-		filePath?: string
-		shareToken?: string
 	}) {
-		this.#connection = connection
+		this.connection = connection
 		this.#openConnection = openConnection
-		this.#filePath = filePath
-		this.#shareToken = shareToken
 	}
 
 	get isReadOnly() {
@@ -152,7 +145,10 @@ class SyncService {
 		return this.sessionConnection?.session.guestName
 	}
 
-	hasActiveConnection(): this is { sessionConnection: SessionConnection } {
+	hasActiveConnection(): this is {
+		sessionConnection: SessionConnection
+		connection: ShallowRef<Connection>
+	} {
 		return !!this.sessionConnection && !this.sessionConnection.isClosed
 	}
 
@@ -165,8 +161,10 @@ class SyncService {
 			// Error was already emitted above
 			return
 		}
-		const options = { shareToken: this.#shareToken, filePath: this.#filePath }
-		this.sessionConnection = new SessionConnection({ data }, options)
+		this.sessionConnection = new SessionConnection({
+			data,
+			connection: this.connection.value,
+		})
 		this.backend = new PollingBackend(this, this.sessionConnection)
 		this.version = this.sessionConnection.docStateVersion
 		this.emit('opened', this.sessionConnection.state)
@@ -226,8 +224,10 @@ class SyncService {
 		if (!this.hasActiveConnection()) {
 			return
 		}
-		return this.sessionConnection
-			.push({ ...sendable, version: this.version })
+		return push(this.connection, {
+			version: this.version,
+			...sendable,
+		})
 			.then((response) => {
 				this.#outbox.clearSentData(sendable)
 				const { steps, documentState } = response.data as {
@@ -350,8 +350,8 @@ class SyncService {
 	async close() {
 		// Make sure to leave no pending requests behind.
 		this.backend?.disconnect()
-		if (this.#connection.value) {
-			close(this.#connection.value)
+		if (this.connection.value) {
+			close(this.connection.value)
 				// Log and ignore possible network issues.
 				.catch((e) => {
 					logger.info('Failed to close connection.', { e })