feat(vscode): add support for GitHub Codespaces

fwouts · Dec 2, 2023 · 8e2f5d5 · 8e2f5d5
1 parent b1ee53e
commit 8e2f5d5
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/integrations/vscode/src/preview-panel.ts b/integrations/vscode/src/preview-panel.ts
@@ -67,7 +67,9 @@ export function updatePreviewPanel(
       </style>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <meta http-equiv="Content-Security-Policy" content="default-src http://localhost:*; script-src 'unsafe-inline'">
+      <meta http-equiv="Content-Security-Policy" content="default-src ${previewBaseUrl} ${
+      previewPanel.webview.cspSource
+    }; script-src 'unsafe-inline'">
       <script>
         const vscode = acquireVsCodeApi();
         let iframe;

diff --git a/integrations/vscode/src/preview-server.ts b/integrations/vscode/src/preview-server.ts
@@ -1,4 +1,5 @@
 import { exclusivePromiseRunner } from "exclusive-promises";
+import vscode from "vscode";
 import type { PreviewJsState } from "./state.js";
 
 const locking = exclusivePromiseRunner();
@@ -23,10 +24,19 @@ export async function ensurePreviewServerStarted(
       }
       const { url } = await state.client.startPreview({
         rootDir,
+        ...(vscode.env.uiKind === vscode.UIKind.Web
+          ? {
+              // GitHub Codespaces
+              clientPort: 443,
+            }
+          : {}),
       });
+      const remoteCompatibleUrl = await vscode.env
+        .asExternalUri(vscode.Uri.parse(url))
+        .then((uri) => uri.toString());
       state.currentPreview = {
         rootDir,
-        url,
+        url: remoteCompatibleUrl,
       };
     }
     return state.currentPreview;

diff --git a/loader/src/worker-api.ts b/loader/src/worker-api.ts
@@ -9,6 +9,7 @@ export type WorkerData = {
   inMemorySnapshot: InMemoryFilesSnapshot;
   frameworkPluginName: string;
   port?: number;
+  clientPort?: number;
   onServerStartModuleName?: string;
 };
 

diff --git a/loader/src/worker.ts b/loader/src/worker.ts
@@ -19,6 +19,7 @@ async function runWorker({
   inMemorySnapshot,
   frameworkPluginName,
   port,
+  clientPort,
   onServerStartModuleName,
 }: WorkerData) {
   const logger = createLogger(
@@ -117,6 +118,7 @@ async function runWorker({
 
   const server = await workspace.startServer({
     port,
+    clientPort,
   });
 
   sendMessageFromWorker({
@@ -142,16 +144,18 @@ const waitForInit = (message: ToWorkerMessage) => {
 };
 process.on("message", waitForInit);
 
-const parentProcessId = parseInt(process.env["PREVIEWJS_PARENT_PROCESS_PID"] || "0");
+const parentProcessId = parseInt(
+  process.env["PREVIEWJS_PARENT_PROCESS_PID"] || "0"
+);
 if (!parentProcessId) {
-  throw new Error("Missing environment variable: PREVIEWJS_PARENT_PROCESS_PID")
+  throw new Error("Missing environment variable: PREVIEWJS_PARENT_PROCESS_PID");
 }
 // Kill the worker if the parent process dies.
 setInterval(() => {
   try {
     process.kill(parentProcessId, 0);
     // Parent process is still alive, see https://stackoverflow.com/a/21296291.
-  } catch(e) {
+  } catch (e) {
     process.exit(0);
   }
-}, 1000)
+}, 1000);