Release: Patch 8.0.10

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 8.0.10
+
+- MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!
+- React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!
+- Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!
+
 ## 8.0.9
 
 - Addon-docs: Fix MDX compilation when using `@vitejs/plugin-react-swc` with plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!

code/addons/interactions/template/stories/unhandled-errors.stories.ts

@@ -11,6 +11,7 @@ export default {
  },
  parameters: {
  actions: { argTypesRegex: '^on[A-Z].*' },
+ chromatic: { disable: true },
  },
 };
 

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

@@ -0,0 +1,15 @@
+import type { InlineConfig as ViteInlineConfig } from 'vite';
+
+export function getAssetsInclude(config: ViteInlineConfig, newPath: string[]): (string | RegExp)[] {
+ const { assetsInclude } = config;
+
+ if (!assetsInclude) {
+ return newPath;
+ }
+
+ if (Array.isArray(assetsInclude)) {
+ return [...assetsInclude, ...newPath];
+ } else {
+ return [assetsInclude, ...newPath];
+ }
+}

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

@@ -3,6 +3,7 @@ import type { Options } from '@storybook/types';
 import { commonConfig } from './vite-config';
 import { getOptimizeDeps } from './optimizeDeps';
 import { sanitizeEnvVars } from './envs';
+import { getAssetsInclude } from './assetsInclude';
 
 export async function createViteServer(options: Options, devServer: Server) {
  const { presets } = options;
@@ -12,7 +13,7 @@ export async function createViteServer(options: Options, devServer: Server) {
  const config = {
  ...commonCfg,
  // Needed in Vite 5: https://github.com/storybookjs/storybook/issues/25256
- assetsInclude: ['/sb-preview/**'],
+ assetsInclude: getAssetsInclude(commonCfg, ['/sb-preview/**']),
  // Set up dev server
  server: {
  middlewareMode: true,

code/lib/react-dom-shim/src/preset.ts

@@ -6,7 +6,7 @@ import { readFile } from 'fs/promises';
  * Get react-dom version from the resolvedReact preset, which points to either
  * a root react-dom dependency or the react-dom dependency shipped with addon-docs
  */
-const getIsReactVersion18 = async (options: Options) => {
+const getIsReactVersion18or19 = async (options: Options) => {
  const { legacyRootApi } =
  (await options.presets.apply<{ legacyRootApi?: boolean } | null>('frameworkOptions')) || {};
 
@@ -24,11 +24,11 @@ const getIsReactVersion18 = async (options: Options) => {
  }
 
  const { version } = JSON.parse(await readFile(join(reactDom, 'package.json'), 'utf-8'));
- return version.startsWith('18') || version.startsWith('0.0.0');
+ return version.startsWith('18') || version.startsWith('19') || version.startsWith('0.0.0');
 };
 
 export const webpackFinal = async (config: any, options: Options) => {
- const isReactVersion18 = await getIsReactVersion18(options);
+ const isReactVersion18 = await getIsReactVersion18or19(options);
  if (isReactVersion18) {
  return config;
  }
@@ -46,7 +46,7 @@ export const webpackFinal = async (config: any, options: Options) => {
 };
 
 export const viteFinal = async (config: any, options: Options) => {
- const isReactVersion18 = await getIsReactVersion18(options);
+ const isReactVersion18 = await getIsReactVersion18or19(options);
  if (isReactVersion18) {
  return config;
  }

code/package.json

@@ -295,5 +295,6 @@
  "Dependency Upgrades"
  ]
  ]
- }
+ },
+ "deferredNextVersion": "8.0.10"
 }

code/ui/blocks/src/blocks/mdx.tsx

@@ -96,45 +96,43 @@ export const AnchorMdx: FC<PropsWithChildren<AnchorMdxProps>> = (props) => {
  const { href, target, children, ...rest } = props;
  const context = useContext(DocsContext);
 
- if (href) {
- // Enable scrolling for in-page anchors.
- if (href.startsWith('#')) {
- return <AnchorInPage hash={href}>{children}</AnchorInPage>;
- }
-
- // Links to other pages of SB should use the base URL of the top level iframe instead of the base URL of the preview iframe.
- if (target !== '_blank' && !href.startsWith('https://')) {
- return (
- <A
- href={href}
- onClick={(event: MouseEvent<HTMLAnchorElement>) => {
- // Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
- const LEFT_BUTTON = 0;
- const isLeftClick =
- event.button === LEFT_BUTTON &&
- !event.altKey &&
- !event.ctrlKey &&
- !event.metaKey &&
- !event.shiftKey;
-
- if (isLeftClick) {
- event.preventDefault();
- // use the A element's href, which has been modified for
- // local paths without a `?path=` query param prefix
- navigate(context, event.currentTarget.getAttribute('href'));
- }
- }}
- target={target}
- {...rest}
- >
- {children}
- </A>
- );
- }
+ // links to external locations don't need any modifications.
+ if (!href || target === '_blank' || /^https?:\/\//.test(href)) {
+ return <A {...props} />;
  }
 
- // External URL dont need any modification.
- return <A {...props} />;
+ // Enable scrolling for in-page anchors.
+ if (href.startsWith('#')) {
+ return <AnchorInPage hash={href}>{children}</AnchorInPage>;
+ }
+
+ // Links to other pages of SB should use the base URL of the top level iframe instead of the base URL of the preview iframe.
+ return (
+ <A
+ href={href}
+ onClick={(event: MouseEvent<HTMLAnchorElement>) => {
+ // Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
+ const LEFT_BUTTON = 0;
+ const isLeftClick =
+ event.button === LEFT_BUTTON &&
+ !event.altKey &&
+ !event.ctrlKey &&
+ !event.metaKey &&
+ !event.shiftKey;
+
+ if (isLeftClick) {
+ event.preventDefault();
+ // use the A element's href, which has been modified for
+ // local paths without a `?path=` query param prefix
+ navigate(context, event.currentTarget.getAttribute('href'));
+ }
+ }}
+ target={target}
+ {...rest}
+ >
+ {children}
+ </A>
+ );
 };
 
 const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const;

docs/get-started/vue3-webpack5.md

@@ -74,9 +74,9 @@ First, install the framework:
 
 <CodeSnippets
  paths={[
- 'vue/vue-webpack5-install.npm.js.mdx',
- 'vue/vue-webpack5-install.pnpm.js.mdx',
- 'vue/vue-webpack5-install.yarn.js.mdx'
+ 'vue/vue3-webpack5-install.npm.js.mdx',
+ 'vue/vue3-webpack5-install.pnpm.js.mdx',
+ 'vue/vue3-webpack5-install.yarn.js.mdx'
  ]}
 />
 
@@ -118,8 +118,8 @@ Finally, update your `.storybook/main.js|ts` to change the framework property:
 
 <CodeSnippets
  paths={[
- 'vue/vue-webpack5-add-framework.js.mdx',
- 'vue/vue-webpack5-add-framework.ts.mdx'
+ 'vue/vue3-webpack5-add-framework.js.mdx',
+ 'vue/vue3-webpack5-add-framework.ts.mdx'
  ]}
 />
 

docs/snippets/angular/angular-install.pnpm.js.mdx

@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/angular
+pnpm add --save-dev @storybook/angular
 ```

docs/snippets/react/nextjs-install.pnpm.js.mdx

@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/nextjs
+pnpm add --save-dev @storybook/nextjs
 ```

docs/snippets/react/react-vite-install.pnpm.js.mdx

@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/react-vite
+pnpm add --save-dev @storybook/react-vite
 ```

docs/snippets/react/react-webpack5-install.pnpm.js.mdx

@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/react-webpack5
+pnpm add --save-dev @storybook/react-webpack5
 ```

docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx

@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/svelte-vite
+pnpm add --save-dev @storybook/svelte-vite
 ```

docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx

@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/svelte-webpack5
+pnpm add --save-dev @storybook/svelte-webpack5
 ```

docs/snippets/svelte/sveltekit-install.pnpm.js.mdx

@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/sveltekit
+pnpm add --save-dev @storybook/sveltekit
 ```

docs/snippets/vue/vue3-vite-install.pnpm.js.mdx

@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/vue3-vite
+pnpm add --save-dev @storybook/vue3-vite
 ```

docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx

@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/vue3-webpack5
+pnpm add --save-dev @storybook/vue3-webpack5
 ```

docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx

@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/web-components-vite
+pnpm add --save-dev @storybook/web-components-vite
 ```

docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx

@@ -1,3 +1,3 @@
 ```shell
-pnpm install --save-dev @storybook/web-components-webpack5
+pnpm add --save-dev @storybook/web-components-webpack5
 ```

docs/versions/latest.json

@@ -1 +1 @@
-{"version":"8.0.9","info":{"plain":"- Addon-docs: Fix MDX compilation when using `@vitejs/plugin-react-swc` with plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!\n- CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen!\n- Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf!\n- Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695!\n- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!\n- Nextjs: Support next 14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf!\n- Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!\n- UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold!"}}
+{"version":"8.0.10","info":{"plain":"- MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!\n- React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!\n- Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!"}}

docs/versions/next.json

@@ -1 +1 @@
-{"version":"8.1.0-alpha.7","info":{"plain":"- CLI: Add --config-dir flag to add command - [#26771](https://github.com/storybookjs/storybook/pull/26771), thanks @eric-blue!\n- CLI: Add Visual Tests addon install auto-migration when upgrading to 8.0.x - [#26766](https://github.com/storybookjs/storybook/pull/26766), thanks @ndelangen!\n- Controls: Add Channels API to search for files in the project root - [#26726](https://github.com/storybookjs/storybook/pull/26726), thanks @valentinpalkovic!\n- Test: Make spies reactive so that they can be logged by addon-actions - [#26740](https://github.com/storybookjs/storybook/pull/26740), thanks @kasperpeulen!\n- Vue: Disable controls for events, slots, and expose - [#26751](https://github.com/storybookjs/storybook/pull/26751), thanks @shilman!\n- Webpack: Bump webpack-dev-middleware to patch high security issue - [#26655](https://github.com/storybookjs/storybook/pull/26655), thanks @jwilliams-met!"}}
+{"version":"8.1.0-alpha.8","info":{"plain":"- Addon-actions: Fix falsy args printing as object - 22163 - [#26917](https://github.com/storybookjs/storybook/pull/26917), thanks @Fatcat560!\n- Addon-docs: Fix MDX compilation with `@vitejs/plugin-react-swc` and plugins - [#26837](https://github.com/storybookjs/storybook/pull/26837), thanks @JReinhold!\n- Automigration: Fix name of VTA addon - [#26816](https://github.com/storybookjs/storybook/pull/26816), thanks @valentinpalkovic!\n- Blocks: Add `of` prop to `Subtitle` - [#22552](https://github.com/storybookjs/storybook/pull/22552), thanks @joaonunomota!\n- Blocks: Add `of` prop to `Title` - [#23728](https://github.com/storybookjs/storybook/pull/23728), thanks @Sidnioulz!\n- CSF: Fix typings for control and other properties of argTypes - [#26824](https://github.com/storybookjs/storybook/pull/26824), thanks @kasperpeulen!\n- Controls: Added server channel to create a new story - [#26769](https://github.com/storybookjs/storybook/pull/26769), thanks @valentinpalkovic!\n- Controls: Fix crashing when docgen extraction partially fails - [#26862](https://github.com/storybookjs/storybook/pull/26862), thanks @yannbf!\n- Core: Drop unneeded `UPDATE_STORY_ARGS` which was for SSv6 - [#25993](https://github.com/storybookjs/storybook/pull/25993), thanks @tmeasday!\n- Core: Ensure that simultaneous onStoriesChanged don't clobber each other - [#26882](https://github.com/storybookjs/storybook/pull/26882), thanks @tmeasday!\n- Core: Fix filters not being applied in WebKit - [#26949](https://github.com/storybookjs/storybook/pull/26949), thanks @JReinhold!\n- Core: Implement file formatter - [#26809](https://github.com/storybookjs/storybook/pull/26809), thanks @valentinpalkovic!\n- Core: Save from controls - [#26827](https://github.com/storybookjs/storybook/pull/26827), thanks @ndelangen!\n- Dependencies: Upgrade @storybook/csf to 0.1.5 - [#26958](https://github.com/storybookjs/storybook/pull/26958), thanks @Cherry!\n- Doc Tools: Signature Type Error Handling - [#26774](https://github.com/storybookjs/storybook/pull/26774), thanks @ethriel3695!\n- Docs: Fix providerImportSource extension - [#26868](https://github.com/storybookjs/storybook/pull/26868), thanks @bashmish!\n- MDX: Don't transform `http://` links - [#26488](https://github.com/storybookjs/storybook/pull/26488), thanks @JReinhold!\n- Next.js: Move sharp into optional deps - [#26787](https://github.com/storybookjs/storybook/pull/26787), thanks @shuta13!\n- Next.js: Support v14.2 useParams functionality - [#26874](https://github.com/storybookjs/storybook/pull/26874), thanks @yannbf!\n- Nextjs: Implement next redirect and the RedirectBoundary - [#26886](https://github.com/storybookjs/storybook/pull/26886), thanks @kasperpeulen!\n- Portable Stories: Warn when rendering stories without cleaning up first - [#27008](https://github.com/storybookjs/storybook/pull/27008), thanks @JReinhold!\n- React: Support v19 in `react-dom-shim` - [#26898](https://github.com/storybookjs/storybook/pull/26898), thanks @Tobbe!\n- Revert \\\"Nextjs: Implement next redirect and the RedirectBoundary\\\" - [#27025](https://github.com/storybookjs/storybook/pull/27025), thanks @JReinhold!\n- SfC: Implement new feature to create new story files - [#26875](https://github.com/storybookjs/storybook/pull/26875), thanks @valentinpalkovic!\n- Test: Remove chai as dependency of @storybook/test - [#26852](https://github.com/storybookjs/storybook/pull/26852), thanks @kasperpeulen!\n- Test: Support module mocking with conditional subpath imports in `package.json` - [#26688](https://github.com/storybookjs/storybook/pull/26688), thanks @kasperpeulen!\n- UI: Fix not re-rendering tabs on state change - [#26899](https://github.com/storybookjs/storybook/pull/26899), thanks @lifeiscontent!\n- UI: Fix sidebar search hanging when selecting a story in touch mode - [#26807](https://github.com/storybookjs/storybook/pull/26807), thanks @JReinhold!\n- Vite: Merge assetsInclude property with Storybook default values - [#26860](https://github.com/storybookjs/storybook/pull/26860), thanks @yuemori!"}}

scripts/tasks/sandbox-parts.ts

@@ -533,6 +533,32 @@ export const extendMain: Task['run'] = async ({ template, sandboxDir }, { disabl
 
  Object.entries(configToAdd).forEach(([field, value]) => mainConfig.setFieldValue([field], value));
 
+ const previewHeadCode = `
+ (head) => \`
+ \${head}
+ ${templateConfig.previewHead || ''}
+ <style>
+ /* explicitly set monospace font stack to workaround inconsistent fonts in Chromatic */
+ pre, code, kbd, samp {
+ font-family:
+ ui-monospace,
+ Menlo,
+ Monaco,
+ "Cascadia Mono",
+ "Segoe UI Mono",
+ "Roboto Mono",
+ "Oxygen Mono",
+ "Ubuntu Monospace",
+ "Source Code Pro",
+ "Fira Mono",
+ "Droid Sans Mono",
+ "Courier New",
+ monospace;
+ }
+ </style>
+ \``;
+ mainConfig.setFieldNode(['previewHead'], babelParse(previewHeadCode).program.body[0].expression);
+
  // Simulate Storybook Lite
  if (disableDocs) {
  const addons = mainConfig.getFieldValue(['addons']);

scripts/tasks/test-runner-build.ts

@@ -13,7 +13,7 @@ export const testRunnerBuild: Task & { port: number } = {
  async run({ sandboxDir, junitFilename }, { dryRun, debug }) {
  const execOptions = { cwd: sandboxDir };
  const flags = [
- `--url http://localhost:${this.port}`,
+ `--url http://127.0.0.1:${this.port}`,
  '--junit',
  '--maxWorkers=2',
  '--failOnConsole',