monaco-languageclient-examples 2025.8.3 → 2025.8.4

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

package/src/langium/statemachine/config/wrapperStatemachineConfig.ts

@@ -6,65 +6,62 @@
 import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
 import getLifecycleServiceOverride from '@codingame/monaco-vscode-lifecycle-service-override';
 import getLocalizationServiceOverride from '@codingame/monaco-vscode-localization-service-override';
-import { createDefaultLocaleConfiguration } from 'monaco-languageclient/vscode/services';
 import { LogLevel } from '@codingame/monaco-vscode-api';
 import { MessageTransports } from 'vscode-languageclient';
-import type { CodeContent, LanguageClientConfigs, WrapperConfig } from 'monaco-editor-wrapper';
-import { configureDefaultWorkerFactory } from 'monaco-editor-wrapper/workers/workerLoaders';
+import { createDefaultLocaleConfiguration } from 'monaco-languageclient/vscodeApiLocales';
+import type { MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
+import type { LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
+import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
+import type { CodeContent, EditorAppConfig } from 'monaco-languageclient/editorApp';
 
 // cannot be imported with assert as json contains comments
 import statemachineLanguageConfig from './language-configuration.json?raw';
 import responseStatemachineTm from '../syntaxes/statemachine.tmLanguage.json?raw';
+import type { ExampleAppConfig } from '../../../common/client/utils.js';
 
 export const createLangiumGlobalConfig = (params: {
     languageServerId: string,
-    useLanguageClient: boolean,
     codeContent: CodeContent,
-    worker?: Worker,
+    worker: Worker,
     messagePort?: MessagePort,
     messageTransports?: MessageTransports,
     htmlContainer: HTMLElement
-}): WrapperConfig => {
+}): ExampleAppConfig => {
     const extensionFilesOrContents = new Map<string, string | URL>();
     extensionFilesOrContents.set(`/${params.languageServerId}-statemachine-configuration.json`, statemachineLanguageConfig);
     extensionFilesOrContents.set(`/${params.languageServerId}-statemachine-grammar.json`, responseStatemachineTm);
 
-    const languageClientConfigs: LanguageClientConfigs | undefined = params.useLanguageClient && params.worker ? {
-        configs: {
-            statemachine: {
-                clientOptions: {
-                    documentSelector: ['statemachine']
-                },
-                connection: {
-                    options: {
-                        $type: 'WorkerDirect',
-                        worker: params.worker,
-                        messagePort: params.messagePort,
-                    },
-                    messageTransports: params.messageTransports
-                }
-            }
+    const languageClientConfig: LanguageClientConfig = {
+        clientOptions: {
+            documentSelector: ['statemachine']
+        },
+        connection: {
+            options: {
+                $type: 'WorkerDirect',
+                worker: params.worker,
+                messagePort: params.messagePort,
+            },
+            messageTransports: params.messageTransports
         }
-    } : undefined;
+    };
 
-    return {
+    const vscodeApiConfig: MonacoVscodeApiConfig = {
         $type: 'extended',
         htmlContainer: params.htmlContainer,
         logLevel: LogLevel.Debug,
-        vscodeApiConfig: {
-            serviceOverrides: {
-                ...getKeybindingsServiceOverride(),
-                ...getLifecycleServiceOverride(),
-                ...getLocalizationServiceOverride(createDefaultLocaleConfiguration()),
-            },
-            userConfiguration: {
-                json: JSON.stringify({
-                    'workbench.colorTheme': 'Default Dark Modern',
-                    'editor.guides.bracketPairsHorizontal': 'active',
-                    'editor.wordBasedSuggestions': 'off',
-                    'editor.experimental.asyncTokenization': true
-                })
-            },
+        serviceOverrides: {
+            ...getKeybindingsServiceOverride(),
+            ...getLifecycleServiceOverride(),
+            ...getLocalizationServiceOverride(createDefaultLocaleConfiguration()),
+        },
+        monacoWorkerFactory: configureDefaultWorkerFactory,
+        userConfiguration: {
+            json: JSON.stringify({
+                'workbench.colorTheme': 'Default Dark Modern',
+                'editor.guides.bracketPairsHorizontal': 'active',
+                'editor.wordBasedSuggestions': 'off',
+                'editor.experimental.asyncTokenization': true
+            })
         },
         extensions: [{
             config: {
@@ -89,13 +86,19 @@ export const createLangiumGlobalConfig = (params: {
                 }
             },
             filesOrContents: extensionFilesOrContents
-        }],
-        editorAppConfig: {
-            codeResources: {
-                modified: params.codeContent
-            },
-            monacoWorkerFactory: configureDefaultWorkerFactory
-        },
-        languageClientConfigs
+        }]
+    };
+
+    const editorAppConfig: EditorAppConfig = {
+        $type: vscodeApiConfig.$type,
+        codeResources: {
+            modified: params.codeContent
+        }
+    };
+
+    return {
+        editorAppConfig,
+        vscodeApiConfig,
+        languageClientConfig
     };
 };

package/src/langium/statemachine/launcher.ts

@@ -3,7 +3,7 @@
  * Licensed under the MIT License. See LICENSE in the package root for license information.
  * ------------------------------------------------------------------------------------------ */
 
-import { initLocaleLoader } from 'monaco-editor-wrapper/vscode/locale';
+import { initLocaleLoader } from 'monaco-languageclient/vscodeApiLocales';
 await initLocaleLoader();
 
 const { runStatemachineWrapper } = await import('./main.js');

package/src/langium/statemachine/main-react.tsx

@@ -6,7 +6,7 @@
 import React, { StrictMode, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserMessageReader, BrowserMessageWriter } from 'vscode-languageclient/browser.js';
-import type { TextContents } from 'monaco-editor-wrapper';
+import type { TextContents } from 'monaco-languageclient/editorApp';
 import { MonacoEditorReactComp } from '@typefox/monaco-editor-react';
 import { createLangiumGlobalConfig } from './config/wrapperStatemachineConfig.js';
 import { loadStatemachineWorkerRegular } from './main.js';
@@ -20,9 +20,8 @@ export const runStatemachineReact = async () => {
     reader.listen((message) => {
         console.log('Received message from worker:', message);
     });
-    const wrapperConfig = createLangiumGlobalConfig({
+    const appConfig = createLangiumGlobalConfig({
         languageServerId: 'react',
-        useLanguageClient: true,
         codeContent: {
             text,
             uri: '/workspace/example.statemachine'
@@ -62,7 +61,8 @@ export const runStatemachineReact = async () => {
                         <div style={{ 'height': height }} >
                             <MonacoEditorReactComp
                                 style={{ 'height': '100%' }}
-                                wrapperConfig={wrapperConfig}
+                                vscodeApiConfig={appConfig.vscodeApiConfig}
+                                editorAppConfig={appConfig.editorAppConfig}
                                 onTextChanged={onTextChanged}
                             />
                             <b>Debug:</b><br />{testState}

package/src/langium/statemachine/main.ts

@@ -5,22 +5,26 @@
 
 import * as vscode from 'vscode';
 import { BrowserMessageReader, BrowserMessageWriter } from 'vscode-languageclient/browser.js';
-import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
+import { EditorApp } from 'monaco-languageclient/editorApp';
 import { createLangiumGlobalConfig } from './config/wrapperStatemachineConfig.js';
 import workerUrl from './worker/statemachine-server?worker&url';
 import workerPortUrl from './worker/statemachine-server-port?worker&url';
 import text from '../../../resources/langium/statemachine/example.statemachine?raw';
 import textMod from '../../../resources/langium/statemachine/example-mod.statemachine?raw';
-import { delayExecution, disableElement } from '../../common/client/utils.js';
+import { disableElement } from '../../common/client/utils.js';
+import { delayExecution } from 'monaco-languageclient/common';
+import { MonacoVscodeApiWrapper } from 'monaco-languageclient/vscodeApiWrapper';
+import { LanguageClientWrapper } from 'monaco-languageclient/lcwrapper';
 
-const wrapper = new MonacoEditorLanguageClientWrapper();
-const wrapper2 = new MonacoEditorLanguageClientWrapper();
+let editorApp: EditorApp | undefined;
+let editorApp2: EditorApp | undefined;
+let lcWrapper: LanguageClientWrapper;
 
 const startEditor = async () => {
     disableElement('button-start', true);
     disableElement('button-dispose', false);
 
-    if (wrapper.isStarted() && wrapper2.isStarted()) {
+    if (editorApp?.isStarted() === true || editorApp2?.isStarted() === true) {
         alert('Editor was already started!');
         return;
     }
@@ -43,39 +47,49 @@ const startEditor = async () => {
     });
 
     // the configuration does not contain any text content
-    const langiumGlobalConfig = createLangiumGlobalConfig({
+    const appConfig = createLangiumGlobalConfig({
         languageServerId: 'first',
         codeContent: {
             text,
             uri: '/workspace/example.statemachine'
         },
-        useLanguageClient: true,
         worker: stateMachineWorkerPort,
         messagePort: channel.port1,
         messageTransports: { reader, writer },
         htmlContainer: document.getElementById('monaco-editor-root')!
     });
-    await wrapper.initAndStart(langiumGlobalConfig);
+    editorApp = new EditorApp(appConfig.editorAppConfig);
 
-    wrapper.updateCodeResources({
+    // perform global init
+    const apiWrapper = new MonacoVscodeApiWrapper(appConfig.vscodeApiConfig);
+    await apiWrapper.init();
+
+    // init language client
+    lcWrapper = new LanguageClientWrapper(appConfig.languageClientConfig);
+    await lcWrapper.start();
+
+    // run editorApp
+    await editorApp.start(appConfig.vscodeApiConfig.htmlContainer!);
+
+    editorApp.updateCodeResources({
         modified: {
             text,
             uri: '/workspace/statemachine-mod.statemachine'
         }
     });
 
-    // start the second wrapper without any languageclient config
+    // start the second editorApp without any languageclient config
     // => they share the language server and both text contents have different uris
-    const langiumGlobalConfig2 = createLangiumGlobalConfig({
-        languageServerId: 'second',
-        useLanguageClient: false,
-        codeContent: {
-            text: textMod,
-            uri: '/workspace/example-mod.statemachine'
-        },
-        htmlContainer: document.getElementById('monaco-editor-root2')!
-    });
-    await wrapper2.initAndStart(langiumGlobalConfig2);
+    const appConfig2 = appConfig;
+    appConfig2.editorAppConfig.codeResources!.modified = {
+        text: textMod,
+        uri: '/workspace/example-mod.statemachine'
+    };
+    appConfig2.vscodeApiConfig.htmlContainer = document.getElementById('monaco-editor-root2')!;
+    editorApp2 = new EditorApp(appConfig2.editorAppConfig);
+
+    // run editorApp
+    await editorApp2.start(appConfig2.vscodeApiConfig.htmlContainer);
 
     vscode.commands.getCommands().then((x) => {
         console.log('Currently registered # of vscode commands: ' + x.length);
@@ -83,7 +97,7 @@ const startEditor = async () => {
 
     await delayExecution(1000);
 
-    wrapper.updateCodeResources({
+    editorApp.updateCodeResources({
         modified: {
             text: `// modified file\n\n${text}`,
             uri: '/workspace/statemachine-mod2.statemachine'
@@ -95,13 +109,15 @@ const disposeEditor = async () => {
     disableElement('button-start', false);
     disableElement('button-dispose', true);
 
-    wrapper.reportStatus();
-    await wrapper.dispose();
-    console.log(wrapper.reportStatus().join('\n'));
+    lcWrapper.dispose();
+
+    editorApp?.reportStatus();
+    await editorApp?.dispose();
+    console.log(editorApp?.reportStatus().join('\n'));
 
-    wrapper2.reportStatus();
-    await wrapper2.dispose();
-    console.log(wrapper2.reportStatus().join('\n'));
+    editorApp2?.reportStatus();
+    await editorApp2?.dispose();
+    console.log(editorApp2?.reportStatus().join('\n'));
 };
 
 export const runStatemachineWrapper = async () => {

package/src/multi/config.ts

@@ -4,8 +4,8 @@
  * ------------------------------------------------------------------------------------------ */
 
 import * as vscode from 'vscode';
-import { MonacoLanguageClient } from 'monaco-languageclient';
-import type { LanguageClientConfig } from 'monaco-editor-wrapper';
+import type { LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
+import type { BaseLanguageClient } from 'vscode-languageclient/browser.js';
 
 export const createJsonLanguageClientConfig: () => LanguageClientConfig = () => {
     return {
@@ -38,7 +38,7 @@ export const createPythonLanguageClientConfig: () => LanguageClientConfig = () =
                     authorization: 'UserAuth'
                 },
                 startOptions: {
-                    onCall: (languageClient?: MonacoLanguageClient) => {
+                    onCall: (languageClient?: BaseLanguageClient) => {
                         setTimeout(() => {
                             ['pyright.restartserver', 'pyright.organizeimports'].forEach((cmdName) => {
                                 vscode.commands.registerCommand(cmdName, (...args: unknown[]) => {