WIP: Update to latest monaco-editor-wrapper and monaco-editor-react

eclipse-langium · Oct 15, 2023 · 1410a64 · 1410a64
1 parent 0faf6ac
commit 1410a64
Show file tree

Hide file tree

Showing 11 changed files with 546 additions and 529 deletions.
diff --git a/hugo/assets/scripts/arithmetics/arithmetics-tools.tsx b/hugo/assets/scripts/arithmetics/arithmetics-tools.tsx
@@ -1,4 +1,4 @@
-import { monaco } from "monaco-editor-wrapper/.";
+import * as monaco from "monaco-editor";
 import { Pos } from "../langium-utils/langium-ast";
 
 export interface Evaluation {

diff --git a/hugo/assets/scripts/minilogo/minilogo-tools.ts b/hugo/assets/scripts/minilogo/minilogo-tools.ts
@@ -1,4 +1,4 @@
-import { monaco } from "monaco-editor-wrapper/.";
+import * as monaco from "monaco-editor";
 
 export interface Command {
     name: 'penUp' | 'penDown' | 'move' | 'color';

diff --git a/hugo/assets/scripts/monaco-editor-react.ts b/hugo/assets/scripts/monaco-editor-react.ts
@@ -1,2 +1,10 @@
-export * from "@typefox/monaco-editor-react";
-import 'vscode/default-extensions/theme-defaults';
+import type { MonacoEditorProps } from "@typefox/monaco-editor-react";
+import { MonacoEditorReactComp } from "@typefox/monaco-editor-react";
+import { addMonacoStyles } from 'monaco-editor-wrapper/styles';
+
+export {
+    addMonacoStyles,
+    MonacoEditorProps,
+    MonacoEditorReactComp
+}
+
diff --git a/hugo/assets/scripts/utils.ts b/hugo/assets/scripts/utils.ts
@@ -1,5 +1,6 @@
-import { UserConfig } from "monaco-editor-wrapper";
-import { monaco } from "monaco-editor-wrapper/.";
+import * as monaco from "monaco-editor";
+import { UserConfig, EditorAppConfigClassic, EditorAppConfigExtended, LanguageClientConfig } from "monaco-editor-wrapper";
+import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
 
 export type WorkerUrl = string;
 
@@ -8,7 +9,6 @@ export type WorkerUrl = string;
  */
 export interface MonacoReactConfig {
     code: string,
-    htmlElement: HTMLElement,
     languageId: string,
     worker: WorkerUrl | Worker,
     readonly?: boolean // whether to make the editor readonly or not (by default is false)
@@ -78,54 +78,27 @@ export const defaultLanguageConfig = {
  * @returns A completed UserConfig
  */
 export function createUserConfig(config: MonacoVSCodeReactConfig | MonacoEditorReactConfig): UserConfig {
-    // setup extension contents
-    const extensionContents = new Map<string, string>();
-
     // setup urls for config & grammar
     const id = config.languageId;
-    const languageConfigUrl = `/${id}-configuration.json`;
-    const languageGrammarUrl = `/${id}-grammar.json`;
-
-    // set extension contents
-    extensionContents.set(languageConfigUrl, JSON.stringify(defaultLanguageConfig));
 
-    // check whether to use the VSCode API config (TM), or the classic editor config (Monarch)
+    // check whether to use extended config (Textmate) or the classic editor config (Monarch)
+    let editorAppConfig: EditorAppConfigClassic | EditorAppConfigExtended;
     const useVscodeConfig = isMonacoVSCodeReactConfig(config);
-
-    if (isMonacoVSCodeReactConfig(config)) {
+    if (useVscodeConfig) {
+        // setup extension contents
+        const languageConfigUrl = `/${id}-configuration.json`;
+        const languageGrammarUrl = `/${id}-grammar.json`;
+        const extensionContents = new Map<string, string>();
+        extensionContents.set(languageConfigUrl, JSON.stringify(defaultLanguageConfig));
         extensionContents.set(languageGrammarUrl, JSON.stringify(config.textmateGrammar));
-    }
-
-    // generate langium config
-    return {
-        htmlElement: config.htmlElement,
-        wrapperConfig: {
-            // have to disable this for Monarch
-            // generally true otherwise (toggles using monacoVscodeApiConfig / monacoEditorConfig)
-            useVscodeConfig,
-
-            serviceConfig: {
-                // the theme service & textmate services are dependent, they need to both be enabled or disabled together
-                // this explicitly disables the Monarch capabilities
-                // both are tied to whether we are using the VSCode config as well
-                enableThemeService: useVscodeConfig,
-                enableTextmateService: useVscodeConfig,
 
-                enableModelService: true,
-                configureEditorOrViewsServiceConfig: {
-                    enableViewsService: false,
-                    useDefaultOpenEditorFunction: true
-                },
-                configureConfigurationServiceConfig: {
-                    defaultWorkspaceUri: '/tmp/'
-                },
-                enableKeybindingsService: true,
-                enableLanguagesService: true,
-                debugLogging: false
-            },
-            // VSCode config (for TextMate grammars)
-            monacoVscodeApiConfig: {
-                extension: {
+        editorAppConfig = {
+            $type: 'extended',
+            languageId: id,
+            code: config.code,
+            useDiffEditor: false,
+            extensions: [{
+                config: {
                     name: id,
                     publisher: 'TypeFox',
                     version: '1.0.0',
@@ -134,68 +107,76 @@ export function createUserConfig(config: MonacoVSCodeReactConfig | MonacoEditorR
                     },
                     contributes: {
                         languages: [{
-                            id,
-                            extensions: [],
-                            aliases: [
-                                id
-                            ],
-                            configuration: `.${languageConfigUrl}`
+                            id: id,
+                            extensions: [ `.${id}` ],
+                            configuration: languageConfigUrl
                         }],
-                        grammars: isMonacoVSCodeReactConfig(config) ? [{
+                        grammars: [{
                             language: id,
                             scopeName: `source.${id}`,
-                            path: `.${languageGrammarUrl}`
-                        }] : undefined,
-                        keybindings: [{
-                            key: 'ctrl+p',
-                            command: 'editor.action.quickCommand',
-                            when: 'editorTextFocus'
-                        }, {
-                            key: 'ctrl+shift+c',
-                            command: 'editor.action.commentLine',
-                            when: 'editorTextFocus'
+                            path: languageGrammarUrl
                         }]
                     }
                 },
-                extensionFilesOrContents: extensionContents,
-                userConfiguration: {
-                    json: `{
-  "workbench.colorTheme": "Default Dark Modern",
-  "editor.fontSize": 14,
-  "editor.lightbulb.enabled": true,
-  "editor.lineHeight": 20,
-  "editor.guides.bracketPairsHorizontal": "active",
-  "editor.lightbulb.enabled": true
-}`
-                }
-            },
-            // Editor config (classic) (for Monarch)
-            monacoEditorConfig: {
-                languageExtensionConfig: {
-                    id
-                },
-                languageDef: isMonacoEditorReactConfig(config) ? config.monarchGrammar : undefined
+                filesOrContents: extensionContents,
+            }],                
+            userConfiguration: {
+                json: JSON.stringify({
+                    'workbench.colorTheme': 'Default Dark Modern',
+                    'editor.semanticHighlighting.enabled': true,
+                    'editor.lightbulb.enabled': true,
+                    'editor.guides.bracketPairsHorizontal': 'active'
+                })
             }
-        },
-        editorConfig: {
+        };
+    } else {
+        editorAppConfig = {
+            $type: 'classic',
             languageId: id,
             code: config.code,
             useDiffEditor: false,
-            automaticLayout: true,
-            theme: 'vs-dark',
+            languageExtensionConfig: { id },
+            languageDef: config.monarchGrammar,
             editorOptions: {
-                readOnly: config.readonly
+                'semanticHighlighting.enabled': true,
+                readOnly: config.readonly,
+                theme: 'vs-dark'
             }
-        },
-        languageClientConfig: {
-            enabled: true,
-            useWebSocket: false,
-            // build a worker config from a worker URL string, or just copy in the entire worker
-            workerConfigOptions: typeof config.worker === 'string' ? {
+        };
+    }
+
+    let languageClientConfig: LanguageClientConfig;
+    if (typeof config.worker === 'string') {
+        languageClientConfig = {
+            options: {
+                $type: 'WorkerConfig',
                 url: new URL(config.worker, window.location.href),
                 type: 'module',
                 name: `${id}-language-server-worker`,
-            } : config.worker
-        }
-    };
+            }
+        };
+    } else {
+        languageClientConfig = {
+            options: {
+                $type: 'WorkerDirect',
+                worker: config.worker
+            }
+        };
+    }
+
+    // generate user config for langium based language
+    const userConfig: UserConfig = {
+        wrapperConfig: {
+            serviceConfig: {
+                // only use keyboard service in addition to the default services from monaco-editor-wrapper
+                userServices: {
+                    ...getKeybindingsServiceOverride()
+                },
+                debugLogging: true
+            },
+            editorAppConfig
+        },
+        languageClientConfig
+    }
+    return userConfig;
 }
diff --git a/hugo/content/playground/common.ts b/hugo/content/playground/common.ts
@@ -16,9 +16,10 @@ import { DefaultAstNodeLocator, createServicesForGrammar } from "langium";
 import { render } from './Tree';
 import { overlay, throttle } from "./utils";
 import { createUserConfig } from "../../assets/scripts/utils";
+import { MonacoEditorLanguageClientWrapper } from "monaco-editor-wrapper";
+import { DocumentChangeResponse } from "../../assets/scripts/langium-utils/langium-ast";
+
 export { share, overlay } from './utils'
-import { MonacoEditorLanguageClientWrapper } from "monaco-editor-wrapper/bundle";
-import { DocumentChangeResponse, LangiumAST } from "../../assets/scripts/langium-utils/langium-ast";
 
 export interface PlaygroundParameters {
   grammar: string;
@@ -182,7 +183,7 @@ export async function setupPlayground(
 
       // Setup failed, attempt to teardown resources piece by piece, before throwing an error
       dslWrapper?.getEditor()?.dispose();
-      dslWrapper?.disposeLanguageClient();
+      dslWrapper?.getLanguageClient()?.dispose();
       dslWrapper = undefined;
       // clean up the UI, so the old editor is visually removed (tends to linger otherwise)
       rightEditor.innerHTML = '';
@@ -225,12 +226,11 @@ async function getFreshDSLWrapper(
   const worker = await getLSWorkerForGrammar(grammarText);
   const wrapper = new MonacoEditorLanguageClientWrapper();
   return wrapper.start(createUserConfig({
-    htmlElement,
     languageId,
     code,
     worker,
     monarchGrammar: generateMonarch(Grammar, languageId)
-  })).then(() => {
+  }), htmlElement).then(() => {
     return wrapper;
   }).catch((e) => {
     console.error('Failed to start DSL wrapper: ' + e);
@@ -250,12 +250,11 @@ async function getFreshDSLWrapper(
 async function getFreshLangiumWrapper(htmlElement: HTMLElement): Promise<MonacoEditorLanguageClientWrapper> {
   const langiumWrapper = new MonacoEditorLanguageClientWrapper();
   await langiumWrapper.start(createUserConfig({
-    htmlElement,
     languageId: "langium",
     code: currentGrammarContent,
     worker: "/playground/libs/worker/langiumServerWorker.js",
     monarchGrammar: LangiumMonarchContent
-  }));
+  }), htmlElement);
   return langiumWrapper;
 }
 

diff --git a/hugo/package.json b/hugo/package.json
@@ -16,7 +16,7 @@
     "build:worker/domainmodel": "esbuild ../node_modules/langium-domainmodel-dsl/out/language-server/main-browser.js --bundle --format=iife --outfile=./static/showcase/libs/worker/domainmodelServerWorker.js",
     "build:worker/playground-langium": "esbuild ./content/playground/langium-worker.ts --bundle --format=iife --outfile=./static/playground/libs/worker/langiumServerWorker.js",
     "build:worker/playground-user": "esbuild ./content/playground/user-worker.ts --bundle --format=iife --outfile=./static/playground/libs/worker/userServerWorker.js",
-    "build:worker/playground-common": "esbuild ./content/playground/common.ts --bundle --format=esm --outfile=./static/playground/libs/worker/common.js",
+    "build:worker/playground-common": "vite --config  vite.bundle-playground-common.ts build",
     "build:worker/sql": "esbuild ./assets/scripts/sql/language-server.ts --bundle --format=iife --outfile=./static/showcase/libs/worker/sqlServerWorker.js",
     "build:worker/minilogo": "esbuild ../node_modules/langium-minilogo/out/language-server/main-browser.js --bundle --format=iife --outfile=./static/showcase/libs/worker/minilogoServerWorker.js",
     "build:static": "npm run clean:static && npm run build:worker/monaco-editor-react && npm run build:worker/statemachine && npm run build:worker/domainmodel && npm run build:worker/sql && npm run build:worker/minilogo && npm run build:worker/arithmetics && npm run build:worker/playground-common && npm run build:worker/playground-langium && npm run build:worker/playground-user && npm run copy:monaco-editor-wrapper && npm run copy:monaco-workers",
@@ -25,19 +25,20 @@
     "watch:gitpod": "npm run build:static && cross-env NODE_ENV=development hugo server --config ./config.toml -D -b `gp url 1313` -d ../public --appendPort=false"
   },
   "devDependencies": {
-    "@rollup/plugin-inject": "^5.0.2",
+    "@rollup/plugin-inject": "~5.0.4",
     "@types/lz-string": "^1.3.34",
     "@types/mustache": "^4.2.1",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.9",
-    "esbuild": "^0.15.7"
+    "@types/react": "~18.2.28",
+    "@types/react-dom": "~18.2.13",
+    "esbuild": "~0.19.4"
   },
   "dependencies": {
     "@babel/cli": "~7.19.3",
     "@babel/core": "~7.20.5",
     "@babel/preset-react": "~7.18.6",
     "@babel/preset-typescript": "~7.18.6",
-    "@typefox/monaco-editor-react": "1.1.1",
+    "@codingame/monaco-vscode-keybindings-service-override": "~1.82.5",
+    "@typefox/monaco-editor-react": "2.3.0-next.3",
     "@types/d3": "^7.4.0",
     "clsx": "^1.2.1",
     "d3": "^7.8.5",
@@ -49,15 +50,17 @@
     "langium-sql": "^0.2.3",
     "langium-statemachine-dsl": "~1.2.0",
     "lz-string": "^1.4.4",
-    "monaco-editor-workers": "0.39.0",
-    "path-browserify": "~1.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "vite": "~4.3.9",
-    "vscode-languageserver": "8.0.2"
+    "monaco-editor": "~0.43.0",
+    "monaco-editor-workers": "~0.43.0",
+    "monaco-editor-wrapper": "~3.3.0-next.3",
+    "monaco-languageclient": "~6.5.3",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "~4.4.11",
+    "vscode-languageserver": "~8.0.2"
   },
   "volta": {
-    "node": "18.16.0",
-    "npm": "9.6.6"
+    "node": "18.18.1",
+    "npm": "9.9.0"
   }
 }
diff --git a/hugo/vite.bundle-monaco-editor-react.ts b/hugo/vite.bundle-monaco-editor-react.ts
@@ -28,11 +28,8 @@ const config = defineConfig({
         }
     },
     resolve: {
-        alias: {
-            path: 'path-browserify'
-        }
-    },
-    assetsInclude: ['**/*.wasm']
+        dedupe: ['monaco-editor', 'vscode']
+    }
 });
 
 export default config;