VSCode extension IPC with UI inside HTML preview

Question

I wish to develop a unit test runner extension for VSCode. The extension should display discovered tests grouped into expandable hierarchy, annotate run status, display output and errors for each test, provide run/debug commands on different levels, and of course the red/green bar.

Roughly spearating this into "model" and "view", I plan to implement the model in the extension process, and I plan to implement the view as HTML preview based on a TextDocumentContentProvider. (Is there a better approach?)

Now, the model and the view should communicate with each other. I want to implement the view as a single-page application. The view will send commands to the model, and the model will send events to the view (or the view will poll the model for events). The view will update itself according to received events.

My question is, what communication technique should I use? Can HTML page inside the HTML preview access VSCode/Atom/Electron/Node APIs? Can I share object instances, or do some lightweight IPC? By far I didn't figure out.

I've found that I can invoke VSCode commands or refresh the entire page, when the user clicks a link with href set to specific scheme (command:// or the one I registered for my TextDocumentContentProvider).

I do succeed to open an HTTP listener (http.createServer) in the extension process, and communicate through XMLHttpRequest on the HTML preview side. But it looks to me like a heavy overkill.

I wonder if there are more appropriate ways to do this?

In case someone else stumbles across this: the answer looks like it is "no, there is no built-in way to communicate", but using socket.io for communications feels easy and lightweight enough. — Vlad Dumitrescu
You can communicate with TextDocumentContentProvider webviews using command links. See the old markdown preview for an example of this The new webview API makes this much easier however — Matt Bierner

protalk protalk · Accepted Answer · 2018-03-15T02:56:03

Almenon is referring to the currently proposed Webview API that was released in version 1.21 (Feb 2018). For the time being, this appears to be a much better approach for HTML previews. But in order to use the API, there are special instructions. From the release notes:

These APIs are still proposed, so in order to use it, you must opt into it by adding a "enableProposedApi": true to package.json and you'll have to copy the vscode.proposed.d.ts into your extension project.

What isn't clarified (and probably should be) is how to add the downloaded declaration file to a project. One way to do it is place the file in $/node_modules/vscode, next to vscode.d.ts, which is generated during postinstall. Then add the following line to the top of vscode.d.ts:

/// <reference path="vscode.proposed.d.ts" />

That will link the type declaration files. To make this part of the installation process, write a build task to do it and then call it in the vscode:postinstall script in package.json.

VSCode extension IPC with UI inside HTML preview

2 Answers