monaco-languageclient-examples 2025.6.3 → 2025.8.2

package/src/langium/statemachine/main.ts

@@ -5,26 +5,22 @@
 
 import * as vscode from 'vscode';
 import { BrowserMessageReader, BrowserMessageWriter } from 'vscode-languageclient/browser.js';
-import { EditorApp } from 'monaco-languageclient/editorApp';
+import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
 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 { disableElement } from '../../common/client/utils.js';
-import { delayExecution } from 'monaco-languageclient/common';
-import { MonacoVscodeApiWrapper } from 'monaco-languageclient/vscodeApiWrapper';
-import { LanguageClientWrapper } from 'monaco-languageclient/lcwrapper';
+import { delayExecution, disableElement } from '../../common/client/utils.js';
 
-let editorApp: EditorApp | undefined;
-let editorApp2: EditorApp | undefined;
-let lcWrapper: LanguageClientWrapper;
+const wrapper = new MonacoEditorLanguageClientWrapper();
+const wrapper2 = new MonacoEditorLanguageClientWrapper();
 
 const startEditor = async () => {
     disableElement('button-start', true);
     disableElement('button-dispose', false);
 
-    if (editorApp?.isStarted() === true || editorApp2?.isStarted() === true) {
+    if (wrapper.isStarted() && wrapper2.isStarted()) {
         alert('Editor was already started!');
         return;
     }
@@ -47,49 +43,39 @@ const startEditor = async () => {
     });
 
     // the configuration does not contain any text content
-    const appConfig = createLangiumGlobalConfig({
+    const langiumGlobalConfig = 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')!
     });
-    editorApp = new EditorApp(appConfig.editorAppConfig);
+    await wrapper.initAndStart(langiumGlobalConfig);
 
-    // 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({
+    wrapper.updateCodeResources({
         modified: {
             text,
             uri: '/workspace/statemachine-mod.statemachine'
         }
     });
 
-    // start the second editorApp without any languageclient config
+    // start the second wrapper without any languageclient config
     // => they share the language server and both text contents have different uris
-    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);
+    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);
 
     vscode.commands.getCommands().then((x) => {
         console.log('Currently registered # of vscode commands: ' + x.length);
@@ -97,7 +83,7 @@ const startEditor = async () => {
 
     await delayExecution(1000);
 
-    editorApp.updateCodeResources({
+    wrapper.updateCodeResources({
         modified: {
             text: `// modified file\n\n${text}`,
             uri: '/workspace/statemachine-mod2.statemachine'
@@ -109,15 +95,13 @@ const disposeEditor = async () => {
     disableElement('button-start', false);
     disableElement('button-dispose', true);
 
-    lcWrapper.dispose();
-
-    editorApp?.reportStatus();
-    await editorApp?.dispose();
-    console.log(editorApp?.reportStatus().join('\n'));
+    wrapper.reportStatus();
+    await wrapper.dispose();
+    console.log(wrapper.reportStatus().join('\n'));
 
-    editorApp2?.reportStatus();
-    await editorApp2?.dispose();
-    console.log(editorApp2?.reportStatus().join('\n'));
+    wrapper2.reportStatus();
+    await wrapper2.dispose();
+    console.log(wrapper2.reportStatus().join('\n'));
 };
 
 export const runStatemachineWrapper = async () => {

package/src/multi/config.ts

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

package/src/multi/twoLanguageClients.ts

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

package/src/node.ts

@@ -6,6 +6,6 @@
 /* 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';
+export * from './json/server/json-server.js';
+export * from './json/server/main.js';
+export * from './python/server/main.js';

package/src/python/client/config.ts

@@ -21,14 +21,13 @@ import getTestingServiceOverride from '@codingame/monaco-vscode-testing-service-
 import getBannerServiceOverride from '@codingame/monaco-vscode-view-banner-service-override';
 import getStatusBarServiceOverride from '@codingame/monaco-vscode-view-status-bar-service-override';
 import getTitleBarServiceOverride from '@codingame/monaco-vscode-view-title-bar-service-override';
-import type { EditorAppConfig } from 'monaco-languageclient/editorApp';
-import { createUrl } from 'monaco-languageclient/common';
-import type { LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
-import { createDefaultLocaleConfiguration } from 'monaco-languageclient/vscodeApiLocales';
-import { defaultHtmlAugmentationInstructions, defaultViewsInit, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
-import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
+import type { WrapperConfig } from 'monaco-editor-wrapper';
+import { defaultHtmlAugmentationInstructions, defaultViewsInit } from 'monaco-editor-wrapper/vscode/services';
+import { configureDefaultWorkerFactory } from 'monaco-editor-wrapper/workers/workerLoaders';
+import { MonacoLanguageClient } from 'monaco-languageclient';
+import { createUrl } from 'monaco-languageclient/tools';
+import { createDefaultLocaleConfiguration } from 'monaco-languageclient/vscode/services';
 import * as vscode from 'vscode';
-import type { BaseLanguageClient } from 'vscode-languageclient/browser.js';
 import { toSocket, WebSocketMessageReader, WebSocketMessageWriter } from 'vscode-ws-jsonrpc';
 import badPyCode from '../../../resources/python/bad.py?raw';
 import helloPyCode from '../../../resources/python/hello.py?raw';
@@ -68,7 +67,7 @@ export const createDefaultConfigParams = (homeDir: string, htmlContainer?: HTMLE
     fileSystemProvider.registerFile(new RegisteredMemoryFile(files.get('hello.py')!.uri, helloPyCode));
     fileSystemProvider.registerFile(new RegisteredMemoryFile(files.get('hello2.py')!.uri, hello2PyCode));
     fileSystemProvider.registerFile(new RegisteredMemoryFile(files.get('bad.py')!.uri, badPyCode));
-    fileSystemProvider.registerFile(new RegisteredMemoryFile(configParams.workspaceFile, createDefaultWorkspaceContent(workspaceRoot)));
+    fileSystemProvider.registerFile(new RegisteredMemoryFile(configParams.workspaceFile, createDefaultWorkspaceContent(configParams.workspaceRoot)));
     fileSystemProvider.registerFile(createDebugLaunchConfigFile(workspaceRoot, configParams.languageId));
     registerFileSystemOverlay(1, fileSystemProvider);
 
@@ -76,13 +75,11 @@ export const createDefaultConfigParams = (homeDir: string, htmlContainer?: HTMLE
 };
 
 export type PythonAppConfig = {
-    languageClientConfig: LanguageClientConfig;
-    vscodeApiConfig: MonacoVscodeApiConfig;
-    editorAppConfig: EditorAppConfig;
+    wrapperConfig: WrapperConfig;
     configParams: ConfigParams;
 }
 
-export const createPythonAppConfig = (): PythonAppConfig => {
+export const createWrapperConfig = (): PythonAppConfig => {
     const configParams = createDefaultConfigParams('/home/mlc', document.body);
 
     const url = createUrl({
@@ -99,65 +96,101 @@ export const createPythonAppConfig = (): PythonAppConfig => {
     const reader = new WebSocketMessageReader(iWebSocket);
     const writer = new WebSocketMessageWriter(iWebSocket);
 
-    const vscodeApiConfig: MonacoVscodeApiConfig = {
+    const wrapperConfig: WrapperConfig = {
         $type: 'extended',
         htmlContainer: configParams.htmlContainer,
         logLevel: LogLevel.Debug,
-        serviceOverrides: {
-            ...getKeybindingsServiceOverride(),
-            ...getLifecycleServiceOverride(),
-            ...getLocalizationServiceOverride(createDefaultLocaleConfiguration()),
-            ...getBannerServiceOverride(),
-            ...getStatusBarServiceOverride(),
-            ...getTitleBarServiceOverride(),
-            ...getExplorerServiceOverride(),
-            ...getRemoteAgentServiceOverride(),
-            ...getEnvironmentServiceOverride(),
-            ...getSecretStorageServiceOverride(),
-            ...getStorageServiceOverride(),
-            ...getSearchServiceOverride(),
-            ...getDebugServiceOverride(),
-            ...getTestingServiceOverride(),
-            ...getPreferencesServiceOverride()
-        },
-        viewsConfig: {
-            viewServiceType: 'ViewsService',
-            htmlAugmentationInstructions: defaultHtmlAugmentationInstructions,
-            viewsInitFunc: defaultViewsInit
-        },
-        userConfiguration: {
-            json: JSON.stringify({
-                'workbench.colorTheme': 'Default Dark Modern',
-                'editor.guides.bracketPairsHorizontal': 'active',
-                'editor.wordBasedSuggestions': 'off',
-                'editor.experimental.asyncTokenization': true,
-                'debug.toolBarLocation': 'docked'
-            })
+        languageClientConfigs: {
+            configs: {
+                python: {
+                    name: 'Python Language Server Example',
+                    connection: {
+                        options: {
+                            $type: 'WebSocketDirect',
+                            webSocket: webSocket,
+                            startOptions: {
+                                onCall: (languageClient?: MonacoLanguageClient) => {
+                                    setTimeout(() => {
+                                        ['pyright.restartserver', 'pyright.organizeimports'].forEach((cmdName) => {
+                                            vscode.commands.registerCommand(cmdName, (...args: unknown[]) => {
+                                                languageClient?.sendRequest('workspace/executeCommand', { command: cmdName, arguments: args });
+                                            });
+                                        });
+                                    }, 250);
+                                },
+                                reportStatus: true,
+                            }
+                        },
+                        messageTransports: { reader, writer }
+                    },
+                    clientOptions: {
+                        documentSelector: [configParams.languageId],
+                        workspaceFolder: {
+                            index: 0,
+                            name: configParams.workspaceRoot,
+                            uri: vscode.Uri.parse(configParams.workspaceRoot)
+                        },
+                    }
+                }
+            }
         },
-        workspaceConfig: {
-            enableWorkspaceTrust: true,
-            windowIndicator: {
-                label: 'mlc-python-example',
-                tooltip: '',
-                command: ''
+        vscodeApiConfig: {
+            serviceOverrides: {
+                ...getKeybindingsServiceOverride(),
+                ...getLifecycleServiceOverride(),
+                ...getLocalizationServiceOverride(createDefaultLocaleConfiguration()),
+                ...getBannerServiceOverride(),
+                ...getStatusBarServiceOverride(),
+                ...getTitleBarServiceOverride(),
+                ...getExplorerServiceOverride(),
+                ...getRemoteAgentServiceOverride(),
+                ...getEnvironmentServiceOverride(),
+                ...getSecretStorageServiceOverride(),
+                ...getStorageServiceOverride(),
+                ...getSearchServiceOverride(),
+                ...getDebugServiceOverride(),
+                ...getTestingServiceOverride(),
+                ...getPreferencesServiceOverride()
             },
-            workspaceProvider: {
-                trusted: true,
-                async open() {
-                    window.open(window.location.href);
-                    return true;
+            viewsConfig: {
+                viewServiceType: 'ViewsService',
+                htmlAugmentationInstructions: defaultHtmlAugmentationInstructions,
+                viewsInitFunc: defaultViewsInit
+            },
+            userConfiguration: {
+                json: JSON.stringify({
+                    'workbench.colorTheme': 'Default Dark Modern',
+                    'editor.guides.bracketPairsHorizontal': 'active',
+                    'editor.wordBasedSuggestions': 'off',
+                    'editor.experimental.asyncTokenization': true,
+                    'debug.toolBarLocation': 'docked'
+                })
+            },
+            workspaceConfig: {
+                enableWorkspaceTrust: true,
+                windowIndicator: {
+                    label: 'mlc-python-example',
+                    tooltip: '',
+                    command: ''
+                },
+                workspaceProvider: {
+                    trusted: true,
+                    async open() {
+                        window.open(window.location.href);
+                        return true;
+                    },
+                    workspace: {
+                        workspaceUri: configParams.workspaceFile
+                    }
+                },
+                configurationDefaults: {
+                    'window.title': 'mlc-python-example${separator}${dirty}${activeEditorShort}'
                 },
-                workspace: {
-                    workspaceUri: configParams.workspaceFile
+                productConfiguration: {
+                    nameShort: 'mlc-python-example',
+                    nameLong: 'mlc-python-example'
                 }
             },
-            configurationDefaults: {
-                'window.title': 'mlc-python-example${separator}${dirty}${activeEditorShort}'
-            },
-            productConfiguration: {
-                nameShort: 'mlc-python-example',
-                nameLong: 'mlc-python-example'
-            }
         },
         extensions: [
             {
@@ -172,48 +205,13 @@ export const createPythonAppConfig = (): PythonAppConfig => {
             },
             provideDebuggerExtensionConfig(configParams)
         ],
-        monacoWorkerFactory: configureDefaultWorkerFactory
-    };
-
-    const languageClientConfig: LanguageClientConfig = {
-        name: 'Python Language Server Example',
-        connection: {
-            options: {
-                $type: 'WebSocketDirect',
-                webSocket: webSocket,
-                startOptions: {
-                    onCall: (languageClient?: BaseLanguageClient) => {
-                        setTimeout(() => {
-                            ['pyright.restartserver', 'pyright.organizeimports'].forEach((cmdName) => {
-                                vscode.commands.registerCommand(cmdName, (...args: unknown[]) => {
-                                    languageClient?.sendRequest('workspace/executeCommand', { command: cmdName, arguments: args });
-                                });
-                            });
-                        }, 250);
-                    },
-                    reportStatus: true,
-                }
-            },
-            messageTransports: { reader, writer }
-        },
-        clientOptions: {
-            documentSelector: [configParams.languageId],
-            workspaceFolder: {
-                index: 0,
-                name: configParams.workspaceRoot,
-                uri: vscode.Uri.parse(configParams.workspaceRoot)
-            },
+        editorAppConfig: {
+            monacoWorkerFactory: configureDefaultWorkerFactory
         }
     };
 
-    const editorAppConfig: EditorAppConfig = {
-        $type: vscodeApiConfig.$type
-    };
-
     return {
-        vscodeApiConfig,
-        languageClientConfig,
-        editorAppConfig,
+        wrapperConfig,
         configParams: configParams
     };
 };

package/src/python/client/main.ts

@@ -3,41 +3,32 @@
  * Licensed under the MIT License. See LICENSE in the package root for license information.
  * ------------------------------------------------------------------------------------------ */
 
-import { type RegisterLocalProcessExtensionResult } from '@codingame/monaco-vscode-api/extensions';
-import { EditorApp } from 'monaco-languageclient/editorApp';
-import { LanguageClientWrapper } from 'monaco-languageclient/lcwrapper';
-import { MonacoVscodeApiWrapper } from 'monaco-languageclient/vscodeApiWrapper';
 import * as vscode from 'vscode';
+import { type RegisterLocalProcessExtensionResult } from '@codingame/monaco-vscode-api/extensions';
+import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
+import { createWrapperConfig } from './config.js';
 import { configureDebugging } from '../../debugger/client/debugger.js';
-import { createPythonAppConfig } from './config.js';
 
 export const runPythonWrapper = async () => {
-    const appConfig = createPythonAppConfig();
-
-    // perform global init
-    const apiWrapper = new MonacoVscodeApiWrapper(appConfig.vscodeApiConfig);
-    await apiWrapper.init();
-
-    const lcWrapper = new LanguageClientWrapper(appConfig.languageClientConfig);
+    const appConfig = createWrapperConfig();
+    const wrapper = new MonacoEditorLanguageClientWrapper();
 
-    const editorApp = new EditorApp(appConfig.editorAppConfig);
-
-    if (editorApp.isStarted()) {
+    if (wrapper.isStarted()) {
         console.warn('Editor was already started!');
     } else {
-        const result = apiWrapper.getExtensionRegisterResult('mlc-python-example') as RegisterLocalProcessExtensionResult;
+        await wrapper.init(appConfig.wrapperConfig);
+
+        const result = wrapper.getExtensionRegisterResult('mlc-python-example') as RegisterLocalProcessExtensionResult;
         result.setAsDefaultApi();
 
-        const initResult = apiWrapper.getExtensionRegisterResult('debugger-py-client') as RegisterLocalProcessExtensionResult | undefined;
+        const initResult = wrapper.getExtensionRegisterResult('debugger-py-client') as RegisterLocalProcessExtensionResult | undefined;
         if (initResult !== undefined) {
             configureDebugging(await initResult.getApi(), appConfig.configParams);
         }
 
-        await lcWrapper.start();
-
         await vscode.commands.executeCommand('workbench.view.explorer');
         await vscode.window.showTextDocument(appConfig.configParams.files.get('hello2.py')!.uri);
 
-        await editorApp.start(appConfig.vscodeApiConfig.htmlContainer!);
+        await wrapper.start();
     }
 };

package/src/python/client/reactPython.tsx

@@ -3,23 +3,23 @@
  * Licensed under the MIT License. See LICENSE in the package root for license information.
 * ------------------------------------------------------------------------------------------ */
 
+import * as vscode from 'vscode';
 import { type RegisterLocalProcessExtensionResult } from '@codingame/monaco-vscode-api/extensions';
-import { MonacoEditorReactComp } from '@typefox/monaco-editor-react';
-import type { MonacoVscodeApiWrapper } from 'monaco-languageclient/vscodeApiWrapper';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import * as vscode from 'vscode';
+import { MonacoEditorReactComp } from '@typefox/monaco-editor-react';
+import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
+import { createWrapperConfig  } from './config.js';
 import { configureDebugging } from '../../debugger/client/debugger.js';
-import { createPythonAppConfig } from './config.js';
 
 export const runPythonReact = async () => {
-    const appConfig = createPythonAppConfig();
+    const appConfig = createWrapperConfig();
 
-    const onVscodeApiInitDone = async (apiWrapper: MonacoVscodeApiWrapper) => {
-        const result = apiWrapper.getExtensionRegisterResult('mlc-python-example') as RegisterLocalProcessExtensionResult;
+    const onLoad = async (wrapper: MonacoEditorLanguageClientWrapper) => {
+        const result = wrapper.getExtensionRegisterResult('mlc-python-example') as RegisterLocalProcessExtensionResult;
         result.setAsDefaultApi();
 
-        const initResult = apiWrapper.getExtensionRegisterResult('debugger-py-client') as RegisterLocalProcessExtensionResult | undefined;
+        const initResult = wrapper.getExtensionRegisterResult('debugger-py-client') as RegisterLocalProcessExtensionResult | undefined;
         if (initResult !== undefined) {
             configureDebugging(await initResult.getApi(), appConfig.configParams);
         }
@@ -34,10 +34,9 @@ export const runPythonReact = async () => {
         return (
             <div style={{ 'backgroundColor': '#1f1f1f' }} >
                 <MonacoEditorReactComp
-                    vscodeApiConfig={appConfig.vscodeApiConfig}
-                    editorAppConfig={appConfig.editorAppConfig}
+                    wrapperConfig={appConfig.wrapperConfig}
                     style={{ 'height': '100%' }}
-                    onVscodeApiInitDone={onVscodeApiInitDone}
+                    onLoad={onLoad}
                     onError={(e) => {
                         console.error(e);
                     }} />