fix(vscode): content-security-policy in the vscode playground webview…

… causes issues (#1514) Unfortunately this is largely a rollback of #1468, so our dev process will be a bit less streamlined moving forward, but this is necessary to fix the playground for me (see [slack](https://gloo-global.slack.com/archives/C03KV1PJ6EM/p1740369469898939?thread_ts=1740368917.456019&cid=C03KV1PJ6EM); @aaronvg mentions that this also affects users). Possibly wasn't noticed due to vscode vs vscodium vs cursor vs others or even just vscode version skew?  ---- > [!IMPORTANT] > Reverts content security policy changes in `WebPanelView.ts` and removes tasks from `launch.json` to fix VSCode playground webview issues. > > - **Behavior**: > - Reverts content security policy changes in `WebPanelView.ts` to fix issues in the VSCode playground webview. > - Removes `preLaunchTask` and `postDebugTask` from `launch.json` to streamline debugging. > - **HTML Content**: > - Simplifies HTML content setup in `_getWebviewContent()` in `WebPanelView.ts`, removing development-specific scripts and content security policy meta tag. > > <sup>This description was created by </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=BoundaryML%2Fbaml&utm_source=github&utm_medium=referral)<sup> for 0aeec97. It will automatically update as commits are pushed.</sup>
BoundaryML · Feb 24, 2025 · 3510139 · 3510139
1 parent d81b483
commit 3510139
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 39 deletions.
diff --git a/typescript/.vscode/launch.json b/typescript/.vscode/launch.json
@@ -17,9 +17,7 @@
       ],
       "env": {
         "VSCODE_DEBUG_MODE": "true"
-      },
-      "preLaunchTask": "Watch All",
-      "postDebugTask": "Terminate All"
+      }
     },
     {
       "type": "node",

diff --git a/typescript/vscode-ext/packages/vscode/src/panels/WebPanelView.ts b/typescript/vscode-ext/packages/vscode/src/panels/WebPanelView.ts
@@ -154,44 +154,28 @@ export class WebPanelView {
    * rendered within the webview panel
    */
   private _getWebviewContent(webview: Webview, extensionUri: Uri) {
-    const isDevelopment = process.env.VSCODE_DEBUG_MODE === 'true'
-    const nonce = getNonce()
-
-    const getBaseHtml = (scripts: string) => /*html*/ `
-      <!DOCTYPE html>
-      <html lang="en">
-        <head>
-          <meta charset="UTF-8" />
-          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-          <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource} 'unsafe-inline'; script-src 'nonce-${nonce}' 'unsafe-eval' http://localhost:* ws://localhost:*; connect-src ws://localhost:* http://localhost:*; img-src ${webview.cspSource} https:; font-src ${webview.cspSource};">
-          <title>BAML Playground</title>
-          ${isDevelopment ? '' : `<link rel="stylesheet" type="text/css" href="${getUri(webview, extensionUri, ['web-panel', 'dist', 'assets', 'index.css'])}">`}
-        </head>
-        <body>
-          <div id="root"></div>
-          ${scripts}
-        </body>
-      </html>
-    `
+    // The CSS file from the React dist output
+    const stylesUri = getUri(webview, extensionUri, ['web-panel', 'dist', 'assets', 'index.css'])
+    // The JS file from the React dist output
+    const scriptUri = getUri(webview, extensionUri, ['web-panel', 'dist', 'assets', 'index.js'])
 
-    if (isDevelopment) {
-      const devServerPort = process.env.VITE_PORT || '3000'
-      return getBaseHtml(/*html*/ `
-        <script type="module" nonce="${nonce}">
-          import RefreshRuntime from "http://localhost:${devServerPort}/@react-refresh"
-          RefreshRuntime.injectIntoGlobalHook(window)
-          window.$RefreshReg$ = () => {}
-          window.$RefreshSig$ = () => (type) => type
-          window.__vite_plugin_react_preamble_installed__ = true
-        </script>
-        <script type="module" nonce="${nonce}" src="http://localhost:${devServerPort}/@vite/client"></script>
-        <script type="module" nonce="${nonce}" src="http://localhost:${devServerPort}/src/main.tsx"></script>
-      `)
-    }
+    const nonce = getNonce()
 
-    return getBaseHtml(/*html*/ `
-      <script type="module" nonce="${nonce}" src="${getUri(webview, extensionUri, ['web-panel', 'dist', 'assets', 'index.js'])}"></script>
-    `)
+    // 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.0" />
+              <link rel="stylesheet" type="text/css" href="${stylesUri}">
+              <title>Hello World</title>
+            </head>
+            <body>
+              <div id="root">Waiting for react: ${scriptUri}</div>
+              <script type="module" nonce="${nonce}" src="${scriptUri}"></script>
+            </body>
+          </html>`
   }
 
   /**