CLI: Rename --webpack-stats-json to --stats-json as it works in Vite

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,

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:*",

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`);
 

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),
   };
 };

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,
       })
     );
   });

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<StorybookBuilderOptions> = (
         quiet,
         enableProdMode = true,
         webpackStatsJson,
+        statsJson,
         debugWebpack,
         disableTelemetry,
         assets,
@@ -120,6 +122,7 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (
         },
         tsConfig,
         webpackStatsJson,
+        statsJson,
         debugWebpack,
         previewUrl,
       };

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<StorybookBuilderOptions> = (options, cont
         debugWebpack,
         loglevel,
         webpackStatsJson,
+        statsJson,
         previewUrl,
         sourceMap = false,
       } = options;
@@ -143,8 +145,9 @@ const commandBuilder: BuilderHandlerFn<StorybookBuilderOptions> = (options, cont
         initialPath,
         open,
         debugWebpack,
-        loglevel,
         webpackStatsJson,
+        statsJson,
+        loglevel,
         previewUrl,
       };
 

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 <string>',
     '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 <level>', '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 <string>',
     'Disables the default storybook preview and lets your use your own'

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.
+    `;
+  }
+}

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);
   }
 

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);
               }
             })

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;
 }
 

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:*"

docs/api/cli-options.md

@@ -46,7 +46,7 @@ Options include:
 | `--no-open`                     | Do not open Storybook automatically in the browser<br/>`storybook dev --no-open`                                                                                          |
 | `--quiet`                       | Suppress verbose build output<br/>`storybook dev --quiet`                                                                                                                 |
 | `--debug-webpack`               | Display final webpack configurations for debugging purposes<br/>`storybook dev --debug-webpack`                                                                           |
-| `--webpack-stats-json`          | Write Webpack Stats JSON to disk<br/>`storybook dev --webpack-stats-json /tmp/webpack-stats`                                                                              |
+| `--stats-json`          | Write  stats JSON to disk<br/>`storybook dev ---stats-json /tmp/stats`<br/>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)<br/>`storybook dev --docs` |
 | `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook dev --disable-telemetry`                                             |
 
@@ -75,7 +75,7 @@ Options include:
 | `--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`                                                                                               |
+| `---stats-json`          | Write stats JSON to disk<br/>`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)<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` |