mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 15:31:16 +08:00
API Main config
This commit is contained in:
Charles de Dreuille
parent
4bf1219991
commit
2d32ceaba6
@ -9,7 +9,7 @@ Parent: [main.js|ts configuration](./main-config.mdx)
|
||||
|
||||
Type: `(string | { name: string; options?: AddonOptions })[]`
|
||||
|
||||
Registers the [addons](../addons/install-addons.mdx) loaded by Storybook.
|
||||
Registers the [addons](../../addons/install-addons.mdx) loaded by Storybook.
|
||||
|
||||
For each addon's available options, see their respective [documentation](https://storybook.js.org/integrations).
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ Parent: [main.js|ts configuration](./main-config.mdx)
|
||||
|
||||
Type: `(config: Babel.Config, options: Options) => Babel.Config | Promise<Babel.Config>`
|
||||
|
||||
`babelDefault` allows customization of Storybook's [Babel](https://babeljs.io/) setup. It is applied to the preview config before any user presets have been applied, which makes it useful and recommended for [addon authors](../addons/writing-presets.md#babel) so that the end user's [`babel`](./main-config-babel.mdx) setup can override it.
|
||||
`babelDefault` allows customization of Storybook's [Babel](https://babeljs.io/) setup. It is applied to the preview config before any user presets have been applied, which makes it useful and recommended for [addon authors](../../addons/writing-presets.mdx#babel) so that the end user's [`babel`](./main-config-babel.mdx) setup can override it.
|
||||
|
||||
<Callout variant="info" icon="💡">
|
||||
To adjust your Storybook's Babel setup directly—not via an addon—use [`babel`](./main-config-babel.mdx) instead.
|
||||
|
||||
@ -12,7 +12,7 @@ Type: `(config: Babel.Config, options: Options) => Babel.Config | Promise<Babel.
|
||||
Customize Storybook's [Babel](https://babeljs.io/) setup.
|
||||
|
||||
<Callout variant="info" icon="💡">
|
||||
[Addon authors](../addons/writing-presets.md#babel) should use [`babelDefault`](./main-config-babel-default.mdx) instead, which is applied to the preview config before any user presets have been applied.
|
||||
[Addon authors](../../addons/writing-presets.mdx#babel) should use [`babelDefault`](./main-config-babel-default.mdx) instead, which is applied to the preview config before any user presets have been applied.
|
||||
</Callout>
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
@ -28,7 +28,7 @@ Type: `TestBuildFlags`
|
||||
}
|
||||
```
|
||||
|
||||
Configures Storybook's production builds for performance testing purposes by disabling certain features from the build. When running `build-storybook`, this feature is enabled by setting the `--test` [flag](./cli-options.md#build).
|
||||
Configures Storybook's production builds for performance testing purposes by disabling certain features from the build. When running `build-storybook`, this feature is enabled by setting the `--test` [flag](../cli-options.mdx#build).
|
||||
|
||||
<Callout variant="info" icon="💡">
|
||||
The options documented on this page are automatically enabled when the `--test` flag is provided to the `build-storybook` command. We encourage you to override these options only if you need to disable a specific feature for your project or if you are debugging a build issue.
|
||||
@ -38,7 +38,7 @@ Configures Storybook's production builds for performance testing purposes by dis
|
||||
|
||||
Type: `boolean`
|
||||
|
||||
Excludes the `@storybook/blocks` package from the build, which generates automatic documentation with [Docs Blocks](../writing-docs/doc-blocks.mdx).
|
||||
Excludes the `@storybook/blocks` package from the build, which generates automatic documentation with [Docs Blocks](../../writing-docs/doc-blocks.mdx).
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
@ -74,7 +74,7 @@ Enabling this option removes user-written documentation entries in MDX format fr
|
||||
|
||||
Type: `boolean`
|
||||
|
||||
Prevents automatic documentation generated with the [autodocs](../writing-docs/autodocs.mdx) feature from being included in the build.
|
||||
Prevents automatic documentation generated with the [autodocs](../../writing-docs/autodocs.mdx) feature from being included in the build.
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
@ -86,7 +86,7 @@ Prevents automatic documentation generated with the [autodocs](../writing-docs/a
|
||||
|
||||
Type: `boolean`
|
||||
|
||||
Disables [automatic argType](./arg-types.md#automatic-argtype-inference) and component property inference with any of the supported static analysis tools based on the framework you are using.
|
||||
Disables [automatic argType](../arg-types.mdx#automatic-argtype-inference) and component property inference with any of the supported static analysis tools based on the framework you are using.
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -37,10 +37,10 @@ Type:
|
||||
}
|
||||
```
|
||||
|
||||
Configures Storybook's builder, [Vite](../builders/vite.mdx) or [Webpack](../builders/webpack.mdx).
|
||||
Configures Storybook's builder, [Vite](../../builders/vite.mdx) or [Webpack](../../builders/webpack.mdx).
|
||||
|
||||
<Callout variant="info" icon="💡">
|
||||
With the new [Framework API](./new-frameworks.mdx), [`framework.options.builder`](./main-config-framework.md#optionsbuilder) is now the preferred way to configure the builder.
|
||||
With the new [Framework API](../new-frameworks.mdx), [`framework.options.builder`](./main-config-framework.mdx#optionsbuilder) is now the preferred way to configure the builder.
|
||||
|
||||
You should only use `core.builder.options` if you need to configure a builder that is not part of a framework.
|
||||
</Callout>
|
||||
@ -122,7 +122,7 @@ Disables the generation of `project.json`, a file containing Storybook metadata
|
||||
|
||||
Type: `boolean`
|
||||
|
||||
Disables Storybook's [telemetry collection](../configure/telemetry.mdx).
|
||||
Disables Storybook's [telemetry collection](../../configure/telemetry.mdx).
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
@ -158,7 +158,7 @@ Disables the "What's New" notifications in the UI for new Storybook versions and
|
||||
|
||||
Type: `boolean`
|
||||
|
||||
Enable crash reports to be sent to Storybook [telemetry](../configure/telemetry.mdx).
|
||||
Enable crash reports to be sent to Storybook [telemetry](../../configure/telemetry.mdx).
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -17,7 +17,7 @@ Type:
|
||||
}
|
||||
```
|
||||
|
||||
Configures Storybook's [auto-generated documentation](../writing-docs/autodocs.mdx).
|
||||
Configures Storybook's [auto-generated documentation](../../writing-docs/autodocs.mdx).
|
||||
|
||||
## `autodocs`
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ Parent: [main.js|ts configuration](./main-config.mdx)
|
||||
|
||||
Type: `(config: { [key: string]: string }) => { [key: string]: string }`
|
||||
|
||||
Defines custom Storybook [environment variables](../configure/environment-variables.md#using-storybook-configuration).
|
||||
Defines custom Storybook [environment variables](../../configure/environment-variables.mdx#using-storybook-configuration).
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@ Parent: [main.js|ts configuration](./main-config.mdx)
|
||||
|
||||
Type: `FrameworkName | { name: FrameworkName; options?: FrameworkOptions }`
|
||||
|
||||
Configures Storybook based on a set of [framework-specific](../configure/frameworks.mdx) settings.
|
||||
Configures Storybook based on a set of [framework-specific](../../configure/integration/frameworks.mdx) settings.
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
@ -29,10 +29,10 @@ For available frameworks and their options, see their respective [documentation]
|
||||
|
||||
Type: `Record<string, any>`
|
||||
|
||||
While many options are specific to a framework, there are some options that are shared across some frameworks, e.g. those that configure Storybook's [builder](./main-config-core.md#builder).
|
||||
While many options are specific to a framework, there are some options that are shared across some frameworks, e.g. those that configure Storybook's [builder](./main-config-core.mdx#builder).
|
||||
|
||||
### `options.builder`
|
||||
|
||||
Type: `Record<string, any>`
|
||||
|
||||
Configures Storybook's builder, [Vite](../builders/vite.mdx) or [Webpack](../builders/webpack.mdx).
|
||||
Configures Storybook's builder, [Vite](../../builders/vite.mdx) or [Webpack](../../builders/webpack.mdx).
|
||||
|
||||
@ -190,9 +190,9 @@ Only use this if you need to override the auto-generated id.
|
||||
|
||||
## Transpiling to CSF
|
||||
|
||||
The value of [`importPath`](#importpath) in an [`IndexInput`](#indexinput) must resolve to a [CSF](./csf.mdx) file. Most custom indexers, however, are only necessary because the input is *not* CSF. Therefore, you will likely need to transpile the input to CSF, so that Storybook can read it in the browser and render your stories.
|
||||
The value of [`importPath`](#importpath) in an [`IndexInput`](#indexinput) must resolve to a [CSF](../csf.mdx) file. Most custom indexers, however, are only necessary because the input is *not* CSF. Therefore, you will likely need to transpile the input to CSF, so that Storybook can read it in the browser and render your stories.
|
||||
|
||||
Transpiling the custom source format to CSF is beyond the scope of this documentation. This transpilation is often done at the builder level ([Vite](../builders/vite.mdx) and/or [Webpack](../builders/webpack.mdx)), and we recommend using [unplugin](https://github.com/unjs/unplugin) to create plugins for multiple builders.
|
||||
Transpiling the custom source format to CSF is beyond the scope of this documentation. This transpilation is often done at the builder level ([Vite](../../builders/vite.mdx) and/or [Webpack](../../builders/webpack.mdx)), and we recommend using [unplugin](https://github.com/unjs/unplugin) to create plugins for multiple builders.
|
||||
|
||||
The general architecture looks something like this:
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ Parent: [main.js|ts configuration](./main-config.mdx)
|
||||
|
||||
Type: `(head: string) => string`
|
||||
|
||||
Programmatically adjust the manager's `<head>` of your Storybook. For example, load a custom font or add a script. Most often used by [addon authors](../addons/writing-presets.md#ui-configuration).
|
||||
Programmatically adjust the manager's `<head>` of your Storybook. For example, load a custom font or add a script. Most often used by [addon authors](../../addons/writing-presets.mdx#ui-configuration).
|
||||
|
||||
<Callout variant="info" icon="💡">
|
||||
If you don't need to programmatically adjust the manager head, you can add scripts and styles to `manager-head.html` instead.
|
||||
|
||||
@ -12,7 +12,7 @@ Type: `string[] | ((config: string[], options: Options) => string[] | Promise<st
|
||||
Add additional scripts to run in the story preview.
|
||||
|
||||
<Callout variant="info" icon="💡">
|
||||
Mostly used by [frameworks](../contribute/framework.md#previewjs-example). Storybook users and [addon authors](../addons/writing-presets.mdx) should add scripts to [`preview.js`](../configure/index.md#configure-story-rendering) instead.
|
||||
Mostly used by [frameworks](../../contribute/framework.mdx#previewjs-example). Storybook users and [addon authors](../../addons/writing-presets.mdx) should add scripts to [`preview.js`](../../configure/index.mdx#configure-story-rendering) instead.
|
||||
</Callout>
|
||||
|
||||
```ts
|
||||
|
||||
@ -9,10 +9,10 @@ Parent: [main.js|ts configuration](./main-config.mdx)
|
||||
|
||||
Type: `(body: string) => string`
|
||||
|
||||
Programmatically adjust the [preview `<body>`](../configure/story-rendering.md#adding-to-body) of your Storybook. Most often used by [addon authors](../addons/writing-presets.md#ui-configuration).
|
||||
Programmatically adjust the [preview `<body>`](../../configure/story-rendering.mdx#adding-to-body) of your Storybook. Most often used by [addon authors](../../addons/writing-presets.mdx#ui-configuration).
|
||||
|
||||
<Callout variant="info" icon="💡">
|
||||
If you don't need to programmatically adjust the preview body, you can add scripts and styles to [`preview-body.html`](../configure/story-rendering.md#adding-to-body) instead.
|
||||
If you don't need to programmatically adjust the preview body, you can add scripts and styles to [`preview-body.html`](../../configure/story-rendering.mdx#adding-to-body) instead.
|
||||
</Callout>
|
||||
|
||||
For example, you can conditionally add scripts or styles, depending on the environment:
|
||||
|
||||
@ -9,10 +9,10 @@ Parent: [main.js|ts configuration](./main-config.mdx)
|
||||
|
||||
Type: `(head: string) => string`
|
||||
|
||||
Programmatically adjust the [preview `<head>`](../configure/story-rendering.md#adding-to-head) of your Storybook. Most often used by [addon authors](../addons/writing-presets.md#ui-configuration).
|
||||
Programmatically adjust the [preview `<head>`](../../configure/story-rendering.mdx#adding-to-head) of your Storybook. Most often used by [addon authors](../../addons/writing-presets.mdx#ui-configuration).
|
||||
|
||||
<Callout variant="info" icon="💡">
|
||||
If you don't need to programmatically adjust the preview head, you can add scripts and styles to [`preview-head.html`](../configure/story-rendering.md#adding-to-head) instead.
|
||||
If you don't need to programmatically adjust the preview head, you can add scripts and styles to [`preview-head.html`](../../configure/story-rendering.mdx#adding-to-head) instead.
|
||||
</Callout>
|
||||
|
||||
For example, you can conditionally add scripts or styles, depending on the environment:
|
||||
|
||||
@ -17,7 +17,7 @@ Type:
|
||||
}
|
||||
```
|
||||
|
||||
Configures [Storybook composition](../sharing/storybook-composition.mdx).
|
||||
Configures [Storybook composition](../../sharing/storybook-composition.mdx).
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
@ -37,7 +37,7 @@ You can use a function to dynamically configure refs:
|
||||
|
||||
## Disable a ref
|
||||
|
||||
Some package dependencies automatically [compose their Storybook in yours](../sharing/package-composition.mdx). You can disable this behavior by setting `disable` to `true` for the package name:
|
||||
Some package dependencies automatically [compose their Storybook in yours](../../sharing/package-composition.mdx). You can disable this behavior by setting `disable` to `true` for the package name:
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ Parent: [main.js|ts configuration](./main-config.mdx)
|
||||
|
||||
Type: `(string | { from: string; to: string })[]`
|
||||
|
||||
Sets a list of directories of [static files](../configure/images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook.
|
||||
Sets a list of directories of [static files](../../configure/integration/images-and-assets.mdx#serving-static-files-via-storybook-configuration) to be loaded by Storybook.
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -97,7 +97,7 @@ Type: `string`
|
||||
|
||||
Default: `''`
|
||||
|
||||
When [auto-titling](../configure/sidebar-and-urls.md#csf-30-auto-titles), prefix used when generating the title for your stories.
|
||||
When [auto-titling](../../configure/user-interface/sidebar-and-urls.mdx#csf-30-auto-titles), prefix used when generating the title for your stories.
|
||||
|
||||
## With a custom implementation
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ Parent: [main.js|ts configuration](./main-config.mdx)
|
||||
|
||||
Type: `(config: swc.Options, options: Options) => swc.Options | Promise<swc.Options>`
|
||||
|
||||
Customize Storybook's [SWC](https://swc.rs/) setup for Webpack-based projects enabled via the [`@storybook/addon-webpack5-compiler-swc`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-swc) addon based on the supported [frameworks](../configure/frameworks.mdx), except Angular, Create React App, Ember.js and Next.js.
|
||||
Customize Storybook's [SWC](https://swc.rs/) setup for Webpack-based projects enabled via the [`@storybook/addon-webpack5-compiler-swc`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-swc) addon based on the supported [frameworks](../../configure/integration/frameworks.mdx), except Angular, Create React App, Ember.js and Next.js.
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -31,13 +31,13 @@ Type:
|
||||
```
|
||||
</IfRenderer>
|
||||
|
||||
Configures how Storybook handles [TypeScript files](../configure/typescript.mdx).
|
||||
Configures how Storybook handles [TypeScript files](../../configure/integration/typescript.mdx).
|
||||
|
||||
## `check`
|
||||
|
||||
Type: `boolean`
|
||||
|
||||
Optionally run [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin). Note that because this uses a Webpack plugin, it is only available when using the [Webpack builder](../builders/webpack.mdx).
|
||||
Optionally run [fork-ts-checker-webpack-plugin](https://github.com/TypeStrong/fork-ts-checker-webpack-plugin). Note that because this uses a Webpack plugin, it is only available when using the [Webpack builder](../../builders/webpack.mdx).
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ Parent: [main.js|ts configuration](./main-config.mdx)
|
||||
|
||||
Type: `(config: Vite.InlineConfig, options: Options) => Vite.InlineConfig | Promise<Vite.InlineConfig>`
|
||||
|
||||
Customize Storybook's Vite setup when using the [Vite builder](../builders/vite.mdx).
|
||||
Customize Storybook's Vite setup when using the [Vite builder](../../builders/vite.mdx).
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
@ -9,7 +9,7 @@ Parent: [main.js|ts configuration](./main-config.mdx)
|
||||
|
||||
Type: `async (config: Config, options: WebpackOptions) => Config`
|
||||
|
||||
Customize Storybook's Webpack setup when using the [webpack builder](../builders/webpack.mdx).
|
||||
Customize Storybook's Webpack setup when using the [webpack builder](../../builders/webpack.mdx).
|
||||
|
||||
{/* prettier-ignore-start */}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user