Core: Replace fs-extra with the native APIs

code/__mocks__/fs.ts

@@ -0,0 +1,32 @@
+import { vi } from 'vitest';
+
+// This is a custom function that our tests can use during setup to specify
+// what the files on the "mock" filesystem should look like when any of the
+// `fs` APIs are used.
+let mockFiles = Object.create(null);
+
+// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention
+export function __setMockFiles(newMockFiles: Record<string, string | null>) {
+  mockFiles = newMockFiles;
+}
+
+export const readFileSync = (filePath = '') => mockFiles[filePath];
+export const existsSync = (filePath: string) => !!mockFiles[filePath];
+export const lstatSync = (filePath: string) => ({
+  isFile: () => !!mockFiles[filePath],
+});
+export const realpathSync = vi.fn();
+export const readdir = vi.fn();
+export const readdirSync = vi.fn();
+export const readlinkSync = vi.fn();
+
+export default {
+  __setMockFiles,
+  readFileSync,
+  existsSync,
+  lstatSync,
+  realpathSync,
+  readdir,
+  readdirSync,
+  readlinkSync,
+};

code/__mocks__/fs/promises.ts

@@ -0,0 +1,32 @@
+import { vi } from 'vitest';
+
+// This is a custom function that our tests can use during setup to specify
+// what the files on the "mock" filesystem should look like when any of the
+// `fs` APIs are used.
+let mockFiles = Object.create(null);
+
+// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention
+export function __setMockFiles(newMockFiles: Record<string, string | null>) {
+  mockFiles = newMockFiles;
+}
+
+export const writeFile = vi.fn(async (filePath: string, content: string) => {
+  mockFiles[filePath] = content;
+});
+export const readFile = vi.fn(async (filePath: string) => mockFiles[filePath]);
+export const lstat = vi.fn(async (filePath: string) => ({
+  isFile: () => !!mockFiles[filePath],
+}));
+export const readdir = vi.fn();
+export const readlink = vi.fn();
+export const realpath = vi.fn();
+
+export default {
+  __setMockFiles,
+  writeFile,
+  readFile,
+  lstat,
+  readdir,
+  readlink,
+  realpath,
+};

code/addons/docs/package.json

@@ -103,7 +103,6 @@
     "@storybook/global": "^5.0.0",
     "@storybook/react-dom-shim": "workspace:*",
     "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "fs-extra": "^11.1.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "rehype-external-links": "^3.0.0",

code/addons/links/package.json

@@ -71,7 +71,6 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
-    "fs-extra": "^11.1.0",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {

code/addons/links/scripts/fix-preview-api-reference.ts

@@ -1,4 +1,4 @@
-import { readFile, writeFile } from 'fs-extra';
+import { readFile, writeFile } from 'node:fs/promises';
 
 /* I wish this wasn't needed..
  * There seems to be some bug in tsup / the unlaying lib that does DTS bundling

code/builders/builder-vite/package.json

@@ -49,7 +49,6 @@
     "es-module-lexer": "^1.5.0",
     "express": "^4.19.2",
     "find-cache-dir": "^3.0.0",
-    "fs-extra": "^11.1.0",
     "magic-string": "^0.30.0",
     "ts-dedent": "^2.0.0"
   },

code/builders/builder-vite/src/index.ts

@@ -1,12 +1,12 @@
 // noinspection JSUnusedGlobalSymbols
+import { cp, readFile } from 'node:fs/promises';
 import { join, parse } from 'node:path';
 
 import { NoStatsForViteDevError } from 'storybook/internal/server-errors';
 import type { Options } from 'storybook/internal/types';
 
 import type { RequestHandler } from 'express';
 import express from 'express';
-import * as fs from 'fs-extra';
 import { corePath } from 'storybook/core-path';
 import type { ViteDevServer } from 'vite';
 
@@ -34,10 +34,9 @@ function iframeMiddleware(options: Options, server: ViteDevServer): RequestHandl
       return;
     }
 
-    const indexHtml = await fs.readFile(
-      require.resolve('@storybook/builder-vite/input/iframe.html'),
-      'utf-8'
-    );
+    const indexHtml = await readFile(require.resolve('@storybook/builder-vite/input/iframe.html'), {
+      encoding: 'utf-8',
+    });
     const generated = await transformIframeHtml(indexHtml, options);
     const transformed = await server.transformIndexHtml('/iframe.html', generated);
     res.setHeader('Content-Type', 'text/html');
@@ -85,14 +84,17 @@ export const build: ViteBuilder['build'] = async ({ options }) => {
   const previewDirOrigin = previewResolvedDir;
   const previewDirTarget = join(options.outputDir || '', `sb-preview`);
 
-  const previewFiles = fs.copy(previewDirOrigin, previewDirTarget, {
+  // TODO: `fsPromises.cp` is marked as experimental in Node 16-21. Ask in the PR whether we should
+  // use it anyway or stick to `fs-extra` for now.
+  const previewFiles = cp(previewDirOrigin, previewDirTarget, {
     filter: (src) => {
       const { ext } = parse(src);
       if (ext) {
         return ext === '.js';
       }
       return true;
     },
+    recursive: true,
   });
 
   const [out] = await Promise.all([viteCompilation, previewFiles]);

code/builders/builder-vite/src/plugins/external-globals-plugin.ts

@@ -1,8 +1,9 @@
+import { closeSync, existsSync, openSync } from 'node:fs';
+import { writeFile } from 'node:fs/promises';
 import { join } from 'node:path';
 
 import { init, parse } from 'es-module-lexer';
 import findCacheDirectory from 'find-cache-dir';
-import { ensureFile, writeFile } from 'fs-extra';
 import MagicString from 'magic-string';
 import type { Alias, Plugin } from 'vite';
 
@@ -59,7 +60,9 @@ export async function externalGlobalsPlugin(externals: Record<string, string>) {
         (Object.keys(externals) as Array<keyof typeof externals>).map(async (externalKey) => {
           const externalCachePath = join(cachePath, `${externalKey}.js`);
           newAlias.push({ find: new RegExp(`^${externalKey}$`), replacement: externalCachePath });
-          await ensureFile(externalCachePath);
+          if (!existsSync(externalCachePath)) {
+            closeSync(openSync(externalCachePath, 'w'));
+          }
           await writeFile(externalCachePath, `module.exports = ${externals[externalKey]};`);
         })
       );

code/builders/builder-webpack5/package.json

@@ -74,7 +74,6 @@
     "es-module-lexer": "^1.5.0",
     "express": "^4.19.2",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
-    "fs-extra": "^11.1.0",
     "html-webpack-plugin": "^5.5.0",
     "magic-string": "^0.30.5",
     "path-browserify": "^1.0.1",

code/builders/builder-webpack5/src/index.ts

@@ -1,3 +1,4 @@
+import { cp } from 'node:fs/promises';
 import { join, parse } from 'node:path';
 
 import { PREVIEW_BUILDER_PROGRESS } from 'storybook/internal/core-events';
@@ -12,7 +13,6 @@ import type { Builder, Options } from 'storybook/internal/types';
 import { checkWebpackVersion } from '@storybook/core-webpack';
 
 import express from 'express';
-import fs from 'fs-extra';
 import prettyTime from 'pretty-hrtime';
 import { corePath } from 'storybook/core-path';
 import type { Configuration, Stats, StatsOptions } from 'webpack';
@@ -292,14 +292,17 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
   const previewDirOrigin = previewResolvedDir;
   const previewDirTarget = join(options.outputDir || '', `sb-preview`);
 
-  const previewFiles = fs.copy(previewDirOrigin, previewDirTarget, {
+  // TODO: `fsPromises.cp` is marked as experimental in Node 16-21. Ask in the PR whether we should
+  // use it anyway or stick to `fs-extra` for now.
+  const previewFiles = cp(previewDirOrigin, previewDirTarget, {
     filter: (src) => {
       const { ext } = parse(src);
       if (ext) {
         return ext === '.js';
       }
       return true;
     },
+    recursive: true,
   });
 
   const [webpackCompilationOutput] = await Promise.all([webpackCompilation, previewFiles]);

code/core/package.json

@@ -320,7 +320,6 @@
     "@types/diff": "^5.0.9",
     "@types/ejs": "^3.1.1",
     "@types/find-cache-dir": "^5.0.0",
-    "@types/fs-extra": "^11.0.1",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.167",
     "@types/node": "^22.0.0",
@@ -371,7 +370,6 @@
     "find-cache-dir": "^5.0.0",
     "find-up": "^7.0.0",
     "flush-promises": "^1.0.2",
-    "fs-extra": "^11.1.0",
     "fuse.js": "^3.6.1",
     "get-npm-tarball-url": "^2.0.3",
     "glob": "^10.0.0",

code/core/scripts/helpers/dependencies.ts

@@ -1,7 +1,6 @@
+import { readFile } from 'node:fs/promises';
 import { join } from 'node:path';
 
-import { readJson } from 'fs-extra';
-
 export async function flattenDependencies(
   list: string[],
   output: string[] = [],
@@ -18,7 +17,9 @@ export async function flattenDependencies(
         console.log(dep + ' not found');
         return;
       }
-      const { dependencies = {}, peerDependencies = {} } = await readJson(path);
+      const { dependencies = {}, peerDependencies = {} } = JSON.parse(
+        await readFile(path, { encoding: 'utf-8' })
+      );
       const all: string[] = [
         ...new Set([...Object.keys(dependencies), ...Object.keys(peerDependencies)]),
       ]

code/core/scripts/helpers/generatePackageJsonFile.ts

@@ -1,7 +1,6 @@
-import { writeFile } from 'node:fs/promises';
+import { readFile, writeFile } from 'node:fs/promises';
 import { join, relative } from 'node:path';
 
-import { readJSON } from 'fs-extra';
 import slash from 'slash';
 
 import { sortPackageJson } from '../../../../scripts/prepare/tools';
@@ -11,7 +10,7 @@ const cwd = process.cwd();
 
 export async function generatePackageJsonFile(entries: ReturnType<typeof getEntries>) {
   const location = join(cwd, 'package.json');
-  const pkgJson = await readJSON(location);
+  const pkgJson = JSON.parse(await readFile(location, { encoding: 'utf-8' }));
 
   /**
    * Re-create the `exports` field in `code/core/package.json` This way we only need to update the

code/core/scripts/helpers/generateTypesMapperFiles.ts

@@ -1,8 +1,7 @@
+import { closeSync, existsSync, openSync } from 'node:fs';
 import { writeFile } from 'node:fs/promises';
 import { join, relative } from 'node:path';
 
-import { ensureFile } from 'fs-extra';
-
 import { dedent } from '../../../../scripts/prepare/tools';
 import type { getEntries } from '../entries';
 
@@ -34,7 +33,9 @@ export async function generateTypesMapperFiles(entries: ReturnType<typeof getEnt
   await Promise.all(
     all.map(async (filePath) => {
       const location = filePath.replace('src', 'dist').replace(/\.tsx?/, '.d.ts');
-      await ensureFile(location);
+      if (!existsSync(location)) {
+        closeSync(openSync(location, 'w'));
+      }
       await writeFile(location, await generateTypesMapperContent(filePath));
     })
   );

code/core/scripts/prep.ts

@@ -1,10 +1,8 @@
 /* eslint-disable local-rules/no-uncategorized-errors */
-import { watch } from 'node:fs';
+import { existsSync, mkdirSync, watch } from 'node:fs';
 import { mkdir, rm, writeFile } from 'node:fs/promises';
 import { dirname, join } from 'node:path';
 
-import { ensureDir } from 'fs-extra';
-
 import {
   chalk,
   dedent,
@@ -320,7 +318,9 @@ async function run() {
             const outName =
               keys.length === 1 ? dirname(keys[0]).replace('dist/', '') : `meta-${format}-${index}`;
 
-            await ensureDir('report');
+            if (!existsSync('report')) {
+              mkdirSync('report');
+            }
             await writeFile(`report/${outName}.json`, JSON.stringify(out.metafile, null, 2));
             await writeFile(
               `report/${outName}.txt`,

code/core/src/builder-manager/index.ts

@@ -1,3 +1,4 @@
+import { cp, rm, writeFile } from 'node:fs/promises';
 import { dirname, join, parse } from 'node:path';
 
 import { stringifyProcessEnvs } from '@storybook/core/common';
@@ -9,7 +10,6 @@ import { globalExternals } from '@fal-works/esbuild-plugin-global-externals';
 import { pnpPlugin } from '@yarnpkg/esbuild-plugin-pnp';
 import aliasPlugin from 'esbuild-plugin-alias';
 import express from 'express';
-import fs from 'fs-extra';
 
 import type {
   BuilderBuildResult,
@@ -149,7 +149,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
   // make sure we clear output directory of addons dir before starting
   // this could cause caching issues where addons are loaded when they shouldn't
   const addonsDir = config.outdir;
-  await fs.remove(addonsDir);
+  await rm(addonsDir, { recursive: true, force: true });
 
   yield;
 
@@ -256,14 +256,17 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
 
   yield;
 
-  const managerFiles = fs.copy(coreDirOrigin, coreDirTarget, {
+  // TODO: `fsPromises.cp` is marked as experimental in Node 16-21. Ask in the PR whether we should
+  // use it anyway or stick to `fs-extra` for now.
+  const managerFiles = cp(coreDirOrigin, coreDirTarget, {
     filter: (src) => {
       const { ext } = parse(src);
       if (ext) {
         return ext === '.js';
       }
       return true;
     },
+    recursive: true,
   });
   const { cssFiles, jsFiles } = await readOrderedFiles(addonsDir, compilation?.outputFiles);
 
@@ -288,11 +291,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
     globals
   );
 
-  await Promise.all([
-    //
-    fs.writeFile(join(options.outputDir, 'index.html'), html),
-    managerFiles,
-  ]);
+  await Promise.all([writeFile(join(options.outputDir, 'index.html'), html), managerFiles]);
 
   logger.trace({ message: '=> Manager built', time: process.hrtime(startTime) });