monaco-languageclient-examples 2025.6.2 → 2025.6.3

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

package/two_langauge_clients.html

@@ -15,7 +15,6 @@
         <button type="button" id="button-start">Start</button>
         <button type="button" id="button-dispose">Dispose</button>
         <button type="button" id="button-flip">Flip Content</button>
-        <label>External Lanuguage Clients:</label><input type="checkbox" id="checkbox-extlc" />
     </div>
     <div id="monaco-editor-root" style="width:800px;height:600px;border:1px solid grey"></div>
     <script type="module">

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

@@ -1,5 +0,0 @@
-import '@codingame/monaco-vscode-json-default-extension';
-import { type WrapperConfig } from 'monaco-editor-wrapper';
-export declare const buildJsonClientUserConfig: (htmlContainer?: HTMLElement) => WrapperConfig;
-export declare const runJsonWrapper: () => void;
-//# sourceMappingURL=wrapperWs.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"wrapperWs.d.ts","sourceRoot":"","sources":["../../../src/json/client/wrapperWs.ts"],"names":[],"mappings":"AAOA,OAAO,iDAAiD,CAAC;AAEzD,OAAO,EAAqC,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAQ9F,eAAO,MAAM,yBAAyB,GAAI,gBAAgB,WAAW,KAAG,aAwDvE,CAAC;AAEF,eAAO,MAAM,cAAc,YAc1B,CAAC"}

package/dist/json/client/wrapperWs.js

@@ -1,87 +0,0 @@
-/* --------------------------------------------------------------------------------------------
- * 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 } 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) => {
-    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);
-    }
-};
-//# sourceMappingURL=wrapperWs.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"wrapperWs.js","sourceRoot":"","sources":["../../../src/json/client/wrapperWs.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAEhG,OAAO,6BAA6B,MAAM,uDAAuD,CAAC;AAClG,uCAAuC;AACvC,OAAO,iDAAiD,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AACxD,OAAO,EAAE,iCAAiC,EAAsB,MAAM,uBAAuB,CAAC;AAC9F,OAAO,EAAE,6BAA6B,EAAE,MAAM,6CAA6C,CAAC;AAE5F,MAAM,IAAI,GAAG;;;EAGX,CAAC;AAEH,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,aAA2B,EAAiB,EAAE;IACpF,OAAO;QACH,KAAK,EAAE,UAAU;QACjB,aAAa;QACb,QAAQ,EAAE,QAAQ,CAAC,KAAK;QACxB,eAAe,EAAE;YACb,gBAAgB,EAAE;gBACd,GAAG,6BAA6B,EAAE;aACrC;YACD,iBAAiB,EAAE;gBACf,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;oBACjB,sBAAsB,EAAE,qBAAqB;oBAC7C,sCAAsC,EAAE,QAAQ;oBAChD,0BAA0B,EAAE,IAAI;oBAChC,6BAA6B,EAAE,KAAK;oBACpC,uCAAuC,EAAE,IAAI;iBAChD,CAAC;aACL;SACJ;QACD,eAAe,EAAE;YACb,aAAa,EAAE;gBACX,QAAQ,EAAE;oBACN,IAAI;oBACJ,GAAG,EAAE,sBAAsB;iBAC9B;aACJ;YACD,mBAAmB,EAAE,6BAA6B;SACrD;QACD,qBAAqB,EAAE;YACnB,OAAO,EAAE;gBACL,IAAI,EAAE;oBACF,aAAa,EAAE;wBACX,gBAAgB,EAAE,CAAC,MAAM,CAAC;qBAC7B;oBACD,UAAU,EAAE;wBACR,OAAO,EAAE;4BACL,KAAK,EAAE,cAAc;4BACrB,GAAG,EAAE,mCAAmC;4BACxC,YAAY,EAAE;gCACV,MAAM,EAAE,GAAG,EAAE;oCACT,OAAO,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAC;gCACxC,CAAC;gCACD,YAAY,EAAE,IAAI;6BACrB;4BACD,WAAW,EAAE;gCACT,MAAM,EAAE,GAAG,EAAE;oCACT,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC,CAAC;gCAC7C,CAAC;gCACD,YAAY,EAAE,IAAI;6BACrB;yBACJ;qBACJ;iBACJ;aACJ;SACJ;KACJ,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IAC/B,MAAM,OAAO,GAAG,IAAI,iCAAiC,EAAE,CAAC;IAExD,IAAI,CAAC;QACD,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,EAAE,gBAAgB,CAAC,OAAO,EAAE,KAAK,IAAI,EAAE;YAC1E,MAAM,MAAM,GAAG,yBAAyB,CAAC,QAAQ,CAAC,cAAc,CAAC,oBAAoB,CAAE,CAAC,CAAC;YACzF,MAAM,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QACvC,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,OAAO,EAAE,KAAK,IAAI,EAAE;YAC5E,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC;QAC5B,CAAC,CAAC,CAAC;IACP,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACT,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IACrB,CAAC;AACL,CAAC,CAAC"}

package/src/json/client/wrapperWs.ts

@@ -1,90 +0,0 @@
-/* --------------------------------------------------------------------------------------------
- * 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);
-    }
-};