fix: mount binary files properly

Author: AriPerkkio

package.json

@@ -45,7 +45,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@webcontainer/api": "^1.6.1"
+    "@webcontainer/api": "^1.6.1",
+    "@webcontainer/snapshot": "^0.1.0"
   },
   "peerDependencies": {
     "@vitest/browser": "^3.1",

pnpm-lock.yaml

@@ -1,13 +1,12 @@
-import { readdir, readFile, stat } from "node:fs/promises";
-import { relative, resolve, sep } from "node:path";
-import { FileSystemTree } from "@webcontainer/api";
+import { resolve } from "node:path";
+import { snapshot } from "@webcontainer/snapshot";
 import type { BrowserCommand } from "vitest/node";
 
 // custom command to read directories from browser context. Used for mounting directories inside webcontainer
 export const readDirectory: BrowserCommand<[directory: string]> = async (
   context,
   directory,
-): Promise<FileSystemTree> => {
+): Promise<string> => {
   const root = context.project.config.root;
   const resolved = resolve(root, directory);
 
@@ -21,55 +20,7 @@ export const readDirectory: BrowserCommand<[directory: string]> = async (
     );
   }
 
-  const files = await recursiveRead(directory);
-  const tree: FileSystemTree = {};
+  const tree = await snapshot(directory);
 
-  for (const { filePath, contents } of files) {
-    const segments = filePath.split("/");
-
-    let currentTree: FileSystemTree = tree;
-
-    for (let i = 0; i < segments.length; i++) {
-      const name = segments[i];
-
-      if (i === segments.length - 1) {
-        currentTree[name] = { file: { contents } };
-      } else {
-        let folder = currentTree[name];
-
-        if (!folder || !("directory" in folder)) {
-          folder = { directory: {} };
-          currentTree[name] = folder;
-        }
-
-        currentTree = folder.directory;
-      }
-    }
-  }
-
-  return tree;
-
-  async function recursiveRead(
-    dir: string,
-  ): Promise<{ filePath: string; contents: string }[]> {
-    const files = await readdir(dir);
-
-    const output = await Promise.all(
-      files.map(async (file) => {
-        const filePath = resolve(dir, file);
-        const fileStat = await stat(filePath);
-
-        if (fileStat.isDirectory()) {
-          return recursiveRead(filePath);
-        }
-
-        return {
-          filePath: relative(directory, filePath).replaceAll(sep, "/"),
-          contents: await readFile(filePath, "utf-8"),
-        };
-      }),
-    );
-
-    return output.flat();
-  }
+  return tree.toString("base64");
 };

src/commands/index.ts

@@ -17,10 +17,13 @@ export class FileSystem {
    */
   async mount(filesOrPath: string | FileSystemTree) {
     if (typeof filesOrPath === "string") {
-      filesOrPath = await commands.readDirectory(filesOrPath);
+      const tree = await commands.readDirectory(filesOrPath);
+      const binary = Uint8Array.from(atob(tree), (c) => c.charCodeAt(0));
+
+      return await this._instance.mount(binary);
     }
 
-    return await this._instance.mount(filesOrPath as FileSystemTree);
+    return await this._instance.mount(filesOrPath);
   }
 
   /**

src/fixtures/file-system.ts

@@ -1,8 +1,7 @@
 import type {} from "@vitest/browser/context";
-import { FileSystemTree } from "@webcontainer/api";
 
 declare module "@vitest/browser/context" {
   interface BrowserCommands {
-    readDirectory: (directory: string) => Promise<FileSystemTree>;
+    readDirectory: (directory: string) => Promise<string>;
   }
 }

src/types.d.ts

@@ -7,7 +7,7 @@ test("user can mount directories from file-system to webcontainer", async ({
   await webcontainer.mount("test/fixtures/mount-example");
 
   const ls = await webcontainer.runCommand("ls");
-  expect(ls).toMatchInlineSnapshot(`"file-1.ts nested"`);
+  expect(ls).toMatchInlineSnapshot(`"file-1.ts image.png nested"`);
 
   const lsNested = await webcontainer.runCommand("ls", ["nested"]);
   expect(lsNested).toMatchInlineSnapshot(`"file-2.ts"`);
@@ -21,6 +21,18 @@ test("user can mount directories from file-system to webcontainer", async ({
   expect(catNestedFile).toMatchInlineSnapshot(
     `"export default "Hello from nested file";"`,
   );
+
+  const pngFile = await webcontainer.runCommand("xxd", ["image.png"]);
+  expect(pngFile).toMatchInlineSnapshot(`
+    "00000000: 8950 4e47 0d0a 1a0a 0000 000d 4948 4452  .PNG........IHDR
+    00000010: 0000 0001 0000 0001 0103 0000 0025 db56  .............%.V
+    00000020: ca00 0000 0173 5247 4201 d9c9 2c7f 0000  .....sRGB...,...
+    00000030: 0009 7048 5973 0000 0b13 0000 0b13 0100  ..pHYs..........
+    00000040: 9a9c 1800 0000 0350 4c54 45ff ffff a7c4  .......PLTE.....
+    00000050: 1bc8 0000 000a 4944 4154 789c 6364 0000  ......IDATx.cd..
+    00000060: 0004 0002 2164 ad6a 0000 0000 4945 4e44  ....!d.j....IEND
+    00000070: ae42 6082                                .B\`."
+  `);
 });
 
 test("user can mount inlined FileSystemTree to webcontainer", async ({