Merge branch 'next' into no-test-no-vta

.circleci/config.yml

@@ -933,15 +933,15 @@ workflows:
           requires:
             - unit-tests
       - create-sandboxes:
-          parallelism: 19
+          parallelism: 18
           requires:
             - build
       - chromatic-sandboxes:
-          parallelism: 16
+          parallelism: 15
           requires:
             - create-sandboxes
       - e2e-production:
-          parallelism: 14
+          parallelism: 13
           requires:
             - create-sandboxes
       - e2e-dev:
@@ -949,7 +949,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 14
+          parallelism: 13
           requires:
             - create-sandboxes
       - vitest-integration:
@@ -1008,18 +1008,18 @@ workflows:
           requires:
             - build
       - create-sandboxes:
-          parallelism: 34
+          parallelism: 32
           requires:
             - build
       # - smoke-test-sandboxes: # disabled for now
       #     requires:
       #       - create-sandboxes
       - chromatic-sandboxes:
-          parallelism: 31
+          parallelism: 29
           requires:
             - create-sandboxes
       - e2e-production:
-          parallelism: 29
+          parallelism: 27
           requires:
             - create-sandboxes
       - e2e-dev:
@@ -1027,7 +1027,7 @@ workflows:
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 29
+          parallelism: 27
           requires:
             - create-sandboxes
       - vitest-integration:

CODEOWNERS

@@ -46,7 +46,6 @@
 # /code/frameworks/svelte-webpack5/         @kasperpeulen @JReinhold
 # /code/frameworks/sveltekit/               @kasperpeulen @JReinhold
 # /code/frameworks/vue3-vite/               @kasperpeulen @yannbf @JReinhold
-# /code/frameworks/vue3-webpack5/           @kasperpeulen @yannbf @JReinhold
 # /code/frameworks/web-components-vite/     @kasperpeulen @JReinhold
 # /code/frameworks/web-components-webpack5/ @kasperpeulen @JReinhold
 

MIGRATION.md

@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 8.x to 9.0.0](#from-version-8x-to-900)
+  - [Package Manager Support](#package-manager-support)
   - [A11y addon: Removed deprecated manual parameter](#a11y-addon-removed-deprecated-manual-parameter)
   - [Button Component API Changes](#button-component-api-changes)
   - [Documentation Generation Changes](#documentation-generation-changes)
@@ -24,6 +25,13 @@
   - [Dropped support for TypeScript \< 4.9](#dropped-support-for-typescript--49)
   - [Test addon renamed from experimental to stable](#test-addon-renamed-from-experimental-to-stable)
   - [Experimental Status API has turned into a Status Store](#experimental-status-api-has-turned-into-a-status-store)
+  - [Dropped support for Vite 4](#dropped-support-for-vite-4)
+  - [Framework-specific changes](#framework-specific-changes)
+    - [Angular = Require v18 and up](#angular--require-v18-and-up)
+    - [Preact = Dropped webpack5 builder support](#preact--dropped-webpack5-builder-support)
+    - [Vue3 = Dropped webpack5 builder support](#vue3--dropped-webpack5-builder-support)
+    - [Next.js = Require v14 and up](#nextjs--require-v14-and-up)
+    - [Next.js = Vite builder stabilized](#nextjs--vite-builder-stabilized)
 - [From version 8.5.x to 8.6.x](#from-version-85x-to-86x)
   - [Angular: Support experimental zoneless support](#angular-support-experimental-zoneless-support)
   - [Framework-specific Vite plugins have to be explicitly added](#framework-specific-vite-plugins-have-to-be-explicitly-added)
@@ -57,7 +65,7 @@
     - [Removed `sb babelrc` command](#removed-sb-babelrc-command)
     - [Changed interfaces for `@storybook/router` components](#changed-interfaces-for-storybookrouter-components)
     - [Extract no longer batches](#extract-no-longer-batches)
-  - [Framework-specific changes](#framework-specific-changes)
+  - [Framework-specific changes](#framework-specific-changes-1)
     - [React](#react)
       - [`react-docgen` component analysis by default](#react-docgen-component-analysis-by-default)
     - [Next.js](#nextjs)
@@ -422,6 +430,23 @@
 
 ## From version 8.x to 9.0.0
 
+### Package Manager Support
+
+Storybook 9.0 drops official support and maintenance for older package manager versions:
+
+- npm v8 and v9 are no longer supported
+- yarn v3 is no longer supported  
+- pnpm v7 and v8 are no longer supported
+
+The minimum supported versions are now:
+
+- npm v10+
+- yarn v4+ 
+- pnpm v9+
+
+While Storybook may still work with older versions, we recommend upgrading to the latest supported versions for the best experience and to ensure compatibility.
+
+
 ### A11y addon: Removed deprecated manual parameter
 
 The deprecated `manual` parameter from the A11y addon's parameters has been removed. Instead, use the `globals.a11y.manual` setting to control manual mode. For example:
@@ -742,6 +767,130 @@ addons.register(MY_ADDON_ID, (api) => {
 +  }]);
 ```
 
+### Dropped support for Vite 4
+
+Storybook 9.0 drops support for Vite 4. The minimum supported version is now Vite 5.0.0. This change affects all Vite-based frameworks and builders:
+
+- `@storybook/builder-vite`
+- `@storybook/react-vite`
+- `@storybook/vue-vite`
+- `@storybook/vue3-vite`
+- `@storybook/svelte-vite`
+- `@storybook/web-components-vite`
+- `@storybook/preact-vite`
+- `@storybook/html-vite`
+- `@storybook/experimental-nextjs-vite`
+
+To upgrade:
+
+1. Update your project's Vite version to 5.0.0 or higher
+2. Update your Storybook configuration to use Vite 5:
+   ```js
+   // vite.config.js or vite.config.ts
+   export default {
+     // ... your other config
+     // Make sure you're using Vite 5 compatible plugins
+   }
+   ```
+
+If you're using framework-specific Vite plugins, ensure they are compatible with Vite 5:
+- `@vitejs/plugin-react`
+- `@vitejs/plugin-vue`
+- `@sveltejs/vite-plugin-svelte`
+- etc.
+
+For more information on upgrading to Vite 5, see the [Vite Migration Guide](https://vitejs.dev/guide/migration).
+
+### Framework-specific changes
+
+#### Angular = Require v18 and up
+
+Storybook has dropped support for Angular versions 15-17. The minimum supported version is now Angular 18.
+
+If you're using an older version of Angular, you'll need to upgrade to Angular 18 or newer to use the latest version of Storybook.
+
+Key changes:
+- All Angular packages in peerDependencies now require `>=18.0.0 < 20.0.0`
+- Removed legacy code supporting Angular < 18
+- Standalone components are now the default (can be opted out by explicitly setting `standalone: false` in component decorators)
+- Updated RxJS requirement to `^7.4.0`
+- Updated TypeScript requirement to `^4.9.0 || ^5.0.0`
+- Updated Zone.js requirement to `^0.14.0 || ^0.15.0`
+
+#### Preact = Dropped webpack5 builder support
+
+The packages `@storybook/preact-webpack5` and `@storybook/preset-preact-webpack5` have been removed. For Preact projects, please use the Vite builder instead:
+
+```bash
+npm remove @storybook/preact-webpack5 @storybook/preset-preact-webpack
+npm install @storybook/preact-vite --save-dev
+```
+
+Then update your `.storybook/main.js|ts`:
+
+```js
+export default {
+  framework: {
+    name: '@storybook/preact-vite',
+    options: {},
+  },
+  // ... other configurations
+};
+```
+
+#### Vue3 = Dropped webpack5 builder support
+
+The `@storybook/vue3-webpack5` package has been removed. For Vue3 projects, please use the Vite builder instead:
+
+```bash
+npm remove @storybook/vue3-webpack5 @storybook/preset-vue3-webpack
+npm install @storybook/vue3-vite --save-dev
+```
+
+Then update your `.storybook/main.js|ts`:
+
+```js
+export default {
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  // ... other configurations
+};
+```
+
+#### Next.js = Require v14 and up
+
+Storybook has dropped support for Next.js versions below 14. The minimum supported version is now Next.js 14.
+
+If you're using an older version of Next.js, you'll need to upgrade to Next.js 14 or newer to use the latest version of Storybook.
+
+For help upgrading your Next.js application, see the [Next.js upgrade guide](https://nextjs.org/docs/app/building-your-application/upgrading).
+
+#### Next.js = Vite builder stabilized
+
+The experimental Next.js Vite builder (`@storybook/experimental-nextjs-vite`) has been stabilized and renamed to `@storybook/nextjs-vite`. If you were using the experimental package, you should update your dependencies to use the new stable package name.
+
+```diff
+{
+  "dependencies": {
+-   "@storybook/experimental-nextjs-vite": "^x.x.x"
++   "@storybook/nextjs-vite": "^9.0.0"
+  }
+}
+```
+
+Also update your `.storybook/main.<js|ts>` file accordingly:
+
+```diff
+export default {
+  addons: [
+-   "@storybook/experimental-nextjs-vite",
++   "@storybook/nextjs-vite"    
+  ]
+}
+```
+
 ## From version 8.5.x to 8.6.x
 
 ### Angular: Support experimental zoneless support

code/.storybook/main.ts

@@ -1,5 +1,7 @@
 import { join } from 'node:path';
 
+import react from '@vitejs/plugin-react';
+
 import { defineMain } from '../frameworks/react-vite/src/node';
 
 const componentsPath = join(__dirname, '../core/src/components/index.ts');
@@ -126,6 +128,7 @@ const config = defineMain({
               }),
         },
       },
+      plugins: [react()],
       optimizeDeps: {
         force: true,
         include: ['@storybook/blocks'],

code/addons/docs/package.json

@@ -138,7 +138,7 @@
     "rehype-external-links": "^3.0.0",
     "rehype-slug": "^6.0.0",
     "typescript": "^5.7.3",
-    "vite": "^4.0.4"
+    "vite": "5.1.6"
   },
   "peerDependencies": {
     "storybook": "workspace:^"

code/addons/docs/src/preset.ts

@@ -1,4 +1,4 @@
-import { dirname, isAbsolute, join } from 'node:path';
+import path, { dirname, isAbsolute, join } from 'node:path';
 
 import { logger } from 'storybook/internal/node-logger';
 import type { DocsOptions, Options, PresetProperty } from 'storybook/internal/types';
@@ -96,7 +96,6 @@ async function webpack(
       ...webpackConfig.resolve?.alias,
       react,
       '@storybook/blocks': blocksPath,
-
       'react-dom': reactDom,
       '@mdx-js/react': mdx,
     };

code/addons/test/src/constants.ts

@@ -18,7 +18,7 @@ export const COVERAGE_DIRECTORY = 'coverage';
 
 export const SUPPORTED_FRAMEWORKS = [
   '@storybook/nextjs',
-  '@storybook/experimental-nextjs-vite',
+  '@storybook/nextjs-vite',
   '@storybook/sveltekit',
 ];
 

code/addons/test/src/node/boot-test-runner.test.ts

@@ -90,6 +90,7 @@ describe('bootTestRunner', () => {
         NODE_ENV: 'test',
         TEST: 'true',
         VITEST: 'true',
+        VITEST_CHILD_PROCESS: 'true',
       },
       extendEnv: true,
     });

code/addons/test/src/node/boot-test-runner.ts

@@ -69,7 +69,12 @@ const bootTestRunner = async (channel: Channel, store: Store) => {
   const startChildProcess = () =>
     new Promise<void>((resolve, reject) => {
       child = execaNode(vitestModulePath, {
-        env: { VITEST: 'true', TEST: 'true', NODE_ENV: process.env.NODE_ENV ?? 'test' },
+        env: {
+          VITEST: 'true',
+          TEST: 'true',
+          VITEST_CHILD_PROCESS: 'true',
+          NODE_ENV: process.env.NODE_ENV ?? 'test',
+        },
         extendEnv: true,
       });
       stderr = [];

code/addons/test/src/postinstall.ts

@@ -72,12 +72,12 @@ export default async function postInstall(options: PostinstallOptions) {
   if (info.frameworkPackageName === '@storybook/nextjs' && !hasCustomWebpackConfig) {
     const out =
       options.yes || !isInteractive
-        ? { migrateToExperimentalNextjsVite: !!options.yes }
+        ? { migrateToNextjsVite: !!options.yes }
         : await prompts({
             type: 'confirm',
-            name: 'migrateToExperimentalNextjsVite',
+            name: 'migrateToNextjsVite',
             message: dedent`
-            The addon requires the use of @storybook/experimental-nextjs-vite to work with Next.js.
+            The addon requires the use of @storybook/nextjs-vite to work with Next.js.
             https://storybook.js.org/docs/writing-tests/test-addon#install-and-set-up
 
             Do you want to migrate?
@@ -85,9 +85,9 @@ export default async function postInstall(options: PostinstallOptions) {
             initial: true,
           });
 
-    if (out.migrateToExperimentalNextjsVite) {
+    if (out.migrateToNextjsVite) {
       await packageManager.addDependencies({ installAsDevDependencies: true }, [
-        `@storybook/experimental-nextjs-vite@${versions['@storybook/experimental-nextjs-vite']}`,
+        `@storybook/nextjs-vite@${versions['@storybook/nextjs-vite']}`,
       ]);
 
       await packageManager.removeDependencies({}, ['@storybook/nextjs']);
@@ -96,21 +96,21 @@ export default async function postInstall(options: PostinstallOptions) {
       traverse(config._ast, {
         StringLiteral(path) {
           if (path.node.value === '@storybook/nextjs') {
-            path.node.value = '@storybook/experimental-nextjs-vite';
+            path.node.value = '@storybook/nextjs-vite';
           }
         },
       });
 
       await writeConfig(config, mainJsPath);
 
-      info.frameworkPackageName = '@storybook/experimental-nextjs-vite';
+      info.frameworkPackageName = '@storybook/nextjs-vite';
       info.builderPackageName = '@storybook/builder-vite';
     }
   }
 
   const annotationsImport = SUPPORTED_FRAMEWORKS.includes(info.frameworkPackageName)
     ? info.frameworkPackageName === '@storybook/nextjs'
-      ? '@storybook/experimental-nextjs-vite'
+      ? '@storybook/nextjs-vite'
       : info.frameworkPackageName
     : info.rendererPackageName && SUPPORTED_RENDERERS.includes(info.rendererPackageName)
       ? info.rendererPackageName
@@ -215,18 +215,16 @@ export default async function postInstall(options: PostinstallOptions) {
       dedent`
         It looks like you're using Next.js.
 
-        Adding ${picocolors.bold(colors.pink(`@storybook/experimental-nextjs-vite/vite-plugin`))} so you can use it with Vitest.
+        Adding ${picocolors.bold(colors.pink(`@storybook/nextjs-vite/vite-plugin`))} so you can use it with Vitest.
 
         More info about the plugin at ${picocolors.cyan(`https://github.com/storybookjs/vite-plugin-storybook-nextjs`)}
       `
     );
     try {
       const storybookVersion = await packageManager.getInstalledVersion('storybook');
-      dependencies.push(`@storybook/experimental-nextjs-vite@^${storybookVersion}`);
+      dependencies.push(`@storybook/nextjs-vite@^${storybookVersion}`);
     } catch (e) {
-      console.error(
-        'Failed to install @storybook/experimental-nextjs-vite. Please install it manually'
-      );
+      console.error('Failed to install @storybook/nextjs-vite. Please install it manually');
     }
   }
 

code/addons/test/src/preset.ts

@@ -50,7 +50,7 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti
   if (!builderName?.includes('vite')) {
     if (framework.includes('nextjs')) {
       log(dedent`
-        You're using ${framework}, which is a Webpack-based builder. In order to use Storybook Test, with your project, you need to use '@storybook/experimental-nextjs-vite', a high performance Vite-based equivalent.
+        You're using ${framework}, which is a Webpack-based builder. In order to use Storybook Test, with your project, you need to use '@storybook/nextjs-vite', a high performance Vite-based equivalent.
 
         Information on how to upgrade here: ${picocolors.yellow('https://storybook.js.org/docs/get-started/frameworks/nextjs#with-vite')}\n
       `);

code/builders/builder-vite/package.json

@@ -59,11 +59,11 @@
     "polka": "^1.0.0-next.28",
     "sirv": "^2.0.4",
     "slash": "^5.0.0",
-    "vite": "^4.0.4"
+    "vite": "5.1.6"
   },
   "peerDependencies": {
     "storybook": "workspace:^",
-    "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
+    "vite": "^5.0.0 || ^6.0.0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -30,7 +30,7 @@ const INCLUDE_CANDIDATES = [
   '@storybook/addon-themes',
   '@storybook/addon-themes/preview',
   '@storybook/blocks',
-  '@storybook/experimental-nextjs-vite/dist/preview.mjs',
+  '@storybook/nextjs-vite/dist/preview.mjs',
   '@storybook/html',
   '@storybook/html/dist/entry-preview-docs.mjs',
   '@storybook/html/dist/entry-preview.mjs',

code/builders/builder-vite/src/plugins/external-globals-plugin.ts

@@ -38,7 +38,7 @@ const replacementMap = new Map([
  * https://github.com/eight04/rollup-plugin-external-globals, but simplified to meet our simple
  * needs.
  */
-export async function externalGlobalsPlugin(externals: Record<string, string>) {
+export async function externalGlobalsPlugin(externals: Record<string, string>): Promise<Plugin> {
   await init;
   const { mergeAlias } = await import('vite');
 

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

@@ -32,13 +32,13 @@ export type PluginConfigType = 'build' | 'development';
 const configEnvServe: ConfigEnv = {
   mode: 'development',
   command: 'serve',
-  ssrBuild: false,
+  isSsrBuild: false,
 };
 
 const configEnvBuild: ConfigEnv = {
   mode: 'production',
   command: 'build',
-  ssrBuild: false,
+  isSsrBuild: false,
 };
 
 // Vite config that is common to development and production mode
@@ -47,8 +47,7 @@ export async function commonConfig(
   _type: PluginConfigType
 ): Promise<ViteInlineConfig> {
   const configEnv = _type === 'development' ? configEnvServe : configEnvBuild;
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore this property only exists in Vite 6
+  // @ts-expect-error - defaultClientConditions only exists in Vite 6
   const { loadConfigFromFile, mergeConfig, defaultClientConditions = [] } = await import('vite');
 
   const { viteConfigPath } = await getBuilderOptions<BuilderOptions>(options);

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

@@ -32,12 +32,12 @@ export async function createViteServer(options: Options, devServer: Server) {
   const ipRegex = /^(?:\d{1,3}\.){3}\d{1,3}$|^(?:[a-fA-F0-9]{1,4}:){7}[a-fA-F0-9]{1,4}$/;
 
   if (
-    // @ts-expect-error (unknown)
+    // @ts-expect-error - allowedHosts is not typed in Vite 5
     !(config.server.allowedHosts as string[])?.length &&
     options.host &&
     !ipRegex.test(options.host)
   ) {
-    // @ts-expect-error (unknown)
+    // @ts-expect-error - allowedHosts is not typed in Vite 5
     config.server.allowedHosts = [options.host.toLowerCase()];
   }
 

code/core/bin/index.cjs

@@ -1,8 +1,8 @@
 #!/usr/bin/env node
 
 const majorNodeVersion = parseInt(process.versions.node, 10);
-if (majorNodeVersion < 18) {
-  console.error('To run Storybook you need to have Node.js 18 or higher');
+if (majorNodeVersion < 20) {
+  console.error('To run Storybook you need to have Node.js 20 or higher');
   process.exit(1);
 }
 

code/core/src/cli/helpers.ts

@@ -152,9 +152,8 @@ export const frameworkToDefaultBuilder: Record<
   'html-webpack5': CoreBuilder.Webpack5,
   nextjs: CoreBuilder.Webpack5,
   nuxt: CoreBuilder.Vite,
-  'experimental-nextjs-vite': CoreBuilder.Vite,
+  'nextjs-vite': CoreBuilder.Vite,
   'preact-vite': CoreBuilder.Vite,
-  'preact-webpack5': CoreBuilder.Webpack5,
   qwik: CoreBuilder.Vite,
   'react-native-web-vite': CoreBuilder.Vite,
   'react-vite': CoreBuilder.Vite,
@@ -165,7 +164,6 @@ export const frameworkToDefaultBuilder: Record<
   'svelte-webpack5': CoreBuilder.Webpack5,
   sveltekit: CoreBuilder.Vite,
   'vue3-vite': CoreBuilder.Vite,
-  'vue3-webpack5': CoreBuilder.Webpack5,
   'web-components-vite': CoreBuilder.Vite,
   'web-components-webpack5': CoreBuilder.Webpack5,
   // Only to pass type checking, will never be used

code/core/src/common/utils/framework-to-renderer.ts

@@ -11,9 +11,8 @@ export const frameworkToRenderer: Record<
   'html-vite': 'html',
   'html-webpack5': 'html',
   nextjs: 'react',
-  'experimental-nextjs-vite': 'react',
+  'nextjs-vite': 'react',
   'preact-vite': 'preact',
-  'preact-webpack5': 'preact',
   qwik: 'qwik',
   'react-vite': 'react',
   'react-webpack5': 'react',
@@ -23,7 +22,6 @@ export const frameworkToRenderer: Record<
   'svelte-webpack5': 'svelte',
   sveltekit: 'svelte',
   'vue3-vite': 'vue3',
-  'vue3-webpack5': 'vue3',
   nuxt: 'vue3',
   'web-components-vite': 'web-components',
   'web-components-webpack5': 'web-components',

code/core/src/common/utils/get-storybook-info.ts

@@ -33,7 +33,6 @@ export const frameworkPackages: Record<string, SupportedFrameworks> = {
   '@storybook/html-webpack5': 'html-webpack5',
   '@storybook/nextjs': 'nextjs',
   '@storybook/preact-vite': 'preact-vite',
-  '@storybook/preact-webpack5': 'preact-webpack5',
   '@storybook/react-vite': 'react-vite',
   '@storybook/react-webpack5': 'react-webpack5',
   '@storybook/server-webpack5': 'server-webpack5',
@@ -41,9 +40,8 @@ export const frameworkPackages: Record<string, SupportedFrameworks> = {
   '@storybook/svelte-webpack5': 'svelte-webpack5',
   '@storybook/sveltekit': 'sveltekit',
   '@storybook/vue3-vite': 'vue3-vite',
-  '@storybook/experimental-nextjs-vite': 'experimental-nextjs-vite',
+  '@storybook/nextjs-vite': 'nextjs-vite',
   '@storybook/react-native-web-vite': 'react-native-web-vite',
-  '@storybook/vue3-webpack5': 'vue3-webpack5',
   '@storybook/web-components-vite': 'web-components-vite',
   '@storybook/web-components-webpack5': 'web-components-webpack5',
   // community (outside of monorepo)

code/core/src/common/versions.ts

@@ -19,12 +19,11 @@ export default {
   storybook: '9.0.0-alpha.11',
   '@storybook/angular': '9.0.0-alpha.11',
   '@storybook/ember': '9.0.0-alpha.11',
-  '@storybook/experimental-nextjs-vite': '9.0.0-alpha.11',
   '@storybook/html-vite': '9.0.0-alpha.11',
   '@storybook/html-webpack5': '9.0.0-alpha.11',
   '@storybook/nextjs': '9.0.0-alpha.11',
+  '@storybook/nextjs-vite': '9.0.0-alpha.11',
   '@storybook/preact-vite': '9.0.0-alpha.11',
-  '@storybook/preact-webpack5': '9.0.0-alpha.11',
   '@storybook/react-native-web-vite': '9.0.0-alpha.11',
   '@storybook/react-vite': '9.0.0-alpha.11',
   '@storybook/react-webpack5': '9.0.0-alpha.11',
@@ -33,7 +32,6 @@ export default {
   '@storybook/svelte-webpack5': '9.0.0-alpha.11',
   '@storybook/sveltekit': '9.0.0-alpha.11',
   '@storybook/vue3-vite': '9.0.0-alpha.11',
-  '@storybook/vue3-webpack5': '9.0.0-alpha.11',
   '@storybook/web-components-vite': '9.0.0-alpha.11',
   '@storybook/web-components-webpack5': '9.0.0-alpha.11',
   '@storybook/blocks': '9.0.0-alpha.11',
@@ -47,11 +45,9 @@ export default {
   '@storybook/source-loader': '9.0.0-alpha.11',
   '@storybook/preset-create-react-app': '9.0.0-alpha.11',
   '@storybook/preset-html-webpack': '9.0.0-alpha.11',
-  '@storybook/preset-preact-webpack': '9.0.0-alpha.11',
   '@storybook/preset-react-webpack': '9.0.0-alpha.11',
   '@storybook/preset-server-webpack': '9.0.0-alpha.11',
   '@storybook/preset-svelte-webpack': '9.0.0-alpha.11',
-  '@storybook/preset-vue3-webpack': '9.0.0-alpha.11',
   '@storybook/html': '9.0.0-alpha.11',
   '@storybook/preact': '9.0.0-alpha.11',
   '@storybook/react': '9.0.0-alpha.11',

code/core/src/core-server/stores/status.ts

@@ -12,7 +12,7 @@ const statusStore = createStatusStore({
       before it was ready.
       This will be fixed when we do the planned UniversalStore v0.2.
     */
-    leader: process.env.VITEST !== 'true',
+    leader: process.env.VITEST_CHILD_PROCESS !== 'true',
   }),
   environment: 'server',
 });

code/core/src/core-server/stores/test-provider.ts

@@ -12,7 +12,7 @@ const testProviderStore = createTestProviderStore({
             before it was ready.
             This will be fixed when we do the planned UniversalStore v0.2.
           */
-    leader: process.env.VITEST !== 'true',
+    leader: process.env.VITEST_CHILD_PROCESS !== 'true',
   }),
 });
 

code/core/src/manager/globals-runtime.ts

@@ -12,7 +12,7 @@ globalPackages.forEach((key) => {
 
 globalThis.sendTelemetryError = (error) => {
   if (!shouldSkipError(error)) {
-    const channel = global.__STORYBOOK_ADDONS_CHANNEL__;
+    const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__;
     channel.emit(TELEMETRY_ERROR, prepareForTelemetry(error));
   }
 };
@@ -20,9 +20,9 @@ globalThis.sendTelemetryError = (error) => {
 // handle all uncaught errors at the root of the application and log to telemetry
 globalThis.addEventListener('error', (args) => {
   const error = args.error || args;
-  global.sendTelemetryError(error);
+  globalThis.sendTelemetryError(error);
 });
 
 globalThis.addEventListener('unhandledrejection', ({ reason }) => {
-  global.sendTelemetryError(reason);
+  globalThis.sendTelemetryError(reason);
 });

code/core/src/types/modules/frameworks.ts

@@ -2,12 +2,11 @@
 export type SupportedFrameworks =
   | 'angular'
   | 'ember'
-  | 'experimental-nextjs-vite'
   | 'html-vite'
   | 'html-webpack5'
   | 'nextjs'
+  | 'nextjs-vite'
   | 'preact-vite'
-  | 'preact-webpack5'
   | 'react-native-web-vite'
   | 'react-vite'
   | 'react-webpack5'
@@ -16,7 +15,6 @@ export type SupportedFrameworks =
   | 'svelte-webpack5'
   | 'sveltekit'
   | 'vue3-vite'
-  | 'vue3-webpack5'
   | 'web-components-vite'
   | 'web-components-webpack5'
   | 'qwik'

code/frameworks/angular/package.json

@@ -93,22 +93,22 @@
     "zone.js": "^0.15.0"
   },
   "peerDependencies": {
-    "@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",
-    "@angular/compiler-cli": ">=15.0.0 < 20.0.0",
-    "@angular/core": ">=15.0.0 < 20.0.0",
-    "@angular/forms": ">=15.0.0 < 20.0.0",
-    "@angular/platform-browser": ">=15.0.0 < 20.0.0",
-    "@angular/platform-browser-dynamic": ">=15.0.0 < 20.0.0",
-    "rxjs": "^6.0.0 || ^7.4.0",
+    "@angular-devkit/architect": ">=0.1800.0 < 0.2000.0",
+    "@angular-devkit/build-angular": ">=18.0.0 < 20.0.0",
+    "@angular-devkit/core": ">=18.0.0 < 20.0.0",
+    "@angular/animations": ">=18.0.0 < 20.0.0",
+    "@angular/cli": ">=18.0.0 < 20.0.0",
+    "@angular/common": ">=18.0.0 < 20.0.0",
+    "@angular/compiler": ">=18.0.0 < 20.0.0",
+    "@angular/compiler-cli": ">=18.0.0 < 20.0.0",
+    "@angular/core": ">=18.0.0 < 20.0.0",
+    "@angular/forms": ">=18.0.0 < 20.0.0",
+    "@angular/platform-browser": ">=18.0.0 < 20.0.0",
+    "@angular/platform-browser-dynamic": ">=18.0.0 < 20.0.0",
+    "rxjs": "^6.5.3 || ^7.4.0",
     "storybook": "workspace:^",
     "typescript": "^4.9.0 || ^5.0.0",
-    "zone.js": ">= 0.11.1 < 1.0.0"
+    "zone.js": ">=0.14.0"
   },
   "peerDependenciesMeta": {
     "@angular/animations": {
@@ -122,7 +122,7 @@
     }
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "publishConfig": {
     "access": "public"

code/frameworks/angular/src/server/angular-cli-webpack.js

@@ -8,39 +8,12 @@ const {
   default: StorybookNormalizeAngularEntryPlugin,
 } = require('./plugins/storybook-normalize-angular-entry-plugin');
 
-const getAngularWebpackUtils = () => {
-  try {
-    // Angular < 16.1.0
-    const {
-      getCommonConfig,
-      getStylesConfig,
-      getDevServerConfig,
-      getTypeScriptConfig,
-    } = require('@angular-devkit/build-angular/src/webpack/configs');
-
-    return {
-      getCommonConfig,
-      getStylesConfig,
-      getDevServerConfig,
-      getTypeScriptConfig,
-    };
-  } catch (e) {
-    // Angular > 16.1.0
-    const {
-      getCommonConfig,
-      getStylesConfig,
-      getDevServerConfig,
-      getTypeScriptConfig,
-    } = require('@angular-devkit/build-angular/src/tools/webpack/configs');
-
-    return {
-      getCommonConfig,
-      getStylesConfig,
-      getDevServerConfig,
-      getTypeScriptConfig,
-    };
-  }
-};
+const {
+  getCommonConfig,
+  getStylesConfig,
+  getDevServerConfig,
+  getTypeScriptConfig,
+} = require('@angular-devkit/build-angular/src/tools/webpack/configs');
 
 /**
  * Extract webpack config from angular-cli 13.x.x ⚠️ This file is in JavaScript to not use
@@ -52,8 +25,6 @@ const getAngularWebpackUtils = () => {
  */
 exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext }) => {
   /** Get angular-cli Webpack config */
-  const { getCommonConfig, getStylesConfig, getDevServerConfig, getTypeScriptConfig } =
-    getAngularWebpackUtils();
   const { config: cliConfig } = await generateI18nBrowserWebpackConfigFromContext(
     {
       // Default options

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

@@ -51,36 +51,19 @@ export const runNgcc = async () => {
 };
 
 export const webpack = async (webpackConfig: Configuration, options: PresetOptions) => {
-  const packageJsonPath = require.resolve('@angular/core/package.json');
-  const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf8'));
-  const VERSION = packageJson.version;
   const framework = await options.presets.apply<Preset>('framework');
   const angularOptions = (typeof framework === 'object' ? framework.options : {}) as AngularOptions;
-  const angularMajorVersion = VERSION.split('.')[0];
-  const isAngular16OrNewer = parseInt(angularMajorVersion, 10) >= 16;
 
   // Default to true, if undefined
   if (angularOptions.enableIvy === false) {
     return webpackConfig;
   }
 
-  let extraMainFields: string[] = [];
-
-  if (angularOptions.enableNgcc !== false && !isAngular16OrNewer) {
-    // TODO: Drop if Angular 14 and 15 are not supported anymore
-    runNgcc();
-    extraMainFields = ['es2015_ivy_ngcc', 'module_ivy_ngcc', 'main_ivy_ngcc'];
-  }
-
-  if (!isAngular16OrNewer) {
-    extraMainFields.push('es2015');
-  }
-
   return {
     ...webpackConfig,
     resolve: {
       ...webpackConfig.resolve,
-      mainFields: [...extraMainFields, 'browser', 'module', 'main'],
+      mainFields: ['browser', 'module', 'main'],
     },
   };
 };

code/frameworks/angular/src/types.ts

@@ -46,5 +46,4 @@ export type StorybookConfig = Omit<
 
 export interface AngularOptions {
   enableIvy?: boolean;
-  enableNgcc?: boolean;
 }

code/frameworks/ember/package.json

@@ -70,7 +70,7 @@
     "storybook": "workspace:^"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "publishConfig": {
     "access": "public"

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

@@ -1,8 +0,0 @@
-{
-  "name": "experimental-nextjs-vite",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "projectType": "library",
-  "targets": {
-    "build": {}
-  }
-}

code/frameworks/html-vite/package.json

@@ -65,7 +65,7 @@
     "storybook": "workspace:^"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "publishConfig": {
     "access": "public"

code/frameworks/html-webpack5/package.json

@@ -66,7 +66,7 @@
     "storybook": "workspace:^"
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "publishConfig": {
     "access": "public"

code/frameworks/nextjs-vite/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@storybook/experimental-nextjs-vite",
+  "name": "@storybook/nextjs-vite",
   "version": "9.0.0-alpha.11",
   "description": "Storybook for Next.js and Vite",
   "keywords": [
@@ -7,7 +7,7 @@
     "nextjs",
     "vite"
   ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/experimental-nextjs-vite",
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/nextjs-vite",
   "bugs": {
     "url": "https://github.com/storybookjs/storybook/issues"
   },
@@ -128,7 +128,7 @@
     }
   },
   "engines": {
-    "node": ">=18.0.0"
+    "node": ">=20.0.0"
   },
   "publishConfig": {
     "access": "public"

code/frameworks/nextjs-vite/project.json

@@ -1,5 +1,5 @@
 {
-  "name": "vue3-webpack",
+  "name": "nextjs-vite",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
   "targets": {

code/frameworks/nextjs-vite/src/export-mocks/headers/cookies.ts

@@ -3,7 +3,7 @@
 // is the only way to achieve it actually being a singleton
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore we must ignore types here as during compilation they are not generated yet
-import { headers } from '@storybook/experimental-nextjs-vite/headers.mock';
+import { headers } from '@storybook/nextjs-vite/headers.mock';
 
 import { RequestCookies } from 'next/dist/compiled/@edge-runtime/cookies';
 import { fn } from 'storybook/test';

code/frameworks/nextjs-vite/src/index.ts

@@ -15,7 +15,7 @@ export * from './types';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-declare module '@storybook/experimental-nextjs-vite/vite-plugin' {
+declare module '@storybook/nextjs-vite/vite-plugin' {
   export const storybookNextJsPlugin: typeof vitePluginStorybookNextJs;
 }
 

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

@@ -34,7 +34,7 @@ import * as nextJsAnnotations from './preview';
  *
  * ```jsx
  * // setup-file.js
- * import { setProjectAnnotations } from '@storybook/experimental-nextjs-vite';
+ * import { setProjectAnnotations } from '@storybook/nextjs-vite';
  * import projectAnnotations from './.storybook/preview';
  *
  * setProjectAnnotations(projectAnnotations);
@@ -70,7 +70,7 @@ const INTERNAL_DEFAULT_PROJECT_ANNOTATIONS: ProjectAnnotations<ReactRenderer> =
  *
  * ```jsx
  * import { render } from '@testing-library/react';
- * import { composeStory } from '@storybook/experimental-nextjs-vite';
+ * import { composeStory } from '@storybook/nextjs-vite';
  * import Meta, { Primary as PrimaryStory } from './Button.stories';
  *
  * const Primary = composeStory(PrimaryStory, Meta);
@@ -114,7 +114,7 @@ export function composeStory<TArgs extends Args = Args>(
  *
  * ```jsx
  * import { render } from '@testing-library/react';
- * import { composeStories } from '@storybook/experimental-nextjs-vite';
+ * import { composeStories } from '@storybook/nextjs-vite';
  * import * as stories from './Button.stories';
  *
  * const { Primary, Secondary } = composeStories(stories);

code/frameworks/nextjs-vite/src/preset.ts

@@ -29,7 +29,7 @@ export const core: PresetProperty<'core'> = async (config, options) => {
 };
 
 export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => {
-  const nextDir = dirname(require.resolve('@storybook/experimental-nextjs-vite/package.json'));
+  const nextDir = dirname(require.resolve('@storybook/nextjs-vite/package.json'));
   const result = [...entry, join(nextDir, 'dist/preview.mjs')];
   return result;
 };

code/frameworks/nextjs-vite/src/preview.tsx

@@ -6,10 +6,10 @@ import type { ReactRenderer, StoryFn } from '@storybook/react';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore we must ignore types here as during compilation they are not generated yet
-import { createNavigation } from '@storybook/experimental-nextjs-vite/navigation.mock';
+import { createNavigation } from '@storybook/nextjs-vite/navigation.mock';
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore we must ignore types here as during compilation they are not generated yet
-import { createRouter } from '@storybook/experimental-nextjs-vite/router.mock';
+import { createRouter } from '@storybook/nextjs-vite/router.mock';
 
 import { isNextRouterError } from 'next/dist/client/components/is-next-router-error';
 

code/frameworks/nextjs-vite/src/routing/app-router-provider.tsx

@@ -5,7 +5,7 @@ import React, { useMemo } from 'react';
 // is the only way to achieve it actually being a singleton
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore we must ignore types here as during compilation they are not generated yet
-import { getRouter } from '@storybook/experimental-nextjs-vite/navigation.mock';
+import { getRouter } from '@storybook/nextjs-vite/navigation.mock';
 
 import type { FlightRouterState } from 'next/dist/server/app-render/types';
 import {

code/frameworks/nextjs-vite/src/routing/page-router-provider.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 // is the only way to achieve it actually being a singleton
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore we must ignore types here as during compilation they are not generated yet
-import { getRouter } from '@storybook/experimental-nextjs-vite/router.mock';
+import { getRouter } from '@storybook/nextjs-vite/router.mock';
 
 import { RouterContext } from 'next/dist/shared/lib/router-context.shared-runtime';
 

code/frameworks/nextjs-vite/src/types.ts

@@ -5,7 +5,7 @@ import type { StorybookConfig as StorybookConfigReactVite } from '@storybook/rea
 
 import type { NextRouter } from 'next/router';
 
-type FrameworkName = CompatibleString<'@storybook/experimental-nextjs-vite'>;
+type FrameworkName = CompatibleString<'@storybook/nextjs-vite'>;
 type BuilderName = CompatibleString<'@storybook/builder-vite'>;
 
 export type FrameworkOptions = {

code/frameworks/nextjs-vite/template/cli/ts-4-9/Button.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 
 import { fn } from 'storybook/test';
 

code/frameworks/nextjs-vite/template/cli/ts-4-9/Header.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 
 import { fn } from 'storybook/test';
 

code/frameworks/nextjs-vite/template/cli/ts-4-9/Page.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 
 import { expect, userEvent, within } from 'storybook/test';
 

code/frameworks/nextjs-vite/template/stories/DynamicImport.stories.tsx

@@ -1,6 +1,6 @@
 import React, { Suspense } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 
 import dynamic from 'next/dynamic';
 

code/frameworks/nextjs-vite/template/stories/Font.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 
 import Font from './Font';
 

code/frameworks/nextjs-vite/template/stories/GetImageProps.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 
 import { type ImageProps, getImageProps } from 'next/image';
 

code/frameworks/nextjs-vite/template/stories/Head.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import type { Meta } from '@storybook/experimental-nextjs-vite';
-import type { StoryObj } from '@storybook/experimental-nextjs-vite';
+import type { Meta } from '@storybook/nextjs-vite';
+import type { StoryObj } from '@storybook/nextjs-vite';
 
 import Head from 'next/head';
 import { expect, waitFor } from 'storybook/test';

code/frameworks/nextjs-vite/template/stories/Image.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState } from 'react';
 
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 
 import Image from 'next/image';
 

code/frameworks/nextjs-vite/template/stories/ImageLegacy.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 
 import Image from 'next/legacy/image';
 

code/frameworks/nextjs-vite/template/stories/Link.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 
 import Link from 'next/link';
 

code/frameworks/nextjs-vite/template/stories/Navigation.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
-import { getRouter } from '@storybook/experimental-nextjs-vite/navigation.mock';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { getRouter } from '@storybook/nextjs-vite/navigation.mock';
 
 import {
   useParams,

code/frameworks/nextjs-vite/template/stories/NextHeader.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta } from '@storybook/experimental-nextjs-vite';
-import type { StoryObj } from '@storybook/experimental-nextjs-vite';
-import { cookies, headers } from '@storybook/experimental-nextjs-vite/headers.mock';
+import type { Meta } from '@storybook/nextjs-vite';
+import type { StoryObj } from '@storybook/nextjs-vite';
+import { cookies, headers } from '@storybook/nextjs-vite/headers.mock';
 
 import { expect, userEvent, within } from 'storybook/test';
 

code/frameworks/nextjs-vite/template/stories/RSC.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable local-rules/no-uncategorized-errors */
 import React from 'react';
 
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 
 import { Nested, RSC } from './RSC';
 

code/frameworks/nextjs-vite/template/stories/Redirect.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 
 import { redirect } from 'next/navigation';
 import { userEvent, within } from 'storybook/test';

code/frameworks/nextjs-vite/template/stories/Router.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
-import { getRouter } from '@storybook/experimental-nextjs-vite/router.mock';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { getRouter } from '@storybook/nextjs-vite/router.mock';
 
 import Router, { useRouter } from 'next/router';
 import { expect, userEvent, within } from 'storybook/test';

code/frameworks/nextjs-vite/template/stories/ServerActions.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
-import { revalidatePath } from '@storybook/experimental-nextjs-vite/cache.mock';
-import { cookies } from '@storybook/experimental-nextjs-vite/headers.mock';
-import { getRouter, redirect } from '@storybook/experimental-nextjs-vite/navigation.mock';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { revalidatePath } from '@storybook/nextjs-vite/cache.mock';
+import { cookies } from '@storybook/nextjs-vite/headers.mock';
+import { getRouter, redirect } from '@storybook/nextjs-vite/navigation.mock';
 
 import { expect, userEvent, waitFor, within } from 'storybook/test';
 

code/frameworks/nextjs-vite/template/stories/StyledJsx.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { Meta, StoryObj } from '@storybook/experimental-nextjs-vite';
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 
 const Component = () => (
   <div>