monaco-languageclient-examples 2025.6.3 → 2025.8.1

package/src/groovy/config.ts

@@ -2,12 +2,8 @@
  * Copyright (c) 2024 TypeFox and others.
  * Licensed under the MIT License. See LICENSE in the package root for license information.
  * ------------------------------------------------------------------------------------------ */
-
-import type { ExampleLsConfig } from '../common/client/extendedClient.js';
-
-export const groovyConfig: ExampleLsConfig = {
+export const groovyConfig = {
     port: 30002,
     path: '/groovy',
-    basePath: '/home/gradle/mlc/packages/examples/resources/groovy',
-    documentSelector: 'groovy'
+    basePath: '/home/gradle/mlc/packages/examples/resources/groovy'
 };

package/src/json/client/wrapperWs.ts

@@ -0,0 +1,90 @@
+/* --------------------------------------------------------------------------------------------
+ * Copyright (c) 2024 TypeFox and others.
+ * Licensed under the MIT License. See LICENSE in the package root for license information.
+ * ------------------------------------------------------------------------------------------ */
+
+import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
+// this is required syntax highlighting
+import '@codingame/monaco-vscode-json-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';
+
+const text = `{
+    "$schema": "http://json.schemastore.org/coffeelint",
+    "line_endings": {"value": "unix"}
+}`;
+
+export const buildJsonClientUserConfig = (htmlContainer?: HTMLElement): WrapperConfig => {
+    return {
+        $type: 'extended',
+        htmlContainer,
+        logLevel: LogLevel.Debug,
+        vscodeApiConfig: {
+            serviceOverrides: {
+                ...getKeybindingsServiceOverride(),
+            },
+            userConfiguration: {
+                json: JSON.stringify({
+                    'workbench.colorTheme': 'Default Dark Modern',
+                    'editor.guides.bracketPairsHorizontal': 'active',
+                    'editor.lightbulb.enabled': 'On',
+                    'editor.wordBasedSuggestions': 'off',
+                    'editor.experimental.asyncTokenization': true
+                })
+            }
+        },
+        editorAppConfig: {
+            codeResources: {
+                modified: {
+                    text,
+                    uri: '/workspace/test.json',
+                }
+            },
+            monacoWorkerFactory: configureDefaultWorkerFactory
+        },
+        languageClientConfigs: {
+            configs: {
+                json: {
+                    clientOptions: {
+                        documentSelector: ['json']
+                    },
+                    connection: {
+                        options: {
+                            $type: 'WebSocketUrl',
+                            url: 'ws://localhost:30000/sampleServer',
+                            startOptions: {
+                                onCall: () => {
+                                    console.log('Connected to socket.');
+                                },
+                                reportStatus: true
+                            },
+                            stopOptions: {
+                                onCall: () => {
+                                    console.log('Disconnected from socket.');
+                                },
+                                reportStatus: true
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    };
+};
+
+export const runJsonWrapper = () => {
+    const wrapper = new MonacoEditorLanguageClientWrapper();
+
+    try {
+        document.querySelector('#button-start')?.addEventListener('click', async () => {
+            const config = buildJsonClientUserConfig(document.getElementById('monaco-editor-root')!);
+            await wrapper.initAndStart(config);
+        });
+        document.querySelector('#button-dispose')?.addEventListener('click', async () => {
+            await wrapper.dispose();
+        });
+    } catch (e) {
+        console.error(e);
+    }
+};

package/src/json/server/main.ts

@@ -36,7 +36,7 @@ export const startMockHttpServerForSavingCodeFromEditor = () => {
     app.post('/save-code', (req, res) => {
         const { code } = req.body;
         console.log('Received code:', code);
-        res.json({ success: true, message: code });
+        res.json({ success: true, message: code});
     });
 
     const PORT = 3003;

package/src/langium/langium-dsl/config/classicConfig.ts

@@ -6,83 +6,67 @@
 import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
 import { LogLevel } from '@codingame/monaco-vscode-api';
 import { MessageTransports } from 'vscode-languageclient';
-import type { Logger } from 'monaco-languageclient/common';
-import type { MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
-import type { LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
-import { defineDefaultWorkerLoaders, useWorkerFactory } from 'monaco-languageclient/workerFactory';
+import type { Logger } from 'monaco-languageclient/tools';
+import { useWorkerFactory } from 'monaco-languageclient/workerFactory';
+import type { WrapperConfig } from 'monaco-editor-wrapper';
+import { defineDefaultWorkerLoaders } from 'monaco-editor-wrapper/workers/workerLoaders';
 import { LangiumMonarchContent } from './langium.monarch.js';
 import code from '../../../../resources/langium/langium-dsl/example.langium?raw';
-import type { ExampleAppConfig } from '../../../common/client/utils.js';
-import type { EditorAppConfig } from 'monaco-languageclient/editorApp';
 
-export const setupLangiumClientClassic = (params: {
+export const setupLangiumClientClassic = async (params: {
     worker: Worker
     messageTransports?: MessageTransports,
-}): ExampleAppConfig => {
-
+}): Promise<WrapperConfig> => {
     const workerLoaders = defineDefaultWorkerLoaders();
     workerLoaders.TextMateWorker = undefined;
-
-    const vscodeApiConfig: MonacoVscodeApiConfig = {
+    return {
         $type: 'classic',
-        logLevel: LogLevel.Debug,
         htmlContainer: document.getElementById('monaco-editor-root')!,
-        serviceOverrides: {
-            ...getKeybindingsServiceOverride()
-        },
-        userConfiguration: {
-            json: JSON.stringify({
-                'workbench.colorTheme': 'GitHub Dark High Contrast',
-                'editor.guides.bracketPairsHorizontal': 'active',
-                'editor.wordBasedSuggestions': 'off',
-                'editor.experimental.asyncTokenization': true,
-                'vitest.disableWorkspaceWarning': true
-            })
-        },
-        monacoWorkerFactory: (logger?: Logger) => {
-            useWorkerFactory({
-                workerLoaders,
-                logger
-            });
-        }
-    };
-
-    const languageClientConfig: LanguageClientConfig = {
-        clientOptions: {
-            documentSelector: ['langium']
+        logLevel: LogLevel.Debug,
+        vscodeApiConfig: {
+            serviceOverrides: {
+                ...getKeybindingsServiceOverride()
+            }
         },
-        connection: {
-            options: {
-                $type: 'WorkerDirect',
-                worker: params.worker
+        editorAppConfig: {
+            codeResources: {
+                modified: {
+                    text: code,
+                    uri: '/workspace/grammar.langium',
+                    enforceLanguageId: 'langium'
+                }
             },
-            messageTransports: params.messageTransports
-        }
-    };
-
-    const editorAppConfig: EditorAppConfig = {
-        $type: vscodeApiConfig.$type,
-        codeResources: {
-            modified: {
-                text: code,
-                uri: '/workspace/grammar.langium',
-                enforceLanguageId: 'langium'
+            editorOptions: {
+                'semanticHighlighting.enabled': true,
+                wordBasedSuggestions: 'off',
+                theme: 'vs-dark'
+            },
+            languageDef: {
+                monarchLanguage: LangiumMonarchContent,
+                languageExtensionConfig: { id: 'langium' }
+            },
+            monacoWorkerFactory: (logger?: Logger) => {
+                useWorkerFactory({
+                    workerLoaders,
+                    logger
+                });
             }
         },
-        editorOptions: {
-            'semanticHighlighting.enabled': true,
-            wordBasedSuggestions: 'off',
-            theme: 'vs-dark'
-        },
-        languageDef: {
-            monarchLanguage: LangiumMonarchContent,
-            languageExtensionConfig: { id: 'langium' }
+        languageClientConfigs: {
+            configs: {
+                langium: {
+                    clientOptions: {
+                        documentSelector: ['langium']
+                    },
+                    connection: {
+                        options: {
+                            $type: 'WorkerDirect',
+                            worker: params.worker
+                        },
+                        messageTransports: params.messageTransports
+                    }
+                }
+            }
         }
     };
-
-    return {
-        editorAppConfig,
-        vscodeApiConfig,
-        languageClientConfig
-    };
 };

package/src/langium/langium-dsl/config/extendedConfig.ts

@@ -7,42 +7,39 @@ import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-
 import { LogLevel } from '@codingame/monaco-vscode-api';
 import '../../../../resources/vsix/github-vscode-theme.vsix';
 import { MessageTransports } from 'vscode-languageclient';
-import type { MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
-import type { LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
-import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
+import type { WrapperConfig } from 'monaco-editor-wrapper';
+import { configureDefaultWorkerFactory } from 'monaco-editor-wrapper/workers/workerLoaders';
 import langiumLanguageConfig from './langium.configuration.json?raw';
 import langiumTextmateGrammar from './langium.tmLanguage.json?raw';
 import text from '../../../../resources/langium/langium-dsl//example.langium?raw';
-import type { ExampleAppConfig } from '../../../common/client/utils.js';
-import type { EditorAppConfig } from 'monaco-languageclient/editorApp';
 
-export const setupLangiumClientExtended = (params: {
+export const setupLangiumClientExtended = async (params: {
     worker: Worker
     messageTransports?: MessageTransports,
-}): ExampleAppConfig => {
+}): Promise<WrapperConfig> => {
 
     const extensionFilesOrContents = new Map<string, string | URL>();
     // vite build is easier with string content
     extensionFilesOrContents.set('/langium-configuration.json', langiumLanguageConfig);
     extensionFilesOrContents.set('/langium-grammar.json', langiumTextmateGrammar);
-
-    const vscodeApiConfig: MonacoVscodeApiConfig = {
+    return {
         $type: 'extended',
-        logLevel: LogLevel.Debug,
         htmlContainer: document.getElementById('monaco-editor-root')!,
-        serviceOverrides: {
-            ...getKeybindingsServiceOverride()
-        },
-        userConfiguration: {
-            json: JSON.stringify({
-                'workbench.colorTheme': 'GitHub Dark High Contrast',
-                'editor.guides.bracketPairsHorizontal': 'active',
-                'editor.wordBasedSuggestions': 'off',
-                'editor.experimental.asyncTokenization': true,
-                'vitest.disableWorkspaceWarning': true
-            })
+        logLevel: LogLevel.Debug,
+        vscodeApiConfig: {
+            serviceOverrides: {
+                ...getKeybindingsServiceOverride()
+            },
+            userConfiguration: {
+                json: JSON.stringify({
+                    'workbench.colorTheme': 'GitHub Dark High Contrast',
+                    'editor.guides.bracketPairsHorizontal': 'active',
+                    'editor.wordBasedSuggestions': 'off',
+                    'editor.experimental.asyncTokenization': true,
+                    'vitest.disableWorkspaceWarning': true
+                })
+            }
         },
-        monacoWorkerFactory: configureDefaultWorkerFactory,
         extensions: [{
             config: {
                 name: 'langium-example',
@@ -66,35 +63,31 @@ export const setupLangiumClientExtended = (params: {
                 }
             },
             filesOrContents: extensionFilesOrContents
-        }]
-    };
-
-    const languageClientConfig: LanguageClientConfig = {
-        clientOptions: {
-            documentSelector: ['langium']
-        },
-        connection: {
-            options: {
-                $type: 'WorkerDirect',
-                worker: params.worker
+        }],
+        editorAppConfig: {
+            codeResources: {
+                modified: {
+                    text,
+                    uri: '/workspace/grammar.langium'
+                }
             },
-            messageTransports: params.messageTransports
-        }
-    };
-
-    const editorAppConfig: EditorAppConfig = {
-        $type: vscodeApiConfig.$type,
-        codeResources: {
-            modified: {
-                text,
-                uri: '/workspace/grammar.langium'
+            monacoWorkerFactory: configureDefaultWorkerFactory
+        },
+        languageClientConfigs: {
+            configs: {
+                langium: {
+                    clientOptions: {
+                        documentSelector: ['langium']
+                    },
+                    connection: {
+                        options: {
+                            $type: 'WorkerDirect',
+                            worker: params.worker
+                        },
+                        messageTransports: params.messageTransports
+                    }
+                }
             }
         }
     };
-
-    return {
-        editorAppConfig,
-        vscodeApiConfig,
-        languageClientConfig
-    };
 };

package/src/langium/langium-dsl/wrapperLangium.ts

@@ -4,19 +4,16 @@
  * ------------------------------------------------------------------------------------------ */
 
 import { BrowserMessageReader, BrowserMessageWriter } from 'vscode-languageclient/browser.js';
-import { delayExecution } from 'monaco-languageclient/common';
-import { EditorApp } from 'monaco-languageclient/editorApp';
+import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
 import { setupLangiumClientExtended } from './config/extendedConfig.js';
 import { setupLangiumClientClassic } from './config/classicConfig.js';
-import { disableElement, type ExampleAppConfig } from '../../common/client/utils.js';
+import { delayExecution, disableElement } from '../../common/client/utils.js';
 import text from '../../../resources/langium/langium-dsl/example.langium?raw';
 import workerUrl from './worker/langium-server?worker&url';
-import { MonacoVscodeApiWrapper } from 'monaco-languageclient/vscodeApiWrapper';
-import { LanguageClientWrapper } from 'monaco-languageclient/lcwrapper';
 
 export const runLangiumDslWrapper = async (extendedMode: boolean) => {
     try {
-        let editorApp: EditorApp | undefined;
+        let wrapper: MonacoEditorLanguageClientWrapper | undefined;
 
         const loadLangiumWorker = () => {
             console.log(`Langium worker URL: ${workerUrl}`);
@@ -27,7 +24,7 @@ export const runLangiumDslWrapper = async (extendedMode: boolean) => {
         };
 
         const checkStarted = () => {
-            if (editorApp?.isStarted() ?? false) {
+            if (wrapper?.isStarted() ?? false) {
                 alert('Editor was already started!\nPlease reload the page to test the alternative editor.');
                 return true;
             }
@@ -45,32 +42,24 @@ export const runLangiumDslWrapper = async (extendedMode: boolean) => {
                 console.log('Received message from worker:', message);
             });
 
-            let appConfig: ExampleAppConfig;
             if (extendedMode) {
-                appConfig = setupLangiumClientExtended({
+                const config = await setupLangiumClientExtended({
                     worker,
                     messageTransports: { reader, writer }
                 });
+                wrapper = new MonacoEditorLanguageClientWrapper();
+                await wrapper.initAndStart(config);
             } else {
-                appConfig = setupLangiumClientClassic({
+                const config = await setupLangiumClientClassic({
                     worker,
                     messageTransports: { reader, writer }
                 });
+                wrapper = new MonacoEditorLanguageClientWrapper();
+                await wrapper.initAndStart(config);
             }
-            // perform global init
-            const apiWrapper = new MonacoVscodeApiWrapper(appConfig.vscodeApiConfig);
-            await apiWrapper.init();
-
-            // init language client
-            const lcWrapper = new LanguageClientWrapper(appConfig.languageClientConfig);
-            await lcWrapper.start();
-
-            // run editorApp
-            editorApp = new EditorApp(appConfig.editorAppConfig);
-            await editorApp.start(appConfig.vscodeApiConfig.htmlContainer!);
 
             await delayExecution(1000);
-            await editorApp.updateCodeResources({
+            await wrapper.updateCodeResources({
                 modified: {
                     text: `// modified file\n\n${text}`,
                     uri: '/workspace/mod.langium',
@@ -80,9 +69,10 @@ export const runLangiumDslWrapper = async (extendedMode: boolean) => {
         };
 
         const disposeEditor = async () => {
-            editorApp?.reportStatus();
-            await editorApp?.dispose();
-            editorApp = undefined;
+            if (!wrapper) return;
+            wrapper.reportStatus();
+            await wrapper.dispose();
+            wrapper = undefined;
             disableElement('button-start', false);
         };
 

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

@@ -6,62 +6,65 @@
 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 { 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';
+import type { CodeContent, LanguageClientConfigs, WrapperConfig } from 'monaco-editor-wrapper';
+import { configureDefaultWorkerFactory } from 'monaco-editor-wrapper/workers/workerLoaders';
 
 // 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
-}): ExampleAppConfig => {
+}): WrapperConfig => {
     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 = {
-        clientOptions: {
-            documentSelector: ['statemachine']
-        },
-        connection: {
-            options: {
-                $type: 'WorkerDirect',
-                worker: params.worker,
-                messagePort: params.messagePort,
-            },
-            messageTransports: params.messageTransports
+    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
+                }
+            }
         }
-    };
+    } : undefined;
 
-    const vscodeApiConfig: MonacoVscodeApiConfig = {
+    return {
         $type: 'extended',
         htmlContainer: params.htmlContainer,
         logLevel: LogLevel.Debug,
-        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
-            })
+        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
+                })
+            },
         },
         extensions: [{
             config: {
@@ -86,19 +89,13 @@ export const createLangiumGlobalConfig = (params: {
                 }
             },
             filesOrContents: extensionFilesOrContents
-        }]
-    };
-
-    const editorAppConfig: EditorAppConfig = {
-        $type: vscodeApiConfig.$type,
-        codeResources: {
-            modified: params.codeContent
-        }
-    };
-
-    return {
-        editorAppConfig,
-        vscodeApiConfig,
-        languageClientConfig
+        }],
+        editorAppConfig: {
+            codeResources: {
+                modified: params.codeContent
+            },
+            monacoWorkerFactory: configureDefaultWorkerFactory
+        },
+        languageClientConfigs
     };
 };

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-languageclient/vscodeApiLocales';
+import { initLocaleLoader } from 'monaco-editor-wrapper/vscode/locale';
 await initLocaleLoader();
 
 const { runStatemachineWrapper } = await import('./main.js');