ui: monaco: upgrade to 0.57, drop monaco-editor-webpack-plugin

- Migrate entry points to the 0.57 exports scheme (monaco-editor/editor,
  languages/features/typescript/register)
- Wire workers via the official MonacoEnvironment.getWorker +
  new Worker(new URL(...)) integration; webpack emits them as shared-chunk
  classic workers (chrome 70 compatible), total assets -21%
- Keep css/html/json language features (register.all) and route their
  worker labels; json is used by the cmeditor textareas
- Replace removed esm/vs/nls.messages with an inline implementation in the
  nls shim
- Drop MinChunkSizePlugin: it merged worker chunks into the main chunk and
  broke the runtime id module (webpack#15416)
- Remove monaco-editor-webpack-plugin dependency
- loadMonaco() now returns the loaded feature module exports, e.g.
  loadMonaco(['typescript']).typescript.javascriptDefaults

packages/ui-default/components/monaco/index.ts

@@ -1,8 +1,11 @@
 import './monaco.styl';
+import 'monaco-editor/features/register.all.js';
+import 'monaco-editor/languages/definitions/register.all.js';
+import 'monaco-editor/languages/features/register.all.js';
 
 import $ from 'jquery';
+import * as monaco from 'monaco-editor/editor';
 import { EditorAction, registerEditorAction } from 'monaco-editor/esm/vs/editor/browser/editorExtensions';
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 import { IQuickInputService } from 'monaco-editor/esm/vs/platform/quickinput/common/quickInput';
 import list from 'monaco-themes/themes/themelist.json';
 import { nanoid } from 'nanoid';
@@ -10,6 +13,30 @@ import { i18n, request } from 'vj/utils';
 
 export { renderMarkdown } from 'monaco-editor/esm/vs/base/browser/markdownRenderer';
 
+self.MonacoEnvironment = {
+  getWorker(workerId: string, label: string): Worker {
+    if (label === 'editorWorkerService') {
+      return new Worker(new URL('monaco-editor/editor/editor.worker.js', import.meta.url), { type: 'module' });
+    }
+    if (label === 'yaml') {
+      return new Worker(new URL('monaco-yaml/yaml.worker.js', import.meta.url), { type: 'module' });
+    }
+    if (label === 'typescript' || label === 'javascript') {
+      return new Worker(new URL('monaco-editor/languages/features/typescript/ts.worker.js', import.meta.url), { type: 'module' });
+    }
+    if (['css', 'scss', 'less'].includes(label)) {
+      return new Worker(new URL('monaco-editor/languages/features/css/css.worker.js', import.meta.url), { type: 'module' });
+    }
+    if (['html', 'handlebars', 'razor'].includes(label)) {
+      return new Worker(new URL('monaco-editor/languages/features/html/html.worker.js', import.meta.url), { type: 'module' });
+    }
+    if (label === 'json') {
+      return new Worker(new URL('monaco-editor/languages/features/json/json.worker.js', import.meta.url), { type: 'module' });
+    }
+    throw new Error(`Unknown monaco worker label: ${label}`);
+  },
+} as monaco.Environment;
+
 export default monaco;
 export const customOptions: monaco.editor.IStandaloneDiffEditorConstructionOptions = JSON.parse(localStorage.getItem('editor.config') || '{}');
 export function saveCustomOptions() {

packages/ui-default/components/monaco/languages/markdown.ts

@@ -1,6 +1,6 @@
 import keyword from 'emojis-keywords';
 import list from 'emojis-list';
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import * as monaco from 'monaco-editor/editor';
 import qface from 'qface';
 import { api } from 'vj/utils';
 

packages/ui-default/components/monaco/languages/typescript.ts

@@ -1,27 +1,31 @@
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import * as monaco from 'monaco-editor/editor';
+import type { CompilerOptions, DiagnosticsOptions } from 'monaco-editor/languages/features/typescript/register.js';
+import {
+  javascriptDefaults, ModuleKind, ModuleResolutionKind, ScriptTarget,
+  typescriptDefaults } from 'monaco-editor/languages/features/typescript/register.js';
 
 const types = require.context('@types/node/', true, /\.d\.ts$/, 'lazy-once');
 
-const diagnosticsOptions: monaco.languages.typescript.DiagnosticsOptions = {
+const diagnosticsOptions: DiagnosticsOptions = {
   noSemanticValidation: false,
   noSyntaxValidation: false,
   noSuggestionDiagnostics: true,
 };
-const compilerOptions: monaco.languages.typescript.CompilerOptions = {
-  target: monaco.languages.typescript.ScriptTarget.ES2020,
-  module: monaco.languages.typescript.ModuleKind.ESNext,
+const compilerOptions: CompilerOptions = {
+  target: ScriptTarget.ES2020,
+  module: ModuleKind.ESNext,
   allowNonTsExtensions: true,
 };
-monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions(diagnosticsOptions);
-monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions(diagnosticsOptions);
-monaco.languages.typescript.javascriptDefaults.setCompilerOptions(compilerOptions);
-monaco.languages.typescript.typescriptDefaults.setCompilerOptions(compilerOptions);
+javascriptDefaults.setDiagnosticsOptions(diagnosticsOptions);
+typescriptDefaults.setDiagnosticsOptions(diagnosticsOptions);
+javascriptDefaults.setCompilerOptions(compilerOptions);
+typescriptDefaults.setCompilerOptions(compilerOptions);
 const libSource = [
   'declare function readline(): string;',
   'declare function print(content: string): void;',
 ].join('\n');
 const libUri = 'ts:filename/basic.d.ts';
-monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, libUri);
+javascriptDefaults.addExtraLib(libSource, libUri);
 monaco.editor.createModel(libSource, 'typescript', monaco.Uri.parse(libUri));
 const modules = [];
 
@@ -34,12 +38,16 @@ export async function loadTypes() {
       modules.push(val.toString().split('declare module \'')[1].split('\'')[0]);
     }
     const uri = `ts:node/${key.split('./')[1]}`;
-    monaco.languages.typescript.javascriptDefaults.addExtraLib(val, uri);
+    javascriptDefaults.addExtraLib(val, uri);
     monaco.editor.createModel(val, 'typescript', monaco.Uri.parse(uri));
   }
   let val = 'declare var require:';
   for (const m of modules) val += `((id:'${m}')=>(typeof import('${m}')))&`;
   val += '((id:string)=>any)';
-  monaco.languages.typescript.javascriptDefaults.addExtraLib(val, 'ts:node/require.d.ts');
+  javascriptDefaults.addExtraLib(val, 'ts:node/require.d.ts');
   monaco.editor.createModel(val, 'typescript', monaco.Uri.parse('ts:node/require.d.ts'));
 }
+
+export {
+  javascriptDefaults, ModuleKind, ModuleResolutionKind, ScriptTarget, typescriptDefaults,
+};

packages/ui-default/components/monaco/languages/yaml.ts

@@ -1,8 +1,8 @@
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
+import * as monaco from 'monaco-editor/editor';
 import { configureMonacoYaml } from 'monaco-yaml';
 import problemConfigSchema from '../schema/problemconfig';
 
-configureMonacoYaml(monaco, {
+configureMonacoYaml(monaco as any, {
   validate: true,
   enableSchemaRequest: true,
   hover: true,

packages/ui-default/components/monaco/loader.ts

@@ -32,7 +32,11 @@ const loaders = {
     if (resource) setLocaleData(resource);
   },
   markdown: () => import('./languages/markdown'),
-  typescript: () => import('./languages/typescript').then((m) => m.loadTypes()),
+  typescript: async () => {
+    const m = await import('./languages/typescript');
+    await m.loadTypes();
+    return m;
+  },
   yaml: () => import('./languages/yaml'),
   external: async (monaco, feat) => {
     for (const item of await getFeatures(`monaco-${feat}`)) {
@@ -49,7 +53,13 @@ const loaders = {
 
 let loadPromise = Promise.resolve();
 
-export async function load(features = ['markdown']) {
+export async function load(features = ['markdown']): Promise<{
+  monaco: typeof import('monaco-editor/editor');
+  registerAction: typeof import('./index').registerAction;
+  customOptions: typeof import('./index').customOptions;
+  renderMarkdown: typeof import('./index').renderMarkdown;
+  [feature: string]: any;
+}> {
   let s = Date.now();
   await loadPromise;
   let resolve;
@@ -59,6 +69,7 @@ export async function load(features = ['markdown']) {
     console.log('Loading monaco editor');
   }
   const res = await import('./index');
+  const featureExports: Record<string, any> = {};
   if (!loaded) {
     console.log('Loaded monaco editor in', Date.now() - s, 'ms');
     loaded = [];
@@ -75,7 +86,7 @@ export async function load(features = ['markdown']) {
     s = Date.now();
     console.log('Loading monaco feature:', feat);
     try {
-      if (loaders[feat]) await loaders[feat]();
+      if (loaders[feat]) featureExports[feat] = await loaders[feat]();
       else await loaders.external(res.default, feat);
       console.log('Loaded monaco feature:', feat, 'in', Date.now() - s, 'ms');
       loaded.push(feat);
@@ -90,6 +101,7 @@ export async function load(features = ['markdown']) {
     registerAction: res.registerAction,
     customOptions: res.customOptions,
     renderMarkdown: res.renderMarkdown,
+    ...featureExports,
   };
 }
 

packages/ui-default/components/monaco/nls.js

@@ -1,4 +1,10 @@
-export { getNLSLanguage, getNLSMessages } from 'monaco-editor/esm/vs/nls.messages';
+export function getNLSLanguage() {
+  return globalThis._VSCODE_NLS_LANGUAGE;
+}
+
+export function getNLSMessages() {
+  return globalThis._VSCODE_NLS_MESSAGES || [];
+}
 
 function format(message, args) {
   let result;

packages/ui-default/components/scratchpad/ScratchpadEditorContainer.tsx

@@ -1,4 +1,4 @@
-import type * as monaco from 'monaco-editor';
+import type * as monaco from 'monaco-editor/editor';
 import React from 'react';
 import { connect } from 'react-redux';
 import { load } from 'vj/components/monaco/loader';

packages/ui-default/components/scratchpad/index.tsx

@@ -3,7 +3,7 @@ import SettingsIcon from '@vscode/codicons/src/icons/settings-gear.svg?react';
 import { Allotment } from 'allotment';
 import $ from 'jquery';
 import _ from 'lodash';
-import type * as monaco from 'monaco-editor';
+import type * as monaco from 'monaco-editor/editor';
 import React from 'react';
 import { useDispatch, useSelector, useStore } from 'react-redux';
 import Dom from 'vj/components/react/DomComponent';
@@ -38,9 +38,9 @@ class ScratchpadService extends Service {
   load: Promise<void>;
   loadCallback: () => void;
   editor: monaco.editor.IStandaloneCodeEditor;
-  monaco: typeof import('monaco-editor');
+  monaco: typeof import('monaco-editor/editor');
 
-  init(editor: monaco.editor.IStandaloneCodeEditor, monaco: typeof import('monaco-editor')) {
+  init(editor: monaco.editor.IStandaloneCodeEditor, monaco: typeof import('monaco-editor/editor')) {
     this.editor = editor;
     this.monaco = monaco;
     this.loadCallback();