Merge pull request #28835 from storybookjs/norbert/use-node-20

Build: Use node 22 in monorepo

Author: ndelangen

.circleci/config.yml

@@ -16,7 +16,7 @@ parameters:
     default: "next"
 
 executors:
-  sb_node_18_classic:
+  sb_node_22_classic:
     parameters:
       class:
         description: The Resource class
@@ -25,7 +25,7 @@ executors:
         default: "small"
     working_directory: /tmp/storybook
     docker:
-      - image: cimg/node:18.19.1
+      - image: cimg/node:22.6.0
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -38,7 +38,20 @@ executors:
         default: "small"
     working_directory: /tmp/storybook
     docker:
-      - image: cimg/node:18.19.1-browsers
+      - image: cimg/node:18.20.3-browsers
+        environment:
+          NODE_OPTIONS: --max_old_space_size=6144
+    resource_class: <<parameters.class>>
+  sb_node_22_browsers:
+    parameters:
+      class:
+        description: The Resource class
+        type: enum
+        enum: ["small", "medium", "medium+", "large", "xlarge"]
+        default: "small"
+    working_directory: /tmp/storybook
+    docker:
+      - image: cimg/node:22.6.0-browsers
         environment:
           NODE_OPTIONS: --max_old_space_size=6144
     resource_class: <<parameters.class>>
@@ -108,7 +121,7 @@ jobs:
   pretty-docs:
     executor:
       class: medium
-      name: sb_node_18_classic
+      name: sb_node_22_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -134,7 +147,7 @@ jobs:
   build:
     executor:
       class: xlarge
-      name: sb_node_18_classic
+      name: sb_node_22_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -179,7 +192,7 @@ jobs:
   lint:
     executor:
       class: large
-      name: sb_node_18_classic
+      name: sb_node_22_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -195,7 +208,7 @@ jobs:
   check:
     executor:
       class: xlarge
-      name: sb_node_18_classic
+      name: sb_node_22_classic
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -213,7 +226,7 @@ jobs:
       - report-workflow-on-failure
       - cancel-workflow-on-failure
   script-checks:
-    executor: sb_node_18_browsers
+    executor: sb_node_22_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -241,7 +254,7 @@ jobs:
   unit-tests:
     executor:
       class: xlarge
-      name: sb_node_18_browsers
+      name: sb_node_22_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -263,7 +276,7 @@ jobs:
   coverage:
     executor:
       class: small
-      name: sb_node_18_browsers
+      name: sb_node_22_browsers
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: "--depth 1 --verbose"
@@ -274,7 +287,7 @@ jobs:
   chromatic-internal-storybook:
     executor:
       class: medium+
-      name: sb_node_18_browsers
+      name: sb_node_22_browsers
     environment:
       NODE_OPTIONS: --max_old_space_size=6144
     steps:
@@ -296,7 +309,7 @@ jobs:
         type: integer
     executor:
       class: medium
-      name: sb_node_18_browsers
+      name: sb_node_22_browsers
     parallelism: << parameters.parallelism >>
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -343,7 +356,7 @@ jobs:
         type: integer
     executor:
       class: large
-      name: sb_node_18_browsers
+      name: sb_node_22_browsers
     parallelism: << parameters.parallelism >>
     steps:
       - git-shallow-clone/checkout_advanced:
@@ -424,7 +437,7 @@ jobs:
         type: integer
     executor:
       class: medium
-      name: sb_node_18_browsers
+      name: sb_node_22_browsers
     parallelism: << parameters.parallelism >>
     steps:
       - checkout
@@ -507,7 +520,7 @@ jobs:
   test-empty-init:
     executor:
       class: medium
-      name: sb_node_18_browsers
+      name: sb_node_22_browsers
     parameters:
       packageManager:
         type: string

.nvmrc

@@ -1 +1 @@
-18.19.1
+22.6.0

code/addons/interactions/package.json

@@ -62,7 +62,7 @@
   "devDependencies": {
     "@devtools-ds/object-inspector": "^1.1.2",
     "@storybook/icons": "^1.2.5",
-    "@types/node": "^18.0.0",
+    "@types/node": "^22.0.0",
     "formik": "^2.2.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

code/builders/builder-vite/package.json

@@ -55,7 +55,7 @@
   },
   "devDependencies": {
     "@types/express": "^4.17.21",
-    "@types/node": "^18.0.0",
+    "@types/node": "^22.0.0",
     "glob": "^10.0.0",
     "slash": "^5.0.0",
     "typescript": "^5.3.2",

code/builders/builder-webpack5/package.json

@@ -64,7 +64,7 @@
   },
   "dependencies": {
     "@storybook/core-webpack": "workspace:*",
-    "@types/node": "^18.0.0",
+    "@types/node": "^22.0.0",
     "@types/semver": "^7.3.4",
     "browser-assert": "^1.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",

code/core/package.json

@@ -271,7 +271,6 @@
   "dependencies": {
     "@storybook/csf": "^0.1.11",
     "@types/express": "^4.17.21",
-    "@types/node": "^18.0.0",
     "browser-assert": "^1.2.1",
     "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0",
     "esbuild-register": "^3.5.0",
@@ -314,8 +313,7 @@
     "@types/fs-extra": "^11.0.1",
     "@types/js-yaml": "^4.0.5",
     "@types/lodash": "^4.14.167",
-    "@types/mock-fs": "^4.13.1",
-    "@types/node": "^18.0.0",
+    "@types/node": "^22.0.0",
     "@types/npmlog": "^7.0.0",
     "@types/picomatch": "^2.3.0",
     "@types/prettier": "^3.0.0",
@@ -375,8 +373,8 @@
     "leven": "^4.0.0",
     "lodash": "^4.17.21",
     "markdown-to-jsx": "^7.4.5",
+    "memfs": "^4.11.1",
     "memoizerific": "^1.11.3",
-    "mock-fs": "^5.2.0",
     "nanoid": "^4.0.2",
     "npmlog": "^7.0.0",
     "open": "^8.4.0",

code/core/src/common/utils/__tests__/interpret-files.test.ts

@@ -1,10 +1,16 @@
-import { describe, afterEach, it, expect } from 'vitest';
-import mock from 'mock-fs';
+import { describe, afterEach, it, expect, vi } from 'vitest';
 import { getInterpretedFile } from '../interpret-files';
+import { vol } from 'memfs';
+
+vi.mock('fs', async () => {
+  const memfs = await vi.importActual('memfs');
+
+  return { default: memfs.fs, ...(memfs as any).fs };
+});
 
 describe('interpret-files', () => {
   it('will interpret file as file.ts when it exists in fs', () => {
-    mock({
+    vol.fromNestedJSON({
       'path/to/file.ts': 'ts file contents',
     });
 
@@ -14,7 +20,7 @@ describe('interpret-files', () => {
   });
 
   it('will interpret file as file.js when both are in fs', () => {
-    mock({
+    vol.fromNestedJSON({
       'path/to/file.js': 'js file contents',
       'path/to/file.ts': 'ts file contents',
     });
@@ -25,7 +31,7 @@ describe('interpret-files', () => {
   });
 
   it('will interpret file even if extension is already present', () => {
-    mock({
+    vol.fromNestedJSON({
       'path/to/file.js': 'js file contents',
       'path/to/file.ts': 'ts file contents',
     });
@@ -36,7 +42,7 @@ describe('interpret-files', () => {
   });
 
   it('will return undefined if there is no candidate of a file in fs', () => {
-    mock({
+    vol.fromNestedJSON({
       'path/to/file.js': 'js file contents',
     });
 
@@ -46,7 +52,7 @@ describe('interpret-files', () => {
   });
 
   it('will interpret file as file.mts when it exists in fs', () => {
-    mock({
+    vol.fromNestedJSON({
       'path/to/file.mts': 'ts file contents',
     });
 
@@ -56,7 +62,7 @@ describe('interpret-files', () => {
   });
 
   it('will interpret file as file.cts when it exists in fs', () => {
-    mock({
+    vol.fromNestedJSON({
       'path/to/file.cts': 'ts file contents',
     });
 
@@ -65,5 +71,5 @@ describe('interpret-files', () => {
     expect(file).toEqual('path/to/file.cts');
   });
 
-  afterEach(mock.restore);
+  afterEach(() => vol.reset());
 });

code/core/src/common/utils/__tests__/template.test.ts

@@ -1,8 +1,15 @@
-import { describe, beforeEach, afterEach, it, expect } from 'vitest';
-import mock from 'mock-fs';
+import { describe, beforeEach, afterEach, it, expect, vi } from 'vitest';
 import { getPreviewHeadTemplate, getPreviewBodyTemplate } from '../template';
 import { dirname } from 'node:path';
 
+import { vol } from 'memfs';
+
+vi.mock('fs', async () => {
+  const memfs = await vi.importActual('memfs');
+
+  return { default: memfs.fs, ...(memfs as any).fs };
+});
+
 const HEAD_HTML_CONTENTS = '<script>console.log("custom script!");</script>';
 const BASE_HTML_CONTENTS = '<script>console.log("base script!");</script>';
 
@@ -12,18 +19,17 @@ const BODY_HTML_CONTENTS = '<div>custom body contents</div>';
 const base = dirname(require.resolve('@storybook/core/package.json'));
 
 describe('server.getPreviewHeadHtml', () => {
+  afterEach(() => {
+    vol.reset();
+  });
   describe('when .storybook/preview-head.html does not exist', () => {
     beforeEach(() => {
-      mock({
+      vol.fromNestedJSON({
         [`${base}/assets/server/base-preview-head.html`]: BASE_HTML_CONTENTS,
         config: {},
       });
     });
 
-    afterEach(() => {
-      mock.restore();
-    });
-
     it('return an empty string', () => {
       const result = getPreviewHeadTemplate('./config');
       expect(result).toEqual(BASE_HTML_CONTENTS);
@@ -32,18 +38,14 @@ describe('server.getPreviewHeadHtml', () => {
 
   describe('when .storybook/preview-head.html exists', () => {
     beforeEach(() => {
-      mock({
+      vol.fromNestedJSON({
         [`${base}/assets/server/base-preview-head.html`]: BASE_HTML_CONTENTS,
         config: {
           'preview-head.html': HEAD_HTML_CONTENTS,
         },
       });
     });
 
-    afterEach(() => {
-      mock.restore();
-    });
-
     it('return the contents of the file', () => {
       const result = getPreviewHeadTemplate('./config');
       expect(result).toEqual(BASE_HTML_CONTENTS + HEAD_HTML_CONTENTS);
@@ -54,16 +56,12 @@ describe('server.getPreviewHeadHtml', () => {
 describe('server.getPreviewBodyHtml', () => {
   describe('when .storybook/preview-body.html does not exist', () => {
     beforeEach(() => {
-      mock({
+      vol.fromNestedJSON({
         [`${base}/assets/server/base-preview-body.html`]: BASE_BODY_HTML_CONTENTS,
         config: {},
       });
     });
 
-    afterEach(() => {
-      mock.restore();
-    });
-
     it('return an empty string', () => {
       const result = getPreviewBodyTemplate('./config');
       expect(result).toEqual(BASE_BODY_HTML_CONTENTS);
@@ -72,18 +70,14 @@ describe('server.getPreviewBodyHtml', () => {
 
   describe('when .storybook/preview-body.html exists', () => {
     beforeEach(() => {
-      mock({
+      vol.fromNestedJSON({
         [`${base}/assets/server/base-preview-body.html`]: BASE_BODY_HTML_CONTENTS,
         config: {
           'preview-body.html': BODY_HTML_CONTENTS,
         },
       });
     });
 
-    afterEach(() => {
-      mock.restore();
-    });
-
     it('return the contents of the file', () => {
       const result = getPreviewBodyTemplate('./config');
       expect(result).toEqual(BODY_HTML_CONTENTS + BASE_BODY_HTML_CONTENTS);

code/frameworks/angular/package.json

@@ -44,7 +44,7 @@
     "@storybook/manager-api": "workspace:^",
     "@storybook/preview-api": "workspace:^",
     "@storybook/theming": "workspace:^",
-    "@types/node": "^18.0.0",
+    "@types/node": "^22.0.0",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@types/semver": "^7.3.4",

code/frameworks/html-vite/package.json

@@ -52,7 +52,7 @@
     "magic-string": "^0.30.0"
   },
   "devDependencies": {
-    "@types/node": "^18.0.0",
+    "@types/node": "^22.0.0",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {