Merge pull request #24065 from storybookjs/version-prerelease-from-7.…

…5.0-alpha.1

Release: Prerelease 7.5.0-alpha.2

.circleci/config.yml

@@ -609,30 +609,30 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 35
+          parallelism: 34
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - build-sandboxes:
-          parallelism: 35
+          parallelism: 34
           requires:
             - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 32
+          parallelism: 31
           requires:
             - build-sandboxes
       - e2e-production:
-          parallelism: 32
+          parallelism: 31
           requires:
             - build-sandboxes
       - e2e-dev:
           parallelism: 4
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 32
+          parallelism: 31
           requires:
             - build-sandboxes
       # TODO: reenable once we find out the source of flakyness

.github/workflows/canary-release-pr.yml

@@ -58,8 +58,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
-
+          node-version-file: '.nvmrc'
       - name: Cache dependencies
         uses: actions/cache@v3
         with:

.github/workflows/danger-js.yml

@@ -21,10 +21,10 @@ jobs:
     name: Danger JS
     runs-on: ubuntu-latest
     steps:
+      - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '16'
-      - uses: actions/checkout@v3
+          node-version-file: '.nvmrc'
       - name: Danger JS
         uses: danger/danger-js@11.2.6
         env:

.github/workflows/prepare-patch-release.yml

@@ -33,7 +33,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version-file: '.nvmrc'
 
       - name: Cache dependencies
         uses: actions/cache@v3

.github/workflows/prepare-prerelease.yml

@@ -54,7 +54,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version-file: '.nvmrc'
 
       - name: Cache dependencies
         uses: actions/cache@v3

.github/workflows/publish.yml

@@ -45,7 +45,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16'
+          node-version-file: '.nvmrc'
 
       - name: Cache dependencies
         uses: actions/cache@v3

.gitignore

@@ -37,7 +37,6 @@ coverage/
 /**/LICENSE
 code/docs/public
 package-lock.json
-.nvmrc
 storybook-static
 .jest-test-results.json
 *.jar

.nvmrc

@@ -0,0 +1 @@
+16.20

CHANGELOG.prerelease.md

@@ -1,3 +1,19 @@
+## 7.5.0-alpha.2
+
+- Angular: Categorize legacy build options error - [#24014](https://github.com/storybookjs/storybook/pull/24014), thanks [@yannbf](https://github.com/yannbf)!
+- Builder-Webpack5: Categorize builder error - [#24031](https://github.com/storybookjs/storybook/pull/24031), thanks [@yannbf](https://github.com/yannbf)!
+- CI: Inform the user how to dedupe and strip color from info command - [#24087](https://github.com/storybookjs/storybook/pull/24087), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
+- CLI: Fix packageManager handling in `sb add` - [#24079](https://github.com/storybookjs/storybook/pull/24079), thanks [@Integrayshaun](https://github.com/Integrayshaun)!
+- CLI: Improve sanitization logic in crash reports - [#24028](https://github.com/storybookjs/storybook/pull/24028), thanks [@yannbf](https://github.com/yannbf)!
+- Maintenance: Add more context to explanation in core-events errors - [#24063](https://github.com/storybookjs/storybook/pull/24063), thanks [@yannbf](https://github.com/yannbf)!
+- Monorepo: Fix `svelte-vite` detection - [#24085](https://github.com/storybookjs/storybook/pull/24085), thanks [@legnaleurc](https://github.com/legnaleurc)!
+- NextJS: Fix Image Context reuse (ensure singleton by externalizing it) - [#23881](https://github.com/storybookjs/storybook/pull/23881), thanks [@martinnabhan](https://github.com/martinnabhan)!
+- Source-loader: Fix property key validation - [#24068](https://github.com/storybookjs/storybook/pull/24068), thanks [@MrZillaGold](https://github.com/MrZillaGold)!
+- Svelte: Fix generated properties on Svelte event handler - [#24020](https://github.com/storybookjs/storybook/pull/24020), thanks [@j3rem1e](https://github.com/j3rem1e)!
+- Telemetry: Add platform info to telemetry event - [#24081](https://github.com/storybookjs/storybook/pull/24081), thanks [@yannbf](https://github.com/yannbf)!
+- UI: Fix target id in searchfield label - [#23464](https://github.com/storybookjs/storybook/pull/23464), thanks [@plumpNation](https://github.com/plumpNation)!
+- Vue3: Remove console.log in sourceDecorator - [#24062](https://github.com/storybookjs/storybook/pull/24062), thanks [@oruman](https://github.com/oruman)!
+
 ## 7.5.0-alpha.1
 
 - Core: Add CJS entrypoints to errors in core events - [#24038](https://github.com/storybookjs/storybook/pull/24038), thanks [@yannbf](https://github.com/yannbf)!

CONTRIBUTING.md

@@ -1,13 +1,24 @@
 # Getting started
 
-Storybook is developed against a specific node version. We recommend using [Volta](https://volta.sh/) as it will automatically install the correct node and yarn version when you first use the repo. If you chose not to use Volta please ensure you you have node version 16 installed (suggestion: v16.5)
+Storybook is developed against a specific node version which is defined in an `.nvmrc` file. You can use any Node version manager that uses the `.nvmrc` configuration file (we recommend [fnm](https://fnm.vercel.app/)).
+
+## Using fnm as a Node version manager
+
+- Install fnm [as per instructions](https://github.com/Schniz/fnm/tree/master#installation)
+- In your shell setup include the `use-on-cd`, `corepack-enabled` and `version-file-strategy recursive` parameters in the `fnm env` command, e.g.
+
+  ```sh
+  eval "$(fnm env --use-on-cd --corepack-enabled --version-file-strategy recursive)"
+  ```
+
+## Running the local development environment
 
 - Ensure if you are using Windows to use the Windows Subsystem for Linux (WSL).
 - Run `yarn start` in the root directory to run a basic test Storybook "sandbox".
 
 The `yarn start` script will generate a React Vite TypeScript sandbox with a set of test stories inside it, as well as taking all steps required to get it running (building the various packages we need etc). There is no need to run `yarn` or `yarn install` as `yarn start` will do this for you.
 
-## Issues
+### Issues
 
 If you run `yarn start` and encounter the following error, try rerunning `yarn start` a second time:
 

MIGRATION.md

@@ -1044,7 +1044,11 @@ Starting in 7.0, we drop support for Angular < 14
 
 #### Angular: Drop support for calling Storybook directly
 
-In Storybook 6.4 we have deprecated calling Storybook directly (`npm run storybook`) for Angular. In Storybook 7.0, we've removed it entirely. Instead you have to set up the Storybook builder in your `angular.json` and execute `ng run <your-project>:storybook` to start Storybook. Please visit https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular to set up Storybook for Angular correctly.
+_Has automigration_
+
+In Storybook 6.4 we deprecated calling Storybook directly (e.g. `npm run storybook`) for Angular. In Storybook 7.0, we've removed it entirely. Instead, you have to set up the Storybook builder in your `angular.json` and execute `ng run <your-project>:storybook` to start Storybook. 
+
+You can run `npx storybook@next automigrate` to automatically fix your configuration, or visit https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/README.md#how-do-i-migrate-to-an-angular-storybook-builder for instructions on how to set up Storybook for Angular manually.
 
 #### Angular: Application providers and ModuleWithProviders
 

code/addons/themes/postinstall.js

@@ -2,7 +2,7 @@ const { spawn } = require('child_process');
 
 const PACKAGE_MANAGER_TO_COMMAND = {
   npm: 'npx',
-  yarn1: 'yarn dlx',
+  yarn1: 'npx',
   yarn2: 'yarn dlx',
   pnpm: 'pnpm dlx',
 };

code/builders/builder-webpack5/src/index.ts

@@ -9,6 +9,11 @@ import { dirname, join, parse } from 'path';
 import express from 'express';
 import fs from 'fs-extra';
 import { PREVIEW_BUILDER_PROGRESS } from '@storybook/core-events';
+import {
+  WebpackCompilationError,
+  WebpackInvocationError,
+  WebpackMissingStatsError,
+} from '@storybook/core-events/server-errors';
 
 import prettyTime from 'pretty-hrtime';
 
@@ -117,21 +122,19 @@ const starter: StarterFunction = async function* starterGeneratorFn({
   yield;
 
   const config = await getConfig(options);
+
+  if (config.stats === 'none' || config.stats === 'summary') {
+    throw new WebpackMissingStatsError();
+  }
   yield;
+
   const compiler = webpackInstance(config);
 
   if (!compiler) {
-    const err = `${config.name}: missing webpack compiler at runtime!`;
-    logger.error(err);
-    return {
-      bail,
-      totalTime: process.hrtime(startTime),
-      stats: {
-        hasErrors: () => true,
-        hasWarnings: () => false,
-        toJson: () => ({ warnings: [] as any[], errors: [err] }),
-      } as any as Stats,
-    };
+    throw new WebpackInvocationError({
+      // eslint-disable-next-line local-rules/no-uncategorized-errors
+      error: new Error(`Missing Webpack compiler at runtime!`),
+    });
   }
 
   yield;
@@ -172,6 +175,7 @@ const starter: StarterFunction = async function* starterGeneratorFn({
   const middlewareOptions: Parameters<typeof webpackDevMiddleware>[1] = {
     publicPath: config.output?.publicPath as string,
     writeToDisk: true,
+    stats: 'errors-only',
   };
 
   compilation = webpackDevMiddleware(compiler, middlewareOptions);
@@ -184,19 +188,24 @@ const starter: StarterFunction = async function* starterGeneratorFn({
   router.use(compilation);
   router.use(webpackHotMiddleware(compiler, { log: false }));
 
-  const stats = await new Promise<Stats>((ready, stop) => {
-    compilation?.waitUntilValid(ready as any);
-    reject = stop;
+  const stats = await new Promise<Stats>((res, rej) => {
+    compilation?.waitUntilValid(res as any);
+    reject = rej;
   });
   yield;
 
   if (!stats) {
-    throw new Error('no stats after building preview');
+    throw new WebpackMissingStatsError();
   }
 
-  if (stats.hasErrors()) {
-    // eslint-disable-next-line @typescript-eslint/no-throw-literal
-    throw stats;
+  const { warnings, errors } = getWebpackStats({ config, stats });
+
+  if (warnings.length > 0) {
+    warnings?.forEach((e) => logger.error(e.message));
+  }
+
+  if (errors.length > 0) {
+    throw new WebpackCompilationError({ errors });
   }
 
   return {
@@ -206,6 +215,22 @@ const starter: StarterFunction = async function* starterGeneratorFn({
   };
 };
 
+function getWebpackStats({ config, stats }: { config: Configuration; stats: Stats }) {
+  const statsOptions =
+    typeof config.stats === 'string'
+      ? config.stats
+      : {
+          ...(config.stats as StatsOptions),
+          warnings: true,
+          errors: true,
+        };
+  const { warnings = [], errors = [] } = stats?.toJson(statsOptions) || {};
+  return {
+    warnings,
+    errors,
+  };
+}
+
 /**
  * This function is a generator so that we can abort it mid process
  * in case of failure coming from other processes e.g. manager builder
@@ -215,73 +240,47 @@ const starter: StarterFunction = async function* starterGeneratorFn({
 const builder: BuilderFunction = async function* builderGeneratorFn({ startTime, options }) {
   const webpackInstance = await executor.get(options);
   yield;
-  logger.info('=> Compiling preview..');
   const config = await getConfig(options);
+
+  if (config.stats === 'none' || config.stats === 'summary') {
+    throw new WebpackMissingStatsError();
+  }
   yield;
 
   const compiler = webpackInstance(config);
 
   if (!compiler) {
-    const err = `${config.name}: missing webpack compiler at runtime!`;
-    logger.error(err);
-    return {
-      hasErrors: () => true,
-      hasWarnings: () => false,
-      toJson: () => ({ warnings: [] as any[], errors: [err] }),
-    } as any as Stats;
+    throw new WebpackInvocationError({
+      // eslint-disable-next-line local-rules/no-uncategorized-errors
+      error: new Error(`Missing Webpack compiler at runtime!`),
+    });
   }
 
   const webpackCompilation = new Promise<Stats>((succeed, fail) => {
     compiler.run((error, stats) => {
-      if (error || !stats || stats.hasErrors()) {
-        logger.error('=> Failed to build the preview');
-        process.exitCode = 1;
-
-        if (error) {
-          logger.error(error.message);
+      if (error) {
+        compiler.close(() => fail(new WebpackInvocationError({ error })));
+        return;
+      }
 
-          compiler.close(() => fail(error));
+      if (!stats) {
+        throw new WebpackMissingStatsError();
+      }
 
-          return;
-        }
+      const { warnings, errors } = getWebpackStats({ config, stats });
 
-        if (stats && (stats.hasErrors() || stats.hasWarnings())) {
-          const { warnings = [], errors = [] } = stats.toJson(
-            typeof config.stats === 'string'
-              ? config.stats
-              : {
-                  warnings: true,
-                  errors: true,
-                  ...(config.stats as StatsOptions),
-                }
-          );
-
-          errors.forEach((e) => logger.error(e.message));
-          warnings.forEach((e) => logger.error(e.message));
-
-          compiler.close(() =>
-            options.debugWebpack
-              ? fail(stats)
-              : fail(new Error('=> Webpack failed, learn more with --debug-webpack'))
-          );
-
-          return;
-        }
+      if (warnings.length > 0) {
+        warnings?.forEach((e) => logger.error(e.message));
       }
 
-      logger.trace({ message: '=> Preview built', time: process.hrtime(startTime) });
-      if (stats && stats.hasWarnings()) {
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- we know it has warnings because of hasWarnings()
-        stats
-          .toJson({ warnings: true } as StatsOptions)
-          .warnings!.forEach((e) => logger.warn(e.message));
+      if (errors.length > 0) {
+        compiler.close(() => fail(new WebpackCompilationError({ errors })));
+        return;
       }
 
-      // https://webpack.js.org/api/node/#run
-      // #15227
       compiler.close((closeErr) => {
         if (closeErr) {
-          return fail(closeErr);
+          return fail(new WebpackInvocationError({ error: closeErr }));
         }
 
         return succeed(stats as Stats);

code/frameworks/angular/README.md

@@ -10,7 +10,7 @@
   - [moduleMetadata decorator](#modulemetadata-decorator)
   - [applicationConfig decorator](#applicationconfig-decorator)
   - [FAQ](#faq)
-    - [How do I migrate to a Angular Storybook builder?](#how-do-i-migrate-to-a-angular-storybook-builder)
+    - [How do I migrate to an Angular Storybook builder?](#how-do-i-migrate-to-an-angular-storybook-builder)
       - [Do you have only one Angular project in your workspace?](#do-you-have-only-one-angular-project-in-your-workspace)
         - [Adjust your `package.json`](#adjust-your-packagejson)
       - [I have multiple projects in my Angular workspace](#i-have-multiple-projects-in-my-angular-workspace)
@@ -252,10 +252,12 @@ export const WithCustomApplicationProvider: Story = {
 
 ## FAQ
 
-### How do I migrate to a Angular Storybook builder?
+### How do I migrate to an Angular Storybook builder?
 
 The Storybook [Angular builder](https://angular.io/guide/glossary#builder) is a new way to run Storybook in an Angular workspace. It is a drop-in replacement for running `storybook dev` and `storybook build` directly.
 
+You can run `npx storybook@next automigrate` to try let Storybook detect and automatically fix your configuration. Otherwise, you can follow the next steps to manually adjust your configuration.
+
 #### Do you have only one Angular project in your workspace?
 
 In this case go to your `angular.json` and add `storybook` and `build-storybook` entries in `architect` section of your project like shown above.