feat: file-system API

Author: AriPerkkio

src/fixtures/webcontainer.ts

@@ -1,5 +1,6 @@
 import { commands } from "@vitest/browser/context";
 import {
+  type BufferEncoding,
   type FileSystemTree,
   WebContainer as WebContainerApi,
 } from "@webcontainer/api";
@@ -81,4 +82,28 @@ export class WebContainer {
 
     return output.trim();
   }
+
+  async readFile(path: string, encoding: BufferEncoding = "utf8") {
+    return this._instance.fs.readFile(path, encoding);
+  }
+
+  async writeFile(path: string, data: string, encoding = "utf8") {
+    return this._instance.fs.writeFile(path, data, { encoding });
+  }
+
+  async rename(oldPath: string, newPath: string) {
+    return this._instance.fs.rename(oldPath, newPath);
+  }
+
+  async mkdir(path: string) {
+    return this._instance.fs.mkdir(path);
+  }
+
+  async readdir(path: string) {
+    return this._instance.fs.readdir(path);
+  }
+
+  async rm(path: string) {
+    return this._instance.fs.rm(path);
+  }
 }

test/file-system.test.ts

@@ -0,0 +1,42 @@
+import { expect } from "vitest";
+import { test } from "../src";
+
+test("user can create files and folders into webcontainer", async ({
+  webcontainer,
+}) => {
+  await webcontainer.writeFile("/example", "Hello world");
+  await webcontainer.mkdir("/folder");
+
+  await expect(webcontainer.readdir("/")).resolves.toStrictEqual([
+    "example",
+    "folder",
+  ]);
+  await expect(webcontainer.readFile("/example")).resolves.toBe("Hello world");
+});
+
+test("user can rename files and folders in webcontainer", async ({
+  webcontainer,
+}) => {
+  await webcontainer.writeFile("/example", "Hello world");
+  await webcontainer.mkdir("/folder");
+
+  await webcontainer.rename("/example", "/example-2");
+  await webcontainer.rename("/folder", "/folder-2");
+
+  await expect(webcontainer.readdir("/")).resolves.toStrictEqual([
+    "example-2",
+    "folder-2",
+  ]);
+});
+
+test("user can remove files from webcontainer", async ({ webcontainer }) => {
+  await webcontainer.writeFile("/first", "1");
+  await webcontainer.writeFile("/second", "2");
+  await webcontainer.writeFile("/third", "3");
+
+  await webcontainer.rm("/second");
+  await expect(webcontainer.readdir("/")).resolves.toStrictEqual([
+    "first",
+    "third",
+  ]);
+});

test/preview.test.ts

@@ -11,3 +11,24 @@ test("user can see server output in preview", async ({
 
   await preview.getByRole("heading", { level: 1, name: "Hello Vite!" });
 });
+
+test("user can see HMR changes in preview", async ({
+  webcontainer,
+  preview,
+}) => {
+  await webcontainer.mount("test/fixtures/starter-vite");
+
+  await webcontainer.runCommand("npm", ["install"]);
+  void webcontainer.runCommand("npm", ["run", "dev"]);
+
+  await preview.getByRole("heading", { level: 1, name: "Hello Vite!" });
+
+  const content = await webcontainer.readFile("/src/main.js");
+
+  await webcontainer.writeFile(
+    "/src/main.js",
+    content.replace("Hello Vite!", "Modified title!"),
+  );
+
+  await preview.getByRole("heading", { level: 1, name: "Modified title!" });
+});