Suppport all arguments for monaco-vscode-api initialize, allow to configure editor-, view- or workspace-service (preperation for further extension)

Author: kaisalmen

.editorconfig

@@ -13,3 +13,6 @@ indent_size = 2
 
 [*.md]
 indent_size = 2
+
+[*.yml]
+indent_size = 2

package-lock.json

@@ -5,28 +5,28 @@
     "@codingame/esbuild-import-meta-url-plugin": "~1.0.2",
     "@codingame/monaco-vscode-rollup-vsix-plugin": "~9.0.3",
     "@testing-library/react": "~16.0.1",
-    "@types/node": "~20.16.9",
-    "@types/react": "~18.3.9",
+    "@types/node": "~20.16.10",
+    "@types/react": "~18.3.10",
     "@types/react-dom": "~18.3.0",
     "@types/vscode": "~1.93.0",
     "@typescript-eslint/eslint-plugin": "~7.18.0",
     "@typescript-eslint/parser": "~7.18.0",
-    "@vitejs/plugin-react": "~4.3.1",
-    "@vitest/browser": "~2.1.1",
+    "@vitejs/plugin-react": "~4.3.2",
+    "@vitest/browser": "~2.1.2",
     "editorconfig": "~2.0.0",
     "esbuild": "~0.24.0",
-    "eslint": "~8.57.0",
+    "eslint": "~8.57.1",
     "eslint-plugin-header": "~3.1.1",
     "eslint-plugin-import": "~2.29.1",
     "eslint-plugin-unused-imports": "~3.2.0",
     "http-server": "~14.1.1",
     "minimatch": "~10.0.1",
     "playwright": "~1.47.2",
-    "typescript": "~5.5.4",
+    "typescript": "~5.6.2",
     "vite": "~5.4.8",
-    "vite-node": "~2.1.1",
-    "vitest": "~2.1.1",
-    "webdriverio": "~9.1.1"
+    "vite-node": "~2.1.2",
+    "vitest": "~2.1.2",
+    "webdriverio": "~9.1.2"
   },
   "volta": {
     "node": "20.17.0",
@@ -57,7 +57,7 @@
     "release:prepare": "npm run reset:repo && npm ci && npm run build && npm run lint && npm run test:run",
     "reset:repo": "git clean -f -X -d",
     "test": "npm run test:webdriverio",
-    "test:run": "npm run test:webdriverio",
+    "test:run": "npm run test:webdriverio:run",
     "test:webdriverio": "vitest",
     "test:webdriverio:run": "vitest --run",
     "test:playwright": "vitest --config vitest.debug.config.ts",

package.json

@@ -5,13 +5,15 @@
 
 import * as monaco from 'monaco-editor';
 import 'vscode/localExtensionHost';
-import { ILogService, initialize, IWorkbenchConstructionOptions, StandaloneServices, LogLevel } from 'vscode/services';
+import { initialize, IWorkbenchConstructionOptions } from 'vscode/services';
+import { OpenEditor } from '@codingame/monaco-vscode-editor-service-override';
 import type { WorkerConfig } from '@codingame/monaco-vscode-extensions-service-override';
 import getExtensionServiceOverride from '@codingame/monaco-vscode-extensions-service-override';
 import getLanguagesServiceOverride from '@codingame/monaco-vscode-languages-service-override';
 import getModelServiceOverride from '@codingame/monaco-vscode-model-service-override';
 import getLogServiceOverride from '@codingame/monaco-vscode-log-service-override';
 import type { LocalizationOptions } from '@codingame/monaco-vscode-localization-service-override';
+import { EnvironmentOverride } from 'vscode/workbench';
 import { Logger } from 'monaco-languageclient/tools';
 import { FakeWorker as Worker } from './fakeWorker.js';
 
@@ -24,9 +26,16 @@ export interface InitializeServiceConfig {
     userServices?: monaco.editor.IEditorOverrideServices;
     enableExtHostWorker?: boolean;
     workspaceConfig?: IWorkbenchConstructionOptions;
+    viewsConfig?: {
+        viewServiceType: 'EditorService' | 'ViewsService' | 'WorkspaceService';
+        openEditorFunc?: OpenEditor;
+        viewsInitFunc?: () => void;
+    },
+    envOptions?: EnvironmentOverride;
 }
 
 export interface InitServicesInstructions extends InitializeServiceConfig {
+    htmlContainer: HTMLElement;
     caller?: string;
     performChecks?: () => boolean;
     logger?: Logger;
@@ -48,6 +57,11 @@ export const initEnhancedMonacoEnvironment = () => {
     return envEnhanced;
 };
 
+export const getMonacoEnvironmentEnhanced = () => {
+    const monWin = (self as Window);
+    return monWin.MonacoEnvironment as MonacoEnvironmentEnhanced;
+};
+
 export const supplyRequiredServices = async () => {
     return {
         ...getLanguagesServiceOverride(),
@@ -79,6 +93,7 @@ export const initServices = async (instructions: InitServicesInstructions) => {
             instructions.logger?.debug(`Initializing vscode services. Caller: ${instructions.caller ?? 'unknown'}`);
 
             await importAllServices(instructions);
+            instructions.viewsConfig?.viewsInitFunc?.();
             instructions.logger?.debug('Initialization of vscode services completed successfully.');
 
             envEnhanced.vscodeApiInitialised = true;
@@ -108,8 +123,7 @@ export const importAllServices = async (instructions: InitServicesInstructions)
     reportServiceLoading(userServices, instructions.logger);
 
     if (instructions.performChecks === undefined || (typeof instructions.performChecks === 'function' && instructions.performChecks())) {
-        await initialize(userServices, undefined, instructions.workspaceConfig);
-        StandaloneServices.get(ILogService).setLevel(instructions.logger?.getLevel() ?? LogLevel.Off);
+        await initialize(userServices, instructions.htmlContainer, instructions.workspaceConfig, instructions.envOptions);
     }
 };
 

packages/client/src/vscode/services.ts

@@ -78,7 +78,7 @@
     "monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~9.0.3",
     "monaco-editor-wrapper": "~6.0.0-next.1",
     "monaco-languageclient": "~9.0.0-next.1",
-    "pyright": "~1.1.382",
+    "pyright": "~1.1.383",
     "react": "~18.3.1",
     "react-dom": "~18.3.1",
     "request-light": "~0.8.0",

packages/examples/package.json

@@ -22,12 +22,14 @@ import { updateUserConfiguration } from '@codingame/monaco-vscode-configuration-
 
 export const runClient = async () => {
     const logger = new ConsoleLogger(LogLevel.Debug);
+    const htmlContainer = document.getElementById('monaco-editor-root')!;
     await initServices({
         userServices: {
             ...getConfigurationServiceOverride(),
             ...getThemeServiceOverride(),
             ...getTextmateServiceOverride(),
         },
+        htmlContainer,
         logger
     });
 
@@ -46,7 +48,7 @@ export const runClient = async () => {
     configureMonacoWorkers(logger);
 
     // create monaco editor
-    monaco.editor.create(document.getElementById('monaco-editor-root')!, {
+    monaco.editor.create(htmlContainer, {
         value: `{
     "$schema": "http://json.schemastore.org/coffeelint",
     "line_endings": "unix"

packages/examples/src/bare/client.ts

@@ -19,7 +19,7 @@ export const runBrowserEditor = async () => {
     const protocolConverter = createProtocolConverter(undefined, true, true);
 
     let mainVscodeDocument: vscode.TextDocument | undefined;
-    const htmlElement = document.getElementById('monaco-editor-root');
+    const htmlContainer = document.getElementById('monaco-editor-root')!;
     const languageId = 'json';
     const code = `{
     "$schema": "http://json.schemastore.org/coffeelint",
@@ -52,7 +52,8 @@ export const runBrowserEditor = async () => {
                     'editor.experimental.asyncTokenization': true
                 })
             },
-            monacoWorkerFactory: configureMonacoWorkers
+            monacoWorkerFactory: configureMonacoWorkers,
+            htmlContainer
         }
     };
     await wrapper.init(jsonClientUserConfig);
@@ -155,7 +156,7 @@ export const runBrowserEditor = async () => {
         diagnosticCollection.clear();
     };
 
-    await wrapper.start(htmlElement);
+    await wrapper.start();
 
     wrapper.getTextModels()?.text?.onDidChangeContent(() => {
         validate();

packages/examples/src/browser/main.ts

@@ -44,7 +44,8 @@ export const runEclipseJdtLsClient = () => {
                     'editor.experimental.asyncTokenization': true
                 })
             },
-            monacoWorkerFactory: configureMonacoWorkers
+            monacoWorkerFactory: configureMonacoWorkers,
+            htmlContainer: document.getElementById('monaco-editor-root')!
         },
         languageClientConfigs: {
             java: {
@@ -68,7 +69,6 @@ export const runEclipseJdtLsClient = () => {
     };
 
     const wrapper = new MonacoEditorLanguageClientWrapper();
-    const htmlElement = document.getElementById('monaco-editor-root');
 
     try {
         document.querySelector('#button-start')?.addEventListener('click', async () => {
@@ -77,7 +77,7 @@ export const runEclipseJdtLsClient = () => {
             // open files, so the LS can pick it up
             await vscode.workspace.openTextDocument(helloJavaUri);
 
-            await wrapper.start(htmlElement);
+            await wrapper.start();
         });
         document.querySelector('#button-dispose')?.addEventListener('click', async () => {
             await wrapper.dispose();

packages/examples/src/eclipse.jdt.ls/client/main.ts

@@ -40,7 +40,8 @@ const userConfig: WrapperConfig = {
                 'editor.experimental.asyncTokenization': true
             })
         },
-        monacoWorkerFactory: configureMonacoWorkers
+        monacoWorkerFactory: configureMonacoWorkers,
+        htmlContainer: document.getElementById('monaco-editor-root')!
     },
     languageClientConfigs: {
         groovy: {
@@ -57,11 +58,10 @@ const userConfig: WrapperConfig = {
 
 export const runGroovyClient = () => {
     const wrapper = new MonacoEditorLanguageClientWrapper();
-    const htmlElement = document.getElementById('monaco-editor-root');
 
     try {
         document.querySelector('#button-start')?.addEventListener('click', async () => {
-            await wrapper.initAndStart(userConfig, htmlElement);
+            await wrapper.initAndStart(userConfig);
         });
         document.querySelector('#button-dispose')?.addEventListener('click', async () => {
             await wrapper.dispose();

packages/examples/src/groovy/client/main.ts

@@ -40,7 +40,8 @@ export const jsonClientUserConfig: WrapperConfig = {
                 'editor.experimental.asyncTokenization': true
             })
         },
-        monacoWorkerFactory: configureMonacoWorkers
+        monacoWorkerFactory: configureMonacoWorkers,
+        htmlContainer: document.getElementById('monaco-editor-root')!
     },
     languageClientConfigs: {
         json: {
@@ -69,11 +70,10 @@ export const jsonClientUserConfig: WrapperConfig = {
 
 export const runJsonWrapper = () => {
     const wrapper = new MonacoEditorLanguageClientWrapper();
-    const htmlElement = document.getElementById('monaco-editor-root');
 
     try {
         document.querySelector('#button-start')?.addEventListener('click', async () => {
-            await wrapper.initAndStart(jsonClientUserConfig, htmlElement);
+            await wrapper.initAndStart(jsonClientUserConfig);
         });
         document.querySelector('#button-dispose')?.addEventListener('click', async () => {
             await wrapper.dispose();

packages/examples/src/json/client/wrapperWs.ts

@@ -49,7 +49,8 @@ export const setupLangiumClientClassic = async (): Promise<WrapperConfig> => {
                 useWorkerFactory({
                     logger
                 });
-            }
+            },
+            htmlContainer: document.getElementById('monaco-editor-root')!
         },
         languageClientConfigs: {
             langium: {

packages/examples/src/langium/langium-dsl/config/classicConfig.ts

@@ -76,7 +76,8 @@ export const setupLangiumClientExtended = async (): Promise<WrapperConfig> => {
                     'editor.experimental.asyncTokenization': true
                 })
             },
-            monacoWorkerFactory: configureMonacoWorkers
+            monacoWorkerFactory: configureMonacoWorkers,
+            htmlContainer: document.getElementById('monaco-editor-root')!
         },
         languageClientConfigs: {
             langium: {

packages/examples/src/langium/langium-dsl/config/extendedConfig.ts

@@ -11,7 +11,6 @@ import { disableButton } from '../../common/client/utils.js';
 
 let wrapper: MonacoEditorLanguageClientWrapper | undefined;
 let extended = false;
-const htmlElement = document.getElementById('monaco-editor-root');
 
 export const runLangiumDslWrapper = async () => {
     try {
@@ -31,7 +30,7 @@ export const startLangiumClientExtended = async () => {
         disableButton('button-start-extended', true);
         const config = await setupLangiumClientExtended();
         wrapper = new MonacoEditorLanguageClientWrapper();
-        wrapper.initAndStart(config, htmlElement);
+        wrapper.initAndStart(config);
     } catch (e) {
         console.log(e);
     }
@@ -44,7 +43,7 @@ export const startLangiumClientClassic = async () => {
         disableButton('button-start-extended', true);
         const config = await setupLangiumClientClassic();
         wrapper = new MonacoEditorLanguageClientWrapper();
-        await wrapper.initAndStart(config, htmlElement!);
+        await wrapper.initAndStart(config);
     } catch (e) {
         console.log(e);
     }

packages/examples/src/langium/langium-dsl/wrapperLangium.ts

@@ -96,7 +96,8 @@ export const createLangiumGlobalConfig = async (params: {
                     'editor.experimental.asyncTokenization': true
                 })
             },
-            monacoWorkerFactory: configureMonacoWorkers
+            monacoWorkerFactory: configureMonacoWorkers,
+            htmlContainer: document.getElementById('monaco-editor-root')!
         },
         languageClientConfigs
     };

packages/examples/src/langium/statemachine/config/wrapperStatemachineConfig.ts

@@ -11,7 +11,7 @@ import { loadStatemachineWorkerRegular } from './main.js';
 import text from './content/example.statemachine?raw';
 
 export const runStatemachineReact = async () => {
-    const langiumGlobalConfig = await createLangiumGlobalConfig({
+    const wrapperConfig = await createLangiumGlobalConfig({
         languageServerId: 'react',
         useLanguageClient: true,
         text,
@@ -20,7 +20,6 @@ export const runStatemachineReact = async () => {
 
     try {
         document.querySelector('#button-start')?.addEventListener('click', async () => {
-            const htmlElement = document.getElementById('monaco-editor-root');
             const App = () => {
 
                 const [ height, setHeight ] = useState('80vh');
@@ -38,15 +37,15 @@ export const runStatemachineReact = async () => {
                     <div style={{ 'height': height }} >
                         <MonacoEditorReactComp
                             style={{ 'height': '100%' }}
-                            wrapperConfig={langiumGlobalConfig} />
+                            wrapperConfig={wrapperConfig} />
                     </div>
                 );
             };
             const strictMode = (document.getElementById('checkbox-strictmode')! as HTMLInputElement).checked;
             if (strictMode) {
-                ReactDOM.createRoot(htmlElement!).render(<StrictMode><App /></StrictMode>);
+                ReactDOM.createRoot(wrapperConfig.editorAppConfig.htmlContainer).render(<StrictMode><App /></StrictMode>);
             } else {
-                ReactDOM.createRoot(htmlElement!).render(<App />);
+                ReactDOM.createRoot(wrapperConfig.editorAppConfig.htmlContainer).render(<App />);
             }
         });
         document.querySelector('#button-dispose')?.addEventListener('click', () => {

packages/examples/src/langium/statemachine/main-react.tsx

@@ -47,7 +47,7 @@ const startEditor = async () => {
         messagePort: channel.port1,
         messageTransports: { reader, writer }
     });
-    await wrapper.initAndStart(langiumGlobalConfig, document.getElementById('monaco-editor-root'));
+    await wrapper.initAndStart(langiumGlobalConfig);
 
     // here the modelReference is created manually and given to the updateEditorModels of the wrapper
     const uri = vscode.Uri.parse('/workspace/statemachine-mod.statemachine');
@@ -63,7 +63,7 @@ const startEditor = async () => {
         useLanguageClient: false,
         text: textMod
     });
-    await wrapper2.initAndStart(langiumGlobalConfig2, document.getElementById('monaco-editor-root2'));
+    await wrapper2.initAndStart(langiumGlobalConfig2);
 
     vscode.commands.getCommands().then((x) => {
         console.log('Currently registered # of vscode commands: ' + x.length);

packages/examples/src/langium/statemachine/main.ts

@@ -54,7 +54,8 @@ print("Hello Moon!")
                     'editor.experimental.asyncTokenization': true
                 })
             },
-            monacoWorkerFactory: configureMonacoWorkers
+            monacoWorkerFactory: configureMonacoWorkers,
+            htmlContainer: document.getElementById('monaco-editor-root')!
         },
         languageClientConfigs: {
             json: {
@@ -109,7 +110,6 @@ print("Hello Moon!")
         }
     };
 
-    const htmlElement = document.getElementById('monaco-editor-root');
     const wrapper = new MonacoEditorLanguageClientWrapper();
 
     try {
@@ -119,7 +119,7 @@ print("Hello Moon!")
                 (wrapperConfig.editorAppConfig.codeResources.main as CodePlusFileExt).fileExt = currenFileExt;
             }
 
-            await wrapper.initAndStart(wrapperConfig, htmlElement);
+            await wrapper.initAndStart(wrapperConfig);
             disableButton('button-flip', false);
         });
         document.querySelector('#button-dispose')?.addEventListener('click', async () => {

packages/examples/src/multi/twoLanguageClients.ts

@@ -87,7 +87,8 @@ export const createUserConfig = (workspaceRoot: string, code: string, codeUri: s
                 })
             },
             useDiffEditor: false,
-            monacoWorkerFactory: configureMonacoWorkers
+            monacoWorkerFactory: configureMonacoWorkers,
+            htmlContainer: document.getElementById('monaco-editor-root')!
         }
     };
 };