Skip to content

Commit

Permalink
Merge branch 'next' into joevaugh4n-sb-help
Browse files Browse the repository at this point in the history
  • Loading branch information
kylegach authored Nov 21, 2023
2 parents de04701 + f529b2a commit 09968d1
Show file tree
Hide file tree
Showing 58 changed files with 1,058 additions and 127 deletions.
2 changes: 1 addition & 1 deletion code/frameworks/nextjs/src/swc/loader.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import type { NextConfig } from 'next';
import path from 'path';
import type { RuleSetRule } from 'webpack';
import semver from 'semver';
import { NextjsSWCNotSupportedError } from 'lib/core-events/src/errors/server-errors';
import { NextjsSWCNotSupportedError } from '@storybook/core-events/server-errors';
import { getNextjsVersion } from '../utils';

export const configureSWCLoader = async (
Expand Down
27 changes: 14 additions & 13 deletions docs/api/cli-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -61,19 +61,20 @@ storybook build [options]

Options include:

| Option | Description |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-h`, `--help` | Output usage information<br/>`storybook build --help` |
| `-V`, `--version` | Output the version number<br/>`storybook build -V` |
| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation).<br/> Directory where to load static files from, comma-separated list<br/>`storybook build -s public` |
| `-o`, `--output-dir [dir-name]` | Directory where to store built files<br/>`storybook build -o /my-deployed-storybook` |
| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from<br/>`storybook build -c .storybook` |
| `--loglevel [level]` | Controls level of logging during build.<br/> Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`<br/>`storybook build --loglevel warn` |
| `--quiet` | Suppress verbose build output<br/>`storybook build --quiet` |
| `--debug-webpack` | Display final webpack configurations for debugging purposes<br/>`storybook build --debug-webpack` |
| `--webpack-stats-json` | Write Webpack Stats JSON to disk<br/>`storybook build --webpack-stats-json /my-storybook/webpack-stats` |
| `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)<br/>`storybook build --docs` |
| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook build --disable-telemetry` |
| Option | Description |
| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `-h`, `--help` | Output usage information<br/>`storybook build --help` |
| `-V`, `--version` | Output the version number<br/>`storybook build -V` |
| `-s`, `--static-dir` | **Deprecated** [see note](#static-dir-deprecation).<br/> Directory where to load static files from, comma-separated list<br/>`storybook build -s public` |
| `-o`, `--output-dir [dir-name]` | Directory where to store built files<br/>`storybook build -o /my-deployed-storybook` |
| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from<br/>`storybook build -c .storybook` |
| `--loglevel [level]` | Controls level of logging during build.<br/> Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`<br/>`storybook build --loglevel warn` |
| `--quiet` | Suppress verbose build output<br/>`storybook build --quiet` |
| `--debug-webpack` | Display final webpack configurations for debugging purposes<br/>`storybook build --debug-webpack` |
| `--webpack-stats-json` | Write Webpack Stats JSON to disk<br/>`storybook build --webpack-stats-json /my-storybook/webpack-stats` |
| `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)<br/>`storybook build --docs` |
| `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook build --disable-telemetry` |
| `--test` | Optimize Storybook's production build for performance and tests by removing unnecessary features with the `test` option. Learn more [here](../api/main-config-build.md).<br/>`storybook build --test` |

<Callout variant="info" icon="💡">

Expand Down
153 changes: 153 additions & 0 deletions docs/api/main-config-build.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,153 @@
---
title: 'build'
---

Parent: [main.js|ts configuration](./main-config.md)

Type: `TestBuildConfig`

Provides configuration options to optimize Storybook's production build output.

## `test`

Type: `TestBuildFlags`

```ts
{
disableBlocks?: boolean;
disabledAddons?: string[];
disableMDXEntries?: boolean;
disableAutoDocs?: boolean;
disableDocgen?: boolean;
disableSourcemaps?: boolean;
disableTreeShaking?: boolean;

}
```

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).

<Callout variant="info" icon="💡">

Enabling these features can cause build or runtime errors with Storybook. We recommend enabling only the features you need for your project.

</Callout>

### `test.disableBlocks`

Type: `boolean`

Excludes the `@storybook/blocks` package from the build, which generates automatic documentation with [Docs Blocks](../writing-docs/doc-blocks.md).

<!-- prettier-ignore-start -->

<CodeSnippets
paths={[
'common/main-config-test-disable-blocks.js.mdx',
'common/main-config-test-disable-blocks.ts.mdx',
]}
/>

<!-- prettier-ignore-end -->

### `test.disabledAddons`

Type: `string[]`

Sets the list of addons that will disabled in the build output.

<!-- prettier-ignore-start -->

<CodeSnippets
paths={[
'common/main-config-test-disable-disableaddons.js.mdx',
'common/main-config-test-disable-disableaddons.ts.mdx',
]}
/>

<!-- prettier-ignore-end -->

### `test.disableMDXEntries`

Type: `boolean`

Enabling this option removes user-written documentation entries in MDX format from the build.

<!-- prettier-ignore-start -->

<CodeSnippets
paths={[
'common/main-config-test-disable-mdx.js.mdx',
'common/main-config-test-disable-mdx.ts.mdx',
]}
/>

<!-- prettier-ignore-end -->

### `test.disableAutoDocs`

Type: `boolean`

Prevents automatic documentation generated with the [autodocs](../writing-docs/autodocs.md) feature from being included in the build.

<!-- prettier-ignore-start -->

<CodeSnippets
paths={[
'common/main-config-test-disable-autodocs.js.mdx',
'common/main-config-test-disable-autodocs.ts.mdx',
]}
/>

<!-- prettier-ignore-end -->

### `test.disableDocgen`

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.

<!-- prettier-ignore-start -->

<CodeSnippets
paths={[
'common/main-config-test-disable-docgen.js.mdx',
'common/main-config-test-disable-docgen.ts.mdx',
]}
/>

<!-- prettier-ignore-end -->

### `test.disableSourcemaps`

Type: `boolean`

Overrides the default behavior of generating source maps for the build.

<!-- prettier-ignore-start -->

<CodeSnippets
paths={[
'common/main-config-test-disable-sourcemaps.js.mdx',
'common/main-config-test-disable-sourcemaps.ts.mdx',
]}
/>

<!-- prettier-ignore-end -->

### `test.disableTreeShaking`

Type: `boolean`

Disables [tree shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking) in the build.

<!-- prettier-ignore-start -->

<CodeSnippets
paths={[
'common/main-config-test-disable-treeshaking.js.mdx',
'common/main-config-test-disable-treeshaking.ts.mdx',
]}
/>

<!-- prettier-ignore-end -->
1 change: 1 addition & 0 deletions docs/api/main-config.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ An object to configure Storybook containing the following properties:
- [`addons`](./main-config-addons.md)
- [`babel`](./main-config-babel.md)
- [`babelDefault`](./main-config-babel-default.md)
- [`build`](./main-config-build.md)
- [`core`](./main-config-core.md)
- [`docs`](./main-config-docs.md)
- [`env`](./main-config-env.md)
Expand Down
31 changes: 16 additions & 15 deletions docs/configure/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,21 +31,22 @@ This configuration file is a [preset](../addons/addon-types.md) and, as such, ha

</Callout>

| Configuration element | Description |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js` |
| `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook <br/> `staticDirs: ['../public']` |
| `addons` | Sets the list of [addons](https://storybook.js.org/integrations) loaded by Storybook <br/> `addons: ['@storybook/addon-essentials']` |
| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md) <br/> `typescript: { check: false, checkOptions: {} }` |
| `framework` | Configures Storybook based on a set of [framework-specific](./frameworks.md) settings <br/> `framework: { name: '@storybook/svelte-vite', options:{} }` |
| `core` | Configures Storybook's [internal features](../api/main-config-core.md) <br/> `core: { disableTelemetry: true, }` |
| `docs` | Configures Storybook's [auto-generated documentation](../writing-docs/autodocs.md)<br/> `docs: { autodocs: 'tag' }` |
| `features` | Enables Storybook's [additional features](../api/main-config-features.md)<br/> See table below for a list of available features `features: { storyStoreV7: true }` |
| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md) <br/> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` |
| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'` |
| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }` |
| `viteFinal` | Customize Storybook's Vite setup when using the [vite builder](https://github.com/storybookjs/builder-vite) <br/> `viteFinal: async (config: Vite.InlineConfig, options: Options) => { return config; }` |
| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration). <br/> `env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` |
| Configuration element | Description |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `stories` | The array of globs that indicates the [location of your story files](#configure-story-loading), relative to `main.js` |
| `staticDirs` | Sets a list of directories of [static files](./images-and-assets.md#serving-static-files-via-storybook-configuration) to be loaded by Storybook <br/> `staticDirs: ['../public']` |
| `addons` | Sets the list of [addons](https://storybook.js.org/integrations) loaded by Storybook <br/> `addons: ['@storybook/addon-essentials']` |
| `typescript` | Configures how Storybook handles [TypeScript files](./typescript.md) <br/> `typescript: { check: false, checkOptions: {} }` |
| `framework` | Configures Storybook based on a set of [framework-specific](./frameworks.md) settings <br/> `framework: { name: '@storybook/svelte-vite', options:{} }` |
| `core` | Configures Storybook's [internal features](../api/main-config-core.md) <br/> `core: { disableTelemetry: true, }` |
| `docs` | Configures Storybook's [auto-generated documentation](../writing-docs/autodocs.md)<br/> `docs: { autodocs: 'tag' }` |
| `features` | Enables Storybook's [additional features](../api/main-config-features.md)<br/> See table below for a list of available features `features: { storyStoreV7: true }` |
| `refs` | Configures [Storybook composition](../sharing/storybook-composition.md) <br/> `refs:{ example: { title: 'ExampleStorybook', url:'https://your-url.com' } }` |
| `logLevel` | Configures Storybook's logs in the browser terminal. Useful for debugging <br/> `logLevel: 'debug'` |
| `webpackFinal` | Customize Storybook's [Webpack](../builders/webpack.md) setup <br/> `webpackFinal: async (config:any) => { return config; }` |
| `viteFinal` | Customize Storybook's Vite setup when using the [vite builder](https://github.com/storybookjs/builder-vite) <br/> `viteFinal: async (config: Vite.InlineConfig, options: Options) => { return config; }` |
| `env` | Defines custom Storybook [environment variables](./environment-variables.md#using-storybook-configuration). <br/> `env: (config) => ({...config, EXAMPLE_VAR: 'Example var' }),` |
| `build` | Optimizes Storybook's production [build](../api/main-config-build.md) for performance by excluding specific features from the bundle. Useful when decreased build times are a priority. <br/> `build: { test: {} }` |

### Feature flags

Expand Down
Loading

0 comments on commit 09968d1

Please sign in to comment.