Merge branch 'next' into shlman/add-cli-remove-command

RESOLUTIONS.md

@@ -8,8 +8,4 @@ [email protected] (bug: 3.5.x): Type issues
 
 ## code/ui/components/package.json
 
-[email protected] (bug: 2.3.x): The Scrollbar doesn't disappear anymore by default. It might has something to do with the `scrollbars.autoHideSuspend` option, which was introduced in 2.3.0. https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md#230
-
-## code/package.json
-
-@babel/core@^7.23.2: Make sure we use the latest version of @babel/traverse, which is a dependency of @babel/core, since it contains a fix for a vulnerability: https://security.snyk.io/vuln/SNYK-JS-BABELTRAVERSE-5962462
+[email protected] (bug: 2.3.x): The Scrollbar doesn't disappear anymore by default. It might has something to do with the `scrollbars.autoHideSuspend` option, which was introduced in 2.3.0. https://github.com/KingSora/OverlayScrollbars/blob/master/packages/overlayscrollbars/CHANGELOG.md#230

code/builders/builder-webpack5/package.json

@@ -63,7 +63,6 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/core": "^7.23.2",
     "@storybook/channels": "workspace:*",
     "@storybook/client-logger": "workspace:*",
     "@storybook/core-common": "workspace:*",
@@ -72,10 +71,8 @@
     "@storybook/node-logger": "workspace:*",
     "@storybook/preview": "workspace:*",
     "@storybook/preview-api": "workspace:*",
-    "@swc/core": "^1.3.82",
     "@types/node": "^18.0.0",
     "@types/semver": "^7.3.4",
-    "babel-loader": "^9.0.0",
     "browser-assert": "^1.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "constants-browserify": "^1.0.0",
@@ -90,7 +87,6 @@
     "process": "^0.11.10",
     "semver": "^7.3.7",
     "style-loader": "^3.3.1",
-    "swc-loader": "^0.2.3",
     "terser-webpack-plugin": "^5.3.1",
     "ts-dedent": "^2.0.0",
     "url": "^0.11.0",

code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -8,7 +8,6 @@ import TerserWebpackPlugin from 'terser-webpack-plugin';
 import VirtualModulePlugin from 'webpack-virtual-modules';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 import type { TransformOptions as EsbuildOptions } from 'esbuild';
-import type { JsMinifyOptions as SwcOptions } from '@swc/core';
 import type { Options } from '@storybook/types';
 import { globalsNameReferenceMap } from '@storybook/preview/globals';
 import {
@@ -20,7 +19,6 @@ import {
 import { type BuilderOptions } from '@storybook/core-webpack';
 import { dedent } from 'ts-dedent';
 import type { TypescriptOptions } from '../types';
-import { createBabelLoader, createSWCLoader } from './loaders';
 import { getVirtualModules } from './virtual-module-mapping';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
@@ -106,8 +104,7 @@ export default async (
 
   const builderOptions = await getBuilderOptions<BuilderOptions>(options);
 
-  const shouldCheckTs =
-    typescriptOptions.check && !typescriptOptions.skipBabel && !typescriptOptions.skipCompiler;
+  const shouldCheckTs = typescriptOptions.check && !typescriptOptions.skipCompiler;
   const tsCheckOptions = typescriptOptions.checkOptions || {};
 
   const cacheConfig = builderOptions.fsCache ? { cache: { type: 'filesystem' as const } } : {};
@@ -235,9 +232,6 @@ export default async (
             fullySpecified: false,
           },
         },
-        builderOptions.useSWC
-          ? await createSWCLoader(Object.keys(virtualModuleMapping), options)
-          : await createBabelLoader(options, typescriptOptions, Object.keys(virtualModuleMapping)),
         {
           test: /\.md$/,
           type: 'asset/source',
@@ -273,7 +267,6 @@ export default async (
       ...(isProd
         ? {
             minimize: true,
-            // eslint-disable-next-line no-nested-ternary
             minimizer: options.build?.test?.esbuildMinify
               ? [
                   new TerserWebpackPlugin<EsbuildOptions>({
@@ -285,17 +278,6 @@ export default async (
                     },
                   }),
                 ]
-              : builderOptions.useSWC
-              ? [
-                  new TerserWebpackPlugin<SwcOptions>({
-                    minify: TerserWebpackPlugin.swcMinify,
-                    terserOptions: {
-                      sourceMap: !options.build?.test?.disableSourcemaps,
-                      mangle: false,
-                      keep_fnames: true,
-                    },
-                  }),
-                ]
               : [
                   new TerserWebpackPlugin({
                     parallel: true,

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

@@ -37,7 +37,6 @@ export interface StorybookConfigWebpack extends Pick<StorybookConfig, 'webpack'
 
 export type BuilderOptions = {
   fsCache?: boolean;
-  useSWC?: boolean;
   lazyCompilation?: boolean;
 };
 

code/frameworks/angular/package.json

@@ -99,7 +99,6 @@
     "@angular/forms": ">=15.0.0 < 18.0.0",
     "@angular/platform-browser": ">=15.0.0 < 18.0.0",
     "@angular/platform-browser-dynamic": ">=15.0.0 < 18.0.0",
-    "@babel/core": "*",
     "rxjs": "^6.0.0 || ^7.4.0",
     "typescript": "^4.0.0 || ^5.0.0",
     "zone.js": ">= 0.11.1 < 1.0.0"

code/frameworks/angular/src/preset.ts

@@ -37,7 +37,6 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
 export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => {
   return {
     ...config,
-    skipBabel: true,
     skipCompiler: true,
   };
 };

code/frameworks/ember/package.json

@@ -38,10 +38,12 @@
     "@storybook/global": "^5.0.0",
     "@storybook/preview-api": "workspace:*",
     "@storybook/types": "workspace:*",
+    "babel-loader": "9.1.3",
     "find-up": "^5.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@types/babel__preset-env": "^7",
     "ember-source": "~3.28.1",
     "typescript": "^5.3.2"
   },

code/frameworks/ember/src/preset.ts

@@ -1,5 +1,7 @@
 import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
+import { getVirtualModules } from '@storybook/builder-webpack5';
+import { getProjectRoot, resolvePathInStorybookCache } from '@storybook/core-common';
 import type { StorybookConfig } from './types';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
@@ -10,6 +12,37 @@ export const addons: PresetProperty<'addons'> = [
   require.resolve('./server/framework-preset-ember-docs'),
 ];
 
+export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, options) => {
+  const { virtualModules } = await getVirtualModules(options);
+
+  const babelOptions = await options.presets.apply('babel', {}, options);
+  const typescriptOptions = await options.presets.apply('typescript', {}, options);
+
+  return {
+    ...baseConfig,
+    module: {
+      ...baseConfig.module,
+      rules: [
+        ...(baseConfig.module?.rules ?? []),
+        {
+          test: typescriptOptions.skipCompiler ? /\.((c|m)?jsx?)$/ : /\.((c|m)?(j|t)sx?)$/,
+          use: [
+            {
+              loader: require.resolve('babel-loader'),
+              options: {
+                cacheDirectory: resolvePathInStorybookCache('babel'),
+                ...babelOptions,
+              },
+            },
+          ],
+          include: [getProjectRoot()],
+          exclude: [/node_modules/, ...Object.keys(virtualModules)],
+        },
+      ],
+    },
+  };
+};
+
 export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
   const framework = await options.presets.apply('framework');
 

code/frameworks/ember/src/server/framework-preset-babel-ember.ts

@@ -1,5 +1,6 @@
 import { precompile } from 'ember-source/dist/ember-template-compiler';
-import type { PresetProperty } from '@storybook/types';
+import type { PresetProperty, PresetPropertyFn } from '@storybook/types';
+import type { TransformOptions } from '@babel/core';
 import { findDistFile } from '../util';
 
 let emberOptions: any;
@@ -13,7 +14,7 @@ function precompileWithPlugins(string: string, options: any) {
   return precompile(string, precompileOptions);
 }
 
-export const babel: PresetProperty<'babel'> = (config, options) => {
+export const babel: PresetPropertyFn<'babel'> = (config: TransformOptions, options) => {
   if (options && options.presetsList) {
     options.presetsList.forEach((e: any, index: number) => {
       if (e.preset && e.preset.emberOptions) {

code/frameworks/html-webpack5/package.json

@@ -57,9 +57,6 @@
   "devDependencies": {
     "typescript": "^5.3.2"
   },
-  "peerDependencies": {
-    "@babel/core": "*"
-  },
   "engines": {
     "node": ">=18.0.0"
   },

code/frameworks/nextjs/README.md

@@ -123,12 +123,6 @@ export default {
   framework: {
     // name: '@storybook/react-webpack5', // Remove this
     name: '@storybook/nextjs', // Add this
-    options: {
-      builder: {
-        // Set useSWC to true if you want to try out the experimental SWC compiler in Next.js >= 14.0.0
-        useSWC: true,
-      },
-    },
   },
 };
 ```

code/frameworks/nextjs/package.json

@@ -89,6 +89,7 @@
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.2",
     "@babel/runtime": "^7.23.2",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@storybook/addon-actions": "workspace:*",
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/core-common": "workspace:*",
@@ -97,8 +98,10 @@
     "@storybook/preset-react-webpack": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/react": "workspace:*",
+    "@storybook/types": "workspace:*",
     "@types/node": "^18.0.0",
     "@types/semver": "^7.3.4",
+    "babel-loader": "^9.1.3",
     "css-loader": "^6.7.3",
     "find-up": "^5.0.0",
     "fs-extra": "^11.1.0",
@@ -108,6 +111,7 @@
     "pnp-webpack-plugin": "^1.7.0",
     "postcss": "^8.4.21",
     "postcss-loader": "^7.0.2",
+    "react-refresh": "^0.14.0",
     "resolve-url-loader": "^5.0.0",
     "sass-loader": "^12.4.0",
     "semver": "^7.3.5",
@@ -124,6 +128,7 @@
     "@types/babel__plugin-transform-runtime": "^7",
     "@types/babel__preset-env": "^7",
     "@types/loader-utils": "^2.0.5",
+    "@types/react-refresh": "^0",
     "next": "^14.0.2",
     "typescript": "^5.3.2",
     "webpack": "^5.65.0"

code/frameworks/nextjs/src/babel/loader.ts

@@ -0,0 +1,28 @@
+import { getProjectRoot, resolvePathInStorybookCache } from '@storybook/core-common';
+import { getVirtualModules } from '@storybook/builder-webpack5';
+import type { Options } from '@storybook/types';
+
+export const configureBabelLoader = async (baseConfig: any, options: Options) => {
+  const { virtualModules } = await getVirtualModules(options);
+
+  const babelOptions = await options.presets.apply('babel', {}, options);
+  const typescriptOptions = await options.presets.apply('typescript', {}, options);
+
+  baseConfig.module.rules = [
+    ...baseConfig.module.rules,
+    {
+      test: typescriptOptions.skipCompiler ? /\.((c|m)?jsx?)$/ : /\.((c|m)?(j|t)sx?)$/,
+      use: [
+        {
+          loader: require.resolve('babel-loader'),
+          options: {
+            cacheDirectory: resolvePathInStorybookCache('babel'),
+            ...babelOptions,
+          },
+        },
+      ],
+      include: [getProjectRoot()],
+      exclude: [/node_modules/, ...Object.keys(virtualModules)],
+    },
+  ];
+};

code/frameworks/nextjs/src/babel/preset.ts

@@ -120,6 +120,7 @@ export default (api: any, options: NextBabelPresetOptions = {}): BabelPreset =>
       ],
     ],
     plugins: [
+      isDevelopment && require.resolve('react-refresh/babel'),
       !useJsxRuntime && [
         require('./plugins/jsx-pragma'),
         {

code/frameworks/nextjs/src/fastRefresh/webpack.ts

@@ -0,0 +1,13 @@
+import type { Configuration as WebpackConfig } from 'webpack';
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
+
+export const configureFastRefresh = (baseConfig: WebpackConfig): void => {
+  baseConfig.plugins = [
+    ...(baseConfig.plugins ?? []),
+    new ReactRefreshWebpackPlugin({
+      overlay: {
+        sockIntegration: 'whm',
+      },
+    }),
+  ];
+};