Update to monaco-editor-wrapper v4

- Expose monaco-editor-wrapper as mew and monaco-editor-react as mer - Replace buildWorkerDefinition with new useWorkerFactory - Updated langium and monaco tutorial - All workers are now esm
eclipse-langium · Mar 27, 2024 · 95d5bb7 · 95d5bb7
1 parent 67e4742
commit 95d5bb7
Show file tree

Hide file tree

Showing 17 changed files with 1,786 additions and 2,244 deletions.
diff --git a/core/package.json b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "langium-website-core",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "type": "module",
   "description": "Bundling complex sources for hugo",
   "author": "TypeFox",
@@ -42,26 +42,25 @@
     "build": "npm run clean && npm run compile && npm run build:bundle"
   },
   "devDependencies": {
-    "@types/react": "~18.2.28",
-    "@types/react-dom": "~18.2.13",
-    "@types/vscode": "~1.83.0",
-    "typescript": "~5.2.2",
-    "vite": "^4.5.2"
+    "@types/react": "~18.2.71",
+    "@types/react-dom": "~18.2.22",
+    "@types/vscode": "~1.87.0",
+    "typescript": "~5.4.3",
+    "vite": "~5.2.6"
   },
   "dependencies": {
-    "@codingame/monaco-vscode-keybindings-service-override": "~1.83.2",
-    "@typefox/monaco-editor-react": "2.3.0",
-    "monaco-editor": "~0.44.0",
-    "monaco-editor-workers": "~0.44.0",
-    "monaco-editor-wrapper": "~3.3.0",
-    "monaco-languageclient": "~6.6.0",
+    "@codingame/monaco-vscode-keybindings-service-override": "~3.2.2",
+    "@typefox/monaco-editor-react": "~3.0.1",
+    "monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~3.2.2",
+    "monaco-editor-wrapper": "~4.0.1",
+    "monaco-languageclient": "~8.1.0",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vscode": "npm:@codingame/monaco-vscode-api@>=1.83.2 <1.84.0",
-    "vscode-languageserver": "~8.0.2"
+    "vscode": "npm:@codingame/monaco-vscode-api@~3.2.2",
+    "vscode-languageserver": "~9.0.1"
   },
   "volta": {
-    "node": "18.18.1",
-    "npm": "9.9.0"
+    "node": "18.19.1",
+    "npm": "10.2.4"
   }
 }
diff --git a/core/src/index.ts b/core/src/index.ts
@@ -1,17 +1,15 @@
-import * as monaco from "monaco-editor";
-import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
-import type { MonacoEditorProps } from "@typefox/monaco-editor-react";
-import { MonacoEditorReactComp } from "@typefox/monaco-editor-react";
-import { addMonacoStyles } from 'monaco-editor-wrapper/styles';
-
-export * from "monaco-editor-wrapper";
-export type * from "monaco-editor-wrapper";
-export * from "./monaco-editor-wrapper-utils.js";
+import * as monaco from 'monaco-editor';
+import * as mew from 'monaco-editor-wrapper';
+import type * as mewTypes from 'monaco-editor-wrapper';
+import * as mer from '@typefox/monaco-editor-react';
+import type * as merTypes from '@typefox/monaco-editor-react';
+export * from './monaco-editor-wrapper-utils.js';
+export { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory';
 
 export {
     monaco,
-    MonacoEditorProps,
-    MonacoEditorReactComp,
-    addMonacoStyles,
-    getKeybindingsServiceOverride
+    mew,
+    mewTypes,
+    mer,
+    merTypes
 }
diff --git a/core/src/monaco-editor-wrapper-utils.ts b/core/src/monaco-editor-wrapper-utils.ts
@@ -1,6 +1,6 @@
-import { languages } from "monaco-editor";
+import { languages } from 'monaco-editor';
 import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
-import { EditorAppConfigClassic, EditorAppConfigExtended, LanguageClientConfig, UserConfig } from "monaco-editor-wrapper";
+import { EditorAppConfigClassic, EditorAppConfigExtended, LanguageClientConfig, UserConfig } from 'monaco-editor-wrapper';
 
 export type WorkerUrl = string;
 

diff --git a/core/vite.bundle.ts b/core/vite.bundle.ts
@@ -10,25 +10,19 @@ const config = defineConfig({
             formats: ['es']
         },
         outDir: resolve(__dirname, 'bundle/monaco-editor-wrapper-bundle'),
-        assetsDir: resolve(__dirname, 'bundle/monaco-editor-wrapper-bundle/assets'),
         emptyOutDir: true,
         cssCodeSplit: false,
+        sourcemap: true,
         commonjsOptions: {
             strictRequires: true
         },
         rollupOptions: {
             output: {
                 name: 'monaco-editor-wrapper-bundle',
                 exports: 'named',
-                sourcemap: false,
-                assetFileNames: (assetInfo) => {
-                    return `assets/${assetInfo.name}`;
-                }
+                sourcemap: false
             }
         }
-    },
-    resolve: {
-        dedupe: ['monaco-editor', 'vscode']
     }
 });
 

diff --git a/hugo/assets/scripts/arithmetics/arithmetics.tsx b/hugo/assets/scripts/arithmetics/arithmetics.tsx
@@ -1,25 +1,23 @@
-import { addMonacoStyles, createUserConfig, MonacoEditorReactComp, UserConfig } from "langium-website-core/bundle";
-import { buildWorkerDefinition } from "monaco-editor-workers";
+import { createUserConfig, mew, mer, useWorkerFactory } from "langium-website-core/bundle";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { Evaluation, examples, syntaxHighlighting } from "./arithmetics-tools";
 import { Diagnostic, DocumentChangeResponse } from "langium-ast-helper";
 
-addMonacoStyles('monaco-styles-helper');
-
-buildWorkerDefinition(
-    "../../libs/monaco-editor-workers/workers",
-    new URL("", window.location.href).href,
-    false
-);
+useWorkerFactory({
+    ignoreMapping: true,
+    workerLoaders: {
+        editorWorkerService: () => new Worker(new URL('../../libs/workers/editorWorker-es.js', window.location.href).href, { type: 'module' })
+    }
+});
 
 interface PreviewProps {
     evaluations?: Evaluation[];
     diagnostics?: Diagnostic[];
     focusLine: (line: number) => void;
 }
 
-let userConfig: UserConfig;
+let userConfig: mew.UserConfig;
 
 
 class Preview extends React.Component<PreviewProps, PreviewProps> {
@@ -89,7 +87,7 @@ interface AppState {
     exampleIndex: number;
 }
 class App extends React.Component<{}, AppState> {
-    monacoEditor: React.RefObject<MonacoEditorReactComp>;
+    monacoEditor: React.RefObject<mer.MonacoEditorReactComp>;
     preview: React.RefObject<Preview>;
     constructor(props) {
         super(props);
@@ -163,7 +161,7 @@ class App extends React.Component<{}, AppState> {
                         </select>
                     </div>
                     <div className="wrapper relative bg-white dark:bg-gray-900 border border-emeraldLangium h-full w-full">
-                        <MonacoEditorReactComp
+                        <mer.MonacoEditorReactComp
                             ref={this.monacoEditor}
                             onLoad={this.onMonacoLoad}
                             userConfig={userConfig}

diff --git a/hugo/assets/scripts/domainmodel/domainmodel.tsx b/hugo/assets/scripts/domainmodel/domainmodel.tsx
@@ -1,29 +1,27 @@
-import { addMonacoStyles, createUserConfig, MonacoEditorReactComp, UserConfig } from "langium-website-core/bundle";
-import { buildWorkerDefinition } from "monaco-editor-workers";
+import { createUserConfig, mew, mer, useWorkerFactory } from "langium-website-core/bundle";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { DomainModelAstNode, example, getMainTreeNode, syntaxHighlighting } from "./domainmodel-tools";
 import { deserializeAST, Diagnostic, DocumentChangeResponse } from 'langium-ast-helper';
 
 import D3Tree from "./d3tree";
 
-addMonacoStyles('monaco-styles-helper');
-
-buildWorkerDefinition(
-    "../../libs/monaco-editor-workers/workers",
-    new URL("", window.location.href).href,
-    false
-);
+useWorkerFactory({
+    ignoreMapping: true,
+    workerLoaders: {
+        editorWorkerService: () => new Worker(new URL('../../libs/workers/editorWorker-es.js', window.location.href).href, { type: 'module' })
+    }
+});
 
-let userConfig: UserConfig;
+let userConfig: mew.UserConfig;
 
 interface AppState {
     ast?: DomainModelAstNode;
     diagnostics?: Diagnostic[];
 }
 
 class App extends React.Component<{}, AppState> {
-    monacoEditor: React.RefObject<MonacoEditorReactComp>;
+    monacoEditor: React.RefObject<mer.MonacoEditorReactComp>;
     constructor(props) {
         super(props);
 
@@ -119,7 +117,7 @@ class App extends React.Component<{}, AppState> {
                         Editor
                     </div>
                     <div className="wrapper relative bg-white dark:bg-gray-900 border border-emeraldLangium h-[50vh] min-h-[300px]">
-                        <MonacoEditorReactComp
+                        <mer.MonacoEditorReactComp
                             ref={this.monacoEditor}
                             onLoad={this.onMonacoLoad}
                             userConfig={userConfig}

diff --git a/hugo/assets/scripts/minilogo/minilogo.tsx b/hugo/assets/scripts/minilogo/minilogo.tsx
@@ -1,18 +1,16 @@
-import { addMonacoStyles, createUserConfig, MonacoEditorReactComp, UserConfig } from "langium-website-core/bundle";
-import { buildWorkerDefinition } from "monaco-editor-workers";
+import { createUserConfig, mew, mer, useWorkerFactory } from "langium-website-core/bundle";
 import React, { createRef } from "react";
 import { createRoot } from "react-dom/client";
 import { Diagnostic, DocumentChangeResponse } from "langium-ast-helper";
 import { ColorArgs, Command, MoveArgs, examples, syntaxHighlighting } from "./minilogo-tools";
 import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from "lz-string";
 
-addMonacoStyles('monaco-styles-helper');
-
-buildWorkerDefinition(
-  "../../libs/monaco-editor-workers/workers",
-  new URL("", window.location.href).href,
-  false
-);
+useWorkerFactory({
+  ignoreMapping: true,
+  workerLoaders: {
+      editorWorkerService: () => new Worker(new URL('../../libs/workers/editorWorker-es.js', window.location.href).href, { type: 'module' })
+  }
+});
 
 let shouldAnimate = true;
 
@@ -25,7 +23,7 @@ interface DrawCanvasProps {
   commands: Command[];
 }
 
-let userConfig: UserConfig;
+let userConfig: mew.UserConfig;
 
 class DrawCanvas extends React.Component<DrawCanvasProps, DrawCanvasProps> {
   canvasRef: React.RefObject<HTMLCanvasElement>;
@@ -212,7 +210,7 @@ interface AppState {
   currentExample: number;
 }
 class App extends React.Component<{}, AppState> {
-  monacoEditor: React.RefObject<MonacoEditorReactComp>;
+  monacoEditor: React.RefObject<mer.MonacoEditorReactComp>;
   preview: React.RefObject<Preview>;
   copyHint: React.RefObject<HTMLDivElement>;
   shareButton: React.RefObject<HTMLImageElement>;
@@ -318,7 +316,7 @@ class App extends React.Component<{}, AppState> {
             </div>
           </div>
           <div className="wrapper relative bg-white dark:bg-gray-900 border border-emeraldLangium h-full w-full">
-            <MonacoEditorReactComp
+            <mer.MonacoEditorReactComp
               ref={this.monacoEditor}
               onLoad={this.onMonacoLoad}
               userConfig={userConfig}

diff --git a/hugo/assets/scripts/sql/ui.tsx b/hugo/assets/scripts/sql/ui.tsx
@@ -1,5 +1,4 @@
-import { addMonacoStyles, createUserConfig, MonacoEditorReactComp, UserConfig } from "langium-website-core/bundle";
-import { buildWorkerDefinition } from "monaco-editor-workers";
+import { createUserConfig, mew, mer, useWorkerFactory } from "langium-website-core/bundle";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import {
@@ -8,18 +7,17 @@ import {
 import textMateGrammar from './sql.tmLanguage.json';
 import { DocumentChangeResponse } from "langium-ast-helper";
 
-addMonacoStyles('monaco-styles-helper');
-
-buildWorkerDefinition(
-  "../../libs/monaco-editor-workers/workers",
-  new URL("", window.location.href).href,
-  false
-);
+useWorkerFactory({
+  ignoreMapping: true,
+  workerLoaders: {
+      editorWorkerService: () => new Worker(new URL('../../libs/workers/editorWorker-es.js', window.location.href).href, { type: 'module' })
+  }
+});
 
-let userConfig: UserConfig;
+let userConfig: mew.UserConfig;
 
 class App extends React.Component<{}> {
-  private monacoEditorLeft: React.RefObject<MonacoEditorReactComp>;
+  private monacoEditorLeft: React.RefObject<mer.MonacoEditorReactComp>;
   constructor(props) {
     super(props);
 
@@ -35,7 +33,7 @@ class App extends React.Component<{}> {
    *
    * @throws Error on inability to ref the Monaco component or to get the language client
    */
-  onMonacoLoad(editor: React.RefObject<MonacoEditorReactComp>) {
+  onMonacoLoad(editor: React.RefObject<mer.MonacoEditorReactComp>) {
     // verify we can get a ref to the editor
     if (!editor.current) {
       throw new Error("Unable to get a reference to the Monaco Editor");
@@ -72,7 +70,7 @@ class App extends React.Component<{}> {
     };
     return (
       <div className="w-full justify-center flex flex-col items-center">
-        <MonacoEditorReactComp
+        <mer.MonacoEditorReactComp
           userConfig={userConfig}
           className="w-1/2 border border-emeraldLangium h-[50vh] min-h-[300px]"
           ref={this.monacoEditorLeft}

diff --git a/hugo/assets/scripts/statemachine/statemachine.tsx b/hugo/assets/scripts/statemachine/statemachine.tsx
@@ -1,18 +1,16 @@
-import { addMonacoStyles, createUserConfig, MonacoEditorReactComp, UserConfig } from "langium-website-core/bundle";
-import { buildWorkerDefinition } from "monaco-editor-workers";
+import { createUserConfig, mew, mer, useWorkerFactory } from "langium-website-core/bundle";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { defaultText, StateMachineAstNode, StateMachineState, StateMachineTools } from "./statemachine-tools";
 import statemachineGrammar from 'langium-statemachine-dsl/syntaxes/statemachine.tmLanguage.json';
 import { deserializeAST, Diagnostic, DocumentChangeResponse } from "langium-ast-helper";
 
-addMonacoStyles('monaco-styles-helper');
-
-buildWorkerDefinition(
-  "../../libs/monaco-editor-workers/workers",
-  new URL("", window.location.href).href,
-  false
-);
+useWorkerFactory({
+  ignoreMapping: true,
+  workerLoaders: {
+      editorWorkerService: () => new Worker(new URL('../../libs/workers/editorWorker-es.js', window.location.href).href, { type: 'module' })
+  }
+});
 
 interface StateProps {
   name: string;
@@ -203,9 +201,9 @@ class Preview extends React.Component<PreviewProps, PreviewProps> {
 }
 
 class StateMachineComponent extends React.Component<{
-  langiumConfig: UserConfig
+  langiumConfig: mew.UserConfig
 }> {
-  monacoEditor: React.RefObject<MonacoEditorReactComp>;
+  monacoEditor: React.RefObject<mer.MonacoEditorReactComp>;
   preview: React.RefObject<Preview>;
 
   constructor(props) {
@@ -266,7 +264,7 @@ class StateMachineComponent extends React.Component<{
             Editor
           </div>
           <div className="wrapper relative bg-white dark:bg-gray-900 border border-emeraldLangium h-full w-full">
-            <MonacoEditorReactComp
+            <mer.MonacoEditorReactComp
               userConfig={this.props.langiumConfig}
               ref={this.monacoEditor}
               onLoad={this.onMonacoLoad}
@@ -288,7 +286,7 @@ class StateMachineComponent extends React.Component<{
 }
 
 // setup config & render
-const langiumGlobalConfig: UserConfig = createUserConfig({
+const langiumGlobalConfig: mew.UserConfig = createUserConfig({
   languageId: 'statemachine',
   code: defaultText,
   textmateGrammar: statemachineGrammar,

diff --git a/hugo/content/playground/_index.html b/hugo/content/playground/_index.html
@@ -14,16 +14,14 @@
 <link rel="preload" as="script" href="./libs/worker/langiumServerWorker.js"/>
 <link rel="preload" as="script" href="./libs/worker/userServerWorker.js"/>
 <script type="module">
-    import { addMonacoStyles, setupPlayground, share, overlay, getPlaygroundState, MonacoEditorLanguageClientWrapper } from "./libs/worker/common.js";
-  import { buildWorkerDefinition } from "../libs/monaco-editor-workers/index.js";
+  import { setupPlayground, share, overlay, getPlaygroundState, mew, useWorkerFactory } from "./libs/worker/common.js";
 
-  addMonacoStyles('monaco-styles-helper');
-
-  buildWorkerDefinition(
-    "../libs/monaco-editor-workers/workers",
-    new URL("", window.location.href).href,
-    false
-  );
+  useWorkerFactory({
+    ignoreMapping: true,
+    workerLoaders: {
+        editorWorkerService: () => new Worker(new URL('../libs/workers/editorWorker-es.js', window.location.href).href, { type: 'module' })
+    }
+  });
 
   // on doc load
   addEventListener('load', function() {