diff --git a/MIGRATION.md b/MIGRATION.md index 283c5e5da813..f50dae7b2eec 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -20,6 +20,7 @@ - [Webpack4 support discontinued](#webpack4-support-discontinued) - [Framework field mandatory](#framework-field-mandatory) - [frameworkOptions renamed](#frameworkoptions-renamed) + - [TypeScript: StorybookConfig type moved](#typescript-storybookconfig-type-moved) - [Framework standalone build moved](#framework-standalone-build-moved) - [Docs modern inline rendering by default](#docs-modern-inline-rendering-by-default) - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) @@ -573,6 +574,23 @@ module.exports = { }; ``` +#### TypeScript: StorybookConfig type moved + +If you are using TypeScript you should import the `StorybookConfig` type from your framework package. + +For example: + +```ts +import type { StorybookConfig } from '@storybook/react-vite'; + +const config: StorybookConfig = { + framework: '@storybook/react-vite', + // ... your configuration +}; + +export default config; +``` + #### Framework standalone build moved In 7.0 the location of the standalone node API has moved to `@storybook/core-server`. @@ -747,7 +765,6 @@ If user code in `.storybook/preview.js` or stories relies on "sloppy" mode behav Earlier versions of Storybook used Webpack DLLs as a performance crutch. In 6.1, we've removed Storybook's built-in DLLs and have deprecated the command-line parameters `--no-dll` and `--ui-dll`. In 7.0 those options are removed. - ### Docs Changes The information hierarchy of docs in Storybook has changed in 7.0. The main difference is that each docs is listed in the sidebar as a separate entry, rather than attached to individual stories. diff --git a/code/frameworks/html-vite/src/index.ts b/code/frameworks/html-vite/src/index.ts index d3ded0cdbbb9..fcb073fefcd6 100644 --- a/code/frameworks/html-vite/src/index.ts +++ b/code/frameworks/html-vite/src/index.ts @@ -1 +1 @@ -export type { StorybookConfig } from '@storybook/builder-vite'; +export * from './types'; diff --git a/code/frameworks/html-vite/src/preset.ts b/code/frameworks/html-vite/src/preset.ts index 8e2f55a64687..814831785a39 100644 --- a/code/frameworks/html-vite/src/preset.ts +++ b/code/frameworks/html-vite/src/preset.ts @@ -1,6 +1,7 @@ -import type { StorybookConfig } from '@storybook/builder-vite'; +import type { PresetProperty } from '@storybook/types'; +import type { StorybookConfig } from './types'; -export const core: StorybookConfig['core'] = { +export const core: PresetProperty<'core', StorybookConfig> = { builder: '@storybook/builder-vite', renderer: '@storybook/html', }; diff --git a/code/frameworks/html-vite/src/types.ts b/code/frameworks/html-vite/src/types.ts new file mode 100644 index 000000000000..db508a143b53 --- /dev/null +++ b/code/frameworks/html-vite/src/types.ts @@ -0,0 +1,36 @@ +import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; +import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite'; + +type FrameworkName = '@storybook/html-vite'; +type BuilderName = '@storybook/builder-vite'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigVite | keyof StorybookConfigFramework +> & + StorybookConfigVite & + StorybookConfigFramework; diff --git a/code/frameworks/preact-vite/src/index.ts b/code/frameworks/preact-vite/src/index.ts index d3ded0cdbbb9..fcb073fefcd6 100644 --- a/code/frameworks/preact-vite/src/index.ts +++ b/code/frameworks/preact-vite/src/index.ts @@ -1 +1 @@ -export type { StorybookConfig } from '@storybook/builder-vite'; +export * from './types'; diff --git a/code/frameworks/preact-vite/src/preset.ts b/code/frameworks/preact-vite/src/preset.ts index b0f891c626c7..aecc5b9a904a 100644 --- a/code/frameworks/preact-vite/src/preset.ts +++ b/code/frameworks/preact-vite/src/preset.ts @@ -1,8 +1,9 @@ -import type { StorybookConfig } from '@storybook/builder-vite'; import { hasVitePlugins } from '@storybook/builder-vite'; +import type { PresetProperty } from '@storybook/types'; import preact from '@preact/preset-vite'; +import type { StorybookConfig } from './types'; -export const core: StorybookConfig['core'] = { +export const core: PresetProperty<'core', StorybookConfig> = { builder: '@storybook/builder-vite', renderer: '@storybook/preact', }; diff --git a/code/frameworks/preact-vite/src/types.ts b/code/frameworks/preact-vite/src/types.ts new file mode 100644 index 000000000000..d654f5e13bbc --- /dev/null +++ b/code/frameworks/preact-vite/src/types.ts @@ -0,0 +1,36 @@ +import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; +import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite'; + +type FrameworkName = '@storybook/preact-vite'; +type BuilderName = '@storybook/builder-vite'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigVite | keyof StorybookConfigFramework +> & + StorybookConfigVite & + StorybookConfigFramework; diff --git a/code/frameworks/react-vite/src/index.ts b/code/frameworks/react-vite/src/index.ts index d3ded0cdbbb9..fcb073fefcd6 100644 --- a/code/frameworks/react-vite/src/index.ts +++ b/code/frameworks/react-vite/src/index.ts @@ -1 +1 @@ -export type { StorybookConfig } from '@storybook/builder-vite'; +export * from './types'; diff --git a/code/frameworks/react-vite/src/preset.ts b/code/frameworks/react-vite/src/preset.ts index 6f89d4dd61f6..f76e97567979 100644 --- a/code/frameworks/react-vite/src/preset.ts +++ b/code/frameworks/react-vite/src/preset.ts @@ -1,8 +1,9 @@ /* eslint-disable global-require */ -import type { StorybookConfig } from '@storybook/builder-vite'; +import type { PresetProperty } from '@storybook/types'; import { hasVitePlugins } from '@storybook/builder-vite'; +import type { StorybookConfig } from './types'; -export const core: StorybookConfig['core'] = { +export const core: PresetProperty<'core', StorybookConfig> = { builder: '@storybook/builder-vite', renderer: '@storybook/react', }; diff --git a/code/frameworks/react-vite/src/types.ts b/code/frameworks/react-vite/src/types.ts new file mode 100644 index 000000000000..110220c6b7ac --- /dev/null +++ b/code/frameworks/react-vite/src/types.ts @@ -0,0 +1,36 @@ +import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; +import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite'; + +type FrameworkName = '@storybook/react-vite'; +type BuilderName = '@storybook/builder-vite'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigVite | keyof StorybookConfigFramework +> & + StorybookConfigVite & + StorybookConfigFramework; diff --git a/code/frameworks/svelte-vite/src/index.ts b/code/frameworks/svelte-vite/src/index.ts index d3ded0cdbbb9..fcb073fefcd6 100644 --- a/code/frameworks/svelte-vite/src/index.ts +++ b/code/frameworks/svelte-vite/src/index.ts @@ -1 +1 @@ -export type { StorybookConfig } from '@storybook/builder-vite'; +export * from './types'; diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts index 0d459212adae..870755ac6094 100644 --- a/code/frameworks/svelte-vite/src/preset.ts +++ b/code/frameworks/svelte-vite/src/preset.ts @@ -1,8 +1,10 @@ -import { type StorybookConfig, hasVitePlugins } from '@storybook/builder-vite'; +import { hasVitePlugins } from '@storybook/builder-vite'; +import type { PresetProperty } from '@storybook/types'; +import type { StorybookConfig } from './types'; import { handleSvelteKit } from './utils'; import { svelteDocgen } from './plugins/svelte-docgen'; -export const core: StorybookConfig['core'] = { +export const core: PresetProperty<'core', StorybookConfig> = { builder: '@storybook/builder-vite', renderer: '@storybook/svelte', }; diff --git a/code/frameworks/svelte-vite/src/types.ts b/code/frameworks/svelte-vite/src/types.ts new file mode 100644 index 000000000000..8d4ccb8cc9cb --- /dev/null +++ b/code/frameworks/svelte-vite/src/types.ts @@ -0,0 +1,36 @@ +import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; +import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite'; + +type FrameworkName = '@storybook/svelte-vite'; +type BuilderName = '@storybook/builder-vite'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigVite | keyof StorybookConfigFramework +> & + StorybookConfigVite & + StorybookConfigFramework; diff --git a/code/frameworks/sveltekit/src/index.ts b/code/frameworks/sveltekit/src/index.ts index 1a8d7c1a6e62..fcb073fefcd6 100644 --- a/code/frameworks/sveltekit/src/index.ts +++ b/code/frameworks/sveltekit/src/index.ts @@ -1 +1 @@ -export * from '@storybook/svelte-vite'; +export * from './types'; diff --git a/code/frameworks/sveltekit/src/preset.ts b/code/frameworks/sveltekit/src/preset.ts index 4f6a7d602f1d..42286e5a0785 100644 --- a/code/frameworks/sveltekit/src/preset.ts +++ b/code/frameworks/sveltekit/src/preset.ts @@ -1,9 +1,10 @@ -import { type StorybookConfig } from '@storybook/svelte-vite'; // @ts-expect-error -- TS picks up the type from preset.js instead of dist/preset.d.ts import { viteFinal as svelteViteFinal } from '@storybook/svelte-vite/preset'; +import type { PresetProperty } from '@storybook/types'; import { withoutVitePlugins } from '@storybook/builder-vite'; +import { type StorybookConfig } from './types'; -export const core: StorybookConfig['core'] = { +export const core: PresetProperty<'core', StorybookConfig> = { builder: '@storybook/builder-vite', renderer: '@storybook/svelte', }; diff --git a/code/frameworks/sveltekit/src/types.ts b/code/frameworks/sveltekit/src/types.ts new file mode 100644 index 000000000000..647ea6fb5653 --- /dev/null +++ b/code/frameworks/sveltekit/src/types.ts @@ -0,0 +1,36 @@ +import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; +import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite'; + +type FrameworkName = '@storybook/sveltekit'; +type BuilderName = '@storybook/builder-vite'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigVite | keyof StorybookConfigFramework +> & + StorybookConfigVite & + StorybookConfigFramework; diff --git a/code/frameworks/vue-vite/src/index.ts b/code/frameworks/vue-vite/src/index.ts index d3ded0cdbbb9..fcb073fefcd6 100644 --- a/code/frameworks/vue-vite/src/index.ts +++ b/code/frameworks/vue-vite/src/index.ts @@ -1 +1 @@ -export type { StorybookConfig } from '@storybook/builder-vite'; +export * from './types'; diff --git a/code/frameworks/vue-vite/src/preset.ts b/code/frameworks/vue-vite/src/preset.ts index 0460bac09d69..5378d357e81d 100644 --- a/code/frameworks/vue-vite/src/preset.ts +++ b/code/frameworks/vue-vite/src/preset.ts @@ -1,6 +1,6 @@ import path from 'path'; import type { PresetProperty } from '@storybook/types'; -import type { StorybookConfig } from '@storybook/builder-vite'; +import type { StorybookConfig } from './types'; import { vueDocgen } from './plugins/vue-docgen'; export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { @@ -11,7 +11,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti builder: { name: path.dirname( require.resolve(path.join('@storybook/builder-vite', 'package.json')) - ) as '@storybook/builder-webpack5', + ) as '@storybook/builder-vite', options: typeof framework === 'string' ? {} : framework?.options.builder || {}, }, renderer: '@storybook/vue', diff --git a/code/frameworks/vue-vite/src/types.ts b/code/frameworks/vue-vite/src/types.ts new file mode 100644 index 000000000000..e5ba544f554c --- /dev/null +++ b/code/frameworks/vue-vite/src/types.ts @@ -0,0 +1,36 @@ +import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; +import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite'; + +type FrameworkName = '@storybook/vue-vite'; +type BuilderName = '@storybook/builder-vite'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigVite | keyof StorybookConfigFramework +> & + StorybookConfigVite & + StorybookConfigFramework; diff --git a/code/frameworks/vue3-vite/src/index.ts b/code/frameworks/vue3-vite/src/index.ts index d3ded0cdbbb9..fcb073fefcd6 100644 --- a/code/frameworks/vue3-vite/src/index.ts +++ b/code/frameworks/vue3-vite/src/index.ts @@ -1 +1 @@ -export type { StorybookConfig } from '@storybook/builder-vite'; +export * from './types'; diff --git a/code/frameworks/vue3-vite/src/preset.ts b/code/frameworks/vue3-vite/src/preset.ts index b4ea232db708..22d43a77839f 100644 --- a/code/frameworks/vue3-vite/src/preset.ts +++ b/code/frameworks/vue3-vite/src/preset.ts @@ -1,8 +1,9 @@ -import type { StorybookConfig } from '@storybook/builder-vite'; import { hasVitePlugins } from '@storybook/builder-vite'; +import type { PresetProperty } from '@storybook/types'; +import type { StorybookConfig } from './types'; import { vueDocgen } from './plugins/vue-docgen'; -export const core: StorybookConfig['core'] = { +export const core: PresetProperty<'core', StorybookConfig> = { builder: '@storybook/builder-vite', renderer: '@storybook/vue3', }; diff --git a/code/frameworks/vue3-vite/src/types.ts b/code/frameworks/vue3-vite/src/types.ts new file mode 100644 index 000000000000..1461f586aeed --- /dev/null +++ b/code/frameworks/vue3-vite/src/types.ts @@ -0,0 +1,36 @@ +import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; +import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite'; + +type FrameworkName = '@storybook/vue3-vite'; +type BuilderName = '@storybook/builder-vite'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigVite | keyof StorybookConfigFramework +> & + StorybookConfigVite & + StorybookConfigFramework; diff --git a/code/frameworks/web-components-vite/src/index.ts b/code/frameworks/web-components-vite/src/index.ts index d3ded0cdbbb9..fcb073fefcd6 100644 --- a/code/frameworks/web-components-vite/src/index.ts +++ b/code/frameworks/web-components-vite/src/index.ts @@ -1 +1 @@ -export type { StorybookConfig } from '@storybook/builder-vite'; +export * from './types'; diff --git a/code/frameworks/web-components-vite/src/preset.ts b/code/frameworks/web-components-vite/src/preset.ts index 497a597ec2af..cd53f7d76283 100644 --- a/code/frameworks/web-components-vite/src/preset.ts +++ b/code/frameworks/web-components-vite/src/preset.ts @@ -1,6 +1,7 @@ -import type { StorybookConfig } from '@storybook/builder-vite'; +import type { PresetProperty } from '@storybook/types'; +import type { StorybookConfig } from './types'; -export const core: StorybookConfig['core'] = { +export const core: PresetProperty<'core', StorybookConfig> = { builder: '@storybook/builder-vite', renderer: '@storybook/web-components', }; diff --git a/code/frameworks/web-components-vite/src/types.ts b/code/frameworks/web-components-vite/src/types.ts new file mode 100644 index 000000000000..25fd697cb4b3 --- /dev/null +++ b/code/frameworks/web-components-vite/src/types.ts @@ -0,0 +1,36 @@ +import type { StorybookConfig as StorybookConfigBase } from '@storybook/types'; +import type { StorybookConfigVite, BuilderOptions } from '@storybook/builder-vite'; + +type FrameworkName = '@storybook/web-components-vite'; +type BuilderName = '@storybook/builder-vite'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigVite | keyof StorybookConfigFramework +> & + StorybookConfigVite & + StorybookConfigFramework; diff --git a/code/lib/builder-vite/input/iframe.html b/code/lib/builder-vite/input/iframe.html index 874cf855e9a7..911103d945a4 100644 --- a/code/lib/builder-vite/input/iframe.html +++ b/code/lib/builder-vite/input/iframe.html @@ -3,7 +3,7 @@ - <!-- [TITLE HERE] --> + Storybook