From a63a4f4674cd97f5d6076cb96d09a365984f2642 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 6 Feb 2024 21:46:52 +0800 Subject: [PATCH] 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 a91240a3ba7cd784f5fbdea6152c3cf70381e78d) --- code/builders/builder-webpack5/src/types.ts | 5 ++- code/frameworks/angular/src/preset.ts | 6 +-- code/frameworks/ember/src/preset.ts | 35 ++++++++++++++- code/frameworks/html-vite/src/preset.ts | 3 +- code/frameworks/nextjs/src/preset.ts | 35 +-------------- code/frameworks/preact-vite/src/preset.ts | 2 +- code/frameworks/react-vite/src/preset.ts | 2 +- code/frameworks/react-webpack5/src/preset.ts | 44 +++---------------- code/frameworks/svelte-vite/src/preset.ts | 2 +- code/frameworks/vue3-webpack5/src/preset.ts | 5 +-- .../web-components-vite/src/preset.ts | 3 +- 11 files changed, 53 insertions(+), 89 deletions(-) diff --git a/code/builders/builder-webpack5/src/types.ts b/code/builders/builder-webpack5/src/types.ts index 93b2c3ad9caf..69ef6edf66bb 100644 --- a/code/builders/builder-webpack5/src/types.ts +++ b/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['typescript']; +type TypeScriptOptionsBase = Partial; /** * Options for TypeScript usage within Storybook. @@ -19,7 +20,7 @@ export interface TypescriptOptions extends TypeScriptOptionsBase { checkOptions?: ConstructorParameters[0]; } -export interface StorybookConfigWebpack extends Pick { +export interface StorybookConfigWebpack extends Omit { /** * Modify or return a custom Webpack config after the Storybook's default configuration * has run (mostly used by addons). diff --git a/code/frameworks/angular/src/preset.ts b/code/frameworks/angular/src/preset.ts index f093cb6cc8b8..9bf25db2a767 100644 --- a/code/frameworks/angular/src/preset.ts +++ b/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('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, diff --git a/code/frameworks/ember/src/preset.ts b/code/frameworks/ember/src/preset.ts index 6524132780e5..f94f0caea350 100644 --- a/code/frameworks/ember/src/preset.ts +++ b/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('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, diff --git a/code/frameworks/html-vite/src/preset.ts b/code/frameworks/html-vite/src/preset.ts index 4ae871b6e589..965ba77956a0 100644 --- a/code/frameworks/html-vite/src/preset.ts +++ b/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(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'), }; diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index e4fdd7936fb9..17172c10ff55 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/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 => { - const config = await options.presets.apply('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('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 { - // eslint-disable-next-line @typescript-eslint/no-shadow const frameworkOptions = await options.presets.apply<{ options: FrameworkOptions }>( 'frameworkOptions' ); diff --git a/code/frameworks/preact-vite/src/preset.ts b/code/frameworks/preact-vite/src/preset.ts index 2d4e18d77e90..188ffcde2f5d 100644 --- a/code/frameworks/preact-vite/src/preset.ts +++ b/code/frameworks/preact-vite/src/preset.ts @@ -7,7 +7,7 @@ import type { StorybookConfig } from './types'; const getAbsolutePath = (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'), }; diff --git a/code/frameworks/react-vite/src/preset.ts b/code/frameworks/react-vite/src/preset.ts index 207f60988ebc..1d8584db4548 100644 --- a/code/frameworks/react-vite/src/preset.ts +++ b/code/frameworks/react-vite/src/preset.ts @@ -7,7 +7,7 @@ import type { StorybookConfig } from './types'; const getAbsolutePath = (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'), }; diff --git a/code/frameworks/react-webpack5/src/preset.ts b/code/frameworks/react-webpack5/src/preset.ts index 873d214c597c..d28fe9f6cf20 100644 --- a/code/frameworks/react-webpack5/src/preset.ts +++ b/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 = (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 => { - const config = await options.presets.apply('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('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'), diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts index 220812cf7c5a..de3b5f2383e2 100644 --- a/code/frameworks/svelte-vite/src/preset.ts +++ b/code/frameworks/svelte-vite/src/preset.ts @@ -8,7 +8,7 @@ import { svelteDocgen } from './plugins/svelte-docgen'; const getAbsolutePath = (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'), }; diff --git a/code/frameworks/vue3-webpack5/src/preset.ts b/code/frameworks/vue3-webpack5/src/preset.ts index 1714cc16075e..5e58a1ece98c 100644 --- a/code/frameworks/vue3-webpack5/src/preset.ts +++ b/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 = (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('framework'); diff --git a/code/frameworks/web-components-vite/src/preset.ts b/code/frameworks/web-components-vite/src/preset.ts index a3bb7c4d66a2..2edf8f450c75 100644 --- a/code/frameworks/web-components-vite/src/preset.ts +++ b/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 = (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'), };