Connect to VS Code using a JSON-RPC API over postMessage or WebSocket #5921
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
@jacob314 @kenzieschmoll interested in your thoughts on this (I don't expect to land it like this, it's just for discussion).
It's a bit of an evolution of #5747 (although only focusing on the DevTools-hosted panel for now). Using something like JSON-RPC between the Dart panel and the VS Code extension seems better than the custom code in #5747 (and would make it easier to make available to TypeScript extensions without having to build all API classes also in TypeScript).
It expands the panel Kenzie added to show information about the selected device from VS Code, and also a button that changes the device. It listens to events from VS Code for whenever the selected device changes.
When the panel is run with
?embed=true
on the querystring, it usespostMessage
to communicate to VS Code. If you run it without, it'll show a form that lets you paste in a WebSocket URL and will connect over that instead (the API behaves identically, allowing you to use hot reload and debugging while still interacting with VS Code).Here's a video showing it working with both setups:
https://drive.google.com/file/d/14kvLNJHJXq2P8F8YKeJxEuTZruUleoK9/view?usp=sharing
At 0:22 I run a "Dart: Connect External DevTools Sidebar" command which provides a WS URL (it's offscreen just in the debug console atm, but it would be shown at the top somewhere easily copyable), which is then pasted into the DevTools sidebar page.
Currently the API only includes some VS Code stuff (
executeComand
,getSelectedDevice
,onSelectedDeviceChanged
) but could be expanded to havelsp
and other APIs that the Dart extension can provide access to.The VS Code changes (which needs some tidying up) are on the Dart-Code
new-sidebar
branch. The APIs specifically here.