Provides a conventient way to communicate between VSCode extension and his Webviews. Use RPC calls to invoke functions on the webview and receive callbacks.
APACHE-2.0 License
Provides a conventient way to communicate between VSCode extension and its webviews. Use RPC calls to invoke functions on the webview, receive callbacks and vice versa.
You need to have node.js installed on your machine. Also, to use this library, you need to run it inside a VSCode extension using VSCode or Theia.
An example of using this libary can be seen under the "example" folder.
npm install @sap-devx/webview-rpc
This will install the library in your node_modules folder. The extension library can be used as any node.js module (with TypeScript). The webview library needs to be imported to your html.<head>
<script>var exports = {};</script>
<script type="module" src="vscode-resource:/node_modules/@sap-devx/webview-rpc/out.browser/rpc-common.js"></script>
<script type="module" src="vscode-resource:/node_modules/@sap-devx/webview-rpc/out.browser/rpc-browser.js"></script>
<script type="module" src="vscode-resource:/out/media/main.js"></script>
</head>
Create new instance of the Rpc in the extension side and the Webview side
this._rpc = new RpcExtension(this._panel.webview);
const vscode = acquireVsCodeApi();
let rpc = new RpcBrowser(window, vscode);
In order to invoke an extension method from the webbiew or webview method from the extension, you will have to register the functions that can be invoked. Here is an example on how to register the methods
function add(a,b) {
return a+b;
}
rpc.registerMethod({func: add});
To invoke a method use the invoke method on the rpc instance. You can pass a callback that will be invoked once the response received. For version ^0.x.y :
rpc.invoke("add", [1,2]).then((response)=>{
console.log("1+2="+response);
});
Since version 1.x.y :
rpc.invoke("add", 1,2).then((response)=>{
console.log("1+2="+response);
});
To build for development purpose do the following:
npm install @sap-devx/webview-rpc
npm run compile-ext
npm run compile-browser
npm run test
Browser library is does not generate d.ts files.
overcome Cors issue preventing post message to get through and hit the window: use the setHost method and sent the host name from the webview - and then the message should get through.
Contributing information can be found in the CONTRIBUTING.md file.