monaco-languageclient-examples 2025.6.1 → 2025.6.3

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) 2024 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) 2024 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
+    };
 };

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

@@ -7,39 +7,42 @@ import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-
 import { LogLevel } from '@codingame/monaco-vscode-api';
 import '../../../../resources/vsix/github-vscode-theme.vsix';
 import { MessageTransports } from 'vscode-languageclient';
-import type { WrapperConfig } from 'monaco-editor-wrapper';
-import { configureDefaultWorkerFactory } from 'monaco-editor-wrapper/workers/workerLoaders';
+import type { MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
+import type { LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
+import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
 import langiumLanguageConfig from './langium.configuration.json?raw';
 import langiumTextmateGrammar from './langium.tmLanguage.json?raw';
 import text 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 setupLangiumClientExtended = async (params: {
+export const setupLangiumClientExtended = (params: {
     worker: Worker
     messageTransports?: MessageTransports,
-}): Promise<WrapperConfig> => {
+}): ExampleAppConfig => {
 
     const extensionFilesOrContents = new Map<string, string | URL>();
     // vite build is easier with string content
     extensionFilesOrContents.set('/langium-configuration.json', langiumLanguageConfig);
     extensionFilesOrContents.set('/langium-grammar.json', langiumTextmateGrammar);
-    return {
+
+    const vscodeApiConfig: MonacoVscodeApiConfig = {
         $type: 'extended',
-        htmlContainer: document.getElementById('monaco-editor-root')!,
         logLevel: LogLevel.Debug,
-        vscodeApiConfig: {
-            serviceOverrides: {
-                ...getKeybindingsServiceOverride()
-            },
-            userConfiguration: {
-                json: JSON.stringify({
-                    'workbench.colorTheme': 'GitHub Dark High Contrast',
-                    'editor.guides.bracketPairsHorizontal': 'active',
-                    'editor.wordBasedSuggestions': 'off',
-                    'editor.experimental.asyncTokenization': true,
-                    'vitest.disableWorkspaceWarning': true
-                })
-            }
+        htmlContainer: document.getElementById('monaco-editor-root')!,
+        serviceOverrides: {
+            ...getKeybindingsServiceOverride()
+        },
+        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: configureDefaultWorkerFactory,
         extensions: [{
             config: {
                 name: 'langium-example',
@@ -63,31 +66,35 @@ export const setupLangiumClientExtended = async (params: {
                 }
             },
             filesOrContents: extensionFilesOrContents
-        }],
-        editorAppConfig: {
-            codeResources: {
-                modified: {
-                    text,
-                    uri: '/workspace/grammar.langium'
-                }
-            },
-            monacoWorkerFactory: configureDefaultWorkerFactory
+        }]
+    };
+
+    const languageClientConfig: LanguageClientConfig = {
+        clientOptions: {
+            documentSelector: ['langium']
         },
-        languageClientConfigs: {
-            configs: {
-                langium: {
-                    clientOptions: {
-                        documentSelector: ['langium']
-                    },
-                    connection: {
-                        options: {
-                            $type: 'WorkerDirect',
-                            worker: params.worker
-                        },
-                        messageTransports: params.messageTransports
-                    }
-                }
+        connection: {
+            options: {
+                $type: 'WorkerDirect',
+                worker: params.worker
+            },
+            messageTransports: params.messageTransports
+        }
+    };
+
+    const editorAppConfig: EditorAppConfig = {
+        $type: vscodeApiConfig.$type,
+        codeResources: {
+            modified: {
+                text,
+                uri: '/workspace/grammar.langium'
             }
         }
     };
+
+    return {
+        editorAppConfig,
+        vscodeApiConfig,
+        languageClientConfig
+    };
 };

package/src/langium/langium-dsl/wrapperLangium.ts

@@ -4,16 +4,19 @@
  * ------------------------------------------------------------------------------------------ */
 
 import { BrowserMessageReader, BrowserMessageWriter } from 'vscode-languageclient/browser.js';
-import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
+import { delayExecution } from 'monaco-languageclient/common';
+import { EditorApp } from 'monaco-languageclient/editorApp';
 import { setupLangiumClientExtended } from './config/extendedConfig.js';
 import { setupLangiumClientClassic } from './config/classicConfig.js';
-import { delayExecution, disableElement } from '../../common/client/utils.js';
+import { disableElement, type ExampleAppConfig } from '../../common/client/utils.js';
 import text from '../../../resources/langium/langium-dsl/example.langium?raw';
 import workerUrl from './worker/langium-server?worker&url';
+import { MonacoVscodeApiWrapper } from 'monaco-languageclient/vscodeApiWrapper';
+import { LanguageClientWrapper } from 'monaco-languageclient/lcwrapper';
 
 export const runLangiumDslWrapper = async (extendedMode: boolean) => {
     try {
-        let wrapper: MonacoEditorLanguageClientWrapper | undefined;
+        let editorApp: EditorApp | undefined;
 
         const loadLangiumWorker = () => {
             console.log(`Langium worker URL: ${workerUrl}`);
@@ -24,7 +27,7 @@ export const runLangiumDslWrapper = async (extendedMode: boolean) => {
         };
 
         const checkStarted = () => {
-            if (wrapper?.isStarted() ?? false) {
+            if (editorApp?.isStarted() ?? false) {
                 alert('Editor was already started!\nPlease reload the page to test the alternative editor.');
                 return true;
             }
@@ -42,24 +45,32 @@ export const runLangiumDslWrapper = async (extendedMode: boolean) => {
                 console.log('Received message from worker:', message);
             });
 
+            let appConfig: ExampleAppConfig;
             if (extendedMode) {
-                const config = await setupLangiumClientExtended({
+                appConfig = setupLangiumClientExtended({
                     worker,
                     messageTransports: { reader, writer }
                 });
-                wrapper = new MonacoEditorLanguageClientWrapper();
-                await wrapper.initAndStart(config);
             } else {
-                const config = await setupLangiumClientClassic({
+                appConfig = setupLangiumClientClassic({
                     worker,
                     messageTransports: { reader, writer }
                 });
-                wrapper = new MonacoEditorLanguageClientWrapper();
-                await wrapper.initAndStart(config);
             }
+            // perform global init
+            const apiWrapper = new MonacoVscodeApiWrapper(appConfig.vscodeApiConfig);
+            await apiWrapper.init();
+
+            // init language client
+            const lcWrapper = new LanguageClientWrapper(appConfig.languageClientConfig);
+            await lcWrapper.start();
+
+            // run editorApp
+            editorApp = new EditorApp(appConfig.editorAppConfig);
+            await editorApp.start(appConfig.vscodeApiConfig.htmlContainer!);
 
             await delayExecution(1000);
-            await wrapper.updateCodeResources({
+            await editorApp.updateCodeResources({
                 modified: {
                     text: `// modified file\n\n${text}`,
                     uri: '/workspace/mod.langium',
@@ -69,10 +80,9 @@ export const runLangiumDslWrapper = async (extendedMode: boolean) => {
         };
 
         const disposeEditor = async () => {
-            if (!wrapper) return;
-            wrapper.reportStatus();
-            await wrapper.dispose();
-            wrapper = undefined;
+            editorApp?.reportStatus();
+            await editorApp?.dispose();
+            editorApp = undefined;
             disableElement('button-start', false);
         };