Главная Обзор Помощь
Регистрация Вход
AI
/
Roo-Code
зеркало из https://github.com/RooCodeInc/Roo-Code.git
2
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

Update extension to use react app

Saoud Rizwan 1 год назад
Родитель
571c7d217e
Сommit
cd8bbc5c7f
4 измененных файлов с 85 добавлено и 42 удалено
Единый вид Показать статистику Diff
  1. 5 1
      package.json
  2. 75 40
      src/providers/SidebarProvider.ts
  3. 3 0
      src/webview/main.ts
  4. 2 1
      tsconfig.json

+ 5 - 1
package.json
Просмотреть файл 

@@ -65,7 +65,11 @@
 
     "pretest": "npm run compile-tests && npm run compile && npm run lint",
 
     "pretest": "npm run compile-tests && npm run compile && npm run lint",
 
     "check-types": "tsc --noEmit",
 
     "check-types": "tsc --noEmit",
 
     "lint": "eslint src --ext ts",
 
     "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": {
 
   "devDependencies": {
 
     "@types/mocha": "^10.0.7",
 
     "@types/mocha": "^10.0.7",

+ 75 - 40
src/providers/SidebarProvider.ts
Просмотреть файл 

@@ -3,6 +3,13 @@ import { getNonce } from "../utilities/getNonce"
 
 //import * as weather from "weather-js"
 
 //import * as weather from "weather-js"
 
 import * as vscode from "vscode"
 
 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 {
 
 export class SidebarProvider implements vscode.WebviewViewProvider {
 
 	public static readonly viewType = "vscodeSidebar.openview"
 
 	public static readonly viewType = "vscodeSidebar.openview"
 
 
 
@@ -23,56 +30,84 @@ export class SidebarProvider implements vscode.WebviewViewProvider {
 
 			localResourceRoots: [this._extensionUri],
 
 			localResourceRoots: [this._extensionUri],
 
 		}
 
 		}
 
 		webviewView.webview.html = this.getHtmlContent(webviewView.webview)
 
 		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 {
 
 	private getHtmlContent(webview: vscode.Webview): string {
 
 		// Get the local path to main script run in the webview,
 
 		// Get the local path to main script run in the webview,
 
 		// then convert it to a uri we can use 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"])
 
+
 
+		// const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "main.js"))
 
 
 
-		// Same for stylesheet
 
-		const stylesheetUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "main.css"))
 
+		// 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.
 
 		// Use a nonce to only allow a specific script to be run.
 
 		const nonce = getNonce()
 
 		const nonce = getNonce()
 
 
 
-		return `<!DOCTYPE html>
 
-			<html lang="en">
 
-			<head>
 
-				<meta charset="UTF-8">
 
-				<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
 
-				<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-
 
-        
-
 
-				<link href="${styleResetUri}" rel="stylesheet">
 
-				<link href="${styleVSCodeUri}" rel="stylesheet">
 
-				
-        <link href="${stylesheetUri}" rel="stylesheet">
 
-				
-			</head>
 
-
 
-			<body>
 
-			<section class="wrapper">
 
-      <div class="container">
 
-            <div class="content">
 
-                <h2 class="subtitle">Subscribe today</h2>
 
-                <input type="text" class="mail" placeholder="Your email address" name="mail" required>
 
-                
-                <button class="add-color-button">Subscribe</button>
 
-                
-                <p class="text">We won’t send you spam.</p>
 
-                <p class="text">Unsubscribe at any time.</p>
 
-                
-            </div>
 
-      </div>
 
-			</section>
 
-			<!--<script nonce="${nonce}" src="${scriptUri}"></script>-->
 
-      </body>
 
-
 
-			</html>`
 
+		// Tip: Install the es6-string-html VS Code extension to enable code highlighting below
 
+		return /*html*/ `
 
+        <!DOCTYPE html>
 
+        <html lang="en">
 
+          <head>
 
+            <meta charset="utf-8">
 
+            <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
 
+            <meta name="theme-color" content="#000000">
 
+            <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';">
 
+            <link rel="stylesheet" type="text/css" href="${stylesUri}">
 
+            <title>Hello World</title>
 
+          </head>
 
+          <body>
 
+            <noscript>You need to enable JavaScript to run this app.</noscript>
 
+            <div id="root"></div>
 
+            <script nonce="${nonce}" src="${scriptUri}"></script>
 
+          </body>
 
+        </html>
 
+      `
 
+	}
 
+
 
+	/**
 
+	 * 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
 
+
 
+			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)
 
+			}
 
+		})
 
 	}
 
 	}
 
 }
 
 }

+ 3 - 0
src/webview/main.ts
Просмотреть файл 

@@ -16,6 +16,9 @@ function handleHowdyClick() {
 
     text: "Hey there partner! 🤠",
 
     text: "Hey there partner! 🤠",
 
   });
 
   });
 
 }
 
 }
 
+
 
+https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/default/weather-webview/src/webview/main.ts
 
+
 
   */
 
   */

+ 2 - 1
tsconfig.json
Просмотреть файл 

@@ -19,5 +19,6 @@
 
 		"target": "es2022",
 
 		"target": "es2022",
 
 		"useDefineForClassFields": true,
 
 		"useDefineForClassFields": true,
 
 		"useUnknownInCatchVariables": false
 
 		"useUnknownInCatchVariables": false
 
-	}
 
+	},
 
+	"exclude": ["node_modules", ".vscode-test", "webview-ui"]
 
 }
 
 }