Skip to content

Commit 7ec0e89

Browse files
IoannisNezisIoannisNezis
committed
update to monaco-languageclient v10
1 parent 04ed362 commit 7ec0e89

14 files changed

Lines changed: 1395 additions & 1500 deletions

File tree

‎backend/templates/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,7 +266,7 @@ <h2> Loading Editor... </h2>
266266
</div>
267267
</div>
268268
<div style="padding: 0px 19px 19px 19px;">
269-
<div id="editor" style="display: none;"></div>
269+
<div id="monaco-editor-root" style="display: none;"></div>
270270
</div>
271271
<div id="statusBar" style="padding-left: 20px"></div>
272272
<div class="col-lg-9 col-xs-12">

‎package-lock.json‎

Lines changed: 1199 additions & 1355 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"author": "Ioannis Nezis<ioannis@nezis.de",
55
"type": "module",
66
"scripts": {
7-
"build": "vite build",
7+
"build": "NODE_OPTIONS='--max-old-space-size=8192' vite build",
88
"dev": "vite build --watch"
99
},
1010
"keywords": [],
@@ -17,9 +17,10 @@
1717
"yaml": "^2.8.0"
1818
},
1919
"dependencies": {
20-
"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@17.1.2",
21-
"monaco-editor-wrapper": "~6.8.0",
20+
"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@21.3.4",
21+
"monaco-languageclient": "^10.1.0",
2222
"monaco-vim": "^0.4.2",
23-
"qlue-ls": "0.16.0"
23+
"qlue-ls": "0.16.0",
24+
"vscode": "npm:@codingame/monaco-vscode-extension-api@21.3.4"
2425
}
2526
}

‎qlever_ui/backend/backends.ts‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@
44
// │ Licensed under the MIT license. │ \\
55
// └─────────────────────────────────┘ \\
66

7-
import { MonacoEditorLanguageClientWrapper } from "monaco-editor-wrapper/.";
87
import { BackendConfig } from "../types/backend";
98
import yaml from 'yaml';
9+
import { EditorAndLanguageClient } from "../types/monaco";
10+
import { MonacoLanguageClient } from "monaco-languageclient";
1011

11-
export async function configure_backends(wrapper: MonacoEditorLanguageClientWrapper) {
12+
export async function configure_backends(editorAndLanguageClient: EditorAndLanguageClient) {
1213
const slug = window.location.pathname.substr(1).split("/")[0];
1314

1415
const backends = await fetch("/api/backends/")
@@ -21,7 +22,7 @@ export async function configure_backends(wrapper: MonacoEditorLanguageClientWrap
2122
console.error("An error occured while fetching backends\n", err);
2223
});
2324

24-
configureBackendsSelector(wrapper, backends, slug);
25+
configureBackendsSelector(backends, slug);
2526

2627

2728
backends.forEach(async (backend) => {
@@ -32,7 +33,7 @@ export async function configure_backends(wrapper: MonacoEditorLanguageClientWrap
3233
name: json.name,
3334
slug: json.slug,
3435
url: json.baseUrl,
35-
}
36+
};
3637
const prefixMap = json["prefix_map"];
3738
const queries = {
3839
subjectCompletion: json["suggestSubjectsContextInsensitive"],
@@ -48,22 +49,21 @@ export async function configure_backends(wrapper: MonacoEditorLanguageClientWrap
4849
default: backend.slug === slug
4950
}
5051
});
51-
addBackend(wrapper, config);
52+
addBackend(editorAndLanguageClient.languageClient, config);
5253
});
5354

5455
}
5556

56-
function addBackend(wrapper: MonacoEditorLanguageClientWrapper, conf: BackendConfig) {
57-
wrapper
58-
.getLanguageClient('sparql')!
57+
function addBackend(languageClient: MonacoLanguageClient, conf: BackendConfig) {
58+
languageClient
5959
.sendRequest('qlueLs/addBackend', conf)
6060
.catch((err) => {
6161
console.error(err);
6262
});
6363
}
6464

6565

66-
export function configureBackendsSelector(wrapper: MonacoEditorLanguageClientWrapper, backendConfigurations, slug) {
66+
export function configureBackendsSelector(backendConfigurations, slug) {
6767
const backendsSelectionList = document.getElementById("backendSelectionList")!;
6868
const backendsSelectionListButton = document.getElementById("backendDisplay")!;
6969
backendConfigurations.forEach((backend) => {

‎qlever_ui/buttons.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,25 @@
1-
import { MonacoEditorLanguageClientWrapper } from "monaco-editor-wrapper/.";
21
import { executeQuery } from "./network/execute";
2+
import { EditorAndLanguageClient } from './types/monaco';
33

4-
export function setup_buttons(wrapper: MonacoEditorLanguageClientWrapper) {
4+
export function setup_buttons(editorAndLanguageClient: EditorAndLanguageClient) {
55
// NOTE: Format button
66
document.getElementById("formatButton")!
77
.addEventListener("click", () => {
8-
wrapper.getEditor()!.trigger("button", "editor.action.formatDocument", {});
8+
editorAndLanguageClient.editorApp.getEditor()!.trigger("button", "editor.action.formatDocument", {});
99
});
1010

1111
// NOTE: Query Examples
1212
document.querySelectorAll(".queryExample")!
1313
.forEach(element => {
1414
element.addEventListener("click", () => {
15-
wrapper.getEditor()!.setValue(element.getAttribute("value")!)
16-
wrapper.getEditor()!.focus();
15+
editorAndLanguageClient.editorApp.getEditor()!.setValue(element.getAttribute("value")!)
16+
editorAndLanguageClient.editorApp.getEditor()!.focus();
1717
});
1818
});
1919

2020
// NOTE: Execute button
2121
document.getElementById("exebtn")!
2222
.addEventListener("click", () => {
23-
executeQuery(wrapper)
23+
executeQuery(editorAndLanguageClient.editorApp, editorAndLanguageClient.languageClient);
2424
});
2525
}

‎qlever_ui/main.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@ import { init } from "./monaco_editor/editor.ts"
88
import { setup_buttons } from "./buttons.ts";
99
import { configure_backends } from "./backend/backends.ts";
1010

11-
init("editor").then((wrapper) => {
12-
setup_buttons(wrapper);
13-
configure_backends(wrapper);
11+
init("monaco-editor-root").then((editorAndLanguageClient) => {
12+
setup_buttons(editorAndLanguageClient);
13+
configure_backends(editorAndLanguageClient);
1414
}).catch((err) => {
1515
console.error("Monaco-editor initialization failed:\n", err);
1616
})

‎qlever_ui/monaco_editor/commands.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
// └─────────────────────────────────┘ \\
66

77
import * as monaco from 'monaco-editor';
8-
import { MonacoEditorLanguageClientWrapper } from 'monaco-editor-wrapper/.';
8+
import { EditorApp } from 'monaco-languageclient/editorApp';
99

10-
export function setup_commands(wrapper: MonacoEditorLanguageClientWrapper) {
10+
export function setup_commands(editorApp: EditorApp) {
1111
monaco.editor.addCommand({
1212
id: 'triggerNewCompletion',
1313
run: () => {
14-
wrapper.getEditor()!.trigger('editor', 'editor.action.triggerSuggest', {});
14+
editorApp.getEditor()!.trigger('editor', 'editor.action.triggerSuggest', {});
1515
}
1616
});
1717
}

‎qlever_ui/monaco_editor/config/config.ts‎

Lines changed: 99 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,23 @@
44
// │ Licensed under the MIT license. │ \\
55
// └─────────────────────────────────┘ \\
66

7-
import languageServerWorker from './languageServer.worker?worker';
7+
8+
// Import Monaco Language Client components
9+
import * as vscode from 'vscode';
810
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
9-
import { configureDefaultWorkerFactory } from 'monaco-editor-wrapper/workers/workerLoaders';
11+
import { configureDefaultWorkerFactory } from 'monaco-languageclient/workerFactory';
12+
import { type EditorAppConfig } from 'monaco-languageclient/editorApp';
13+
import { type MonacoVscodeApiConfig } from 'monaco-languageclient/vscodeApiWrapper';
14+
import { type LanguageClientConfig } from 'monaco-languageclient/lcwrapper';
15+
// Import language server
16+
import languageServerWorker from './languageServer.worker?worker';
17+
// Import SPARQL config
1018
import sparqlTextmateGrammar from './sparql.tmLanguage.json?raw';
1119
import sparqlLanguageConfig from './sparql.configuration.json?raw';
1220
import sparqlTheme from './sparql.theme.json?raw';
13-
import type { WrapperConfig } from 'monaco-editor-wrapper';
14-
import { LogLevel, Uri } from 'vscode';
1521

1622

17-
export async function buildWrapperConfig(container: HTMLElement, initial: string): Promise<WrapperConfig> {
23+
export async function buildWrapperConfig(container: HTMLElement, initial: string) {
1824
const workerPromise: Promise<Worker> = new Promise((resolve) => {
1925
const instance: Worker = new languageServerWorker({ name: 'Language Server' });
2026
instance.onmessage = (event) => {
@@ -30,92 +36,27 @@ export async function buildWrapperConfig(container: HTMLElement, initial: string
3036
extensionFilesOrContents.set('/sparql-grammar.json', sparqlTextmateGrammar);
3137
extensionFilesOrContents.set('/sparql-theme.json', sparqlTheme);
3238

33-
const wrapperConfig: WrapperConfig = {
39+
// Monaco VSCode API configuration
40+
const vscodeApiConfig: MonacoVscodeApiConfig = {
3441
$type: 'extended',
35-
htmlContainer: container,
36-
logLevel: LogLevel.Info,
37-
languageClientConfigs: {
38-
configs: {
39-
sparql: {
40-
name: "Qlue-ls",
41-
clientOptions: {
42-
documentSelector: [{ language: 'sparql' }],
43-
workspaceFolder: {
44-
index: 0,
45-
name: "workspace",
46-
uri: Uri.file("/"),
47-
},
48-
progressOnInitialization: true,
49-
diagnosticPullOptions: {
50-
onChange: true,
51-
onSave: false
52-
},
53-
},
54-
connection: {
55-
options: {
56-
$type: 'WorkerDirect',
57-
worker: worker
58-
}
59-
60-
}
61-
,
62-
restartOptions: {
63-
retries: 5,
64-
timeout: 1000,
65-
keepWorker: true
66-
}
67-
}
68-
}
69-
},
70-
editorAppConfig: {
71-
codeResources: {
72-
modified: {
73-
uri: 'query.rq',
74-
text: initial
75-
}
76-
},
77-
monacoWorkerFactory: configureDefaultWorkerFactory,
78-
editorOptions: {
79-
tabCompletion: "on",
80-
suggestOnTriggerCharacters: true,
81-
theme: 'vs',
82-
fontSize: 16,
83-
fontFamily: 'Source Code Pro',
84-
links: false,
85-
minimap: {
86-
enabled: false
87-
},
88-
overviewRulerLanes: 0,
89-
scrollBeyondLastLine: false,
90-
padding: {
91-
top: 8,
92-
bottom: 8
93-
},
94-
lineDecorationsWidth: 0,
95-
lineNumbersMinChars: 2,
96-
glyphMargin: true,
97-
contextmenu: false,
98-
folding: true,
99-
foldingImportsByDefault: true
100-
101-
}
42+
logLevel: vscode.LogLevel.Info,
43+
viewsConfig: {
44+
$type: 'EditorService'
10245
},
103-
vscodeApiConfig: {
104-
userConfiguration: {
105-
json: JSON.stringify({
106-
'workbench.colorTheme': 'QleverUiTheme',
107-
'editor.guides.bracketPairsHorizontal': 'active',
108-
'editor.lightbulb.enabled': 'On',
109-
'editor.wordBasedSuggestions': 'off',
110-
'editor.experimental.asyncTokenization': true,
111-
'editor.tabSize': 2,
112-
'editor.insertSpaces': true,
113-
'editor.detectIndentation': false,
114-
'files.eol': '\n'
115-
})
116-
},
46+
userConfiguration: {
47+
json: JSON.stringify({
48+
'workbench.colorTheme': 'QleverUiTheme',
49+
'editor.guides.bracketPairsHorizontal': 'active',
50+
'editor.lightbulb.enabled': 'On',
51+
'editor.wordBasedSuggestions': 'off',
52+
'editor.experimental.asyncTokenization': true,
53+
'editor.tabSize': 2,
54+
'editor.insertSpaces': true,
55+
'editor.detectIndentation': false,
56+
'files.eol': '\n'
57+
})
11758
},
118-
59+
monacoWorkerFactory: configureDefaultWorkerFactory,
11960
extensions: [{
12061
config: {
12162
name: 'langium-sparql',
@@ -149,6 +90,75 @@ export async function buildWrapperConfig(container: HTMLElement, initial: string
14990
filesOrContents: extensionFilesOrContents
15091
}]
15192
};
152-
return wrapperConfig;
93+
94+
// Language client configuration
95+
const languageClientConfig: LanguageClientConfig = {
96+
languageId: "sparql",
97+
clientOptions: {
98+
documentSelector: [{ language: 'sparql' }],
99+
workspaceFolder: {
100+
index: 0,
101+
name: "workspace",
102+
uri: vscode.Uri.file("/"),
103+
},
104+
progressOnInitialization: true,
105+
diagnosticPullOptions: {
106+
onChange: true,
107+
onSave: false
108+
},
109+
},
110+
connection: {
111+
options: {
112+
$type: 'WorkerDirect',
113+
worker: worker
114+
}
115+
},
116+
restartOptions: {
117+
retries: 5,
118+
timeout: 1000,
119+
keepWorker: true
120+
}
121+
};
122+
123+
// editor app / monaco-editor configuration
124+
const editorAppConfig: EditorAppConfig = {
125+
codeResources: {
126+
modified: {
127+
uri: 'query.rq',
128+
text: initial
129+
}
130+
},
131+
logLevel: vscode.LogLevel.Info,
132+
editorOptions: {
133+
tabCompletion: "on",
134+
suggestOnTriggerCharacters: true,
135+
theme: 'vs',
136+
fontSize: 16,
137+
fontFamily: 'Source Code Pro',
138+
links: false,
139+
minimap: {
140+
enabled: false
141+
},
142+
overviewRulerLanes: 0,
143+
scrollBeyondLastLine: false,
144+
padding: {
145+
top: 8,
146+
bottom: 8
147+
},
148+
lineDecorationsWidth: 0,
149+
lineNumbersMinChars: 2,
150+
glyphMargin: true,
151+
contextmenu: false,
152+
folding: true,
153+
foldingImportsByDefault: true
154+
155+
}
156+
};
157+
158+
return {
159+
vscodeApiConfig: vscodeApiConfig,
160+
languageClientConfig: languageClientConfig,
161+
editorAppConfig: editorAppConfig
162+
};
153163
}
154164

0 commit comments

Comments
 (0)