pacnpal/Roo-Code
1
0
Fork 0
mirror of https://github.com/pacnpal/Roo-Code.git synced 2025-12-20 04:11:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Update extension to use react app

Browse Source
This commit is contained in:
Saoud Rizwan
2024-07-06 02:05:43 -04:00
parent 571c7d217e
commit cd8bbc5c7f
4 changed files with 83 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@@ -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",

111
src/providers/SidebarProvider.ts
View File

@@ -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")) // The CSS file from the React build output
const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "vscode.css")) 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 scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "main.js"))
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> // Tip: Install the es6-string-html VS Code extension to enable code highlighting below
<html lang="en"> return /*html*/ `
<head> <!DOCTYPE html>
<meta charset="UTF-8"> <html lang="en">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; script-src 'nonce-${nonce}';"> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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) {
<link href="${styleResetUri}" rel="stylesheet"> case "hello":
<link href="${styleVSCodeUri}" rel="stylesheet"> // Code that should run in response to the hello message command
vscode.window.showInformationMessage(text)
<link href="${stylesheetUri}" rel="stylesheet"> return
// Add more switch case statements here as more webview message commands
</head> // are created within the webview context (i.e. inside media/main.js)
}
<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>`
} }
} }

3
src/webview/main.ts
View File

@@ -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
*/ */

3
tsconfig.json
View File

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