refactor: use native Node.js instead of fs-extra (#13736)

Author: MichaelDeBoey

integration/cli-test.ts

@@ -1,10 +1,10 @@
 import { spawnSync } from "node:child_process";
+import { existsSync, rmSync } from "node:fs";
 import * as path from "node:path";
 
 import { expect, test } from "@playwright/test";
 import dedent from "dedent";
 import semver from "semver";
-import fse from "fs-extra";
 
 import { createProject } from "./helpers/vite";
 
@@ -129,13 +129,13 @@ test.describe("cli", () => {
       let entryClientFile = path.join(cwd, "app", "entry.client.tsx");
       let entryServerFile = path.join(cwd, "app", "entry.server.tsx");
 
-      expect(fse.existsSync(entryServerFile)).toBeFalsy();
-      expect(fse.existsSync(entryClientFile)).toBeFalsy();
+      expect(existsSync(entryServerFile)).toBeFalsy();
+      expect(existsSync(entryClientFile)).toBeFalsy();
 
       run(["reveal"], { cwd });
 
-      expect(fse.existsSync(entryServerFile)).toBeTruthy();
-      expect(fse.existsSync(entryClientFile)).toBeTruthy();
+      expect(existsSync(entryServerFile)).toBeTruthy();
+      expect(existsSync(entryClientFile)).toBeTruthy();
     });
 
     test("generates specified entries in the app directory", async () => {
@@ -144,31 +144,31 @@ test.describe("cli", () => {
       let entryClientFile = path.join(cwd, "app", "entry.client.tsx");
       let entryServerFile = path.join(cwd, "app", "entry.server.tsx");
 
-      expect(fse.existsSync(entryServerFile)).toBeFalsy();
-      expect(fse.existsSync(entryClientFile)).toBeFalsy();
+      expect(existsSync(entryServerFile)).toBeFalsy();
+      expect(existsSync(entryClientFile)).toBeFalsy();
 
       run(["reveal", "entry.server"], { cwd });
-      expect(fse.existsSync(entryServerFile)).toBeTruthy();
-      expect(fse.existsSync(entryClientFile)).toBeFalsy();
-      fse.removeSync(entryServerFile);
+      expect(existsSync(entryServerFile)).toBeTruthy();
+      expect(existsSync(entryClientFile)).toBeFalsy();
+      rmSync(entryServerFile);
 
       run(["reveal", "entry.client"], { cwd });
-      expect(fse.existsSync(entryClientFile)).toBeTruthy();
-      expect(fse.existsSync(entryServerFile)).toBeFalsy();
+      expect(existsSync(entryClientFile)).toBeTruthy();
+      expect(existsSync(entryServerFile)).toBeFalsy();
     });
 
     test("generates entry.{server,client}.jsx in the app directory with --no-typescript", async () => {
       const cwd = await createProject();
       let entryClientFile = path.join(cwd, "app", "entry.client.jsx");
       let entryServerFile = path.join(cwd, "app", "entry.server.jsx");
 
-      expect(fse.existsSync(entryServerFile)).toBeFalsy();
-      expect(fse.existsSync(entryClientFile)).toBeFalsy();
+      expect(existsSync(entryServerFile)).toBeFalsy();
+      expect(existsSync(entryClientFile)).toBeFalsy();
 
       run(["reveal", "--no-typescript"], { cwd });
 
-      expect(fse.existsSync(entryServerFile)).toBeTruthy();
-      expect(fse.existsSync(entryClientFile)).toBeTruthy();
+      expect(existsSync(entryServerFile)).toBeTruthy();
+      expect(existsSync(entryClientFile)).toBeTruthy();
     });
   });
 });

integration/helpers/create-fixture.ts

@@ -1,8 +1,9 @@
+import { existsSync, readFileSync } from "node:fs";
+import { cp, mkdir, readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
 import type { Writable } from "node:stream";
 import { Readable } from "node:stream";
-import path from "node:path";
 import url from "node:url";
-import fse from "fs-extra";
 import express from "express";
 import getPort from "get-port";
 import stripIndent from "strip-indent";
@@ -51,7 +52,7 @@ export async function createFixture(init: FixtureInit, mode?: ServerMode) {
   ).href;
 
   let getBrowserAsset = async (asset: string) => {
-    return fse.readFile(
+    return readFile(
       path.join(projectDir, "public", asset.replace(/^\//, "")),
       "utf8"
     );
@@ -64,7 +65,7 @@ export async function createFixture(init: FixtureInit, mode?: ServerMode) {
       isSpaMode: init.spaMode,
       prerender: init.prerender,
       requestDocument() {
-        let html = fse.readFileSync(
+        let html = readFileSync(
           path.join(projectDir, "build/client/index.html")
         );
         return new Response(html, {
@@ -102,25 +103,21 @@ export async function createFixture(init: FixtureInit, mode?: ServerMode) {
           "client",
           "__spa-fallback.html"
         );
-        let html = fse.existsSync(mainPath)
-          ? fse.readFileSync(mainPath)
-          : fse.readFileSync(fallbackPath);
+        let html = existsSync(mainPath)
+          ? readFileSync(mainPath)
+          : readFileSync(fallbackPath);
         return new Response(html, {
           headers: {
             "Content-Type": "text/html",
           },
         });
       },
       requestResource(href: string) {
-        let data = fse.readFileSync(
-          path.join(projectDir, "build/client", href)
-        );
+        let data = readFileSync(path.join(projectDir, "build/client", href));
         return new Response(data);
       },
       async requestSingleFetchData(href: string) {
-        let data = fse.readFileSync(
-          path.join(projectDir, "build/client", href)
-        );
+        let data = readFileSync(path.join(projectDir, "build/client", href));
         let stream = createReadableStreamFromReadable(Readable.from(data));
         return {
           status: 200,
@@ -280,7 +277,7 @@ export async function createAppFixture(fixture: Fixture, mode?: ServerMode) {
         let port = await getPort();
         let app = express();
         app.use(express.static(path.join(fixture.projectDir, "build/client")));
-        app.get("*", (_, res, next) =>
+        app.get("*", (_, res) =>
           res.sendFile(path.join(fixture.projectDir, "build/client/index.html"))
         );
         let server = app.listen(port);
@@ -300,11 +297,11 @@ export async function createAppFixture(fixture: Fixture, mode?: ServerMode) {
           let file = req.path.endsWith(".data")
             ? req.path
             : req.path + "/index.html";
-          if (file.endsWith(".html") && !fse.existsSync(path.join(dir, file))) {
+          if (file.endsWith(".html") && !existsSync(path.join(dir, file))) {
             file = "__spa-fallback.html";
           }
           let filePath = path.join(dir, file);
-          if (fse.existsSync(filePath)) {
+          if (existsSync(filePath)) {
             res.sendFile(filePath, next);
           } else {
             // Avoid a built-in console error from `sendFile` on 404's
@@ -375,8 +372,8 @@ export async function createFixtureProject(
   let projectDir = path.join(TMP_DIR, projectName);
   let port = init.port ?? (await getPort());
 
-  await fse.ensureDir(projectDir);
-  await fse.copy(integrationTemplateDir, projectDir);
+  await mkdir(projectDir, { recursive: true });
+  await cp(integrationTemplateDir, projectDir, { recursive: true });
 
   let hasViteConfig = Object.keys(init.files ?? {}).some((filename) =>
     filename.startsWith("vite.config.")
@@ -463,10 +460,10 @@ async function writeTestFiles(
   await Promise.all(
     Object.keys(files ?? {}).map(async (filename) => {
       let filePath = path.join(dir, filename);
-      await fse.ensureDir(path.dirname(filePath));
+      await mkdir(path.dirname(filePath), { recursive: true });
       let file = files![filename];
 
-      await fse.writeFile(filePath, stripIndent(file));
+      await writeFile(filePath, stripIndent(file));
     })
   );
 }

integration/helpers/vite.ts

@@ -1,11 +1,10 @@
 import { spawn, spawnSync, type ChildProcess } from "node:child_process";
-import path from "pathe";
-import fs from "node:fs/promises";
-import type { Readable } from "node:stream";
-import url from "node:url";
+import { cp, mkdir, readFile, writeFile } from "node:fs/promises";
 import { createRequire } from "node:module";
 import { platform } from "node:os";
-import fse from "fs-extra";
+import type { Readable } from "node:stream";
+import url from "node:url";
+import path from "pathe";
 import stripIndent from "strip-indent";
 import waitOn from "wait-on";
 import getPort from "get-port";
@@ -211,18 +210,18 @@ export async function createProject(
 ) {
   let projectName = `rr-${Math.random().toString(32).slice(2)}`;
   let projectDir = path.join(TMP_DIR, projectName);
-  await fse.ensureDir(projectDir);
+  await mkdir(projectDir, { recursive: true });
 
   // base template
   let templateDir = path.resolve(__dirname, templateName);
-  await fse.copy(templateDir, projectDir, { errorOnExist: true });
+  await cp(templateDir, projectDir, { errorOnExist: true, recursive: true });
 
   // user-defined files
   await Promise.all(
     Object.entries(files).map(async ([filename, contents]) => {
       let filepath = path.join(projectDir, filename);
-      await fse.ensureDir(path.dirname(filepath));
-      await fse.writeFile(filepath, stripIndent(contents));
+      await mkdir(path.dirname(filepath), { recursive: true });
+      await writeFile(filepath, stripIndent(contents));
     })
   );
 
@@ -231,7 +230,7 @@ export async function createProject(
 
 // Avoid "Warning: The 'NO_COLOR' env is ignored due to the 'FORCE_COLOR' env
 // being set" in vite-ecosystem-ci which breaks empty stderr assertions. To fix
-// this we always ensure that only NO_COLOR is set after spreading process.env.
+// this, we always ensure that only NO_COLOR is set after spreading process.env.
 const colorEnv = {
   FORCE_COLOR: undefined,
   NO_COLOR: "1",
@@ -490,11 +489,11 @@ export function createEditor(projectDir: string) {
     transform: (contents: string) => string
   ) {
     let filepath = path.join(projectDir, file);
-    let contents = await fs.readFile(filepath, "utf8");
-    await fs.writeFile(filepath, transform(contents), "utf8");
+    let contents = await readFile(filepath, "utf8");
+    await writeFile(filepath, transform(contents), "utf8");
 
     return async function revert() {
-      await fs.writeFile(filepath, contents, "utf8");
+      await writeFile(filepath, contents, "utf8");
     };
   };
 }

integration/package.json

@@ -22,7 +22,6 @@
     "dedent": "^0.7.0",
     "execa": "^5.1.1",
     "express": "^4.19.2",
-    "fs-extra": "^10.0.0",
     "get-port": "^5.1.1",
     "glob": "8.0.3",
     "isbot": "^5.1.11",

integration/typegen-test.ts

@@ -1,9 +1,10 @@
 import { spawnSync } from "node:child_process";
+import { mkdirSync, renameSync } from "node:fs";
+import { readFile, writeFile } from "node:fs/promises";
 import * as path from "node:path";
 
 import { expect, test } from "@playwright/test";
 import dedent from "dedent";
-import fse from "fs-extra";
 
 import { createProject } from "./helpers/vite";
 
@@ -379,7 +380,8 @@ test.describe("typegen", () => {
         }
       `,
     });
-    fse.moveSync(path.join(cwd, "app"), path.join(cwd, "src/myapp"));
+    mkdirSync(path.join(cwd, "src"));
+    renameSync(path.join(cwd, "app"), path.join(cwd, "src/myapp"));
 
     const proc = typecheck(cwd);
     expect(proc.stdout.toString()).toBe("");
@@ -622,9 +624,15 @@ test.describe("typegen", () => {
         `,
       });
 
-      const tsconfig = await fse.readJson(path.join(cwd, "tsconfig.json"));
+      const tsconfig = JSON.parse(
+        await readFile(path.join(cwd, "tsconfig.json"), "utf-8")
+      );
       tsconfig.compilerOptions.moduleDetection = "force";
-      await fse.writeJson(path.join(cwd, "tsconfig.json"), tsconfig);
+      await writeFile(
+        path.join(cwd, "tsconfig.json"),
+        JSON.stringify(tsconfig),
+        "utf-8"
+      );
 
       const proc = typecheck(cwd);
       expect(proc.stdout.toString()).toBe("");

package.json

@@ -65,7 +65,6 @@
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/cross-spawn": "^6.0.2",
-    "@types/fs-extra": "^8.1.2",
     "@types/glob": "7.2.0",
     "@types/jest": "^29.5.4",
     "@types/jsdom": "^21.1.1",
@@ -90,7 +89,6 @@
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "next",
-    "fs-extra": "^10.1.0",
     "history": "^5.3.0",
     "isbot": "^5.1.11",
     "jest": "^29.6.4",