WIP: Further unify configuration

packages/examples/src/langium/wrapperLangium.ts

@@ -3,106 +3,107 @@ buildWorkerDefinition('../../../../node_modules/monaco-editor-workers/dist/worke
 
 import * as vscode from 'vscode';
 import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper';
-import { BrowserMessageReader, BrowserMessageWriter, Message } from 'vscode-languageserver/browser.js';
 
-const exampleStatemachineUrl = new URL('./src/langium/example.statemachine', window.location.href).href;
-const responseStatemachine = await fetch(exampleStatemachineUrl);
-const codeMain = await responseStatemachine.text();
-
-const wrapper = new MonacoEditorLanguageClientWrapper({
-    useVscodeConfig: true,
-    vscodeActivationConfig: {
-        basePath: '../monaco-editor-wrapper'
-    },
-    content: {
-        languageId: 'statemachine',
-        code: codeMain,
-        useDiffEditor: false
-    },
-    languageClient: {
-        useWebSocket: false
-    }
-});
+const wrapper = new MonacoEditorLanguageClientWrapper();
 
 const startEditor = async () => {
     if (wrapper.isStarted()) {
         alert('Editor was already started!');
         return;
     }
 
-    const monacoVscodeApiWrapper = wrapper.getMonacoVscodeApiWrapper();
-    const languageId = wrapper.getRuntimeConfig().content.languageId;
-
-    const extension = {
-        name: 'langium-example',
-        publisher: 'monaco-languageclient-project',
-        version: '1.0.0',
-        engines: {
-            vscode: '*'
-        },
-        contributes: {
-            languages: [{
-                id: languageId,
-                extensions: [
-                    `.${languageId}`
-                ],
-                aliases: [
-                    languageId
-                ],
-                configuration: './statemachine-configuration.json'
-            }],
-            grammars: [{
-                language: languageId,
-                scopeName: 'source.statemachine',
-                path: './statemachine-grammar.json'
-            }],
-            keybindings: [{
-                key: 'ctrl+p',
-                command: 'editor.action.quickCommand',
-                when: 'editorTextFocus'
-            }, {
-                key: 'ctrl+shift+c',
-                command: 'editor.action.commentLine',
-                when: 'editorTextFocus'
-            }]
-        }
-    };
+    const exampleStatemachineUrl = new URL('./src/langium/example.statemachine', window.location.href).href;
+    const responseStatemachine = await fetch(exampleStatemachineUrl);
+    const codeMain = await responseStatemachine.text();
 
     const extensionFiles = new Map<string, URL>();
     const statemachineLanguageConfig = new URL('../../../node_modules/langium-statemachine-dsl/language-configuration.json', window.location.href);
     const responseStatemachineTm = new URL('../../../node_modules/langium-statemachine-dsl/syntaxes/statemachine.tmLanguage.json', window.location.href);
     extensionFiles.set('/statemachine-configuration.json', statemachineLanguageConfig);
     extensionFiles.set('/statemachine-grammar.json', responseStatemachineTm);
-    monacoVscodeApiWrapper.setExtensionConfiguration(extension, extensionFiles);
-
-    monacoVscodeApiWrapper.setUserConfiguration(`{
-        "workbench.colorTheme": "Dark+ (Experimental)",
-        "editor.fontSize": 14,
-        "editor.lightbulb.enabled": true,
-        "editor.lineHeight": 20,
-        "editor.guides.bracketPairsHorizontal": "active",
-        "editor.lightbulb.enabled": true
-    }`);
 
     // Language Server preparation
-    const langiumWorkerUrl = new URL('./dist/worker/statemachineServerWorker.js', window.location.href).href;
+    const langiumWorkerUrl = new URL('./dist/worker/statemachineServerWorker.js', window.location.href);
     console.log(`Langium worker URL: ${langiumWorkerUrl}`);
-    const lsWorker = new Worker(langiumWorkerUrl, {
-        type: 'module',
-        name: 'Statemachine LS'
+
+    wrapper.init({
+        wrapperConfig: {
+            useVscodeConfig: true,
+            monacoVscodeApiConfig: {
+                vscodeActivationConfig: {
+                    basePath: '../monaco-editor-wrapper'
+                },
+                extension: {
+                    name: 'langium-example',
+                    publisher: 'monaco-languageclient-project',
+                    version: '1.0.0',
+                    engines: {
+                        vscode: '*'
+                    },
+                    contributes: {
+                        languages: [{
+                            id: 'statemachine',
+                            extensions: [
+                                '.statemachine'
+                            ],
+                            aliases: [
+                                'statemachine',
+                                'Statemachine'
+                            ],
+                            configuration: './statemachine-configuration.json'
+                        }],
+                        grammars: [{
+                            language: 'statemachine',
+                            scopeName: 'source.statemachine',
+                            path: './statemachine-grammar.json'
+                        }],
+                        keybindings: [{
+                            key: 'ctrl+p',
+                            command: 'editor.action.quickCommand',
+                            when: 'editorTextFocus'
+                        }, {
+                            key: 'ctrl+shift+c',
+                            command: 'editor.action.commentLine',
+                            when: 'editorTextFocus'
+                        }]
+                    }
+                },
+                extensionFiles: extensionFiles,
+                userConfiguration: `{
+                    "workbench.colorTheme": "Dark+ (Experimental)",
+                    "editor.fontSize": 14,
+                    "editor.lightbulb.enabled": true,
+                    "editor.lineHeight": 20,
+                    "editor.guides.bracketPairsHorizontal": "active",
+                    "editor.lightbulb.enabled": true
+                }`
+            }
+        },
+        content: {
+            languageId: 'statemachine',
+            code: codeMain,
+            useDiffEditor: false
+        },
+        languageClientConfig: {
+            enabled: true,
+            useWebSocket: false,
+            workerConfigOptions: {
+                url: langiumWorkerUrl,
+                type: 'module',
+                name: 'Statemachine LS',
+            }
+        }
     });
 
-    // test if external creation works
-    const reader = new BrowserMessageReader(lsWorker);
-    const writer = new BrowserMessageWriter(lsWorker);
-    wrapper.setWorker(lsWorker, { reader: reader, writer: writer });
+    const monacoVscodeApiWrapper = wrapper.getMonacoVscodeApiWrapper();
+    const runtimeConfig = wrapper.getRuntimeConfig();
+    monacoVscodeApiWrapper.setExtensionConfiguration(runtimeConfig.wrapperConfig.monacoVscodeApiConfig!.extension, extensionFiles);
+    monacoVscodeApiWrapper.setUserConfiguration(runtimeConfig.wrapperConfig.monacoVscodeApiConfig!.userConfiguration!);
 
     wrapper.startEditor(document.getElementById('monaco-editor-root') as HTMLElement)
         .then((s: unknown) => {
             console.log(s);
-            wrapper.getMessageTransports()?.reader?.listen((x: Message) => {
-                console.log(x);
-            });
+
             vscode.commands.getCommands().then((x) => {
                 console.log('Currently registered # of vscode commands: ' + x.length);
             });

packages/examples/src/wrapperTs.ts

@@ -1,14 +1,17 @@
 import { buildWorkerDefinition } from 'monaco-editor-workers';
 buildWorkerDefinition('../../../node_modules/monaco-editor-workers/dist/workers', import.meta.url, false);
 
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
+// support all editor features
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { editor, languages } from 'monaco-editor/esm/vs/editor/edcore.main.js';
+
 import * as vscode from 'vscode';
 import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper/allLanguages';
 import { StandaloneServices } from 'vscode/services';
 import getNotificationServiceOverride from 'vscode/service-override/notifications';
 import getDialogServiceOverride from 'vscode/service-override/dialogs';
 import getKeybindingsServiceOverride from 'vscode/service-override/keybindings';
-// import { getMonacoCss } from 'monaco-editor-wrapper/monaco-css';
 
 StandaloneServices.initialize({
     ...getNotificationServiceOverride(document.body),
@@ -23,14 +26,33 @@ const codeOrg = `function sayHello(): string {
 let codeMain = `function sayGoodbye(): string {
     return "Goodbye";
 };`;
-const wrapper = new MonacoEditorLanguageClientWrapper({
-    useVscodeConfig: false,
+
+const monacoEditorConfig = {
+    glyphMargin: true,
+    guides: {
+        bracketPairs: true
+    },
+    lightbulb: {
+        enabled: true
+    }
+} as editor.IEditorOptions & editor.IGlobalEditorOptions;
+
+const wrapper = new MonacoEditorLanguageClientWrapper();
+wrapper.init({
+    wrapperConfig: {
+        useVscodeConfig: false
+    },
+    languageClientConfig: {
+        enabled: false
+    },
     theme: 'vs-dark',
     content: {
         languageId: languageId,
         code: codeMain,
         useDiffEditor: false,
-        codeModified: codeOrg
+        codeModified: codeOrg,
+        editorOptions: monacoEditorConfig,
+        diffEditorOptions: monacoEditorConfig
     }
 });
 
@@ -41,19 +63,6 @@ function startEditor() {
     }
     configureCodeEditors();
 
-    const monacoEditorConfig = {
-        glyphMargin: true,
-        guides: {
-            bracketPairs: true
-        },
-        lightbulb: {
-            enabled: true
-        }
-    } as monaco.editor.IEditorOptions & monaco.editor.IGlobalEditorOptions;
-
-    wrapper.setMonacoEditorOptions(monacoEditorConfig);
-    wrapper.setMonacoDiffEditorOptions(monacoEditorConfig);
-
     toggleSwapDiffButton(true);
     wrapper.startEditor(document.getElementById('monaco-editor-root') as HTMLElement)
         .then((s: unknown) => {
@@ -120,7 +129,7 @@ function toggleSwapDiffButton(enabled: boolean) {
 }
 
 function logEditorInfo(client: MonacoEditorLanguageClientWrapper) {
-    console.log(`# of configured languages: ${monaco.languages.getLanguages().length}`);
+    console.log(`# of configured languages: ${languages.getLanguages().length}`);
     console.log(`Main code: ${client.getMainCode()}`);
     console.log(`Modified code: ${client.getDiffCode()}`);
 }

packages/examples/src/wrapperWs.ts

@@ -68,9 +68,6 @@ function startEditor() {
         .then((s: unknown) => {
             console.log(s);
             logEditorInfo(wrapper);
-            wrapper.getMessageTransports()?.reader?.listen((x: Message) => {
-                console.log(x);
-            });
 
             vscode.commands.getCommands().then((x) => {
                 console.log('Currently registered # of vscode commands: ' + x.length);

packages/monaco-editor-react/src/index.tsx

@@ -114,8 +114,10 @@ export class MonacoEditorReactComp extends React.Component<MonacoEditorProps> {
         if (this.containerElement) {
             this.containerElement.className = className ?? '';
             this.wrapper = new MonacoEditorLanguageClientWrapper({
-                useVscodeConfig: false,
                 id: '42',
+                wrapperConfig: {
+                    useVscodeConfig: false,
+                },
                 content: {
                     languageId: languageId,
                     code: text,

packages/monaco-editor-wrapper/src/helpers/css.ts

@@ -1,3 +1,5 @@
+import type { } from 'css-font-loading-module';
+
 export const getMonacoEditoCss = async () => {
     const res = await fetch(new URL('../../bundle/assets/style.css', window.location.href).href);
     return res.text();

packages/monaco-editor-wrapper/src/monacoEditorWrapper.ts

@@ -14,45 +14,26 @@ export type MonacoLanguageExtensionConfig = {
     mimetypes?: string[];
 }
 
+export type MonacoEditorWrapperConfig = {
+    languageExtensionConfig?: MonacoLanguageExtensionConfig;
+    languageDef?: languages.IMonarchLanguage;
+    themeData?: editor.IStandaloneThemeData;
+}
+
 export class MonacoEditorWrapper {
 
-    private languageExtensionConfig: MonacoLanguageExtensionConfig | undefined;
-    private languageDef: languages.IMonarchLanguage | undefined = undefined;
-    private themeData: editor.IStandaloneThemeData | undefined = undefined;
+    private config: MonacoEditorWrapperConfig = {};
 
-    async init() {
+    async init(config: MonacoEditorWrapperConfig) {
+        this.config = config;
         console.log('Basic init of MonacoConfig was completed.');
     }
 
-    setLanguageExtensionConfig(languageExtensionConfig: MonacoLanguageExtensionConfig): void {
-        this.languageExtensionConfig = languageExtensionConfig;
-    }
-
-    getLanguageExtensionConfig(): MonacoLanguageExtensionConfig | undefined {
-        return this.languageExtensionConfig;
-    }
-
-    getMonarchTokensProvider(): languages.IMonarchLanguage | undefined {
-        return this.languageDef;
-    }
-
-    setMonarchTokensProvider(languageDef: unknown): void {
-        this.languageDef = languageDef as languages.IMonarchLanguage;
-    }
-
-    setEditorThemeData(themeData: unknown): void {
-        this.themeData = themeData as editor.IStandaloneThemeData;
-    }
-
-    getEditorThemeData(): editor.IStandaloneThemeData | undefined {
-        return this.themeData;
-    }
-
     updateMonacoConfig(languageId: string, theme: string) {
         // register own language first
-        const extLang = this.getLanguageExtensionConfig();
+        const extLang = this.config.languageExtensionConfig;
         if (extLang) {
-            languages.register(this.getLanguageExtensionConfig() as languages.ILanguageExtensionPoint);
+            languages.register(extLang);
         }
 
         const languageRegistered = languages.getLanguages().filter(x => x.id === languageId);
@@ -62,11 +43,11 @@ export class MonacoEditorWrapper {
         }
 
         // apply monarch definitions
-        const tokenProvider = this.getMonarchTokensProvider();
+        const tokenProvider = this.config.languageDef;
         if (tokenProvider) {
             languages.setMonarchTokensProvider(languageId, tokenProvider);
         }
-        const themeData = this.getEditorThemeData();
+        const themeData = this.config.themeData;
         if (themeData) {
             editor.defineTheme(theme, themeData);
         }