fix(sw): get transpiled files from bundler (#1196)

* fix(sw): load transpiled files

* fix(sw): load transpiled files

Author: danilowoz

sandpack-client/src/clients/runtime/index.ts

@@ -9,6 +9,7 @@ import type {
   ListenerFunction,
   Modules,
   SandboxSetup,
+  SandpackBundlerFile,
   SandpackBundlerFiles,
   SandpackError,
   UnsubscribeFunction,
@@ -225,17 +226,46 @@ 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;
+
+        if (!file) {
+          notFound();
+          return;
+        }
+      }
+
+      const body = file.code;
 
       if (!headers["Content-Type"]) {
         const extension = getExtension(filepath);
@@ -256,18 +286,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 +467,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;
 

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";
       }

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}