monaco-languageclient-examples 2025.8.3 → 2025.8.5

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

@@ -3,43 +3,112 @@
  * Licensed under the MIT License. See LICENSE in the package root for license information.
  * ------------------------------------------------------------------------------------------ */
 
-import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
+import * as vscode from 'vscode';
 import { LogLevel } from '@codingame/monaco-vscode-api';
-import '../../../../resources/vsix/github-vscode-theme.vsix';
-import { MessageTransports } from 'vscode-languageclient';
-import type { WrapperConfig } from 'monaco-editor-wrapper';
-import { configureDefaultWorkerFactory } from 'monaco-editor-wrapper/workers/workerLoaders';
+import { InMemoryFileSystemProvider, registerFileSystemOverlay, type IFileWriteOptions } from '@codingame/monaco-vscode-files-service-override';
+import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
+import type { EditorAppConfig } from 'monaco-languageclient/editorApp';
+import type { LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
+import { type MonacoVscodeApiConfig, type OverallConfigType } from 'monaco-languageclient/vscodeApiWrapper';
+import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
+import { BrowserMessageReader, BrowserMessageWriter } from 'vscode-languageclient/browser.js';
+import langiumGrammarLangium from '../../../../resources/langium/langium-dsl/langium-grammar.langium?raw';
+import langiumTypesLangium from '../../../../resources/langium/langium-dsl/langium-types.langium?raw';
+import type { ExampleAppConfig } from '../../../common/client/utils.js';
+import workerUrl from '../worker/langium-server?worker&url';
 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 (params: {
-    worker: Worker
-    messageTransports?: MessageTransports,
-}): Promise<WrapperConfig> => {
 
+export const setupLangiumClientExtended = async (): Promise<ExampleAppConfig> => {
+    const overallConfigType: OverallConfigType = 'extended';
     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);
-    return {
-        $type: 'extended',
-        htmlContainer: document.getElementById('monaco-editor-root')!,
+    extensionFilesOrContents.set('/workspace/langium-configuration.json', langiumLanguageConfig);
+    extensionFilesOrContents.set('/workspace/langium-grammar.json', langiumTextmateGrammar);
+
+    const loadLangiumWorker = () => {
+        console.log(`Langium worker URL: ${workerUrl}`);
+        return new Worker(workerUrl, {
+            type: 'module',
+            name: 'Langium LS',
+        });
+    };
+
+    const worker = loadLangiumWorker();
+    const reader = new BrowserMessageReader(worker);
+    const writer = new BrowserMessageWriter(worker);
+    reader.listen((message) => {
+        console.log('Received message from worker:', message);
+    });
+
+    // prepare all resources that should be preloaded
+    const workspaceUri = vscode.Uri.file('/workspace');
+    const langiumGrammarLangiumUri = vscode.Uri.file('/workspace/langium-grammar.langium');
+    const langiumTypesLangiumUri = vscode.Uri.file('/workspace/langium-types.langium');
+    const fileSystemProvider = new InMemoryFileSystemProvider();
+    const textEncoder = new TextEncoder();
+
+    const options: IFileWriteOptions = {
+        atomic: false,
+        unlock: false,
+        create: true,
+        overwrite: true
+    };
+    await fileSystemProvider.mkdir(workspaceUri);
+    await fileSystemProvider.writeFile(langiumGrammarLangiumUri, textEncoder.encode(langiumGrammarLangium), options);
+    await fileSystemProvider.writeFile(langiumTypesLangiumUri, textEncoder.encode(langiumTypesLangium), options);
+    registerFileSystemOverlay(1, fileSystemProvider);
+
+    const editorAppConfig: EditorAppConfig = {
+        $type: overallConfigType
+    };
+
+    const innerHtml = `<div id="editorsDiv">
+    <div id="editors"></div>
+</div>`;
+    const viewsInit = async () => {
+        const { Parts, onPartVisibilityChange, isPartVisibile, attachPart, } = await import('@codingame/monaco-vscode-views-service-override');
+
+        for (const config of [
+            { part: Parts.EDITOR_PART, element: '#editors' },
+        ]) {
+            attachPart(config.part, document.querySelector<HTMLDivElement>(config.element)!);
+
+            if (!isPartVisibile(config.part)) {
+                document.querySelector<HTMLDivElement>(config.element)!.style.display = 'none';
+            }
+
+            onPartVisibilityChange(config.part, visible => {
+                document.querySelector<HTMLDivElement>(config.element)!.style.display = visible ? 'block' : 'none';
+            });
+        }
+    };
+    const vscodeApiConfig: MonacoVscodeApiConfig = {
+        $type: overallConfigType,
         logLevel: LogLevel.Debug,
-        vscodeApiConfig: {
-            serviceOverrides: {
-                ...getKeybindingsServiceOverride()
+        htmlContainer: document.body,
+        serviceOverrides: {
+            ...getKeybindingsServiceOverride()
+        },
+        viewsConfig: {
+            viewServiceType: 'ViewsService',
+            htmlAugmentationInstructions: (htmlElement: HTMLElement | null | undefined) => {
+                const htmlContainer = document.createElement('div', { is: 'app' });
+                htmlContainer.innerHTML = innerHtml;
+                htmlElement?.append(htmlContainer);
             },
-            userConfiguration: {
-                json: JSON.stringify({
-                    'workbench.colorTheme': 'GitHub Dark High Contrast',
-                    'editor.guides.bracketPairsHorizontal': 'active',
-                    'editor.wordBasedSuggestions': 'off',
-                    'editor.experimental.asyncTokenization': true,
-                    'vitest.disableWorkspaceWarning': true
-                })
-            }
+            viewsInitFunc: viewsInit
+        },
+        userConfiguration: {
+            json: JSON.stringify({
+                'workbench.colorTheme': 'Default Dark Modern',
+                'editor.guides.bracketPairsHorizontal': 'active',
+                'editor.wordBasedSuggestions': 'off',
+                'editor.experimental.asyncTokenization': true,
+                'vitest.disableWorkspaceWarning': true
+            })
         },
+        monacoWorkerFactory: configureDefaultWorkerFactory,
         extensions: [{
             config: {
                 name: 'langium-example',
@@ -53,41 +122,35 @@ export const setupLangiumClientExtended = async (params: {
                         id: 'langium',
                         extensions: ['.langium'],
                         aliases: ['langium', 'LANGIUM'],
-                        configuration: './langium-configuration.json'
+                        configuration: '/workspace/langium-configuration.json'
                     }],
                     grammars: [{
                         language: 'langium',
                         scopeName: 'source.langium',
-                        path: './langium-grammar.json'
+                        path: '/workspace/langium-grammar.json'
                     }]
                 }
             },
             filesOrContents: extensionFilesOrContents
-        }],
-        editorAppConfig: {
-            codeResources: {
-                modified: {
-                    text,
-                    uri: '/workspace/grammar.langium'
-                }
-            },
-            monacoWorkerFactory: configureDefaultWorkerFactory
+        }]
+    };
+
+    const languageClientConfig: LanguageClientConfig = {
+        clientOptions: {
+            documentSelector: ['langium']
         },
-        languageClientConfigs: {
-            configs: {
-                langium: {
-                    clientOptions: {
-                        documentSelector: ['langium']
-                    },
-                    connection: {
-                        options: {
-                            $type: 'WorkerDirect',
-                            worker: params.worker
-                        },
-                        messageTransports: params.messageTransports
-                    }
-                }
-            }
+        connection: {
+            options: {
+                $type: 'WorkerDirect',
+                worker
+            },
+            messageTransports: { reader, writer }
         }
     };
+
+    return {
+        editorAppConfig,
+        vscodeApiConfig,
+        languageClientConfig
+    };
 };

package/src/langium/langium-dsl/config/langium.configuration.json

@@ -1,164 +1,134 @@
 {
-  "comments": {
-    "lineComment": "//",
-    "blockComment": [
-      "/*",
-      "*/"
-    ]
-  },
-  "brackets": [
-    [
-      "{",
-      "}"
-    ],
-    [
-      "[",
-      "]"
-    ],
-    [
-      "(",
-      ")"
-    ]
-  ],
-  "autoClosingPairs": [
-    {
-      "open": "{",
-      "close": "}"
-    },
-    {
-      "open": "[",
-      "close": "]"
+    "comments": {
+        "lineComment": "//",
+        "blockComment": ["/*", "*/"]
     },
-    {
-      "open": "(",
-      "close": ")"
-    },
-    {
-      "open": "'",
-      "close": "'",
-      "notIn": [
-        "string",
-        "comment"
-      ]
-    },
-    {
-      "open": "\"",
-      "close": "\"",
-      "notIn": [
-        "string"
-      ]
-    },
-    {
-      "open": "/**",
-      "close": " */",
-      "notIn": [
-        "string"
-      ]
-    }
-  ],
-  "autoCloseBefore": "}])`\n\t",
-  "surroundingPairs": [
-    [
-      "{",
-      "}"
+    "brackets": [
+        ["{", "}"],
+        ["[", "]"],
+        ["(", ")"]
     ],
-    [
-      "[",
-      "]"
-    ],
-    [
-      "(",
-      ")"
-    ]
-  ],
-  "colorizedBracketPairs": [
-    [
-      "(",
-      ")"
+    "autoClosingPairs": [
+        { "open": "{", "close": "}" },
+        { "open": "[", "close": "]" },
+        { "open": "(", "close": ")" },
+        {
+			"open": "'",
+			"close": "'",
+			"notIn": [
+				"string",
+				"comment"
+			]
+		},
+		{
+			"open": "\"",
+			"close": "\"",
+			"notIn": [
+				"string"
+			]
+		},
+        {
+			"open": "/**",
+			"close": " */",
+			"notIn": [
+				"string"
+			]
+		}
     ],
-    [
-      "[",
-      "]"
+    "autoCloseBefore": "}])`\n\t",
+    "surroundingPairs": [
+        ["{", "}"],
+        ["[", "]"],
+        ["(", ")"]
     ],
-    [
-      "{",
-      "}"
-    ],
-    [
-      "<",
-      ">"
-    ],
-    [
-      "'",
-      "'"
-    ],
-    [
-      "\"",
-      "\""
-    ],
-    [
-      "<",
-      ">"
+    "colorizedBracketPairs": [
+		[
+			"(",
+			")"
+		],
+		[
+			"[",
+			"]"
+		],
+		[
+			"{",
+			"}"
+		],
+		[
+			"<",
+			">"
+		],
+        [
+			"'",
+			"'"
+		],
+		[
+			"\"",
+			"\""
+		],
+		[
+			"<",
+			">"
+		]
+	],
+    "onEnterRules": [
+        {
+			"": "// e.g. /** | */",
+			"beforeText": {
+				"pattern": "^\\s*/\\*\\*(?!/)([^\\*]|\\*(?!/))*$"
+			},
+			"afterText": {
+				"pattern": "^\\s*\\*/$"
+			},
+			"action": {
+				"indent": "indentOutdent",
+				"appendText": " * "
+			}
+		},
+		{
+			"": "// e.g. /** ...|",
+			"beforeText": {
+				"pattern": "^\\s*/\\*\\*(?!/)([^\\*]|\\*(?!/))*$"
+			},
+			"action": {
+				"indent": "none",
+				"appendText": " * "
+			}
+		},
+		{
+			"": "// e.g.  * ...|",
+			"beforeText": {
+				"pattern": "^(\\t|[ ])*[ ]\\*([ ]([^\\*]|\\*(?!/))*)?$"
+			},
+			"previousLineText": {
+				"pattern": "(?=^(\\s*(/\\*\\*|\\*)).*)(?=(?!(\\s*\\*/)))"
+			},
+			"action": {
+				"indent": "none",
+				"appendText": "* "
+			}
+		},
+		{
+			"": "// e.g.  */|",
+			"beforeText": {
+				"pattern": "^(\\t|[ ])*[ ]\\*/\\s*$"
+			},
+			"action": {
+				"indent": "none",
+				"removeText": 1
+			}
+		},
+        {
+            "beforeText": ":\\s*$",
+            "action": {
+                "indent": "indent"
+            }
+        },
+        {
+            "beforeText": ";\\s*$",
+            "action": {
+                "indent": "outdent"
+            }
+        }
     ]
-  ],
-  "onEnterRules": [
-    {
-      "": "// e.g. /** | */",
-      "beforeText": {
-        "pattern": "^\\s*/\\*\\*(?!/)([^\\*]|\\*(?!/))*$"
-      },
-      "afterText": {
-        "pattern": "^\\s*\\*/$"
-      },
-      "action": {
-        "indent": "indentOutdent",
-        "appendText": " * "
-      }
-    },
-    {
-      "": "// e.g. /** ...|",
-      "beforeText": {
-        "pattern": "^\\s*/\\*\\*(?!/)([^\\*]|\\*(?!/))*$"
-      },
-      "action": {
-        "indent": "none",
-        "appendText": " * "
-      }
-    },
-    {
-      "": "// e.g.  * ...|",
-      "beforeText": {
-        "pattern": "^(\\t|[ ])*[ ]\\*([ ]([^\\*]|\\*(?!/))*)?$"
-      },
-      "previousLineText": {
-        "pattern": "(?=^(\\s*(/\\*\\*|\\*)).*)(?=(?!(\\s*\\*/)))"
-      },
-      "action": {
-        "indent": "none",
-        "appendText": "* "
-      }
-    },
-    {
-      "": "// e.g.  */|",
-      "beforeText": {
-        "pattern": "^(\\t|[ ])*[ ]\\*/\\s*$"
-      },
-      "action": {
-        "indent": "none",
-        "removeText": 1
-      }
-    },
-    {
-      "beforeText": ":\\s*$",
-      "action": {
-        "indent": "indent"
-      }
-    },
-    {
-      "beforeText": ";\\s*$",
-      "action": {
-        "indent": "outdent"
-      }
-    }
-  ]
-}
+}