What is VSCode Message Management?

VSCode Message Management is a library that has ability to gain response of a request between extension and webview.

1// types.d.ts
2interface RequestFromWebview {
3  left: number;
4  right: number;
5}
6interface ResponseFromExtension {
7  result: number;
8}
9interface RequestFromExtension {
10  msg: string;
11}
12interface ResponseFromWebview {
13  ok: boolean;
14}

Extension

1import * as vscode from "vscode";
2import { extensionMessenger } from "vscode-message-management";
3
4const webviewPanel = vscode.window.createWebviewPanel(
5  "myWebview",
6  "myWebview",
7  vscode.ViewColumn.Active,
8  {
9    enableScripts: true,
10  }
11)
12
13const messenger = new extensionMessenger.Messenger(webviewPanel)
14
15messenger.request<RequestFromExtension, ResponseFromWebview>(
16  "helloWorld",
17  {msg: "success"}
18).then(console.log) // { ok: true }
19
20// recept a request from webview and send a response
21messenger.bind<RequestFromWebview, ResponseFromExtension>(
22  "addition", // each event id can be only bound once
23  (data) => {
24    console.log(data) // { left: 1, right: 2 }
25    return { result: data.left + data.right }
26  }
27)
28
29
30

Webview

1import { webviewMessenger } from "vscode-message-management";
2
3const vscode = acquireVsCodeApi()
4const messenger = new webviewMessenger.Messenger(vscode)
5
6// recept a request from extension and send a response
7messenger.bind<RequestFromExtension, ResponseFromWebview>(
8  "helloWorld", // each event id can be only bound once
9  (data) => {
10    console.log(data.msg) // success
11    return { ok: true }
12  }
13)
14
15// send a request to extension and gain a response
16messenger.request<RequestFromWebview, ResponseFromExtension>(
17  "addition",
18  { left: 1, right: 2 }
19).then(console.log) // { result: 3 }
20