Webpack5: Add react-docgen loader and remove babel-plugin-react-docgen

code/addons/docs/src/typings.d.ts

@@ -1,7 +1,6 @@
 declare module '@egoist/vue-to-react';
 declare module 'remark-slug';
 declare module 'remark-external-links';
-declare module 'babel-plugin-react-docgen';
 declare module 'acorn-jsx';
 declare module 'vue/dist/vue';
 declare module '@storybook/mdx1-csf';

code/jest.config.js

@@ -5,6 +5,7 @@ module.exports = {
     '<rootDir>/lib/*',
     '<rootDir>/builders/*',
     '<rootDir>/renderers/*',
+    '<rootDir>/presets/*',
     '<rootDir>/ui/!(node_modules)*',
   ],
   collectCoverage: false,

code/lib/docs-tools/package.json

@@ -54,6 +54,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
+    "babel-plugin-react-docgen": "4.2.1",
     "jest-specific-snapshot": "^8.0.0",
     "require-from-string": "^2.0.2",
     "typescript": "~4.9.3"

code/presets/create-react-app/package.json

@@ -53,7 +53,6 @@
     "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
     "@storybook/types": "workspace:*",
     "@types/babel__core": "^7.1.7",
-    "babel-plugin-react-docgen": "^4.1.0",
     "pnp-webpack-plugin": "^1.7.0",
     "semver": "^7.3.5"
   },

code/presets/react-webpack/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};

code/presets/react-webpack/package.json

@@ -47,6 +47,11 @@
       "require": "./dist/framework-preset-react.js",
       "import": "./dist/framework-preset-react.mjs"
     },
+    "./dist/loaders/react-docgen-loader": {
+      "types": "./dist/loaders/react-docgen-loader.d.ts",
+      "require": "./dist/loaders/react-docgen-loader.js",
+      "import": "./dist/loaders/react-docgen-loader.mjs"
+    },
     "./package.json": "./package.json"
   },
   "main": "dist/index.js",
@@ -75,8 +80,9 @@
     "@types/node": "^18.0.0",
     "@types/semver": "^7.3.4",
     "babel-plugin-add-react-displayname": "^0.0.5",
-    "babel-plugin-react-docgen": "^4.2.1",
     "fs-extra": "^11.1.0",
+    "magic-string": "^0.30.5",
+    "react-docgen": "^7.0.0",
     "react-refresh": "^0.11.0",
     "semver": "^7.3.7",
     "webpack": "5"
@@ -108,7 +114,8 @@
       "./src/index.ts",
       "./src/framework-preset-cra.ts",
       "./src/framework-preset-react-docs.ts",
-      "./src/framework-preset-react.ts"
+      "./src/framework-preset-react.ts",
+      "./src/loaders/react-docgen-loader.ts"
     ],
     "platform": "node"
   },

code/presets/react-webpack/src/framework-preset-react-docs.test.ts

@@ -1,20 +1,22 @@
 import ReactDocgenTypescriptPlugin from '@storybook/react-docgen-typescript-plugin';
 import type { TypescriptOptions } from '@storybook/core-webpack';
+import type { Configuration } from 'webpack';
 import * as preset from './framework-preset-react-docs';
 
+jest.mock('./requirer', () => ({
+  requirer: (resolver: any, path: string) => path,
+}));
+
 describe('framework-preset-react-docgen', () => {
-  const babelPluginReactDocgenPath = require.resolve('babel-plugin-react-docgen');
   const presetsListWithDocs = [{ name: '@storybook/addon-docs', options: {}, preset: null }];
 
+  // mock requirer
+
   describe('react-docgen', () => {
-    it('should return the babel config with the extra plugin', async () => {
-      const babelConfig = {
-        babelrc: false,
-        presets: ['env', 'foo-preset'],
-        plugins: ['foo-plugin'],
-      };
+    it('should return the webpack config with the extra webpack loader', async () => {
+      const webpackConfig: Configuration = {};
 
-      const config = await preset.babel?.(babelConfig, {
+      const config = await preset.webpackFinal?.(webpackConfig, {
         presets: {
           apply: async () =>
             ({
@@ -26,15 +28,15 @@ describe('framework-preset-react-docgen', () => {
       } as any);
 
       expect(config).toEqual({
-        babelrc: false,
-        plugins: ['foo-plugin'],
-        presets: ['env', 'foo-preset'],
-        overrides: [
-          {
-            test: /\.(cjs|mjs|tsx?|jsx?)$/,
-            plugins: [[babelPluginReactDocgenPath]],
-          },
-        ],
+        module: {
+          rules: [
+            {
+              exclude: /node_modules\/.*/,
+              loader: '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader',
+              test: /\.(cjs|mjs|tsx?|jsx?)$/,
+            },
+          ],
+        },
       });
     });
   });
@@ -58,34 +60,26 @@ describe('framework-preset-react-docgen', () => {
       });
 
       expect(config).toEqual({
+        module: {
+          rules: [
+            {
+              exclude: /node_modules\/.*/,
+              loader: '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader',
+              test: /\.(cjs|mjs|jsx?)$/,
+            },
+          ],
+        },
         plugins: [expect.any(ReactDocgenTypescriptPlugin)],
       });
     });
   });
 
   describe('no docgen', () => {
     it('should not add any extra plugins', async () => {
-      const babelConfig = {
-        babelrc: false,
-        presets: ['env', 'foo-preset'],
-        plugins: ['foo-plugin'],
-      };
-
       const webpackConfig = {
         plugins: [],
       };
 
-      const outputBabelconfig = await preset.babel?.(babelConfig, {
-        presets: {
-          // @ts-expect-error (Converted from ts-ignore)
-          apply: async () =>
-            ({
-              check: false,
-              reactDocgen: false,
-            } as Partial<TypescriptOptions>),
-        },
-        presetsList: presetsListWithDocs,
-      });
       const outputWebpackconfig = await preset.webpackFinal?.(webpackConfig, {
         presets: {
           // @ts-expect-error (Converted from ts-ignore)
@@ -98,40 +92,16 @@ describe('framework-preset-react-docgen', () => {
         presetsList: presetsListWithDocs,
       });
 
-      expect(outputBabelconfig).toEqual({
-        babelrc: false,
-        presets: ['env', 'foo-preset'],
-        plugins: ['foo-plugin'],
-      });
-      expect(outputWebpackconfig).toEqual({
-        plugins: [],
-      });
+      expect(outputWebpackconfig).toEqual({ plugins: [] });
     });
   });
 
   describe('no docs or controls addon used', () => {
     it('should not add any extra plugins', async () => {
-      const babelConfig = {
-        babelrc: false,
-        presets: ['env', 'foo-preset'],
-        plugins: ['foo-plugin'],
-      };
-
       const webpackConfig = {
         plugins: [],
       };
 
-      const outputBabelconfig = await preset.babel?.(babelConfig, {
-        presets: {
-          // @ts-expect-error (Converted from ts-ignore)
-          apply: async () =>
-            ({
-              check: false,
-              reactDocgen: 'react-docgen-typescript',
-            } as Partial<TypescriptOptions>),
-        },
-        presetsList: [],
-      });
       const outputWebpackconfig = await preset.webpackFinal?.(webpackConfig, {
         presets: {
           // @ts-expect-error (Converted from ts-ignore)
@@ -144,11 +114,6 @@ describe('framework-preset-react-docgen', () => {
         presetsList: [],
       });
 
-      expect(outputBabelconfig).toEqual({
-        babelrc: false,
-        presets: ['env', 'foo-preset'],
-        plugins: ['foo-plugin'],
-      });
       expect(outputWebpackconfig).toEqual({
         plugins: [],
       });

code/presets/react-webpack/src/framework-preset-react-docs.ts

@@ -1,51 +1,64 @@
 import { hasDocsOrControls } from '@storybook/docs-tools';
 
+import type { Configuration } from 'webpack';
 import type { StorybookConfig } from './types';
+import { requirer } from './requirer';
 
-export const babel: StorybookConfig['babel'] = async (config, options) => {
+export const webpackFinal: StorybookConfig['webpackFinal'] = async (
+  config,
+  options
+): Promise<Configuration> => {
   if (!hasDocsOrControls(options)) return config;
 
   const typescriptOptions = await options.presets.apply<StorybookConfig['typescript']>(
     'typescript',
     {} as any
   );
 
-  const { reactDocgen } = typescriptOptions || {};
+  const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions || {};
 
   if (typeof reactDocgen !== 'string') {
     return config;
   }
 
-  return {
-    ...config,
-    overrides: [
-      ...(config?.overrides || []),
-      {
-        test: reactDocgen === 'react-docgen' ? /\.(cjs|mjs|tsx?|jsx?)$/ : /\.(cjs|mjs|jsx?)$/,
-        plugins: [[require.resolve('babel-plugin-react-docgen')]],
-      },
-    ],
-  };
-};
-
-export const webpackFinal: StorybookConfig['webpackFinal'] = async (config, options) => {
-  if (!hasDocsOrControls(options)) return config;
-
-  const typescriptOptions = await options.presets.apply<StorybookConfig['typescript']>(
-    'typescript',
-    {} as any
-  );
-
-  const { reactDocgen, reactDocgenTypescriptOptions } = typescriptOptions || {};
-
   if (reactDocgen !== 'react-docgen-typescript') {
-    return config;
+    return {
+      ...config,
+      module: {
+        ...(config.module ?? {}),
+        rules: [
+          ...(config.module?.rules ?? []),
+          {
+            test: /\.(cjs|mjs|tsx?|jsx?)$/,
+            loader: requirer(
+              require.resolve,
+              '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader'
+            ),
+            exclude: /node_modules\/.*/,
+          },
+        ],
+      },
+    };
   }
 
   const { ReactDocgenTypeScriptPlugin } = await import('@storybook/react-docgen-typescript-plugin');
 
   return {
     ...config,
+    module: {
+      ...(config.module ?? {}),
+      rules: [
+        ...(config.module?.rules ?? []),
+        {
+          test: /\.(cjs|mjs|jsx?)$/,
+          loader: requirer(
+            require.resolve,
+            '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader'
+          ),
+          exclude: /node_modules\/.*/,
+        },
+      ],
+    },
     plugins: [
       ...(config.plugins || []),
       new ReactDocgenTypeScriptPlugin({