Skip to content

Commit b7f690d

Browse files
kaisalmenkaisalmen
committed
fix: View service related imports are made dynamically
- Updated dependencies - Properly separated langium classic and extend example
1 parent a97aeed commit b7f690d

18 files changed

+324
-289
lines changed

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ <h3>JSON</h3>
3434

3535
<h3>Langium</h3>
3636

37-
<a href="./packages/examples/langium.html">Langium Grammar DSL Language Client & Language Server (Worker)</a>
37+
Langium Grammar DSL: <a href="./packages/examples/langium_extended.html">Extended Mode</a> - <a href="./packages/examples/langium_classic.html">Classic Mode</a>
3838
<br>
3939
<a href="./packages/examples/statemachine.html">Langium Statemachine Client & Language Server (Worker)</a>
4040
<br>

‎package-lock.json

Lines changed: 184 additions & 183 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,20 @@
1515
"@codingame/esbuild-import-meta-url-plugin": "~1.0.2",
1616
"@codingame/monaco-vscode-rollup-vsix-plugin": "~11.1.2",
1717
"@eslint/eslintrc": "~3.2.0",
18-
"@eslint/js": "~9.17.0",
19-
"@stylistic/eslint-plugin": "~2.12.1",
20-
"@testing-library/react": "~16.1.0",
21-
"@types/node": "~22.10.5",
22-
"@types/react": "~19.0.4",
23-
"@types/react-dom": "~19.0.2",
18+
"@eslint/js": "~9.18.0",
19+
"@stylistic/eslint-plugin": "~2.13.0",
20+
"@testing-library/react": "~16.2.0",
21+
"@types/node": "~22.10.7",
22+
"@types/react": "~19.0.7",
23+
"@types/react-dom": "~19.0.3",
2424
"@types/vscode": "~1.95.0",
25-
"@typescript-eslint/eslint-plugin": "~8.19.1",
26-
"@typescript-eslint/parser": "~8.19.1",
25+
"@typescript-eslint/eslint-plugin": "~8.20.0",
26+
"@typescript-eslint/parser": "~8.20.0",
2727
"@vitejs/plugin-react": "~4.3.4",
28-
"@vitest/browser": "~2.1.8",
28+
"@vitest/browser": "~3.0.2",
2929
"editorconfig": "~2.0.0",
3030
"esbuild": "~0.24.2",
31-
"eslint": "~9.17.0",
31+
"eslint": "~9.18.0",
3232
"eslint-plugin-header": "~3.1.1",
3333
"eslint-plugin-import": "~2.31.0",
3434
"eslint-plugin-unused-imports": "~4.1.4",
@@ -37,9 +37,9 @@
3737
"minimatch": "~10.0.1",
3838
"playwright": "~1.49.1",
3939
"typescript": "~5.7.3",
40-
"vite": "~6.0.7",
41-
"vite-node": "~2.1.8",
42-
"vitest": "~2.1.8"
40+
"vite": "~6.0.8",
41+
"vite-node": "~3.0.2",
42+
"vitest": "~3.0.2"
4343
},
4444
"scripts": {
4545
"clean": "npm run clean --workspaces",
@@ -77,8 +77,5 @@
7777
"packages/wrapper",
7878
"packages/wrapper-react",
7979
"packages/examples"
80-
],
81-
"overrides": {
82-
"vite": "~6.0.7"
83-
}
80+
]
8481
}

‎packages/client/src/vscode/services.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import * as monaco from 'monaco-editor';
77
import 'vscode/localExtensionHost';
88
import { initialize, IWorkbenchConstructionOptions } from 'vscode/services';
9-
import { OpenEditor } from '@codingame/monaco-vscode-editor-service-override';
9+
import type { OpenEditor } from '@codingame/monaco-vscode-editor-service-override';
1010
import type { WorkerConfig } from '@codingame/monaco-vscode-extensions-service-override';
1111
import getExtensionServiceOverride from '@codingame/monaco-vscode-extensions-service-override';
1212
import getLanguagesServiceOverride from '@codingame/monaco-vscode-languages-service-override';
@@ -31,7 +31,7 @@ export interface ViewsConfig {
3131
viewServiceType: 'EditorService' | 'ViewsService' | 'WorkspaceService';
3232
openEditorFunc?: OpenEditor;
3333
htmlAugmentationInstructions?: (htmlContainer: HTMLElement | null | undefined) => void;
34-
viewsInitFunc?: () => void;
34+
viewsInitFunc?: () => Promise<void>;
3535
}
3636

3737
export interface VscodeApiConfig {
@@ -112,7 +112,7 @@ export const initServices = async (vscodeApiConfig: VscodeApiConfig, instruction
112112
await importAllServices(vscodeApiConfig, instructions);
113113

114114
vscodeApiConfig.viewsConfig?.htmlAugmentationInstructions?.(instructions?.htmlContainer);
115-
vscodeApiConfig.viewsConfig?.viewsInitFunc?.();
115+
await vscodeApiConfig.viewsConfig?.viewsInitFunc?.();
116116
instructions?.logger?.debug('Initialization of vscode services completed successfully.');
117117

118118
envEnhanced.vscodeApiInitialised = true;

‎packages/examples/ghp_langium.html renamed to ‎packages/examples/ghp_langium_classic.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,24 @@
22
<html lang="en">
33

44
<head>
5-
<title>Langium Grammar DSL Language Client & Language Server (Worker)</title>
5+
<title>Langium Grammar DSL (Classic Mode)</title>
66
<meta charset="UTF-8" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
88
<link rel="stylesheet" href="style.css">
99
</head>
1010

1111
<body>
1212
<div class="exampleHeadelineDiv">
13-
<b class="exampleHeadeline">Langium Grammar DSL Language Client & Language Server (Worker)</b> - [<a href="./index.html">Back to Index</a>]
13+
<b class="exampleHeadeline">Langium Grammar DSL (Classic Mode)</b> - [<a href="./index.html">Back to Index</a>]
1414
<br>
15-
<button type="button" id="button-start-classic">Start Classic</button>
16-
<button type="button" id="button-start-extended">Start Extended</button>
15+
<button type="button" id="button-start">Start</button>
1716
<button type="button" id="button-dispose">Dispose</button>
1817
</div>
1918
<div id="monaco-editor-root" style="height: 80vh; border: 1px solid grey"></div>
2019
<script type="module">
2120
import { runLangiumDslWrapper } from './src/langium/langium-dsl/wrapperLangium.ts';
2221

23-
runLangiumDslWrapper();
22+
runLangiumDslWrapper(false);
2423
</script>;
2524
</body>
2625

‎packages/examples/langium.html renamed to ‎packages/examples/ghp_langium_extended.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,24 @@
22
<html lang="en">
33

44
<head>
5-
<title>Langium Grammar DSL Language Client & Language Server (Worker)</title>
5+
<title>Langium Grammar DSL (Extended Mode)</title>
66
<meta charset="UTF-8" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
88
<link rel="stylesheet" href="style.css">
99
</head>
1010

1111
<body>
1212
<div class="exampleHeadelineDiv">
13-
<b class="exampleHeadeline">Langium Grammar DSL Language Client & Language Server (Worker)</b> - [<a href="../../index.html">Back to Index</a>]
13+
<b class="exampleHeadeline">Langium Grammar DSL (Extended Mode)</b> - [<a href="./index.html">Back to Index</a>]
1414
<br>
15-
<button type="button" id="button-start-classic">Start Classic</button>
16-
<button type="button" id="button-start-extended">Start Extended</button>
15+
<button type="button" id="button-start">Start</button>
1716
<button type="button" id="button-dispose">Dispose</button>
1817
</div>
1918
<div id="monaco-editor-root" style="height: 80vh; border: 1px solid grey"></div>
2019
<script type="module">
2120
import { runLangiumDslWrapper } from './src/langium/langium-dsl/wrapperLangium.ts';
2221

23-
runLangiumDslWrapper();
22+
runLangiumDslWrapper(true);
2423
</script>;
2524
</body>
2625

‎packages/examples/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ <h2>Monaco Editor Wrapper</h2>
1818

1919
<h3>Langium</h3>
2020

21-
<a href="./ghp_langium.html">Langium Grammar DSL Language Client & Language Server (Worker)</a>
21+
Langium Grammar DSL: <a href="./ghp_langium_extended.html">Extended Mode</a> - <a href="./ghp_langium_classic.html">Classic Mode</a>
2222
<br>
2323
<a href="./ghp_statemachine.html">Langium Statemachine Client & Language Server (Worker)</a>
2424
<br>

‎packages/examples/langium_classic.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Langium Grammar DSL (Classic Mode)</title>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<div class="exampleHeadelineDiv">
13+
<b class="exampleHeadeline">Langium Grammar DSL (Classic Mode)</b> - [<a href="../../index.html">Back to Index</a>]
14+
<br>
15+
<button type="button" id="button-start">Start</button>
16+
<button type="button" id="button-dispose">Dispose</button>
17+
</div>
18+
<div id="monaco-editor-root" style="height: 80vh; border: 1px solid grey"></div>
19+
<script type="module">
20+
import { runLangiumDslWrapper } from './src/langium/langium-dsl/wrapperLangium.ts';
21+
22+
runLangiumDslWrapper(false);
23+
</script>;
24+
</body>
25+
26+
</html>

‎packages/examples/langium_extended.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>Langium Grammar DSL (Extended Mode)</title>
6+
<meta charset="UTF-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<div class="exampleHeadelineDiv">
13+
<b class="exampleHeadeline">Langium Grammar DSL (Extended Mode)</b> - [<a href="../../index.html">Back to Index</a>]
14+
<br>
15+
<button type="button" id="button-start">Start</button>
16+
<button type="button" id="button-dispose">Dispose</button>
17+
</div>
18+
<div id="monaco-editor-root" style="height: 80vh; border: 1px solid grey"></div>
19+
<script type="module">
20+
import { runLangiumDslWrapper } from './src/langium/langium-dsl/wrapperLangium.ts';
21+
22+
runLangiumDslWrapper(true);
23+
</script>;
24+
</body>
25+
26+
</html>

‎packages/examples/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,7 @@
106106
"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~11.1.2",
107107
"monaco-editor-wrapper": "~6.1.0",
108108
"monaco-languageclient": "~9.1.0",
109-
"pyright": "~1.1.391",
109+
"pyright": "~1.1.392",
110110
"react": "~19.0.0",
111111
"react-dom": "~19.0.0",
112112
"request-light": "~0.8.0",

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,10 @@ import { LogLevel } from 'vscode/services';
99
import { Logger } from 'monaco-languageclient/tools';
1010
import { WrapperConfig } from 'monaco-editor-wrapper';
1111
import { LangiumMonarchContent } from './langium.monarch.js';
12-
import { loadLangiumWorker } from '../wrapperLangium.js';
1312
import { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory';
1413
import code from '../../../../resources/langium/langium-dsl/example.langium?raw';
1514

16-
export const setupLangiumClientClassic = async (): Promise<WrapperConfig> => {
17-
const langiumWorker = loadLangiumWorker();
15+
export const setupLangiumClientClassic = async (langiumWorker: Worker): Promise<WrapperConfig> => {
1816
return {
1917
$type: 'classic',
2018
htmlContainer: document.getElementById('monaco-editor-root')!,

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

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,22 @@
44
* ------------------------------------------------------------------------------------------ */
55

66
import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
7+
import { LogLevel } from 'vscode/services';
78
import '../../../../resources/vsix/github-vscode-theme.vsix';
8-
99
import { BrowserMessageReader, BrowserMessageWriter } from 'vscode-languageclient/browser.js';
10-
import { LogLevel } from 'vscode/services';
1110
import { WrapperConfig } from 'monaco-editor-wrapper';
12-
import { loadLangiumWorker } from '../wrapperLangium.js';
1311
import { configureMonacoWorkers } from '../../../common/client/utils.js';
1412
import langiumLanguageConfig from './langium.configuration.json?raw';
1513
import langiumTextmateGrammar from './langium.tmLanguage.json?raw';
1614
import text from '../../../../resources/langium/langium-dsl//example.langium?raw';
1715

18-
export const setupLangiumClientExtended = async (): Promise<WrapperConfig> => {
16+
export const setupLangiumClientExtended = async (langiumWorker: Worker): Promise<WrapperConfig> => {
1917

2018
const extensionFilesOrContents = new Map<string, string | URL>();
2119
// vite build is easier with string content
2220
extensionFilesOrContents.set('/langium-configuration.json', langiumLanguageConfig);
2321
extensionFilesOrContents.set('/langium-grammar.json', langiumTextmateGrammar);
2422

25-
const langiumWorker = loadLangiumWorker();
2623
const reader = new BrowserMessageReader(langiumWorker);
2724
const writer = new BrowserMessageWriter(langiumWorker);
2825

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

Lines changed: 45 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -6,73 +6,59 @@
66
import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
77
import { setupLangiumClientExtended } from './config/extendedConfig.js';
88
import { setupLangiumClientClassic } from './config/classicConfig.js';
9-
import workerUrl from './worker/langium-server?worker&url';
109
import { disableButton } from '../../common/client/utils.js';
1110

12-
let wrapper: MonacoEditorLanguageClientWrapper | undefined;
13-
let extended = false;
11+
import workerUrl from './worker/langium-server?worker&url';
1412

15-
export const runLangiumDslWrapper = async () => {
13+
export const runLangiumDslWrapper = async (extendedMode: boolean) => {
1614
try {
17-
document.querySelector('#button-start-classic')?.addEventListener('click', startLangiumClientClassic);
18-
document.querySelector('#button-start-extended')?.addEventListener('click', startLangiumClientExtended);
19-
document.querySelector('#button-dispose')?.addEventListener('click', disposeEditor);
20-
} catch (e) {
21-
console.error(e);
22-
}
23-
};
15+
let wrapper: MonacoEditorLanguageClientWrapper | undefined;
2416

25-
export const startLangiumClientExtended = async () => {
26-
try {
27-
if (checkStarted()) return;
28-
extended = true;
29-
disableButton('button-start-classic', true);
30-
disableButton('button-start-extended', true);
31-
const config = await setupLangiumClientExtended();
32-
wrapper = new MonacoEditorLanguageClientWrapper();
33-
wrapper.initAndStart(config);
34-
} catch (e) {
35-
console.log(e);
36-
}
37-
};
17+
const loadLangiumWorker = () => {
18+
console.log(`Langium worker URL: ${workerUrl}`);
19+
return new Worker(workerUrl, {
20+
type: 'module',
21+
name: 'Langium LS',
22+
});
23+
};
3824

39-
export const startLangiumClientClassic = async () => {
40-
try {
41-
if (checkStarted()) return;
42-
disableButton('button-start-classic', true);
43-
disableButton('button-start-extended', true);
44-
const config = await setupLangiumClientClassic();
45-
wrapper = new MonacoEditorLanguageClientWrapper();
46-
await wrapper.initAndStart(config);
47-
} catch (e) {
48-
console.log(e);
49-
}
50-
};
25+
const checkStarted = () => {
26+
if (wrapper?.isStarted() ?? false) {
27+
alert('Editor was already started!\nPlease reload the page to test the alternative editor.');
28+
return true;
29+
}
30+
return false;
31+
};
5132

52-
const checkStarted = () => {
53-
if (wrapper?.isStarted() ?? false) {
54-
alert('Editor was already started!\nPlease reload the page to test the alternative editor.');
55-
return true;
56-
}
57-
return false;
58-
};
33+
const startLangiumClient = async () => {
34+
if (checkStarted()) return;
35+
disableButton('button-start', true);
36+
37+
const langiumWorker = loadLangiumWorker();
5938

60-
export const disposeEditor = async () => {
61-
if (!wrapper) return;
62-
wrapper.reportStatus();
63-
await wrapper.dispose();
64-
wrapper = undefined;
65-
if (extended) {
66-
disableButton('button-start-extended', false);
67-
} else {
68-
disableButton('button-start-classic', false);
39+
if (extendedMode) {
40+
const config = await setupLangiumClientExtended(langiumWorker);
41+
wrapper = new MonacoEditorLanguageClientWrapper();
42+
wrapper.initAndStart(config);
43+
} else {
44+
const config = await setupLangiumClientClassic(langiumWorker);
45+
wrapper = new MonacoEditorLanguageClientWrapper();
46+
await wrapper.initAndStart(config);
47+
}
48+
};
49+
50+
const disposeEditor = async () => {
51+
if (!wrapper) return;
52+
wrapper.reportStatus();
53+
await wrapper.dispose();
54+
wrapper = undefined;
55+
disableButton('button-start', false);
56+
};
57+
58+
document.querySelector('#button-start')?.addEventListener('click', startLangiumClient);
59+
document.querySelector('#button-dispose')?.addEventListener('click', disposeEditor);
60+
} catch (e) {
61+
console.error(e);
6962
}
7063
};
7164

72-
export const loadLangiumWorker = () => {
73-
console.log(`Langium worker URL: ${workerUrl}`);
74-
return new Worker(workerUrl, {
75-
type: 'module',
76-
name: 'Langium LS',
77-
});
78-
};

‎packages/examples/vite.production.base.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@ export const buildBaseProductionConfig: () => UserConfig = () => {
1010
rollupOptions: {
1111
input: {
1212
index: path.resolve(__dirname, 'index.html'),
13-
langium: path.resolve(__dirname, 'ghp_langium.html'),
13+
langiumClassic: path.resolve(__dirname, 'ghp_langium_classic.html'),
14+
langiumExtended: path.resolve(__dirname, 'ghp_langium_extended.html'),
1415
statemachine: path.resolve(__dirname, 'ghp_statemachine.html'),
1516
clangd: path.resolve(__dirname, 'ghp_clangd.html'),
1617
appPlayground: path.resolve(__dirname, 'ghp_appPlayground.html'),

0 commit comments

Comments
 (0)