Awesome

VS Code Messenger

RPC messaging library for the VS Code extension platform. Makes the communication between your VS Code extension and its webviews much simpler.

Supported features

• Sending notification or a request from an extension to a view, a view group or broadcast to all registered views
• Sending notification or a request from a view to other view, a view group or the host extension
• Support for sync and async request/notification handlers
• Support for request cancellation
• Typed API
• Automatically unregister views on view dispose
• Configurable logging

Diagnostics vs-code extension

Devtool vscode extension helps inspecting messages interaction between your extension components.

Usage in an extension (TS example)

const messenger = new Messenger();

// register one or more views
messenger.registerWebviewView(webviewView);


// Handle incoming view notification
const colorSelectType: NotificationType<string> = { method: 'colorSelected' };

messenger.onNotification(colorSelectType, (params: string) => {
    vscode.window.activeTextEditor?.insertSnippet(new vscode.SnippetString(`#${params}`));
});

// Handle view requests and return a result
const availableColorsType: RequestType<string, string[]> = { method: 'availableColor' };

messenger.onRequest(availableColorsType, (params: string) => {
    return ['020202', 'f1eeee', 'a85b20', 'daab70', 'efcb99'];
});

// Send a notification to a view of type 'calicoColors.colorsView'
const colorModifyType: NotificationType<string> = { method: 'colorModify' };

messenger.sendNotification(colorModifyType, {type: 'webview', webviewType: 'calicoColors.colorsView' }, 'clear');


// Send a request to a view of type 'calicoColors.colorsView' and get a result
const selectedColor = await messenger.sendRequest({ method: 'getSelectedColor' }, {type: 'webview', webviewType: 'calicoColors.colorsView' }, '');

Usage in a webview (JS Example)

Using JS in this example for simplicity. You can use TypeScript as well.

const vscode = acquireVsCodeApi();
const vscode_messenger = require("vscode-messenger-webview");

const messenger = new vscode_messenger.Messenger(vscode);

// Handle extension Notifications. For requests use `onRequest()` 
messenger.onNotification({method: 'colorModify'}, (params) => {
    switch(params) {
        case 'add': {
            addColor();
            break;
        }
        case 'clear': {
            colors = [];
            updateColorList(colors);
            break;
        }
    }
});
messenger.start(); // start listening for incoming events

// Send a request to your extension.
// For notification use `sendNotification()`
 const colors = await messenger.sendRequest({ method: 'availableColors'}, HOST_EXTENSION, '');
 console.log(colors);

More examples

See tests for more examples.