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

* fix(sw): load transpiled files

* fix(sw): load transpiled files

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}