From e5dcd7d895f496379ff7f5f2fce71fcdcab749d3 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Mon, 9 Sep 2024 14:23:47 +0100
Subject: [PATCH 1/2] fix(sw): load transpiled files

---
 sandpack-client/src/clients/runtime/index.ts  | 66 +++++++++++++++----
 sandpack-client/src/clients/runtime/types.ts  |  2 +
 .../src/components/FileTabs/index.tsx         |  7 +-
 3 files changed, 58 insertions(+), 17 deletions(-)

diff --git a/sandpack-client/src/clients/runtime/index.ts b/sandpack-client/src/clients/runtime/index.ts
index 358ef398..5e544863 100644
--- a/sandpack-client/src/clients/runtime/index.ts
+++ b/sandpack-client/src/clients/runtime/index.ts
@@ -9,6 +9,7 @@ import type {
   ListenerFunction,
   Modules,
   SandboxSetup,
+  SandpackBundlerFile,
   SandpackBundlerFiles,
   SandpackError,
   UnsubscribeFunction,
@@ -225,17 +226,48 @@ export class SandpackRuntime extends SandpackClient {
     this.iframe.addEventListener("load", sendMessage);
   }
 
-  private handleWorkerRequest(
+  private async handleWorkerRequest(
     request: IPreviewRequestMessage,
     port: MessagePort
   ) {
+    const notFound = () => {
+      const responseMessage: IPreviewResponseMessage = {
+        $channel: CHANNEL_NAME,
+        $type: "preview/response",
+        id: request.id,
+        headers: {
+          "Content-Type": "text/html; charset=utf-8",
+        },
+        status: 404,
+        body: "File not found",
+      };
+
+      port.postMessage(responseMessage);
+    };
     try {
       const filepath = new URL(request.url, this.bundlerURL).pathname;
 
       const headers: Record<string, string> = {};
 
       const files = this.getFiles();
-      const body = files[filepath].code;
+      let file = files[filepath];
+
+      if (!file) {
+        const modulesFromManager = await this.getTranspiledFiles();
+
+        file = modulesFromManager.find((item) =>
+          item.path.endsWith(filepath)
+        ) as SandpackBundlerFile;
+
+        console.log(file);
+
+        if (!file) {
+          notFound();
+          return;
+        }
+      }
+
+      const body = file.code;
 
       if (!headers["Content-Type"]) {
         const extension = getExtension(filepath);
@@ -256,18 +288,8 @@ export class SandpackRuntime extends SandpackClient {
 
       port.postMessage(responseMessage);
     } catch (err) {
-      const responseMessage: IPreviewResponseMessage = {
-        $channel: CHANNEL_NAME,
-        $type: "preview/response",
-        id: request.id,
-        headers: {
-          "Content-Type": "text/html; charset=utf-8",
-        },
-        status: 404,
-        body: "File not found",
-      };
-
-      port.postMessage(responseMessage);
+      console.error(err);
+      notFound();
     }
   }
 
@@ -447,6 +469,22 @@ export class SandpackRuntime extends SandpackClient {
       this.dispatch({ type: "get-transpiler-context" });
     });
 
+  public getTranspiledFiles = (): Promise<
+    Array<{ path: string; code: string }>
+  > => {
+    return new Promise((resolve) => {
+      const unsubscribe = this.listen((message) => {
+        if (message.type === "all-modules") {
+          resolve(message.data);
+
+          unsubscribe();
+        }
+      });
+
+      this.dispatch({ type: "get-modules" });
+    });
+  };
+
   private getFiles(): SandpackBundlerFiles {
     const { sandboxSetup } = this;
 
diff --git a/sandpack-client/src/clients/runtime/types.ts b/sandpack-client/src/clients/runtime/types.ts
index dc0501c0..e8d07580 100644
--- a/sandpack-client/src/clients/runtime/types.ts
+++ b/sandpack-client/src/clients/runtime/types.ts
@@ -94,6 +94,8 @@ export type SandpackRuntimeMessage = BaseSandpackMessage &
     | {
         type: "get-transpiler-context";
       }
+    | { type: "get-modules" }
+    | { type: "all-modules"; data: Array<{ path: string; code: string }> }
     | {
         type: "activate-react-devtools";
       }
diff --git a/sandpack-react/src/components/FileTabs/index.tsx b/sandpack-react/src/components/FileTabs/index.tsx
index f9f22510..0118e264 100644
--- a/sandpack-react/src/components/FileTabs/index.tsx
+++ b/sandpack-react/src/components/FileTabs/index.tsx
@@ -87,6 +87,7 @@ export interface FileTabsProps {
 export const FileTabs = ({
   closableTabs,
   className,
+  activeFileUniqueId,
   ...props
 }: FileTabsProps & React.HTMLAttributes<HTMLDivElement>): JSX.Element => {
   const { sandpack } = useSandpack();
@@ -200,19 +201,19 @@ export const FileTabs = ({
       >
         {visibleFiles.map((filePath, index) => (
           <div
-            aria-controls={`${filePath}-${props.activeFileUniqueId}-tab-panel`}
+            aria-controls={`${filePath}-${activeFileUniqueId}-tab-panel`}
             aria-selected={filePath === activeFile}
             className={classNames("tab-container", [tabContainer])}
             onKeyDown={(e) => onKeyDown({ e, index })}
             onMouseEnter={() => setIsHoveredIndex(index)}
             onMouseLeave={() => setIsHoveredIndex(null)}
             role="tab"
+            key={filePath}
           >
             <button
-              key={filePath}
               className={classNames("tab-button", [buttonClassName, tabButton])}
               data-active={filePath === activeFile}
-              id={`${filePath}-${props.activeFileUniqueId}-tab`}
+              id={`${filePath}-${activeFileUniqueId}-tab`}
               onClick={(): void => setActiveFile(filePath)}
               tabIndex={filePath === activeFile ? 0 : -1}
               title={filePath}

From 695fd0f1fcbb4375b85ae136f2a2f4bd9c09d672 Mon Sep 17 00:00:00 2001
From: Danilo Woznica <danilowoz@gmail.com>
Date: Tue, 10 Sep 2024 08:40:03 +0100
Subject: [PATCH 2/2] fix(sw): load transpiled files

---
 sandpack-client/src/clients/runtime/index.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/sandpack-client/src/clients/runtime/index.ts b/sandpack-client/src/clients/runtime/index.ts
index 5e544863..97028b65 100644
--- a/sandpack-client/src/clients/runtime/index.ts
+++ b/sandpack-client/src/clients/runtime/index.ts
@@ -259,8 +259,6 @@ export class SandpackRuntime extends SandpackClient {
           item.path.endsWith(filepath)
         ) as SandpackBundlerFile;
 
-        console.log(file);
-
         if (!file) {
           notFound();
           return;