monaco-languageclient-examples 2025.8.3 → 2025.8.4

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';

package/src/python/client/config.ts

@@ -21,13 +21,14 @@ 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 { 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 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 * 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';
@@ -67,7 +68,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(configParams.workspaceRoot)));
+    fileSystemProvider.registerFile(new RegisteredMemoryFile(configParams.workspaceFile, createDefaultWorkspaceContent(workspaceRoot)));
     fileSystemProvider.registerFile(createDebugLaunchConfigFile(workspaceRoot, configParams.languageId));
     registerFileSystemOverlay(1, fileSystemProvider);
 
@@ -75,11 +76,13 @@ export const createDefaultConfigParams = (homeDir: string, htmlContainer?: HTMLE
 };
 
 export type PythonAppConfig = {
-    wrapperConfig: WrapperConfig;
+    languageClientConfig: LanguageClientConfig;
+    vscodeApiConfig: MonacoVscodeApiConfig;
+    editorAppConfig: EditorAppConfig;
     configParams: ConfigParams;
 }
 
-export const createWrapperConfig = (): PythonAppConfig => {
+export const createPythonAppConfig = (): PythonAppConfig => {
     const configParams = createDefaultConfigParams('/home/mlc', document.body);
 
     const url = createUrl({
@@ -96,101 +99,65 @@ export const createWrapperConfig = (): PythonAppConfig => {
     const reader = new WebSocketMessageReader(iWebSocket);
     const writer = new WebSocketMessageWriter(iWebSocket);
 
-    const wrapperConfig: WrapperConfig = {
+    const vscodeApiConfig: MonacoVscodeApiConfig = {
         $type: 'extended',
         htmlContainer: configParams.htmlContainer,
         logLevel: LogLevel.Debug,
-        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)
-                        },
-                    }
-                }
-            }
+        serviceOverrides: {
+            ...getKeybindingsServiceOverride(),
+            ...getLifecycleServiceOverride(),
+            ...getLocalizationServiceOverride(createDefaultLocaleConfiguration()),
+            ...getBannerServiceOverride(),
+            ...getStatusBarServiceOverride(),
+            ...getTitleBarServiceOverride(),
+            ...getExplorerServiceOverride(),
+            ...getRemoteAgentServiceOverride(),
+            ...getEnvironmentServiceOverride(),
+            ...getSecretStorageServiceOverride(),
+            ...getStorageServiceOverride(),
+            ...getSearchServiceOverride(),
+            ...getDebugServiceOverride(),
+            ...getTestingServiceOverride(),
+            ...getPreferencesServiceOverride()
         },
-        vscodeApiConfig: {
-            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'
-                })
+        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: ''
             },
-            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}'
+            workspaceProvider: {
+                trusted: true,
+                async open() {
+                    window.open(window.location.href);
+                    return true;
                 },
-                productConfiguration: {
-                    nameShort: 'mlc-python-example',
-                    nameLong: 'mlc-python-example'
+                workspace: {
+                    workspaceUri: configParams.workspaceFile
                 }
             },
+            configurationDefaults: {
+                'window.title': 'mlc-python-example${separator}${dirty}${activeEditorShort}'
+            },
+            productConfiguration: {
+                nameShort: 'mlc-python-example',
+                nameLong: 'mlc-python-example'
+            }
         },
         extensions: [
             {
@@ -205,13 +172,48 @@ export const createWrapperConfig = (): PythonAppConfig => {
             },
             provideDebuggerExtensionConfig(configParams)
         ],
-        editorAppConfig: {
-            monacoWorkerFactory: configureDefaultWorkerFactory
+        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)
+            },
         }
     };
 
+    const editorAppConfig: EditorAppConfig = {
+        $type: vscodeApiConfig.$type
+    };
+
     return {
-        wrapperConfig,
+        vscodeApiConfig,
+        languageClientConfig,
+        editorAppConfig,
         configParams: configParams
     };
 };

package/src/python/client/main.ts

@@ -3,32 +3,41 @@
  * 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 { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
-import { createWrapperConfig } from './config.js';
+import { EditorApp } from 'monaco-languageclient/editorApp';
+import { LanguageClientWrapper } from 'monaco-languageclient/lcwrapper';
+import { MonacoVscodeApiWrapper } from 'monaco-languageclient/vscodeApiWrapper';
+import * as vscode from 'vscode';
 import { configureDebugging } from '../../debugger/client/debugger.js';
+import { createPythonAppConfig } from './config.js';
 
 export const runPythonWrapper = async () => {
-    const appConfig = createWrapperConfig();
-    const wrapper = new MonacoEditorLanguageClientWrapper();
+    const appConfig = createPythonAppConfig();
+
+    // perform global init
+    const apiWrapper = new MonacoVscodeApiWrapper(appConfig.vscodeApiConfig);
+    await apiWrapper.init();
+
+    const lcWrapper = new LanguageClientWrapper(appConfig.languageClientConfig);
 
-    if (wrapper.isStarted()) {
+    const editorApp = new EditorApp(appConfig.editorAppConfig);
+
+    if (editorApp.isStarted()) {
         console.warn('Editor was already started!');
     } else {
-        await wrapper.init(appConfig.wrapperConfig);
-
-        const result = wrapper.getExtensionRegisterResult('mlc-python-example') as RegisterLocalProcessExtensionResult;
+        const result = apiWrapper.getExtensionRegisterResult('mlc-python-example') as RegisterLocalProcessExtensionResult;
         result.setAsDefaultApi();
 
-        const initResult = wrapper.getExtensionRegisterResult('debugger-py-client') as RegisterLocalProcessExtensionResult | undefined;
+        const initResult = apiWrapper.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 wrapper.start();
+        await editorApp.start(appConfig.vscodeApiConfig.htmlContainer!);
     }
 };

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 { MonacoEditorReactComp } from '@typefox/monaco-editor-react';
-import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
-import { createWrapperConfig  } from './config.js';
+import * as vscode from 'vscode';
 import { configureDebugging } from '../../debugger/client/debugger.js';
+import { createPythonAppConfig } from './config.js';
 
 export const runPythonReact = async () => {
-    const appConfig = createWrapperConfig();
+    const appConfig = createPythonAppConfig();
 
-    const onLoad = async (wrapper: MonacoEditorLanguageClientWrapper) => {
-        const result = wrapper.getExtensionRegisterResult('mlc-python-example') as RegisterLocalProcessExtensionResult;
+    const onVscodeApiInitDone = async (apiWrapper: MonacoVscodeApiWrapper) => {
+        const result = apiWrapper.getExtensionRegisterResult('mlc-python-example') as RegisterLocalProcessExtensionResult;
         result.setAsDefaultApi();
 
-        const initResult = wrapper.getExtensionRegisterResult('debugger-py-client') as RegisterLocalProcessExtensionResult | undefined;
+        const initResult = apiWrapper.getExtensionRegisterResult('debugger-py-client') as RegisterLocalProcessExtensionResult | undefined;
         if (initResult !== undefined) {
             configureDebugging(await initResult.getApi(), appConfig.configParams);
         }
@@ -34,9 +34,10 @@ export const runPythonReact = async () => {
         return (
             <div style={{ 'backgroundColor': '#1f1f1f' }} >
                 <MonacoEditorReactComp
-                    wrapperConfig={appConfig.wrapperConfig}
+                    vscodeApiConfig={appConfig.vscodeApiConfig}
+                    editorAppConfig={appConfig.editorAppConfig}
                     style={{ 'height': '100%' }}
-                    onLoad={onLoad}
+                    onVscodeApiInitDone={onVscodeApiInitDone}
                     onError={(e) => {
                         console.error(e);
                     }} />

package/src/ts/wrapperTs.ts

@@ -3,14 +3,15 @@
  * 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 { LogLevel } from '@codingame/monaco-vscode-api';
 import '@codingame/monaco-vscode-javascript-default-extension';
+import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
 import '@codingame/monaco-vscode-typescript-basics-default-extension';
 import '@codingame/monaco-vscode-typescript-language-features-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 { MonacoVscodeApiWrapper, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
+import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
+import * as vscode from 'vscode';
 import { disableElement } from '../common/client/utils.js';
 
 export const runTsWrapper = async () => {
@@ -24,49 +25,55 @@ export const runTsWrapper = async () => {
     return "Goodbye";
 };`;
 
-    const wrapperConfig: WrapperConfig = {
+    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()
-            },
+        serviceOverrides: {
+            ...getKeybindingsServiceOverride()
+        },
+        advanced: {
             enableExtHostWorker: true,
-            userConfiguration: {
-                json: JSON.stringify({
-                    'workbench.colorTheme': 'Default Dark Modern',
-                    'typescript.tsserver.web.projectWideIntellisense.enabled': true,
-                    'typescript.tsserver.web.projectWideIntellisense.suppressSemanticErrors': false,
-                    'diffEditor.renderSideBySide': false,
-                    'editor.lightbulb.enabled': 'on',
-                    'editor.glyphMargin': true,
-                    'editor.guides.bracketPairsHorizontal': true,
-                    'editor.experimental.asyncTokenization': true
-                })
-            }
         },
-        editorAppConfig: {
-            codeResources: {
-                modified: {
-                    text: code,
-                    uri: codeUri
-                },
-                original: {
-                    text: codeOriginal,
-                    uri: codeOriginalUri,
-                }
+        userConfiguration: {
+            json: JSON.stringify({
+                'workbench.colorTheme': 'Default Dark Modern',
+                'typescript.tsserver.web.projectWideIntellisense.enabled': true,
+                'typescript.tsserver.web.projectWideIntellisense.suppressSemanticErrors': false,
+                'diffEditor.renderSideBySide': false,
+                'editor.lightbulb.enabled': 'on',
+                'editor.glyphMargin': true,
+                'editor.guides.bracketPairsHorizontal': true,
+                'editor.experimental.asyncTokenization': true
+            })
+        },
+        monacoWorkerFactory: configureDefaultWorkerFactory
+    };
+
+    const editorAppConfig: EditorAppConfig = {
+        $type: vscodeApiConfig.$type,
+        codeResources: {
+            modified: {
+                text: code,
+                uri: codeUri
             },
-            monacoWorkerFactory: configureDefaultWorkerFactory
+            original: {
+                text: codeOriginal,
+                uri: codeOriginalUri,
+            }
         }
     };
 
-    const wrapper = new MonacoEditorLanguageClientWrapper();
+    const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
+    await apiWrapper.init();
+
+    const editorApp = new EditorApp(editorAppConfig);
     disableElement('button-swap-code', true);
 
     try {
         document.querySelector('#button-start')?.addEventListener('click', async () => {
-            await wrapper.initAndStart(wrapperConfig);
+            await editorApp.start(htmlContainer);
 
             vscode.commands.getCommands().then((x) => {
                 console.log(`Found ${x.length} commands`);
@@ -74,13 +81,13 @@ export const runTsWrapper = async () => {
                 console.log(`Found command: ${finding}`);
             });
 
-            wrapper.getEditor()?.focus();
+            editorApp.getEditor()?.focus();
             await vscode.commands.executeCommand('actions.find');
         });
         document.querySelector('#button-swap-code')?.addEventListener('click', () => {
-            const codeResources = wrapper.getEditorApp()?.getConfig().codeResources;
+            const codeResources = editorApp.getConfig().codeResources;
             if (codeResources?.modified?.uri === codeUri) {
-                wrapper.updateCodeResources({
+                editorApp.updateCodeResources({
                     modified: {
                         text: codeOriginal,
                         uri: codeOriginalUri
@@ -91,7 +98,7 @@ export const runTsWrapper = async () => {
                     }
                 });
             } else {
-                wrapper.updateCodeResources({
+                editorApp.updateCodeResources({
                     modified: {
                         text: code,
                         uri: codeUri
@@ -105,14 +112,14 @@ export const runTsWrapper = async () => {
         });
         document.querySelector('#button-diff')?.addEventListener('click', async () => {
             // ensure it is boolean value and not undefined
-            const useDiffEditor = wrapperConfig.editorAppConfig!.useDiffEditor ?? false;
-            wrapperConfig.editorAppConfig!.useDiffEditor = !useDiffEditor;
-            disableElement('button-swap-code', !wrapperConfig.editorAppConfig!.useDiffEditor);
+            const useDiffEditor = editorAppConfig.useDiffEditor ?? false;
+            editorAppConfig.useDiffEditor = !useDiffEditor;
+            disableElement('button-swap-code', !editorAppConfig.useDiffEditor);
 
-            await wrapper.initAndStart(wrapperConfig);
+            await editorApp.start(htmlContainer);
         });
         document.querySelector('#button-dispose')?.addEventListener('click', async () => {
-            await wrapper.dispose();
+            await editorApp.dispose();
         });
     } catch (e) {
         console.error(e);