Remove Babel from webpack5 builder

jwilliams-met · Dec 28, 2023 · 0688ef0 · 0688ef0
1 parent e2c05c6
commit 0688ef0
Show file tree

Hide file tree

Showing 83 changed files with 123 additions and 2,086 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -3,6 +3,7 @@
 - [From version 7.x to 8.0.0](#from-version-7x-to-800)
   - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function)
   - [Core changes](#core-changes)
+    - [typescript.skipBabel removed](#typescriptskipbabel-removed)
     - [Dropping support for Node.js 16](#dropping-support-for-nodejs-16)
     - [Autotitle breaking fixes](#autotitle-breaking-fixes)
     - [React v18 in the manager UI (including addons)](#react-v18-in-the-manager-ui-including-addons)
@@ -382,6 +383,10 @@ To summarize:
 
 ### Core changes
 
+#### typescript.skipBabel removed
+
+We have removed the `typescript.skipBabel` option in Storybook 8.0.0. Please use `typescript.skipCompiler` instead.
+
 #### Dropping support for Node.js 16
 
 In Storybook 8, we have dropped Node.js 16 support since it reached end-of-life on 2023-09-11. Storybook 8 supports Node.js 18 and above.

diff --git a/RESOLUTIONS.md b/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
diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md
@@ -110,20 +110,6 @@ export default {
 };
 ```
 
-If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/code/addons/storyshots-core/README.md), you will need to
-configure Jest to transform MDX stories into something Storyshots can understand:
-
-Add the following to your Jest configuration:
-
-```json
-{
-  "transform": {
-    "^.+\\.[tj]sx?$": "babel-jest",
-    "^.+\\.mdx$": "@storybook/addon-docs/jest-transform-mdx"
-  }
-}
-```
-
 ### Be sure to check framework specific installation needs
 
 - [React](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/react) (covered here)

diff --git a/code/builders/builder-webpack5/package.json b/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",

diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
@@ -20,7 +20,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 +105,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 +233,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 +268,6 @@ export default async (
       ...(isProd
         ? {
             minimize: true,
-            // eslint-disable-next-line no-nested-ternary
             minimizer: options.build?.test?.esbuildMinify
               ? [
                   new TerserWebpackPlugin<EsbuildOptions>({
@@ -285,17 +279,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,

diff --git a/code/builders/builder-webpack5/src/preview/loaders.ts b/code/builders/builder-webpack5/src/preview/loaders.ts
diff --git a/code/frameworks/angular/package.json b/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"

diff --git a/code/frameworks/angular/src/preset.ts b/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,
   };
 };
diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json
@@ -46,9 +46,6 @@
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "@babel/core": "*",
-    "babel-plugin-ember-modules-api-polyfill": "^3.5.0",
-    "babel-plugin-htmlbars-inline-precompile": "^5.3.1",
     "ember-source": "~3.28.1 || ^4.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"

diff --git a/code/frameworks/ember/src/preset.ts b/code/frameworks/ember/src/preset.ts
@@ -1,15 +1,19 @@
 import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
 import type { StorybookConfig } from './types';
+import { findDistFile } from './util';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
 
 export const addons: PresetProperty<'addons'> = [
-  require.resolve('./server/framework-preset-babel-ember'),
   require.resolve('./server/framework-preset-ember-docs'),
 ];
 
+export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => {
+  return [...entry, findDistFile(__dirname, 'client/preview/config')];
+};
+
 export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
   const framework = await options.presets.apply('framework');
 

diff --git a/code/frameworks/ember/src/server/framework-preset-babel-ember.ts b/code/frameworks/ember/src/server/framework-preset-babel-ember.ts
diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json
@@ -57,9 +57,6 @@
   "devDependencies": {
     "typescript": "^5.3.2"
   },
-  "peerDependencies": {
-    "@babel/core": "*"
-  },
   "engines": {
     "node": ">=18.0.0"
   },

diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts
@@ -4,9 +4,6 @@ import type { Options, Preset } from '@storybook/types';
 import type { NextConfig } from 'next';
 import path from 'path';
 import type { RuleSetRule } from 'webpack';
-import semver from 'semver';
-import { NextjsSWCNotSupportedError } from '@storybook/core-events/server-errors';
-import { getNextjsVersion } from '../utils';
 
 const applyFastRefresh = async (options: Options) => {
   const isDevelopment = options.configType === 'DEVELOPMENT';
@@ -21,11 +18,6 @@ export const configureSWCLoader = async (
   nextConfig: NextConfig
 ) => {
   const isDevelopment = options.configType !== 'PRODUCTION';
-  const version = getNextjsVersion();
-
-  if (semver.lt(version, '14.0.0')) {
-    throw new NextjsSWCNotSupportedError();
-  }
 
   const dir = getProjectRoot();
 

diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json
@@ -58,7 +58,6 @@
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "@babel/core": "*",
     "preact": "^8.0.0||^10.0.0"
   },
   "engines": {

diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
@@ -53,15 +53,11 @@
     "@types/node": "^18.0.0"
   },
   "peerDependencies": {
-    "@babel/core": "^7.22.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "typescript": "*"
   },
   "peerDependenciesMeta": {
-    "@babel/core": {
-      "optional": true
-    },
     "typescript": {
       "optional": true
     }

diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json
@@ -58,7 +58,6 @@
     "typescript": "^5.3.2"
   },
   "peerDependencies": {
-    "@babel/core": "*",
     "svelte": "^4.0.0 || ^5.0.0-next.16",
     "svelte-loader": "*"
   },

diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json
@@ -59,9 +59,7 @@
     "vue": "3.0.0"
   },
   "peerDependencies": {
-    "@babel/core": "*",
     "@vue/compiler-sfc": "^3.0.0",
-    "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0",
     "vue": "^3.0.0"
   },
   "engines": {

diff --git a/code/frameworks/vue3-webpack5/src/preset.ts b/code/frameworks/vue3-webpack5/src/preset.ts
@@ -24,6 +24,5 @@ export const core: PresetProperty<'core'> = async (config, options) => {
 
 export const typescript: PresetProperty<'typescript'> = async (config) => ({
   ...config,
-  skipBabel: true,
   skipCompiler: true,
 });
diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json
@@ -50,10 +50,8 @@
     "prep": "node --loader ../../../scripts/node_modules/esbuild-register/loader.js -r ../../../scripts/node_modules/esbuild-register/register.js ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@babel/preset-env": "^7.23.2",
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/core-common": "workspace:*",
-    "@storybook/preset-web-components-webpack": "workspace:*",
     "@storybook/web-components": "workspace:*",
     "@types/node": "^18.0.0"
   },

diff --git a/code/frameworks/web-components-webpack5/src/preset.ts b/code/frameworks/web-components-webpack5/src/preset.ts
@@ -4,10 +4,6 @@ import type { PresetProperty } from '@storybook/types';
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
 
-export const addons: PresetProperty<'addons'> = [
-  getAbsolutePath('@storybook/preset-web-components-webpack'),
-];
-
 export const core: PresetProperty<'core'> = async (config, options) => {
   const framework = await options.presets.apply('framework');