Run spxls in Web Worker

Author: nighca

spx-gui/src/components/editor/code-editor/lsp/index.ts

@@ -5,8 +5,6 @@ import { timeout, until, untilNotNull } from '@/utils/utils'
 import { extname } from '@/utils/path'
 import { toText } from '@/models/common/file'
 import type { Project } from '@/models/project'
-import wasmExecScriptUrl from '@/assets/wasm_exec.js?url'
-import spxlsWasmUrl from '@/assets/spxls.wasm?url'
 import {
   fromLSPRange,
   type DefinitionIdentifier,
@@ -15,38 +13,45 @@ import {
   type TextDocumentIdentifier,
   containsPosition
 } from '../common'
-import { Spxlc } from './spxls/client'
-import type { Files as SpxlsFiles } from './spxls'
+import { Spxlc, type IConnection } from './spxls/client'
+import type { NotificationMessage, RequestMessage, ResponseMessage, Files as SpxlsFiles } from './spxls'
 import { spxGetDefinitions, spxRenameResources } from './spxls/commands'
 import {
   type CompletionItem,
   isDocumentLinkForResourceReference,
   parseDocumentLinkForDefinition
 } from './spxls/methods'
+import type { IWorkerHandler } from './worker'
 
-function loadScript(url: string) {
-  return new Promise((resolve, reject) => {
-    const script = document.createElement('script')
-    script.src = url
-    script.onload = resolve
-    script.onerror = reject
-    document.body.appendChild(script)
-  })
-}
-
-async function loadGoWasm(wasmUrl: string) {
-  await loadScript(wasmExecScriptUrl)
-  const go = new Go()
-  const { instance } = await WebAssembly.instantiateStreaming(fetch(wasmUrl), go.importObject)
-  go.run(instance)
+/** Connection between LS client and server when the server runs in a Web Worker. */
+class WorkerConnection implements IConnection {
+  private worker: IWorkerHandler
+  constructor() {
+    this.worker = new Worker(new URL('./worker/index.ts', import.meta.url), { type: 'module' })
+  }
+  setFiles(files: SpxlsFiles): void {
+    this.worker.postMessage({ type: 'files', files })
+  }
+  sendMessage(message: RequestMessage | NotificationMessage) {
+    this.worker.postMessage({ type: 'lsp', message })
+  }
+  onMessage(handler: (message: ResponseMessage | NotificationMessage) => void) {
+    this.worker.addEventListener('message', (event) => {
+      const message = event.data
+      handler(message.message)
+    })
+  }
+  dispose() {
+    this.worker.terminate()
+  }
 }
 
 export class SpxLSPClient extends Disposable {
   constructor(private project: Project) {
     super()
   }
 
-  private files: SpxlsFiles = {}
+  private connection = new WorkerConnection()
   private isFilesStale = shallowRef(true)
   private spxlcRef = shallowRef<Spxlc | null>(null)
 
@@ -71,7 +76,7 @@ export class SpxLSPClient extends Disposable {
       })
     )
     signal.throwIfAborted()
-    this.files = loadedFiles
+    this.connection.setFiles(loadedFiles)
     this.isFilesStale.value = false
   }
 
@@ -87,10 +92,9 @@ export class SpxLSPClient extends Disposable {
     return spxlc
   }
 
-  async init() {
+  init() {
     this.addDisposer(watchEffect((cleanUp) => this.loadFiles(getCleanupSignal(cleanUp))))
-    await loadGoWasm(spxlsWasmUrl)
-    this.spxlcRef.value = new Spxlc(() => this.files)
+    this.spxlcRef.value = new Spxlc(this.connection)
   }
 
   private async executeCommand<A extends any[], R>(command: string, ...args: A): Promise<R> {

spx-gui/src/components/editor/code-editor/lsp/worker.ts

@@ -0,0 +1,81 @@
+/**
+ * This file is worker script for spxls (spx language server).
+ * It runs in a Web Worker.
+ */
+
+declare const self: DedicatedWorkerGlobalScope
+
+import '@/assets/wasm_exec.js'
+import spxlsWasmUrl from '@/assets/spxls.wasm?url'
+import type { Files, Message, NotificationMessage, RequestMessage, ResponseMessage, Spxls } from './spxls'
+
+export type FilesMessage = {
+  type: 'files'
+  files: Files
+}
+
+export type LSPMessage<M extends Message> = {
+  type: 'lsp'
+  message: M
+}
+
+/** Message that worker send to main thread. */
+export type WorkerMessage = LSPMessage<ResponseMessage | NotificationMessage>
+
+/** Message that main thread send to worker. */
+export type MainMessage = LSPMessage<RequestMessage | NotificationMessage> | FilesMessage
+
+interface IWorkerScope {
+  postMessage(message: WorkerMessage): void
+  addEventListener(type: 'message', listener: (event: MessageEvent<MainMessage>) => void): void
+}
+
+export interface IWorkerHandler {
+  postMessage(message: MainMessage): void
+  addEventListener(type: 'message', listener: (event: MessageEvent<WorkerMessage>) => void): void
+  terminate(): void
+}
+
+class SpxlsWorker {
+  private lsInited: Promise<Spxls>
+
+  constructor(private scope: IWorkerScope) {
+    this.lsInited = this.initLS()
+
+    scope.addEventListener('message', async (event) => {
+      const message = event.data
+      switch (message.type) {
+        case 'lsp': {
+          const ls = await this.lsInited
+          const error = ls.handleMessage(message.message)
+          if (error != null) throw error
+          break
+        }
+        case 'files':
+          this.setFiles(message.files)
+          return
+      }
+    })
+  }
+
+  private files: Files = {}
+  setFiles(files: Files): void {
+    this.files = files
+  }
+
+  private async initLS(): Promise<Spxls> {
+    const go = new Go()
+    const { instance } = await WebAssembly.instantiateStreaming(fetch(spxlsWasmUrl), go.importObject)
+    go.run(instance)
+    const ls = NewSpxls(
+      () => this.files,
+      (message) => {
+        this.scope.postMessage({ type: 'lsp', message })
+      }
+    )
+    if (ls instanceof Error) throw ls
+    return ls
+  }
+}
+
+new SpxlsWorker(self)

spx-gui/tsconfig.app.json

@@ -15,6 +15,12 @@
       "@/*": [
         "src/*"
       ]
-    }
+    },
+    "lib": [
+      "es2023",
+      "dom",
+      "dom.iterable",
+      "webworker"
+    ]
   }
 }

tools/spxls/client.ts

@@ -1,10 +1,45 @@
 import { type Files, type NotificationMessage, type RequestMessage, type ResponseMessage, type Spxls } from '.'
 
+/** Connection between the client and the language server. */
+export interface IConnection {
+  setFiles(files: Files): void
+  sendMessage(message: RequestMessage | NotificationMessage): void
+  onMessage(handler: (message: ResponseMessage | NotificationMessage) => void): void
+  dispose(): void
+}
+
+/** Direct connection between LS client and server when the two run in the same thread. */
+export class DirectConnection implements IConnection {
+  private ls: Spxls
+  constructor() {
+    const ls = NewSpxls(() => this.files, message => this.handleServerMessage(message))
+    if (ls instanceof Error) throw ls
+    this.ls = ls
+  }
+  private serverMessageHandlers: ((message: ResponseMessage | NotificationMessage) => void)[] = []
+  private handleServerMessage(message: ResponseMessage | NotificationMessage): void {
+    for (const handler of this.serverMessageHandlers) handler(message)
+  }
+  private files: Files = {}
+  setFiles(files: Files) {
+    this.files = files
+  }
+  sendMessage(message: RequestMessage | NotificationMessage) {
+    const error = this.ls.handleMessage(message)
+    if (error != null) throw error
+  }
+  onMessage(handler: (message: ResponseMessage | NotificationMessage) => void) {
+    this.serverMessageHandlers.push(handler)
+  }
+  dispose() {
+    this.serverMessageHandlers = []
+  }
+}
+
 /**
  * Client wrapper for the spxls.
  */
 export class Spxlc {
-  private ls: Spxls
   private nextRequestId: number = 1
   private pendingRequests = new Map<number, {
     resolve: (response: any) => void
@@ -16,10 +51,8 @@ export class Spxlc {
    * Creates a new client instance.
    * @param filesProvider Function that provides access to workspace files.
    */
-  constructor(filesProvider: () => Files) {
-    const ls = NewSpxls(filesProvider, this.handleMessage.bind(this))
-    if (ls instanceof Error) throw ls
-    this.ls = ls
+  constructor(private connection: IConnection) {
+    connection.onMessage(m => this.handleMessage(m))
   }
 
   /**
@@ -85,8 +118,9 @@ export class Spxlc {
         params
       }
       this.pendingRequests.set(id, { resolve, reject })
-      const err = this.ls.handleMessage(message)
-      if (err != null) {
+      try {
+        this.connection.sendMessage(message)
+      } catch (err) {
         reject(err)
         this.pendingRequests.delete(id)
       }
@@ -117,8 +151,7 @@ export class Spxlc {
       method,
       params
     }
-    const err = this.ls.handleMessage(message)
-    if (err != null) throw err
+    this.connection.sendMessage(message)
   }
 
   /**

tools/spxls/index.d.ts

@@ -10,7 +10,6 @@ export interface Spxls {
   handleMessage(message: RequestMessage | NotificationMessage): Error | null
 }
 
-
 declare global {
   /**
    * Creates a new instance of the spx language server.