use node:path/fs split & replace fs-extra

MIGRATION.md

@@ -76,17 +76,17 @@
     - [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid)
     - [Removed `config` preset](#removed-config-preset-1)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
-    - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
-    - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
-    - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
-    - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
-    - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
+  - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
+  - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
+  - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated)
+  - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
+  - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
 - [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
-    - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
-    - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
+  - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
+  - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
 - [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
-    - [Addon API is more type-strict](#addon-api-is-more-type-strict)
-    - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
+  - [Addon API is more type-strict](#addon-api-is-more-type-strict)
+  - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated)
 - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
   - [7.0 breaking changes](#70-breaking-changes)
     - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
@@ -112,7 +112,7 @@
     - [Deploying build artifacts](#deploying-build-artifacts)
       - [Dropped support for file URLs](#dropped-support-for-file-urls)
       - [Serving with nginx](#serving-with-nginx)
-      - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules)
+      - [Ignore story files from node_modules](#ignore-story-files-from-node_modules)
   - [7.0 Core changes](#70-core-changes)
     - [7.0 feature flags removed](#70-feature-flags-removed)
     - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
@@ -125,7 +125,7 @@
     - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default)
   - [7.0 Vite changes](#70-vite-changes)
     - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
-    - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
+    - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
   - [7.0 Webpack changes](#70-webpack-changes)
     - [Webpack4 support discontinued](#webpack4-support-discontinued)
     - [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
@@ -175,7 +175,7 @@
     - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
     - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
     - [Autoplay in docs](#autoplay-in-docs)
-    - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
+    - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
   - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
     - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
     - [`Story` type deprecated](#story-type-deprecated)
@@ -1240,7 +1240,7 @@ That means you can convert an existing story indexer like this:
 ```diff
 // .storybook/main.ts
 
-import { readFileSync } from 'fs';
+import { readFileSync } from 'node:fs';
 import { loadCsf } from '@storybook/csf-tools';
 
 export default {

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 path from 'node:path';
 
 export const checkDocsLoaded = (configDir: string) => {
   checkAddonOrder({

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.2",
     "@storybook/blocks": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/components": "workspace:*",
@@ -111,7 +112,7 @@
     "@storybook/react-dom-shim": "workspace:*",
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
-    "fs-extra": "^11.1.0",
+    "fs-extra": "^11.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.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 path from 'node:path';
 import { logger } from '@storybook/node-logger';
 import { serverRequire } from '@storybook/core-common';
 

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 path from 'node:path';
 
 export const checkActionsLoaded = (configDir: string) => {
   checkAddonOrder({

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,14 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@ndelangen/fs-extra-unified": "^1.0.2",
     "@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",
+    "fs-extra": "^11.2.0",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {

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

@@ -1,7 +1,7 @@
-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
+ * There seems to be som  e bug in tsup / the unlaying lib that does DTS bundling
  * ...that makes it mess up the generation.
  */
 const run = async () => {

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/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,6 +45,7 @@
   },
   "dependencies": {
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
+    "@ndelangen/fs-extra-unified": "^1.0.2",
     "@storybook/core-common": "workspace:*",
     "@storybook/manager": "workspace:*",
     "@storybook/node-logger": "workspace:*",
@@ -55,7 +56,7 @@
     "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.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;
     }) || []
   );

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

@@ -1,4 +1,4 @@
-import path from 'path';
+import path from 'node:path';
 import type { Options } from '@storybook/types';
 
 interface PropertyObject {