Skip to content

Commit

Permalink
Update to monaco-languageclient 8.4.0 and monaco-editor-wrapper 5.1.1 (…
Browse files Browse the repository at this point in the history 
…#3)

* Update to monaco-languageclient 8.4.0 and monaco-editor-wrapper 5.1.0

* locale loader is now exposed by monaco-editor-wrapper

* Update vscode user configuration properly

* Support disable/enable LSP again
  • Loading branch information
@kaisalmen
kaisalmen authored May 16, 2024
1 parent d2d9d07 commit 85d0abb
Show file tree
Hide file tree
Showing 8 changed files with 700 additions and 547 deletions.
8 changes: 8 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,14 @@
</div>
</div>
</div>
<script type="module">
// Use for example
// http://localhost:5173/?locale=zh-hans or
// http://localhost:5173/?locale=fr
// for a localised version
import { initLocalLoader } from 'monaco-editor-wrapper/vscode/locale';
initLocalLoader();
</script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
34 changes: 20 additions & 14 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,35 @@
"type": "module",
"scripts": {
"dev": "vite",
"dev:debug": "vite --debug --force",
"watch": "tsc -w",
"build": "tsc && vite build",
"preview": "vite preview"
},
"devDependencies": {
"@types/emscripten": "^1.39.10",
"@types/node": "^20.4.0",
"@types/vscode": "~1.85.0",
"typescript": "^5.2.2",
"vite": "^5.0.8"
"@types/node": "~20.12.12",
"@types/vscode": "~1.89.0",
"typescript": "^5.4.5",
"vite": "^5.2.11"
},
"dependencies": {
"@codingame/monaco-vscode-language-pack-zh-hans": "~1.85.6",
"@codingame/monaco-vscode-theme-defaults-default-extension": "~1.85.6",
"@codingame/esbuild-import-meta-url-plugin": "~1.0.2",
"@codingame/monaco-vscode-configuration-service-override": "~5.1.1",
"@codingame/monaco-vscode-cpp-default-extension": "~5.1.1",
"@codingame/monaco-vscode-textmate-service-override": "~5.1.1",
"@codingame/monaco-vscode-theme-service-override": "~5.1.1",
"ansi_up": "^6.0.2",
"iframe-resizer": "^4.3.9",
"monaco-editor": "npm:@codingame/monaco-editor-treemended@>=1.85.0 <1.86.0",
"monaco-languageclient": ">= 7.3.0 < 7.4.0",
"vscode": "npm:@codingame/monaco-vscode-api@>=1.85.0 <1.86.0",
"monaco-editor": "npm:@codingame/monaco-vscode-editor-api@~5.1.1",
"monaco-editor-wrapper": "~5.1.1",
"monaco-languageclient": "~8.4.0",
"vscode": "npm:@codingame/monaco-vscode-api@~5.1.1",
"vscode-languageserver": "~9.0.1"
},
"overrides": {
"monaco-editor": "$monaco-editor",
"vscode": "$vscode"
},
"packageManager": "pnpm@9.1.0"
"packageManager": "pnpm@9.1.1",
"volta": {
"node": "20.13.1",
"pnpm": "9.1.1"
}
}
813 changes: 524 additions & 289 deletions pnpm-lock.yaml
View file

Large diffs are not rendered by default.

81 changes: 0 additions & 81 deletions src/client.ts
View file

This file was deleted.

165 changes: 128 additions & 37 deletions src/editor.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
// import "@codingame/monaco-vscode-language-pack-zh-hans";
import "monaco-editor/esm/vs/basic-languages/cpp/cpp.contribution";
import { createConfiguredEditor } from "vscode/monaco";
import { editor } from "monaco-editor";
import { initServices } from "monaco-languageclient";

import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
import getConfigurationServiceOverride, { getUserConfiguration } from "@codingame/monaco-vscode-configuration-service-override";
import getTextmateServiceOverride from "@codingame/monaco-vscode-textmate-service-override";
import getThemeServiceOverride from "@codingame/monaco-vscode-theme-service-override";
// this is required syntax highlighting
import "@codingame/monaco-vscode-cpp-default-extension";
import { Uri } from "vscode";

import { LIGHT_THEME, DARK_THEME, createTheme } from "./theme";
import { BrowserMessageReader, BrowserMessageWriter } from "vscode-languageclient/browser";
import { LanguageClientConfig, MonacoEditorLanguageClientWrapper, UserConfig } from "monaco-editor-wrapper";
import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
import { setClangdStatus } from "./ui";
import {
FILE_PATH,
LANGUAGE_ID,
Expand All @@ -18,48 +18,139 @@ import {
const self = globalThis as any;
self.MonacoEnvironment = { getWorker: () => new EditorWorker() };

export async function createEditor(element: HTMLElement, code: string) {
await initServices({
workspaceConfig: {
workspaceProvider: {
trusted: true,
workspace: {
workspaceUri: Uri.file(WORKSPACE_PATH),
let clientRunning = false;
let retry = 0;
let succeeded = false;
const wrapper = new MonacoEditorLanguageClientWrapper();

export const createUserConfig = async (code: string, serverWorker: Worker, enableLsp: boolean): Promise<UserConfig> => {
let languageClientConfig: LanguageClientConfig | undefined;
if (enableLsp) {
const recreateLsp = async () => {
console.log("reloading lsp...");
wrapper.getLanguageClientWrapper()?.restartLanguageClient(serverWorker, false);
};

const restart = async () => {
if (clientRunning) {
try {
clientRunning = false;
setClangdStatus("indeterminate");
readerOnError.dispose();
readerOnClose.dispose();
wrapper.getLanguageClientWrapper()?.restartLanguageClient(serverWorker, false);
} finally {
retry++;
if (retry > 5 && !succeeded) {
setClangdStatus("disabled");
console.error("Failed to start clangd after 5 retries");
return;
}
setTimeout(recreateLsp, 1000);
}
}
};

const reader = new BrowserMessageReader(serverWorker);
const writer = new BrowserMessageWriter(serverWorker);
const readerOnError = reader.onError(() => restart);
const readerOnClose = reader.onClose(() => restart);
const successCallback = reader.listen(() => {
succeeded = true;
setClangdStatus("ready");
successCallback.dispose();
});

languageClientConfig = {
languageId: LANGUAGE_ID,
name: 'Clangd WASM Language Server',
options: {
$type: 'WorkerDirect',
worker: serverWorker
},
clientOptions: {
documentSelector: [LANGUAGE_ID],
workspaceFolder: {
index: 0,
name: 'workspace',
uri: Uri.file(WORKSPACE_PATH),
},
},
connectionProvider: {
get: async () => ({ reader, writer }),
}
};
}

return {
languageClientConfig,
wrapperConfig: {
serviceConfig: {
workspaceConfig: {
workspaceProvider: {
trusted: true,
workspace: {
workspaceUri: Uri.file(WORKSPACE_PATH),
},
async open() {
return false;
}
}
},
async open() {
return false;
userServices: {
...getConfigurationServiceOverride(),
...getTextmateServiceOverride(),
...getThemeServiceOverride()
},
debugLogging: true
},
editorAppConfig: {
$type: 'extended',
codeResources: {
main: {
text: code,
uri: FILE_PATH
}
},
userConfiguration: {
json: JSON.stringify({
'workbench.colorTheme': getCurrentTheme(),
'editor.wordBasedSuggestions': 'off',
'editor.inlayHints.enabled': 'offUnlessPressed',
'editor.quickSuggestionsDelay': 200
})
},
useDiffEditor: false
}
},
});

createTheme("light", LIGHT_THEME);
createTheme("dark", DARK_THEME);
loggerConfig: {
enabled: true,
debugEnabled: true
}
};
};

const modelUrl = Uri.parse(FILE_PATH);

const isDark = document.body.classList.contains("dark");
export async function createEditor(element: HTMLElement, userConfig: UserConfig) {

element.innerHTML = "";
const editorInstance = createConfiguredEditor(element, {
model: editor.createModel(code, LANGUAGE_ID, modelUrl),
theme: isDark ? "dark" : "light",
quickSuggestionsDelay: 200,
automaticLayout: true,
inlayHints: {
enabled: "offUnlessPressed",
},
});
await wrapper.initAndStart(userConfig, element!);
const editorInstance = wrapper.getEditor()!;

setEditorValueSource(
() => editorInstance.getValue(),
(value) => editorInstance.setValue(value)
);
return editorInstance;
}

function toggleEditorTheme() {
const isDark = document.body.classList.contains("dark");
editor.setTheme(isDark ? "dark" : "light");
function getCurrentTheme() {
return document.body.classList.contains("dark") ? 'Default Dark Modern' : 'Default Light Modern';
}

async function toggleEditorTheme() {
const vscodeUserConfiguration = JSON.parse(await getUserConfiguration()) as Record<string, string>;
vscodeUserConfiguration['workbench.colorTheme'] = getCurrentTheme();
wrapper.getMonacoEditorApp()?.updateUserConfiguration(JSON.stringify(vscodeUserConfiguration));
}
document
.querySelector("#toggleTheme")!
Expand Down
31 changes: 15 additions & 16 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import "./style.css";
import { compileAndRun, setClangdStatus, toggleBuildPanel } from "./ui";
import { ExtendedSearchParams } from "./search_params";
import { createEditor, createUserConfig } from "./editor";

if (!globalThis.crossOriginIsolated) {
document.body.innerHTML =
Expand Down Expand Up @@ -54,22 +55,20 @@ if (showBuildPanel) {
toggleBuildPanel();
}

const disableLsp = params.isExplicitFalse("lsp");
let serverPromise: Promise<Worker>;
if (disableLsp) {
setClangdStatus("disabled");
serverPromise = new Promise<never>(() => {});
} else {
serverPromise = import("./server").then(({ createServer }) => {
const enableLsp = !params.isExplicitFalse("lsp");
let serverWorker: Worker;
if (enableLsp) {
serverWorker = await import("./server").then(({ createServer }) => {
return createServer();
});
} else {
setClangdStatus("disabled");
serverWorker = await new Promise<never>(() => {});
}
import("./client").then(async ({ createEditor, createClient }) => {
await createEditor(document.getElementById("editor")!, code);
if (!disableLsp) {
await createClient(await serverPromise);
}
if (runCodeNow) {
compileAndRun();
}
});

const userConfig = await createUserConfig(code, serverWorker, enableLsp);
await createEditor(document.getElementById("editor")!, userConfig);
if (runCodeNow) {
compileAndRun();
}

Loading

0 comments on commit 85d0abb

Please sign in to comment.