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: 'utf8',
+ });
  const generated = await transformIframeHtml(indexHtml, options);
  const transformed = await server.transformIndexHtml('/iframe.html', generated);
  res.setHeader('Content-Type', 'text/html');
@@ -85,14 +84,15 @@ export const build: ViteBuilder['build'] = async ({ options }) => {
  const previewDirOrigin = previewResolvedDir;
  const previewDirTarget = join(options.outputDir || '', `sb-preview`);
 
- const previewFiles = fs.copy(previewDirOrigin, previewDirTarget, {
+ 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 { join } from 'node:path';
+import { existsSync } from 'node:fs';
+import { mkdir, writeFile } from 'node:fs/promises';
+import { dirname, 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,10 @@ 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)) {
+ const directory = dirname(externalCachePath);
+ await mkdir(directory, { recursive: true });
+ }
  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,15 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
  const previewDirOrigin = previewResolvedDir;
  const previewDirTarget = join(options.outputDir || '', `sb-preview`);
 
- const previewFiles = fs.copy(previewDirOrigin, previewDirTarget, {
+ 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

@@ -322,7 +322,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",
@@ -372,7 +371,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: 'utf8' })
+ );
  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: 'utf8' }));
 
  /**
  * 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,7 +1,6 @@
-import { writeFile } from 'node:fs/promises';
-import { join, relative } from 'node:path';
-
-import { ensureFile } from 'fs-extra';
+import { existsSync } from 'node:fs';
+import { mkdir, writeFile } from 'node:fs/promises';
+import { dirname, join, relative } from 'node:path';
 
 import { dedent } from '../../../../scripts/prepare/tools';
 import type { getEntries } from '../entries';
@@ -34,7 +33,10 @@ 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)) {
+ const directory = dirname(location);
+ await mkdir(directory, { recursive: true });
+ }
  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,15 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
 
  yield;
 
- const managerFiles = fs.copy(coreDirOrigin, coreDirTarget, {
+ 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 +289,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) });