Merge branch 'next' into norbert/upgrades-2025-02-11

.circleci/config.yml

@@ -635,6 +635,7 @@ jobs:
           command: |
             cd code
             yarn local-registry --open &
+            yarn wait-on tcp:127.0.0.1:6001
             cd ../../
             mkdir features-1
             cd features-1

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 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!
+- Telemetry: Don't count example stories towards CSF feature stats - [#30561](https://github.com/storybookjs/storybook/pull/30561), thanks @shilman!
+- Vite: Fix not stripping all HMR boundaries - [#30562](https://github.com/storybookjs/storybook/pull/30562), thanks @JReinhold!
+
 ## 8.5.6
 
 - Builder-Vite: Fix defaulting to allowing all hosts - [#30523](https://github.com/storybookjs/storybook/pull/30523), thanks @JReinhold!

CHANGELOG.prerelease.md

@@ -1,3 +1,46 @@
+## 8.6.0-beta.8
+
+- Addon-Test: Fix console error in build mode - [#30625](https://github.com/storybookjs/storybook/pull/30625), thanks @JReinhold!
+- Manager: Fix panel reactivity - [#30638](https://github.com/storybookjs/storybook/pull/30638), thanks @valentinpalkovic!
+
+## 8.6.0-beta.7
+
+- Angular: Fix @angular/platform-browser/animations never available - [#30618](https://github.com/storybookjs/storybook/pull/30618), thanks @valentinpalkovic!
+- Angular: Fix @angular/platform-browser/animations never available - [#30619](https://github.com/storybookjs/storybook/pull/30619), thanks @valentinpalkovic!
+- CLI: Fix peer dep issues for npm users during upgrade - [#30616](https://github.com/storybookjs/storybook/pull/30616), thanks @valentinpalkovic!
+
+## 8.6.0-beta.6
+
+- CLI: Fix printing of selected features - [#30605](https://github.com/storybookjs/storybook/pull/30605), thanks @ghengeveld!
+- CLI: Remove Storybook dependencies before adding re-adding them - [#30600](https://github.com/storybookjs/storybook/pull/30600), thanks @valentinpalkovic!
+
+## 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!
+- Core: Allow empty render functions in CSF factories - [#30565](https://github.com/storybookjs/storybook/pull/30565), thanks @kasperpeulen!
+- Core: Fix undeclared internal dependencies - [#30566](https://github.com/storybookjs/storybook/pull/30566), thanks @kasperpeulen!
+
+## 8.6.0-beta.3
+
+- Addon-A11y: Fix preset loading when loaded via getAbsolutePath - [#30563](https://github.com/storybookjs/storybook/pull/30563), thanks @valentinpalkovic!
+- Essentials: Fix `addon-essentials` not working when used with `getAbsolutePath` - [#30557](https://github.com/storybookjs/storybook/pull/30557), thanks @JReinhold!
+- Vite: Fix not stripping all HMR boundaries - [#30562](https://github.com/storybookjs/storybook/pull/30562), thanks @JReinhold!
+
+## 8.6.0-beta.2
+
+- CLI: Reimplement features prompt logic to handle `--yes` and fix `--features` - [#30534](https://github.com/storybookjs/storybook/pull/30534), thanks @ghengeveld!
+- Telemetry: Don't count example stories towards CSF feature stats - [#30561](https://github.com/storybookjs/storybook/pull/30561), thanks @shilman!
+
 ## 8.6.0-beta.1
 
 - Builder-Vite: Fix defaulting to allowing all hosts - [#30523](https://github.com/storybookjs/storybook/pull/30523), thanks @JReinhold!

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/a11y/preview.js

@@ -1 +1 @@
-import './dist/preview';
+export * from './dist/preview';

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Get UI feedback when an action is performed on an interactive element",
   "keywords": [
     "storybook",

code/addons/backgrounds/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Switch backgrounds to view components in different settings",
   "keywords": [
     "addon",

code/addons/controls/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-controls",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Interact with component inputs dynamically in the Storybook UI",
   "keywords": [
     "addon",

code/addons/docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Document component usage and properties in Markdown",
   "keywords": [
     "addon",

code/addons/essentials/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-essentials",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",
@@ -27,7 +27,7 @@
       "import": "./dist/index.mjs",
       "require": "./dist/index.js"
     },
-    "./preview": {
+    "./entry-preview": {
       "types": "./dist/preview.d.ts",
       "import": "./dist/preview.mjs",
       "require": "./dist/preview.js"
@@ -88,7 +88,7 @@
       "*": [
         "dist/index.d.ts"
       ],
-      "preview": [
+      "entry-preview": [
         "dist/preview.d.ts"
       ]
     }

code/addons/essentials/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Highlight DOM nodes within your stories",
   "keywords": [
     "storybook-addons",

code/addons/interactions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-interactions",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Automate, test and debug user interactions",
   "keywords": [
     "storybook-addons",

code/addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",

code/addons/links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Link stories together to build demos and prototypes with your UI components",
   "keywords": [
     "storybook-addons",

code/addons/measure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-measure",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Inspect layouts by visualizing the box model",
   "keywords": [
     "storybook-addons",

code/addons/onboarding/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-onboarding",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
   "keywords": [
     "storybook-addons",

code/addons/outline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-outline",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Outline all elements with CSS to help with layout placement and alignment",
   "keywords": [
     "storybook-addons",

code/addons/storysource/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "View a story’s source code to see how it works and paste into your app",
   "keywords": [
     "addon",

code/addons/test/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/experimental-addon-test",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Integrate Vitest with Storybook",
   "keywords": [
     "storybook-addons",

code/addons/test/src/manager-store.ts

@@ -2,4 +2,7 @@ import { experimental_UniversalStore } from 'storybook/internal/manager-api';
 
 import { type StoreState, storeOptions } from './constants';
 
-export const store = experimental_UniversalStore.create<StoreState>(storeOptions);
+export const store = experimental_UniversalStore.create<StoreState>({
+  ...storeOptions,
+  leader: (globalThis as any).CONFIG_TYPE === 'PRODUCTION',
+});

code/addons/test/src/node/test-manager.ts

@@ -17,6 +17,8 @@ import { VitestManager } from './vitest-manager';
 export class TestManager {
   vitestManager: VitestManager;
 
+  selectedStoryCountForLastRun = 0;
+
   constructor(
     private channel: Channel,
     public store: experimental_UniversalStore<StoreState>,
@@ -96,6 +98,8 @@ export class TestManager {
         await this.vitestManager.vitestRestartPromise;
       }
 
+      this.selectedStoryCountForLastRun = payload.storyIds?.length ?? 0;
+
       await this.vitestManager.runTests(payload);
 
       if (temporarilyDisableCoverage) {
@@ -120,7 +124,20 @@ export class TestManager {
   }
 
   async sendProgressReport(payload: TestingModuleProgressReportPayload) {
-    this.channel.emit(TESTING_MODULE_PROGRESS_REPORT, payload);
+    this.channel.emit(TESTING_MODULE_PROGRESS_REPORT, {
+      ...payload,
+      details: { ...payload.details, selectedStoryCount: this.selectedStoryCountForLastRun },
+    });
+
+    const status = 'status' in payload ? payload.status : undefined;
+    const progress = 'progress' in payload ? payload.progress : undefined;
+    if (
+      ((status === 'success' || status === 'cancelled') && progress?.finishedAt) ||
+      status === 'failed'
+    ) {
+      // reset the count when a test run is fully finished
+      this.selectedStoryCountForLastRun = 0;
+    }
   }
 
   async reportFatalError(message: string, error: Error | any) {

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.
+    const configFile = await fs.readFile(rootConfig, 'utf8');
-    if (isVitest3OrLater) {
+    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/preset.ts

@@ -146,6 +146,7 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
             numTotalTests: progress?.numTotalTests,
             numFailedTests: progress?.numFailedTests,
             numPassedTests: progress?.numPassedTests,
+            numSelectedStories: payload.details?.selectedStoryCount ?? 0,
           });
         }
 
@@ -157,6 +158,7 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
             ...(options.enableCrashReports && {
               error: error && sanitizeError(error),
             }),
+            numSelectedStories: payload.details?.selectedStoryCount ?? 0,
           });
         }
       }

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/addons/themes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Switch between multiple themes for you components in Storybook",
   "keywords": [
     "css",

code/addons/toolbars/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-toolbars",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Create your own toolbar items that control story rendering",
   "keywords": [
     "addon",

code/addons/viewport/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
   "keywords": [
     "addon",

code/builders/builder-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-vite",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "A plugin to run and build Storybooks with Vite",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
   "bugs": {

code/builders/builder-vite/src/codegen-importfn-script.ts

@@ -1,6 +1,6 @@
 import type { Options } from 'storybook/internal/types';
 
-import { genDynamicImport, genImport, genObjectFromRawEntries } from 'knitwork';
+import { genDynamicImport, genObjectFromRawEntries } from 'knitwork';
 import { normalize, relative } from 'pathe';
 import { dedent } from 'ts-dedent';
 

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

@@ -1,8 +1,10 @@
 import { getFrameworkName, loadPreviewOrConfigFile } from 'storybook/internal/common';
 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;
@@ -21,7 +23,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
   // This is pulled out to a variable because it is reused in both the initial page load
   // and the HMR handler.  We don't use the hot.accept callback params because only the changed
   // modules are provided, the rest are null.  We can just re-import everything again in that case.
-  const getPreviewAnnotationsFunction = `
+  const getPreviewAnnotationsFunction = dedent`
   const getProjectAnnotations = async (hmrPreviewAnnotationModules = []) => {
     const preview = await import('${previewFileUrl}');
  
@@ -43,25 +45,25 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
   const generateHMRHandler = (frameworkName: string): string => {
     // Web components are not compatible with HMR, so disable HMR, reload page instead.
     if (frameworkName === '@storybook/web-components-vite') {
-      return `
+      return dedent`
       if (import.meta.hot) {
         import.meta.hot.decline();
       }`.trim();
     }
 
-    return `
+    return dedent`
     if (import.meta.hot) {
       import.meta.hot.accept('${SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE}', (newModule) => {
-      // importFn has changed so we need to patch the new one in
+        // importFn has changed so we need to patch the new one in
-      window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
+        window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
       });
 
-    import.meta.hot.accept(${JSON.stringify(previewAnnotationURLs)}, (previewAnnotationModules) => {
+      import.meta.hot.accept(${JSON.stringify(previewAnnotationURLs)}, (previewAnnotationModules) => {
-      ${getPreviewAnnotationsFunction}
+        ${getPreviewAnnotationsFunction}
-      // getProjectAnnotations has changed so we need to patch the new one in
+        // getProjectAnnotations has changed so we need to patch the new one in
-      window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: () => getProjectAnnotations(previewAnnotationModules) });
+        window.__STORYBOOK_PREVIEW__.onGetProjectAnnotationsChanged({ getProjectAnnotations: () => getProjectAnnotations(previewAnnotationModules) });
-    });
+      });
-  }`.trim();
+    }`.trim();
   };
 
   /**
@@ -72,24 +74,22 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
    *
    * @todo Inline variable and remove `noinspection`
    */
-  const code = `
+  const code = dedent`
   import { setup } from 'storybook/internal/preview/runtime';
   import '${SB_VIRTUAL_FILES.VIRTUAL_ADDON_SETUP_FILE}';
 
   setup();
  
-  import { composeConfigs, PreviewWeb, ClientApi } from 'storybook/internal/preview-api';
+  import { composeConfigs, PreviewWeb } from 'storybook/internal/preview-api';
   import { isPreview } from 'storybook/internal/csf';
   import { importFn } from '${SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE}';
   
-  
+  ${getPreviewAnnotationsFunction}
-    ${getPreviewAnnotationsFunction}
 
-    window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(importFn, getProjectAnnotations);
+  window.__STORYBOOK_PREVIEW__ = window.__STORYBOOK_PREVIEW__ || new PreviewWeb(importFn, getProjectAnnotations);
+  
+  window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || window.__STORYBOOK_PREVIEW__.storyStore;
     
-    window.__STORYBOOK_STORY_STORE__ = window.__STORYBOOK_STORY_STORE__ || window.__STORYBOOK_PREVIEW__.storyStore;
+  ${generateHMRHandler(frameworkName)};`.trim();
-    
-    ${generateHMRHandler(frameworkName)};
-    `.trim();
   return code;
 }

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 {
+function iframeHandler(options: Options, server: ViteDevServer): Middleware {
-  return async (req, res, next) => {
+  return async (req, res) => {
-    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;
-    }
-
     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

@@ -17,7 +17,6 @@ const INCLUDE_CANDIDATES = [
   '@storybook/addon-backgrounds/preview',
   '@storybook/addon-designs/blocks',
   '@storybook/addon-docs/preview',
-  '@storybook/addon-essentials/preview',
   '@storybook/addon-essentials/actions/preview',
   '@storybook/addon-essentials/actions/preview',
   '@storybook/addon-essentials/backgrounds/preview',
@@ -27,6 +26,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 +132,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 +151,7 @@ const INCLUDE_CANDIDATES = [
   'slash',
   'store2',
   'storybook/internal/preview/runtime',
+  'storybook/internal/csf',
   'synchronous-promise',
   'telejson',
   'ts-dedent',

code/builders/builder-vite/src/plugins/strip-story-hmr-boundaries.ts

@@ -9,17 +9,17 @@ import type { Plugin } from 'vite';
 export async function stripStoryHMRBoundary(): Promise<Plugin> {
   const { createFilter } = await import('vite');
 
-  const filter = createFilter(/\.stories\.([tj])sx?$/);
+  const filter = createFilter(/\.stories\.\w+$/);
   return {
     name: 'storybook:strip-hmr-boundary-plugin',
     enforce: 'post',
-    async transform(src: string, id: string) {
+    async transform(src, id) {
       if (!filter(id)) {
         return undefined;
       }
 
       const s = new MagicString(src);
-      s.replace(/import\.meta\.hot\.accept\(\);/, '');
+      s.replace(/import\.meta\.hot\.accept\w*/, '(function hmrBoundaryNoop(){})');
 
       return {
         code: s.toString(),

code/builders/builder-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"

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

@@ -16,7 +16,7 @@ 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';
 
@@ -24,6 +24,7 @@ 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

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -361,7 +361,7 @@
     "downshift": "^9.0.4",
     "ejs": "^3.1.10",
     "es-toolkit": "^1.22.0",
-    "esbuild": "^0.25.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/common/utils/get-addon-annotations.ts

@@ -34,7 +34,7 @@ export async function getAddonAnnotations(addon: string) {
 
     // for backwards compatibility, if it's not a core addon we use /preview entrypoint
     if (!data.isCoreAddon) {
-      data.importPath = `@storybook/${addon}/preview`;
+      data.importPath = `${addon}/preview`;
     }
 
     require.resolve(path.join(addon, 'preview'));

code/core/src/common/utils/resolve-path-in-sb-cache.ts

@@ -13,7 +13,7 @@ import findCacheDirectory from 'find-cache-dir';
  */
 export function resolvePathInStorybookCache(fileOrDirectoryName: string, sub = 'default'): string {
   let cacheDirectory = findCacheDirectory({ name: 'storybook' });
-  cacheDirectory ||= join(process.cwd(), '.cache', 'storybook');
+  cacheDirectory ||= join(process.cwd(), 'node_modules', '.cache', 'storybook');
 
   return join(cacheDirectory, sub, fileOrDirectoryName);
 }

code/core/src/common/versions.ts

@@ -1,88 +1,88 @@
 // auto generated file, do not edit
 export default {
-  '@storybook/addon-a11y': '8.6.0-beta.1',
+  '@storybook/addon-a11y': '8.6.0-beta.8',
-  '@storybook/addon-actions': '8.6.0-beta.1',
+  '@storybook/addon-actions': '8.6.0-beta.8',
-  '@storybook/addon-backgrounds': '8.6.0-beta.1',
+  '@storybook/addon-backgrounds': '8.6.0-beta.8',
-  '@storybook/addon-controls': '8.6.0-beta.1',
+  '@storybook/addon-controls': '8.6.0-beta.8',
-  '@storybook/addon-docs': '8.6.0-beta.1',
+  '@storybook/addon-docs': '8.6.0-beta.8',
-  '@storybook/addon-essentials': '8.6.0-beta.1',
+  '@storybook/addon-essentials': '8.6.0-beta.8',
-  '@storybook/addon-mdx-gfm': '8.6.0-beta.1',
+  '@storybook/addon-mdx-gfm': '8.6.0-beta.8',
-  '@storybook/addon-highlight': '8.6.0-beta.1',
+  '@storybook/addon-highlight': '8.6.0-beta.8',
-  '@storybook/addon-interactions': '8.6.0-beta.1',
+  '@storybook/addon-interactions': '8.6.0-beta.8',
-  '@storybook/addon-jest': '8.6.0-beta.1',
+  '@storybook/addon-jest': '8.6.0-beta.8',
-  '@storybook/addon-links': '8.6.0-beta.1',
+  '@storybook/addon-links': '8.6.0-beta.8',
-  '@storybook/addon-measure': '8.6.0-beta.1',
+  '@storybook/addon-measure': '8.6.0-beta.8',
-  '@storybook/addon-onboarding': '8.6.0-beta.1',
+  '@storybook/addon-onboarding': '8.6.0-beta.8',
-  '@storybook/addon-outline': '8.6.0-beta.1',
+  '@storybook/addon-outline': '8.6.0-beta.8',
-  '@storybook/addon-storysource': '8.6.0-beta.1',
+  '@storybook/addon-storysource': '8.6.0-beta.8',
-  '@storybook/experimental-addon-test': '8.6.0-beta.1',
+  '@storybook/experimental-addon-test': '8.6.0-beta.8',
-  '@storybook/addon-themes': '8.6.0-beta.1',
+  '@storybook/addon-themes': '8.6.0-beta.8',
-  '@storybook/addon-toolbars': '8.6.0-beta.1',
+  '@storybook/addon-toolbars': '8.6.0-beta.8',
-  '@storybook/addon-viewport': '8.6.0-beta.1',
+  '@storybook/addon-viewport': '8.6.0-beta.8',
-  '@storybook/builder-vite': '8.6.0-beta.1',
+  '@storybook/builder-vite': '8.6.0-beta.8',
-  '@storybook/builder-webpack5': '8.6.0-beta.1',
+  '@storybook/builder-webpack5': '8.6.0-beta.8',
-  '@storybook/core': '8.6.0-beta.1',
+  '@storybook/core': '8.6.0-beta.8',
-  '@storybook/builder-manager': '8.6.0-beta.1',
+  '@storybook/builder-manager': '8.6.0-beta.8',
-  '@storybook/channels': '8.6.0-beta.1',
+  '@storybook/channels': '8.6.0-beta.8',
-  '@storybook/client-logger': '8.6.0-beta.1',
+  '@storybook/client-logger': '8.6.0-beta.8',
-  '@storybook/components': '8.6.0-beta.1',
+  '@storybook/components': '8.6.0-beta.8',
-  '@storybook/core-common': '8.6.0-beta.1',
+  '@storybook/core-common': '8.6.0-beta.8',
-  '@storybook/core-events': '8.6.0-beta.1',
+  '@storybook/core-events': '8.6.0-beta.8',
-  '@storybook/core-server': '8.6.0-beta.1',
+  '@storybook/core-server': '8.6.0-beta.8',
-  '@storybook/csf-tools': '8.6.0-beta.1',
+  '@storybook/csf-tools': '8.6.0-beta.8',
-  '@storybook/docs-tools': '8.6.0-beta.1',
+  '@storybook/docs-tools': '8.6.0-beta.8',
-  '@storybook/manager': '8.6.0-beta.1',
+  '@storybook/manager': '8.6.0-beta.8',
-  '@storybook/manager-api': '8.6.0-beta.1',
+  '@storybook/manager-api': '8.6.0-beta.8',
-  '@storybook/node-logger': '8.6.0-beta.1',
+  '@storybook/node-logger': '8.6.0-beta.8',
-  '@storybook/preview': '8.6.0-beta.1',
+  '@storybook/preview': '8.6.0-beta.8',
-  '@storybook/preview-api': '8.6.0-beta.1',
+  '@storybook/preview-api': '8.6.0-beta.8',
-  '@storybook/router': '8.6.0-beta.1',
+  '@storybook/router': '8.6.0-beta.8',
-  '@storybook/telemetry': '8.6.0-beta.1',
+  '@storybook/telemetry': '8.6.0-beta.8',
-  '@storybook/theming': '8.6.0-beta.1',
+  '@storybook/theming': '8.6.0-beta.8',
-  '@storybook/types': '8.6.0-beta.1',
+  '@storybook/types': '8.6.0-beta.8',
-  '@storybook/angular': '8.6.0-beta.1',
+  '@storybook/angular': '8.6.0-beta.8',
-  '@storybook/ember': '8.6.0-beta.1',
+  '@storybook/ember': '8.6.0-beta.8',
-  '@storybook/experimental-nextjs-vite': '8.6.0-beta.1',
+  '@storybook/experimental-nextjs-vite': '8.6.0-beta.8',
-  '@storybook/html-vite': '8.6.0-beta.1',
+  '@storybook/html-vite': '8.6.0-beta.8',
-  '@storybook/html-webpack5': '8.6.0-beta.1',
+  '@storybook/html-webpack5': '8.6.0-beta.8',
-  '@storybook/nextjs': '8.6.0-beta.1',
+  '@storybook/nextjs': '8.6.0-beta.8',
-  '@storybook/preact-vite': '8.6.0-beta.1',
+  '@storybook/preact-vite': '8.6.0-beta.8',
-  '@storybook/preact-webpack5': '8.6.0-beta.1',
+  '@storybook/preact-webpack5': '8.6.0-beta.8',
-  '@storybook/react-native-web-vite': '8.6.0-beta.1',
+  '@storybook/react-native-web-vite': '8.6.0-beta.8',
-  '@storybook/react-vite': '8.6.0-beta.1',
+  '@storybook/react-vite': '8.6.0-beta.8',
-  '@storybook/react-webpack5': '8.6.0-beta.1',
+  '@storybook/react-webpack5': '8.6.0-beta.8',
-  '@storybook/server-webpack5': '8.6.0-beta.1',
+  '@storybook/server-webpack5': '8.6.0-beta.8',
-  '@storybook/svelte-vite': '8.6.0-beta.1',
+  '@storybook/svelte-vite': '8.6.0-beta.8',
-  '@storybook/svelte-webpack5': '8.6.0-beta.1',
+  '@storybook/svelte-webpack5': '8.6.0-beta.8',
-  '@storybook/sveltekit': '8.6.0-beta.1',
+  '@storybook/sveltekit': '8.6.0-beta.8',
-  '@storybook/vue3-vite': '8.6.0-beta.1',
+  '@storybook/vue3-vite': '8.6.0-beta.8',
-  '@storybook/vue3-webpack5': '8.6.0-beta.1',
+  '@storybook/vue3-webpack5': '8.6.0-beta.8',
-  '@storybook/web-components-vite': '8.6.0-beta.1',
+  '@storybook/web-components-vite': '8.6.0-beta.8',
-  '@storybook/web-components-webpack5': '8.6.0-beta.1',
+  '@storybook/web-components-webpack5': '8.6.0-beta.8',
-  '@storybook/blocks': '8.6.0-beta.1',
+  '@storybook/blocks': '8.6.0-beta.8',
-  storybook: '8.6.0-beta.1',
+  storybook: '8.6.0-beta.8',
-  sb: '8.6.0-beta.1',
+  sb: '8.6.0-beta.8',
-  '@storybook/cli': '8.6.0-beta.1',
+  '@storybook/cli': '8.6.0-beta.8',
-  '@storybook/codemod': '8.6.0-beta.1',
+  '@storybook/codemod': '8.6.0-beta.8',
-  '@storybook/core-webpack': '8.6.0-beta.1',
+  '@storybook/core-webpack': '8.6.0-beta.8',
-  'create-storybook': '8.6.0-beta.1',
+  'create-storybook': '8.6.0-beta.8',
-  '@storybook/csf-plugin': '8.6.0-beta.1',
+  '@storybook/csf-plugin': '8.6.0-beta.8',
-  '@storybook/instrumenter': '8.6.0-beta.1',
+  '@storybook/instrumenter': '8.6.0-beta.8',
-  '@storybook/react-dom-shim': '8.6.0-beta.1',
+  '@storybook/react-dom-shim': '8.6.0-beta.8',
-  '@storybook/source-loader': '8.6.0-beta.1',
+  '@storybook/source-loader': '8.6.0-beta.8',
-  '@storybook/test': '8.6.0-beta.1',
+  '@storybook/test': '8.6.0-beta.8',
-  '@storybook/preset-create-react-app': '8.6.0-beta.1',
+  '@storybook/preset-create-react-app': '8.6.0-beta.8',
-  '@storybook/preset-html-webpack': '8.6.0-beta.1',
+  '@storybook/preset-html-webpack': '8.6.0-beta.8',
-  '@storybook/preset-preact-webpack': '8.6.0-beta.1',
+  '@storybook/preset-preact-webpack': '8.6.0-beta.8',
-  '@storybook/preset-react-webpack': '8.6.0-beta.1',
+  '@storybook/preset-react-webpack': '8.6.0-beta.8',
-  '@storybook/preset-server-webpack': '8.6.0-beta.1',
+  '@storybook/preset-server-webpack': '8.6.0-beta.8',
-  '@storybook/preset-svelte-webpack': '8.6.0-beta.1',
+  '@storybook/preset-svelte-webpack': '8.6.0-beta.8',
-  '@storybook/preset-vue3-webpack': '8.6.0-beta.1',
+  '@storybook/preset-vue3-webpack': '8.6.0-beta.8',
-  '@storybook/html': '8.6.0-beta.1',
+  '@storybook/html': '8.6.0-beta.8',
-  '@storybook/preact': '8.6.0-beta.1',
+  '@storybook/preact': '8.6.0-beta.8',
-  '@storybook/react': '8.6.0-beta.1',
+  '@storybook/react': '8.6.0-beta.8',
-  '@storybook/server': '8.6.0-beta.1',
+  '@storybook/server': '8.6.0-beta.8',
-  '@storybook/svelte': '8.6.0-beta.1',
+  '@storybook/svelte': '8.6.0-beta.8',
-  '@storybook/vue3': '8.6.0-beta.1',
+  '@storybook/vue3': '8.6.0-beta.8',
-  '@storybook/web-components': '8.6.0-beta.1',
+  '@storybook/web-components': '8.6.0-beta.8',
 };

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;
+      if (composed) {
-      return normalizeProjectAnnotations<TRenderer>(composeConfigs([...(addons ?? []), rest]));
+        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> {
@@ -46,7 +53,7 @@ export interface Meta<TRenderer extends Renderer, TArgs extends Args = Args> {
   composed: NormalizedComponentAnnotations<TRenderer>;
   preview: Preview<TRenderer>;
 
-  story(input: ComponentAnnotations<TRenderer, TArgs>): Story<TRenderer, TArgs>;
+  story(input: StoryAnnotations<TRenderer, TArgs>): Story<TRenderer, TArgs>;
 }
 
 export function isMeta(input: unknown): input is Meta<Renderer> {

code/core/src/manager-api/version.ts

@@ -1 +1 @@
-export const version = '8.6.0-beta.1';
+export const version = '8.6.0-beta.8';

code/core/src/manager/container/Panel.tsx

@@ -1,58 +1,70 @@
 import type { FC } from 'react';
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 
-import { type API_LeafEntry, Addon_TypesEnum } from '@storybook/core/types';
+import { Addon_TypesEnum } from '@storybook/core/types';
 
-import { Consumer } from '@storybook/core/manager-api';
+import { useChannel, useStorybookApi, useStorybookState } from '@storybook/core/manager-api';
-import type { API, Combo } from '@storybook/core/manager-api';
-
-import memoize from 'memoizerific';
 
+import { STORY_PREPARED } from '../../core-events';
 import { AddonPanel } from '../components/panel/Panel';
 
-const createPanelActions = memoize(1)((api) => ({
+const Panel: FC<any> = (props) => {
-  onSelect: (panel: string) => api.setSelectedPanel(panel),
+  const api = useStorybookApi();
-  toggleVisibility: () => api.togglePanel(),
+  const state = useStorybookState();
-  togglePosition: () => api.togglePanelPosition(),
+  const [story, setStory] = useState(api.getCurrentStoryData());
-}));
 
-const getPanels = memoize(1)((api: API, story: API_LeafEntry) => {
+  useChannel(
-  const allPanels = api.getElements(Addon_TypesEnum.PANEL);
+    {
+      [STORY_PREPARED]: () => {
+        setStory(api.getCurrentStoryData());
+      },
+    },
+    []
+  );
 
-  if (!allPanels || !story || story.type !== 'story') {
+  const { parameters, type } = story ?? {};
-    return allPanels;
-  }
 
-  const { parameters } = story;
+  const panelActions = useMemo(
+    () => ({
+      onSelect: (panel: string) => api.setSelectedPanel(panel),
+      toggleVisibility: () => api.togglePanel(),
+      togglePosition: () => api.togglePanelPosition(),
+    }),
+    [api]
+  );
 
-  const filteredPanels: typeof allPanels = {};
+  const panels = useMemo(() => {
-  Object.entries(allPanels).forEach(([id, panel]) => {
+    const allPanels = api.getElements(Addon_TypesEnum.PANEL);
-    const { paramKey }: any = panel;
+
-    if (paramKey && parameters && parameters[paramKey] && parameters[paramKey].disable) {
+    if (!allPanels || type !== 'story') {
-      return;
+      return allPanels;
     }
-    if (
-      panel.disabled === true ||
-      (typeof panel.disabled === 'function' && panel.disabled(parameters))
-    ) {
-      return;
-    }
-    filteredPanels[id] = panel;
-  });
 
-  return filteredPanels;
+    const filteredPanels: typeof allPanels = {};
-});
+    Object.entries(allPanels).forEach(([id, p]) => {
+      const { paramKey }: any = p;
+      if (paramKey && parameters && parameters[paramKey] && parameters[paramKey].disable) {
+        return;
+      }
+      if (p.disabled === true || (typeof p.disabled === 'function' && p.disabled(parameters))) {
+        return;
+      }
+      filteredPanels[id] = p;
+    });
 
-const mapper = ({ state, api }: Combo) => ({
+    return filteredPanels;
-  panels: getPanels(api, api.getCurrentStoryData()),
+  }, [api, type, parameters]);
-  selectedPanel: api.getSelectedPanel(),
-  panelPosition: state.layout.panelPosition,
-  actions: createPanelActions(api),
-  shortcuts: api.getShortcutKeys(),
-});
 
-const Panel: FC<any> = (props) => (
+  return (
-  <Consumer filter={mapper}>{(customProps) => <AddonPanel {...props} {...customProps} />}</Consumer>
+    <AddonPanel
-);
+      panels={panels}
+      selectedPanel={api.getSelectedPanel()}
+      panelPosition={state.layout.panelPosition}
+      actions={panelActions}
+      shortcuts={api.getShortcutKeys()}
+      {...props}
+    />
+  );
+};
 
 export default Panel;

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([
+  return globalThis.globalProjectAnnotations ?? {};
-    globalThis.defaultProjectAnnotations ?? {},
-    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.globalProjectAnnotations ?? {},
-        ? defaultConfig
-        : (globalThis.defaultProjectAnnotations ?? {}),
-      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/core/src/types/modules/csf.ts

@@ -1,7 +1,12 @@
 import type { ViewMode as ViewModeBase } from '@storybook/core/csf';
+import type { Renderer as CSFRenderer } from '@storybook/core/csf';
 
 import type { Addon_OptionsParameter } from './addons';
 
+// Fix https://github.com/storybookjs/storybook/issues/30540
+// Can be removed once @storybook/core and storybook are merged in 9.0
+export interface Renderer extends CSFRenderer {}
+
 export type {
   AfterEach,
   AnnotatedStoryFn,
@@ -35,7 +40,6 @@ export type {
   PlayFunction,
   PlayFunctionContext,
   ProjectAnnotations as BaseProjectAnnotations,
-  Renderer,
   SBArrayType,
   SBEnumType,
   SBIntersectionType,

code/deprecated/builder-manager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-manager",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook manager builder",
   "keywords": [
     "storybook"

code/deprecated/channels/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channels",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "",
   "keywords": [
     "storybook"

code/deprecated/client-logger/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-logger",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "",
   "keywords": [
     "storybook"

code/deprecated/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"

code/deprecated/core-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-common",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"

code/deprecated/core-events/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-events",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Event names used in storybook core",
   "keywords": [
     "storybook"

code/deprecated/core-server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-server",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"

code/deprecated/csf-tools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/csf-tools",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Parse and manipulate CSF and Storybook config files",
   "keywords": [
     "storybook"

code/deprecated/docs-tools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/docs-tools",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Shared utility functions for frameworks to implement docs",
   "keywords": [
     "storybook"

code/deprecated/manager-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager-api",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Core Storybook Manager API & Context",
   "keywords": [
     "storybook"

code/deprecated/manager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Core Storybook UI",
   "keywords": [
     "storybook"

code/deprecated/node-logger/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/node-logger",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "",
   "keywords": [
     "storybook"

code/deprecated/preview-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview-api",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "",
   "keywords": [
     "storybook"

code/deprecated/preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preview",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "",
   "keywords": [
     "storybook"

code/deprecated/router/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/router",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Core Storybook Router",
   "keywords": [
     "storybook"

code/deprecated/telemetry/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/telemetry",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Telemetry logging for crash reports and usage statistics",
   "keywords": [
     "storybook"

code/deprecated/theming/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/theming",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"

code/deprecated/types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/types",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Core Storybook TS Types",
   "keywords": [
     "storybook"

code/frameworks/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
   "keywords": [
     "storybook",
@@ -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)

code/frameworks/angular/src/client/angular-beta/StorybookModule.test.ts

@@ -59,6 +59,7 @@ describe('StorybookModule', () => {
         };
 
         const analyzedMetadata = new PropertyExtractor({}, FooComponent);
+        await analyzedMetadata.init();
 
         const application = getApplication({
           storyFnAngular: { props },
@@ -98,6 +99,7 @@ describe('StorybookModule', () => {
         };
 
         const analyzedMetadata = new PropertyExtractor({}, FooComponent);
+        await analyzedMetadata.init();
 
         const application = getApplication({
           storyFnAngular: { props },
@@ -127,6 +129,7 @@ describe('StorybookModule', () => {
         const storyProps$ = new BehaviorSubject<ICollection>(initialProps);
 
         const analyzedMetadata = new PropertyExtractor({}, FooComponent);
+        await analyzedMetadata.init();
 
         const application = getApplication({
           storyFnAngular: { props: initialProps },
@@ -183,6 +186,7 @@ describe('StorybookModule', () => {
         const storyProps$ = new BehaviorSubject<ICollection>(initialProps);
 
         const analyzedMetadata = new PropertyExtractor({}, FooComponent);
+        await analyzedMetadata.init();
 
         const application = getApplication({
           storyFnAngular: { props: initialProps },
@@ -224,6 +228,7 @@ describe('StorybookModule', () => {
         const storyProps$ = new BehaviorSubject<ICollection>(initialProps);
 
         const analyzedMetadata = new PropertyExtractor({}, FooComponent);
+        await analyzedMetadata.init();
 
         const application = getApplication({
           storyFnAngular: {
@@ -262,6 +267,7 @@ describe('StorybookModule', () => {
         const storyProps$ = new BehaviorSubject<ICollection>(initialProps);
 
         const analyzedMetadata = new PropertyExtractor({}, FooComponent);
+        await analyzedMetadata.init();
 
         const application = getApplication({
           storyFnAngular: { props: initialProps },
@@ -302,6 +308,8 @@ describe('StorybookModule', () => {
           WithoutSelectorComponent
         );
 
+        await analyzedMetadata.init();
+
         const application = getApplication({
           storyFnAngular: {
             props,
@@ -330,6 +338,7 @@ describe('StorybookModule', () => {
       class FooComponent {}
 
       const analyzedMetadata = new PropertyExtractor({}, FooComponent);
+      await analyzedMetadata.init();
 
       const application = getApplication({
         storyFnAngular: { template: '' },

code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.test.ts

@@ -29,75 +29,81 @@ const TestModuleWithImportsAndProviders = NgModule({
   providers: [TestTokenProvider],
 })(class {});
 
-const analyzeMetadata = (metadata: NgModuleMetadata, component?: any) => {
+const analyzeMetadata = async (metadata: NgModuleMetadata, component?: any) => {
-  return new PropertyExtractor(metadata, component);
+  const propertyExtractor = new PropertyExtractor(metadata, component);
+  await propertyExtractor.init();
+  return propertyExtractor;
 };
-const extractImports = (metadata: NgModuleMetadata, component?: any) => {
+const extractImports = async (metadata: NgModuleMetadata, component?: any) => {
-  const { imports } = new PropertyExtractor(metadata, component);
+  const propertyExtractor = new PropertyExtractor(metadata, component);
-  return imports;
+  await propertyExtractor.init();
+  return propertyExtractor.imports;
 };
-const extractDeclarations = (metadata: NgModuleMetadata, component?: any) => {
+const extractDeclarations = async (metadata: NgModuleMetadata, component?: any) => {
-  const { declarations } = new PropertyExtractor(metadata, component);
+  const propertyExtractor = new PropertyExtractor(metadata, component);
-  return declarations;
+  await propertyExtractor.init();
+  return propertyExtractor.declarations;
 };
-const extractProviders = (metadata: NgModuleMetadata, component?: any) => {
+const extractProviders = async (metadata: NgModuleMetadata, component?: any) => {
-  const { providers } = new PropertyExtractor(metadata, component);
+  const propertyExtractor = new PropertyExtractor(metadata, component);
-  return providers;
+  await propertyExtractor.init();
+  return propertyExtractor.providers;
 };
-const extractApplicationProviders = (metadata: NgModuleMetadata, component?: any) => {
+const extractApplicationProviders = async (metadata: NgModuleMetadata, component?: any) => {
-  const { applicationProviders } = new PropertyExtractor(metadata, component);
+  const propertyExtractor = new PropertyExtractor(metadata, component);
-  return applicationProviders;
+  await propertyExtractor.init();
+  return propertyExtractor.applicationProviders;
 };
 
 describe('PropertyExtractor', () => {
   vi.spyOn(console, 'warn').mockImplementation(() => {});
 
   describe('analyzeMetadata', () => {
-    it('should remove BrowserModule', () => {
+    it('should remove BrowserModule', async () => {
       const metadata = {
         imports: [BrowserModule],
       };
-      const { imports, providers, applicationProviders } = analyzeMetadata(metadata);
+      const { imports, providers, applicationProviders } = await analyzeMetadata(metadata);
       expect(imports.flat(Number.MAX_VALUE)).toEqual([CommonModule]);
       expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
       expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual([]);
     });
 
-    it('should remove BrowserAnimationsModule and use its providers instead', () => {
+    it('should remove BrowserAnimationsModule and use its providers instead', async () => {
       const metadata = {
         imports: [BrowserAnimationsModule],
       };
-      const { imports, providers, applicationProviders } = analyzeMetadata(metadata);
+      const { imports, providers, applicationProviders } = await analyzeMetadata(metadata);
       expect(imports.flat(Number.MAX_VALUE)).toEqual([CommonModule]);
       expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
       expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual(provideAnimations());
     });
 
-    it('should remove NoopAnimationsModule and use its providers instead', () => {
+    it('should remove NoopAnimationsModule and use its providers instead', async () => {
       const metadata = {
         imports: [NoopAnimationsModule],
       };
-      const { imports, providers, applicationProviders } = analyzeMetadata(metadata);
+      const { imports, providers, applicationProviders } = await analyzeMetadata(metadata);
       expect(imports.flat(Number.MAX_VALUE)).toEqual([CommonModule]);
       expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
       expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual(provideNoopAnimations());
     });
 
-    it('should remove Browser/Animations modules recursively', () => {
+    it('should remove Browser/Animations modules recursively', async () => {
       const metadata = {
         imports: [BrowserAnimationsModule, BrowserModule],
       };
-      const { imports, providers, applicationProviders } = analyzeMetadata(metadata);
+      const { imports, providers, applicationProviders } = await analyzeMetadata(metadata);
       expect(imports.flat(Number.MAX_VALUE)).toEqual([CommonModule]);
       expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
       expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual(provideAnimations());
     });
 
-    it('should not destructure Angular official module', () => {
+    it('should not destructure Angular official module', async () => {
       const metadata = {
         imports: [WithOfficialModule],
       };
-      const { imports, providers, applicationProviders } = analyzeMetadata(metadata);
+      const { imports, providers, applicationProviders } = await analyzeMetadata(metadata);
       expect(imports.flat(Number.MAX_VALUE)).toEqual([CommonModule, WithOfficialModule]);
       expect(providers.flat(Number.MAX_VALUE)).toEqual([]);
       expect(applicationProviders.flat(Number.MAX_VALUE)).toEqual([]);
@@ -105,13 +111,13 @@ describe('PropertyExtractor', () => {
   });
 
   describe('extractImports', () => {
-    it('should return Angular official modules', () => {
+    it('should return Angular official modules', async () => {
-      const imports = extractImports({ imports: [TestModuleWithImportsAndProviders] });
+      const imports = await extractImports({ imports: [TestModuleWithImportsAndProviders] });
       expect(imports).toEqual([CommonModule, TestModuleWithImportsAndProviders]);
     });
 
-    it('should return standalone components', () => {
+    it('should return standalone components', async () => {
-      const imports = extractImports(
+      const imports = await extractImports(
         {
           imports: [TestModuleWithImportsAndProviders],
         },
@@ -124,8 +130,8 @@ describe('PropertyExtractor', () => {
       ]);
     });
 
-    it('should return standalone directives', () => {
+    it('should return standalone directives', async () => {
-      const imports = extractImports(
+      const imports = await extractImports(
         {
           imports: [TestModuleWithImportsAndProviders],
         },
@@ -140,8 +146,11 @@ describe('PropertyExtractor', () => {
   });
 
   describe('extractDeclarations', () => {
-    it('should return an array of declarations that contains `storyComponent`', () => {
+    it('should return an array of declarations that contains `storyComponent`', async () => {
-      const declarations = extractDeclarations({ declarations: [TestComponent1] }, TestComponent2);
+      const declarations = await extractDeclarations(
+        { declarations: [TestComponent1] },
+        TestComponent2
+      );
       expect(declarations).toEqual([TestComponent1, TestComponent2]);
     });
   });
@@ -174,15 +183,15 @@ describe('PropertyExtractor', () => {
   });
 
   describe('extractProviders', () => {
-    it('should return an array of providers', () => {
+    it('should return an array of providers', async () => {
-      const providers = extractProviders({
+      const providers = await extractProviders({
         providers: [TestService],
       });
       expect(providers).toEqual([TestService]);
     });
 
-    it('should return an array of singletons extracted', () => {
+    it('should return an array of singletons extracted', async () => {
-      const singeltons = extractApplicationProviders({
+      const singeltons = await extractApplicationProviders({
         imports: [BrowserAnimationsModule],
       });
 

code/frameworks/angular/src/client/angular-beta/utils/PropertyExtractor.ts

@@ -14,12 +14,6 @@ import {
   VERSION,
 } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import {
-  BrowserAnimationsModule,
-  NoopAnimationsModule,
-  provideAnimations,
-  provideNoopAnimations,
-} from '@angular/platform-browser/animations';
 import { dedent } from 'ts-dedent';
 
 import { NgModuleMetadata } from '../../types';
@@ -45,9 +39,7 @@ export class PropertyExtractor implements NgModuleMetadata {
   constructor(
     private metadata: NgModuleMetadata,
     private component?: any
-  ) {
+  ) {}
-    this.init();
-  }
 
   // With the new way of mounting standalone components to the DOM via bootstrapApplication API,
   // we should now pass ModuleWithProviders to the providers array of the bootstrapApplication function.
@@ -71,8 +63,8 @@ export class PropertyExtractor implements NgModuleMetadata {
     }
   }
 
-  private init() {
+  public async init() {
-    const analyzed = this.analyzeMetadata(this.metadata);
+    const analyzed = await this.analyzeMetadata(this.metadata);
     this.imports = uniqueArray([CommonModule, analyzed.imports]);
     this.providers = uniqueArray(analyzed.providers);
     this.applicationProviders = uniqueArray(analyzed.applicationProviders);
@@ -101,28 +93,28 @@ export class PropertyExtractor implements NgModuleMetadata {
    * - Extracts providers from ModuleWithProviders
    * - Returns a new NgModuleMetadata object
    */
-  private analyzeMetadata = (metadata: NgModuleMetadata) => {
+  private analyzeMetadata = async (metadata: NgModuleMetadata) => {
     const declarations = [...(metadata?.declarations || [])];
     const providers = [...(metadata?.providers || [])];
     const applicationProviders: Provider[] = [];
-    const imports = [...(metadata?.imports || [])].reduce((acc, imported) => {
+    const imports = await Promise.all(
-      // remove ngModule and use only its providers if it is restricted
+      [...(metadata?.imports || [])].map(async (imported) => {
-      // (e.g. BrowserModule, BrowserAnimationsModule, NoopAnimationsModule, ...etc)
+        const [isRestricted, restrictedProviders] =
-      const [isRestricted, restrictedProviders] = PropertyExtractor.analyzeRestricted(imported);
+          await PropertyExtractor.analyzeRestricted(imported);
-      if (isRestricted) {
+        if (isRestricted) {
-        applicationProviders.unshift(restrictedProviders || []);
+          applicationProviders.unshift(restrictedProviders || []);
-        return acc;
+          return null;
-      }
+        }
-
+        return imported;
-      acc.push(imported);
+      })
-
+    ).then((results) => results.filter(Boolean));
-      return acc;
-    }, []);
 
     return { ...metadata, imports, providers, applicationProviders, declarations };
   };
 
-  static analyzeRestricted = (ngModule: NgModule): [boolean] | [boolean, Provider] => {
+  static analyzeRestricted = async (
+    ngModule: NgModule
+  ): Promise<[boolean] | [boolean, Provider]> => {
     if (ngModule === BrowserModule) {
       console.warn(
         dedent`
@@ -136,32 +128,38 @@ export class PropertyExtractor implements NgModuleMetadata {
       return [true];
     }
 
-    if (ngModule === BrowserAnimationsModule) {
+    try {
-      console.warn(
+      const animations = await import('@angular/platform-browser/animations');
-        dedent`
-          Storybook Warning:
-          You have added the "BrowserAnimationsModule" to the list of "imports" in your moduleMetadata definition of your Story.
-          In Storybook 7.0 we use Angular's new 'bootstrapApplication' API to mount the component to the DOM, which accepts a list of providers to set up application-wide providers.
-          Use the 'applicationConfig' decorator from '@storybook/angular' and add the "provideAnimations" function to the list of "providers".
-          If your Angular version does not support "provide-like" functions, use the helper function importProvidersFrom instead to set up animations. For this case, please add "importProvidersFrom(BrowserAnimationsModule)" to the list of providers of your applicationConfig definition.
-          Please visit https://angular.io/guide/standalone-components#configuring-dependency-injection for more information.
-        `
-      );
-      return [true, provideAnimations()];
-    }
 
-    if (ngModule === NoopAnimationsModule) {
+      if (ngModule === animations.BrowserAnimationsModule) {
-      console.warn(
+        console.warn(
-        dedent`
+          dedent`
-          Storybook Warning:
+            Storybook Warning:
-          You have added the "NoopAnimationsModule" to the list of "imports" in your moduleMetadata definition of your Story.
+            You have added the "BrowserAnimationsModule" to the list of "imports" in your moduleMetadata definition of your Story.
-          In Storybook v7.0 we are using Angular's new bootstrapApplication API to mount an Angular application to the DOM, which accepts a list of providers to set up application-wide providers.
+            In Storybook 7.0 we use Angular's new 'bootstrapApplication' API to mount the component to the DOM, which accepts a list of providers to set up application-wide providers.
-          Use the 'applicationConfig' decorator from '@storybook/angular' and add the "provideNoopAnimations" function to the list of "providers".
+            Use the 'applicationConfig' decorator from '@storybook/angular' and add the "provideAnimations" function to the list of "providers".
-          If your Angular version does not support "provide-like" functions, use the helper function importProvidersFrom instead to set up noop animations and to extract all necessary providers from NoopAnimationsModule. For this case, please add "importProvidersFrom(NoopAnimationsModule)" to the list of providers of your applicationConfig definition.
+            If your Angular version does not support "provide-like" functions, use the helper function importProvidersFrom instead to set up animations. For this case, please add "importProvidersFrom(BrowserAnimationsModule)" to the list of providers of your applicationConfig definition.
-          Please visit https://angular.io/guide/standalone-components#configuring-dependency-injection for more information.
+            Please visit https://angular.io/guide/standalone-components#configuring-dependency-injection for more information.
-        `
+          `
-      );
+        );
-      return [true, provideNoopAnimations()];
+        return [true, animations.provideAnimations()];
+      }
+
+      if (ngModule === animations.NoopAnimationsModule) {
+        console.warn(
+          dedent`
+            Storybook Warning:
+            You have added the "NoopAnimationsModule" to the list of "imports" in your moduleMetadata definition of your Story.
+            In Storybook v7.0 we are using Angular's new bootstrapApplication API to mount an Angular application to the DOM, which accepts a list of providers to set up application-wide providers.
+            Use the 'applicationConfig' decorator from '@storybook/angular' and add the "provideNoopAnimations" function to the list of "providers".
+            If your Angular version does not support "provide-like" functions, use the helper function importProvidersFrom instead to set up noop animations and to extract all necessary providers from NoopAnimationsModule. For this case, please add "importProvidersFrom(NoopAnimationsModule)" to the list of providers of your applicationConfig definition.
+            Please visit https://angular.io/guide/standalone-components#configuring-dependency-injection for more information.
+          `
+        );
+        return [true, animations.provideNoopAnimations()];
+      }
+    } catch (e) {
+      return [false];
     }
 
     return [false];

code/frameworks/angular/src/server/framework-preset-angular-cli.ts

@@ -1,6 +1,6 @@
 import { logger } from 'storybook/internal/node-logger';
 import { AngularLegacyBuildOptionsError } from 'storybook/internal/server-errors';
-import { WebpackDefinePlugin } from '@storybook/builder-webpack5';
+import { WebpackDefinePlugin, WebpackIgnorePlugin } from '@storybook/builder-webpack5';
 
 import { BuilderContext, targetFromTargetString } from '@angular-devkit/architect';
 import { JsonObject, logging } from '@angular-devkit/core';
@@ -40,6 +40,16 @@ export async function webpackFinal(baseConfig: webpack.Configuration, options: P
     })
   );
 
+  try {
+    require.resolve('@angular/animations');
+  } catch (e) {
+    webpackConfig.plugins.push(
+      new WebpackIgnorePlugin({
+        resourceRegExp: /@angular\/platform-browser\/animations$/,
+      })
+    );
+  }
+
   return webpackConfig;
 }
 

code/frameworks/angular/template/stories/core/applicationConfig/with-browser-animations.stories.ts

@@ -1,41 +0,0 @@
-import { Meta, StoryObj, applicationConfig } from '@storybook/angular';
-import { expect, userEvent, within } from '@storybook/test';
-
-import { importProvidersFrom } from '@angular/core';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-import { OpenCloseComponent } from '../moduleMetadata/angular-src/open-close-component/open-close.component';
-
-const meta: Meta = {
-  component: OpenCloseComponent,
-  decorators: [
-    applicationConfig({
-      providers: [importProvidersFrom(BrowserAnimationsModule)],
-    }),
-  ],
-  parameters: {
-    chromatic: { delay: 100 },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof OpenCloseComponent>;
-
-export const WithBrowserAnimations: Story = {
-  render: () => ({
-    template: `<app-open-close></app-open-close>`,
-    moduleMetadata: {
-      declarations: [OpenCloseComponent],
-    },
-  }),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const opened = canvas.getByText('The box is now Open!');
-    expect(opened).toBeDefined();
-    const submitButton = canvas.getByRole('button');
-    await userEvent.click(submitButton);
-    const closed = canvas.getByText('The box is now Closed!');
-    expect(closed).toBeDefined();
-  },
-};

code/frameworks/angular/template/stories/core/applicationConfig/with-noop-browser-animations.stories.ts

@@ -1,36 +0,0 @@
-import { Meta, StoryObj } from '@storybook/angular';
-import { expect, userEvent, within } from '@storybook/test';
-
-import { importProvidersFrom } from '@angular/core';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
-import { OpenCloseComponent } from '../moduleMetadata/angular-src/open-close-component/open-close.component';
-
-const meta: Meta = {
-  component: OpenCloseComponent,
-};
-
-export default meta;
-
-type Story = StoryObj<typeof OpenCloseComponent>;
-
-export const WithNoopBrowserAnimations: Story = {
-  render: () => ({
-    template: `<app-open-close></app-open-close>`,
-    applicationConfig: {
-      providers: [importProvidersFrom(NoopAnimationsModule)],
-    },
-    moduleMetadata: {
-      declarations: [OpenCloseComponent],
-    },
-  }),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const opened = canvas.getByText('The box is now Open!');
-    expect(opened).toBeDefined();
-    const submitButton = canvas.getByRole('button');
-    await userEvent.click(submitButton);
-    const closed = canvas.getByText('The box is now Closed!');
-    expect(closed).toBeDefined();
-  },
-};

code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.css

@@ -1,13 +0,0 @@
-:host {
-  display: block;
-  margin-top: 1rem;
-}
-
-.open-close-container {
-  margin-top: 1em;
-  border: 1px solid #dddddd;
-  padding: 20px 20px 0px 20px;
-  color: #000000;
-  font-weight: bold;
-  font-size: 20px;
-}

code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.html

@@ -1,7 +0,0 @@
-<nav>
-  <button type="button" (click)="toggle()">Toggle Open/Close</button>
-</nav>
-
-<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
-  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
-</div>

code/frameworks/angular/template/stories/core/moduleMetadata/angular-src/open-close-component/open-close.component.ts

@@ -1,39 +0,0 @@
-import { Component } from '@angular/core';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-
-@Component({
-  standalone: false,
-  selector: 'app-open-close',
-  animations: [
-    trigger('openClose', [
-      // ...
-      state(
-        'open',
-        style({
-          height: '200px',
-          opacity: 1,
-          backgroundColor: 'yellow',
-        })
-      ),
-      state(
-        'closed',
-        style({
-          height: '100px',
-          opacity: 0.8,
-          backgroundColor: 'blue',
-        })
-      ),
-      transition('open => closed', [animate('0.1s')]),
-      transition('closed => open', [animate('0.1s')]),
-    ]),
-  ],
-  templateUrl: 'open-close.component.html',
-  styleUrls: ['open-close.component.css'],
-})
-export class OpenCloseComponent {
-  isOpen = true;
-
-  toggle() {
-    this.isOpen = !this.isOpen;
-  }
-}

code/frameworks/ember/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
   "bugs": {

code/frameworks/experimental-nextjs-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/experimental-nextjs-vite",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for Next.js and Vite",
   "keywords": [
     "storybook",

code/frameworks/experimental-nextjs-vite/src/portable-stories.ts

@@ -96,7 +96,7 @@ export function composeStory<TArgs extends Args = Args>(
     story as StoryAnnotationsOrFn<ReactRenderer, Args>,
     componentAnnotations,
     projectAnnotations,
-    INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,
+    globalThis.globalProjectAnnotations ?? INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,
     exportsName
   );
 }

code/frameworks/html-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-vite",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/html-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html-webpack5",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/nextjs",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for Next.js",
   "keywords": [
     "storybook",

code/frameworks/nextjs/src/portable-stories.ts

@@ -96,7 +96,7 @@ export function composeStory<TArgs extends Args = Args>(
     story as StoryAnnotationsOrFn<ReactRenderer, Args>,
     componentAnnotations,
     projectAnnotations,
-    INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,
+    globalThis.globalProjectAnnotations ?? INTERNAL_DEFAULT_PROJECT_ANNOTATIONS,
     exportsName
   );
 }

code/frameworks/preact-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-vite",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/preact-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact-webpack5",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"

code/frameworks/react-native-web-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-web-vite",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Develop react-native components an isolated web environment with hot reloading.",
   "keywords": [
     "storybook"

code/frameworks/react-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-vite",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/react-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-webpack5",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/server-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/server-webpack5",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/svelte-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-vite",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/svelte-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte-webpack5",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/sveltekit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/sveltekit",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for SvelteKit",
   "keywords": [
     "storybook",

code/frameworks/vue3-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3-vite",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/vue3-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue3-webpack5",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/web-components-vite/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components-vite",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"

code/frameworks/web-components-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components-webpack5",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
   "keywords": [
     "lit",

code/lib/blocks/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/blocks",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook Doc Blocks",
   "keywords": [
     "storybook"

code/lib/cli-sb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sb",
-  "version": "8.6.0-beta.1",
+  "version": "8.6.0-beta.8",
   "description": "Storybook CLI",
   "keywords": [
     "storybook"