monaco-languageclient-examples 2025.8.3 → 2025.8.4

package/src/clangd/client/main.ts

@@ -3,18 +3,17 @@
  * Licensed under the MIT License. See LICENSE in the package root for license information.
  * ------------------------------------------------------------------------------------------ */
 
-import * as vscode from 'vscode';
 import { RegisteredFileSystemProvider, RegisteredMemoryFile, registerFileSystemOverlay } from '@codingame/monaco-vscode-files-service-override';
+import * as vscode from 'vscode';
 // this is required syntax highlighting
 import '@codingame/monaco-vscode-cpp-default-extension';
-import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
-import { createWrapperConfig } from './config.js';
-import { ClangdWorkerHandler } from './workerHandler.js';
-import { MainRemoteMessageChannelFs } from './mainRemoteMessageChannelFs.js';
+import { LanguageClientWrapper } from 'monaco-languageclient/lcwrapper';
+import { MonacoVscodeApiWrapper } from 'monaco-languageclient/vscodeApiWrapper';
 import { createDefaultWorkspaceContent, disableElement } from '../../common/client/utils.js';
 import { HOME_DIR, WORKSPACE_PATH } from '../definitions.js';
-
-const wrapper = new MonacoEditorLanguageClientWrapper();
+import { createClangdAppConfig } from './config.js';
+import { MainRemoteMessageChannelFs } from './mainRemoteMessageChannelFs.js';
+import { ClangdWorkerHandler } from './workerHandler.js';
 
 export const runClangdWrapper = async () => {
     const channelLs = new MessageChannel();
@@ -32,7 +31,7 @@ export const runClangdWrapper = async () => {
     new MainRemoteMessageChannelFs(fileSystemProvider, channelFs.port1, readiness);
 
     const clangdWorkerHandler = new ClangdWorkerHandler();
-    const wrapperConfig = await createWrapperConfig({
+    const appConfig = await createClangdAppConfig({
         htmlContainer: document.body,
         workspaceUri: vscode.Uri.file(WORKSPACE_PATH),
         workspaceFileUri,
@@ -40,7 +39,12 @@ export const runClangdWrapper = async () => {
         lsMessageLocalPort: channelLs.port1
     });
 
-    await wrapper.init(wrapperConfig);
+    // perform global init
+    const apiWrapper = new MonacoVscodeApiWrapper(appConfig.vscodeApiConfig);
+    await apiWrapper.init();
+
+    const lcWrapper = new LanguageClientWrapper(appConfig.languageClientConfig);
+
     const initConfig = {
         lsMessagePort: channelLs.port2,
         fsMessagePort: channelFs.port2,
@@ -53,7 +57,7 @@ export const runClangdWrapper = async () => {
     const startWrapper = async () => {
         await clangdWorkerHandler.init(initConfig);
         await clangdWorkerHandler.launch();
-        await wrapper.startLanguageClients();
+        await lcWrapper.start();
     };
 
     try {

package/src/common/client/extendedClient.ts

@@ -0,0 +1,111 @@
+/* --------------------------------------------------------------------------------------------
+ * Copyright (c) 2025 TypeFox and others.
+ * Licensed under the MIT License. See LICENSE in the package root for license information.
+ * ------------------------------------------------------------------------------------------ */
+
+import { RegisteredFileSystemProvider, RegisteredMemoryFile, registerFileSystemOverlay } from '@codingame/monaco-vscode-files-service-override';
+import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
+import * as vscode from 'vscode';
+// this is required syntax highlighting
+import { LogLevel } from '@codingame/monaco-vscode-api';
+import '@codingame/monaco-vscode-java-default-extension';
+import { EditorApp, type EditorAppConfig } from 'monaco-languageclient/editorApp';
+import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
+import { LanguageClientWrapper, type LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
+import { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
+
+export const runExtendedClient = async (lsConfig: ExampleLsConfig, helloCode: string) => {
+    const helloUri = vscode.Uri.file(`${lsConfig.basePath}/workspace/hello.${lsConfig.documentSelector}`);
+    const fileSystemProvider = new RegisteredFileSystemProvider(false);
+    fileSystemProvider.registerFile(new RegisteredMemoryFile(helloUri, helloCode));
+    registerFileSystemOverlay(1, fileSystemProvider);
+
+    const htmlContainer = document.getElementById('monaco-editor-root')!;
+    const vscodeApiConfig: MonacoVscodeApiConfig = {
+        $type: 'extended',
+        htmlContainer,
+        logLevel: LogLevel.Debug,
+        serviceOverrides: {
+            ...getKeybindingsServiceOverride(),
+        },
+        userConfiguration: {
+            json: JSON.stringify({
+                'workbench.colorTheme': 'Default Dark Modern',
+                'editor.guides.bracketPairsHorizontal': 'active',
+                'editor.lightbulb.enabled': 'On',
+                'editor.wordBasedSuggestions': 'off',
+                'editor.experimental.asyncTokenization': true
+            })
+        },
+        monacoWorkerFactory: configureDefaultWorkerFactory
+    };
+
+    const languageClientConfig: LanguageClientConfig = {
+        connection: {
+            options: {
+                $type: 'WebSocketUrl',
+                url: `ws://localhost:${lsConfig.port}${lsConfig.path}`,
+                startOptions: {
+                    onCall: () => {
+                        console.log('Connected to socket.');
+                    },
+                    reportStatus: true
+                },
+                stopOptions: {
+                    onCall: () => {
+                        console.log('Disconnected from socket.');
+                    },
+                    reportStatus: true
+                }
+            },
+        },
+        clientOptions: {
+            documentSelector: [lsConfig.documentSelector],
+            workspaceFolder: {
+                index: 0,
+                name: 'workspace',
+                uri: vscode.Uri.parse(`${lsConfig.basePath}/workspace`)
+            }
+        }
+    };
+
+    const editorAppConfig: EditorAppConfig = {
+        $type: vscodeApiConfig.$type,
+        codeResources: {
+            modified: {
+                text: helloCode,
+                uri: helloUri.path
+            }
+        }
+    };
+
+    // perform global init
+    const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
+    await apiWrapper.init();
+
+    const lcWrapper = new LanguageClientWrapper(languageClientConfig, apiWrapper.getLogger());
+    const editorApp = new EditorApp(editorAppConfig);
+
+    try {
+        document.querySelector('#button-start')?.addEventListener('click', async () => {
+            await editorApp.start(htmlContainer);
+            await lcWrapper.start();
+
+            // open files, so the LS can pick it up
+            await vscode.workspace.openTextDocument(helloUri);
+        });
+        document.querySelector('#button-dispose')?.addEventListener('click', async () => {
+            await editorApp.dispose();
+            await lcWrapper.dispose();
+        });
+    } catch (e) {
+        console.error(e);
+    }
+};
+
+export type ExampleLsConfig = {
+    port: number;
+    path: string;
+    basePath: string;
+    documentSelector: string;
+};

package/src/common/client/utils.ts

@@ -4,6 +4,9 @@
  * ------------------------------------------------------------------------------------------ */
 
 import type { IStoredWorkspace } from '@codingame/monaco-vscode-configuration-service-override';
+import type { EditorAppConfig } from 'monaco-languageclient/editorApp';
+import type { LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
+import type { MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
 
 export const disableElement = (id: string, disabled: boolean) => {
     const button = document.getElementById(id) as HTMLButtonElement | HTMLInputElement | null;
@@ -26,6 +29,8 @@ export const createDefaultWorkspaceContent = (workspacePath: string) => {
     );
 };
 
-export const delayExecution = (ms: number) => {
-    return new Promise((resolve) => setTimeout(resolve, ms));
+export type ExampleAppConfig = {
+    vscodeApiConfig: MonacoVscodeApiConfig;
+    languageClientConfig: LanguageClientConfig;
+    editorAppConfig: EditorAppConfig;
 };

package/src/debugger/client/debugger.ts

@@ -4,7 +4,7 @@
  * ------------------------------------------------------------------------------------------ */
 
 import * as vscode from 'vscode';
-import type { ExtensionConfig } from 'monaco-editor-wrapper';
+import type { ExtensionConfig } from 'monaco-languageclient/vscodeApiWrapper';
 import type { ConfigParams, InitMessage } from '../common/definitions.js';
 
 // This is derived from:

package/src/eclipse.jdt.ls/client/main.ts

@@ -3,86 +3,12 @@
  * Licensed under the MIT License. See LICENSE in the package root for license information.
  * ------------------------------------------------------------------------------------------ */
 
-import * as vscode from 'vscode';
-import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
-import { RegisteredFileSystemProvider, RegisteredMemoryFile, registerFileSystemOverlay } from '@codingame/monaco-vscode-files-service-override';
 // this is required syntax highlighting
 import '@codingame/monaco-vscode-java-default-extension';
-import { LogLevel } from '@codingame/monaco-vscode-api';
-import { MonacoEditorLanguageClientWrapper, type WrapperConfig } from 'monaco-editor-wrapper';
-import { configureDefaultWorkerFactory } from 'monaco-editor-wrapper/workers/workerLoaders';
-import { eclipseJdtLsConfig } from '../config.js';
 import helloJavaCode from '../../../resources/eclipse.jdt.ls/workspace/hello.java?raw';
+import { runExtendedClient } from '../../common/client/extendedClient.js';
+import { eclipseJdtLsConfig } from '../config.js';
 
-export const runEclipseJdtLsClient = () => {
-    const helloJavaUri = vscode.Uri.file(`${eclipseJdtLsConfig.basePath}/workspace/hello.java`);
-    const fileSystemProvider = new RegisteredFileSystemProvider(false);
-    fileSystemProvider.registerFile(new RegisteredMemoryFile(helloJavaUri, helloJavaCode));
-    registerFileSystemOverlay(1, fileSystemProvider);
-
-    const wrapperConfig: WrapperConfig = {
-        $type: 'extended',
-        htmlContainer: document.getElementById('monaco-editor-root')!,
-        logLevel: LogLevel.Debug,
-        vscodeApiConfig: {
-            serviceOverrides: {
-                ...getKeybindingsServiceOverride(),
-            },
-            userConfiguration: {
-                json: JSON.stringify({
-                    'workbench.colorTheme': 'Default Dark Modern',
-                    'editor.guides.bracketPairsHorizontal': 'active',
-                    'editor.wordBasedSuggestions': 'off',
-                    'editor.experimental.asyncTokenization': true
-                })
-            }
-        },
-        editorAppConfig: {
-            codeResources: {
-                modified: {
-                    text: helloJavaCode,
-                    uri: `${eclipseJdtLsConfig.basePath}/workspace/hello.java`
-                }
-            },
-            monacoWorkerFactory: configureDefaultWorkerFactory
-        },
-        languageClientConfigs: {
-            configs: {
-                java: {
-                    connection: {
-                        options: {
-                            $type: 'WebSocketUrl',
-                            url: 'ws://localhost:30003/jdtls'
-                        }
-                    },
-                    clientOptions: {
-                        documentSelector: ['java'],
-                        workspaceFolder: {
-                            index: 0,
-                            name: 'workspace',
-                            uri: vscode.Uri.parse(`${eclipseJdtLsConfig.basePath}/workspace`)
-                        }
-                    }
-                }
-            }
-        }
-    };
-
-    const wrapper = new MonacoEditorLanguageClientWrapper();
-
-    try {
-        document.querySelector('#button-start')?.addEventListener('click', async () => {
-            await wrapper.init(wrapperConfig);
-
-            // open files, so the LS can pick it up
-            await vscode.workspace.openTextDocument(helloJavaUri);
-
-            await wrapper.start();
-        });
-        document.querySelector('#button-dispose')?.addEventListener('click', async () => {
-            await wrapper.dispose();
-        });
-    } catch (e) {
-        console.error(e);
-    }
+export const runEclipseJdtLsClient = async () => {
+    await runExtendedClient(eclipseJdtLsConfig, helloJavaCode);
 };

package/src/eclipse.jdt.ls/config.ts

@@ -2,8 +2,12 @@
  * Copyright (c) 2024 TypeFox and others.
  * Licensed under the MIT License. See LICENSE in the package root for license information.
  * ------------------------------------------------------------------------------------------ */
-export const eclipseJdtLsConfig = {
+
+import type { ExampleLsConfig } from '../common/client/extendedClient.js';
+
+export const eclipseJdtLsConfig: ExampleLsConfig = {
     port: 30003,
     path: '/jdtls',
-    basePath: '/home/mlc/packages/examples/resources/eclipse.jdt.ls'
+    basePath: '/home/mlc/packages/examples/resources/eclipse.jdt.ls',
+    documentSelector: 'java'
 };

package/src/groovy/client/main.ts

@@ -3,73 +3,12 @@
  * Licensed under the MIT License. See LICENSE in the package root for license information.
  * ------------------------------------------------------------------------------------------ */
 
-import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
 // this is required syntax highlighting
 import '@codingame/monaco-vscode-groovy-default-extension';
-import { LogLevel } from '@codingame/monaco-vscode-api';
-import { MonacoEditorLanguageClientWrapper, type WrapperConfig } from 'monaco-editor-wrapper';
-import { configureDefaultWorkerFactory } from 'monaco-editor-wrapper/workers/workerLoaders';
+import helloGroovyCode from '../../../resources/groovy/workspace/hello.groovy?raw';
+import { runExtendedClient } from '../../common/client/extendedClient.js';
 import { groovyConfig } from '../config.js';
 
-const code = `package test.org;
-import java.io.File;
-File file = new File("E:/Example.txt");
-`;
-
-const wrapperConfig: WrapperConfig = {
-    $type: 'extended',
-    htmlContainer: document.getElementById('monaco-editor-root')!,
-    logLevel: LogLevel.Debug,
-    vscodeApiConfig: {
-        serviceOverrides: {
-            ...getKeybindingsServiceOverride(),
-        },
-        userConfiguration: {
-            json: JSON.stringify({
-                'workbench.colorTheme': 'Default Dark Modern',
-                'editor.guides.bracketPairsHorizontal': 'active',
-                'editor.wordBasedSuggestions': 'off',
-                'editor.experimental.asyncTokenization': true
-            })
-        }
-    },
-    editorAppConfig: {
-        codeResources: {
-            modified: {
-                text: code,
-                uri: '/workspace/test.groovy'
-            }
-        },
-        monacoWorkerFactory: configureDefaultWorkerFactory
-    },
-    languageClientConfigs: {
-        configs: {
-            groovy: {
-                clientOptions: {
-                    documentSelector: ['groovy']
-                },
-                connection: {
-                    options: {
-                        $type: 'WebSocketUrl',
-                        url: `ws://localhost:${groovyConfig.port}${groovyConfig.path}`
-                    }
-                }
-            }
-        }
-    }
-};
-
-export const runGroovyClient = () => {
-    const wrapper = new MonacoEditorLanguageClientWrapper();
-
-    try {
-        document.querySelector('#button-start')?.addEventListener('click', async () => {
-            await wrapper.initAndStart(wrapperConfig);
-        });
-        document.querySelector('#button-dispose')?.addEventListener('click', async () => {
-            await wrapper.dispose();
-        });
-    } catch (e) {
-        console.error(e);
-    }
+export const runGroovyClient = async () => {
+    await runExtendedClient(groovyConfig, helloGroovyCode);
 };

package/src/groovy/config.ts

@@ -2,8 +2,12 @@
  * Copyright (c) 2024 TypeFox and others.
  * Licensed under the MIT License. See LICENSE in the package root for license information.
  * ------------------------------------------------------------------------------------------ */
-export const groovyConfig = {
+
+import type { ExampleLsConfig } from '../common/client/extendedClient.js';
+
+export const groovyConfig: ExampleLsConfig = {
     port: 30002,
     path: '/groovy',
-    basePath: '/home/gradle/mlc/packages/examples/resources/groovy'
+    basePath: '/home/gradle/mlc/packages/examples/resources/groovy',
+    documentSelector: 'groovy'
 };

package/src/json/client/client.ts

@@ -0,0 +1,14 @@
+/* --------------------------------------------------------------------------------------------
+ * Copyright (c) 2025 TypeFox and others.
+ * Licensed under the MIT License. See LICENSE in the package root for license information.
+ * ------------------------------------------------------------------------------------------ */
+
+// this is required syntax highlighting
+import '@codingame/monaco-vscode-json-default-extension';
+import helloJsonCode from '../../../resources/json/workspace/hello.json?raw';
+import { runExtendedClient } from '../../common/client/extendedClient.js';
+import { jsontLsConfig } from './config.js';
+
+export const runJsonWrapper = async () => {
+    await runExtendedClient(jsontLsConfig, helloJsonCode);
+};

package/src/json/client/config.ts

@@ -0,0 +1,13 @@
+/* --------------------------------------------------------------------------------------------
+ * Copyright (c) 2025 TypeFox and others.
+ * Licensed under the MIT License. See LICENSE in the package root for license information.
+ * ------------------------------------------------------------------------------------------ */
+
+import type { ExampleLsConfig } from '../../common/client/extendedClient.js';
+
+export const jsontLsConfig: ExampleLsConfig = {
+    port: 30000,
+    path: '/sampleServer',
+    basePath: '/home/mlc/packages/examples/resources/json',
+    documentSelector: 'json'
+};

package/src/json/server/main.ts

@@ -36,7 +36,7 @@ export const startMockHttpServerForSavingCodeFromEditor = () => {
     app.post('/save-code', (req, res) => {
         const { code } = req.body;
         console.log('Received code:', code);
-        res.json({ success: true, message: code});
+        res.json({ success: true, message: code });
     });
 
     const PORT = 3003;

package/src/langium/langium-dsl/config/classicConfig.ts

@@ -6,67 +6,83 @@
 import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
 import { LogLevel } from '@codingame/monaco-vscode-api';
 import { MessageTransports } from 'vscode-languageclient';
-import type { Logger } from 'monaco-languageclient/tools';
-import { useWorkerFactory } from 'monaco-languageclient/workerFactory';
-import type { WrapperConfig } from 'monaco-editor-wrapper';
-import { defineDefaultWorkerLoaders } from 'monaco-editor-wrapper/workers/workerLoaders';
+import type { Logger } from 'monaco-languageclient/common';
+import type { MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
+import type { LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
+import { defineDefaultWorkerLoaders, useWorkerFactory } from 'monaco-languageclient/workerFactory';
 import { LangiumMonarchContent } from './langium.monarch.js';
 import code from '../../../../resources/langium/langium-dsl/example.langium?raw';
+import type { ExampleAppConfig } from '../../../common/client/utils.js';
+import type { EditorAppConfig } from 'monaco-languageclient/editorApp';
 
-export const setupLangiumClientClassic = async (params: {
+export const setupLangiumClientClassic = (params: {
     worker: Worker
     messageTransports?: MessageTransports,
-}): Promise<WrapperConfig> => {
+}): ExampleAppConfig => {
+
     const workerLoaders = defineDefaultWorkerLoaders();
     workerLoaders.TextMateWorker = undefined;
-    return {
+
+    const vscodeApiConfig: MonacoVscodeApiConfig = {
         $type: 'classic',
-        htmlContainer: document.getElementById('monaco-editor-root')!,
         logLevel: LogLevel.Debug,
-        vscodeApiConfig: {
-            serviceOverrides: {
-                ...getKeybindingsServiceOverride()
-            }
+        htmlContainer: document.getElementById('monaco-editor-root')!,
+        serviceOverrides: {
+            ...getKeybindingsServiceOverride()
         },
-        editorAppConfig: {
-            codeResources: {
-                modified: {
-                    text: code,
-                    uri: '/workspace/grammar.langium',
-                    enforceLanguageId: 'langium'
-                }
-            },
-            editorOptions: {
-                'semanticHighlighting.enabled': true,
-                wordBasedSuggestions: 'off',
-                theme: 'vs-dark'
-            },
-            languageDef: {
-                monarchLanguage: LangiumMonarchContent,
-                languageExtensionConfig: { id: 'langium' }
+        userConfiguration: {
+            json: JSON.stringify({
+                'workbench.colorTheme': 'GitHub Dark High Contrast',
+                'editor.guides.bracketPairsHorizontal': 'active',
+                'editor.wordBasedSuggestions': 'off',
+                'editor.experimental.asyncTokenization': true,
+                'vitest.disableWorkspaceWarning': true
+            })
+        },
+        monacoWorkerFactory: (logger?: Logger) => {
+            useWorkerFactory({
+                workerLoaders,
+                logger
+            });
+        }
+    };
+
+    const languageClientConfig: LanguageClientConfig = {
+        clientOptions: {
+            documentSelector: ['langium']
+        },
+        connection: {
+            options: {
+                $type: 'WorkerDirect',
+                worker: params.worker
             },
-            monacoWorkerFactory: (logger?: Logger) => {
-                useWorkerFactory({
-                    workerLoaders,
-                    logger
-                });
+            messageTransports: params.messageTransports
+        }
+    };
+
+    const editorAppConfig: EditorAppConfig = {
+        $type: vscodeApiConfig.$type,
+        codeResources: {
+            modified: {
+                text: code,
+                uri: '/workspace/grammar.langium',
+                enforceLanguageId: 'langium'
             }
         },
-        languageClientConfigs: {
-            configs: {
-                langium: {
-                    clientOptions: {
-                        documentSelector: ['langium']
-                    },
-                    connection: {
-                        options: {
-                            $type: 'WorkerDirect',
-                            worker: params.worker
-                        },
-                        messageTransports: params.messageTransports
-                    }
-                }
-            }
+        editorOptions: {
+            'semanticHighlighting.enabled': true,
+            wordBasedSuggestions: 'off',
+            theme: 'vs-dark'
+        },
+        languageDef: {
+            monarchLanguage: LangiumMonarchContent,
+            languageExtensionConfig: { id: 'langium' }
         }
     };
+
+    return {
+        editorAppConfig,
+        vscodeApiConfig,
+        languageClientConfig
+    };
 };