Example for connecting to a LSP server on the web worker?

[ejfasting]

Hello,

I have an existing vscode web extension that has a custom LSP server (which is running on the webworker).
I'm trying to figure out how to create a client that can be used by the monaco editor, and I want it to be as basic as possible so that i can build it piece by piece.

Optimally I would like to reuse the existing extension i have for vscode, and its a little confusing that the documentation for monaco-vscode-api says it supports vscode extensions (?).
'You' also have an ongoing discussion (from what i can tell), so I'm a little unsure which NPM package to actually use:
#543

If anyone could point me in the right direction that would be great. As a code-example I've found this:
https://github.com/microsoft/vscode-extension-samples/tree/main/lsp-web-extension-sample
This is an example-code for an LSP web extension for vscode, and basically i would like to add another client to this (without changing the LSP server).

//e

[CGNonofr]

If you want to run your vscode extension as is, monaco-vscode-api can indeed do that. You can load your vsix using the provided vsix rollup loader. Depending on the feature you want, you may need to enable some services overrides.

[ejfasting]

Sure, no problem :)
You can find the .vsix here: https://github.com/ejfasting/MonacoTest/blob/main/jsfso-0.0.1.vsix
(nevermind the repo, its basically an attempt of going a different route and just import the languageServer directly, instead of through a vsix).

Import that in vscode, open a plain text document and click ctrl+space, and the result should be this:

[CGNonofr]

Did you manage to make it work on the web version of VSCode?

[ejfasting]

Well, i assumed that running it locally with arg '--extensionDevelopmentKind=web' would simulate that it was working in vscode.dev.
I will take it one step further and run it with @vscode/test-web and/or try to sideload it instead.

But, with this vsix working, how would a sample project look like? I'm still unsure if I'm actually loading it up as i should (just putting import at the top of main.ts). I will make a complete repo you can look at, if I'm unable to make it work after validating the .vsix

[CGNonofr]

I've just tried adding in in the monaco-vscode-api demo and It worked on the first try:

Can you please open a discussion in monaco-vscode-api instead to not pollute to much here as it's not really related to monaco-languageclient

[ejfasting]

Roger that!
I was able to validate the vsix (which you also did i see), so the issue is how i load it up in my code. I'm starting another thread on monaco-vscode-api and closing this one. Thanks!

[msujew]

In addition to what @CGNonofr said, there is an example in this repo for webworker based language servers. In this case, the language server is provided by Langium.

[ejfasting]

Hello!

I looked at the sample, and threw together a small repo with a very stripped example:
https://github.com/ejfasting/MonacoTest

Would this be the correct approach? If not, could you help me out? :)

Thank you for the reply!
//Eivind

[msujew]

I believe you're still missing the language definition (otherwise, languageId has no actual language association), see:

monaco-languageclient/packages/examples/src/langium/statemachineClient.ts

Lines 55 to 89 in b912f12

	const extension = {
	name: 'statemachine-client',
	publisher: 'monaco-languageclient-project',
	version: '1.0.0',
	engines: {
	vscode: '*'
	},
	contributes: {
	languages: [{
	id: languageId,
	extensions: [
	`.${languageId}`
	],
	aliases: [
	languageId
	],
	configuration: './statemachine-configuration.json'
	}],
	grammars: [{
	language: languageId,
	scopeName: 'source.statemachine',
	path: './statemachine-grammar.json'
	}],
	keybindings: [{
	key: 'ctrl+p',
	command: 'editor.action.quickCommand',
	when: 'editorTextFocus'
	}, {
	key: 'ctrl+shift+c',
	command: 'editor.action.commentLine',
	when: 'editorTextFocus'
	}]
	}
	};
	const { registerFileUrl } = registerExtension(extension, ExtensionHostKind.LocalProcess);

Also, otherwise this looks mostly alright. There might be a name mismatch in the language server (the file is named lsp-server.js, while the worker requests server.js), but that depends on how you serve it.

[ejfasting]

Thank you! :)

I will keep working from this then. Actually decided to use monaco-vscode-api, and import the vsix instead, but this is great to get more familiar with how this works.

Again, thanks a lot for the reply!

//eivind

[ejfasting]

@msujew Hi again!
Sorry, I had to put this to the side and focus on other things for a while..

Anyways, i tried to add the language definition, and I've fixed the typo.
I also added Vite, to make it easier to develop/work with.

It looks like the server is being loaded up, as I've added a console.log in the browser.js that is posted in the console.
But it gives no code completions, which is basically all the server now should return.

It also complains about vscode/localExtensionHost, but if i add that and await initServices() it never gets past that point..

Would it be possible for you to have another look, and possibly help out figure out what I'm doing wrong? I probably miss a piece here, but I have no idea what (been going through the langium-example a dozen times without figuring it out).

//Eivind

[kaisalmen]

@ejfasting as @msujew already said this looks mostly good.
We have also created monaco-editor-wrapper (https://github.com/TypeFox/monaco-components) that allows to reduce the boiler plate code needed to build a client for a worker or other language servers. There are a couple of example in that repo as well that show the usage from simple to more advanced.