Clean up webpack framework presets for #20885

code/core/src/common/versions.ts

@@ -33,8 +33,6 @@ export default {
   'eslint-plugin-storybook': '10.4.0-alpha.10',
   '@storybook/react-dom-shim': '10.4.0-alpha.10',
   '@storybook/preset-create-react-app': '10.4.0-alpha.10',
-  '@storybook/preset-react-webpack': '10.4.0-alpha.10',
-  '@storybook/preset-server-webpack': '10.4.0-alpha.10',
   '@storybook/html': '10.4.0-alpha.10',
   '@storybook/preact': '10.4.0-alpha.10',
   '@storybook/react': '10.4.0-alpha.10',

code/frameworks/nextjs/package.json

@@ -103,8 +103,8 @@
     "@babel/runtime": "^7.28.4",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@storybook/builder-webpack5": "workspace:*",
-    "@storybook/preset-react-webpack": "workspace:*",
     "@storybook/react": "workspace:*",
+    "@storybook/react-webpack5": "workspace:*",
     "@types/semver": "^7.7.1",
     "babel-loader": "^9.1.3",
     "css-loader": "^6.7.3",

code/frameworks/nextjs/src/preset.ts

@@ -18,7 +18,7 @@ import type { FrameworkOptions, StorybookConfig } from './types.ts';
 import { isNextVersionGte } from './utils.ts';
 
 export const addons: PresetProperty<'addons'> = [
-  fileURLToPath(import.meta.resolve('@storybook/preset-react-webpack')),
+  fileURLToPath(import.meta.resolve('@storybook/react-webpack5/preset')),
 ];
 
 export const core: PresetProperty<'core'> = async (config, options) => {

code/frameworks/nextjs/src/types.ts

@@ -9,7 +9,7 @@ import type {
   ReactOptions,
   StorybookConfig as StorybookConfigBase,
   TypescriptOptions as TypescriptOptionsReact,
-} from '@storybook/preset-react-webpack';
+} from '@storybook/react-webpack5';
 
 import type * as NextImage from 'next/image';
 import type { NextRouter } from 'next/router';

code/frameworks/react-vite/src/plugins/docgen-resolver.ts

@@ -14,7 +14,7 @@ export class ReactDocgenResolveError extends Error {
 /* The below code was copied from:
  * https://github.com/reactjs/react-docgen/blob/df2daa8b6f0af693ecc3c4dc49f2246f60552bcb/packages/react-docgen/src/importer/makeFsImporter.ts#L14-L63
  * because it wasn't exported from the react-docgen package.
- * watch out: when updating this code, also update the code in code/presets/react-webpack/src/loaders/docgen-resolver.ts
+ * watch out: when updating this code, also update the code in code/frameworks/react-webpack5/src/loaders/docgen-resolver.ts
  */
 
 // These extensions are sorted by priority

code/frameworks/react-webpack5/build-config.ts

@@ -14,6 +14,21 @@ const config: BuildEntries = {
         entryPoint: './src/preset.ts',
         dts: false,
       },
+      {
+        exportEntries: ['./preset-cra'],
+        entryPoint: './src/preset-cra.ts',
+        dts: false,
+      },
+      {
+        exportEntries: ['./preset-react-docs'],
+        entryPoint: './src/preset-react-docs.ts',
+        dts: false,
+      },
+      {
+        exportEntries: ['./react-docgen-loader'],
+        entryPoint: './src/loaders/react-docgen-loader.ts',
+        dts: false,
+      },
       {
         exportEntries: ['./node'],
         entryPoint: './src/node/index.ts',

code/frameworks/react-webpack5/package.json

@@ -37,7 +37,10 @@
       "default": "./dist/node/index.js"
     },
     "./package.json": "./package.json",
-    "./preset": "./dist/preset.js"
+    "./preset": "./dist/preset.js",
+    "./preset-cra": "./dist/preset-cra.js",
+    "./preset-react-docs": "./dist/preset-react-docs.js",
+    "./react-docgen-loader": "./dist/loaders/react-docgen-loader.js"
   },
   "files": [
     "dist/**/*",
@@ -49,8 +52,17 @@
   ],
   "dependencies": {
     "@storybook/builder-webpack5": "workspace:*",
-    "@storybook/preset-react-webpack": "workspace:*",
-    "@storybook/react": "workspace:*"
+    "@storybook/core-webpack": "workspace:*",
+    "@storybook/react": "workspace:*",
+    "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0",
+    "@types/semver": "^7.7.1",
+    "empathic": "^2.0.0",
+    "magic-string": "^0.30.5",
+    "react-docgen": "^7.1.1",
+    "resolve": "^1.22.8",
+    "semver": "^7.7.3",
+    "tsconfig-paths": "^4.2.0",
+    "webpack": "5"
   },
   "devDependencies": {
     "@types/node": "^22.19.1"

code/presets/react-webpack/src/cra-config.test.ts → code/frameworks/react-webpack5/src/cra-config.test.ts

@@ -1,11 +1,11 @@
-import fs from 'node:fs';
+import * as fs from 'node:fs';
 import { join, sep } from 'node:path';
 
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import { getReactScriptsPath } from './cra-config.ts';
 
-vi.mock('fs', () => ({
+vi.mock('node:fs', () => ({
   realpathSync: vi.fn(() => '/test-project'),
   readFileSync: vi.fn(),
   existsSync: vi.fn(() => true),
@@ -44,8 +44,6 @@ describe('cra-config', () => {
 
   describe('when used with a custom react-scripts package without symlinks in .bin folder', () => {
     beforeEach(() => {
-      // In case of .bin/react-scripts is not symlink (like it happens on Windows),
-      // realpathSync() method does not translate the path.
       vi.mocked(fs.realpathSync).mockImplementationOnce((filePath) => filePath.toString());
 
       vi.mocked(fs.readFileSync).mockImplementationOnce(

code/frameworks/react-webpack5/src/loaders/docgen-resolver.ts

@@ -0,0 +1,67 @@
+import { extname } from 'node:path';
+
+import resolve from 'resolve';
+
+export class ReactDocgenResolveError extends Error {
+  readonly code = 'MODULE_NOT_FOUND';
+
+  constructor(filename: string) {
+    super(`'${filename}' was ignored by react-docgen.`);
+  }
+}
+
+// These extensions are sorted by priority.
+export const RESOLVE_EXTENSIONS = [
+  '.js',
+  '.cts',
+  '.mts',
+  '.ctsx',
+  '.mtsx',
+  '.ts',
+  '.tsx',
+  '.mjs',
+  '.cjs',
+  '.mts',
+  '.cts',
+  '.jsx',
+];
+
+export function defaultLookupModule(filename: string, basedir: string): string {
+  const resolveOptions = {
+    basedir,
+    extensions: RESOLVE_EXTENSIONS,
+    includeCoreModules: false,
+  };
+
+  try {
+    return resolve.sync(filename, resolveOptions);
+  } catch (error) {
+    const ext = extname(filename);
+    let newFilename: string;
+
+    switch (ext) {
+      case '.js':
+      case '.mjs':
+      case '.cjs': {
+        const base = filename.slice(0, -2);
+        try {
+          return resolve.sync(`${base}ts`, { ...resolveOptions, extensions: [] });
+        } catch {
+          newFilename = `${base}tsx`;
+        }
+        break;
+      }
+
+      case '.jsx':
+        newFilename = `${filename.slice(0, -3)}tsx`;
+        break;
+      default:
+        throw error;
+    }
+
+    return resolve.sync(newFilename, {
+      ...resolveOptions,
+      extensions: [],
+    });
+  }
+}

code/presets/react-webpack/src/loaders/react-docgen-loader.test.ts → code/frameworks/react-webpack5/src/loaders/react-docgen-loader.test.ts

@@ -14,16 +14,16 @@ const reactDocgenResolverMock = vi.hoisted(() => {
   };
 });
 
-vi.mock('./docgen-resolver', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('path')>();
+vi.mock('./docgen-resolver.ts', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('./docgen-resolver.ts')>();
   return {
     ...actual,
     defaultLookupModule: reactDocgenResolverMock.defaultLookupModule,
   };
 });
 
 vi.mock('react-docgen', async (importOriginal) => {
-  const actual = await importOriginal<typeof import('path')>();
+  const actual = await importOriginal<typeof import('react-docgen')>();
   return {
     ...actual,
     makeFsImporter: reactDocgenMock.makeFsImporter,

code/presets/react-webpack/src/loaders/react-docgen-loader.ts → code/frameworks/react-webpack5/src/loaders/react-docgen-loader.ts

@@ -56,7 +56,6 @@ const actualNameHandler: Handler = function actualNameHandler(documentation, com
 
       currentPath = currentPath.parentPath;
     }
-    // Could not find an actual name
     documentation.set('actualName', '');
   }
 };
@@ -76,7 +75,6 @@ export default async function reactDocgenLoader(
   map: any
 ) {
   const callback = this.async();
-  // get options
   const options = this.getOptions() || {};
   const { debug = false } = options;
 

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

@@ -28,7 +28,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (
             test: /\.(cjs|mjs|tsx?|jsx?)$/,
             enforce: 'pre',
             loader: fileURLToPath(
-              import.meta.resolve('@storybook/preset-react-webpack/react-docgen-loader')
+              import.meta.resolve('@storybook/react-webpack5/react-docgen-loader')
             ),
             options: {
               debug,
@@ -52,7 +52,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (
           test: /\.(cjs|mjs|jsx?)$/,
           enforce: 'pre',
           loader: fileURLToPath(
-            import.meta.resolve('@storybook/preset-react-webpack/react-docgen-loader')
+            import.meta.resolve('@storybook/react-webpack5/react-docgen-loader')
           ),
           options: {
             debug,
@@ -65,7 +65,6 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (
       ...(config.plugins || []),
       new ReactDocgenTypeScriptPlugin({
         ...reactDocgenTypescriptOptions,
-        // We *need* this set so that RDT returns default values in the same format as react-docgen
         savePropValueAsString: true,
       }),
     ],

code/frameworks/react-webpack5/src/preset.ts

@@ -7,7 +7,8 @@ import { WebpackDefinePlugin } from '@storybook/builder-webpack5';
 import type { StorybookConfig } from './types.ts';
 
 export const addons: PresetProperty<'addons'> = [
-  fileURLToPath(import.meta.resolve('@storybook/preset-react-webpack')),
+  fileURLToPath(import.meta.resolve('@storybook/react-webpack5/preset-cra')),
+  fileURLToPath(import.meta.resolve('@storybook/react-webpack5/preset-react-docs')),
 ];
 
 export const core: PresetProperty<'core'> = {

code/frameworks/react-webpack5/src/types.ts

@@ -2,14 +2,52 @@ import type { CompatibleString } from 'storybook/internal/types';
 
 import type {
   BuilderOptions,
-  StorybookConfigWebpack,
   TypescriptOptions as TypescriptOptionsBuilder,
+  StorybookConfigWebpack,
 } from '@storybook/builder-webpack5';
 import type {
-  ReactOptions,
   StorybookConfig as StorybookConfigBase,
-  TypescriptOptions as TypescriptOptionsReact,
-} from '@storybook/preset-react-webpack';
+  TypescriptOptions as TypescriptOptionsBase,
+  WebpackConfiguration as WebpackConfigurationBase,
+} from '@storybook/core-webpack';
+import type { PluginOptions as ReactDocgenTypescriptOptions } from '@storybook/react-docgen-typescript-plugin';
+
+export type { BuilderResult } from '@storybook/core-webpack';
+
+export interface ReactOptions {
+  strictMode?: boolean;
+  /**
+   * Use React's legacy root API to mount components
+   *
+   * React has introduced a new root API with React 18.x to enable a whole set of new features (e.g.
+   * concurrent features) If this flag is true, the legacy Root API is used to mount components to
+   * make it easier to migrate step by step to React 18.
+   *
+   * @default false
+   */
+  legacyRootApi?: boolean;
+}
+
+export type TypescriptOptions = TypescriptOptionsBase & {
+  /**
+   * Sets the type of Docgen when working with React and TypeScript
+   *
+   * @default `'react-docgen'`
+   */
+  reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false;
+  /**
+   * Configures `react-docgen-typescript-plugin`
+   *
+   * @default
+   * @see https://github.com/storybookjs/storybook/blob/next/code/builders/builder-webpack5/src/config/defaults.js#L4-L6
+   */
+  reactDocgenTypescriptOptions: ReactDocgenTypescriptOptions;
+};
+
+type StorybookConfigBaseWithTypes<TWebpackConfiguration = WebpackConfigurationBase> =
+  StorybookConfigBase<TWebpackConfiguration> & {
+    typescript?: Partial<TypescriptOptions>;
+  };
 
 type FrameworkName = CompatibleString<'@storybook/react-webpack5'>;
 type BuilderName = CompatibleString<'@storybook/builder-webpack5'>;
@@ -25,21 +63,21 @@ type StorybookConfigFramework = {
         name: FrameworkName;
         options: FrameworkOptions;
       };
-  core?: StorybookConfigBase['core'] & {
+  core?: StorybookConfigBaseWithTypes['core'] & {
     builder?:
       | BuilderName
       | {
           name: BuilderName;
           options: BuilderOptions;
         };
   };
-  typescript?: Partial<TypescriptOptionsBuilder & TypescriptOptionsReact> &
-    StorybookConfigBase['typescript'];
+  typescript?: Partial<TypescriptOptionsBuilder & TypescriptOptions> &
+    StorybookConfigBaseWithTypes['typescript'];
 };
 
 /** The interface for Storybook configuration in `main.ts` files. */
 export type StorybookConfig = Omit<
-  StorybookConfigBase,
+  StorybookConfigBaseWithTypes,
   keyof StorybookConfigWebpack | keyof StorybookConfigFramework
 > &
   StorybookConfigWebpack &

code/frameworks/server-webpack5/build-config.ts

@@ -14,6 +14,11 @@ const config: BuildEntries = {
         entryPoint: './src/preset.ts',
         dts: false,
       },
+      {
+        exportEntries: ['./loader'],
+        entryPoint: './src/loader.ts',
+        dts: false,
+      },
       {
         exportEntries: ['./node'],
         entryPoint: './src/node/index.ts',

code/frameworks/server-webpack5/package.json

@@ -29,6 +29,7 @@
       "code": "./src/index.ts",
       "default": "./dist/index.js"
     },
+    "./loader": "./dist/loader.js",
     "./node": {
       "types": "./dist/node/index.d.ts",
       "code": "./src/node/index.ts",
@@ -47,8 +48,11 @@
   ],
   "dependencies": {
     "@storybook/builder-webpack5": "workspace:*",
-    "@storybook/preset-server-webpack": "workspace:*",
-    "@storybook/server": "workspace:*"
+    "@storybook/core-webpack": "workspace:*",
+    "@storybook/server": "workspace:*",
+    "safe-identifier": "^0.4.2",
+    "ts-dedent": "^2.0.0",
+    "yaml-loader": "^0.8.1"
   },
   "devDependencies": {
     "@types/node": "^22.19.1",

code/presets/server-webpack/src/loader.ts → code/frameworks/server-webpack5/src/loader.ts

@@ -2,10 +2,8 @@ import { compileCsfModule } from './lib/compiler/index.ts';
 
 export default (content: string) => {
   try {
-    const after = compileCsfModule(JSON.parse(content));
-    return after;
+    return compileCsfModule(JSON.parse(content));
   } catch (e) {
-    // for debugging
     console.log(content, e);
   }
   return content;