Upgrade to latest Monaco Editor version

- Treat editor worker as asset in extension for easier usage (webpack)
- Use monacoConfigPlugin for vite configuration

Author: martin-fleck-at

.gitignore

@@ -41,3 +41,5 @@ dist/
 AxonIvyEngine/
 container-workspace/
 target/
+
+**/.pnpm-store*

extension/assets/monaco-workers/editor.js

@@ -33,11 +33,13 @@
     "@axonivy/form-editor-protocol": "~13.2.0-next.991.043a322",
     "@axonivy/log-view-core": "~13.2.0-next.262.10ba45f",
     "@axonivy/log-view-protocol": "~13.2.0-next.262.10ba45f",
-    "@axonivy/process-editor-protocol": "~13.2.0-next.1853.34378948",
-    "@axonivy/process-editor-inscription-protocol": "~13.2.0-next.1853.34378948",
+    "@axonivy/process-editor-protocol": "~13.2.0-next.1899.1a3079bf",
+    "@axonivy/process-editor-inscription-protocol": "~13.2.0-next.1899.1a3079bf",
     "@axonivy/variable-editor-protocol": "~13.2.0-next.863.0c776bc",
     "@axonivy/jsonrpc": "~13.2.0-next.936.ef2cd88",
     "@eclipse-glsp/vscode-integration": "2.5.0",
+    "@codingame/monaco-vscode-editor-api": "^23.1.1",
+    "@codingame/monaco-vscode-textmate-service-override": "^23.1.1",
     "@eclipse-glsp/protocol": "2.5.0",
     "axios": "1.13.2",
     "dom-serializer": "2.0.0",

extension/package.json

@@ -22,7 +22,6 @@ export interface ViteManifestEntry {
 }
 
 export const ROOT_ENTRY = 'index.html';
-export const EDITOR_WORKER_ENTRY = 'editor.worker.js?worker';
 
 export function parseBuildManifest(root: vscode.Uri): ViteManifest {
   const manifest = vscode.Uri.joinPath(root, 'build.manifest.json').fsPath;
@@ -37,25 +36,11 @@ export function findRootEntry(manifest: ViteManifest): ViteManifestEntry {
   return { source: entry[0], chunk: entry[1] };
 }
 
-export function findEditorWorkerWrapperChunk(manifest: ViteManifest): ViteManifestChunk | undefined {
-  return Object.entries(manifest).find(entry => entry[0].endsWith(EDITOR_WORKER_ENTRY))?.[1];
-}
-
 export function findRootHtml(appPath: vscode.Uri, manifest: ViteManifest): vscode.Uri {
   const rootEntry = findRootEntry(manifest);
   return vscode.Uri.joinPath(appPath, rootEntry.chunk.src ?? rootEntry.source);
 }
 
-export function findEditorWorker(appPath: vscode.Uri, manifest: ViteManifest): vscode.Uri | undefined {
-  // Finding the location of the editor worker is a bit tricky as Vite automatically generates a wrapper for it
-  // But for web views we need the actual code so we can turn it into a blob URL later on
-  const workerWrapper = findEditorWorkerWrapperChunk(manifest);
-  if (!workerWrapper) {
-    return;
-  }
-  // find the editor worker file that is not the wrapper
-  const assetsDirectory = vscode.Uri.joinPath(appPath, 'assets');
-  const assetFiles = fs.readdirSync(assetsDirectory.fsPath);
-  const editorWorker = assetFiles.find(fileName => fileName.includes('editor.worker') && !workerWrapper.file.includes(fileName));
-  return editorWorker ? vscode.Uri.joinPath(assetsDirectory, editorWorker) : undefined;
+export function findEditorWorker(rootPath: vscode.Uri): vscode.Uri | undefined {
+  return vscode.Uri.joinPath(rootPath, 'assets', 'monaco-workers', 'editor.js');
 }

extension/src/editors/build-manifest.ts

@@ -53,7 +53,7 @@ export const createWebViewContent = (
   }
 
   // script to set the editor worker location, needed to load the editor worker from the webview as it only allows blob: or data: fetching
-  const workerUri = findEditorWorker(rootPath, manifest);
+  const workerUri = findEditorWorker(context.extensionUri);
   if (workerUri) {
     const editorWorkerLocation = webview.asWebviewUri(workerUri);
     const editorWorkerLocationScript = new Element('script', { nonce: nonce }, [

extension/src/editors/webview-helper.ts

@@ -46,4 +46,21 @@ const config = {
   }
 };
 
-module.exports = config;
+// cf. https://github.com/TypeFox/monaco-languageclient/blob/067681adb1c283bfc9a85db989e79bd06599f3a7/docs/guides/troubleshooting.md#webpack-worker-issues
+/**@type {import('webpack').Configuration}*/
+const monacoWorkerConfig = {
+  entry: {
+    editor: './node_modules/@codingame/monaco-vscode-editor-api/esm/vs/editor/editor.worker.js'
+    // textmate: './node_modules/@codingame/monaco-vscode-textmate-service-override/worker.js'
+  },
+  output: {
+    filename: '[name].js',
+    path: path.resolve(__dirname, './assets/monaco-workers')
+  },
+  mode: 'production',
+  performance: {
+    hints: false
+  }
+};
+
+module.exports = [config, monacoWorkerConfig];

extension/webpack.config.js

@@ -16,25 +16,24 @@
     "url": "https://github.com/axonivy/process-editor"
   },
   "dependencies": {
-    "@axonivy/process-editor": "~13.2.0-next.1853.34378948",
-    "@axonivy/process-editor-inscription": "~13.2.0-next.1853.34378948",
-    "@axonivy/process-editor-inscription-view": "~13.2.0-next.1853.34378948",
-    "@axonivy/process-editor-protocol": "~13.2.0-next.1853.34378948",
+    "@axonivy/process-editor": "~13.2.0-next.1899.1a3079bf",
+    "@axonivy/process-editor-inscription": "~13.2.0-next.1899.1a3079bf",
+    "@axonivy/process-editor-inscription-view": "~13.2.0-next.1899.1a3079bf",
+    "@axonivy/process-editor-protocol": "~13.2.0-next.1899.1a3079bf",
     "@axonivy/vscode-webview-common": "workspace:~13.2.0-next",
-    "@codingame/monaco-vscode-editor-service-override": "1.83.3",
-    "@codingame/monaco-vscode-languages-service-override": "1.83.3",
-    "@codingame/monaco-vscode-model-service-override": "1.83.3",
-    "@codingame/monaco-vscode-api": "1.83.3",
     "@eclipse-glsp/client": "2.5.0",
     "@eclipse-glsp/vscode-integration": "2.5.0",
     "@eclipse-glsp/vscode-integration-webview": "2.5.0",
     "inversify": "6.2.2",
-    "monaco-editor": "0.44.0",
     "vscode-messenger-webview": "0.4.5",
-    "vscode-messenger-common": "0.4.5"
+    "vscode-messenger-common": "0.4.5",
+    "@codingame/monaco-vscode-extension-api": "^23.1.1",
+    "vscode": "npm:@codingame/monaco-vscode-extension-api",
+    "monaco-editor": "npm:@codingame/monaco-vscode-editor-api"
   },
   "devDependencies": {
     "@vscode/codicons": "0.0.43",
+    "@axonivy/monaco-vite-plugin": "13.2.0-next.1899.1a3079bf",
     "path-browserify": "1.0.1"
   },
   "type": "module",

pnpm-lock.yaml

@@ -4,8 +4,8 @@ import '../css/colors.css';
 import '../css/diagram.css';
 
 import {
-  createIvyDiagramContainer,
   IVY_ACCESSIBILITY_MODULES,
+  createIvyDiagramContainer,
   ivyBreakpointModule,
   ivyOpenDataClassModule,
   ivyOpenFormModule,
@@ -77,31 +77,29 @@ async function initMonaco(): Promise<unknown> {
   //
   // So what we do instead is to expose the editor worker location as Webview Uri in our IvyEditorProvider and store it in the 'editorWorkerLocation' variable.
   // We then fetch the script stored at that location and translate it into a blob as blob and data URLs are supported for workers.
-  //
-  // Packaging with Vite has it's own handling of web workers so it can be properly accessed without any custom configuration.
-  // We therefore trigger the generation of the necessary script file here through the import so that we can later expose the generated file under the
-  // 'editorWorkerLocation' variable:
-  import('monaco-editor/esm/vs/editor/editor.worker?worker');
-
   if (!editorWorkerLocation) {
     console.warn('Could not find editor worker location for web worker creation. Initialize without dedicated web worker support.');
-    return MonacoEditorUtil.configureInstance({ theme: 'light', worker: { skip: true } });
+    return MonacoEditorUtil.configureMonaco({ theme: 'light' });
   }
   try {
+    console.info('Translate editor worker script from webview uri to blob: ' + editorWorkerLocation);
     const script = await fetch(editorWorkerLocation);
     if (script.status === 404) {
       throw Error('File not found ' + editorWorkerLocation);
     }
     const blob = await script.blob();
     class BlobWorker extends Worker {
-      constructor(workerId?: string, label?: string, url = URL.createObjectURL(blob)) {
-        super(url, { name: workerId ?? label });
+      constructor(name: string, url = URL.createObjectURL(blob)) {
+        super(url, { name, type: 'module' });
         this.addEventListener('error', () => URL.revokeObjectURL(url));
       }
     }
-    return MonacoEditorUtil.configureInstance({ theme: 'light', worker: { workerConstructor: BlobWorker } });
+    return MonacoEditorUtil.configureMonaco({
+      theme: 'light',
+      workerLoaders: { TextEditorWorker: () => new BlobWorker('TextEditorWorker') }
+    });
   } catch (error) {
     console.error('Problem with retrieving the editor worker script. Initialize without dedicated web worker support.', error);
-    return MonacoEditorUtil.configureInstance({ theme: 'light', worker: { skip: true } });
+    return MonacoEditorUtil.configureMonaco({ theme: 'light' });
   }
 }

webviews/process-editor/package.json

@@ -1,38 +1,24 @@
+import monacoConfigPlugin from '@axonivy/monaco-vite-plugin';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 export default defineConfig(() => {
   const config = {
-    plugins: [tsconfigPaths()],
+    plugins: [tsconfigPaths(), monacoConfigPlugin()],
     build: {
       manifest: 'build.manifest.json',
       outDir: '../../extension/dist/webviews/process-editor',
-      chunkSizeWarningLimit: 5000,
-      rollupOptions: {
-        output: {
-          manualChunks(id: string) {
-            if (id.includes('monaco-languageclient' || id.includes('vscode'))) {
-              return 'monaco-chunk';
-            }
-          }
-        }
-      }
+      chunkSizeWarningLimit: 5000
     },
     server: {
       port: 3000,
       open: false,
-      sourcemapIgnoreList(sourcePath, sourcemapPath) {
+      sourcemapIgnoreList(sourcePath: string, sourcemapPath: string) {
         return sourcePath.includes('node_modules') && !sourcePath.includes('@eclipse-glsp') && !sourcePath.includes('@axonivy');
       }
     },
     resolve: { alias: { path: 'path-browserify' } },
-    base: './',
-    optimizeDeps: {
-      needsInterop: [
-        'monaco-editor/esm/vs/editor/standalone/browser/accessibilityHelp/accessibilityHelp.js',
-        'monaco-editor/esm/vs/editor/standalone/browser/inspectTokens/inspectTokens.js'
-      ]
-    }
+    base: './'
   };
   return config;
 });