Merge pull request #25740 from storybookjs/valentin/fix-storybook-config-typing-for-webpack-projects

Webpack: Update StorybookConfig import in core-webpack types.ts
(cherry picked from commit a91240a)

Author: shilman

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

@@ -3,11 +3,12 @@ import type {
   Options,
   BuilderResult as BuilderResultBase,
   StorybookConfig,
+  TypescriptOptions as WebpackTypescriptOptions,
 } from '@storybook/core-webpack';
 
 import type ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
-type TypeScriptOptionsBase = Required<StorybookConfig>['typescript'];
+type TypeScriptOptionsBase = Partial<WebpackTypescriptOptions>;
 
 /**
  * Options for TypeScript usage within Storybook.
@@ -19,7 +20,7 @@ export interface TypescriptOptions extends TypeScriptOptionsBase {
   checkOptions?: ConstructorParameters<typeof ForkTsCheckerWebpackPlugin>[0];
 }
 
-export interface StorybookConfigWebpack extends Pick<StorybookConfig, 'webpack' | 'webpackFinal'> {
+export interface StorybookConfigWebpack extends Omit<StorybookConfig, 'webpack' | 'webpackFinal'> {
   /**
    * Modify or return a custom Webpack config after the Storybook's default configuration
    * has run (mostly used by addons).

code/frameworks/angular/src/preset.ts

@@ -25,8 +25,8 @@ export const previewAnnotations: StorybookConfig['previewAnnotations'] = (
   return annotations;
 };
 
-export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
-  const framework = await options.presets.apply<StorybookConfig['framework']>('framework');
+export const core: PresetProperty<'core'> = async (config, options) => {
+  const framework = await options.presets.apply('framework');
 
   return {
     ...config,
@@ -37,7 +37,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   };
 };
 
-export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => {
+export const typescript: PresetProperty<'typescript'> = async (config) => {
   return {
     ...config,
     skipBabel: true,

code/frameworks/ember/src/preset.ts

@@ -10,8 +10,39 @@ export const addons: PresetProperty<'addons', StorybookConfig> = [
   require.resolve('./server/framework-preset-ember-docs'),
 ];
 
-export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
-  const framework = await options.presets.apply<StorybookConfig['framework']>('framework');
+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'> = async (config, options) => {
+  const framework = await options.presets.apply('framework');
 
   return {
     ...config,

code/frameworks/html-vite/src/preset.ts

@@ -1,12 +1,11 @@
 import type { PresetProperty } from '@storybook/types';
 import { dirname, join } from 'path';
-import type { StorybookConfig } from './types';
 
 function getAbsolutePath<I extends string>(value: I): I {
   return dirname(require.resolve(join(value, 'package.json'))) as any;
 }
 
-export const core: PresetProperty<'core', StorybookConfig> = {
+export const core: PresetProperty<'core'> = {
   builder: getAbsolutePath('@storybook/builder-vite'),
   renderer: getAbsolutePath('@storybook/html'),
 };

code/frameworks/nextjs/src/preset.ts

@@ -23,38 +23,8 @@ export const addons: PresetProperty<'addons', StorybookConfig> = [
   dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))),
 ];
 
-const defaultFrameworkOptions: FrameworkOptions = {};
-
-export const frameworkOptions = async (
-  _: never,
-  options: Options
-): Promise<StorybookConfig['framework']> => {
-  const config = await options.presets.apply<StorybookConfig['framework']>('framework');
-
-  if (typeof config === 'string') {
-    return {
-      name: config,
-      options: defaultFrameworkOptions,
-    };
-  }
-  if (typeof config === 'undefined') {
-    return {
-      name: require.resolve('@storybook/nextjs') as '@storybook/nextjs',
-      options: defaultFrameworkOptions,
-    };
-  }
-
-  return {
-    name: config.name,
-    options: {
-      ...defaultFrameworkOptions,
-      ...config.options,
-    },
-  };
-};
-
-export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
-  const framework = await options.presets.apply<StorybookConfig['framework']>('framework');
+export const core: PresetProperty<'core'> = async (config, options) => {
+  const framework = await options.presets.apply('framework');
 
   return {
     ...config,
@@ -134,7 +104,6 @@ export const babel = async (baseConfig: TransformOptions): Promise<TransformOpti
 };
 
 export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, options) => {
-  // eslint-disable-next-line @typescript-eslint/no-shadow
   const frameworkOptions = await options.presets.apply<{ options: FrameworkOptions }>(
     'frameworkOptions'
   );

code/frameworks/preact-vite/src/preset.ts

@@ -7,7 +7,7 @@ import type { StorybookConfig } from './types';
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
 
-export const core: PresetProperty<'core', StorybookConfig> = {
+export const core: PresetProperty<'core'> = {
   builder: getAbsolutePath('@storybook/builder-vite'),
   renderer: getAbsolutePath('@storybook/preact'),
 };

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

@@ -7,7 +7,7 @@ import type { StorybookConfig } from './types';
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
 
-export const core: PresetProperty<'core', StorybookConfig> = {
+export const core: PresetProperty<'core'> = {
   builder: getAbsolutePath('@storybook/builder-vite'),
   renderer: getAbsolutePath('@storybook/react'),
 };

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

@@ -1,8 +1,6 @@
-/* eslint-disable no-param-reassign */
-
 import { dirname, join } from 'path';
-import type { PresetProperty, Options } from '@storybook/types';
-import type { FrameworkOptions, StorybookConfig } from './types';
+import type { PresetProperty } from '@storybook/types';
+import type { StorybookConfig } from './types';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
@@ -11,40 +9,8 @@ export const addons: PresetProperty<'addons', StorybookConfig> = [
   getAbsolutePath('@storybook/preset-react-webpack'),
 ];
 
-const defaultFrameworkOptions: FrameworkOptions = {
-  legacyRootApi: true,
-};
-
-export const frameworkOptions = async (
-  _: never,
-  options: Options
-): Promise<StorybookConfig['framework']> => {
-  const config = await options.presets.apply<StorybookConfig['framework']>('framework');
-
-  if (typeof config === 'string') {
-    return {
-      name: config,
-      options: defaultFrameworkOptions,
-    };
-  }
-  if (typeof config === 'undefined') {
-    return {
-      name: getAbsolutePath('@storybook/react-webpack5'),
-      options: defaultFrameworkOptions,
-    };
-  }
-
-  return {
-    name: config.name,
-    options: {
-      ...defaultFrameworkOptions,
-      ...config.options,
-    },
-  };
-};
-
-export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
-  const framework = await options.presets.apply<StorybookConfig['framework']>('framework');
+export const core: PresetProperty<'core'> = async (config, options) => {
+  const framework = await options.presets.apply('framework');
 
   return {
     ...config,
@@ -57,8 +23,10 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
 };
 
 export const webpack: StorybookConfig['webpack'] = async (config) => {
+  // eslint-disable-next-line no-param-reassign
   config.resolve = config.resolve || {};
 
+  // eslint-disable-next-line no-param-reassign
   config.resolve.alias = {
     ...config.resolve?.alias,
     '@storybook/react': getAbsolutePath('@storybook/react'),

code/frameworks/svelte-vite/src/preset.ts

@@ -8,7 +8,7 @@ import { svelteDocgen } from './plugins/svelte-docgen';
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
 
-export const core: PresetProperty<'core', StorybookConfig> = {
+export const core: PresetProperty<'core'> = {
   builder: getAbsolutePath('@storybook/builder-vite'),
   renderer: getAbsolutePath('@storybook/svelte'),
 };

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

@@ -1,13 +1,10 @@
 import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
-import type { StorybookConfig } from './types';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
 
-export const addons: PresetProperty<'addons', StorybookConfig> = [
-  getAbsolutePath('@storybook/preset-vue3-webpack'),
-];
+export const addons: PresetProperty<'addons'> = [getAbsolutePath('@storybook/preset-vue3-webpack')];
 
 export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
   const framework = await options.presets.apply<StorybookConfig['framework']>('framework');

code/frameworks/web-components-vite/src/preset.ts

@@ -1,11 +1,10 @@
 import type { PresetProperty } from '@storybook/types';
 import { dirname, join } from 'path';
-import type { StorybookConfig } from './types';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
 
-export const core: PresetProperty<'core', StorybookConfig> = {
+export const core: PresetProperty<'core'> = {
   builder: getAbsolutePath('@storybook/builder-vite'),
   renderer: getAbsolutePath('@storybook/web-components'),
 };