monaco-languageclient-examples 2025.8.5 → 2025.9.1-next.0

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

@@ -9,7 +9,7 @@ import getLocalizationServiceOverride from '@codingame/monaco-vscode-localizatio
 import { LogLevel } from '@codingame/monaco-vscode-api';
 import { MessageTransports } from 'vscode-languageclient';
 import { createDefaultLocaleConfiguration } from 'monaco-languageclient/vscodeApiLocales';
-import type { MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
+import type { HtmlContainerConfig, 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';
@@ -25,13 +25,14 @@ export const createLangiumGlobalConfig = (params: {
     worker: Worker,
     messagePort?: MessagePort,
     messageTransports?: MessageTransports,
-    htmlContainer: HTMLElement
+    htmlContainer: HtmlContainerConfig
 }): 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 languageClientConfig: LanguageClientConfig = {
+        languageId: 'statemachine',
         clientOptions: {
             documentSelector: ['statemachine']
         },
@@ -47,7 +48,10 @@ export const createLangiumGlobalConfig = (params: {
 
     const vscodeApiConfig: MonacoVscodeApiConfig = {
         $type: 'extended',
-        htmlContainer: params.htmlContainer,
+        viewsConfig: {
+            $type: 'EditorService',
+            htmlContainer: params.htmlContainer
+        },
         logLevel: LogLevel.Debug,
         serviceOverrides: {
             ...getKeybindingsServiceOverride(),
@@ -90,7 +94,6 @@ export const createLangiumGlobalConfig = (params: {
     };
 
     const editorAppConfig: EditorAppConfig = {
-        $type: vscodeApiConfig.$type,
         codeResources: {
             modified: params.codeContent
         }

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

@@ -28,7 +28,7 @@ export const runStatemachineReact = async () => {
         },
         worker,
         messageTransports: { reader, writer },
-        htmlContainer: document.getElementById('monaco-editor-root')!
+        htmlContainer: 'ReactPlaceholder'
     });
     const root = ReactDOM.createRoot(document.getElementById('react-root')!);
 
@@ -56,11 +56,6 @@ export const runStatemachineReact = async () => {
                     return () => clearTimeout(timer);
                 }, []);
 
-                const languageClientConfigs = {
-                    configs: {
-                        langium: appConfig.languageClientConfig
-                    }
-                };
                 return (
                     <>
                         <div style={{ 'height': height }} >
@@ -68,7 +63,7 @@ export const runStatemachineReact = async () => {
                                 style={{ 'height': '100%' }}
                                 vscodeApiConfig={appConfig.vscodeApiConfig}
                                 editorAppConfig={appConfig.editorAppConfig}
-                                languageClientConfigs={languageClientConfigs}
+                                languageClientConfig={appConfig.languageClientConfig}
                                 onTextChanged={onTextChanged}
                             />
                             <b>Debug:</b><br />{testState}

package/src/langium/statemachine/main.ts

@@ -60,16 +60,16 @@ const startEditor = async () => {
     });
     editorApp = new EditorApp(appConfig.editorAppConfig);
 
-    // perform global init
+    // perform global monaco-vscode-api init
     const apiWrapper = new MonacoVscodeApiWrapper(appConfig.vscodeApiConfig);
-    await apiWrapper.init();
+    await apiWrapper.start();
 
     // init language client
     lcWrapper = new LanguageClientWrapper(appConfig.languageClientConfig);
     await lcWrapper.start();
 
     // run editorApp
-    await editorApp.start(appConfig.vscodeApiConfig.htmlContainer!);
+    await editorApp.start(apiWrapper.getHtmlContainer());
 
     editorApp.updateCodeResources({
         modified: {
@@ -85,11 +85,10 @@ const startEditor = async () => {
         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);
+    // run a second editorApp with another dom element
+    await editorApp2.start(document.getElementById('monaco-editor-root2')!);
 
     vscode.commands.getCommands().then((x) => {
         console.log('Currently registered # of vscode commands: ' + x.length);

package/src/multi/config.ts

@@ -9,7 +9,7 @@ import type { BaseLanguageClient } from 'vscode-languageclient/browser.js';
 
 export const createJsonLanguageClientConfig: () => LanguageClientConfig = () => {
     return {
-        name: 'JSON Client',
+        languageId: 'json',
         clientOptions: {
             documentSelector: ['json']
         },
@@ -27,6 +27,7 @@ export const createJsonLanguageClientConfig: () => LanguageClientConfig = () =>
 
 export const createPythonLanguageClientConfig: () => LanguageClientConfig = () => {
     return {
+        languageId: 'python',
         connection: {
             options: {
                 $type: 'WebSocketParams',

package/src/multi/twoLanguageClients.ts

@@ -14,7 +14,7 @@ import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFacto
 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';
+import { LanguageClientsManager, type LanguageClientConfigs } from 'monaco-languageclient/lcwrapper';
 
 export const runMultipleLanguageClientsExample = async () => {
     disableElement('button-flip', true);
@@ -33,10 +33,12 @@ print("Hello Moon!")
     let currentText = textJson;
     let currenFileExt = 'json';
 
-    const htmlContainer = document.getElementById('monaco-editor-root')!;
     const vscodeApiConfig: MonacoVscodeApiConfig = {
         $type: 'extended',
-        htmlContainer,
+        viewsConfig: {
+            $type: 'EditorService',
+            htmlContainer: document.getElementById('monaco-editor-root')!
+        },
         logLevel: LogLevel.Debug,
         serviceOverrides: {
             ...getKeybindingsServiceOverride()
@@ -52,7 +54,6 @@ print("Hello Moon!")
     };
 
     const editorAppConfig: EditorAppConfig = {
-        $type: vscodeApiConfig.$type,
         id: '42',
         codeResources: {
             modified: {
@@ -62,12 +63,12 @@ print("Hello Moon!")
         }
     };
 
-    // perform global init
+    // perform global monaco-vscode-api init
     const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
-    await apiWrapper.init();
+    await apiWrapper.start();
 
     const lcManager = new LanguageClientsManager();
-    const languageClientConfigs = {
+    const languageClientConfigs: LanguageClientConfigs = {
         configs: {
             json: createJsonLanguageClientConfig(),
             python: createPythonLanguageClientConfig()
@@ -81,7 +82,7 @@ print("Hello Moon!")
             disableElement('button-start', true);
             disableElement('button-flip', false);
 
-            await editorApp.start(htmlContainer);
+            await editorApp.start(apiWrapper.getHtmlContainer());
             if (editorAppConfig.codeResources?.modified !== undefined) {
                 editorAppConfig.codeResources.modified.text = currentText;
                 editorAppConfig.codeResources.modified.uri = `/workspace/example.${currenFileExt}`;

package/src/python/client/config.ts

@@ -21,11 +21,11 @@ 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 { EditorAppConfig } from 'monaco-languageclient/editorApp';
 import type { LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
 import { createDefaultLocaleConfiguration } from 'monaco-languageclient/vscodeApiLocales';
-import { defaultHtmlAugmentationInstructions, defaultViewsInit, type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
+import { defaultHtmlAugmentationInstructions, defaultViewsInit, type HtmlContainerConfig, 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';
@@ -37,7 +37,7 @@ import { createDefaultWorkspaceContent } from '../../common/client/utils.js';
 import { provideDebuggerExtensionConfig } from '../../debugger/client/debugger.js';
 import { createDebugLaunchConfigFile, type ConfigParams, type FileDefinition } from '../../debugger/common/definitions.js';
 
-export const createDefaultConfigParams = (homeDir: string, htmlContainer?: HTMLElement): ConfigParams => {
+export const createDefaultConfigParams = (homeDir: string, htmlContainer: HtmlContainerConfig): ConfigParams => {
     const files = new Map<string, FileDefinition>();
     const workspaceRoot = `${homeDir}/workspace`;
     const configParams: ConfigParams = {
@@ -101,7 +101,6 @@ export const createPythonAppConfig = (): PythonAppConfig => {
 
     const vscodeApiConfig: MonacoVscodeApiConfig = {
         $type: 'extended',
-        htmlContainer: configParams.htmlContainer,
         logLevel: LogLevel.Debug,
         serviceOverrides: {
             ...getKeybindingsServiceOverride(),
@@ -121,7 +120,8 @@ export const createPythonAppConfig = (): PythonAppConfig => {
             ...getPreferencesServiceOverride()
         },
         viewsConfig: {
-            viewServiceType: 'ViewsService',
+            $type: 'ViewsService',
+            htmlContainer: configParams.htmlContainer,
             htmlAugmentationInstructions: defaultHtmlAugmentationInstructions,
             viewsInitFunc: defaultViewsInit
         },
@@ -176,7 +176,7 @@ export const createPythonAppConfig = (): PythonAppConfig => {
     };
 
     const languageClientConfig: LanguageClientConfig = {
-        name: 'Python Language Server Example',
+        languageId: 'python',
         connection: {
             options: {
                 $type: 'WebSocketDirect',
@@ -206,9 +206,7 @@ export const createPythonAppConfig = (): PythonAppConfig => {
         }
     };
 
-    const editorAppConfig: EditorAppConfig = {
-        $type: vscodeApiConfig.$type
-    };
+    const editorAppConfig: EditorAppConfig = {};
 
     return {
         vscodeApiConfig,

package/src/python/client/main.ts

@@ -14,9 +14,9 @@ import { createPythonAppConfig } from './config.js';
 export const runPythonWrapper = async () => {
     const appConfig = createPythonAppConfig();
 
-    // perform global init
+    // perform global monaco-vscode-api init
     const apiWrapper = new MonacoVscodeApiWrapper(appConfig.vscodeApiConfig);
-    await apiWrapper.init();
+    await apiWrapper.start();
 
     const lcWrapper = new LanguageClientWrapper(appConfig.languageClientConfig);
 
@@ -37,7 +37,5 @@ export const runPythonWrapper = async () => {
 
         await vscode.commands.executeCommand('workbench.view.explorer');
         await vscode.window.showTextDocument(appConfig.configParams.files.get('hello2.py')!.uri);
-
-        await editorApp.start(appConfig.vscodeApiConfig.htmlContainer!);
     }
 };

package/src/python/client/reactPython.tsx

@@ -29,19 +29,13 @@ export const runPythonReact = async () => {
     };
 
     const root = ReactDOM.createRoot(document.getElementById('react-root')!);
-
-    const languageClientConfigs = {
-        configs: {
-            langium: appConfig.languageClientConfig
-        }
-    };
     const App = () => {
         return (
             <div style={{ 'backgroundColor': '#1f1f1f' }} >
                 <MonacoEditorReactComp
                     vscodeApiConfig={appConfig.vscodeApiConfig}
                     editorAppConfig={appConfig.editorAppConfig}
-                    languageClientConfigs={languageClientConfigs}
+                    languageClientConfig={appConfig.languageClientConfig}
                     style={{ 'height': '100%' }}
                     onVscodeApiInitDone={onVscodeApiInitDone}
                     onError={(e) => {

package/src/ts/wrapperTs.ts

@@ -28,7 +28,10 @@ export const runTsWrapper = async () => {
     const htmlContainer = document.getElementById('monaco-editor-root')!;
     const vscodeApiConfig: MonacoVscodeApiConfig = {
         $type: 'extended',
-        htmlContainer,
+        viewsConfig: {
+            $type: 'EditorService',
+            htmlContainer
+        },
         logLevel: LogLevel.Debug,
         serviceOverrides: {
             ...getKeybindingsServiceOverride()
@@ -52,7 +55,6 @@ export const runTsWrapper = async () => {
     };
 
     const editorAppConfig: EditorAppConfig = {
-        $type: vscodeApiConfig.$type,
         codeResources: {
             modified: {
                 text: code,
@@ -65,8 +67,9 @@ export const runTsWrapper = async () => {
         }
     };
 
+    // perform global monaco-vscode-api init
     const apiWrapper = new MonacoVscodeApiWrapper(vscodeApiConfig);
-    await apiWrapper.init();
+    await apiWrapper.start();
 
     const editorApp = new EditorApp(editorAppConfig);
     disableElement('button-swap-code', true);

package/dist/bare/client.d.ts

@@ -1,3 +0,0 @@
-import '@codingame/monaco-vscode-json-default-extension';
-export declare const runClient: () => Promise<void>;
-//# sourceMappingURL=client.d.ts.map

package/dist/bare/client.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/bare/client.ts"],"names":[],"mappings":"AAYA,OAAO,iDAAiD,CAAC;AAIzD,eAAO,MAAM,SAAS,qBAuDrB,CAAC"}

package/dist/bare/client.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"client.js","sourceRoot":"","sources":["../../src/bare/client.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,KAAK,MAAM,MAAM,qCAAqC,CAAC;AAC9D,OAAO,0BAA0B,MAAM,oDAAoD,CAAC;AAC5F,OAAO,uBAAuB,MAAM,iDAAiD,CAAC;AACtF,OAAO,EAAE,sBAAsB,EAA8B,MAAM,wCAAwC,CAAC;AAC5G,wEAAwE;AACxE,uDAAuD;AACvD,OAAO,iDAAiD,CAAC;AACzD,OAAO,EAAE,6BAA6B,EAAE,MAAM,qCAAqC,CAAC;AACpF,OAAO,EAAE,qBAAqB,EAA6B,MAAM,iCAAiC,CAAC;AAEnG,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,IAAI,EAAE;IAChC,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,oBAAoB,CAAE,CAAC;IACrE,MAAM,eAAe,GAA0B;QAC3C,KAAK,EAAE,SAAS;QAChB,QAAQ,EAAE,QAAQ,CAAC,KAAK;QACxB,gBAAgB,EAAE;YACd,GAAG,0BAA0B,EAAE;YAC/B,GAAG,uBAAuB,EAAE;SAC/B;QACD,iBAAiB,EAAE;YACf,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;gBACjB,uCAAuC,EAAE,IAAI;aAChD,CAAC;SACL;QACD,mBAAmB,EAAE,6BAA6B;KACrD,CAAC;IAEF,MAAM,UAAU,GAAG,IAAI,sBAAsB,CAAC,eAAe,CAAC,CAAC;IAC/D,MAAM,UAAU,CAAC,IAAI,EAAE,CAAC;IAExB,yCAAyC;IACzC,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC;QACtB,EAAE,EAAE,MAAM;QACV,UAAU,EAAE,CAAC,OAAO,EAAE,QAAQ,CAAC;QAC/B,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC;QACzB,SAAS,EAAE,CAAC,kBAAkB,CAAC;KAClC,CAAC,CAAC;IAEH,uBAAuB;IACvB,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE;QAChC,KAAK,EAAE;;;EAGb;QACM,QAAQ,EAAE,MAAM;QAChB,eAAe,EAAE,IAAI;QACrB,oBAAoB,EAAE,KAAK;KAC9B,CAAC,CAAC;IAEH,MAAM,oBAAoB,GAAyB;QAC/C,aAAa,EAAE;YACX,gBAAgB,EAAE,CAAC,MAAM,CAAC;SAC7B;QACD,UAAU,EAAE;YACR,OAAO,EAAE;gBACL,KAAK,EAAE,cAAc;gBACrB,GAAG,EAAE,mCAAmC;aAC3C;SACJ;KACJ,CAAC;IACF,MAAM,qBAAqB,GAAG,IAAI,qBAAqB,CACnD,oBAAoB,EACpB,UAAU,CAAC,SAAS,EAAE,CACzB,CAAC;IACF,MAAM,qBAAqB,CAAC,KAAK,EAAE,CAAC;AACxC,CAAC,CAAC"}

package/dist/json/client/client.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../../src/json/client/client.ts"],"names":[],"mappings":"AAMA,OAAO,iDAAiD,CAAC;AAKzD,eAAO,MAAM,cAAc,qBAE1B,CAAC"}

package/dist/json/client/client.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"client.js","sourceRoot":"","sources":["../../../src/json/client/client.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,uCAAuC;AACvC,OAAO,iDAAiD,CAAC;AACzD,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,uCAAuC,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,IAAI,EAAE;IACrC,MAAM,iBAAiB,CAAC,aAAa,EAAE,aAAa,CAAC,CAAC;AAC1D,CAAC,CAAC"}