Merge branch 'next' into 29772-bug-staticdirs-api-not-compatible-with…

…-vitest-plugin

CHANGELOG.prerelease.md

@@ -1,3 +1,9 @@
+## 8.5.0-alpha.17
+
+- CLI: Fix new-frameworks automigration - [#29804](https://github.com/storybookjs/storybook/pull/29804), thanks @yannbf!
+- ReactVite: Add `@storybook/test` as optional peer dependency - [#29754](https://github.com/storybookjs/storybook/pull/29754), thanks @yannbf!
+- Vite: Fix preview runtime import - [#29802](https://github.com/storybookjs/storybook/pull/29802), thanks @yannbf!
+
 ## 8.5.0-alpha.16
 
 - Core: Avoid getting stuck in locked state - [#29768](https://github.com/storybookjs/storybook/pull/29768), thanks @ghengeveld!

code/.storybook/vitest.config.ts

@@ -34,20 +34,13 @@ export default mergeConfig(
     ],
     test: {
       name: 'storybook-ui',
-      include: [
-        '../addons/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-        // '../core/template/stories/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-        '../core/src/manager/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-        '../core/src/preview-api/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-        '../core/src/components/{brand,components}/**/*.{story,stories}.?(c|m)[jt]s?(x)',
-      ],
       exclude: [
         ...defaultExclude,
         '../node_modules/**',
         '**/__mockdata__/**',
         '../**/__mockdata__/**',
-        // expected to fail in Vitest because of fetching /iframe.html to cause ECONNREFUSED
-        '**/Zoom.stories.tsx',
+        '**/Zoom.stories.tsx', // expected to fail in Vitest because of fetching /iframe.html to cause ECONNREFUSED
+        '**/lib/blocks/src/**', // won't work because of https://github.com/storybookjs/storybook/issues/29783
       ],
       // TODO: bring this back once portable stories support @storybook/core/preview-api hooks
       // @ts-expect-error this type does not exist but the property does!

code/addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "8.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "description": "Test component compliance with web accessibility standards",
   "keywords": [
     "a11y",

code/addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "8.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "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.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "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.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "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.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "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.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "description": "Curated addons to bring out the best of Storybook",
   "keywords": [
     "addon",

code/addons/gfm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-mdx-gfm",
-  "version": "8.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "description": "GitHub Flavored Markdown in Storybook",
   "keywords": [
     "addon",

code/addons/highlight/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-highlight",
-  "version": "8.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "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.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "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.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "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.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "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.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "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.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "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.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "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.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "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.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "description": "Integrate Vitest with Storybook",
   "keywords": [
     "storybook-addons",
@@ -112,6 +112,7 @@
     "sirv": "^2.0.4",
     "slash": "^5.0.0",
     "strip-ansi": "^7.1.0",
+    "tinyglobby": "^0.2.10",
     "ts-dedent": "^2.2.0",
     "typescript": "^5.3.2",
     "vitest": "^2.1.3"

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

@@ -56,6 +56,13 @@ export class TestManager {
         this.coverage = payload.config.coverage;
         await this.restartVitest({ watchMode: this.watchMode, coverage: this.coverage });
       } catch (e) {
+        const isV8 = e.message?.includes('@vitest/coverage-v8');
+        const isIstanbul = e.message?.includes('@vitest/coverage-istanbul');
+
+        if (e.message?.includes('Error: Failed to load url') && (isIstanbul || isV8)) {
+          const coveragePackage = isIstanbul ? 'coverage-istanbul' : 'coverage-v8';
+          e.message = `Please install the @vitest/${coveragePackage} package to run with coverage`;
+        }
         this.reportFatalError('Failed to change coverage mode', e);
       }
     }

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

@@ -83,6 +83,14 @@ export class VitestManager {
     try {
       await this.vitest.init();
     } catch (e) {
+      const isV8 = e.message?.includes('@vitest/coverage-v8');
+      const isIstanbul = e.message?.includes('@vitest/coverage-istanbul');
+
+      if (e.message?.includes('Error: Failed to load url') && (isIstanbul || isV8)) {
+        const coveragePackage = isIstanbul ? 'coverage-istanbul' : 'coverage-v8';
+        e.message = `Please install the @vitest/${coveragePackage} package to run with coverage`;
+      }
+
       this.testManager.reportFatalError('Failed to init Vitest', e);
     }
 

code/addons/test/src/postinstall.ts

@@ -336,8 +336,6 @@ export default async function postInstall(options: PostinstallOptions) {
     // If there's an existing config, we create a workspace file so we can run Storybook tests alongside.
     const extension = extname(rootConfig);
     const browserWorkspaceFile = resolve(dirname(rootConfig), `vitest.workspace${extension}`);
-    // to be set in vitest config
-    const vitestSetupFilePath = relative(dirname(browserWorkspaceFile), vitestSetupFile);
 
     logger.line(1);
     logger.plain(`${step} Creating a Vitest project workspace file:`);
@@ -355,6 +353,7 @@ export default async function postInstall(options: PostinstallOptions) {
           {
             extends: '${viteConfigFile ? relative(dirname(browserWorkspaceFile), viteConfigFile) : ''}',
             plugins: [
+              // The plugin will run tests for the stories defined in your Storybook config 
               // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
               storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
             ],
@@ -366,9 +365,7 @@ export default async function postInstall(options: PostinstallOptions) {
                 name: 'chromium',
                 provider: 'playwright',
               },
-              // Make sure to adjust this pattern to match your stories files.
-              include: ['**/*.stories.?(m)[jt]s?(x)'],
-              setupFiles: ['${vitestSetupFilePath}'],
+              setupFiles: ['./.storybook/vitest.setup.ts'],
             },
           },
         ]);
@@ -393,6 +390,7 @@ export default async function postInstall(options: PostinstallOptions) {
         // More info at: https://storybook.js.org/docs/writing-tests/vitest-plugin
         export default defineConfig({
           plugins: [
+            // The plugin will run tests for the stories defined in your Storybook config 
             // See options at: https://storybook.js.org/docs/writing-tests/vitest-plugin#storybooktest
             storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall}
           ],
@@ -404,8 +402,6 @@ export default async function postInstall(options: PostinstallOptions) {
               name: 'chromium',
               provider: 'playwright',
             },
-            // Make sure to adjust this pattern to match your stories files.
-            include: ['**/*.stories.?(m)[jt]s?(x)'],
             setupFiles: ['${vitestSetupFilePath}'],
           },
         });

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

@@ -4,15 +4,17 @@ import type { Plugin } from 'vitest/config';
 import {
   getInterpretedFile,
   loadAllPresets,
+  normalizeStories,
   validateConfigurationFiles,
 } from 'storybook/internal/common';
-import { mapStaticDir } from 'storybook/internal/core-server';
+import { StoryIndexGenerator, mapStaticDir } from 'storybook/internal/core-server';
 import { readConfig, vitestTransform } from 'storybook/internal/csf-tools';
 import { MainFileMissingError } from 'storybook/internal/server-errors';
-import type { StoriesEntry } from 'storybook/internal/types';
+import type { DocsOptions, StoriesEntry } from 'storybook/internal/types';
 
 import { join, resolve } from 'pathe';
 import sirv from 'sirv';
+import { convertPathToPattern } from 'tinyglobby';
 
 import type { InternalOptions, UserOptions } from './types';
 
@@ -53,15 +55,15 @@ export const storybookTest = (options?: UserOptions): Plugin => {
   process.env.__STORYBOOK_URL__ = storybookUrl;
   process.env.__STORYBOOK_SCRIPT__ = finalOptions.storybookScript;
 
-  let stories: StoriesEntry[];
-
   if (!finalOptions.configDir) {
     finalOptions.configDir = resolve(join(process.cwd(), '.storybook'));
   } else {
     finalOptions.configDir = resolve(process.cwd(), finalOptions.configDir);
   }
 
   let previewLevelTags: string[];
+  let storiesGlobs: StoriesEntry[];
+  let storiesFiles: string[];
   const statics: ReturnType<typeof mapStaticDir>[] = [];
 
   return {
@@ -85,7 +87,27 @@ export const storybookTest = (options?: UserOptions): Plugin => {
         packageJson: {},
       });
 
-      stories = await presets.apply('stories', []);
+      const workingDir = process.cwd();
+      const directories = {
+        configDir,
+        workingDir,
+      };
+      storiesGlobs = await presets.apply('stories');
+      const indexers = await presets.apply('experimental_indexers', []);
+      const docsOptions = await presets.apply<DocsOptions>('docs', {});
+      const normalizedStories = normalizeStories(await storiesGlobs, directories);
+
+      const generator = new StoryIndexGenerator(normalizedStories, {
+        ...directories,
+        indexers: indexers,
+        docs: docsOptions,
+        workingDir,
+      });
+
+      await generator.initialize();
+
+      storiesFiles = generator.storyFileNames();
+
       previewLevelTags = await extractTagsFromPreview(configDir);
 
       const framework = await presets.apply('framework', undefined);
@@ -105,8 +127,15 @@ export const storybookTest = (options?: UserOptions): Plugin => {
       // const isRunningInBrowserMode = config.plugins.find((plugin: Plugin) =>
       //   plugin.name?.startsWith('vitest:browser')
       // )
+
       config.test ??= {};
 
+      config.test.include ??= [];
+      config.test.include.push(...storiesFiles.map((path) => convertPathToPattern(path)));
+
+      config.test.exclude ??= [];
+      config.test.exclude.push('**/*.mdx');
+
       config.test.env ??= {};
       config.test.env = {
         ...storybookEnv,
@@ -191,13 +220,13 @@ export const storybookTest = (options?: UserOptions): Plugin => {
         return code;
       }
 
-      if (id.match(/(story|stories)\.[cm]?[jt]sx?$/)) {
+      if (storiesFiles.includes(id)) {
         return vitestTransform({
           code,
           fileName: id,
           configDir: finalOptions.configDir,
           tagsFilter: finalOptions.tags,
-          stories,
+          stories: storiesGlobs,
           previewLevelTags,
         });
       }

code/addons/themes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-themes",
-  "version": "8.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "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.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "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.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "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.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "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-webpack5/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/builder-webpack5",
-  "version": "8.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"

code/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core",
-  "version": "8.5.0-alpha.16",
+  "version": "8.5.0-alpha.17",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"