feat: add message passing examples

Author: 4gray

ext-src/extension.ts

@@ -36,6 +36,30 @@ class WebPanel {
     return WebPanel.currentPanel;
   }
 
+  public static updateTitle(extensionPath: string) {
+    const column = vscode.window.activeTextEditor
+      ? vscode.window.activeTextEditor.viewColumn
+      : undefined;
+
+    // If we already have a panel, show it.
+    // Otherwise, create angular panel.
+    if (WebPanel.currentPanel) {
+      WebPanel.currentPanel.panel.reveal(column);
+    } else {
+      WebPanel.currentPanel = new WebPanel(
+        extensionPath,
+        column || vscode.ViewColumn.One,
+      );
+    }
+
+    WebPanel.currentPanel.panel.webview.postMessage({
+      command: 'update-title',
+      payload: {
+        title: `Hello from ${extensionPath} - ${Date().toString()}`,
+      },
+    });
+  }
+
   private constructor(extensionPath: string, column: vscode.ViewColumn) {
     this.extensionPath = extensionPath;
     this.builtAppFolder = 'dist';
@@ -65,9 +89,10 @@ class WebPanel {
 
     // Handle messages from the webview
     this.panel.webview.onDidReceiveMessage(
-      (message: any) => {
+      (message) => {
         switch (message.command) {
-          case 'alert':
+          case 'notification':
+            vscode.window.showInformationMessage(message.data.text);
             vscode.window.showErrorMessage(message.text);
             return;
         }
@@ -128,4 +153,10 @@ export function activate(context: vscode.ExtensionContext) {
       WebPanel.createOrShow(context.extensionPath);
     }),
   );
+
+  context.subscriptions.push(
+    vscode.commands.registerCommand('angular-webview.update-title', () => {
+      WebPanel.updateTitle(context.extensionPath);
+    }),
+  );
 }

package.json

@@ -13,6 +13,11 @@
         "command": "angular-webview.start",
         "title": "Open webview",
         "category": "Angular"
+      },
+      {
+        "command": "angular-webview.update-title",
+        "title": "Update title",
+        "category": "Angular"
       }
     ]
   },

screenshot.png

@@ -7,27 +7,14 @@ <h1>Welcome to {{ title }}!</h1>
     src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
   />
 </div>
-<h2>Here are some links to help you start:</h2>
-<ul>
-  <li>
-    <h2>
-      <a target="_blank" rel="noopener" href="https://angular.io/tutorial"
-        >Tour of Heroes</a
-      >
-    </h2>
-  </li>
-  <li>
-    <h2>
-      <a target="_blank" rel="noopener" href="https://angular.io/cli"
-        >CLI Documentation</a
-      >
-    </h2>
-  </li>
-  <li>
-    <h2>
-      <a target="_blank" rel="noopener" href="https://blog.angular.io/"
-        >Angular blog</a
-      >
-    </h2>
-  </li>
-</ul>
+
+<h2>Send message from Webview to Extension</h2>
+<textarea #text>Hello world notification!</textarea><br />
+<button (click)="postToExtension(text.value)">Send message to extension</button>
+<p>Should produce a notification from the extension process.</p>
+
+<h2>Send message from Extension to Webview</h2>
+<p>
+  Open Command Palette (Cmd+Shift) and select "Angular: Update title" to update
+  the title in Webview from the extension process.
+</p>

src/app/app.component.html

@@ -1,10 +1,44 @@
 import { Component } from '@angular/core';
 
+declare function acquireVsCodeApi(): {
+  postMessage(options: { command: string; data: unknown }): void;
+};
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   standalone: true,
+  styles: `button {
+    background: rgb(108, 108, 255);
+    color: white;
+    padding: 5px 20px;
+    border-radius: 4px;
+    border: none;
+  }`,
 })
 export class AppComponent {
   title = 'VSCode Webview Angular';
+  vscode = acquireVsCodeApi();
+
+  constructor() {
+    window.addEventListener(
+      'message',
+      (
+        event: MessageEvent<{ command: string; payload: { title: string } }>,
+      ) => {
+        if (event.data.command === 'update-title') {
+          this.title = event.data.payload.title;
+        }
+      },
+    );
+  }
+
+  postToExtension(text: string) {
+    this.vscode.postMessage({
+      command: 'notification',
+      data: {
+        text,
+      },
+    });
+  }
 }