Merge pull request #26619 from storybookjs/version-patch-from-8.0.4

Release: Patch 8.0.5

CHANGELOG.md

@@ -1,3 +1,11 @@
+## 8.0.5
+
+- Addon-docs: Fix `react-dom/server` imports breaking stories and docs - [#26557](https://github.com/storybookjs/storybook/pull/26557), thanks @JReinhold!
+- Automigrations: Fix missing support for mts vite config - [#26441](https://github.com/storybookjs/storybook/pull/26441), thanks @drik98!
+- CLI: Improve Yarn berry error parsing - [#26616](https://github.com/storybookjs/storybook/pull/26616), thanks @yannbf!
+- React-Docgen: Make sure to be able to handle empty unions - [#26639](https://github.com/storybookjs/storybook/pull/26639), thanks @kasperpeulen!
+- Viewport: Fix missing style - [#26530](https://github.com/storybookjs/storybook/pull/26530), thanks @jpzwarte!
+
 ## 8.0.4
 
 - Addon Docs: Support Stencil based display names in source snippets - [#26592](https://github.com/storybookjs/storybook/pull/26592), thanks @yannbf!

code/addons/docs/src/preset.ts

@@ -1,4 +1,4 @@
-import { dirname, join } from 'path';
+import { dirname, join, isAbsolute } from 'path';
 import rehypeSlug from 'rehype-slug';
 import rehypeExternalLinks from 'rehype-external-links';
 
@@ -147,6 +147,8 @@ export const viteFinal = async (config: any, options: Options) => {
       resolve: {
         alias: {
           react,
+          // Vite doesn't respect export maps when resolving an absolute path, so we need to do that manually here
+          ...(isAbsolute(reactDom) && { 'react-dom/server': `${reactDom}/server.browser.js` }),
           'react-dom': reactDom,
           '@mdx-js/react': mdx,
           /**

code/addons/docs/template/stories/docs2/ResolvedReact.jsx

@@ -0,0 +1,28 @@
+import React, * as ReactExport from 'react';
+import * as ReactDom from 'react-dom';
+import * as ReactDomServer from 'react-dom/server';
+
+export const ResolvedReact = () => {
+  return (
+    <>
+      <p>
+        <code>react</code>:{' '}
+        <code data-testid="component-react">
+          {ReactExport.version ?? 'no version export found'}
+        </code>
+      </p>
+      <p>
+        <code>react-dom</code>:{' '}
+        <code data-testid="component-react-dom">
+          {ReactDom.version ?? 'no version export found'}
+        </code>
+      </p>
+      <p>
+        <code>react-dom/server</code>:{' '}
+        <code data-testid="component-react-dom-server">
+          {ReactDomServer.version ?? 'no version export found'}
+        </code>
+      </p>
+    </>
+  );
+};

code/addons/docs/template/stories/docs2/ResolvedReact.mdx

@@ -1,13 +1,29 @@
-import { version as reactVersion } from 'react';
-import { version as reactDomVersion } from 'react-dom';
-import { ResolvedReactVersion } from './ResolvedReactVersion';
+import { Meta } from '@storybook/blocks';
+import * as ReactExport from 'react';
+import * as ReactDom from 'react-dom';
+import * as ReactDomServer from 'react-dom/server';
+import { ResolvedReact } from './ResolvedReact';
+
+<Meta title="docs2/ResolvedReact" name="MDX"/>
+
+This doc is used to display the resolved version of React and its related packages.
+As long as `@storybook/addon-docs` is installed, `react` and `react-dom` should be available to import from and should resolve to the same version.
+
+The MDX here ensures that it works in an MDX file.
+
+- See the [autodocs](/docs/addons-docs-docs2-resolvedreact--docs) for how it resolves in autodocs.
+- See the [Story](/story/addons-docs-docs2-resolvedreact--story) for how it resolves in the actual story.
+
+**Note: There appears to be a bug in the _production_ build of `react-dom`, where it reports version `18.2.0-next-9e3b772b8-20220608` while in fact version `18.2.0` is installed.**
 
 ## In MDX
 
-<code>react</code>: <code data-testid="mdx-react">{reactVersion}</code>
+<code>react</code>: <code data-testid="mdx-react">{ReactExport.version ?? 'no version export found'}</code>
+
+<code>react-dom</code>: <code data-testid="mdx-react-dom">{ReactDom.version ?? 'no version export found'}</code>
 
-<code>react-dom</code>: <code data-testid="mdx-react-dom">{reactDomVersion}</code>
+<code>react-dom/server</code>: <code data-testid="mdx-react-dom-server">{ReactDomServer.version ?? 'no version export found'}</code>
 
-## In `ResolvedReactVersion` component
+## In `ResolvedReact` component
 
-<ResolvedReactVersion />
+<ResolvedReact />

code/addons/docs/template/stories/docs2/resolved-react.stories.ts

@@ -0,0 +1,70 @@
+import { within, expect } from '@storybook/test';
+import * as ReactExport from 'react';
+import * as ReactDom from 'react-dom';
+import * as ReactDomServer from 'react-dom/server';
+
+/**
+ * This component is used to display the resolved version of React and its related packages.
+ * As long as `@storybook/addon-docs` is installed, `react` and `react-dom` should be available to import from and should resolve to the same version.
+ *
+ * The autodocs here ensures that it also works in the generated documentation.
+ *
+ * - See the [MDX docs](/docs/addons-docs-docs2-resolvedreact--mdx) for how it resolves in MDX.
+ * - See the [Story](/story/addons-docs-docs2-resolvedreact--story) for how it resolves in the actual story.
+ *
+ * **Note: There appears to be a bug in the _production_ build of `react-dom`, where it reports version `18.2.0-next-9e3b772b8-20220608` while in fact version `18.2.0` is installed.**
+ */
+export default {
+  title: 'Docs2/ResolvedReact',
+  component: globalThis.Components.Html,
+  tags: ['autodocs'],
+  argTypes: {
+    content: { table: { disable: true } },
+  },
+  args: {
+    content: `
+      <p>
+        <code>react</code>: <code data-testid="react">${
+          ReactExport.version ?? 'no version export found'
+        }</code>
+      </p>
+      <p>
+        <code>react-dom</code>: <code data-testid="react-dom">${
+          ReactDom.version ?? 'no version export found'
+        }</code>
+      </p>
+      <p>
+        <code>react-dom/server</code>: <code data-testid="react-dom-server">${
+          ReactDomServer.version ?? 'no version export found'
+        }</code>
+      </p>
+  `,
+  },
+  parameters: {
+    docs: {
+      name: 'ResolvedReact',
+    },
+  },
+};
+
+export const Story = {
+  // This test is more or less the same as the E2E test we have for MDX and autodocs entries in addon-docs.spec.ts
+  play: async ({ canvasElement, step, parameters }: any) => {
+    const canvas = await within(canvasElement);
+
+    const actualReactVersion = (await canvas.findByTestId('react')).textContent;
+    const actualReactDomVersion = (await canvas.findByTestId('react-dom')).textContent;
+    const actualReactDomServerVersion = (await canvas.findByTestId('react-dom-server')).textContent;
+
+    step('Expect React packages to all resolve to the same version', () => {
+      // react-dom has a bug in its production build, reporting version 18.2.0-next-9e3b772b8-20220608 even though version 18.2.0 is installed.
+      expect(actualReactDomVersion!.startsWith(actualReactVersion!)).toBeTruthy();
+
+      if (parameters.renderer === 'preact') {
+        // the preact/compat alias doesn't have a version export in react-dom/server
+        return;
+      }
+      expect(actualReactDomServerVersion).toBe(actualReactVersion);
+    });
+  },
+};

code/addons/viewport/src/Tool.tsx

@@ -74,6 +74,7 @@ const flip = ({ width, height, ...styles }: ViewportStyles) => ({
 
 const ActiveViewportSize = styled.div(() => ({
   display: 'inline-flex',
+  alignItems: 'center',
 }));
 
 const ActiveViewportLabel = styled.div(({ theme }) => ({

code/e2e-tests/addon-docs.spec.ts

@@ -185,30 +185,71 @@ test.describe('addon-docs', () => {
   });
 
   test('should resolve react to the correct version', async ({ page }) => {
+    // Arrange - Navigate to MDX docs
     const sbPage = new SbPage(page);
-    await sbPage.navigateToUnattachedDocs('addons/docs/docs2', 'ResolvedReact');
+    await sbPage.navigateToStory('addons/docs/docs2/resolvedreact', 'mdx', 'docs');
     const root = sbPage.previewRoot();
 
-    let expectedReactVersion = /^18/;
+    // Arrange - Setup expectations
+    let expectedReactVersionRange = /^18/;
     if (
       templateName.includes('preact') ||
       templateName.includes('react-webpack/17') ||
       templateName.includes('react-vite/17')
     ) {
-      expectedReactVersion = /^17/;
+      expectedReactVersionRange = /^17/;
     } else if (templateName.includes('react16')) {
-      expectedReactVersion = /^16/;
+      expectedReactVersionRange = /^16/;
     }
 
+    // Arrange - Get the actual versions
     const mdxReactVersion = await root.getByTestId('mdx-react');
     const mdxReactDomVersion = await root.getByTestId('mdx-react-dom');
+    const mdxReactDomServerVersion = await root.getByTestId('mdx-react-dom-server');
     const componentReactVersion = await root.getByTestId('component-react');
     const componentReactDomVersion = await root.getByTestId('component-react-dom');
+    const componentReactDomServerVersion = await root.getByTestId('component-react-dom-server');
+
+    // Assert - The versions are in the expected range
+    await expect(mdxReactVersion).toHaveText(expectedReactVersionRange);
+    await expect(componentReactVersion).toHaveText(expectedReactVersionRange);
+    await expect(mdxReactDomVersion).toHaveText(expectedReactVersionRange);
+    await expect(componentReactDomVersion).toHaveText(expectedReactVersionRange);
+    if (!templateName.includes('preact')) {
+      // preact/compat alias doesn't have a version export in react-dom/server
+      await expect(mdxReactDomServerVersion).toHaveText(expectedReactVersionRange);
+      await expect(componentReactDomServerVersion).toHaveText(expectedReactVersionRange);
+    }
+
+    // Arrange - Navigate to autodocs
+    await sbPage.navigateToStory('addons/docs/docs2/resolvedreact', 'docs');
+
+    // Arrange - Get the actual versions
+    const autodocsReactVersion = await root.getByTestId('react');
+    const autodocsReactDomVersion = await root.getByTestId('react-dom');
+    const autodocsReactDomServerVersion = await root.getByTestId('react-dom-server');
+
+    // Assert - The versions are in the expected range
+    await expect(autodocsReactVersion).toHaveText(expectedReactVersionRange);
+    await expect(autodocsReactDomVersion).toHaveText(expectedReactVersionRange);
+    if (!templateName.includes('preact')) {
+      await expect(autodocsReactDomServerVersion).toHaveText(expectedReactVersionRange);
+    }
+
+    // Arrange - Navigate to story
+    await sbPage.navigateToStory('addons/docs/docs2/resolvedreact', 'story');
 
-    await expect(mdxReactVersion).toHaveText(expectedReactVersion);
-    await expect(mdxReactDomVersion).toHaveText(expectedReactVersion);
-    await expect(componentReactVersion).toHaveText(expectedReactVersion);
-    await expect(componentReactDomVersion).toHaveText(expectedReactVersion);
+    // Arrange - Get the actual versions
+    const storyReactVersion = await root.getByTestId('react');
+    const storyReactDomVersion = await root.getByTestId('react-dom');
+    const storyReactDomServerVersion = await root.getByTestId('react-dom-server');
+
+    // Assert - The versions are in the expected range
+    await expect(storyReactVersion).toHaveText(expectedReactVersionRange);
+    await expect(storyReactDomVersion).toHaveText(expectedReactVersionRange);
+    if (!templateName.includes('preact')) {
+      await expect(storyReactDomServerVersion).toHaveText(expectedReactVersionRange);
+    }
   });
 
   test('should have stories from multiple CSF files in autodocs', async ({ page }) => {

code/e2e-tests/util.ts

@@ -40,7 +40,7 @@ export class SbPage {
   /**
    * Visit a story by selecting it from the sidebar.
    */
-  async navigateToStory(title: string, name: string) {
+  async navigateToStory(title: string, name: string, viewMode?: 'docs' | 'story') {
     await this.openComponent(title);
 
     const titleId = toId(title);
@@ -50,11 +50,10 @@ export class SbPage {
     const storyLink = this.page.locator('*', { has: this.page.locator(`> ${storyLinkId}`) });
     await storyLink.click({ force: true });
 
-    // assert url changes
-    const viewMode = name === 'docs' ? 'docs' : 'story';
-
     await this.page.waitForURL((url) =>
-      url.search.includes(`path=/${viewMode}/${titleId}--${storyId}`)
+      url.search.includes(
+        `path=/${viewMode ?? name === 'docs' ? 'docs' : 'story'}/${titleId}--${storyId}`
+      )
     );
 
     const selected = await storyLink.getAttribute('data-selected');

code/frameworks/vue3-vite/package.json

@@ -53,7 +53,7 @@
     "find-package-json": "^1.2.0",
     "magic-string": "^0.30.0",
     "typescript": "^5.0.0",
-    "vue-component-meta": "^1.8.27",
+    "vue-component-meta": "^2.0.7",
     "vue-docgen-api": "^4.75.1"
   },
   "devDependencies": {

code/frameworks/vue3-vite/src/plugins/vue-component-meta.ts

@@ -5,8 +5,8 @@ import path from 'path';
 import type { PluginOption } from 'vite';
 import {
   TypeMeta,
-  createComponentMetaChecker,
-  createComponentMetaCheckerByJsonConfig,
+  createChecker,
+  createCheckerByJson,
   type ComponentMeta,
   type MetaCheckerOptions,
 } from 'vue-component-meta';
@@ -28,7 +28,7 @@ export async function vueComponentMeta(): Promise<PluginOption> {
   const include = /\.(vue|ts|js|tsx|jsx)$/;
   const filter = createFilter(include, exclude);
 
-  const checker = await createChecker();
+  const checker = await createCheckerWithWorkaround();
 
   return {
     name: 'storybook:vue-component-meta-plugin',
@@ -127,8 +127,10 @@ export async function vueComponentMeta(): Promise<PluginOption> {
 
 /**
  * Creates the vue-component-meta checker to use for extracting component meta/docs.
+ * Includes a workaround for projects using references in their tsconfig.json which
+ * is currently not supported by vue-component-meta.
  */
-async function createChecker() {
+async function createCheckerWithWorkaround() {
   const checkerOptions: MetaCheckerOptions = {
     forceUseTs: true,
     noDeclarations: true,
@@ -138,11 +140,7 @@ async function createChecker() {
   const projectRoot = getProjectRoot();
   const projectTsConfigPath = path.join(projectRoot, 'tsconfig.json');
 
-  const defaultChecker = createComponentMetaCheckerByJsonConfig(
-    projectRoot,
-    { include: ['**/*'] },
-    checkerOptions
-  );
+  const defaultChecker = createCheckerByJson(projectRoot, { include: ['**/*'] }, checkerOptions);
 
   // prefer the tsconfig.json file of the project to support alias resolution etc.
   if (await fileExists(projectTsConfigPath)) {
@@ -155,7 +153,7 @@ async function createChecker() {
       // TODO: paths/aliases are not resolvable, find workaround for this
       return defaultChecker;
     }
-    return createComponentMetaChecker(projectTsConfigPath, checkerOptions);
+    return createChecker(projectTsConfigPath, checkerOptions);
   }
 
   return defaultChecker;

code/lib/cli/src/automigrate/fixes/vite-config-file.ts

@@ -20,7 +20,7 @@ export const viteConfigFile = {
 
   async check({ mainConfig, packageManager, mainConfigPath }) {
     let isViteConfigFileFound = !!(await findUp(
-      ['vite.config.js', 'vite.config.mjs', 'vite.config.cjs', 'vite.config.ts'],
+      ['vite.config.js', 'vite.config.mjs', 'vite.config.cjs', 'vite.config.ts', 'vite.config.mts'],
       { cwd: mainConfigPath ? path.join(mainConfigPath, '..') : process.cwd() }
     ));
 

code/lib/cli/src/sandbox-templates.ts

@@ -429,6 +429,9 @@ const baseTemplates = {
       renderer: '@storybook/preact',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      extraDependencies: ['preact-render-to-string'],
+    },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'preact-vite/default-ts': {
@@ -439,6 +442,9 @@ const baseTemplates = {
       renderer: '@storybook/preact',
       builder: '@storybook/builder-vite',
     },
+    modifications: {
+      extraDependencies: ['preact-render-to-string'],
+    },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
   'qwik-vite/default-ts': {