From 9ac3038ee41fc33057ca95dea455bf09328f83d7 Mon Sep 17 00:00:00 2001 From: Kai Salmen Date: Tue, 26 Mar 2024 16:43:38 +0100 Subject: [PATCH] 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 --- core/package.json | 31 +- core/src/index.ts | 24 +- core/src/monaco-editor-wrapper-utils.ts | 4 +- core/vite.bundle.ts | 10 +- .../scripts/arithmetics/arithmetics.tsx | 22 +- .../scripts/domainmodel/domainmodel.tsx | 22 +- hugo/assets/scripts/minilogo/minilogo.tsx | 22 +- hugo/assets/scripts/sql/ui.tsx | 24 +- .../scripts/statemachine/statemachine.tsx | 24 +- hugo/content/playground/_index.html | 16 +- hugo/content/playground/common.ts | 39 +- hugo/content/tutorials/langium_and_monaco.md | 83 +- hugo/package.json | 65 +- hugo/vite.showcase-worker.ts | 2 +- package-lock.json | 3597 ++++++++--------- package.json | 9 +- tailwind/package.json | 12 +- 17 files changed, 1774 insertions(+), 2232 deletions(-) diff --git a/core/package.json b/core/package.json index 7dad5219..9103cca0 100644 --- 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 index 151921cf..8a1a1a66 100644 --- 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 index fd739bff..a04bfea6 100644 --- 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 index 24a35854..c9ad75b0 100644 --- a/core/vite.bundle.ts +++ b/core/vite.bundle.ts @@ -10,9 +10,9 @@ 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 }, @@ -20,15 +20,9 @@ const config = defineConfig({ 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 index a3fad17a..b5e788f4 100644 --- a/hugo/assets/scripts/arithmetics/arithmetics.tsx +++ b/hugo/assets/scripts/arithmetics/arithmetics.tsx @@ -1,17 +1,15 @@ -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[]; @@ -19,7 +17,7 @@ interface PreviewProps { focusLine: (line: number) => void; } -let userConfig: UserConfig; +let userConfig: mew.UserConfig; class Preview extends React.Component { @@ -89,7 +87,7 @@ interface AppState { exampleIndex: number; } class App extends React.Component<{}, AppState> { - monacoEditor: React.RefObject; + monacoEditor: React.RefObject; preview: React.RefObject; constructor(props) { super(props); @@ -163,7 +161,7 @@ class App extends React.Component<{}, AppState> {
- 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; @@ -23,7 +21,7 @@ interface AppState { } class App extends React.Component<{}, AppState> { - monacoEditor: React.RefObject; + monacoEditor: React.RefObject; constructor(props) { super(props); @@ -119,7 +117,7 @@ class App extends React.Component<{}, AppState> { Editor
- 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 { canvasRef: React.RefObject; @@ -212,7 +210,7 @@ interface AppState { currentExample: number; } class App extends React.Component<{}, AppState> { - monacoEditor: React.RefObject; + monacoEditor: React.RefObject; preview: React.RefObject; copyHint: React.RefObject; shareButton: React.RefObject; @@ -318,7 +316,7 @@ class App extends React.Component<{}, AppState> {
- 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; + private monacoEditorLeft: React.RefObject; 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) { + onMonacoLoad(editor: React.RefObject) { // 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 (
- 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 { } class StateMachineComponent extends React.Component<{ - langiumConfig: UserConfig + langiumConfig: mew.UserConfig }> { - monacoEditor: React.RefObject; + monacoEditor: React.RefObject; preview: React.RefObject; constructor(props) { @@ -266,7 +264,7 @@ class StateMachineComponent extends React.Component<{ Editor
-