From 82b63d545902874ae7b5bf82af0ef7bfda518cd4 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 24 Jan 2024 14:25:25 +0100 Subject: [PATCH 1/3] Update StorybookConfig import in core-webpack types.ts --- code/lib/core-webpack/src/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/core-webpack/src/types.ts b/code/lib/core-webpack/src/types.ts index 01a68acfa950..bb7be85ffa5d 100644 --- a/code/lib/core-webpack/src/types.ts +++ b/code/lib/core-webpack/src/types.ts @@ -1,4 +1,4 @@ -import type { Options, StorybookConfigRaw as StorybookConfigBase } from '@storybook/types'; +import type { Options, StorybookConfig as StorybookConfigBase } from '@storybook/types'; export type { Options, Preset, BuilderResult, TypescriptOptions } from '@storybook/types'; From ec359a442de6623a06c311a06f4af1438fb702ea Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 25 Jan 2024 10:51:09 +0100 Subject: [PATCH 2/3] Fix types in presets --- code/builders/builder-webpack5/src/types.ts | 5 ++- code/frameworks/angular/src/preset.ts | 4 +- code/frameworks/ember/src/preset.ts | 2 +- code/frameworks/html-vite/src/preset.ts | 3 +- code/frameworks/nextjs/src/preset.ts | 28 ------------- code/frameworks/preact-vite/src/preset.ts | 2 +- code/frameworks/react-vite/src/preset.ts | 2 +- code/frameworks/react-webpack5/src/preset.ts | 40 ++----------------- 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, 16 insertions(+), 80 deletions(-) diff --git a/code/builders/builder-webpack5/src/types.ts b/code/builders/builder-webpack5/src/types.ts index 6e55f145ca22..38621af56274 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 da3bb0192f0d..139b5477110e 100644 --- a/code/frameworks/angular/src/preset.ts +++ b/code/frameworks/angular/src/preset.ts @@ -22,7 +22,7 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entries return annotations; }; -export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { +export const core: PresetProperty<'core'> = async (config, options) => { const framework = await options.presets.apply('framework'); return { @@ -34,7 +34,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, skipCompiler: true, diff --git a/code/frameworks/ember/src/preset.ts b/code/frameworks/ember/src/preset.ts index 9de2b1ab35c0..7f0a07ce7cbb 100644 --- a/code/frameworks/ember/src/preset.ts +++ b/code/frameworks/ember/src/preset.ts @@ -43,7 +43,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, }; }; -export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { +export const core: PresetProperty<'core'> = async (config, options) => { const framework = await options.presets.apply('framework'); return { 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 95f4cc062702..2ea65b700691 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -27,33 +27,6 @@ export const addons: PresetProperty<'addons'> = [ dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))), ]; -const defaultFrameworkOptions: FrameworkOptions = {}; - -export const frameworkOptions: PresetProperty<'framework'> = async (_, options) => { - 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'> = async (config, options) => { const framework = await options.presets.apply('framework'); @@ -136,7 +109,6 @@ export const babel: PresetProperty<'babel'> = async (baseConfig: TransformOption }; 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' ); diff --git a/code/frameworks/preact-vite/src/preset.ts b/code/frameworks/preact-vite/src/preset.ts index 4002182ea926..768ef8a60924 100644 --- a/code/frameworks/preact-vite/src/preset.ts +++ b/code/frameworks/preact-vite/src/preset.ts @@ -5,7 +5,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 638a006ad9ce..35a83a306ce0 100644 --- a/code/frameworks/react-vite/src/preset.ts +++ b/code/frameworks/react-vite/src/preset.ts @@ -5,7 +5,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 18444c990380..80bf2fdce588 100644 --- a/code/frameworks/react-webpack5/src/preset.ts +++ b/code/frameworks/react-webpack5/src/preset.ts @@ -1,6 +1,6 @@ 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; @@ -9,46 +9,14 @@ export const addons: PresetProperty<'addons'> = [ 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'> = async (config, options) => { - const framework = await options.presets.apply('framework'); + const presetFramework = await options.presets.apply('framework'); return { ...config, builder: { name: getAbsolutePath('@storybook/builder-webpack5'), - options: typeof framework === 'string' ? {} : framework.options.builder || {}, + options: typeof presetFramework === 'string' ? {} : presetFramework.options.builder || {}, }, renderer: getAbsolutePath('@storybook/react'), }; diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts index 9ef71bb26e89..e487cc2a1c58 100644 --- a/code/frameworks/svelte-vite/src/preset.ts +++ b/code/frameworks/svelte-vite/src/preset.ts @@ -7,7 +7,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 1a46a7574516..a19cb8e0d8ee 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'> = 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'), }; From dec75ae18edaa6502eaecb09850f6f5153d0483c Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Fri, 26 Jan 2024 15:18:20 +0100 Subject: [PATCH 3/3] Refactor preset.ts to use 'framework' instead of 'presetFramework' variable --- code/frameworks/react-webpack5/src/preset.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/frameworks/react-webpack5/src/preset.ts b/code/frameworks/react-webpack5/src/preset.ts index 80bf2fdce588..eae5bc696986 100644 --- a/code/frameworks/react-webpack5/src/preset.ts +++ b/code/frameworks/react-webpack5/src/preset.ts @@ -10,13 +10,13 @@ export const addons: PresetProperty<'addons'> = [ ]; export const core: PresetProperty<'core'> = async (config, options) => { - const presetFramework = await options.presets.apply('framework'); + const framework = await options.presets.apply('framework'); return { ...config, builder: { name: getAbsolutePath('@storybook/builder-webpack5'), - options: typeof presetFramework === 'string' ? {} : presetFramework.options.builder || {}, + options: typeof framework === 'string' ? {} : framework.options.builder || {}, }, renderer: getAbsolutePath('@storybook/react'), };