Skip to content

Commit 5f7fd6d

Browse files
kaisalmenkaisalmen
committed
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
1 parent cf9f6d0 commit 5f7fd6d

File tree

17 files changed

+1972
-2993
lines changed

17 files changed

+1972
-2993
lines changed

‎core/package.json

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "langium-website-core",
3-
"version": "1.0.0",
3+
"version": "2.0.0",
44
"type": "module",
55
"description": "Bundling complex sources for hugo",
66
"author": "TypeFox",
@@ -42,26 +42,25 @@
4242
"build": "npm run clean && npm run compile && npm run build:bundle"
4343
},
4444
"devDependencies": {
45-
"@types/react": "~18.2.28",
46-
"@types/react-dom": "~18.2.13",
47-
"@types/vscode": "~1.83.0",
48-
"typescript": "~5.2.2",
49-
"vite": "^4.5.2"
45+
"@types/react": "~18.2.71",
46+
"@types/react-dom": "~18.2.22",
47+
"@types/vscode": "~1.87.0",
48+
"typescript": "~5.4.3",
49+
"vite": "~5.2.6"
5050
},
5151
"dependencies": {
52-
"@codingame/monaco-vscode-keybindings-service-override": "~1.83.2",
53-
"@typefox/monaco-editor-react": "2.3.0",
54-
"monaco-editor": "~0.44.0",
55-
"monaco-editor-workers": "~0.44.0",
56-
"monaco-editor-wrapper": "~3.3.0",
57-
"monaco-languageclient": "~6.6.0",
52+
"@codingame/monaco-vscode-keybindings-service-override": "~3.2.3",
53+
"@typefox/monaco-editor-react": "~3.0.1",
54+
"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~3.2.3",
55+
"monaco-editor-wrapper": "~4.0.1",
56+
"monaco-languageclient": "~8.1.0",
5857
"react": "~18.2.0",
5958
"react-dom": "~18.2.0",
60-
"vscode": "npm:@codingame/monaco-vscode-api@>=1.83.2 <1.84.0",
61-
"vscode-languageserver": "~8.0.2"
59+
"vscode": "npm:@codingame/monaco-vscode-api@~3.2.3",
60+
"vscode-languageserver": "~9.0.1"
6261
},
6362
"volta": {
64-
"node": "18.18.1",
65-
"npm": "9.9.0"
63+
"node": "18.19.1",
64+
"npm": "10.2.4"
6665
}
6766
}

‎core/src/index.ts

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
1-
import * as monaco from "monaco-editor";
2-
import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
3-
import type { MonacoEditorProps } from "@typefox/monaco-editor-react";
4-
import { MonacoEditorReactComp } from "@typefox/monaco-editor-react";
5-
import { addMonacoStyles } from 'monaco-editor-wrapper/styles';
6-
7-
export * from "monaco-editor-wrapper";
8-
export type * from "monaco-editor-wrapper";
9-
export * from "./monaco-editor-wrapper-utils.js";
1+
import * as monaco from 'monaco-editor';
2+
import * as mew from 'monaco-editor-wrapper';
3+
import type * as mewTypes from 'monaco-editor-wrapper';
4+
import * as mer from '@typefox/monaco-editor-react';
5+
import type * as merTypes from '@typefox/monaco-editor-react';
6+
export * from './monaco-editor-wrapper-utils.js';
7+
export { useWorkerFactory } from 'monaco-editor-wrapper/workerFactory';
108

119
export {
1210
monaco,
13-
MonacoEditorProps,
14-
MonacoEditorReactComp,
15-
addMonacoStyles,
16-
getKeybindingsServiceOverride
11+
mew,
12+
mewTypes,
13+
mer,
14+
merTypes
1715
}

‎core/src/monaco-editor-wrapper-utils.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { languages } from "monaco-editor";
1+
import { languages } from 'monaco-editor';
22
import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
3-
import { EditorAppConfigClassic, EditorAppConfigExtended, LanguageClientConfig, UserConfig } from "monaco-editor-wrapper";
3+
import { EditorAppConfigClassic, EditorAppConfigExtended, LanguageClientConfig, UserConfig } from 'monaco-editor-wrapper';
44

55
export type WorkerUrl = string;
66

‎core/vite.bundle.ts

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,19 @@ const config = defineConfig({
1010
formats: ['es']
1111
},
1212
outDir: resolve(__dirname, 'bundle/monaco-editor-wrapper-bundle'),
13-
assetsDir: resolve(__dirname, 'bundle/monaco-editor-wrapper-bundle/assets'),
1413
emptyOutDir: true,
1514
cssCodeSplit: false,
15+
sourcemap: true,
1616
commonjsOptions: {
1717
strictRequires: true
1818
},
1919
rollupOptions: {
2020
output: {
2121
name: 'monaco-editor-wrapper-bundle',
2222
exports: 'named',
23-
sourcemap: false,
24-
assetFileNames: (assetInfo) => {
25-
return `assets/${assetInfo.name}`;
26-
}
23+
sourcemap: false
2724
}
2825
}
29-
},
30-
resolve: {
31-
dedupe: ['monaco-editor', 'vscode']
3226
}
3327
});
3428

‎hugo/assets/scripts/arithmetics/arithmetics.tsx

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,23 @@
1-
import { addMonacoStyles, createUserConfig, MonacoEditorReactComp, UserConfig } from "langium-website-core/bundle";
2-
import { buildWorkerDefinition } from "monaco-editor-workers";
1+
import { createUserConfig, mew, mer, useWorkerFactory } from "langium-website-core/bundle";
32
import React from "react";
43
import { createRoot } from "react-dom/client";
54
import { Evaluation, examples, syntaxHighlighting } from "./arithmetics-tools";
65
import { Diagnostic, DocumentChangeResponse } from "langium-ast-helper";
76

8-
addMonacoStyles('monaco-styles-helper');
9-
10-
buildWorkerDefinition(
11-
"../../libs/monaco-editor-workers/workers",
12-
new URL("", window.location.href).href,
13-
false
14-
);
7+
useWorkerFactory({
8+
ignoreMapping: true,
9+
workerLoaders: {
10+
editorWorkerService: () => new Worker(new URL('../../libs/workers/editorWorker-es.js', window.location.href).href, { type: 'module' })
11+
}
12+
});
1513

1614
interface PreviewProps {
1715
evaluations?: Evaluation[];
1816
diagnostics?: Diagnostic[];
1917
focusLine: (line: number) => void;
2018
}
2119

22-
let userConfig: UserConfig;
20+
let userConfig: mew.UserConfig;
2321

2422

2523
class Preview extends React.Component<PreviewProps, PreviewProps> {
@@ -89,7 +87,7 @@ interface AppState {
8987
exampleIndex: number;
9088
}
9189
class App extends React.Component<{}, AppState> {
92-
monacoEditor: React.RefObject<MonacoEditorReactComp>;
90+
monacoEditor: React.RefObject<mer.MonacoEditorReactComp>;
9391
preview: React.RefObject<Preview>;
9492
constructor(props) {
9593
super(props);
@@ -163,7 +161,7 @@ class App extends React.Component<{}, AppState> {
163161
</select>
164162
</div>
165163
<div className="wrapper relative bg-white dark:bg-gray-900 border border-emeraldLangium h-full w-full">
166-
<MonacoEditorReactComp
164+
<mer.MonacoEditorReactComp
167165
ref={this.monacoEditor}
168166
onLoad={this.onMonacoLoad}
169167
userConfig={userConfig}

‎hugo/assets/scripts/domainmodel/domainmodel.tsx

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,27 @@
1-
import { addMonacoStyles, createUserConfig, MonacoEditorReactComp, UserConfig } from "langium-website-core/bundle";
2-
import { buildWorkerDefinition } from "monaco-editor-workers";
1+
import { createUserConfig, mew, mer, useWorkerFactory } from "langium-website-core/bundle";
32
import React from "react";
43
import { createRoot } from "react-dom/client";
54
import { DomainModelAstNode, example, getMainTreeNode, syntaxHighlighting } from "./domainmodel-tools";
65
import { deserializeAST, Diagnostic, DocumentChangeResponse } from 'langium-ast-helper';
76

87
import D3Tree from "./d3tree";
98

10-
addMonacoStyles('monaco-styles-helper');
11-
12-
buildWorkerDefinition(
13-
"../../libs/monaco-editor-workers/workers",
14-
new URL("", window.location.href).href,
15-
false
16-
);
9+
useWorkerFactory({
10+
ignoreMapping: true,
11+
workerLoaders: {
12+
editorWorkerService: () => new Worker(new URL('../../libs/workers/editorWorker-es.js', window.location.href).href, { type: 'module' })
13+
}
14+
});
1715

18-
let userConfig: UserConfig;
16+
let userConfig: mew.UserConfig;
1917

2018
interface AppState {
2119
ast?: DomainModelAstNode;
2220
diagnostics?: Diagnostic[];
2321
}
2422

2523
class App extends React.Component<{}, AppState> {
26-
monacoEditor: React.RefObject<MonacoEditorReactComp>;
24+
monacoEditor: React.RefObject<mer.MonacoEditorReactComp>;
2725
constructor(props) {
2826
super(props);
2927

@@ -119,7 +117,7 @@ class App extends React.Component<{}, AppState> {
119117
Editor
120118
</div>
121119
<div className="wrapper relative bg-white dark:bg-gray-900 border border-emeraldLangium h-[50vh] min-h-[300px]">
122-
<MonacoEditorReactComp
120+
<mer.MonacoEditorReactComp
123121
ref={this.monacoEditor}
124122
onLoad={this.onMonacoLoad}
125123
userConfig={userConfig}

‎hugo/assets/scripts/minilogo/minilogo.tsx

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
1-
import { addMonacoStyles, createUserConfig, MonacoEditorReactComp, UserConfig } from "langium-website-core/bundle";
2-
import { buildWorkerDefinition } from "monaco-editor-workers";
1+
import { createUserConfig, mew, mer, useWorkerFactory } from "langium-website-core/bundle";
32
import React, { createRef } from "react";
43
import { createRoot } from "react-dom/client";
54
import { Diagnostic, DocumentChangeResponse } from "langium-ast-helper";
65
import { ColorArgs, Command, MoveArgs, examples, syntaxHighlighting } from "./minilogo-tools";
76
import { compressToEncodedURIComponent, decompressFromEncodedURIComponent } from "lz-string";
87

9-
addMonacoStyles('monaco-styles-helper');
10-
11-
buildWorkerDefinition(
12-
"../../libs/monaco-editor-workers/workers",
13-
new URL("", window.location.href).href,
14-
false
15-
);
8+
useWorkerFactory({
9+
ignoreMapping: true,
10+
workerLoaders: {
11+
editorWorkerService: () => new Worker(new URL('../../libs/workers/editorWorker-es.js', window.location.href).href, { type: 'module' })
12+
}
13+
});
1614

1715
let shouldAnimate = true;
1816

@@ -25,7 +23,7 @@ interface DrawCanvasProps {
2523
commands: Command[];
2624
}
2725

28-
let userConfig: UserConfig;
26+
let userConfig: mew.UserConfig;
2927

3028
class DrawCanvas extends React.Component<DrawCanvasProps, DrawCanvasProps> {
3129
canvasRef: React.RefObject<HTMLCanvasElement>;
@@ -212,7 +210,7 @@ interface AppState {
212210
currentExample: number;
213211
}
214212
class App extends React.Component<{}, AppState> {
215-
monacoEditor: React.RefObject<MonacoEditorReactComp>;
213+
monacoEditor: React.RefObject<mer.MonacoEditorReactComp>;
216214
preview: React.RefObject<Preview>;
217215
copyHint: React.RefObject<HTMLDivElement>;
218216
shareButton: React.RefObject<HTMLImageElement>;
@@ -318,7 +316,7 @@ class App extends React.Component<{}, AppState> {
318316
</div>
319317
</div>
320318
<div className="wrapper relative bg-white dark:bg-gray-900 border border-emeraldLangium h-full w-full">
321-
<MonacoEditorReactComp
319+
<mer.MonacoEditorReactComp
322320
ref={this.monacoEditor}
323321
onLoad={this.onMonacoLoad}
324322
userConfig={userConfig}

‎hugo/assets/scripts/sql/ui.tsx

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { addMonacoStyles, createUserConfig, MonacoEditorReactComp, UserConfig } from "langium-website-core/bundle";
2-
import { buildWorkerDefinition } from "monaco-editor-workers";
1+
import { createUserConfig, mew, mer, useWorkerFactory } from "langium-website-core/bundle";
32
import React from "react";
43
import { createRoot } from "react-dom/client";
54
import {
@@ -8,18 +7,17 @@ import {
87
import textMateGrammar from './sql.tmLanguage.json';
98
import { DocumentChangeResponse } from "langium-ast-helper";
109

11-
addMonacoStyles('monaco-styles-helper');
12-
13-
buildWorkerDefinition(
14-
"../../libs/monaco-editor-workers/workers",
15-
new URL("", window.location.href).href,
16-
false
17-
);
10+
useWorkerFactory({
11+
ignoreMapping: true,
12+
workerLoaders: {
13+
editorWorkerService: () => new Worker(new URL('../../libs/workers/editorWorker-es.js', window.location.href).href, { type: 'module' })
14+
}
15+
});
1816

19-
let userConfig: UserConfig;
17+
let userConfig: mew.UserConfig;
2018

2119
class App extends React.Component<{}> {
22-
private monacoEditorLeft: React.RefObject<MonacoEditorReactComp>;
20+
private monacoEditorLeft: React.RefObject<mer.MonacoEditorReactComp>;
2321
constructor(props) {
2422
super(props);
2523

@@ -35,7 +33,7 @@ class App extends React.Component<{}> {
3533
*
3634
* @throws Error on inability to ref the Monaco component or to get the language client
3735
*/
38-
onMonacoLoad(editor: React.RefObject<MonacoEditorReactComp>) {
36+
onMonacoLoad(editor: React.RefObject<mer.MonacoEditorReactComp>) {
3937
// verify we can get a ref to the editor
4038
if (!editor.current) {
4139
throw new Error("Unable to get a reference to the Monaco Editor");
@@ -72,7 +70,7 @@ class App extends React.Component<{}> {
7270
};
7371
return (
7472
<div className="w-full justify-center flex flex-col items-center">
75-
<MonacoEditorReactComp
73+
<mer.MonacoEditorReactComp
7674
userConfig={userConfig}
7775
className="w-1/2 border border-emeraldLangium h-[50vh] min-h-[300px]"
7876
ref={this.monacoEditorLeft}

‎hugo/assets/scripts/statemachine/statemachine.tsx

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,16 @@
1-
import { addMonacoStyles, createUserConfig, MonacoEditorReactComp, UserConfig } from "langium-website-core/bundle";
2-
import { buildWorkerDefinition } from "monaco-editor-workers";
1+
import { createUserConfig, mew, mer, useWorkerFactory } from "langium-website-core/bundle";
32
import React from "react";
43
import { createRoot } from "react-dom/client";
54
import { defaultText, StateMachineAstNode, StateMachineState, StateMachineTools } from "./statemachine-tools";
65
import statemachineGrammar from 'langium-statemachine-dsl/syntaxes/statemachine.tmLanguage.json';
76
import { deserializeAST, Diagnostic, DocumentChangeResponse } from "langium-ast-helper";
87

9-
addMonacoStyles('monaco-styles-helper');
10-
11-
buildWorkerDefinition(
12-
"../../libs/monaco-editor-workers/workers",
13-
new URL("", window.location.href).href,
14-
false
15-
);
8+
useWorkerFactory({
9+
ignoreMapping: true,
10+
workerLoaders: {
11+
editorWorkerService: () => new Worker(new URL('../../libs/workers/editorWorker-es.js', window.location.href).href, { type: 'module' })
12+
}
13+
});
1614

1715
interface StateProps {
1816
name: string;
@@ -203,9 +201,9 @@ class Preview extends React.Component<PreviewProps, PreviewProps> {
203201
}
204202

205203
class StateMachineComponent extends React.Component<{
206-
langiumConfig: UserConfig
204+
langiumConfig: mew.UserConfig
207205
}> {
208-
monacoEditor: React.RefObject<MonacoEditorReactComp>;
206+
monacoEditor: React.RefObject<mer.MonacoEditorReactComp>;
209207
preview: React.RefObject<Preview>;
210208

211209
constructor(props) {
@@ -266,7 +264,7 @@ class StateMachineComponent extends React.Component<{
266264
Editor
267265
</div>
268266
<div className="wrapper relative bg-white dark:bg-gray-900 border border-emeraldLangium h-full w-full">
269-
<MonacoEditorReactComp
267+
<mer.MonacoEditorReactComp
270268
userConfig={this.props.langiumConfig}
271269
ref={this.monacoEditor}
272270
onLoad={this.onMonacoLoad}
@@ -288,7 +286,7 @@ class StateMachineComponent extends React.Component<{
288286
}
289287

290288
// setup config & render
291-
const langiumGlobalConfig: UserConfig = createUserConfig({
289+
const langiumGlobalConfig: mew.UserConfig = createUserConfig({
292290
languageId: 'statemachine',
293291
code: defaultText,
294292
textmateGrammar: statemachineGrammar,

‎hugo/content/playground/_index.html

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,14 @@
1414
<link rel="preload" as="script" href="./libs/worker/langiumServerWorker.js"/>
1515
<link rel="preload" as="script" href="./libs/worker/userServerWorker.js"/>
1616
<script type="module">
17-
import { addMonacoStyles, setupPlayground, share, overlay, getPlaygroundState, MonacoEditorLanguageClientWrapper } from "./libs/worker/common.js";
18-
import { buildWorkerDefinition } from "../libs/monaco-editor-workers/index.js";
17+
import { setupPlayground, share, overlay, getPlaygroundState, mew, useWorkerFactory } from "./libs/worker/common.js";
1918

20-
addMonacoStyles('monaco-styles-helper');
21-
22-
buildWorkerDefinition(
23-
"../libs/monaco-editor-workers/workers",
24-
new URL("", window.location.href).href,
25-
false
26-
);
19+
useWorkerFactory({
20+
ignoreMapping: true,
21+
workerLoaders: {
22+
editorWorkerService: () => new Worker(new URL('../libs/workers/editorWorker-es.js', window.location.href).href, { type: 'module' })
23+
}
24+
});
2725

2826
// on doc load
2927
addEventListener('load', function() {

0 commit comments

Comments
 (0)