Minimal example with extension support

[julian-baumann]

I am trying to set up a minimal code editor with support for extensions, themes, and LSP. Despite being aware of #444, I’m still struggling to understand how to load a local VSCode extension from a vsix file and get it functioning.

I would greatly appreciate any help to get me started in the right direction :)

Here is a simplified example of what I've already come up with. I am trying to load the Swift extension and get LSP working. Especially with webpack.

import "vscode/localExtensionHost";

import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
import getExtensionServiceOverride, { WorkerConfig } from "@codingame/monaco-vscode-extensions-service-override";
import getLanguagesServiceOverride from "@codingame/monaco-vscode-languages-service-override";
import getModelServiceOverride from "@codingame/monaco-vscode-model-service-override";
import getTextmateServiceOverride from "@codingame/monaco-vscode-textmate-service-override";
import getThemeServiceOverride from "@codingame/monaco-vscode-theme-service-override";
import { editor } from "monaco-editor";
import { extensions } from "vscode";
import { initialize as initializeMonacoService} from "vscode/services";

export type WorkerLoader = () => Worker;

export const workerConfig: WorkerConfig = {
    url: new URL("vscode/workers/extensionHost.worker", import.meta.url).toString(),
    options: { type: "module" }
};
const value = `func test() -> String {
    print("Hello World")
    return "Test"
}`;

const workerLoaders: Partial<Record<string, WorkerLoader>> = {
    editorWorkerService: () => new Worker(new URL("monaco-editor/esm/vs/editor/editor.worker.js", import.meta.url), { type: "module" }),
    textMateWorker: () => new Worker(new URL("@codingame/monaco-vscode-textmate-service-override/worker", import.meta.url), { type: "module" })
};

window.MonacoEnvironment = {
    getWorker: function (moduleId, label): Worker {
        const workerFactory = workerLoaders[label];
        if (workerFactory != null) {
            return workerFactory();
        }
        throw new Error(`Unimplemented worker ${label} (${moduleId})`);
    }
};

await initializeMonacoService({
    ...getModelServiceOverride(),
    ...getExtensionServiceOverride(workerConfig),
    ...getThemeServiceOverride(),
    ...getLanguagesServiceOverride(),
    ...getTextmateServiceOverride()
});

// Not sure about this one. Doesn't work either
const extension = extensions.getExtension("sswg.swift-lang");
extension?.activate();

editor.create(this.editorRef?.nativeElement, {
    value: value,
    language: "swift"
});

[CGNonofr]

There is no web-compatible swift extension, so with the vsix loader, you may manage to get the declarative parts working (like syntax highlighting or snippets) but not the LSP part or anything requiring extension code to work.

A server will be required to run the LSP server, and there are multiple ways to connect to it from the client:

• Create your own channel to forward LSP messages from your client to your server, and synchronize files by hands
• Use the VSCode server, then extract the vsix file somewhere on the server, and use the registerRemoteExtension function from vscode/extensions

[julian-baumann]

Thank you very much for your response. I've now got the vscode-server up and running and installed the swift vsix extension via ./bin/code-server --install-extension <path>. It is successfully installed and shows up under ./bin/code-server --list-extensions. But it doesn't quite work yet with my client... I have enabled scanRemoteExtensions, but the extension does not show up in vscode.extensions.all.

You also mentioned the registerRemoteExtension method, which takes a directory path as argument. What path should I provide here?

I've started the server with the following argumens: ./bin/code-server --port 8080 --without-connection-token --accept-server-license-terms --host 0.0.0.0, which gives me a successfull response, telling me that the extensions host is running

*
* Visual Studio Code Server
*
* By using the software, you agree to
* the Visual Studio Code Server License Terms (https://aka.ms/vscode-server-license) and
* the Microsoft Privacy Statement (https://privacy.microsoft.com/en-US/privacystatement).
*
Server bound to 0.0.0.0:8080 (IPv4)
Extension host agent listening on 8080

[22:47:21] 

[22:47:21] Extension host agent started.

Now on my client, I don't see the extension. This is my updated code:

const value = `func test() -> String {
    print("Hello World")
    return "Test"
}`;
const workerLoaders: Partial<Record<string, WorkerLoader>> = {
    editorWorkerService: () => new Worker(new URL("monaco-editor/esm/vs/editor/editor.worker.js", import.meta.url), { type: "module" }),
    textMateWorker: () => new Worker(new URL("@codingame/monaco-vscode-textmate-service-override/worker", import.meta.url), { type: "module" })
};

window.MonacoEnvironment = {
    getWorker: function (moduleId, label): Worker {
        const workerFactory = workerLoaders[label];
        if (workerFactory != null) {
            return workerFactory();
        }
        throw new Error(`Unimplemented worker ${label} (${moduleId})`);
    }
};

const fileSystemProvider = new RegisteredFileSystemProvider(false);
fileSystemProvider.registerFile(new RegisteredMemoryFile(monaco.Uri.file("/main.swift"), value));

registerFileSystemOverlay(1, fileSystemProvider);
await initializeMonacoService({
    ...getRemoteAgentServiceOverride({
        scanRemoteExtensions: true
    }),
    ...getModelServiceOverride(),
    ...getExtensionServiceOverride(),
    ...getThemeServiceOverride(),
    ...getLanguagesServiceOverride(),
    ...getTextmateServiceOverride(),
    ...getViewsServiceOverride(),
    ...getFileServiceOverride(),
    ...getSearchServiceOverride()
}, undefined, {
    remoteAuthority: "localhost:8080"
});

console.log("extensions", vscode.extensions.all);

attachPart(Parts.EDITOR_PART, this.editorRef.nativeElement!);

vscode.workspace.openTextDocument("/main.swift").then((doc) => {
    vscode.window.showTextDocument(doc);
});

But still vscode.extensions.all is empty.

Am I missing something?

[julian-baumann]

I’m not certain if this is related to the issue, but I’m also encountering the following console errors:

CodeExpectedError: ENOPRO: No file system provider found for resource 'inmemory://model/'

Error: Not implemented
    at StandaloneUriLabelService.registerFormatter (standaloneServices.js:797:17)

CodeExpectedError: ENOPRO: No file system provider found for resource 'inmemory://model/'

If they're not related, I will address them later on. For now I would just like to get the extensions working.

[julian-baumann]

Update: I think I got the extension working, by using registerRemoteExtension with the directory of the installed extension, usually installed in ~/.vscode-server/extensions/

const extension = await registerRemoteExtension("~/.vscode-server/extensions/sswg.swift-lang-1.10.4");

But there is no syntax highlighting or code completion enabled in the editor. Is there something I need to enable?

[CGNonofr]

But still vscode.extensions.all is empty.

This api doesn't allow to see extension running on another extension host, so calling it from the localExtensionHost will not allow you to see the extension running in the server extension host

You can try to use the extension gallery service override to extension statuses

But there is no syntax highlighting or code completion enabled in the editor. Is there something I need to enable?

Is there anything working then?

If you provide a reproduction repo, I may be able to help

[CGNonofr]

I’m not certain if this is related to the issue, but I’m also encountering the following console errors:

CodeExpectedError: ENOPRO: No file system provider found for resource 'inmemory://model/'

Hum no idea :thinking:

Error: Not implemented
    at StandaloneUriLabelService.registerFormatter (standaloneServices.js:797:17)

fixed in https://github.com/CodinGame/monaco-vscode-api/pull/467

[julian-baumann]

Thank you very much for your assistance so far. I’m gradually gaining a deeper understanding of how everything works here.

Is there anything working then?

Not really, but

const extension = await registerRemoteExtension("~/.vscode-server/extensions/sswg.swift-lang-1.10.4");

extension.isEnabled() returns true and I see this warning log in the console

 WARN [sswg.swift-lang]: View container 'explorer' does not exist and all views registered to it will be added to 'Explorer'.

So it seems like the extension is doing something.

If you provide a reproduction repo, I may be able to help

I will take care of that today and get back to you with a response, thanks

[julian-baumann]

I’ve hacked together a brief demo which you can find here: https://github.com/julian-baumann/monaco-vscode-demo

For detailed setup instructions, please refer to the README. All the essential code is located in a single file: ./src/app/app.component.ts

It should more or less work out of the box. Let me know if you encounter any issues.

[CGNonofr]

Ok, so,your problems:

• you're importing @codingame/monaco-vscode-configuration-service-override but not using the getServiceOverride method, you're not supposed to import a service override without using it, and the configuration service override is pretty much required as it's the one managing the workspace folders as well
• the swift-lang extensions registers a lot of stuff, and requires the corresponding service overrides to be registered to suppress the errors:
  • @codingame/monaco-vscode-extension-gallery-service-override
  • @codingame/monaco-vscode-explorer-service-override
  • @codingame/monaco-vscode-debug-service-override
  • @codingame/monaco-vscode-storage-service-override
  • @codingame/monaco-vscode-terminal-service-override
  • @codingame/monaco-vscode-chat-service-override
  • @codingame/monaco-vscode-scm-service-override
• the swift-lang extension is not responsible for the syntax highlighting, but the default swift extension instead, import @codingame/monaco-vscode-swift-default-extension
• The exported services are the one designed for the web version, and running them in electron doesn't work well. That's the reason for the @codingame/monaco-vscode-swift-default-extension to be not working: in electron, the web extension management server is unable to register any extension manager server, so there is no place for the extension to run

[julian-baumann]

Thank you, I've tried importing the required overrides, but as you mentioned, it doesn't work in electron. Do you happen to know any workaround or solution on how to get it running in electron?

In the meanwhile, I've also create a new vite+React project with a the same code as in the angular application which can be found here: https://github.com/julian-baumann/monaco-vscode-demo/tree/vite This one also runs in the browser, and we see a working syntax highlighting! But still no code suggestions/completions or errors. In the console we see the following log message:

[Extension Host] 00:21:17: SourceKit-LSP setup

So it seems like it is trying to start the LSP service. But no indication whether it started successfully or not...

Any ideas?

[julian-baumann]

Update: I got LSP working! I had to load the project via the code-server (vscode-remote://localhost:8080/...), rather than using the RegisteredFileSystemProvider.

The only thing not working right now is loading the @codingame/monaco-vscode-swift-default-extension extension via electron.

[CGNonofr]

I'm not aware of any workaround, we need to allow using the electron services in the lib

[julian-baumann]

Seems like it's working if we disable nodeIntegration and use a preload.js for all node related stuff as intended by electron.

[ivan-kzn]

@julian-baumann could you please push working changes to your repo?

[julian-baumann]

I've just pushed a working version on main. But I will probably not continue with this project, since it was only a small demo to test everything. But the current angular project on the main branch should work fine both in the browser and in electorn. Please make sure to update the projectPath field in ./src/app/app.component.ts to a valid swift project, like to the one included in the root of the repo (has to be an absolute path).

[ivan-kzn]

I understand, thanks! I just faced with same issue to make everything work together

[julian-baumann]

I may not be able to assist you with any further problems, but if you encounter any issues specifically with my test project, please don’t hesitate to contact me.

[brianjenkins94]

I'm trying to do something very similar here: https://github.com/brianjenkins94/monaco-vscode-api-esbuild

but can't quite make sense of some of these console errors:

[brianjenkins94]

@CGNonofr was hoping you could take a look maybe? ^ 🙏

[CGNonofr]

esbuild doesn't handle well assets urls, that's why we add to use a custom plugin in the demo, maybe it's your issue?

[brianjenkins94]

I'm handling that already: https://github.com/brianjenkins94/monaco-vscode-api-esbuild/blob/main/tsup.config.ts#L38

Here it is on GitHub Pages if you don't want to try it locally: https://brianjenkins94.github.io/monaco-vscode-api-esbuild/

[CGNonofr]

No idea why it tries to load extensionHostWorker.js from https://brianjenkins94.github.io/monaco-vscode-api-esbuild/vscode/src/vs/workbench/api/worker/extensionHostWorker.js, there is very probably a configuration issue

I didn't really understand your recursive update of the importMetaUrlPlugin

[github-actions[bot]]

This issue is stale because it has been open for 30 days with no activity.

[brianjenkins94]

Ah, looks to be related to all that fakeWorker stuff.

Is it possible to load the workers from a CDN or something?

Maybe via MonacoEnvironment.getWorkerUrl or MonacoEnvironment.getWorker?

Looks like that would only work for the editorWorkerService.

Maybe I just need to change the workerConfig...

[brianjenkins94]

Unfortunately, very stuck on:

simpleWorker.js: Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes. Please see https://github.com/microsoft/monaco-editor#faq

Latest attempt here: https://brianjenkins94.github.io/monaco-vscode-api-esbuild/