Maintenance: Prep for ESM

code/.eslintrc.js

@@ -1,5 +1,5 @@
-const path = require('path');
-const fs = require('fs');
+const path = require('node:path');
+const fs = require('node:fs');
 
 const scriptPath = path.join(__dirname, '..', 'scripts');
 

code/__mocks__/fs.js

@@ -1,6 +1,6 @@
 import { vi } from 'vitest';
 
-const fs = vi.createMockFromModule('fs');
+const fs = vi.createMockFromModule('node:fs');
 
 // 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

code/addons/a11y/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { sep, posix } from 'path';
+import { sep, posix } from 'node:path';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/actions/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { sep, posix } from 'path';
+import { sep, posix } from 'node:path';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/backgrounds/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { sep, posix } from 'path';
+import { sep, posix } from 'node:path';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/controls/src/preset/checkDocsLoaded.ts

@@ -1,5 +1,5 @@
 import { checkAddonOrder, serverRequire } from '@storybook/core-common';
-import path from 'path';
+import { isAbsolute, join } from 'node:path';
 
 export const checkDocsLoaded = (configDir: string) => {
   checkAddonOrder({
@@ -11,9 +11,9 @@ export const checkDocsLoaded = (configDir: string) => {
       name: '@storybook/addon-controls',
       inEssentials: true,
     },
-    configFile: path.isAbsolute(configDir)
-      ? path.join(configDir, 'main')
-      : path.join(process.cwd(), configDir, 'main'),
+    configFile: isAbsolute(configDir)
+      ? join(configDir, 'main')
+      : join(process.cwd(), configDir, 'main'),
     getConfig: (configFile) => serverRequire(configFile),
   });
 };

code/addons/controls/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { sep, posix } from 'path';
+import { sep, posix } from 'node:path';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/docs/package.json

@@ -100,6 +100,7 @@
   "dependencies": {
     "@babel/core": "^7.12.3",
     "@mdx-js/react": "^3.0.0",
+    "@ndelangen/fs-extra-unified": "^1.0.3",
     "@storybook/blocks": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
@@ -111,8 +112,8 @@
     "@storybook/react-dom-shim": "workspace:*",
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
-    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "fs-extra": "^11.1.0",
+    "@types/fs-extra": "^11.0.4",
+    "fs-extra": "^11.2.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/docs/src/plugins/mdx-plugin.ts

@@ -3,7 +3,7 @@ import type { Plugin } from 'vite';
 import rehypeSlug from 'rehype-slug';
 import rehypeExternalLinks from 'rehype-external-links';
 import { createFilter } from '@rollup/pluginutils';
-import { dirname, join } from 'path';
+import { dirname, join } from 'node:path';
 import type { CompileOptions } from '../compiler';
 import { compile } from '../compiler';
 

code/addons/docs/src/preset.ts

@@ -1,4 +1,4 @@
-import { dirname, join } from 'path';
+import { dirname, join } from 'node:path';
 import rehypeSlug from 'rehype-slug';
 import rehypeExternalLinks from 'rehype-external-links';
 

code/addons/docs/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { sep, posix } from 'path';
+import { sep, posix } from 'node:path';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/docs/vue/README.md

@@ -39,7 +39,7 @@ export default {
 The `addon-docs` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app:
 
 ```js
-import * as path from 'path';
+import * as path from 'node:path';
 
 export default {
   addons: [

code/addons/docs/vue3/README.md

@@ -39,7 +39,7 @@ export default {
 The `addon-docs` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app:
 
 ```js
-import * as path from 'path';
+import * as path from 'node:path';
 
 export default {
   addons: [

code/addons/essentials/src/docs/preset.ts

@@ -1,4 +1,4 @@
-import { dirname, join } from 'path';
+import { dirname, join } from 'node:path';
 
 export * from '@storybook/addon-docs/dist/preset';
 

code/addons/essentials/src/index.ts

@@ -1,4 +1,4 @@
-import path from 'path';
+import { isAbsolute, join } from 'node:path';
 import { logger } from '@storybook/node-logger';
 import { serverRequire } from '@storybook/core-common';
 
@@ -56,10 +56,8 @@ interface PresetOptions {
 }
 
 const requireMain = (configDir: string) => {
-  const absoluteConfigDir = path.isAbsolute(configDir)
-    ? configDir
-    : path.join(process.cwd(), configDir);
-  const mainFile = path.join(absoluteConfigDir, 'main');
+  const absoluteConfigDir = isAbsolute(configDir) ? configDir : join(process.cwd(), configDir);
+  const mainFile = join(absoluteConfigDir, 'main');
 
   return serverRequire(mainFile) ?? {};
 };

code/addons/essentials/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { sep, posix } from 'path';
+import { sep, posix } from 'node:path';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/gfm/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { sep, posix } from 'path';
+import { sep, posix } from 'node:path';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/highlight/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { sep, posix } from 'path';
+import { sep, posix } from 'node:path';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/interactions/src/preset.ts

@@ -1,5 +1,5 @@
 import { checkAddonOrder, serverRequire } from '@storybook/core-common';
-import path from 'path';
+import { isAbsolute, join } from 'node:path';
 
 export const checkActionsLoaded = (configDir: string) => {
   checkAddonOrder({
@@ -11,9 +11,9 @@ export const checkActionsLoaded = (configDir: string) => {
       name: '@storybook/addon-interactions',
       inEssentials: false,
     },
-    configFile: path.isAbsolute(configDir)
-      ? path.join(configDir, 'main')
-      : path.join(process.cwd(), configDir, 'main'),
+    configFile: isAbsolute(configDir)
+      ? join(configDir, 'main')
+      : join(process.cwd(), configDir, 'main'),
     getConfig: (configFile) => serverRequire(configFile),
   });
 };

code/addons/interactions/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { sep, posix } from 'path';
+import { sep, posix } from 'node:path';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/jest/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { sep, posix } from 'path';
+import { sep, posix } from 'node:path';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/links/package.json

@@ -68,13 +68,15 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@ndelangen/fs-extra-unified": "^1.0.3",
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-events": "workspace:*",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/router": "workspace:*",
     "@storybook/types": "workspace:*",
-    "fs-extra": "^11.1.0",
+    "@types/fs-extra": "^11.0.4",
+    "fs-extra": "^11.2.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/addons/links/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { sep, posix } from 'path';
+import { sep, posix } from 'node:path';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/measure/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { sep, posix } from 'path';
+import { sep, posix } from 'node:path';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/outline/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { sep, posix } from 'path';
+import { sep, posix } from 'node:path';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/storysource/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { sep, posix } from 'path';
+import { sep, posix } from 'node:path';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/themes/postinstall.js

@@ -1,4 +1,4 @@
-const { spawn } = require('child_process');
+const { spawn } = require('node:child_process');
 
 const PACKAGE_MANAGER_TO_COMMAND = {
   npm: ['npx'],

code/addons/themes/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { sep, posix } from 'path';
+import { sep, posix } from 'node:path';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/toolbars/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { sep, posix } from 'path';
+import { sep, posix } from 'node:path';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/addons/viewport/vitest.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig, mergeConfig } from 'vitest/config';
-import { sep, posix } from 'path';
+import { sep, posix } from 'node:path';
 import { vitestCommonConfig } from '../../vitest.workspace';
 
 export default mergeConfig(

code/builders/builder-manager/package.json

@@ -45,17 +45,19 @@
   },
   "dependencies": {
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
+    "@ndelangen/fs-extra-unified": "^1.0.3",
     "@storybook/core-common": "workspace:*",
     "@storybook/manager": "workspace:*",
     "@storybook/node-logger": "workspace:*",
     "@types/ejs": "^3.1.1",
+    "@types/fs-extra": "^11.0.4",
     "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10",
     "browser-assert": "^1.2.1",
     "ejs": "^3.1.8",
     "esbuild": "^0.18.0",
     "esbuild-plugin-alias": "^0.2.1",
     "express": "^4.17.3",
-    "fs-extra": "^11.1.0",
+    "fs-extra": "^11.2.0",
     "process": "^0.11.10",
     "util": "^0.12.4"
   },

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

@@ -1,5 +1,6 @@
-import { dirname, join, parse } from 'path';
-import fs from 'fs-extra';
+import { dirname, join, parse } from 'node:path';
+import { writeFile } from 'node:fs/promises';
+import { copy, remove } from '@ndelangen/fs-extra-unified';
 import express from 'express';
 
 import { logger } from '@storybook/node-logger';
@@ -147,7 +148,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;
 
@@ -246,7 +247,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) {
@@ -280,7 +281,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/builders/builder-manager/src/utils/data.ts

@@ -1,4 +1,4 @@
-import { basename } from 'path';
+import { basename } from 'node:path';
 import type { Options } from '@storybook/types';
 import { getRefs } from '@storybook/core-common';
 

code/builders/builder-manager/src/utils/files.test.ts

@@ -1,6 +1,6 @@
 import { it, expect } from 'vitest';
 import type { OutputFile } from 'esbuild';
-import { platform } from 'os';
+import { platform } from 'node:os';
 import { sanitizePath } from './files';
 
 const os = platform();

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

@@ -1,6 +1,7 @@
 import type { OutputFile } from 'esbuild';
-import fs from 'fs-extra';
-import { join, normalize } from 'path';
+import { ensureFile } from '@ndelangen/fs-extra-unified';
+import { writeFile } from 'node:fs/promises';
+import { join, normalize } from 'node:path';
 import slash from 'slash';
 import type { Compilation } from '../types';
 
@@ -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;
     }) || []
   );