Update code explanation in langiumClient and update README with CHANG…

…ELOG refs
TypeFox · Aug 18, 2023 · 323145d · 323145d
1 parent fcfe8a3
commit 323145d
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 38 deletions.
diff --git a/README.md b/README.md
@@ -33,6 +33,7 @@ Click [here](http://typefox.io/teaching-the-language-server-protocol-to-microsof
     - [monaco-editor-core](#monaco-editor-core)
     - [@monaco-editor/react](#monaco-editorreact)
     - [pnpm](#pnpm)
+  - [Changelogs](#changelogs)
   - [Licenses](#licenses)
 
 ## Latest Important Project Changes
@@ -256,6 +257,12 @@ If you use pnpm, you have to add `vscode` / `monaco-vscode-api` as direct depend
 "vscode": "npm:@codingame/monaco-vscode-api@~1.81.1"
 ```
 
+## Changelogs
+
+CHANGELOG for `monaco-languageclient` is found [here](./packages/client/CHANGELOG.md)
+
+CHANGELOG for `vscode-ws-jsonrpc` is found [here](./packages/vscode-ws-jsonrpc/CHANGELOG.md)
+
 ## Licenses
 
 - monaco-languageclient: [MIT](https://github.com/TypeFox/monaco-languageclient/blob/main/packages/client/License.txt)

diff --git a/packages/examples/main/src/langium/langiumClient.ts b/packages/examples/main/src/langium/langiumClient.ts
@@ -3,21 +3,23 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  * ------------------------------------------------------------------------------------------ */
 
-import { editor, Uri } from 'monaco-editor';
+import { Uri } from 'monaco-editor';
 
 import { MonacoLanguageClient, initServices } from 'monaco-languageclient';
 import { BrowserMessageReader, BrowserMessageWriter } from 'vscode-languageserver-protocol/browser.js';
-import { CloseAction, ErrorAction, MessageTransports } from 'vscode-languageclient';
+import { CloseAction, ErrorAction } from 'vscode-languageclient';
 
-import { createConfiguredEditor } from 'vscode/monaco';
+import { createConfiguredEditor, createModelReference, IReference, ITextFileEditorModel } from 'vscode/monaco';
 import { ExtensionHostKind, registerExtension } from 'vscode/extensions';
 import { updateUserConfiguration } from 'vscode/service-override/configuration';
+import { RegisteredFileSystemProvider, registerFileSystemOverlay, RegisteredMemoryFile } from 'vscode/service-override/files';
 import 'vscode/default-extensions/theme-defaults';
 
 import { buildWorkerDefinition } from 'monaco-editor-workers';
 buildWorkerDefinition('../../../node_modules/monaco-editor-workers/dist/workers/', new URL('', window.location.href).href, false);
 
 const languageId = 'langium';
+let textModelRef: IReference<ITextFileEditorModel>;
 
 const setup = async () => {
     console.log('Setting up Langium client configuration ...');
@@ -49,45 +51,33 @@ const setup = async () => {
     const { registerFileUrl } = registerExtension(extension, ExtensionHostKind.LocalProcess);
 
     // these two files are taken from the langium-vscode
+    // regiser the language configuration file url
     registerFileUrl('/langium-configuration.json', new URL('./src/langium/langium.configuration.json', window.location.href).href);
+    // regiser the textmate grammar file url
+    // using a textmate grammar requires the textmate and theme service to be enabled
     registerFileUrl('/langium-grammar.json', new URL('./src/langium/langium.tmLanguage.json', window.location.href).href);
 
     // set vscode configuration parameters
     updateUserConfiguration(`{
     "workbench.colorTheme": "Default Dark Modern"
 }`);
-};
 
-const run = async () => {
     const exampleLangiumUrl = new URL('./src/langium/example.langium', window.location.href).href;
     const editorText = await (await fetch(exampleLangiumUrl)).text();
 
-    const editorOptions = {
-        model: editor.createModel(editorText, languageId, Uri.parse('inmemory://example.langium')),
-        automaticLayout: true
-    };
-    createConfiguredEditor(document.getElementById('container')!, editorOptions);
-
-    function createLanguageClient(transports: MessageTransports): MonacoLanguageClient {
-        return new MonacoLanguageClient({
-            name: 'Langium Client',
-            clientOptions: {
-                // use a language id as a document selector
-                documentSelector: [{ language: languageId }],
-                // disable the default error handler
-                errorHandler: {
-                    error: () => ({ action: ErrorAction.Continue }),
-                    closed: () => ({ action: CloseAction.DoNotRestart })
-                }
-            },
-            // create a language client connection to the server running in the web worker
-            connectionProvider: {
-                get: () => {
-                    return Promise.resolve(transports);
-                }
-            }
-        });
-    }
+    // create and register a new file system provider
+    const fileSystemProvider = new RegisteredFileSystemProvider(false);
+    // register a file with content from the example.langium file loaded from src above
+    fileSystemProvider.registerFile(new RegisteredMemoryFile(Uri.file('/workspace/example.langium'), editorText));
+    registerFileSystemOverlay(1, fileSystemProvider);
+
+    textModelRef = await createModelReference(Uri.file('/workspace/example.langium'));
+};
+
+const run = async () => {
+    createConfiguredEditor(document.getElementById('container')!, {
+        model: textModelRef.object.textEditorModel
+    });
 
     // works only if browser supports module workers
     const langiumWorkerUrl = new URL('./src/langium/langiumServerWorker.ts', window.location.href).href;
@@ -99,30 +89,49 @@ const run = async () => {
     });
     const reader = new BrowserMessageReader(worker);
     const writer = new BrowserMessageWriter(worker);
-    const languageClient = createLanguageClient({ reader, writer });
-    languageClient.start();
     reader.onClose(() => languageClient.stop());
 
-    languageClient.onTelemetry((t) => {
-        console.log(t);
+    const languageClient = new MonacoLanguageClient({
+        name: 'Langium Client',
+        clientOptions: {
+            // use a language id as a document selector
+            documentSelector: [{ language: languageId }],
+            // disable the default error handler
+            errorHandler: {
+                error: () => ({ action: ErrorAction.Continue }),
+                closed: () => ({ action: CloseAction.DoNotRestart })
+            }
+        },
+        // create a language client connection to the server running in the web worker
+        connectionProvider: {
+            get: () => {
+                return Promise.resolve({ reader, writer });
+            }
+        }
     });
-
-    languageClient.sendNotification('tester', { test: 'test' });
+    languageClient.start();
 
     // any further language client / server interaction can't be defined as needed
 };
 
 try {
     await initServices({
+        // required for default themes
         enableThemeService: true,
+        // required for textmate grammars
         enableTextmateService: true,
+        // required for text model handling (here: /workspace/example.langium)
         enableModelService: true,
+        // use editor mode
         configureEditorOrViewsService: {
         },
+        // enable configuration services
         configureConfigurationService: {
-            defaultWorkspaceUri: '/tmp'
+            defaultWorkspaceUri: '/workspace'
         },
+        // enable platform specific keybindings
         enableKeybindingsService: true,
+        // enable language support
         enableLanguagesService: true,
         debugLogging: true
     });