[infra] Remove dependency on fs-extra

Author: bernardobelchior

apps/pigment-css-vite-app/src/pages/fixtures/index.test.js

@@ -1,5 +1,5 @@
 import * as path from 'path';
-import * as fse from 'fs-extra';
+import * as fs from 'node:fs/promises';
 import { chromium } from '@playwright/test';
 
 async function main() {
@@ -74,7 +74,7 @@ async function main() {
 
   async function takeScreenshot({ testcase, route }) {
     const screenshotPath = path.resolve(screenshotDir, `.${route}.png`);
-    await fse.ensureDir(path.dirname(screenshotPath));
+    await fs.mkdir(path.dirname(screenshotPath), { recursive: true });
 
     const explicitScreenshotTarget = await page.$('[data-testid="screenshot-target"]');
     const screenshotTarget = explicitScreenshotTarget || testcase;

package.json

@@ -130,7 +130,6 @@
     "@playwright/test": "1.54.2",
     "@types/babel__core": "^7.20.5",
     "@types/babel__register": "^7.17.3",
-    "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.20",
     "@types/mocha": "^10.0.10",
     "@types/node": "^20.19.10",
@@ -154,7 +153,6 @@
     "eslint-plugin-consistent-default-export-name": "^0.0.15",
     "eslint-plugin-react": "^7.37.5",
     "fast-glob": "^3.3.3",
-    "fs-extra": "^11.3.1",
     "git-url-parse": "^16.1.0",
     "globby": "^14.1.0",
     "jsonc-parser": "^3.3.1",

packages-internal/test-utils/package.json

@@ -46,7 +46,6 @@
     "chai-dom": "^1.12.1",
     "dom-accessibility-api": "^0.7.0",
     "format-util": "^1.0.5",
-    "fs-extra": "^11.3.1",
     "jsdom": "^26.1.0",
     "lodash": "^4.17.21",
     "mocha": "^11.7.1",

packages-internal/test-utils/src/KarmaReporterReactProfiler.js

@@ -1,6 +1,6 @@
 // File is not transpiled.
 const path = require('path');
-const fse = require('fs-extra');
+const fs = require('node:fs');
 
 /**
  * @typedef {object} Browser
@@ -25,7 +25,7 @@ function KarmaReporterReactProfiler(karmaConfig) {
       `Expected karma config to contain reactProfilerReporter.outputDir of type 'string' but got type '${typeof outputDir}'.`,
     );
   }
-  fse.ensureDirSync(outputDir);
+  fs.mkdirSync(outputDir, { recursive: true });
 
   /**
    * @param {Browser} browser
@@ -44,7 +44,7 @@ function KarmaReporterReactProfiler(karmaConfig) {
   this.onBrowserStart = (browser) => {
     allRenders.set(browser.id, {});
     // Create it on start to signal to users where the files will appear
-    fse.ensureDirSync(path.join(outputDir, browser.name));
+    fs.mkdirSync(path.join(outputDir, browser.name), { recursive: true });
 
     browser.emitter.addListener('browser_info', handleBrowserInfo);
   };
@@ -67,10 +67,11 @@ function KarmaReporterReactProfiler(karmaConfig) {
       return;
     }
 
-    fse.ensureDirSync(path.join(outputDir, browser.name));
-    fse.writeJSONSync(path.join(outputDir, browser.name, `${Date.now()}.json`), browserRenders, {
-      spaces: 2,
-    });
+    fs.mkdirSync(path.join(outputDir, browser.name), { recursive: true });
+    fs.writeFileSync(
+      path.join(outputDir, browser.name, `${Date.now()}.json`),
+      JSON.stringify(browserRenders, null, 2),
+    );
   };
 }
 

packages/mui-material/package.json

@@ -62,7 +62,6 @@
     "chai": "^4.5.0",
     "css-mediaquery": "^0.1.2",
     "fast-glob": "^3.3.3",
-    "fs-extra": "^11.3.1",
     "lodash": "^4.17.21",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 import * as path from 'path';
-import * as fse from 'fs-extra';
+import * as fs from 'node:fs/promises';
 import * as colors from '@mui/material/colors';
 
 // use netlify deploy preview if you want to test changes
@@ -38,7 +38,7 @@ ${Object.entries(variants)
 export default ${name};
 `;
 
-  return fse.writeFile(typesFilename, typescript, { encoding: 'utf8' });
+  return fs.writeFile(typesFilename, typescript, { encoding: 'utf8' });
 }
 
 function buildColorPreviews(name, variants) {
@@ -52,7 +52,7 @@ function buildColorPreviews(name, variants) {
 <rect width="100%" height="100%" fill="${color}"/>
 </svg>`;
       const filename = path.resolve(nextPublicPath, getColorHref(name, variant));
-      await fse.writeFile(filename, svg, { encoding: 'utf8' });
+      await fs.writeFile(filename, svg, { encoding: 'utf8' });
     }),
   );
 }

scripts/buildColorTypes.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import path from 'path';
-import fse from 'fs-extra';
+import fs from 'node:fs/promises';
 import glob from 'fast-glob';
 
 const packagePath = process.cwd();
@@ -17,10 +17,17 @@ const buildPath = path.join(packagePath, './build');
 export async function includeFileInBuild(file, target = path.basename(file)) {
   const sourcePath = path.resolve(packagePath, file);
   const targetPath = path.resolve(buildPath, target);
-  await fse.copy(sourcePath, targetPath);
+  await fs.copyFile(sourcePath, targetPath);
   console.log(`Copied ${sourcePath} to ${targetPath}`);
 }
 
+function pathExists(pathToTest) {
+  return fs
+    .stat(pathToTest)
+    .then(() => true)
+    .catch(() => false);
+}
+
 /**
  * Puts a package.json into every immediate child directory of rootDir.
  * That package.json contains information about esm for bundlers so that imports
@@ -39,7 +46,7 @@ export async function createModulePackages({ from, to }) {
   await Promise.all(
     directoryPackages.map(async (directoryPackage) => {
       const packageJsonPath = path.join(to, directoryPackage, 'package.json');
-      const topLevelPathImportsAreCommonJSModules = await fse.pathExists(
+      const topLevelPathImportsAreCommonJSModules = await pathExists(
         path.resolve(path.dirname(packageJsonPath), '../esm'),
       );
 
@@ -55,10 +62,10 @@ export async function createModulePackages({ from, to }) {
       };
 
       const [typingsEntryExist, moduleEntryExists, mainEntryExists] = await Promise.all([
-        fse.pathExists(path.resolve(path.dirname(packageJsonPath), packageJson.types)),
-        fse.pathExists(path.resolve(path.dirname(packageJsonPath), packageJson.module)),
-        fse.pathExists(path.resolve(path.dirname(packageJsonPath), packageJson.main)),
-        fse.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2)),
+        pathExists(path.resolve(path.dirname(packageJsonPath), packageJson.types)),
+        pathExists(path.resolve(path.dirname(packageJsonPath), packageJson.module)),
+        pathExists(path.resolve(path.dirname(packageJsonPath), packageJson.main)),
+        fs.writeFile(packageJsonPath, JSON.stringify(packageJson, null, 2)),
       ]);
 
       const manifestErrorMessages = [];
@@ -81,25 +88,14 @@ export async function createModulePackages({ from, to }) {
   );
 }
 
-export async function typescriptCopy({ from, to }) {
-  if (!(await fse.pathExists(to))) {
-    console.warn(`path ${to} does not exists`);
-    return [];
-  }
-
-  const files = await glob('**/*.d.ts', { cwd: from });
-  const cmds = files.map((file) => fse.copy(path.resolve(from, file), path.resolve(to, file)));
-  return Promise.all(cmds);
-}
-
 export async function cjsCopy({ from, to }) {
-  if (!(await fse.pathExists(to))) {
+  if (!(await pathExists(to))) {
     console.warn(`path ${to} does not exists`);
     return [];
   }
 
   const files = await glob('**/*.cjs', { cwd: from });
-  const cmds = files.map((file) => fse.copy(path.resolve(from, file), path.resolve(to, file)));
+  const cmds = files.map((file) => fs.copyFile(path.resolve(from, file), path.resolve(to, file)));
   return Promise.all(cmds);
 }
 
@@ -139,7 +135,7 @@ function createExportFor(exportName, conditions) {
 }
 
 export async function createPackageFile() {
-  const packageData = await fse.readFile(path.resolve(packagePath, './package.json'), 'utf8');
+  const packageData = await fs.readFile(path.resolve(packagePath, './package.json'), 'utf8');
   const { nyc, scripts, devDependencies, workspaces, ...packageDataOther } =
     JSON.parse(packageData);
 
@@ -177,7 +173,7 @@ export async function createPackageFile() {
   };
 
   const typeDefinitionsFilePath = path.resolve(buildPath, './index.d.ts');
-  if (await fse.pathExists(typeDefinitionsFilePath)) {
+  if (await pathExists(typeDefinitionsFilePath)) {
     newPackageData.types = './index.d.ts';
   }
 
@@ -187,13 +183,13 @@ export async function createPackageFile() {
 
   const targetPath = path.resolve(buildPath, './package.json');
 
-  await fse.writeFile(targetPath, JSON.stringify(newPackageData, null, 2), 'utf8');
+  await fs.writeFile(targetPath, JSON.stringify(newPackageData, null, 2), 'utf8');
   console.log(`Created package.json in ${targetPath}`);
 
   return newPackageData;
 }
 
 export async function prepend(file, string) {
-  const data = await fse.readFile(file, 'utf8');
-  await fse.writeFile(file, string + data, 'utf8');
+  const data = await fs.readFile(file, 'utf8');
+  await fs.writeFile(file, string + data, 'utf8');
 }

scripts/copyFilesUtils.mjs

@@ -1,6 +1,6 @@
 /* eslint-disable no-console */
 import * as path from 'path';
-import * as fse from 'fs-extra';
+import * as fs from 'node:fs/promises';
 import * as prettier from 'prettier';
 import glob from 'fast-glob';
 import * as _ from 'lodash';
@@ -199,7 +199,7 @@ async function generateProptypes(
     });
   });
 
-  const sourceContent = await fse.readFile(sourceFile, 'utf8');
+  const sourceContent = await fs.readFile(sourceFile, 'utf8');
   const isTsFile = /(\.(ts|tsx))/.test(sourceFile);
   // If the component inherits the props from some unstyled components
   // we don't want to add those propTypes again in the Material UI/Joy UI propTypes
@@ -296,7 +296,7 @@ async function generateProptypes(
   const formatted = fixBabelGeneratorIssues(prettified);
   const correctedLineEndings = fixLineEndings(sourceContent, formatted);
 
-  await fse.writeFile(sourceFile, correctedLineEndings);
+  await fs.writeFile(sourceFile, correctedLineEndings);
 }
 
 interface HandlerArgv {

scripts/generateProptypes.ts

@@ -1,5 +1,5 @@
 import path from 'path';
-import fse from 'fs-extra';
+import fs from 'node:fs/promises';
 import * as prettier from 'prettier';
 
 function pascalCase(string) {
@@ -29,14 +29,14 @@ async function run() {
   });
 
   // Find the demos of the component
-  const docSource = await fse.readFile(
+  const docSource = await fs.readFile(
     path.join(process.cwd(), `docs/pages/material-ui/${args[0]}.js`),
     'utf8',
   );
   const matches = docSource.match(/\/([a-z-]+)\.md\?/);
   const dataFolderName = matches[1];
 
-  const filenames = await fse.readdir(
+  const filenames = await fs.readdir(
     path.join(process.cwd(), `docs/data/material/components/${dataFolderName}`),
   );
   const tsFiles = filenames.filter((filename) => filename.endsWith('.tsx'));
@@ -83,8 +83,8 @@ ${renders.join('\n')}
     ...prettierConfig,
     filepath: nextFilepath,
   });
-  await fse.mkdirp(`apps/pigment-css-next-app/src/app/material-ui/${args[0]}`);
-  await fse.writeFile(nextFilepath, prettiedNextFileContent);
+  await fs.mkdir(`apps/pigment-css-next-app/src/app/material-ui/${args[0]}`, { recursive: true });
+  await fs.writeFile(nextFilepath, prettiedNextFileContent);
 
   /**
    * Zero-Runtime Vite App
@@ -115,8 +115,8 @@ ${renders.join('\n')}
     ...prettierConfig,
     filepath: viteFilepath,
   });
-  await fse.mkdirp(`apps/pigment-css-vite-app/src/pages/material-ui`);
-  await fse.writeFile(viteFilepath, prettiedViteFileContent);
+  await fs.mkdir(`apps/pigment-css-vite-app/src/pages/material-ui`, { recursive: true });
+  await fs.writeFile(viteFilepath, prettiedViteFileContent);
 }
 
 run();