Release: Patch 8.5.4

.nvmrc

@@ -1 +1,2 @@
-22.6.0
+22.13.1
+

.yarnrc.yml

@@ -8,4 +8,4 @@ nodeLinker: node-modules
 
 npmPublishAccess: public
 
-yarnPath: .yarn/releases/yarn-4.3.0.cjs
+yarnPath: .yarn/releases/yarn-4.6.0.cjs

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 8.5.4
+
+- Addon A11y: Make Vitest Axe optional - [#30442](https://github.com/storybookjs/storybook/pull/30442), thanks @valentinpalkovic!
+- Builder-Vite: Fix allowedHosts handling for custom hosts - [#30432](https://github.com/storybookjs/storybook/pull/30432), thanks @JSMike!
+- Builder-Vite: Fix resolve id warning - [#30511](https://github.com/storybookjs/storybook/pull/30511), thanks @valentinpalkovic!
+- React: Update react-docgen-typescript to fix CI hanging issues - [#30422](https://github.com/storybookjs/storybook/pull/30422), thanks @yannbf!
+
 ## 8.5.3
 
 - Preview: Add `globals` to `extract()` - [#30415](https://github.com/storybookjs/storybook/pull/30415), thanks @ndelangen!

MIGRATION.md

@@ -1,6 +1,7 @@
 <h1>Migration</h1>
 
 - [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
+  - [React Vite: react-docgen-typescript is updated](#react-vite-react-docgen-typescript-is-updated)
   - [Introducing features.developmentModeForBuild](#introducing-featuresdevelopmentmodeforbuild)
   - [Added source code panel to docs](#added-source-code-panel-to-docs)
   - [Addon-a11y: Component test integration](#addon-a11y-component-test-integration)
@@ -429,6 +430,26 @@
 
 ## From version 8.4.x to 8.5.x
 
+### React Vite: react-docgen-typescript is updated
+
+Storybook now uses [react-docgen-typescript](https://github.com/joshwooding/vite-plugin-react-docgen-typescript) v0.5.0 which updates its internal logic on how it parses files, available under an experimental feature flag `EXPERIMENTAL_useWatchProgram`, which is disabled by default.
+
+Previously, once you made changes to a component's props, the controls and args table would not update unless you restarted Storybook. With the `EXPERIMENTAL_useWatchProgram` flag, you do not need to restart Storybook anymore, however you do need to refresh the browser page. Keep in mind that this flag is experimental and also does not support the `references` field in tsconfig.json files. Depending on how big your codebase is, it might have performance issues.
+
+```ts
+// .storybook/main.ts
+const config = {
+  // ...
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+    reactDocgenTypescriptOptions: {
+      EXPERIMENTAL_useWatchProgram: true,
+    },
+  },
+};
+export default config;
+```
+
 ### Introducing features.developmentModeForBuild
 
 As part of our ongoing efforts to improve the testability and debuggability of Storybook, we are introducing a new feature flag: `developmentModeForBuild`. This feature flag allows you to set `process.env.NODE_ENV` to `development` in built Storybooks, enabling development-related optimizations that are typically disabled in production builds.

code/.yarnrc.yml

@@ -22,7 +22,6 @@ plugins:
   - path: ../.yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
     spec: '@yarnpkg/plugin-workspace-tools'
 
-# See https://github.com/nrwl/nx/issues/22177
 supportedArchitectures:
   cpu:
     - current
@@ -36,6 +35,4 @@ supportedArchitectures:
 unsafeHttpWhitelist:
   - localhost
 
-yarnPath: ../.yarn/releases/yarn-4.3.0.cjs
-# Sometimes you get a "The remote archive doesn't match the expected checksum" error, uncommenting this line will fix it
-# checksumBehavior: 'update'
+yarnPath: .yarn/releases/yarn-4.6.0.cjs

code/addons/a11y/package.json

@@ -68,8 +68,7 @@
   "dependencies": {
     "@storybook/addon-highlight": "workspace:*",
     "@storybook/test": "workspace:*",
-    "axe-core": "^4.2.0",
-    "vitest-axe": "^0.1.0"
+    "axe-core": "^4.2.0"
   },
   "devDependencies": {
     "@storybook/global": "^5.0.0",
@@ -82,7 +81,8 @@
     "react-dom": "^18.2.0",
     "react-resize-detector": "^7.1.2",
     "resize-observer-polyfill": "^1.5.1",
-    "typescript": "^5.3.2"
+    "typescript": "^5.3.2",
+    "vitest-axe": "^0.1.0"
   },
   "peerDependencies": {
     "storybook": "workspace:^"

code/addons/a11y/src/preview.tsx

@@ -1,6 +1,3 @@
-// Source: https://github.com/chaance/vitest-axe/blob/main/src/to-have-no-violations.ts
-import * as matchers from 'vitest-axe/matchers';
-
 import type { AfterEach } from 'storybook/internal/types';
 
 import { expect } from '@storybook/test';
@@ -10,7 +7,7 @@ import { A11Y_TEST_TAG } from './constants';
 import type { A11yParameters } from './params';
 import { getIsVitestRunning, getIsVitestStandaloneRun } from './utils';
 
-expect.extend(matchers);
+let vitestMatchersExtended = false;
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const experimental_afterEach: AfterEach<any> = async ({
@@ -54,6 +51,12 @@ export const experimental_afterEach: AfterEach<any> = async ({
          */
         if (getIsVitestStandaloneRun()) {
           if (hasViolations) {
+            if (!vitestMatchersExtended) {
+              const { toHaveNoViolations } = await import('vitest-axe/matchers');
+              expect.extend({ toHaveNoViolations });
+              vitestMatchersExtended = true;
+            }
+
             // @ts-expect-error - todo - fix type extension of expect from @storybook/test
             expect(result).toHaveNoViolations();
           }

code/addons/docs/package.json

@@ -106,14 +106,14 @@
     "@storybook/blocks": "workspace:*",
     "@storybook/csf-plugin": "workspace:*",
     "@storybook/react-dom-shim": "workspace:*",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
     "@mdx-js/mdx": "^3.0.0",
     "@rollup/pluginutils": "^5.0.2",
-    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rehype-external-links": "^3.0.0",

code/addons/test/src/components/GlobalErrorModal.tsx

@@ -21,7 +21,7 @@ const ModalActionBar = styled.div({
   alignItems: 'center',
 });
 
-const ModalTitle = styled.div(({ theme: { typography } }) => ({
+const ModalTitle = styled(Modal.Title)(({ theme: { typography } }) => ({
   fontSize: typography.size.s2,
   fontWeight: typography.weight.bold,
 }));

code/builders/builder-vite/input/iframe.html

@@ -64,6 +64,6 @@
     <!-- [BODY HTML SNIPPET HERE] -->
     <div id="storybook-root"></div>
     <div id="storybook-docs"></div>
-    <script type="module" src="/virtual:/@storybook/builder-vite/vite-app.js"></script>
+    <script type="module" src="virtual:@storybook/builder-vite/vite-app.js"></script>
   </body>
 </html>

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

@@ -45,7 +45,7 @@ export async function generateModernIframeScriptCode(options: Options, projectRo
 
     return `
     if (import.meta.hot) {
-      import.meta.hot.accept('${getResolvedVirtualModuleId(SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE)}', (newModule) => {
+      import.meta.hot.accept('${SB_VIRTUAL_FILES.VIRTUAL_STORIES_FILE}', (newModule) => {
       // importFn has changed so we need to patch the new one in
       window.__STORYBOOK_PREVIEW__.onStoriesChanged({ importFn: newModule.importFn });
       });

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

@@ -35,8 +35,7 @@ function iframeMiddleware(options: Options, server: ViteDevServer): Middleware {
     const indexHtml = await readFile(require.resolve('@storybook/builder-vite/input/iframe.html'), {
       encoding: 'utf8',
     });
-    const generated = await transformIframeHtml(indexHtml, options);
-    const transformed = await server.transformIndexHtml('/iframe.html', generated);
+    const transformed = await server.transformIndexHtml('/iframe.html', indexHtml);
     res.setHeader('Content-Type', 'text/html');
     res.statusCode = 200;
     res.write(transformed);

code/builders/builder-vite/src/plugins/webpack-stats-plugin.ts

@@ -63,15 +63,23 @@ export function pluginWebpackStats({ workingDir }: WebpackStatsPluginOptions): W
   /** Convert an absolute path name to a path relative to the vite root, with a starting `./` */
   function normalize(filename: string) {
     // Do not try to resolve virtual files
-    if (filename.startsWith('/virtual:')) {
-      return filename;
+    if (filename.startsWith('virtual:')) {
+      // We have to append a forward slash because otherwise we break turbosnap.
+      // As soon as the chromatic-cli supports `virtual:` id's without a starting forward slash,
+      // we can remove adding the forward slash here
+      // Reference: https://github.com/chromaui/chromatic-cli/blob/v11.25.2/node-src/lib/getDependentStoryFiles.ts#L53
+      return `/${filename}`;
     }
     // ! Maintain backwards compatibility with the old virtual file names
     // ! to ensure that the stats file doesn't change between the versions
     // ! Turbosnap is also only compatible with the old virtual file names
     // ! the old virtual file names did not start with the obligatory \0 character
     if (Object.values(SB_VIRTUAL_FILES).includes(getOriginalVirtualModuleId(filename))) {
-      return getOriginalVirtualModuleId(filename);
+      // We have to append a forward slash because otherwise we break turbosnap.
+      // As soon as the chromatic-cli supports `virtual:` id's without a starting forward slash,
+      // we can remove adding the forward slash here
+      // Reference: https://github.com/chromaui/chromatic-cli/blob/v11.25.2/node-src/lib/getDependentStoryFiles.ts#L53
+      return `/${getOriginalVirtualModuleId(filename)}`;
     }
 
     // Otherwise, we need them in the format `./path/to/file.js`.

code/builders/builder-vite/src/transform-iframe-html.ts

@@ -1,6 +1,8 @@
 import { normalizeStories } from 'storybook/internal/common';
 import type { DocsOptions, Options, TagsOptions } from 'storybook/internal/types';
 
+import { SB_VIRTUAL_FILES } from './virtual-file-names';
+
 export type PreviewHtml = string | undefined;
 
 export async function transformIframeHtml(html: string, options: Options) {
@@ -26,7 +28,7 @@ export async function transformIframeHtml(html: string, options: Options) {
     ...(build?.test?.disableBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}),
   };
 
-  return html
+  const transformedHtml = html
     .replace('[CONFIG_TYPE HERE]', configType || '')
     .replace('[LOGLEVEL HERE]', logLevel || '')
     .replace(`'[FRAMEWORK_OPTIONS HERE]'`, JSON.stringify(frameworkOptions))
@@ -46,4 +48,13 @@ export async function transformIframeHtml(html: string, options: Options) {
     .replace(`'[TAGS_OPTIONS HERE]'`, JSON.stringify(tagsOptions || {}))
     .replace('<!-- [HEAD HTML SNIPPET HERE] -->', headHtmlSnippet || '')
     .replace('<!-- [BODY HTML SNIPPET HERE] -->', bodyHtmlSnippet || '');
+
+  if (configType === 'DEVELOPMENT') {
+    return transformedHtml.replace(
+      'virtual:@storybook/builder-vite/vite-app.js',
+      `/@id/__x00__${SB_VIRTUAL_FILES.VIRTUAL_APP_FILE}`
+    );
+  }
+
+  return transformedHtml;
 }

code/builders/builder-vite/src/virtual-file-names.ts

@@ -1,8 +1,8 @@
 export const SB_VIRTUAL_FILES = {
-  VIRTUAL_APP_FILE: '/virtual:/@storybook/builder-vite/vite-app.js',
-  VIRTUAL_STORIES_FILE: '/virtual:/@storybook/builder-vite/storybook-stories.js',
-  VIRTUAL_PREVIEW_FILE: '/virtual:/@storybook/builder-vite/preview-entry.js',
-  VIRTUAL_ADDON_SETUP_FILE: '/virtual:/@storybook/builder-vite/setup-addons.js',
+  VIRTUAL_APP_FILE: 'virtual:@storybook/builder-vite/vite-app.js',
+  VIRTUAL_STORIES_FILE: 'virtual:@storybook/builder-vite/storybook-stories.js',
+  VIRTUAL_PREVIEW_FILE: 'virtual:@storybook/builder-vite/preview-entry.js',
+  VIRTUAL_ADDON_SETUP_FILE: 'virtual:@storybook/builder-vite/setup-addons.js',
 };
 
 export function getResolvedVirtualModuleId(virtualModuleId: string) {

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

@@ -1,8 +1,8 @@
 import type { Options } from 'storybook/internal/types';
 
 import type { Server } from 'http';
+import type { InlineConfig, ServerOptions } from 'vite';
 
-import { getAssetsInclude } from './assetsInclude';
 import { sanitizeEnvVars } from './envs';
 import { getOptimizeDeps } from './optimizeDeps';
 import { commonConfig } from './vite-config';
@@ -12,7 +12,7 @@ export async function createViteServer(options: Options, devServer: Server) {
 
   const commonCfg = await commonConfig(options, 'development');
 
-  const config = {
+  const config: InlineConfig & { server: ServerOptions } = {
     ...commonCfg,
     // Set up dev server
     server: {
@@ -29,6 +29,12 @@ export async function createViteServer(options: Options, devServer: Server) {
     optimizeDeps: await getOptimizeDeps(commonCfg, options),
   };
 
+  const ipRegex = /^(?:\d{1,3}\.){3}\d{1,3}$|^(?:[a-fA-F0-9]{1,4}:){7}[a-fA-F0-9]{1,4}$/;
+
+  config.server.allowedHosts =
+    commonCfg.server?.allowedHosts ??
+    (options.host && !ipRegex.test(options.host) ? [options.host.toLowerCase()] : true);
+
   const finalConfig = await presets.apply('viteFinal', config, options);
 
   const { createServer } = await import('vite');

code/core/src/components/components/Modal/Modal.stories.tsx

@@ -42,7 +42,7 @@ export const Default: Story = {
       <>
         <Modal {...props} open={isOpen}>
           <div style={{ padding: 15 }}>
-            <div>Hello world!</div>
+            <Modal.Title>Hello world!</Modal.Title>
             <Modal.Dialog.Close onClick={() => setOpen(false)}>Close</Modal.Dialog.Close>
           </div>
         </Modal>
@@ -70,7 +70,7 @@ export const FixedWidth: Story = {
       <>
         <Modal {...props} open={isOpen}>
           <div style={{ padding: 15 }}>
-            <div>Hello world!</div>
+            <Modal.Title>Hello world!</Modal.Title>
             <Modal.Dialog.Close onClick={() => setOpen(false)}>Close</Modal.Dialog.Close>
           </div>
         </Modal>
@@ -98,7 +98,7 @@ export const FixedHeight: Story = {
       <>
         <Modal {...props} open={isOpen}>
           <div style={{ padding: 15 }}>
-            <div>Hello world!</div>
+            <Modal.Title>Hello world!</Modal.Title>
             <Modal.Dialog.Close onClick={() => setOpen(false)}>Close</Modal.Dialog.Close>
           </div>
         </Modal>
@@ -127,7 +127,7 @@ export const FixedWidthAndHeight: Story = {
       <>
         <Modal {...props} open={isOpen}>
           <div style={{ padding: 15 }}>
-            <div>Hello world!</div>
+            <Modal.Title>Hello world!</Modal.Title>
             <Modal.Dialog.Close onClick={() => setOpen(false)}>Close</Modal.Dialog.Close>
           </div>
         </Modal>

code/core/src/components/components/addon-panel/addon-panel.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactElement } from 'react';
 import React, { useEffect, useRef } from 'react';
 
 const usePrevious = (value: any) => {
@@ -20,7 +20,7 @@ const useUpdate = (update: boolean, value: any) => {
 
 export interface AddonPanelProps {
   active: boolean;
-  children: ReactNode;
+  children: ReactElement;
 }
 
 export const AddonPanel = ({ active, children }: AddonPanelProps) => {

code/core/src/manager-api/modules/layout.ts

@@ -100,7 +100,7 @@ export const defaultLayoutState: SubState = {
     panelPosition: 'bottom',
     showTabs: true,
   },
-  selectedPanel: 'chromaui/addon-visual-tests/panel',
+  selectedPanel: undefined,
   theme: create(),
 };
 

code/core/src/manager-api/modules/stories.ts

@@ -345,8 +345,7 @@ export const init: ModuleFn<SubAPI, SubState> = ({
         return undefined;
       }
       if (refId) {
-        // @ts-expect-error (possibly undefined)
-        return refs[refId].index ? refs[refId].index[storyId] : undefined;
+        return refs?.[refId]?.index?.[storyId] ?? undefined;
       }
       return index ? index[storyId] : undefined;
     },

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

@@ -200,18 +200,19 @@ test.describe('addon-docs', () => {
     const root = sbPage.previewRoot();
 
     // Arrange - Setup expectations
-    let expectedReactVersionRange = /^18/;
+    let expectedReactVersionRange = /^19/;
     if (templateName.includes('react-webpack/17') || templateName.includes('react-vite/17')) {
       expectedReactVersionRange = /^17/;
     } else if (templateName.includes('react16')) {
       expectedReactVersionRange = /^16/;
     } else if (
-      templateName.includes('nextjs/default-ts') ||
-      templateName.includes('nextjs/prerelease') ||
-      templateName.includes('react-vite/prerelease') ||
-      templateName.includes('react-webpack/prerelease')
+      templateName.includes('internal/react18-webpack-babel') ||
+      templateName.includes('preact-vite/default-js') ||
+      templateName.includes('preact-vite/default-ts') ||
+      templateName.includes('react-native-web-vite/expo-ts') ||
+      templateName.includes('react-webpack/18-ts')
     ) {
-      expectedReactVersionRange = /^19/;
+      expectedReactVersionRange = /^18/;
     }
 
     // Arrange - Get the actual versions

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

@@ -56,7 +56,7 @@
     "@babel/plugin-transform-modules-commonjs": "^7.26.3",
     "@babel/preset-react": "^7.26.3",
     "@bunchtogether/vite-plugin-flow": "^1.0.2",
-    "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.2",
+    "@joshwooding/vite-plugin-react-docgen-typescript": "0.5.0",
     "@storybook/builder-vite": "workspace:*",
     "@storybook/react": "workspace:*",
     "@storybook/react-vite": "workspace:*",

code/frameworks/react-vite/package.json

@@ -57,7 +57,7 @@
     "prep": "jiti ../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.2",
+    "@joshwooding/vite-plugin-react-docgen-typescript": "0.5.0",
     "@rollup/pluginutils": "^5.0.2",
     "@storybook/builder-vite": "workspace:*",
     "@storybook/react": "workspace:*",