refactor(frontend): move from Webpack to Vite

Also overhaulds the building and linting for frontend assets.

9 files changed, 288 insertions, 195 deletions

diff --git a/subprojects/frontend/src/xtext/ContentAssistService.ts b/subprojects/frontend/src/xtext/ContentAssistService.ts
index bedd3b5c..dce2a902 100644
--- a/subprojects/frontend/src/xtext/ContentAssistService.ts
+++ b/subprojects/frontend/src/xtext/ContentAssistService.ts
@@ -8,8 +8,9 @@ import type { Transaction } from '@codemirror/state';
 import escapeStringRegexp from 'escape-string-regexp';
 
 import { implicitCompletion } from '../language/props';
-import type { UpdateService } from './UpdateService';
-import { getLogger } from '../utils/logger';
+import getLogger from '../utils/getLogger';
+
+import type UpdateService from './UpdateService';
 import type { ContentAssistEntry } from './xtextServiceResults';
 
 const PROPOSALS_LIMIT = 1000;
@@ -48,10 +49,13 @@ function findToken({ pos, state }: CompletionContext): IFoundToken | null {
   };
 }
 
-function shouldCompleteImplicitly(token: IFoundToken | null, context: CompletionContext): boolean {
-  return token !== null
-    && token.implicitCompletion
-    && context.pos - token.from >= 2;
+function shouldCompleteImplicitly(
+  token: IFoundToken | null,
+  context: CompletionContext,
+): boolean {
+  return (
+    token !== null && token.implicitCompletion && context.pos - token.from >= 2
+  );
 }
 
 function computeSpan(prefix: string, entryCount: number): RegExp {
@@ -78,23 +82,29 @@ function createCompletion(entry: ContentAssistEntry): Completion {
     case 'SNIPPET':
       boost = -90;
       break;
-    default: {
-      // Penalize qualified names (vs available unqualified names).
-      const extraSegments = entry.proposal.match(/::/g)?.length || 0;
-      boost = Math.max(-5 * extraSegments, -50);
-    }
+    default:
+      {
+        // Penalize qualified names (vs available unqualified names).
+        const extraSegments = entry.proposal.match(/::/g)?.length || 0;
+        boost = Math.max(-5 * extraSegments, -50);
+      }
       break;
   }
-  return {
+  const completion: Completion = {
     label: entry.proposal,
-    detail: entry.description,
-    info: entry.documentation,
     type: entry.kind?.toLowerCase(),
     boost,
   };
+  if (entry.documentation !== undefined) {
+    completion.info = entry.documentation;
+  }
+  if (entry.description !== undefined) {
+    completion.detail = entry.description;
+  }
+  return completion;
 }
 
-export class ContentAssistService {
+export default class ContentAssistService {
   private readonly updateService: UpdateService;
 
   private lastCompletion: CompletionResult | null = null;
@@ -117,7 +127,7 @@ export class ContentAssistService {
         options: [],
       };
     }
-    let range: { from: number, to: number };
+    let range: { from: number; to: number };
     let prefix = '';
     if (tokenBefore === null) {
       range = {
@@ -139,17 +149,20 @@ export class ContentAssistService {
       log.trace('Returning cached completion result');
       // Postcondition of `shouldReturnCachedCompletion`: `lastCompletion !== null`
       return {
-        ...this.lastCompletion as CompletionResult,
+        ...(this.lastCompletion as CompletionResult),
         ...range,
       };
     }
     this.lastCompletion = null;
-    const entries = await this.updateService.fetchContentAssist({
-      resource: this.updateService.resourceName,
-      serviceType: 'assist',
-      caretOffset: context.pos,
-      proposalsLimit: PROPOSALS_LIMIT,
-    }, context);
+    const entries = await this.updateService.fetchContentAssist(
+      {
+        resource: this.updateService.resourceName,
+        serviceType: 'assist',
+        caretOffset: context.pos,
+        proposalsLimit: PROPOSALS_LIMIT,
+      },
+      context,
+    );
     if (context.aborted) {
       return {
         ...range,
@@ -175,7 +188,7 @@ export class ContentAssistService {
   }
 
   private shouldReturnCachedCompletion(
-    token: { from: number, to: number, text: string } | null,
+    token: { from: number; to: number; text: string } | null,
   ): boolean {
     if (token === null || this.lastCompletion === null) {
       return false;
@@ -185,11 +198,16 @@ export class ContentAssistService {
     if (!lastTo) {
       return true;
     }
-    const [transformedFrom, transformedTo] = this.mapRangeInclusive(lastFrom, lastTo);
-    return from >= transformedFrom
-      && to <= transformedTo
-      && validFor instanceof RegExp
-      && validFor.exec(text) !== null;
+    const [transformedFrom, transformedTo] = this.mapRangeInclusive(
+      lastFrom,
+      lastTo,
+    );
+    return (
+      from >= transformedFrom &&
+      to <= transformedTo &&
+      validFor instanceof RegExp &&
+      validFor.exec(text) !== null
+    );
   }
 
   private shouldInvalidateCachedCompletion(transaction: Transaction): boolean {
@@ -200,7 +218,10 @@ export class ContentAssistService {
     if (!lastTo) {
       return true;
     }
-    const [transformedFrom, transformedTo] = this.mapRangeInclusive(lastFrom, lastTo);
+    const [transformedFrom, transformedTo] = this.mapRangeInclusive(
+      lastFrom,
+      lastTo,
+    );
     let invalidate = false;
     transaction.changes.iterChangedRanges((fromA, toA) => {
       if (fromA < transformedFrom || toA > transformedTo) {
@@ -210,7 +231,10 @@ export class ContentAssistService {
     return invalidate;
   }
 
-  private mapRangeInclusive(lastFrom: number, lastTo: number): [number, number] {
+  private mapRangeInclusive(
+    lastFrom: number,
+    lastTo: number,
+  ): [number, number] {
     const changes = this.updateService.computeChangesSinceLastUpdate();
     const transformedFrom = changes.mapPos(lastFrom);
     const transformedTo = changes.mapPos(lastTo, 1);
diff --git a/subprojects/frontend/src/xtext/HighlightingService.ts b/subprojects/frontend/src/xtext/HighlightingService.ts
index dfbb4a19..cf618b96 100644
--- a/subprojects/frontend/src/xtext/HighlightingService.ts
+++ b/subprojects/frontend/src/xtext/HighlightingService.ts
@@ -1,9 +1,10 @@
-import type { EditorStore } from '../editor/EditorStore';
+import type EditorStore from '../editor/EditorStore';
 import type { IHighlightRange } from '../editor/semanticHighlighting';
-import type { UpdateService } from './UpdateService';
+
+import type UpdateService from './UpdateService';
 import { highlightingResult } from './xtextServiceResults';
 
-export class HighlightingService {
+export default class HighlightingService {
   private readonly store: EditorStore;
 
   private readonly updateService: UpdateService;
diff --git a/subprojects/frontend/src/xtext/OccurrencesService.ts b/subprojects/frontend/src/xtext/OccurrencesService.ts
index bc865537..21fe8644 100644
--- a/subprojects/frontend/src/xtext/OccurrencesService.ts
+++ b/subprojects/frontend/src/xtext/OccurrencesService.ts
@@ -1,15 +1,16 @@
 import { Transaction } from '@codemirror/state';
 
-import type { EditorStore } from '../editor/EditorStore';
+import type EditorStore from '../editor/EditorStore';
 import type { IOccurrence } from '../editor/findOccurrences';
-import type { UpdateService } from './UpdateService';
-import { getLogger } from '../utils/logger';
-import { Timer } from '../utils/Timer';
-import { XtextWebSocketClient } from './XtextWebSocketClient';
+import Timer from '../utils/Timer';
+import getLogger from '../utils/getLogger';
+
+import type UpdateService from './UpdateService';
+import type XtextWebSocketClient from './XtextWebSocketClient';
 import {
   isConflictResult,
-  occurrencesResult,
-  TextRegion,
+  OccurrencesResult,
+  type TextRegion,
 } from './xtextServiceResults';
 
 const FIND_OCCURRENCES_TIMEOUT_MS = 1000;
@@ -33,7 +34,7 @@ function transformOccurrences(regions: TextRegion[]): IOccurrence[] {
   return occurrences;
 }
 
-export class OccurrencesService {
+export default class OccurrencesService {
   private readonly store: EditorStore;
 
   private readonly webSocketClient: XtextWebSocketClient;
@@ -94,7 +95,7 @@ export class OccurrencesService {
       this.findOccurrencesTimer.schedule();
       return;
     }
-    const parsedOccurrencesResult = occurrencesResult.safeParse(result);
+    const parsedOccurrencesResult = OccurrencesResult.safeParse(result);
     if (!parsedOccurrencesResult.success) {
       log.error(
         'Unexpected occurences result',
@@ -107,14 +108,25 @@ export class OccurrencesService {
     }
     const { stateId, writeRegions, readRegions } = parsedOccurrencesResult.data;
     if (stateId !== this.updateService.xtextStateId) {
-      log.error('Unexpected state id, expected:', this.updateService.xtextStateId, 'got:', stateId);
+      log.error(
+        'Unexpected state id, expected:',
+        this.updateService.xtextStateId,
+        'got:',
+        stateId,
+      );
       this.clearOccurrences();
       return;
     }
     const write = transformOccurrences(writeRegions);
     const read = transformOccurrences(readRegions);
     this.hasOccurrences = write.length > 0 || read.length > 0;
-    log.debug('Found', write.length, 'write and', read.length, 'read occurrences');
+    log.debug(
+      'Found',
+      write.length,
+      'write and',
+      read.length,
+      'read occurrences',
+    );
     this.store.updateOccurrences(write, read);
   }
 
diff --git a/subprojects/frontend/src/xtext/UpdateService.ts b/subprojects/frontend/src/xtext/UpdateService.ts
index e78944a9..2994b11b 100644
--- a/subprojects/frontend/src/xtext/UpdateService.ts
+++ b/subprojects/frontend/src/xtext/UpdateService.ts
@@ -1,22 +1,23 @@
 import {
-  ChangeDesc,
+  type ChangeDesc,
   ChangeSet,
-  ChangeSpec,
+  type ChangeSpec,
   StateEffect,
-  Transaction,
+  type Transaction,
 } from '@codemirror/state';
 import { nanoid } from 'nanoid';
 
-import type { EditorStore } from '../editor/EditorStore';
-import type { XtextWebSocketClient } from './XtextWebSocketClient';
-import { ConditionVariable } from '../utils/ConditionVariable';
-import { getLogger } from '../utils/logger';
-import { Timer } from '../utils/Timer';
+import type EditorStore from '../editor/EditorStore';
+import ConditionVariable from '../utils/ConditionVariable';
+import Timer from '../utils/Timer';
+import getLogger from '../utils/getLogger';
+
+import type XtextWebSocketClient from './XtextWebSocketClient';
 import {
-  ContentAssistEntry,
-  contentAssistResult,
-  documentStateResult,
-  formattingResult,
+  type ContentAssistEntry,
+  ContentAssistResult,
+  DocumentStateResult,
+  FormattingResult,
   isConflictResult,
 } from './xtextServiceResults';
 
@@ -32,7 +33,7 @@ export interface IAbortSignal {
   aborted: boolean;
 }
 
-export class UpdateService {
+export default class UpdateService {
   resourceName: string;
 
   xtextStateId: string | null = null;
@@ -76,8 +77,8 @@ export class UpdateService {
   }
 
   onTransaction(transaction: Transaction): void {
-    const setDirtyChangesEffect = transaction.effects.find(
-      (effect) => effect.is(setDirtyChanges),
+    const setDirtyChangesEffect = transaction.effects.find((effect) =>
+      effect.is(setDirtyChanges),
     ) as StateEffect<ChangeSet> | undefined;
     if (setDirtyChangesEffect) {
       const { value } = setDirtyChangesEffect;
@@ -102,7 +103,10 @@ export class UpdateService {
    * @return the summary of changes since the last update
    */
   computeChangesSinceLastUpdate(): ChangeDesc {
-    return this.pendingUpdate?.composeDesc(this.dirtyChanges.desc) || this.dirtyChanges.desc;
+    return (
+      this.pendingUpdate?.composeDesc(this.dirtyChanges.desc) ||
+      this.dirtyChanges.desc
+    );
   }
 
   private handleIdleUpdate() {
@@ -131,7 +135,7 @@ export class UpdateService {
       serviceType: 'update',
       fullText: this.store.state.doc.sliceString(0),
     });
-    const { stateId } = documentStateResult.parse(result);
+    const { stateId } = DocumentStateResult.parse(result);
     return [stateId, undefined];
   }
 
@@ -158,7 +162,7 @@ export class UpdateService {
         requiredStateId: this.xtextStateId,
         ...delta,
       });
-      const parsedDocumentStateResult = documentStateResult.safeParse(result);
+      const parsedDocumentStateResult = DocumentStateResult.safeParse(result);
       if (parsedDocumentStateResult.success) {
         return [parsedDocumentStateResult.data.stateId, undefined];
       }
@@ -197,9 +201,10 @@ export class UpdateService {
           requiredStateId: this.xtextStateId,
           ...delta,
         });
-        const parsedContentAssistResult = contentAssistResult.safeParse(result);
+        const parsedContentAssistResult = ContentAssistResult.safeParse(result);
         if (parsedContentAssistResult.success) {
-          const { stateId, entries: resultEntries } = parsedContentAssistResult.data;
+          const { stateId, entries: resultEntries } =
+            parsedContentAssistResult.data;
           return [stateId, resultEntries];
         }
         if (isConflictResult(result, 'invalidStateId')) {
@@ -223,14 +228,19 @@ export class UpdateService {
     return this.doFetchContentAssist(params, this.xtextStateId as string);
   }
 
-  private async doFetchContentAssist(params: Record<string, unknown>, expectedStateId: string) {
+  private async doFetchContentAssist(
+    params: Record<string, unknown>,
+    expectedStateId: string,
+  ) {
     const result = await this.webSocketClient.send({
       ...params,
       requiredStateId: expectedStateId,
     });
-    const { stateId, entries } = contentAssistResult.parse(result);
+    const { stateId, entries } = ContentAssistResult.parse(result);
     if (stateId !== expectedStateId) {
-      throw new Error(`Unexpected state id, expected: ${expectedStateId} got: ${stateId}`);
+      throw new Error(
+        `Unexpected state id, expected: ${expectedStateId} got: ${stateId}`,
+      );
     }
     return entries;
   }
@@ -250,7 +260,7 @@ export class UpdateService {
         selectionStart: from,
         selectionEnd: to,
       });
-      const { stateId, formattedText } = formattingResult.parse(result);
+      const { stateId, formattedText } = FormattingResult.parse(result);
       this.applyBeforeDirtyChanges({
         from,
         to,
@@ -282,16 +292,15 @@ export class UpdateService {
   }
 
   private applyBeforeDirtyChanges(changeSpec: ChangeSpec) {
-    const pendingChanges = this.pendingUpdate?.compose(this.dirtyChanges) || this.dirtyChanges;
+    const pendingChanges =
+      this.pendingUpdate?.compose(this.dirtyChanges) || this.dirtyChanges;
     const revertChanges = pendingChanges.invert(this.store.state.doc);
     const applyBefore = ChangeSet.of(changeSpec, revertChanges.newLength);
     const redoChanges = pendingChanges.map(applyBefore.desc);
     const changeSet = revertChanges.compose(applyBefore).compose(redoChanges);
     this.store.dispatch({
       changes: changeSet,
-      effects: [
-        setDirtyChanges.of(redoChanges),
-      ],
+      effects: [setDirtyChanges.of(redoChanges)],
     });
   }
 
@@ -316,7 +325,9 @@ export class UpdateService {
    * @param callback the asynchronous callback that updates the server state
    * @return a promise resolving to the second value returned by `callback`
    */
-  private async withUpdate<T>(callback: () => Promise<[string, T]>): Promise<T> {
+  private async withUpdate<T>(
+    callback: () => Promise<[string, T]>,
+  ): Promise<T> {
     if (this.pendingUpdate !== null) {
       throw new Error('Another update is pending, will not perform update');
     }
diff --git a/subprojects/frontend/src/xtext/ValidationService.ts b/subprojects/frontend/src/xtext/ValidationService.ts
index ff7d3700..a0b27251 100644
--- a/subprojects/frontend/src/xtext/ValidationService.ts
+++ b/subprojects/frontend/src/xtext/ValidationService.ts
@@ -1,10 +1,11 @@
 import type { Diagnostic } from '@codemirror/lint';
 
-import type { EditorStore } from '../editor/EditorStore';
-import type { UpdateService } from './UpdateService';
-import { validationResult } from './xtextServiceResults';
+import type EditorStore from '../editor/EditorStore';
 
-export class ValidationService {
+import type UpdateService from './UpdateService';
+import { ValidationResult } from './xtextServiceResults';
+
+export default class ValidationService {
   private readonly store: EditorStore;
 
   private readonly updateService: UpdateService;
@@ -15,15 +16,10 @@ export class ValidationService {
   }
 
   onPush(push: unknown): void {
-    const { issues } = validationResult.parse(push);
+    const { issues } = ValidationResult.parse(push);
     const allChanges = this.updateService.computeChangesSinceLastUpdate();
     const diagnostics: Diagnostic[] = [];
-    issues.forEach(({
-      offset,
-      length,
-      severity,
-      description,
-    }) => {
+    issues.forEach(({ offset, length, severity, description }) => {
       if (severity === 'ignore') {
         return;
       }
diff --git a/subprojects/frontend/src/xtext/XtextClient.ts b/subprojects/frontend/src/xtext/XtextClient.ts
index 0898e725..7297c674 100644
--- a/subprojects/frontend/src/xtext/XtextClient.ts
+++ b/subprojects/frontend/src/xtext/XtextClient.ts
@@ -4,19 +4,20 @@ import type {
 } from '@codemirror/autocomplete';
 import type { Transaction } from '@codemirror/state';
 
-import type { EditorStore } from '../editor/EditorStore';
-import { ContentAssistService } from './ContentAssistService';
-import { HighlightingService } from './HighlightingService';
-import { OccurrencesService } from './OccurrencesService';
-import { UpdateService } from './UpdateService';
-import { getLogger } from '../utils/logger';
-import { ValidationService } from './ValidationService';
-import { XtextWebSocketClient } from './XtextWebSocketClient';
-import { XtextWebPushService } from './xtextMessages';
+import type EditorStore from '../editor/EditorStore';
+import getLogger from '../utils/getLogger';
+
+import ContentAssistService from './ContentAssistService';
+import HighlightingService from './HighlightingService';
+import OccurrencesService from './OccurrencesService';
+import UpdateService from './UpdateService';
+import ValidationService from './ValidationService';
+import XtextWebSocketClient from './XtextWebSocketClient';
+import type { XtextWebPushService } from './xtextMessages';
 
 const log = getLogger('xtext.XtextClient');
 
-export class XtextClient {
+export default class XtextClient {
   private readonly webSocketClient: XtextWebSocketClient;
 
   private readonly updateService: UpdateService;
@@ -32,11 +33,15 @@ export class XtextClient {
   constructor(store: EditorStore) {
     this.webSocketClient = new XtextWebSocketClient(
       () => this.updateService.onReconnect(),
-      (resource, stateId, service, push) => this.onPush(resource, stateId, service, push),
+      (resource, stateId, service, push) =>
+        this.onPush(resource, stateId, service, push),
     );
     this.updateService = new UpdateService(store, this.webSocketClient);
     this.contentAssistService = new ContentAssistService(this.updateService);
-    this.highlightingService = new HighlightingService(store, this.updateService);
+    this.highlightingService = new HighlightingService(
+      store,
+      this.updateService,
+    );
     this.validationService = new ValidationService(store, this.updateService);
     this.occurrencesService = new OccurrencesService(
       store,
@@ -53,14 +58,29 @@ export class XtextClient {
     this.occurrencesService.onTransaction(transaction);
   }
 
-  private onPush(resource: string, stateId: string, service: XtextWebPushService, push: unknown) {
+  private onPush(
+    resource: string,
+    stateId: string,
+    service: XtextWebPushService,
+    push: unknown,
+  ) {
     const { resourceName, xtextStateId } = this.updateService;
     if (resource !== resourceName) {
-      log.error('Unknown resource name: expected:', resourceName, 'got:', resource);
+      log.error(
+        'Unknown resource name: expected:',
+        resourceName,
+        'got:',
+        resource,
+      );
       return;
     }
     if (stateId !== xtextStateId) {
-      log.error('Unexpected xtext state id: expected:', xtextStateId, 'got:', stateId);
+      log.error(
+        'Unexpected xtext state id: expected:',
+        xtextStateId,
+        'got:',
+        stateId,
+      );
       // The current push message might be stale (referring to a previous state),
       // so this is not neccessarily an error and there is no need to force-reconnect.
       return;
@@ -71,6 +91,9 @@ export class XtextClient {
         return;
       case 'validate':
         this.validationService.onPush(push);
+        return;
+      default:
+        throw new Error('Unknown service');
     }
   }
 
diff --git a/subprojects/frontend/src/xtext/XtextWebSocketClient.ts b/subprojects/frontend/src/xtext/XtextWebSocketClient.ts
index 2ce20a54..ceb1f3fd 100644
--- a/subprojects/frontend/src/xtext/XtextWebSocketClient.ts
+++ b/subprojects/frontend/src/xtext/XtextWebSocketClient.ts
@@ -1,16 +1,17 @@
 import { nanoid } from 'nanoid';
 
-import { getLogger } from '../utils/logger';
-import { PendingTask } from '../utils/PendingTask';
-import { Timer } from '../utils/Timer';
+import PendingTask from '../utils/PendingTask';
+import Timer from '../utils/Timer';
+import getLogger from '../utils/getLogger';
+
 import {
-  xtextWebErrorResponse,
+  XtextWebErrorResponse,
   XtextWebRequest,
-  xtextWebOkResponse,
-  xtextWebPushMessage,
+  XtextWebOkResponse,
+  XtextWebPushMessage,
   XtextWebPushService,
 } from './xtextMessages';
-import { pongResult } from './xtextServiceResults';
+import { PongResult } from './xtextServiceResults';
 
 const XTEXT_SUBPROTOCOL_V1 = 'tools.refinery.language.web.xtext.v1';
 
@@ -18,7 +19,8 @@ const WEBSOCKET_CLOSE_OK = 1000;
 
 const RECONNECT_DELAY_MS = [200, 1000, 5000, 30_000];
 
-const MAX_RECONNECT_DELAY_MS = RECONNECT_DELAY_MS[RECONNECT_DELAY_MS.length - 1];
+const MAX_RECONNECT_DELAY_MS =
+  RECONNECT_DELAY_MS[RECONNECT_DELAY_MS.length - 1];
 
 const BACKGROUND_IDLE_TIMEOUT_MS = 5 * 60 * 1000;
 
@@ -47,7 +49,7 @@ enum State {
   TimedOut,
 }
 
-export class XtextWebSocketClient {
+export default class XtextWebSocketClient {
   private nextMessageId = 0;
 
   private connection!: WebSocket;
@@ -88,9 +90,11 @@ export class XtextWebSocketClient {
   }
 
   get isOpen(): boolean {
-    return this.state === State.TabVisible
-      || this.state === State.TabHiddenIdle
-      || this.state === State.TabHiddenWaiting;
+    return (
+      this.state === State.TabVisible ||
+      this.state === State.TabHiddenIdle ||
+      this.state === State.TabHiddenWaiting
+    );
   }
 
   private reconnect() {
@@ -104,7 +108,11 @@ export class XtextWebSocketClient {
     this.connection = new WebSocket(webSocketUrl, XTEXT_SUBPROTOCOL_V1);
     this.connection.addEventListener('open', () => {
       if (this.connection.protocol !== XTEXT_SUBPROTOCOL_V1) {
-        log.error('Unknown subprotocol', this.connection.protocol, 'selected by server');
+        log.error(
+          'Unknown subprotocol',
+          this.connection.protocol,
+          'selected by server',
+        );
         this.forceReconnectOnError();
       }
       if (document.visibilityState === 'hidden') {
@@ -126,8 +134,11 @@ export class XtextWebSocketClient {
       this.handleMessage(event.data);
     });
     this.connection.addEventListener('close', (event) => {
-      if (this.isLogicallyClosed && event.code === WEBSOCKET_CLOSE_OK
-        && this.pendingRequests.size === 0) {
+      if (
+        this.isLogicallyClosed &&
+        event.code === WEBSOCKET_CLOSE_OK &&
+        this.pendingRequests.size === 0
+      ) {
         log.info('Websocket closed');
         return;
       }
@@ -144,7 +155,10 @@ export class XtextWebSocketClient {
       return;
     }
     this.idleTimer.cancel();
-    if (this.state === State.TabHiddenIdle || this.state === State.TabHiddenWaiting) {
+    if (
+      this.state === State.TabHiddenIdle ||
+      this.state === State.TabHiddenWaiting
+    ) {
       this.handleTabVisibleConnected();
       return;
     }
@@ -183,7 +197,11 @@ export class XtextWebSocketClient {
       this.closeConnection(1000, 'idle timeout');
       return;
     }
-    log.info('Waiting for', pending, 'pending requests before closing websocket');
+    log.info(
+      'Waiting for',
+      pending,
+      'pending requests before closing websocket',
+    );
   }
 
   private sendPing() {
@@ -192,19 +210,21 @@ export class XtextWebSocketClient {
     }
     const ping = nanoid();
     log.trace('Ping', ping);
-    this.send({ ping }).then((result) => {
-      const parsedPongResult = pongResult.safeParse(result);
-      if (parsedPongResult.success && parsedPongResult.data.pong === ping) {
-        log.trace('Pong', ping);
-        this.pingTimer.schedule();
-      } else {
-        log.error('Invalid pong:', parsedPongResult, 'expected:', ping);
+    this.send({ ping })
+      .then((result) => {
+        const parsedPongResult = PongResult.safeParse(result);
+        if (parsedPongResult.success && parsedPongResult.data.pong === ping) {
+          log.trace('Pong', ping);
+          this.pingTimer.schedule();
+        } else {
+          log.error('Invalid pong:', parsedPongResult, 'expected:', ping);
+          this.forceReconnectOnError();
+        }
+      })
+      .catch((error) => {
+        log.error('Error while waiting for ping', error);
         this.forceReconnectOnError();
-      }
-    }).catch((error) => {
-      log.error('Error while waiting for ping', error);
-      this.forceReconnectOnError();
-    });
+      });
   }
 
   send(request: unknown): Promise<unknown> {
@@ -250,13 +270,13 @@ export class XtextWebSocketClient {
       this.forceReconnectOnError();
       return;
     }
-    const okResponse = xtextWebOkResponse.safeParse(message);
+    const okResponse = XtextWebOkResponse.safeParse(message);
     if (okResponse.success) {
       const { id, response } = okResponse.data;
       this.resolveRequest(id, response);
       return;
     }
-    const errorResponse = xtextWebErrorResponse.safeParse(message);
+    const errorResponse = XtextWebErrorResponse.safeParse(message);
     if (errorResponse.success) {
       const { id, error, message: errorMessage } = errorResponse.data;
       this.rejectRequest(id, new Error(`${error} error: ${errorMessage}`));
@@ -266,14 +286,9 @@ export class XtextWebSocketClient {
       }
       return;
     }
-    const pushMessage = xtextWebPushMessage.safeParse(message);
+    const pushMessage = XtextWebPushMessage.safeParse(message);
     if (pushMessage.success) {
-      const {
-        resource,
-        stateId,
-        service,
-        push,
-      } = pushMessage.data;
+      const { resource, stateId, service, push } = pushMessage.data;
       this.onPush(resource, stateId, service, push);
     } else {
       log.error(
@@ -343,7 +358,8 @@ export class XtextWebSocketClient {
   private handleErrorState() {
     this.state = State.Error;
     this.reconnectTryCount += 1;
-    const delay = RECONNECT_DELAY_MS[this.reconnectTryCount - 1] || MAX_RECONNECT_DELAY_MS;
+    const delay =
+      RECONNECT_DELAY_MS[this.reconnectTryCount - 1] || MAX_RECONNECT_DELAY_MS;
     log.info('Reconnecting in', delay, 'ms');
     this.reconnectTimer.schedule(delay);
   }
diff --git a/subprojects/frontend/src/xtext/xtextMessages.ts b/subprojects/frontend/src/xtext/xtextMessages.ts
index 4bf49c17..c4d0c676 100644
--- a/subprojects/frontend/src/xtext/xtextMessages.ts
+++ b/subprojects/frontend/src/xtext/xtextMessages.ts
@@ -1,40 +1,42 @@
+/* eslint-disable @typescript-eslint/no-redeclare -- Declare types with their companion objects */
+
 import { z } from 'zod';
 
-export const xtextWebRequest = z.object({
+export const XtextWebRequest = z.object({
   id: z.string().min(1),
   request: z.unknown(),
 });
 
-export type XtextWebRequest = z.infer<typeof xtextWebRequest>;
+export type XtextWebRequest = z.infer<typeof XtextWebRequest>;
 
-export const xtextWebOkResponse = z.object({
+export const XtextWebOkResponse = z.object({
   id: z.string().min(1),
   response: z.unknown(),
 });
 
-export type XtextWebOkResponse = z.infer<typeof xtextWebOkResponse>;
+export type XtextWebOkResponse = z.infer<typeof XtextWebOkResponse>;
 
-export const xtextWebErrorKind = z.enum(['request', 'server']);
+export const XtextWebErrorKind = z.enum(['request', 'server']);
 
-export type XtextWebErrorKind = z.infer<typeof xtextWebErrorKind>;
+export type XtextWebErrorKind = z.infer<typeof XtextWebErrorKind>;
 
-export const xtextWebErrorResponse = z.object({
+export const XtextWebErrorResponse = z.object({
   id: z.string().min(1),
-  error: xtextWebErrorKind,
+  error: XtextWebErrorKind,
   message: z.string(),
 });
 
-export type XtextWebErrorResponse = z.infer<typeof xtextWebErrorResponse>;
+export type XtextWebErrorResponse = z.infer<typeof XtextWebErrorResponse>;
 
-export const xtextWebPushService = z.enum(['highlight', 'validate']);
+export const XtextWebPushService = z.enum(['highlight', 'validate']);
 
-export type XtextWebPushService = z.infer<typeof xtextWebPushService>;
+export type XtextWebPushService = z.infer<typeof XtextWebPushService>;
 
-export const xtextWebPushMessage = z.object({
+export const XtextWebPushMessage = z.object({
   resource: z.string().min(1),
   stateId: z.string().min(1),
-  service: xtextWebPushService,
+  service: XtextWebPushService,
   push: z.unknown(),
 });
 
-export type XtextWebPushMessage = z.infer<typeof xtextWebPushMessage>;
+export type XtextWebPushMessage = z.infer<typeof XtextWebPushMessage>;
diff --git a/subprojects/frontend/src/xtext/xtextServiceResults.ts b/subprojects/frontend/src/xtext/xtextServiceResults.ts
index 8b0dbbfb..4cfb9c33 100644
--- a/subprojects/frontend/src/xtext/xtextServiceResults.ts
+++ b/subprojects/frontend/src/xtext/xtextServiceResults.ts
@@ -1,112 +1,120 @@
+/* eslint-disable @typescript-eslint/no-redeclare -- Declare types with their companion objects */
+
 import { z } from 'zod';
 
-export const pongResult = z.object({
+export const PongResult = z.object({
   pong: z.string().min(1),
 });
 
-export type PongResult = z.infer<typeof pongResult>;
+export type PongResult = z.infer<typeof PongResult>;
 
-export const documentStateResult = z.object({
+export const DocumentStateResult = z.object({
   stateId: z.string().min(1),
 });
 
-export type DocumentStateResult = z.infer<typeof documentStateResult>;
+export type DocumentStateResult = z.infer<typeof DocumentStateResult>;
 
-export const conflict = z.enum(['invalidStateId', 'canceled']);
+export const Conflict = z.enum(['invalidStateId', 'canceled']);
 
-export type Conflict = z.infer<typeof conflict>;
+export type Conflict = z.infer<typeof Conflict>;
 
-export const serviceConflictResult = z.object({
-  conflict,
+export const ServiceConflictResult = z.object({
+  conflict: Conflict,
 });
 
-export type ServiceConflictResult = z.infer<typeof serviceConflictResult>;
-
-export function isConflictResult(result: unknown, conflictType: Conflict): boolean {
-  const parsedConflictResult = serviceConflictResult.safeParse(result);
-  return parsedConflictResult.success && parsedConflictResult.data.conflict === conflictType;
+export type ServiceConflictResult = z.infer<typeof ServiceConflictResult>;
+
+export function isConflictResult(
+  result: unknown,
+  conflictType: Conflict,
+): boolean {
+  const parsedConflictResult = ServiceConflictResult.safeParse(result);
+  return (
+    parsedConflictResult.success &&
+    parsedConflictResult.data.conflict === conflictType
+  );
 }
 
-export const severity = z.enum(['error', 'warning', 'info', 'ignore']);
+export const Severity = z.enum(['error', 'warning', 'info', 'ignore']);
 
-export type Severity = z.infer<typeof severity>;
+export type Severity = z.infer<typeof Severity>;
 
-export const issue = z.object({
+export const Issue = z.object({
   description: z.string().min(1),
-  severity,
+  severity: Severity,
   line: z.number().int(),
   column: z.number().int().nonnegative(),
   offset: z.number().int().nonnegative(),
   length: z.number().int().nonnegative(),
 });
 
-export type Issue = z.infer<typeof issue>;
+export type Issue = z.infer<typeof Issue>;
 
-export const validationResult = z.object({
-  issues: issue.array(),
+export const ValidationResult = z.object({
+  issues: Issue.array(),
 });
 
-export type ValidationResult = z.infer<typeof validationResult>;
+export type ValidationResult = z.infer<typeof ValidationResult>;
 
-export const replaceRegion = z.object({
+export const ReplaceRegion = z.object({
   offset: z.number().int().nonnegative(),
   length: z.number().int().nonnegative(),
   text: z.string(),
 });
 
-export type ReplaceRegion = z.infer<typeof replaceRegion>;
+export type ReplaceRegion = z.infer<typeof ReplaceRegion>;
 
-export const textRegion = z.object({
+export const TextRegion = z.object({
   offset: z.number().int().nonnegative(),
   length: z.number().int().nonnegative(),
 });
 
-export type TextRegion = z.infer<typeof textRegion>;
+export type TextRegion = z.infer<typeof TextRegion>;
 
-export const contentAssistEntry = z.object({
+export const ContentAssistEntry = z.object({
   prefix: z.string(),
   proposal: z.string().min(1),
   label: z.string().optional(),
   description: z.string().min(1).optional(),
   documentation: z.string().min(1).optional(),
   escapePosition: z.number().int().nonnegative().optional(),
-  textReplacements: replaceRegion.array(),
-  editPositions: textRegion.array(),
+  textReplacements: ReplaceRegion.array(),
+  editPositions: TextRegion.array(),
   kind: z.string().min(1),
 });
 
-export type ContentAssistEntry = z.infer<typeof contentAssistEntry>;
+export type ContentAssistEntry = z.infer<typeof ContentAssistEntry>;
 
-export const contentAssistResult = documentStateResult.extend({
-  entries: contentAssistEntry.array(),
+export const ContentAssistResult = DocumentStateResult.extend({
+  entries: ContentAssistEntry.array(),
 });
 
-export type ContentAssistResult = z.infer<typeof contentAssistResult>;
+export type ContentAssistResult = z.infer<typeof ContentAssistResult>;
 
-export const highlightingRegion = z.object({
+export const HighlightingRegion = z.object({
   offset: z.number().int().nonnegative(),
   length: z.number().int().nonnegative(),
   styleClasses: z.string().min(1).array(),
 });
 
-export type HighlightingRegion = z.infer<typeof highlightingRegion>;
+export type HighlightingRegion = z.infer<typeof HighlightingRegion>;
 
 export const highlightingResult = z.object({
-  regions: highlightingRegion.array(),
+  regions: HighlightingRegion.array(),
 });
 
 export type HighlightingResult = z.infer<typeof highlightingResult>;
 
-export const occurrencesResult = documentStateResult.extend({
-  writeRegions: textRegion.array(),
-  readRegions: textRegion.array(),
+export const OccurrencesResult = DocumentStateResult.extend({
+  writeRegions: TextRegion.array(),
+  readRegions: TextRegion.array(),
 });
 
-export type OccurrencesResult = z.infer<typeof occurrencesResult>;
+export type OccurrencesResult = z.infer<typeof OccurrencesResult>;
 
-export const formattingResult = documentStateResult.extend({
+export const FormattingResult = DocumentStateResult.extend({
   formattedText: z.string(),
-  replaceRegion: textRegion,
+  replaceRegion: TextRegion,
 });
 
-export type FormattingResult = z.infer<typeof formattingResult>;
+export type FormattingResult = z.infer<typeof FormattingResult>;