Issue with using comlink for ext host ↔︎ webview communication (postMessage missing "transfers" parameter)

[darknoon]

I'm trying to use the popular Comlink IPC abstraction to simplify my webview ↔︎ custom editor communication.

import { expose } from "comlink";

// when setting up custom editor…
{
   const myAPI = {
     hello() { return "world"); }
   };
    expose(myAPI, extensionHostEndpoint(this.webviewPanel.webview));
}

```ts
// in webview
import { wrap } from "comlink";

const editorApi = wrap<EditorAPI>(webviewEndpont(vscode));
await editorApi(); // should resolve to "world";

It allows you to make abstractions for the (addList…/removeList…/postMess…) interface
Webview side, which roughly looks like this

const webviewEndpont = (vscode) => {
  addEventListener: window.addEventListener,
  removeEventListener: window.removeEventListener,
  postMessage(message, transfers) {
    vscode.postMessage(message, transfers);
  }
}

On the Extension Host side, I use webview.onDidReceiveMessage(…) and webview.postMessage to provide the same API (this is the extensionHostEndpoint() function above.

This all works great until I want to go the other way, sending a message from the extension host → webview via Comlink.proxy(…)

Unfortunately, Comlink likes to create additional MessagePorts in order to make it easier to proxy objects from one side of the IPC to the other.

// in webview
import { wrap, proxy } from "comlink";

const editorApi = wrap<EditorAPI>(webviewEndpont(vscode));

const myListener = () => console.log("hello");

// Fails with Uncaught DOMException: Failed to execute 'postMessage' on 'MessagePort': A MessagePort could not be cloned because it was not transferred.
await editorApi.addListener(proxy(myListener));

VSCode bug

This runs up against what appears to be a bug in vscode, where you can't pass a MessagePort from the Webview side back to the extension host (or transfers in general it seems)

I made a minimal repro so you can see that issue

1. Open workspace
2. Run with the debugger (usually f5)
3. Open a txt file in the ext host window
4. Look in the developer tools in the ext host window:

---

Why is this broken?

The support code in aquireVsCodeApi() seems to support transfers, but at the last moment doesn't actually pass them through. I got a little bit confused due to the amount of indirection and 2 iframes being involved, but

the rough call chain is

• My code (new MessageChannel() → vscode.postMessage({port: port1}, port1) →
• Code from vscode.postMessage
  → doPostMessage('onmessage', {message, transfer: [MessagePort]}, transfer) → HostMessaging.postMessage(channel, data, undefined) → port1.postMessage({channel, data}, undefined);

Could this be intentional somehow? Either way the code looks like it intends to pass transfers but doesn't so maybe it could be clarified if this is supposed to work on not.

---

perhaps related: microsoft/vscode#206884

[isidorn]

This sounds like a bug in VS Code. And I suggest to open a new issue in the vscode repo please https://github.com/microsoft/vscode/issues