View service related imports are made dynamically

docs/versions-and-history.md

@@ -6,6 +6,7 @@ The following table describes which version of **monaco-languageclient** and **@
 
 | monaco-languageclient | monaco-editor-wrapper | monaco-editor-react | monaco-vscode-api / editor-api | vscode | monaco-editor | release date | comment |
 | :---- | :---- | :--- | :--- | :--- | :--- | :--- | :--- |
+| 9.1.1 | 6.1.1 | 6.1.1 | 11.1.2 | 1.95.3 | 0.52.0 | 2025-01-20 | |
 | 9.1.0 | 6.1.0 | 6.1.0 | 11.1.2 | 1.95.3 | 0.52.0 | 2025-01-10 | |
 | 9.0.0 | 6.0.0 | 6.0.0 | 11.1.2 | 1.95.3 | 0.52.0 | 2024-12-18 | |
 | 8.8.3         | 5.5.3 | 4.5.3 | 8.0.4  | 1.92.2 | 0.51.0 | 2024-08-26 | |

index.html

@@ -34,7 +34,7 @@ <h3>JSON</h3>
 
         <h3>Langium</h3>
 
-        <a href="./packages/examples/langium.html">Langium Grammar DSL Language Client & Language Server (Worker)</a>
+        Langium Grammar DSL: <a href="./packages/examples/langium_extended.html">Extended Mode</a> - <a href="./packages/examples/langium_classic.html">Classic Mode</a>
         <br>
         <a href="./packages/examples/statemachine.html">Langium Statemachine Client & Language Server (Worker)</a>
         <br>

package.json

@@ -15,20 +15,20 @@
     "@codingame/esbuild-import-meta-url-plugin": "~1.0.2",
     "@codingame/monaco-vscode-rollup-vsix-plugin": "~11.1.2",
     "@eslint/eslintrc": "~3.2.0",
-    "@eslint/js": "~9.17.0",
-    "@stylistic/eslint-plugin": "~2.12.1",
-    "@testing-library/react": "~16.1.0",
-    "@types/node": "~22.10.5",
-    "@types/react": "~19.0.4",
-    "@types/react-dom": "~19.0.2",
+    "@eslint/js": "~9.18.0",
+    "@stylistic/eslint-plugin": "~2.13.0",
+    "@testing-library/react": "~16.2.0",
+    "@types/node": "~22.10.7",
+    "@types/react": "~19.0.7",
+    "@types/react-dom": "~19.0.3",
     "@types/vscode": "~1.95.0",
-    "@typescript-eslint/eslint-plugin": "~8.19.1",
-    "@typescript-eslint/parser": "~8.19.1",
+    "@typescript-eslint/eslint-plugin": "~8.20.0",
+    "@typescript-eslint/parser": "~8.20.0",
     "@vitejs/plugin-react": "~4.3.4",
-    "@vitest/browser": "~2.1.8",
+    "@vitest/browser": "~3.0.2",
     "editorconfig": "~2.0.0",
     "esbuild": "~0.24.2",
-    "eslint": "~9.17.0",
+    "eslint": "~9.18.0",
     "eslint-plugin-header": "~3.1.1",
     "eslint-plugin-import": "~2.31.0",
     "eslint-plugin-unused-imports": "~4.1.4",
@@ -37,9 +37,9 @@
     "minimatch": "~10.0.1",
     "playwright": "~1.49.1",
     "typescript": "~5.7.3",
-    "vite": "~6.0.7",
-    "vite-node": "~2.1.8",
-    "vitest": "~2.1.8"
+    "vite": "~6.0.8",
+    "vite-node": "~3.0.2",
+    "vitest": "~3.0.2"
   },
   "scripts": {
     "clean": "npm run clean --workspaces",
@@ -77,8 +77,5 @@
     "packages/wrapper",
     "packages/wrapper-react",
     "packages/examples"
-  ],
-  "overrides": {
-    "vite": "~6.0.7"
-  }
+  ]
 }

packages/client/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes to this npm module are documented in this file.
 
+## [9.1.1] - 2025-01-20
+
+- View service related imports are made dynamically [#829](https://github.com/TypeFox/monaco-languageclient/pull/829)
+
 ## [9.1.0] - 2025-01-10
 
 - `@typefox/monaco-editor-react` now works with views service `initialize` [#823](https://github.com/TypeFox/monaco-languageclient/pull/823)

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monaco-languageclient",
-  "version": "9.1.0",
+  "version": "9.1.1",
   "description": "Monaco Language client implementation",
   "author": {
     "name": "TypeFox GmbH",

packages/client/src/vscode/services.ts

@@ -6,7 +6,7 @@
 import * as monaco from 'monaco-editor';
 import 'vscode/localExtensionHost';
 import { initialize, IWorkbenchConstructionOptions } from 'vscode/services';
-import { OpenEditor } from '@codingame/monaco-vscode-editor-service-override';
+import type { 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';
@@ -31,7 +31,7 @@ export interface ViewsConfig {
     viewServiceType: 'EditorService' | 'ViewsService' | 'WorkspaceService';
     openEditorFunc?: OpenEditor;
     htmlAugmentationInstructions?: (htmlContainer: HTMLElement | null | undefined) => void;
-    viewsInitFunc?: () => void;
+    viewsInitFunc?: () => Promise<void>;
 }
 
 export interface VscodeApiConfig {
@@ -112,7 +112,7 @@ export const initServices = async (vscodeApiConfig: VscodeApiConfig, instruction
             await importAllServices(vscodeApiConfig, instructions);
 
             vscodeApiConfig.viewsConfig?.htmlAugmentationInstructions?.(instructions?.htmlContainer);
-            vscodeApiConfig.viewsConfig?.viewsInitFunc?.();
+            await vscodeApiConfig.viewsConfig?.viewsInitFunc?.();
             instructions?.logger?.debug('Initialization of vscode services completed successfully.');
 
             envEnhanced.vscodeApiInitialised = true;

packages/examples/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes to this npm module are documented in this file.
 
+## [2025.1.2] - 2025-01-20
+
+- Updated to `[email protected]`, `[email protected]` and `@typefox/[email protected]`.
+- View service related imports are made dynamically [#829](https://github.com/TypeFox/monaco-languageclient/pull/829)
+  - Separated Langium DSL example into Extended and Classic Mode versions
+
 ## [2025.1.1] - 2025-01-10
 
 - Updated to `[email protected]`, `[email protected]` and `@typefox/[email protected]`.

packages/examples/ghp_langium.html → packages/examples/ghp_langium_classic.html

@@ -2,25 +2,24 @@
 <html lang="en">
 
 <head>
-    <title>Langium Grammar DSL Language Client & Language Server (Worker)</title>
+    <title>Langium Grammar DSL (Classic Mode)</title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
     <div class="exampleHeadelineDiv">
-        <b class="exampleHeadeline">Langium Grammar DSL Language Client & Language Server (Worker)</b> - [<a href="./index.html">Back to Index</a>]
+        <b class="exampleHeadeline">Langium Grammar DSL (Classic Mode)</b> - [<a href="./index.html">Back to Index</a>]
         <br>
-        <button type="button" id="button-start-classic">Start Classic</button>
-        <button type="button" id="button-start-extended">Start Extended</button>
+        <button type="button" id="button-start">Start</button>
         <button type="button" id="button-dispose">Dispose</button>
     </div>
     <div id="monaco-editor-root" style="height: 80vh; border: 1px solid grey"></div>
     <script type="module">
         import { runLangiumDslWrapper } from './src/langium/langium-dsl/wrapperLangium.ts';
 
-        runLangiumDslWrapper();
+        runLangiumDslWrapper(false);
     </script>;
 </body>
 

packages/examples/langium.html → packages/examples/ghp_langium_extended.html

@@ -2,25 +2,24 @@
 <html lang="en">
 
 <head>
-    <title>Langium Grammar DSL Language Client & Language Server (Worker)</title>
+    <title>Langium Grammar DSL (Extended Mode)</title>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css">
 </head>
 
 <body>
     <div class="exampleHeadelineDiv">
-        <b class="exampleHeadeline">Langium Grammar DSL Language Client & Language Server (Worker)</b> - [<a href="../../index.html">Back to Index</a>]
+        <b class="exampleHeadeline">Langium Grammar DSL (Extended Mode)</b> - [<a href="./index.html">Back to Index</a>]
         <br>
-        <button type="button" id="button-start-classic">Start Classic</button>
-        <button type="button" id="button-start-extended">Start Extended</button>
+        <button type="button" id="button-start">Start</button>
         <button type="button" id="button-dispose">Dispose</button>
     </div>
     <div id="monaco-editor-root" style="height: 80vh; border: 1px solid grey"></div>
     <script type="module">
         import { runLangiumDslWrapper } from './src/langium/langium-dsl/wrapperLangium.ts';
 
-        runLangiumDslWrapper();
+        runLangiumDslWrapper(true);
     </script>;
 </body>
 

packages/examples/index.html

@@ -18,7 +18,7 @@ <h2>Monaco Editor Wrapper</h2>
 
         <h3>Langium</h3>
 
-        <a href="./ghp_langium.html">Langium Grammar DSL Language Client & Language Server (Worker)</a>
+        Langium Grammar DSL: <a href="./ghp_langium_extended.html">Extended Mode</a> - <a href="./ghp_langium_classic.html">Classic Mode</a>
         <br>
         <a href="./ghp_statemachine.html">Langium Statemachine Client & Language Server (Worker)</a>
         <br>

packages/examples/langium_classic.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Langium Grammar DSL (Classic Mode)</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="exampleHeadelineDiv">
+        <b class="exampleHeadeline">Langium Grammar DSL (Classic Mode)</b> - [<a href="../../index.html">Back to Index</a>]
+        <br>
+        <button type="button" id="button-start">Start</button>
+        <button type="button" id="button-dispose">Dispose</button>
+    </div>
+    <div id="monaco-editor-root" style="height: 80vh; border: 1px solid grey"></div>
+    <script type="module">
+        import { runLangiumDslWrapper } from './src/langium/langium-dsl/wrapperLangium.ts';
+
+        runLangiumDslWrapper(false);
+    </script>;
+</body>
+
+</html>

packages/examples/langium_extended.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Langium Grammar DSL (Extended Mode)</title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="exampleHeadelineDiv">
+        <b class="exampleHeadeline">Langium Grammar DSL (Extended Mode)</b> - [<a href="../../index.html">Back to Index</a>]
+        <br>
+        <button type="button" id="button-start">Start</button>
+        <button type="button" id="button-dispose">Dispose</button>
+    </div>
+    <div id="monaco-editor-root" style="height: 80vh; border: 1px solid grey"></div>
+    <script type="module">
+        import { runLangiumDslWrapper } from './src/langium/langium-dsl/wrapperLangium.ts';
+
+        runLangiumDslWrapper(true);
+    </script>;
+</body>
+
+</html>

packages/examples/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monaco-languageclient-examples",
-  "version": "2025.1.1",
+  "version": "2025.1.2",
   "description": "Monaco Language client examples",
   "author": {
     "name": "TypeFox GmbH",
@@ -98,15 +98,15 @@
     "@codingame/monaco-vscode-typescript-basics-default-extension": "~11.1.2",
     "@codingame/monaco-vscode-typescript-language-features-default-extension": "~11.1.2",
     "@codingame/monaco-vscode-views-service-override": "~11.1.2",
-    "@typefox/monaco-editor-react": "~6.1.0",
+    "@typefox/monaco-editor-react": "~6.1.1",
     "cors": "^2.8.5",
     "express": "~4.21.2",
     "jszip": "~3.10.1",
     "langium": "~3.3.0",
     "monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~11.1.2",
-    "monaco-editor-wrapper": "~6.1.0",
-    "monaco-languageclient": "~9.1.0",
-    "pyright": "~1.1.391",
+    "monaco-editor-wrapper": "~6.1.1",
+    "monaco-languageclient": "~9.1.1",
+    "pyright": "~1.1.392",
     "react": "~19.0.0",
     "react-dom": "~19.0.0",
     "request-light": "~0.8.0",

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

@@ -9,12 +9,10 @@ import { LogLevel } from 'vscode/services';
 import { Logger } from 'monaco-languageclient/tools';
 import { WrapperConfig } from 'monaco-editor-wrapper';
 import { LangiumMonarchContent } from './langium.monarch.js';
-import { loadLangiumWorker } from '../wrapperLangium.js';
 import { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory';
 import code from '../../../../resources/langium/langium-dsl/example.langium?raw';
 
-export const setupLangiumClientClassic = async (): Promise<WrapperConfig> => {
-    const langiumWorker = loadLangiumWorker();
+export const setupLangiumClientClassic = async (langiumWorker: Worker): Promise<WrapperConfig> => {
     return {
         $type: 'classic',
         htmlContainer: document.getElementById('monaco-editor-root')!,

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

@@ -4,25 +4,22 @@
  * ------------------------------------------------------------------------------------------ */
 
 import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
+import { LogLevel } from 'vscode/services';
 import '../../../../resources/vsix/github-vscode-theme.vsix';
-
 import { BrowserMessageReader, BrowserMessageWriter } from 'vscode-languageclient/browser.js';
-import { LogLevel } from 'vscode/services';
 import { WrapperConfig } from 'monaco-editor-wrapper';
-import { loadLangiumWorker } from '../wrapperLangium.js';
 import { configureMonacoWorkers } from '../../../common/client/utils.js';
 import langiumLanguageConfig from './langium.configuration.json?raw';
 import langiumTextmateGrammar from './langium.tmLanguage.json?raw';
 import text from '../../../../resources/langium/langium-dsl//example.langium?raw';
 
-export const setupLangiumClientExtended = async (): Promise<WrapperConfig> => {
+export const setupLangiumClientExtended = async (langiumWorker: Worker): 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 langiumWorker = loadLangiumWorker();
     const reader = new BrowserMessageReader(langiumWorker);
     const writer = new BrowserMessageWriter(langiumWorker);