Execute commands from the browser

[luiz290788]

Is there any way to execute a command in the language server from the browser without having to import vscode?

I'm having trouble building the application with vitejs when importing vscode. I have a language server running on the browser (in a worker) and I want to send commands to it.

[luiz290788]

I found a solution

languageClient.sendRequest(ExecuteCommandRequest.method, {
  command: 'myCommand',
  arguments: ['arguments', 'to', 'my', 'command'],
})

[msujew]

Well, for the same reason why vscode-languageclient/node also imports vscode. The vscode-languageclient package is a generic language client package for connecting a language server to vscode. It needs to import vscode and then registers providers for all the language functionality.

Ignoring it would not be a good idea, since that would break the package (you would just get a lot of cannot read property X of undefined errors). If you're running in a browser context with monaco you can use the monaco-vscode-api package though. It's a shim that creates a fake vscode package and allows vscode-languageclient/browser to work as expected with monaco. Note that you can also link monaco directly with a language server using one of these packages (based on the monaco-languageclient package). We also have a tutorial on that.

[luiz290788]

I'm using monaco-languageclient. The problem that I'm facing right now is that if I try to instantiate the language client before I have an monaco editor mounted on screen I get this error:

Uncaught Error: Missing service editorService

I might be doing something wrong, but I am implementing a react interface that I want to load a handful of documents using monaco.editor.createModel and then have an editor that display one specific document. Then I want to use the language client to send a command to the language server to get the AST of specific documents. I'm trying to implement all of this with a single instance of the worker and a single instance of the client.

[luiz290788]

OK, I got it working. I had to install @condigame/monaco-vscode-api like this:

npm install vscode@npm:@codingame/monaco-vscode-api
npm install -D @types/vscode

and then initialise the services like this:

StandaloneServices.initialize({})

And I can instantiate the language client with no errors now. That is great! Thanks so much for the help!

One interesting thing fact is when I run the command using vscode.commands.executeCommand I get a null instead of the return of my command.

      void vscode.commands
        .executeCommand('getAst', model.uri.toString())
        .then(console.log) // prints null

      void languageClient
        .sendRequest(ExecuteCommandRequest.method, {
          command: 'getAst',
          arguments: [model.uri.toString()],
        })
        .then(console.log) // prints my AST

Not a big problem because now I can use the language client.

[kaisalmen]

Hi @luiz290788 we have just integrated the langium statemachine example into monaco-languageclient examples:
https://github.com/TypeFox/monaco-languageclient/tree/main/packages/examples/main/src/langium

It does not cover the commands (yet, was thinking about adding it, after you brought up the question here), but it covers advanced editor configuration already.

[luiz290788]

That is great! I will check that example!