From cd8bbc5c7fffd5d6ecb303c0a83cd27b5bdfd4cc Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Sat, 6 Jul 2024 02:05:43 -0400
Subject: [PATCH] Update extension to use react app
---
package.json | 6 +-
src/providers/SidebarProvider.ts | 111 ++++++++++++++++++++-----------
src/webview/main.ts | 3 +
tsconfig.json | 3 +-
4 files changed, 83 insertions(+), 40 deletions(-)
diff --git a/package.json b/package.json
index 82c3a46..0f300a7 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,11 @@
"pretest": "npm run compile-tests && npm run compile && npm run lint",
"check-types": "tsc --noEmit",
"lint": "eslint src --ext ts",
- "test": "vscode-test"
+ "test": "vscode-test",
+ "install:all": "npm install && cd webview-ui && npm install",
+ "start:webview": "cd webview-ui && npm run start",
+ "build:webview": "cd webview-ui && npm run build",
+ "test:webview": "cd webview-ui && npm run test"
},
"devDependencies": {
"@types/mocha": "^10.0.7",
diff --git a/src/providers/SidebarProvider.ts b/src/providers/SidebarProvider.ts
index c16a5d2..48e195b 100644
--- a/src/providers/SidebarProvider.ts
+++ b/src/providers/SidebarProvider.ts
@@ -3,6 +3,13 @@ import { getNonce } from "../utilities/getNonce"
//import * as weather from "weather-js"
import * as vscode from "vscode"
+/*
+https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/default/weather-webview/src/providers/WeatherViewProvider.ts
+
+https://github.com/KumarVariable/vscode-extension-sidebar-html/blob/master/src/customSidebarViewProvider.ts
+*/
+
+
export class SidebarProvider implements vscode.WebviewViewProvider {
public static readonly viewType = "vscodeSidebar.openview"
@@ -23,56 +30,84 @@ export class SidebarProvider implements vscode.WebviewViewProvider {
localResourceRoots: [this._extensionUri],
}
webviewView.webview.html = this.getHtmlContent(webviewView.webview)
+
+ // Sets up an event listener to listen for messages passed from the webview view context
+ // and executes code based on the message that is recieved
+ this._setWebviewMessageListener(webviewView.webview)
}
+ /**
+ * Defines and returns the HTML that should be rendered within the webview panel.
+ *
+ * @remarks This is also the place where references to the React webview build files
+ * are created and inserted into the webview HTML.
+ *
+ * @param webview A reference to the extension webview
+ * @param extensionUri The URI of the directory containing the extension
+ * @returns A template string literal containing the HTML that should be
+ * rendered within the webview panel
+ */
private getHtmlContent(webview: vscode.Webview): string {
// Get the local path to main script run in the webview,
// then convert it to a uri we can use in the webview.
- const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "main.js"))
- const styleResetUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "reset.css"))
- const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "vscode.css"))
+ // The CSS file from the React build output
+ const stylesUri = getUri(webview, this._extensionUri, ["webview-ui", "build", "static", "css", "main.css"])
+ // The JS file from the React build output
+ const scriptUri = getUri(webview, this._extensionUri, ["webview-ui", "build", "static", "js", "main.js"])
- // Same for stylesheet
- const stylesheetUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "main.css"))
+ // const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "main.js"))
+
+ // const styleResetUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "reset.css"))
+ // const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "vscode.css"))
+
+ // // Same for stylesheet
+ // const stylesheetUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "main.css"))
// Use a nonce to only allow a specific script to be run.
const nonce = getNonce()
- return `
-
-
-
-
-
+ // Tip: Install the es6-string-html VS Code extension to enable code highlighting below
+ return /*html*/ `
+
+
+
+
+
+
+
+
+ Hello World
+
+
+
+
+
+
+
+ `
+ }
-
+ /**
+ * Sets up an event listener to listen for messages passed from the webview context and
+ * executes code based on the message that is recieved.
+ *
+ * @param webview A reference to the extension webview
+ * @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
-
-
-
-
-
-
-
-
-
-
-
-
Subscribe today
-
-
-
-
-
We won’t send you spam.
-
Unsubscribe at any time.
-
-
-
-
-
-
-
- `
+ switch (command) {
+ case "hello":
+ // Code that should run in response to the hello message command
+ vscode.window.showInformationMessage(text)
+ return
+ // Add more switch case statements here as more webview message commands
+ // are created within the webview context (i.e. inside media/main.js)
+ }
+ })
}
}
diff --git a/src/webview/main.ts b/src/webview/main.ts
index 56a7cca..c65d239 100644
--- a/src/webview/main.ts
+++ b/src/webview/main.ts
@@ -16,6 +16,9 @@ function handleHowdyClick() {
text: "Hey there partner! 🤠",
});
}
+
+https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/default/weather-webview/src/webview/main.ts
+
*/
diff --git a/tsconfig.json b/tsconfig.json
index 0ca80e5..9f7fa90 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -19,5 +19,6 @@
"target": "es2022",
"useDefineForClassFields": true,
"useUnknownInCatchVariables": false
- }
+ },
+ "exclude": ["node_modules", ".vscode-test", "webview-ui"]
}
\ No newline at end of file