From 8e2f5d5c42a45bcf87d4efab8475a003facc6636 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Wouts?= <f@zenc.io>
Date: Sat, 2 Dec 2023 23:28:13 +1100
Subject: [PATCH] feat(vscode): add support for GitHub Codespaces

---
 integrations/vscode/src/preview-panel.ts  |  4 +++-
 integrations/vscode/src/preview-server.ts | 12 +++++++++++-
 loader/src/worker-api.ts                  |  1 +
 loader/src/worker.ts                      | 12 ++++++++----
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/integrations/vscode/src/preview-panel.ts b/integrations/vscode/src/preview-panel.ts
index b710b913c24..22e39cc8ce7 100644
--- 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
index 337acb54129..9c28f28f2ab 100644
--- 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
index df92e644d81..b21c788af29 100644
--- 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
index 578e4401c8c..7e1e8eaf3d8 100644
--- 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);