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

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 {

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';

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
+}
+

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;
 }

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;
 }
 

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"
  }
 }

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;