ESM: Start migration: use ESM in node

code/.eslintrc.js

@@ -21,10 +21,16 @@ module.exports = {
   rules: {
     'import/no-unresolved': 'off', // covered by typescript
     'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
+    'import/no-unresolved': 'off',
     'eslint-comments/no-unused-disable': 'error',
     'react-hooks/rules-of-hooks': 'off',
     'import/extensions': 'off', // for mjs, we sometimes need extensions
     'jsx-a11y/control-has-associated-label': 'off',
+    'import/no-extraneous-dependencies': [
+      'error',
+      { devDependencies: true, peerDependencies: true },
+    ],
+
     '@typescript-eslint/dot-notation': [
       'error',
       {

code/addons/docs/package.json

@@ -100,10 +100,12 @@
   "dependencies": {
     "@babel/core": "^7.24.4",
     "@mdx-js/react": "^3.0.0",
+    "@ndelangen/fs-extra-unified": "^1.0.4",
     "@storybook/blocks": "workspace:*",
     "@storybook/csf-plugin": "workspace:*",
     "@storybook/global": "^5.0.0",
     "@storybook/react-dom-shim": "workspace:*",
+    "@types/fs-extra": "^11.0.4",
     "@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",

code/addons/essentials/src/actions/manager.ts

@@ -1 +1,2 @@
+// @ts-expect-error (no types)
 export * from '@storybook/addon-actions/manager';

code/addons/essentials/src/backgrounds/preview.ts

@@ -1,2 +1 @@
-// @ts-expect-error (no types needed for this)
 export * from '@storybook/addon-backgrounds/preview';

code/addons/essentials/src/highlight/preview.ts

@@ -1,2 +1 @@
-// @ts-expect-error (no types needed for this)
 export * from '@storybook/addon-highlight/preview';

code/addons/essentials/src/outline/preview.ts

@@ -1,2 +1 @@
-// @ts-expect-error (no types needed for this)
 export * from '@storybook/addon-outline/preview';

code/addons/essentials/src/viewport/preview.ts

@@ -1,2 +1 @@
-// @ts-expect-error (no types needed for this)
 export * from '@storybook/addon-viewport/preview';

code/addons/links/package.json

@@ -72,6 +72,8 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@ndelangen/fs-extra-unified": "^1.0.4",
+    "@types/fs-extra": "^11.0.4",
     "fs-extra": "^11.1.0",
     "typescript": "^5.3.2"
   },

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

@@ -20,14 +20,12 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "node": "./dist/index.js",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
+      "import": "./dist/index.mjs"
     },
     "./input/iframe.html": "./input/iframe.html",
     "./package.json": "./package.json"
   },
-  "main": "dist/index.js",
+  "main": "dist/index.mjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
@@ -43,8 +41,10 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@ndelangen/fs-extra-unified": "^1.0.4",
     "@storybook/csf-plugin": "workspace:*",
     "@types/find-cache-dir": "^3.2.1",
+    "@types/fs-extra": "^11.0.4",
     "browser-assert": "^1.2.1",
     "es-module-lexer": "^1.5.0",
     "express": "^4.19.2",
@@ -86,6 +86,9 @@
     "entries": [
       "./src/index.ts"
     ],
+    "formats": [
+      "esm"
+    ],
     "platform": "node"
   },
   "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16"

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

@@ -1,17 +1,17 @@
 // noinspection JSUnusedGlobalSymbols
 
-import * as fs from 'fs-extra';
 import type { RequestHandler } from 'express';
 import type { ViteDevServer } from 'vite';
 import express from 'express';
 import { join, parse } from 'path';
 import { NoStatsForViteDevError } from 'storybook/internal/server-errors';
 import type { Options } from 'storybook/internal/types';
-import { corePath } from 'storybook/core-path';
 import { transformIframeHtml } from './transform-iframe-html';
 import { createViteServer } from './vite-server';
 import { build as viteBuild } from './build';
 import type { ViteBuilder } from './types';
+import { readFile } from 'node:fs/promises';
+import { copy } from '@ndelangen/fs-extra-unified';
 
 export { withoutVitePlugins } from './utils/without-vite-plugins';
 export { hasVitePlugins } from './utils/has-vite-plugins';
@@ -32,7 +32,7 @@ function iframeMiddleware(options: Options, server: ViteDevServer): RequestHandl
       return;
     }
 
-    const indexHtml = await fs.readFile(
+    const indexHtml = await readFile(
       require.resolve('@storybook/builder-vite/input/iframe.html'),
       'utf-8'
     );
@@ -57,7 +57,7 @@ export const start: ViteBuilder['start'] = async ({
 }) => {
   server = await createViteServer(options as Options, devServer);
 
-  const previewResolvedDir = join(corePath, 'dist/preview');
+  const previewResolvedDir = join((await import('storybook/core-path')).corePath, 'dist/preview');
   const previewDirOrigin = previewResolvedDir;
 
   router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
@@ -79,11 +79,11 @@ export const start: ViteBuilder['start'] = async ({
 export const build: ViteBuilder['build'] = async ({ options }) => {
   const viteCompilation = viteBuild(options as Options);
 
-  const previewResolvedDir = join(corePath, 'dist/preview');
+  const previewResolvedDir = join((await import('storybook/core-path')).corePath, 'dist/preview');
   const previewDirOrigin = previewResolvedDir;
   const previewDirTarget = join(options.outputDir || '', `sb-preview`);
 
-  const previewFiles = fs.copy(previewDirOrigin, previewDirTarget, {
+  const previewFiles = copy(previewDirOrigin, previewDirTarget, {
     filter: (src) => {
       const { ext } = parse(src);
       if (ext) {

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

@@ -2,8 +2,9 @@ import { join } from 'node:path';
 import findCacheDirectory from 'find-cache-dir';
 import { init, parse } from 'es-module-lexer';
 import MagicString from 'magic-string';
-import { ensureFile, writeFile } from 'fs-extra';
+import { ensureFile } from '@ndelangen/fs-extra-unified';
 import type { Alias, Plugin } from 'vite';
+import { writeFile } from 'node:fs/promises';
 
 const escapeKeys = (key: string) => key.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
 const defaultImportRegExp = 'import ([^*{}]+) from';

code/builders/builder-webpack5/package.json

@@ -63,7 +63,9 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
+    "@ndelangen/fs-extra-unified": "^1.0.4",
     "@storybook/core-webpack": "workspace:*",
+    "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.0.0",
     "@types/semver": "^7.3.4",
     "browser-assert": "^1.2.1",

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

@@ -4,11 +4,10 @@ import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 import { logger } from 'storybook/internal/node-logger';
 import type { Builder, Options } from 'storybook/internal/types';
-import { corePath } from 'storybook/core-path';
 import { checkWebpackVersion } from '@storybook/core-webpack';
 import { join, parse } from 'path';
 import express from 'express';
-import fs from 'fs-extra';
+import { copy } from '@ndelangen/fs-extra-unified';
 import { PREVIEW_BUILDER_PROGRESS } from 'storybook/internal/core-events';
 import {
   WebpackCompilationError,
@@ -177,7 +176,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
 
   compilation = webpackDevMiddleware(compiler, middlewareOptions);
 
-  const previewResolvedDir = join(corePath, 'dist/preview');
+  const previewResolvedDir = join((await import('storybook/core-path')).corePath, 'dist/preview');
   const previewDirOrigin = previewResolvedDir;
 
   router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
@@ -286,11 +285,11 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
     });
   });
 
-  const previewResolvedDir = join(corePath, 'dist/preview');
+  const previewResolvedDir = join((await import('storybook/core-path')).corePath, 'dist/preview');
   const previewDirOrigin = previewResolvedDir;
   const previewDirTarget = join(options.outputDir || '', `sb-preview`);
 
-  const previewFiles = fs.copy(previewDirOrigin, previewDirTarget, {
+  const previewFiles = copy(previewDirOrigin, previewDirTarget, {
     filter: (src) => {
       const { ext } = parse(src);
       if (ext) {

code/core/package.json

@@ -295,6 +295,7 @@
     "@emotion/styled": "^11.11.0",
     "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
+    "@ndelangen/fs-extra-unified": "^1.0.4",
     "@ndelangen/get-tarball": "^3.0.7",
     "@popperjs/core": "^2.6.0",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -396,6 +397,7 @@
     "react-transition-group": "^4.4.5",
     "require-from-string": "^2.0.2",
     "resolve-from": "^5.0.0",
+    "resolve.exports": "^2.0.2",
     "slash": "^5.0.0",
     "store2": "^2.14.2",
     "strip-json-comments": "^5.0.1",

code/core/scripts/entries.ts

@@ -3,7 +3,7 @@ import { defineEntry } from '../../../scripts/prepare/tools';
 export const getEntries = (cwd: string) => {
   const define = defineEntry(cwd);
   return [
-    // empty, right now, TDB what to do with this
+    // empty, right now, TBD what to do with this
     define('src/index.ts', ['node', 'browser'], true),
 
     define('src/node-logger/index.ts', ['node'], true),

code/core/scripts/helpers/dependencies.ts

@@ -1,4 +1,4 @@
-import { readJson } from 'fs-extra';
+import { readJson } from '@ndelangen/fs-extra-unified';
 import { join } from 'node:path';
 
 export async function flattenDependencies(

code/core/scripts/helpers/generatePackageJsonFile.ts

@@ -2,7 +2,7 @@ import { join, relative } from 'node:path';
 import slash from 'slash';
 import { sortPackageJson } from '../../../../scripts/prepare/tools';
 import type { getEntries } from '../entries';
-import { readJSON } from 'fs-extra';
+import { readJSON } from '@ndelangen/fs-extra-unified';
 import { writeFile } from 'node:fs/promises';
 
 const cwd = process.cwd();

code/core/scripts/helpers/generateTypesMapperFiles.ts

@@ -2,7 +2,7 @@ import type { getEntries } from '../entries';
 import { join, relative } from 'node:path';
 import { dedent } from '../../../../scripts/prepare/tools';
 import { writeFile } from 'node:fs/promises';
-import { ensureFile } from 'fs-extra';
+import { ensureFile } from '@ndelangen/fs-extra-unified';
 
 const cwd = process.cwd();
 

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

@@ -1,5 +1,5 @@
 import { dirname, join, parse } from 'node:path';
-import fs from 'fs-extra';
+import { copy, remove } from '@ndelangen/fs-extra-unified';
 import express from 'express';
 
 import { logger } from '@storybook/core/node-logger';
@@ -25,6 +25,7 @@ import { getData } from './utils/data';
 import { safeResolve } from './utils/safeResolve';
 import { readOrderedFiles } from './utils/files';
 import { buildFrameworkGlobalsFromOptions } from './utils/framework';
+import { writeFile } from 'node:fs/promises';
 
 let compilation: Compilation;
 let asyncIterator: ReturnType<StarterFunction> | ReturnType<BuilderFunction>;
@@ -149,7 +150,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 remove(addonsDir);
 
   yield;
 
@@ -256,7 +257,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
 
   yield;
 
-  const managerFiles = fs.copy(coreDirOrigin, coreDirTarget, {
+  const managerFiles = copy(coreDirOrigin, coreDirTarget, {
     filter: (src) => {
       const { ext } = parse(src);
       if (ext) {
@@ -290,7 +291,7 @@ const builder: BuilderFunction = async function* builderGeneratorFn({ startTime,
 
   await Promise.all([
     //
-    fs.writeFile(join(options.outputDir, 'index.html'), html),
+    writeFile(join(options.outputDir, 'index.html'), html),
     managerFiles,
   ]);
 

code/core/src/builder-manager/utils/files.ts

@@ -1,8 +1,9 @@
 import type { OutputFile } from 'esbuild';
-import fs from 'fs-extra';
+import { ensureFile } from '@ndelangen/fs-extra-unified';
 import { join, normalize } from 'node:path';
 import slash from 'slash';
 import type { Compilation } from '../types';
+import { writeFile } from 'node:fs/promises';
 
 export async function readOrderedFiles(
   addonsDir: string,
@@ -13,8 +14,8 @@ export async function readOrderedFiles(
       // convert deeply nested paths to a single level, also remove special characters
       const { location, url } = sanitizePath(file, addonsDir);
 
-      await fs.ensureFile(location);
-      await fs.writeFile(location, file.contents);
+      await ensureFile(location);
+      await writeFile(location, file.contents);
       return url;
     }) || []
   );

code/core/src/builder-manager/utils/managerEntries.ts

@@ -1,5 +1,6 @@
-import fs from 'fs-extra';
+import { ensureFile } from '@ndelangen/fs-extra-unified';
 import { resolvePathInStorybookCache } from '@storybook/core/common';
+import { writeFile } from 'node:fs/promises';
 import { join, parse, relative, sep } from 'node:path';
 import slash from 'slash';
 
@@ -50,8 +51,8 @@ export async function wrapManagerEntries(entrypoints: string[], uniqueId?: strin
         sanitizeFinal(join(`${sanitizeBase(base)}-${i}`, `${sanitizeBase(name)}-bundle.js`))
       );
 
-      await fs.ensureFile(location);
-      await fs.writeFile(location, `import '${slash(entry)}';`);
+      await ensureFile(location);
+      await writeFile(location, `import '${slash(entry)}';`);
 
       return location;
     })

code/core/src/builder-manager/utils/template.ts

@@ -1,9 +1,9 @@
 import { dirname, join } from 'node:path';
-import fs from 'fs-extra';
 
 import { render } from 'ejs';
 
 import type { DocsOptions, TagsOptions, Options, Ref } from '@storybook/core/types';
+import { readFile } from 'node:fs/promises';
 
 export const getTemplatePath = async (template: string) => {
   return join(dirname(require.resolve('@storybook/core/package.json')), 'assets/server', template);
@@ -12,7 +12,7 @@ export const getTemplatePath = async (template: string) => {
 export const readTemplate = async (template: string) => {
   const path = await getTemplatePath(template);
 
-  return fs.readFile(path, 'utf8');
+  return readFile(path, 'utf8');
 };
 
 export async function getManagerMainTemplate() {

code/core/src/cli/detect.test.ts

@@ -22,7 +22,7 @@ vi.mock('fs', () => ({
   default: vi.fn(),
 }));
 
-vi.mock('fs-extra', () => ({
+vi.mock('@ndelangen/fs-extra-unified', () => ({
   pathExistsSync: vi.fn(() => true),
 }));
 

code/core/src/cli/eslintPlugin.ts

@@ -1,4 +1,4 @@
-import fse, { readFile, readJson, writeJson } from 'fs-extra';
+import { readJson, writeJson } from '@ndelangen/fs-extra-unified';
 import { dedent } from 'ts-dedent';
 import detectIndent from 'detect-indent';
 import prompts from 'prompts';
@@ -8,6 +8,7 @@ import { readConfig, writeConfig } from '@storybook/core/csf-tools';
 import type { JsPackageManager } from '@storybook/core/common';
 import { paddedLog } from '@storybook/core/common';
 import fs from 'node:fs';
+import { readFile } from 'node:fs/promises';
 
 export const SUPPORTED_ESLINT_EXTENSIONS = ['js', 'cjs', 'json'];
 const UNSUPPORTED_ESLINT_EXTENSIONS = ['yaml', 'yml'];