Merge pull request #29800 from storybookjs/version-non-patch-from-8.5…

….0-alpha.16

Release: Prerelease 8.5.0-alpha.17

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/builders/builder-vite/src/codegen-modern-iframe-script.ts

@@ -67,7 +67,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
    * @todo Inline variable and remove `noinspection`
    */
   const code = `
-  import { setup } from '@storybook/core/preview/runtime';
+  import { setup } from 'storybook/internal/preview/runtime';
   import '${SB_VIRTUAL_FILES.VIRTUAL_ADDON_SETUP_FILE}';
 
   setup();

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

@@ -41,6 +41,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/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',

code/frameworks/react-vite/package.json

@@ -63,11 +63,17 @@
     "vite": "^4.0.0"
   },
   "peerDependencies": {
+    "@storybook/test": "workspace:*",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta",
     "storybook": "workspace:^",
     "vite": "^4.0.0 || ^5.0.0 || ^6.0.0"
   },
+  "peerDependenciesMeta": {
+    "@storybook/test": {
+      "optional": true
+    }
+  },
   "engines": {
     "node": ">=18.0.0"
   },

code/package.json

@@ -293,5 +293,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "8.5.0-alpha.17"
 }

code/yarn.lock

@@ -7146,10 +7146,14 @@ __metadata:
     typescript: "npm:^5.3.2"
     vite: "npm:^4.0.0"
   peerDependencies:
+    "@storybook/test": "workspace:*"
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     storybook: "workspace:^"
     vite: ^4.0.0 || ^5.0.0 || ^6.0.0
+  peerDependenciesMeta:
+    "@storybook/test":
+      optional: true
   languageName: unknown
   linkType: soft
 

docs/_snippets/angular-add-framework.md

@@ -15,4 +15,3 @@ const config: StorybookConfig = {
 
 export default config;
 ```
-

docs/_snippets/angular-project-compodoc-config.md

@@ -21,10 +21,10 @@
               "-e",
               "json",
               "-d",
-              "." // Add this line to introspect the relevant files starting from the root directory of your project.
+              ".", // Add this line to introspect the relevant files starting from the root directory of your project.
             ],
-            "port": 6006
-          }
+            "port": 6006,
+          },
         },
         "build-storybook": {
           "builder": "@storybook/angular:build-storybook",
@@ -36,13 +36,13 @@
               "-e",
               "json",
               "-d",
-              "." // Add this line to introspect the relevant files starting from the root directory of your project.
+              ".", // Add this line to introspect the relevant files starting from the root directory of your project.
             ],
-            "outputDir": "storybook-static"
-          }
-        }
-      }
-    }
-  }
+            "outputDir": "storybook-static",
+          },
+        },
+      },
+    },
+  },
 }
 ```

docs/_snippets/before-each-in-meta-mock-date.md

@@ -173,4 +173,3 @@ export const Default: Story = {
   },
 };
 ```
-

docs/_snippets/button-story-argtypes-with-subcategories.md

@@ -275,4 +275,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-

docs/_snippets/checkbox-story-grouped.md

@@ -81,4 +81,3 @@ const meta: Meta = {
 
 export default meta;
 ```
-

docs/_snippets/checkbox-story.md

@@ -1,3 +1,4 @@
+<!-- prettier-ignore -->
 ```mdx filename="Checkbox.mdx" renderer="common" language="mdx"
 import { Canvas, Meta } from '@storybook/blocks';
 
@@ -14,6 +15,7 @@ Use checkboxes to select one or more options from a list of choices.
 <Canvas of={CheckboxStories.Unchecked} />
 ```
 
+<!-- prettier-ignore -->
 ```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="Svelte CSF"
 import { Canvas, Meta } from '@storybook/blocks';
 
@@ -30,6 +32,7 @@ Use checkboxes to select one or more options from a list of choices.
 <Canvas of={CheckboxStories.Unchecked} />
 ```
 
+<!-- prettier-ignore -->
 ```mdx filename="Checkbox.mdx" renderer="svelte" language="mdx" tabTitle="CSF"
 import { Canvas, Meta } from '@storybook/blocks';
 

docs/_snippets/chromatic-install.md

@@ -9,4 +9,3 @@ pnpm add --save-dev chromatic
 ```shell renderer="common" language="js" packageManager="yarn"
 yarn add --dev chromatic
 ```
-

docs/_snippets/component-story-custom-args-icons.md

@@ -34,4 +34,3 @@ const Template: Story = (args) => {
   };
 };
 ```
-

docs/_snippets/csf-3-example-title.md

@@ -1,3 +1,4 @@
+<!-- prettier-ignore -->
 ```mdx filename="src/components/Button/Button.mdx" renderer="common" language="mdx"
 import { Meta, Story } from '@storybook/blocks';
 

docs/_snippets/custom-docs-page.md

@@ -14,9 +14,8 @@ export function CustomDocumentationComponent() {
 }
 ```
 
-```md renderer="common" language="mdx"
-{/* Custom-MDX-Documentation.mdx */}
-
+<!-- prettier-ignore -->
+```mdx filename="Custom-MDX-Documentation.mdx" renderer="common" language="mdx"
 # Replacing DocsPage with custom `MDX` content
 
 This file is a documentation-only `MDX`file to customize Storybook's [DocsPage](https://storybook.js.org/docs/writing-docs/docs-page#replacing-docspage).
@@ -76,6 +75,7 @@ If you didn't include the title in the story's default export, use this approach
 
 <Story id="your-directory-button--small" />
 ```
+
 ```ts filename="CustomDocumentationComponent.ts|tsx" renderer="common" language="ts" tabTitle="ts-component"
 export const CustomDocumentationComponent: React.FC = () => {
   return (
@@ -89,4 +89,3 @@ export const CustomDocumentationComponent: React.FC = () => {
   );
 };
 ```
-

docs/_snippets/decorator-parameterized-in-preview.md

@@ -38,11 +38,15 @@ export default {
         case 'page':
           return (
             // Your page layout is probably a little more complex than this ;)
-            <div className="page-layout"><Story /></div>
+            <div className="page-layout">
+              <Story />
+            </div>
           );
         case 'page-mobile':
           return (
-            <div className="page-mobile-layout"><Story /></div>
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
           );
         default:
           // In the default case, don't apply a layout
@@ -68,11 +72,15 @@ const preview: Preview = {
         case 'page':
           return (
             // Your page layout is probably a little more complex than this ;)
-            <div className="page-layout"><Story /></div>
+            <div className="page-layout">
+              <Story />
+            </div>
           );
         case 'page-mobile':
           return (
-            <div className="page-mobile-layout"><Story /></div>
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
           );
         default:
           // In the default case, don't apply a layout
@@ -96,11 +104,15 @@ export default {
         case 'page':
           return (
             // Your page layout is probably a little more complex than this ;)
-            <div className="page-layout"><Story /></div>
+            <div className="page-layout">
+              <Story />
+            </div>
           );
         case 'page-mobile':
           return (
-            <div className="page-mobile-layout"><Story /></div>
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
           );
         default:
           // In the default case, don't apply a layout
@@ -124,11 +136,15 @@ const preview: Preview = {
         case 'page':
           return (
             // Your page layout is probably a little more complex than this ;)
-            <div className="page-layout"><Story /></div>
+            <div className="page-layout">
+              <Story />
+            </div>
           );
         case 'page-mobile':
           return (
-            <div className="page-mobile-layout"><Story /></div>
+            <div className="page-mobile-layout">
+              <Story />
+            </div>
           );
         default:
           // In the default case, don't apply a layout
@@ -188,4 +204,3 @@ const preview: Preview = {
 
 export default preview;
 ```
-

docs/_snippets/individual-snapshot-tests-portable-stories.md

@@ -15,15 +15,15 @@ const compose = (entry) => {
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
 
 function getAllStoryFiles() {
   // Place the glob you want to match your stories files
   const storyFiles = glob.sync(
-    path.join(__dirname, 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}')
+    path.join(__dirname, 'stories/**/*.{stories,story}.{js,jsx,mjs,ts,tsx}'),
   );
 
   return storyFiles.map((filePath) => {
@@ -45,7 +45,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
         );
       }
 
@@ -157,7 +157,7 @@ const compose = (entry) => {
     return composeStories(entry);
   } catch (error) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${error}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${error}`,
     );
   }
 };
@@ -166,7 +166,7 @@ function getAllStoryFiles() {
   const storyFiles = Object.entries(
     import.meta.glob('./stories/**/*.(stories|story).@(js|jsx|mjs|ts|tsx)', {
       eager: true,
-    })
+    }),
   );
 
   return storyFiles.map(([filePath, storyFile]) => {
@@ -185,7 +185,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
         );
       }
 
@@ -226,7 +226,7 @@ const compose = (entry: StoryFile): ReturnType<typeof composeStories<StoryFile>>
     return composeStories(entry);
   } catch (e) {
     throw new Error(
-      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`
+      `There was an issue composing stories for the module: ${JSON.stringify(entry)}, ${e}`,
     );
   }
 };
@@ -236,7 +236,7 @@ function getAllStoryFiles() {
   const storyFiles = Object.entries(
     import.meta.glob<StoryFile>('./stories/**/*.(stories|story).@(js|jsx|mjs|ts|tsx)', {
       eager: true,
-    })
+    }),
   );
 
   return storyFiles.map(([filePath, storyFile]) => {
@@ -256,7 +256,7 @@ describe('Stories Snapshots', () => {
 
       if (stories.length <= 0) {
         throw new Error(
-          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`
+          `No stories found for this module: ${title}. Make sure there is at least one valid story for this module.`,
         );
       }