Skip to content

Commit ba307f8

Browse files
mrubensmrubens
authored
Revert "♻️ refactor(webview): move webview HTML generation to WebviewHTMLManager" (#2502)
Revert "♻️ refactor(webview): move webview HTML generation to WebviewHTMLMana…" This reverts commit e70954f.
1 parent 9c3c935 commit ba307f8

File tree

2 files changed

+186
-186
lines changed

2 files changed

+186
-186
lines changed

‎src/core/webview/ClineProvider.ts‎

Lines changed: 186 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ import { supportPrompt } from "../../shared/support-prompt"
2828
import { GlobalFileNames } from "../../shared/globalFileNames"
2929
import { HistoryItem } from "../../shared/HistoryItem"
3030
import { ExtensionMessage } from "../../shared/ExtensionMessage"
31-
import { Mode, PromptComponent, defaultModeSlug } from "../../shared/modes"
31+
import { Mode, PromptComponent, defaultModeSlug, getModeBySlug, getGroupName } from "../../shared/modes"
3232
import { experimentDefault } from "../../shared/experiments"
3333
import { formatLanguage } from "../../shared/language"
3434
import { Terminal, TERMINAL_SHELL_INTEGRATION_TIMEOUT } from "../../integrations/terminal/Terminal"
@@ -47,7 +47,8 @@ import { CustomModesManager } from "../config/CustomModesManager"
4747
import { buildApiHandler } from "../../api"
4848
import { ACTION_NAMES } from "../CodeActionProvider"
4949
import { Cline, ClineOptions } from "../Cline"
50-
import { WebviewHTMLManager } from "./WebviewHTMLManager"
50+
import { getNonce } from "./getNonce"
51+
import { getUri } from "./getUri"
5152
import { telemetryService } from "../../services/telemetry/TelemetryService"
5253
import { getWorkspacePath } from "../../utils/path"
5354
import { webviewMessageHandler } from "./webviewMessageHandler"
@@ -81,7 +82,6 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
8182
public readonly contextProxy: ContextProxy
8283
public readonly providerSettingsManager: ProviderSettingsManager
8384
public readonly customModesManager: CustomModesManager
84-
private readonly webviewHTMLManager: WebviewHTMLManager
8585

8686
constructor(
8787
readonly context: vscode.ExtensionContext,
@@ -92,7 +92,6 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
9292

9393
this.log("ClineProvider instantiated")
9494
this.contextProxy = new ContextProxy(context)
95-
this.webviewHTMLManager = new WebviewHTMLManager(this.contextProxy)
9695
ClineProvider.activeInstances.add(this)
9796

9897
// Register this provider with the telemetry service to enable it to add
@@ -394,8 +393,8 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
394393

395394
webviewView.webview.html =
396395
this.contextProxy.extensionMode === vscode.ExtensionMode.Development
397-
? await this.webviewHTMLManager.getHMRHtmlContent(webviewView.webview)
398-
: this.webviewHTMLManager.getHtmlContent(webviewView.webview)
396+
? await this.getHMRHtmlContent(webviewView.webview)
397+
: this.getHtmlContent(webviewView.webview)
399398

400399
// Sets up an event listener to listen for messages passed from the webview view context
401400
// and executes code based on the message that is recieved
@@ -598,6 +597,187 @@ export class ClineProvider extends EventEmitter<ClineProviderEvents> implements
598597
await this.view?.webview.postMessage(message)
599598
}
600599

600+
private async getHMRHtmlContent(webview: vscode.Webview): Promise<string> {
601+
// Try to read the port from the file
602+
let localPort = "5173" // Default fallback
603+
try {
604+
const fs = require("fs")
605+
const path = require("path")
606+
const portFilePath = path.resolve(__dirname, "../.vite-port")
607+
608+
if (fs.existsSync(portFilePath)) {
609+
localPort = fs.readFileSync(portFilePath, "utf8").trim()
610+
console.log(`[ClineProvider:Vite] Using Vite server port from ${portFilePath}: ${localPort}`)
611+
} else {
612+
console.log(
613+
`[ClineProvider:Vite] Port file not found at ${portFilePath}, using default port: ${localPort}`,
614+
)
615+
}
616+
} catch (err) {
617+
console.error("[ClineProvider:Vite] Failed to read Vite port file:", err)
618+
// Continue with default port if file reading fails
619+
}
620+
621+
const localServerUrl = `localhost:${localPort}`
622+
623+
// Check if local dev server is running.
624+
try {
625+
await axios.get(`http://${localServerUrl}`)
626+
} catch (error) {
627+
vscode.window.showErrorMessage(t("common:errors.hmr_not_running"))
628+
629+
return this.getHtmlContent(webview)
630+
}
631+
632+
const nonce = getNonce()
633+
634+
const stylesUri = getUri(webview, this.contextProxy.extensionUri, [
635+
"webview-ui",
636+
"build",
637+
"assets",
638+
"index.css",
639+
])
640+
641+
const codiconsUri = getUri(webview, this.contextProxy.extensionUri, [
642+
"node_modules",
643+
"@vscode",
644+
"codicons",
645+
"dist",
646+
"codicon.css",
647+
])
648+
649+
const imagesUri = getUri(webview, this.contextProxy.extensionUri, ["assets", "images"])
650+
651+
const file = "src/index.tsx"
652+
const scriptUri = `http://${localServerUrl}/${file}`
653+
654+
const reactRefresh = /*html*/ `
655+
<script nonce="${nonce}" type="module">
656+
import RefreshRuntime from "http://localhost:${localPort}/@react-refresh"
657+
RefreshRuntime.injectIntoGlobalHook(window)
658+
window.$RefreshReg$ = () => {}
659+
window.$RefreshSig$ = () => (type) => type
660+
window.__vite_plugin_react_preamble_installed__ = true
661+
</script>
662+
`
663+
664+
const csp = [
665+
"default-src 'none'",
666+
`font-src ${webview.cspSource}`,
667+
`style-src ${webview.cspSource} 'unsafe-inline' https://* http://${localServerUrl} http://0.0.0.0:${localPort}`,
668+
`img-src ${webview.cspSource} data:`,
669+
`script-src 'unsafe-eval' ${webview.cspSource} https://* https://*.posthog.com http://${localServerUrl} http://0.0.0.0:${localPort} 'nonce-${nonce}'`,
670+
`connect-src https://* https://*.posthog.com ws://${localServerUrl} ws://0.0.0.0:${localPort} http://${localServerUrl} http://0.0.0.0:${localPort}`,
671+
]
672+
673+
return /*html*/ `
674+
<!DOCTYPE html>
675+
<html lang="en">
676+
<head>
677+
<meta charset="utf-8">
678+
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
679+
<meta http-equiv="Content-Security-Policy" content="${csp.join("; ")}">
680+
<link rel="stylesheet" type="text/css" href="${stylesUri}">
681+
<link href="${codiconsUri}" rel="stylesheet" />
682+
<script nonce="${nonce}">
683+
window.IMAGES_BASE_URI = "${imagesUri}"
684+
</script>
685+
<title>Roo Code</title>
686+
</head>
687+
<body>
688+
<div id="root"></div>
689+
${reactRefresh}
690+
<script type="module" src="${scriptUri}"></script>
691+
</body>
692+
</html>
693+
`
694+
}
695+
696+
/**
697+
* Defines and returns the HTML that should be rendered within the webview panel.
698+
*
699+
* @remarks This is also the place where references to the React webview build files
700+
* are created and inserted into the webview HTML.
701+
*
702+
* @param webview A reference to the extension webview
703+
* @param extensionUri The URI of the directory containing the extension
704+
* @returns A template string literal containing the HTML that should be
705+
* rendered within the webview panel
706+
*/
707+
private getHtmlContent(webview: vscode.Webview): string {
708+
// Get the local path to main script run in the webview,
709+
// then convert it to a uri we can use in the webview.
710+
711+
// The CSS file from the React build output
712+
const stylesUri = getUri(webview, this.contextProxy.extensionUri, [
713+
"webview-ui",
714+
"build",
715+
"assets",
716+
"index.css",
717+
])
718+
// The JS file from the React build output
719+
const scriptUri = getUri(webview, this.contextProxy.extensionUri, ["webview-ui", "build", "assets", "index.js"])
720+
721+
// The codicon font from the React build output
722+
// https://github.com/microsoft/vscode-extension-samples/blob/main/webview-codicons-sample/src/extension.ts
723+
// we installed this package in the extension so that we can access it how its intended from the extension (the font file is likely bundled in vscode), and we just import the css fileinto our react app we don't have access to it
724+
// don't forget to add font-src ${webview.cspSource};
725+
const codiconsUri = getUri(webview, this.contextProxy.extensionUri, [
726+
"node_modules",
727+
"@vscode",
728+
"codicons",
729+
"dist",
730+
"codicon.css",
731+
])
732+
733+
const imagesUri = getUri(webview, this.contextProxy.extensionUri, ["assets", "images"])
734+
735+
// const scriptUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "main.js"))
736+
737+
// const styleResetUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "reset.css"))
738+
// const styleVSCodeUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "vscode.css"))
739+
740+
// // Same for stylesheet
741+
// const stylesheetUri = webview.asWebviewUri(vscode.Uri.joinPath(this._extensionUri, "assets", "main.css"))
742+
743+
// Use a nonce to only allow a specific script to be run.
744+
/*
745+
content security policy of your webview to only allow scripts that have a specific nonce
746+
create a content security policy meta tag so that only loading scripts with a nonce is allowed
747+
As your extension grows you will likely want to add custom styles, fonts, and/or images to your webview. If you do, you will need to update the content security policy meta tag to explicity allow for these resources. E.g.
748+
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource}; font-src ${webview.cspSource}; img-src ${webview.cspSource} https:; script-src 'nonce-${nonce}';">
749+
- 'unsafe-inline' is required for styles due to vscode-webview-toolkit's dynamic style injection
750+
- since we pass base64 images to the webview, we need to specify img-src ${webview.cspSource} data:;
751+
752+
in meta tag we add nonce attribute: A cryptographic nonce (only used once) to allow scripts. The server must generate a unique nonce value each time it transmits a policy. It is critical to provide a nonce that cannot be guessed as bypassing a resource's policy is otherwise trivial.
753+
*/
754+
const nonce = getNonce()
755+
756+
// Tip: Install the es6-string-html VS Code extension to enable code highlighting below
757+
return /*html*/ `
758+
<!DOCTYPE html>
759+
<html lang="en">
760+
<head>
761+
<meta charset="utf-8">
762+
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
763+
<meta name="theme-color" content="#000000">
764+
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; font-src ${webview.cspSource}; style-src ${webview.cspSource} 'unsafe-inline'; img-src ${webview.cspSource} data:; script-src 'nonce-${nonce}' https://us-assets.i.posthog.com; connect-src https://openrouter.ai https://api.requesty.ai https://us.i.posthog.com https://us-assets.i.posthog.com;">
765+
<link rel="stylesheet" type="text/css" href="${stylesUri}">
766+
<link href="${codiconsUri}" rel="stylesheet" />
767+
<script nonce="${nonce}">
768+
window.IMAGES_BASE_URI = "${imagesUri}"
769+
</script>
770+
<title>Roo Code</title>
771+
</head>
772+
<body>
773+
<noscript>You need to enable JavaScript to run this app.</noscript>
774+
<div id="root"></div>
775+
<script nonce="${nonce}" type="module" src="${scriptUri}"></script>
776+
</body>
777+
</html>
778+
`
779+
}
780+
601781
/**
602782
* Sets up an event listener to listen for messages passed from the webview context and
603783
* executes code based on the message that is recieved.

0 commit comments

Comments
 (0)