Merge pull request #30575 from storybookjs/version-non-patch-from-8.6…

….0-beta.4

Release: Prerelease 8.6.0-beta.5

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 8.5.8
+
+- Core: Support `esbuild@^0.25` - [#30574](https://github.com/storybookjs/storybook/pull/30574), thanks @JReinhold!
+
 ## 8.5.7
 
 - Tags: Add story/meta usage telemetry - [#30555](https://github.com/storybookjs/storybook/pull/30555), thanks @shilman!

CHANGELOG.prerelease.md

@@ -1,3 +1,13 @@
+## 8.6.0-beta.5
+
+- Addon-Test: Make sure that only one global portable story config is ever loaded - [#30582](https://github.com/storybookjs/storybook/pull/30582), thanks @kasperpeulen!
+- Angular: Support v19.2 when @angular/animations is not installed - [#30611](https://github.com/storybookjs/storybook/pull/30611), thanks @valentinpalkovic!
+- Builder-Vite: Fix runtime and iframe 404 on first load - [#30567](https://github.com/storybookjs/storybook/pull/30567), thanks @valentinpalkovic!
+- CLI: Don't initially select Documentation and Testing features - [#30599](https://github.com/storybookjs/storybook/pull/30599), thanks @ghengeveld!
+- CLI: Make telemetry data an object - [#30581](https://github.com/storybookjs/storybook/pull/30581), thanks @ndelangen!
+- Core: Support `esbuild@^0.25` - [#30574](https://github.com/storybookjs/storybook/pull/30574), thanks @JReinhold!
+- Test addon: Only update `vitest.config.ts` with workspaces, otherwise create `vitest.workspace.ts` - [#30583](https://github.com/storybookjs/storybook/pull/30583), thanks @ghengeveld!
+
 ## 8.6.0-beta.4
 
 - Addon-Test: Add telemetry data for Focused Tests - [#30568](https://github.com/storybookjs/storybook/pull/30568), thanks @JReinhold!

code/addons/test/src/postinstall.ts

@@ -405,9 +405,9 @@ export default async function postInstall(options: PostinstallOptions) {
     );
   }
 
+  // If there's an existing workspace file, we update that file to include the Storybook test plugin.
+  // We assume the existing workspaces include the Vite(st) config, so we won't add it.
   if (vitestWorkspaceFile) {
-    // If there's an existing workspace file, we update that file to include the Storybook test plugin.
-    // We assume the existing workspaces include the Vite(st) config, so we won't add it.
     const workspaceTemplate = await loadTemplate('vitest.workspace.template.ts', {
       EXTENDS_WORKSPACE: viteConfigFile
         ? relative(dirname(vitestWorkspaceFile), viteConfigFile)
@@ -445,21 +445,26 @@ export default async function postInstall(options: PostinstallOptions) {
       logger.line(1);
       return;
     }
-  } else if (rootConfig) {
-    // If there's an existing Vite/Vitest config, we update it to include the Storybook test plugin.
+  }
+  // If there's an existing Vite/Vitest config with workspaces, we update it to include the Storybook test plugin.
+  else if (rootConfig) {
     let target, updated;
-    // For Vitest 3+, we extend the config file, otherwise we fall back to creating a workspace file.
-    if (isVitest3OrLater) {
+    const configFile = await fs.readFile(rootConfig, 'utf8');
+    const hasWorkspaceConfig = configFile.includes('workspace:');
+
+    // For Vitest 3+ with an existing workspace option in the config file, we extend the workspace array,
+    // otherwise we fall back to creating a workspace file.
+    if (isVitest3OrLater && hasWorkspaceConfig) {
       const configTemplate = await loadTemplate('vitest.config.template.ts', {
         CONFIG_DIR: options.configDir,
         BROWSER_CONFIG: browserConfig,
         SETUP_FILE: relative(dirname(rootConfig), vitestSetupFile),
       });
-      const configFile = await fs.readFile(rootConfig, 'utf8');
       const source = babelParse(configTemplate);
       target = babelParse(configFile);
       updated = updateConfigFile(source, target);
     }
+
     if (target && updated) {
       logger.line(1);
       logger.plain(`${step} Updating your ${vitestConfigFile ? 'Vitest' : 'Vite'} config file:`);
@@ -502,8 +507,9 @@ export default async function postInstall(options: PostinstallOptions) {
       const formattedContent = await formatFileContent(newWorkspaceFile, workspaceTemplate);
       await writeFile(newWorkspaceFile, formattedContent);
     }
-  } else {
-    // If there's no existing Vitest/Vite config, we create a new Vitest config file.
+  }
+  // If there's no existing Vitest/Vite config, we create a new Vitest config file.
+  else {
     const newConfigFile = resolve(`vitest.config.${fileExtension}`);
     const configTemplate = await loadTemplate('vitest.config.template.ts', {
       CONFIG_DIR: options.configDir,

code/addons/test/src/vitest-plugin/setup-file.ts

@@ -35,4 +35,11 @@ export const modifyErrorMessage = ({ task }: { task: Task }) => {
   }
 };
 
+// Enable this in 9.0
+// beforeAll(() => {
+//   if (globalThis.globalProjectAnnotations) {
+//     return globalThis.globalProjectAnnotations.beforeAll();
+//   }
+// });
+
 afterEach(modifyErrorMessage);

code/addons/test/src/vitest-plugin/test-utils.ts

@@ -5,6 +5,7 @@ import { type RunnerTask, type TaskMeta, type TestContext } from 'vitest';
 
 import {
   type Report,
+  composeConfigs,
   composeStory,
   getCsfFactoryAnnotations,
 } from 'storybook/internal/preview-api';
@@ -34,7 +35,7 @@ export const testStory = (
       annotations.story,
       annotations.meta!,
       { initialGlobals: (await getInitialGlobals?.()) ?? {} },
-      annotations.preview,
+      annotations.preview ?? globalThis.globalProjectAnnotations,
       exportName
     );
 

code/builders/builder-vite/src/codegen-modern-iframe-script.ts

@@ -4,7 +4,7 @@ import type { Options, PreviewAnnotation } from 'storybook/internal/types';
 import { dedent } from 'ts-dedent';
 
 import { processPreviewAnnotation } from './utils/process-preview-annotation';
-import { SB_VIRTUAL_FILES, getResolvedVirtualModuleId } from './virtual-file-names';
+import { SB_VIRTUAL_FILES } from './virtual-file-names';
 
 export async function generateModernIframeScriptCode(options: Options, projectRoot: string) {
   const { presets, configDir } = options;

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

@@ -7,7 +7,6 @@ import type { Middleware, Options } from 'storybook/internal/types';
 import type { ViteDevServer } from 'vite';
 
 import { build as viteBuild } from './build';
-import { transformIframeHtml } from './transform-iframe-html';
 import type { ViteBuilder } from './types';
 import { createViteServer } from './vite-server';
 
@@ -16,22 +15,8 @@ export { hasVitePlugins } from './utils/has-vite-plugins';
 
 export * from './types';
 
-function iframeMiddleware(options: Options, server: ViteDevServer): Middleware {
-  return async (req, res, next) => {
-    if (!req.url || !req.url.match(/^\/iframe\.html($|\?)/)) {
-      next();
-      return;
-    }
-    // the base isn't used for anything, but it's required by the URL constructor
-    const url = new URL(req.url, 'http://localhost:6006');
-
-    // We need to handle `html-proxy` params for style tag HMR https://github.com/storybookjs/builder-vite/issues/266#issuecomment-1055677865
-    // e.g. /iframe.html?html-proxy&index=0.css
-    if (url.searchParams.has('html-proxy')) {
-      next();
-      return;
-    }
-
+function iframeHandler(options: Options, server: ViteDevServer): Middleware {
+  return async (req, res) => {
     const indexHtml = await readFile(require.resolve('@storybook/builder-vite/input/iframe.html'), {
       encoding: 'utf8',
     });
@@ -57,7 +42,7 @@ export const start: ViteBuilder['start'] = async ({
 }) => {
   server = await createViteServer(options as Options, devServer);
 
-  router.use(iframeMiddleware(options as Options, server));
+  router.get('/iframe.html', iframeHandler(options as Options, server));
   router.use(server.middlewares);
 
   return {

code/builders/builder-vite/src/optimizeDeps.ts

@@ -27,6 +27,7 @@ const INCLUDE_CANDIDATES = [
   '@storybook/addon-essentials/outline/preview',
   '@storybook/addon-essentials/viewport/preview',
   '@storybook/addon-highlight/preview',
+  '@storybook/addon-interactions/preview',
   '@storybook/addon-links/preview',
   '@storybook/addon-measure/preview',
   '@storybook/addon-outline/preview',
@@ -132,6 +133,7 @@ const INCLUDE_CANDIDATES = [
   'react-textarea-autosize',
   'react',
   'react/jsx-runtime',
+  'react/jsx-dev-runtime',
   'refractor/core',
   'refractor/lang/bash.js',
   'refractor/lang/css.js',
@@ -150,6 +152,7 @@ const INCLUDE_CANDIDATES = [
   'slash',
   'store2',
   'storybook/internal/preview/runtime',
+  'storybook/internal/csf',
   'synchronous-promise',
   'telejson',
   'ts-dedent',

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

@@ -16,14 +16,15 @@ import prettyTime from 'pretty-hrtime';
 import sirv from 'sirv';
 import { corePath } from 'storybook/core-path';
 import type { Configuration, Stats, StatsOptions } from 'webpack';
-import webpackDep, { DefinePlugin, ProgressPlugin } from 'webpack';
+import webpackDep, { DefinePlugin, IgnorePlugin, ProgressPlugin } from 'webpack';
 import webpackDevMiddleware from 'webpack-dev-middleware';
 import webpackHotMiddleware from 'webpack-hot-middleware';
 
 export * from './types';
 export * from './preview/virtual-module-mapping';
 
 export const WebpackDefinePlugin = DefinePlugin;
+export const WebpackIgnorePlugin = IgnorePlugin;
 
 export const printDuration = (startTime: [number, number]) =>
   prettyTime(process.hrtime(startTime))

code/core/assets/server/template.ejs

@@ -83,9 +83,5 @@
       
       import './sb-manager/runtime.js';
     </script>
-
-    <% if (!ignorePreview) { %>
-    <link href="./sb-preview/runtime.js" rel="prefetch" as="script" />
-    <% } %>
   </body>
-</html>
+</html>

code/core/package.json

@@ -285,7 +285,7 @@
     "@storybook/theming": "workspace:*",
     "better-opn": "^3.0.2",
     "browser-assert": "^1.2.1",
-    "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0",
+    "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0",
     "esbuild-register": "^3.5.0",
     "jsdoc-type-pratt-parser": "^4.0.0",
     "process": "^0.11.10",
@@ -361,7 +361,7 @@
     "downshift": "^9.0.4",
     "ejs": "^3.1.10",
     "es-toolkit": "^1.22.0",
-    "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0",
+    "esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0",
     "esbuild-plugin-alias": "^0.2.1",
     "execa": "^8.0.1",
     "fd-package-json": "^1.2.0",

code/core/src/core-server/dev-server.ts

@@ -78,13 +78,14 @@ export async function storybookDevServer(options: Options) {
     channel: serverChannel,
   });
 
-  let previewStarted: Promise<any> = Promise.resolve();
+  let previewResult: Awaited<ReturnType<(typeof previewBuilder)['start']>> =
+    await Promise.resolve();
 
   if (!options.ignorePreview) {
     if (!options.quiet) {
       logger.info('=> Starting preview..');
     }
-    previewStarted = previewBuilder
+    previewResult = await previewBuilder
       .start({
         startTime: process.hrtime(),
         options,
@@ -108,14 +109,6 @@ export async function storybookDevServer(options: Options) {
       });
   }
 
-  // this is a preview route, the builder has to be started before we can serve it
-  // this handler keeps request to that route pending until the builder is ready to serve it, preventing a 404
-  app.use('/iframe.html', (req, res, next) => {
-    // We need to catch here or node will treat any errors thrown by `previewStarted` as
-    // unhandled and exit (even though they are very much handled below)
-    previewStarted.catch(() => {}).then(() => next());
-  });
-
   const listening = new Promise<void>((resolve, reject) => {
     server.once('error', reject);
     app.listen({ port, host }, resolve);
@@ -132,8 +125,6 @@ export async function storybookDevServer(options: Options) {
     throw indexError;
   }
 
-  const previewResult = await previewStarted;
-
   // Now the preview has successfully started, we can count this as a 'dev' event.
   doTelemetry(app, core, initializedStoryIndexGenerator, options);
 

code/core/src/csf/csf-factories.ts

@@ -21,19 +21,26 @@ export interface Preview<TRenderer extends Renderer = Renderer> {
 }
 
 export function definePreview<TRenderer extends Renderer>(
-  preview: Preview<TRenderer>['input']
+  input: Preview<TRenderer>['input']
 ): Preview<TRenderer> {
-  return {
+  let composed: NormalizedProjectAnnotations<TRenderer>;
+  const preview: Preview<TRenderer> = {
     _tag: 'Preview',
-    input: preview,
+    input,
     get composed() {
-      const { addons, ...rest } = preview;
-      return normalizeProjectAnnotations<TRenderer>(composeConfigs([...(addons ?? []), rest]));
+      if (composed) {
+        return composed;
+      }
+      const { addons, ...rest } = input;
+      composed = normalizeProjectAnnotations<TRenderer>(composeConfigs([...(addons ?? []), rest]));
+      return composed;
     },
     meta(meta: ComponentAnnotations<TRenderer>) {
       return defineMeta(meta, this);
     },
   };
+  globalThis.globalProjectAnnotations = preview.composed;
+  return preview;
 }
 
 export function isPreview(input: unknown): input is Preview<Renderer> {

code/core/src/preview-api/modules/store/csf/portable-stories.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-underscore-dangle */
 
 /* eslint-disable @typescript-eslint/naming-convention */
-import { type CleanupCallback, isExportStory } from '@storybook/core/csf';
+import { type CleanupCallback, type Preview, isExportStory } from '@storybook/core/csf';
 import type {
   Args,
   Canvas,
@@ -73,7 +73,10 @@ export function setProjectAnnotations<TRenderer extends Renderer = Renderer>(
     | NamedOrDefaultProjectAnnotations<TRenderer>[]
 ): NormalizedProjectAnnotations<TRenderer> {
   const annotations = Array.isArray(projectAnnotations) ? projectAnnotations : [projectAnnotations];
-  globalThis.globalProjectAnnotations = composeConfigs(annotations.map(extractAnnotation));
+  globalThis.globalProjectAnnotations = composeConfigs([
+    globalThis.defaultProjectAnnotations ?? {},
+    composeConfigs(annotations.map(extractAnnotation)),
+  ]);
 
   /*
     We must return the composition of default and global annotations here
@@ -82,10 +85,7 @@ export function setProjectAnnotations<TRenderer extends Renderer = Renderer>(
     const projectAnnotations = setProjectAnnotations(...);
     beforeAll(projectAnnotations.beforeAll)
   */
-  return composeConfigs([
-    globalThis.defaultProjectAnnotations ?? {},
-    globalThis.globalProjectAnnotations ?? {},
-  ]);
+  return globalThis.globalProjectAnnotations ?? {};
 }
 
 const cleanups: CleanupCallback[] = [];
@@ -123,10 +123,7 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
 
   const normalizedProjectAnnotations = normalizeProjectAnnotations<TRenderer>(
     composeConfigs([
-      defaultConfig && Object.keys(defaultConfig).length > 0
-        ? defaultConfig
-        : (globalThis.defaultProjectAnnotations ?? {}),
-      globalThis.globalProjectAnnotations ?? {},
+      defaultConfig ?? globalThis.globalProjectAnnotations ?? {},
       projectAnnotations ?? {},
     ])
   );
@@ -165,6 +162,8 @@ export function composeStory<TRenderer extends Renderer = Renderer, TArgs extend
       mount: null!,
     });
 
+    context.parameters.__isPortableStory = true;
+
     context.context = context;
 
     if (story.renderToCanvas) {

code/frameworks/angular/package.json

@@ -101,6 +101,7 @@
     "@angular-devkit/architect": ">=0.1500.0 < 0.2000.0",
     "@angular-devkit/build-angular": ">=15.0.0 < 20.0.0",
     "@angular-devkit/core": ">=15.0.0 < 20.0.0",
+    "@angular/animations": ">=15.0.0 < 20.0.0",
     "@angular/cli": ">=15.0.0 < 20.0.0",
     "@angular/common": ">=15.0.0 < 20.0.0",
     "@angular/compiler": ">=15.0.0 < 20.0.0",
@@ -115,6 +116,9 @@
     "zone.js": ">= 0.11.1 < 1.0.0"
   },
   "peerDependenciesMeta": {
+    "@angular/animations": {
+      "optional": true
+    },
     "@angular/cli": {
       "optional": true
     },

code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts

@@ -101,6 +101,7 @@ export abstract class AbstractRenderer {
     this.initAngularRootElement(targetDOMNode, targetSelector);
 
     const analyzedMetadata = new PropertyExtractor(storyFnAngular.moduleMetadata, component);
+    await analyzedMetadata.init();
 
     const storyUid = this.generateStoryUIdFromRawStoryUid(
       targetDOMNode.getAttribute(STORY_UID_ATTRIBUTE)