diff --git a/MIGRATION.md b/MIGRATION.md index 77d77356d46e..202962c2cf7f 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -15,6 +15,7 @@ - [For Solid:](#for-solid) - [For Qwik:](#for-qwik) - [TurboSnap Vite plugin is no longer needed](#turbosnap-vite-plugin-is-no-longer-needed) + - [`--webpack-stats-json` option renamed `--stats-json`](#--webpack-stats-json-option-renamed---stats-json) - [Implicit actions can not be used during rendering (for example in the play function)](#implicit-actions-can-not-be-used-during-rendering-for-example-in-the-play-function) - [MDX related changes](#mdx-related-changes) - [MDX is upgraded to v3](#mdx-is-upgraded-to-v3) @@ -551,6 +552,11 @@ At least in build mode, `builder-vite` now supports the `--webpack-stats-json` f This means https://github.com/IanVS/vite-plugin-turbosnap is no longer necessary, and duplicative, and the plugin will automatically be removed if found. +### `--webpack-stats-json` option renamed `--stats-json` + +Now that both Vite and Webpack support the `preview-stats.json` file, the flag has been renamed. The old flag will continue to work. + + ### Implicit actions can not be used during rendering (for example in the play function) In Storybook 7, we inferred if the component accepts any action props, diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 556cf6c23ecb..921fba9f5c72 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -46,6 +46,7 @@ "@storybook/channels": "workspace:*", "@storybook/client-logger": "workspace:*", "@storybook/core-common": "workspace:*", + "@storybook/core-events": "workspace:*", "@storybook/csf-plugin": "workspace:*", "@storybook/node-logger": "workspace:*", "@storybook/preview": "workspace:*", diff --git a/code/builders/builder-vite/src/build.ts b/code/builders/builder-vite/src/build.ts index ff8f46c8bed3..67ce2c42942d 100644 --- a/code/builders/builder-vite/src/build.ts +++ b/code/builders/builder-vite/src/build.ts @@ -44,7 +44,7 @@ export async function build(options: Options) { finalConfig.plugins && (await hasVitePlugins(finalConfig.plugins, [turbosnapPluginName])); if (hasTurbosnapPlugin) { logger.warn(dedent`Found '${turbosnapPluginName}' which is now included by default in Storybook 8. - Removing from your plugins list. Ensure you pass \`--webpack-stats-json\` to generate stats. + Removing from your plugins list. Ensure you pass \`--stats-json\` to generate stats. For more information, see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#turbosnap-vite-plugin-is-no-longer-needed`); diff --git a/code/builders/builder-vite/src/index.ts b/code/builders/builder-vite/src/index.ts index 9cdac7233d67..3c0b7591d2cf 100644 --- a/code/builders/builder-vite/src/index.ts +++ b/code/builders/builder-vite/src/index.ts @@ -5,6 +5,7 @@ import type { RequestHandler } from 'express'; import type { ViteDevServer } from 'vite'; import express from 'express'; import { dirname, join, parse } from 'path'; +import { NoStatsForViteDevError } from '@storybook/core-events/server-errors'; import type { Options } from '@storybook/types'; import { transformIframeHtml } from './transform-iframe-html'; import { createViteServer } from './vite-server'; @@ -68,7 +69,11 @@ export const start: ViteBuilder['start'] = async ({ return { bail, - stats: { toJson: () => null }, + stats: { + toJson: () => { + throw new NoStatsForViteDevError(); + }, + }, totalTime: process.hrtime(startTime), }; }; diff --git a/code/frameworks/angular/src/builders/build-storybook/index.spec.ts b/code/frameworks/angular/src/builders/build-storybook/index.spec.ts index 64b10c2c2ca3..3c8960195611 100644 --- a/code/frameworks/angular/src/builders/build-storybook/index.spec.ts +++ b/code/frameworks/angular/src/builders/build-storybook/index.spec.ts @@ -104,7 +104,7 @@ describe.skip('Build Storybook Builder', () => { packageJson: expect.any(Object), mode: 'static', tsConfig: './storybook/tsconfig.ts', - webpackStatsJson: false, + statsJson: false, }) ); }); @@ -133,7 +133,7 @@ describe.skip('Build Storybook Builder', () => { packageJson: expect.any(Object), mode: 'static', tsConfig: 'path/to/tsConfig.json', - webpackStatsJson: false, + statsJson: false, }) ); }); @@ -142,7 +142,7 @@ describe.skip('Build Storybook Builder', () => { const run = await architect.scheduleBuilder('@storybook/angular:build-storybook', { tsConfig: 'path/to/tsConfig.json', compodoc: false, - webpackStatsJson: true, + statsJson: true, }); const output = await run.result; @@ -162,7 +162,7 @@ describe.skip('Build Storybook Builder', () => { packageJson: expect.any(Object), mode: 'static', tsConfig: 'path/to/tsConfig.json', - webpackStatsJson: true, + statsJson: true, }) ); }); @@ -212,7 +212,7 @@ describe.skip('Build Storybook Builder', () => { packageJson: expect.any(Object), mode: 'static', tsConfig: './storybook/tsconfig.ts', - webpackStatsJson: false, + statsJson: false, }) ); }); @@ -242,7 +242,7 @@ describe.skip('Build Storybook Builder', () => { packageJson: expect.any(Object), mode: 'static', tsConfig: 'path/to/tsConfig.json', - webpackStatsJson: false, + statsJson: false, }) ); }); diff --git a/code/frameworks/angular/src/builders/build-storybook/index.ts b/code/frameworks/angular/src/builders/build-storybook/index.ts index 81d6b2689c2a..4bd35520e9b8 100644 --- a/code/frameworks/angular/src/builders/build-storybook/index.ts +++ b/code/frameworks/angular/src/builders/build-storybook/index.ts @@ -51,6 +51,7 @@ export type StorybookBuilderOptions = JsonObject & { | 'quiet' | 'test' | 'webpackStatsJson' + | 'statsJson' | 'disableTelemetry' | 'debugWebpack' | 'previewUrl' @@ -93,6 +94,7 @@ const commandBuilder: BuilderHandlerFn = ( quiet, enableProdMode = true, webpackStatsJson, + statsJson, debugWebpack, disableTelemetry, assets, @@ -120,6 +122,7 @@ const commandBuilder: BuilderHandlerFn = ( }, tsConfig, webpackStatsJson, + statsJson, debugWebpack, previewUrl, }; diff --git a/code/frameworks/angular/src/builders/start-storybook/index.ts b/code/frameworks/angular/src/builders/start-storybook/index.ts index cad69e51131f..ed5504f68c51 100644 --- a/code/frameworks/angular/src/builders/start-storybook/index.ts +++ b/code/frameworks/angular/src/builders/start-storybook/index.ts @@ -57,6 +57,7 @@ export type StorybookBuilderOptions = JsonObject & { | 'docs' | 'debugWebpack' | 'webpackStatsJson' + | 'statsJson' | 'loglevel' | 'previewUrl' >; @@ -112,6 +113,7 @@ const commandBuilder: BuilderHandlerFn = (options, cont debugWebpack, loglevel, webpackStatsJson, + statsJson, previewUrl, sourceMap = false, } = options; @@ -143,8 +145,9 @@ const commandBuilder: BuilderHandlerFn = (options, cont initialPath, open, debugWebpack, - loglevel, webpackStatsJson, + statsJson, + loglevel, previewUrl, }; diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts index b4e02c322b46..53c6259dc35b 100644 --- a/code/lib/cli/src/generate.ts +++ b/code/lib/cli/src/generate.ts @@ -224,7 +224,11 @@ command('dev') .option('--quiet', 'Suppress verbose build output') .option('--no-version-updates', 'Suppress update check', true) .option('--debug-webpack', 'Display final webpack configurations for debugging purposes') - .option('--webpack-stats-json [directory]', 'Write Webpack Stats JSON to disk') + .option( + '--webpack-stats-json [directory]', + 'Write Webpack stats JSON to disk (synonym for `--stats-json`)' + ) + .option('--stats-json [directory]', 'Write stats JSON to disk') .option( '--preview-url ', 'Disables the default storybook preview and lets your use your own' @@ -263,7 +267,11 @@ command('build') .option('--quiet', 'Suppress verbose build output') .option('--loglevel ', 'Control level of logging during build') .option('--debug-webpack', 'Display final webpack configurations for debugging purposes') - .option('--webpack-stats-json [directory]', 'Write Webpack Stats JSON to disk') + .option( + '--webpack-stats-json [directory]', + 'Write Webpack stats JSON to disk (synonym for `--stats-json`)' + ) + .option('--stats-json [directory]', 'Write stats JSON to disk') .option( '--preview-url ', 'Disables the default storybook preview and lets your use your own' diff --git a/code/lib/core-events/src/errors/server-errors.ts b/code/lib/core-events/src/errors/server-errors.ts index a9a9e758d70e..c8eccef6eb2a 100644 --- a/code/lib/core-events/src/errors/server-errors.ts +++ b/code/lib/core-events/src/errors/server-errors.ts @@ -576,3 +576,17 @@ export class UpgradeStorybookUnknownCurrentVersionError extends StorybookError { `; } } + +export class NoStatsForViteDevError extends StorybookError { + readonly category = Category.BUILDER_VITE; + + readonly code = 1; + + template() { + return dedent` + Unable to write preview stats as the Vite builder does not support stats in dev mode. + + Please remove the \`--stats-json\` flag when running in dev mode. + `; + } +} diff --git a/code/lib/core-server/src/build-dev.ts b/code/lib/core-server/src/build-dev.ts index 582d2328086e..63a4086405ab 100644 --- a/code/lib/core-server/src/build-dev.ts +++ b/code/lib/core-server/src/build-dev.ts @@ -182,8 +182,10 @@ export async function buildDevStandalone( const previewStats = previewResult?.stats; const managerStats = managerResult?.stats; - if (options.webpackStatsJson) { - const target = options.webpackStatsJson === true ? options.outputDir : options.webpackStatsJson; + const statsOption = options.webpackStatsJson || options.statsJson; + if (statsOption) { + const target = statsOption === true ? options.outputDir : statsOption; + await outputStats(target, previewStats); } diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts index 1c2ce486189a..f1f842eaea28 100644 --- a/code/lib/core-server/src/build-static.ts +++ b/code/lib/core-server/src/build-static.ts @@ -180,9 +180,9 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption .then(async (previewStats) => { logger.trace({ message: '=> Preview built', time: process.hrtime(startTime) }); - if (options.webpackStatsJson) { - const target = - options.webpackStatsJson === true ? options.outputDir : options.webpackStatsJson; + const statsOption = options.webpackStatsJson || options.statsJson; + if (statsOption) { + const target = statsOption === true ? options.outputDir : statsOption; await outputStats(target, previewStats); } }) diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 380508211121..c4aeeacbcf1f 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -186,6 +186,7 @@ export interface CLIOptions { test?: boolean; debugWebpack?: boolean; webpackStatsJson?: string | boolean; + statsJson?: string | boolean; outputDir?: string; } diff --git a/code/yarn.lock b/code/yarn.lock index 9a8fb5f0771b..e220d46af5f0 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -5334,6 +5334,7 @@ __metadata: "@storybook/channels": "workspace:*" "@storybook/client-logger": "workspace:*" "@storybook/core-common": "workspace:*" + "@storybook/core-events": "workspace:*" "@storybook/csf-plugin": "workspace:*" "@storybook/node-logger": "workspace:*" "@storybook/preview": "workspace:*" diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md index ad8292dfad31..3aa9f0a3f0a1 100644 --- a/docs/api/cli-options.md +++ b/docs/api/cli-options.md @@ -46,7 +46,7 @@ Options include: | `--no-open` | Do not open Storybook automatically in the browser
`storybook dev --no-open` | | `--quiet` | Suppress verbose build output
`storybook dev --quiet` | | `--debug-webpack` | Display final webpack configurations for debugging purposes
`storybook dev --debug-webpack` | -| `--webpack-stats-json` | Write Webpack Stats JSON to disk
`storybook dev --webpack-stats-json /tmp/webpack-stats` | +| `--stats-json` | Write stats JSON to disk
`storybook dev ---stats-json /tmp/stats`
NOTE: only works for webpack. | | `--docs` | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation)
`storybook dev --docs` | | `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)
`storybook dev --disable-telemetry` | @@ -75,7 +75,7 @@ Options include: | `--loglevel [level]` | Controls level of logging during build.
Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`
`storybook build --loglevel warn` | | `--quiet` | Suppress verbose build output
`storybook build --quiet` | | `--debug-webpack` | Display final webpack configurations for debugging purposes
`storybook build --debug-webpack` | -| `--webpack-stats-json` | Write Webpack Stats JSON to disk
`storybook build --webpack-stats-json /my-storybook/webpack-stats` | +| `---stats-json` | Write stats JSON to disk
`storybook build -stats-json /my-storybook/-stats` | | `--docs` | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)
`storybook build --docs` | | `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).
`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).
`storybook build --test` |