Get communication working between extension and webview; add shared data types

src/extension.ts

@@ -37,6 +37,7 @@ export function activate(context: vscode.ExtensionContext) {
 		vscode.commands.registerCommand("claude-dev.plusButtonTapped", () => {
 			const message = "claude-dev.plusButtonTapped!"
 			vscode.window.showInformationMessage(message)
+			provider.postMessageToWebview({ type: "action", action: "plusButtonTapped"})
 		})
 	)
 
@@ -44,6 +45,7 @@ export function activate(context: vscode.ExtensionContext) {
 		vscode.commands.registerCommand("claude-dev.settingsButtonTapped", () => {
 			const message = "claude-dev.settingsButtonTapped!"
 			vscode.window.showInformationMessage(message)
+			provider.postMessageToWebview({ type: "action", action: "settingsButtonTapped"})
 		})
 	)
 

src/providers/SidebarProvider.ts

@@ -2,6 +2,8 @@ import { getUri } from "../utilities/getUri"
 import { getNonce } from "../utilities/getNonce"
 //import * as weather from "weather-js"
 import * as vscode from "vscode"
+import { ExtensionMessage } from "../shared/ExtensionMessage"
+import { WebviewMessage } from "../shared/WebviewMessage"
 
 /*
 https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/default/weather-webview/src/providers/WeatherViewProvider.ts
@@ -36,6 +38,11 @@ export class SidebarProvider implements vscode.WebviewViewProvider {
 		this._setWebviewMessageListener(webviewView.webview)
 	}
 
+	// Send any JSON serializable data to the react app
+	postMessageToWebview(message: ExtensionMessage) {
+		this._view?.webview.postMessage(message)
+	}
+
 	/**
 	 * Defines and returns the HTML that should be rendered within the webview panel.
 	 *
@@ -112,14 +119,16 @@ export class SidebarProvider implements vscode.WebviewViewProvider {
 	 * @param context A reference to the extension context
 	 */
 	private _setWebviewMessageListener(webview: vscode.Webview) {
-		webview.onDidReceiveMessage((message: any) => {
-			const command = message.command
-			const text = message.text
-
-			switch (command) {
-				case "hello":
+		webview.onDidReceiveMessage((message: WebviewMessage) => {
+			switch (message.type) {
+				case "text":
 					// Code that should run in response to the hello message command
-					vscode.window.showInformationMessage(text)
+					vscode.window.showInformationMessage(message.text!)
+
+					// Send a message to our webview.
+      				// You can send any JSON serializable data.
+					// Could also do this in extension .ts 
+					this.postMessageToWebview({ type: "text", text: `Extension: ${Date.now()}` })
 					return
 				// Add more switch case statements here as more webview message commands
 				// are created within the webview context (i.e. inside media/main.js)

src/shared/ExtensionMessage.ts

@@ -0,0 +1,8 @@
+// type that represents json data that is sent from extension to webview, called ExtensionMessage and has 'type' enum which can be 'plusButtonTapped' or 'settingsButtonTapped' or 'hello'
+
+// webview will hold state
+export interface ExtensionMessage {
+    type: "text" | "action"
+    text?: string
+    action?: "plusButtonTapped" | "settingsButtonTapped"
+}

src/shared/WebviewMessage.ts

@@ -0,0 +1,5 @@
+export interface WebviewMessage {
+    type: "text" | "action"
+    text?: string
+    action?: "newTaskButtonTapped" | "yesButtonTapped" | "noButtonTapped" | "executeButtonTapped"
+}