Understanding usage of monaco-vscode-api

[dlvhdr]

Hi!

I'm trying to understand how monaco-languageclient uses monaco-vscode-api.
Following the code, I'm not sure I understand.
My main gap is around the role of the extHost file in monaco-vscode-api.
What I'm seeing in the bundled code differs from what's inside languages.ts

If I put a debugger; statement I can see the stack trace as follows:

The code looks like this:

1. registerProvider (in vscode-languageclient):

registerProvider(selector, provider) {
        return vscode_1.languages.registerHoverProvider(this._client.protocol2CodeConverter.asDocumentSelector(selector), provider);
    }

2. registerHoverProvider (in monaco-vscode-api):

registerHoverProvider(documentSelector, provider) {
        const adapter = new HoverAdapter(extHostDocuments, provider);
        return monaco.languages.registerHoverProvider(documentSelector, {
            provideHover: (model, position, token) => {
                return adapter.provideHover(model.uri, position, token);
            }
        });
    },

So, my questions are:

1. What is the role of the extHost.ts file?
2. Why am I not seeing it called in the bundled files? My initial intuition was that you'd simply call monaco.languages api like in the actual stack trace.
3. I thought I understood that you simply replace the vscode import with monaco-vscode-api but I'm seeing a lot of code in the rollup config etc. How does that work?

Thanks!

[CGNonofr]

Hello!

It just seems you use an old version of monaco-vscode-api that was not using the extHost stuff

see #399

Btw, you can still probably force a newer version of monaco-vscode-api (be careful, the last versions are the 1.67.x, not the 1.68.x, and we can't unpublish npm packages...)

What is the role of the extHost.ts file?

It gathers code from vscode, the extHost classes are the "thing" vscode use between its api and the services

Why am I not seeing it called in the bundled files? My initial intuition was that you'd simply call monaco.languages api like in the actual stack trace.

Because of the wrong version

I thought I understood that you simply replace the vscode import with monaco-vscode-api

You are right!

but I'm seeing a lot of code in the rollup config etc. How does that work?

The rollup config is here because there is some complexity to make it work and optimize the bundle:

• Monaco contains a lot of code from vscode, and we try bundle vscode code only if this code is not already shipped in monaco
• We then try to treeshake out everything that is not necessary, and rollup needs some help to do so

What surprises you in the rollup config? what else?

[CGNonofr]

Btw, I've just released a breaking change version that simplifies the user configuration api and fix the getConfigurationData error when the configurationService is not overriden

[dlvhdr]

Btw, I've just released a breaking change version that simplifies the user configuration api and fix the getConfigurationData error when the configurationService is not overriden

Yeah I tried upgrading to 1.67.19 but I'm getting errors:

errors.js:12 Uncaught Error: this.configuration.compareAndUpdateDefaultConfiguration is not a function

TypeError: this.configuration.compareAndUpdateDefaultConfiguration is not a function
    at ConfigurationService.onDidDefaultConfigurationChange (configuration.js:1033:43)
    at configuration.js:998:113
    at Listener.invoke (event.js:407:23)
    at Emitter.fire (event.js:551:30)
    at ConfigurationRegistry.registerDefaultConfigurations (configurationRegistry.js:83:40)
    at main.ts:129:6
    at errors.js:12:27
(anonymous) @ errors.js:12
setTimeout (async)
ErrorHandler.unexpectedErrorHandler @ errors.js:10
onUnexpectedError @ errors.js:24
onUnexpectedError @ errors.js:36
fire @ event.js:554
registerDefaultConfigurations @ configurationRegistry.js:83
(anonymous) @ main.ts:129
15:58:51.869 errors.js:12 Uncaught Error: this.updated.fill is not a function

TypeError: this.updated.fill is not a function
    at new FileChangesEvent (services-9299c4ca.js:545:34)
    at configuration.js:1155:98
    at Listener.invoke (event.js:407:23)
    at Emitter.fire (event.js:551:30)
    at configuration.js:2125:26
    at Listener.invoke (event.js:407:23)
    at Emitter.fire (event.js:551:30)
    at updateUserConfiguration (configuration.js:2169:36)
    at main.ts:136:16
    at errors.js:12:27

[CGNonofr]

I reproduce, there is some other missing polyfills, fix coming

[CGNonofr]

You can give a try to the 1.67.20

[dlvhdr]

This works, thanks!

[dlvhdr]

@CGNonofr

Regaring the extHost, I think I'm just missing the last piece in the puzzle.

It gathers code from vscode, the extHost classes are the "thing" vscode use between its api and the services

I understand you created this for "impersonating" a vscode extension.
You just hook up things similarly to how vscode does it.
I've looked at the minified code and the last call in the stack before it reaches monaco.languages is this inside extHostLanguageFeatures.js:

    registerHoverProvider(extension, selector, provider, extensionId) {
        const handle = this._addNewAdapter(new HoverAdapter(this._documents, provider), extension);
        this._proxy.$registerHoverProvider(handle, this._transformDocumentSelector(selector));
        return this._createDisposable(handle);
    }

How does this reach monaco in the end?

[CGNonofr]

It doesn't use the official monaco api anymore, instead it imports and use the internal registries.

That's why it's now super important to use the exact same version of vscode version that was used to build monaco-editor.

(fortunately, the package.json of monaco-editor includes the commit hash of vscode that was used for the build)