Skip to content

RPC messaging library for the VS Code extension platform

License

Notifications You must be signed in to change notification settings

TypeFox/vscode-messenger

This branch is up to date with main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

a6fb04b · Dec 20, 2024

History

95 Commits
Dec 20, 2024
Nov 29, 2024
Dec 20, 2024
Dec 20, 2024
Jun 2, 2022
Dec 6, 2024
Mar 15, 2022
Dec 20, 2024
Dec 20, 2024
Apr 22, 2022
Dec 20, 2024
Dec 20, 2024
Dec 20, 2024
Dec 20, 2024
Dec 1, 2022

Repository files navigation

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.

npm CI Gitpod Ready-to-Code

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

Visual Studio Marketplace Version

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.