monaco-languageclient-examples 2025.8.3 → 2025.8.5

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'
@@ -57,12 +56,19 @@ export const runStatemachineReact = async () => {
                     return () => clearTimeout(timer);
                 }, []);
 
+                const languageClientConfigs = {
+                    configs: {
+                        langium: appConfig.languageClientConfig
+                    }
+                };
                 return (
                     <>
                         <div style={{ 'height': height }} >
                             <MonacoEditorReactComp
                                 style={{ 'height': '100%' }}
-                                wrapperConfig={wrapperConfig}
+                                vscodeApiConfig={appConfig.vscodeApiConfig}
+                                editorAppConfig={appConfig.editorAppConfig}
+                                languageClientConfigs={languageClientConfigs}
                                 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[]) => {

package/src/multi/twoLanguageClients.ts

@@ -9,10 +9,12 @@ import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-
 import '@codingame/monaco-vscode-json-default-extension';
 import '@codingame/monaco-vscode-python-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 { EditorApp, type EditorAppConfig } from 'monaco-languageclient/editorApp';
+import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
 import { disableElement } from '../common/client/utils.js';
 import { createJsonLanguageClientConfig, createPythonLanguageClientConfig } from './config.js';
+import { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
+import { LanguageClientsManager } from 'monaco-languageclient/lcwrapper';
 
 export const runMultipleLanguageClientsExample = async () => {
     disableElement('button-flip', true);
@@ -31,64 +33,63 @@ print("Hello Moon!")
     let currentText = textJson;
     let currenFileExt = 'json';
 
-    const wrapperConfig: WrapperConfig = {
-        id: '42',
+    const htmlContainer = document.getElementById('monaco-editor-root')!;
+    const vscodeApiConfig: MonacoVscodeApiConfig = {
         $type: 'extended',
-        htmlContainer: document.getElementById('monaco-editor-root')!,
+        htmlContainer,
         logLevel: LogLevel.Debug,
-        vscodeApiConfig: {
-            serviceOverrides: {
-                ...getKeybindingsServiceOverride()
-            },
-            userConfiguration: {
-                json: JSON.stringify({
-                    'workbench.colorTheme': 'Default Dark Modern',
-                    'editor.wordBasedSuggestions': 'off',
-                    'editor.experimental.asyncTokenization': true
-                })
-            }
+        serviceOverrides: {
+            ...getKeybindingsServiceOverride()
         },
-        editorAppConfig: {
-            codeResources: {
-                modified: {
-                    text: currentText,
-                    uri: `/workspace/example.${currenFileExt}`
-                }
-            },
-            monacoWorkerFactory: configureDefaultWorkerFactory
+        userConfiguration: {
+            json: JSON.stringify({
+                'workbench.colorTheme': 'Default Dark Modern',
+                'editor.wordBasedSuggestions': 'off',
+                'editor.experimental.asyncTokenization': true
+            })
         },
-        languageClientConfigs: {
-            configs: {
-                json: createJsonLanguageClientConfig(),
-                python: createPythonLanguageClientConfig()
+        monacoWorkerFactory: configureDefaultWorkerFactory
+    };
+
+    const editorAppConfig: EditorAppConfig = {
+        $type: vscodeApiConfig.$type,
+        id: '42',
+        codeResources: {
+            modified: {
+                text: currentText,
+                uri: `/workspace/example.${currenFileExt}`
             }
         }
     };
 
-    const wrapper = new MonacoEditorLanguageClientWrapper();
+    // perform global init
+    const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
+    await apiWrapper.init();
+
+    const lcManager = new LanguageClientsManager();
+    const languageClientConfigs = {
+        configs: {
+            json: createJsonLanguageClientConfig(),
+            python: createPythonLanguageClientConfig()
+        }
+    };
+
+    const editorApp = new EditorApp(editorAppConfig);
 
     document.querySelector('#button-start')?.addEventListener('click', async () => {
         try {
             disableElement('button-start', true);
             disableElement('button-flip', false);
-            disableElement('checkbox-extlc', true);
-
-            const externalLc = (document.getElementById('checkbox-extlc') as HTMLInputElement).checked;
-            wrapperConfig.languageClientConfigs!.automaticallyInit = !externalLc;
-            wrapperConfig.languageClientConfigs!.automaticallyStart = !externalLc;
-            wrapperConfig.languageClientConfigs!.automaticallyDispose = !externalLc;
 
-            await wrapper.initAndStart(wrapperConfig);
-            if (wrapperConfig.editorAppConfig?.codeResources?.modified !== undefined) {
-                wrapperConfig.editorAppConfig.codeResources.modified.text = currentText;
-                wrapperConfig.editorAppConfig.codeResources.modified.uri = `/workspace/example.${currenFileExt}`;
+            await editorApp.start(htmlContainer);
+            if (editorAppConfig.codeResources?.modified !== undefined) {
+                editorAppConfig.codeResources.modified.text = currentText;
+                editorAppConfig.codeResources.modified.uri = `/workspace/example.${currenFileExt}`;
             }
 
-            // init language clients after start
-            if (externalLc) {
-                wrapper.initLanguageClients();
-                await wrapper.startLanguageClients();
-            }
+            // init and start language clients after start
+            await lcManager.setConfigs(languageClientConfigs);
+            await lcManager.start();
         } catch (e) {
             console.error(e);
         }
@@ -98,18 +99,13 @@ print("Hello Moon!")
         disableElement('button-dispose', true);
         disableElement('button-start', false);
 
-        const externalLc = (document.getElementById('checkbox-extlc')! as HTMLInputElement).checked;
-
-        await wrapper.dispose();
-
-        if (externalLc) {
-            wrapper.disposeLanguageClients();
-        }
+        await editorApp.dispose();
+        await lcManager.dispose();
     });
     document.querySelector('#button-flip')?.addEventListener('click', async () => {
         currentText = currentText === textJson ? textPython : textJson;
         currenFileExt = currenFileExt === 'json' ? 'py' : 'json';
-        wrapper.updateCodeResources({
+        editorApp.updateCodeResources({
             modified: {
                 text: currentText,
                 uri: `/workspace/example.${currenFileExt}`

package/src/node.ts

@@ -6,6 +6,3 @@
 /* server side export only */
 export * from './common/node/server-commons.js';
 export * from './common/node/language-server-runner.js';
-export * from './json/server/json-server.js';
-export * from './json/server/main.js';
-export * from './python/server/main.js';