diff --git a/CHANGELOG.md b/CHANGELOG.md index d93c3b996486..f8bdc7027469 100644 --- a/CHANGELOG.md +++ b/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! diff --git a/code/addons/interactions/template/stories/unhandled-errors.stories.ts b/code/addons/interactions/template/stories/unhandled-errors.stories.ts index fcaf0144ccd4..336c44b72f3a 100644 --- a/code/addons/interactions/template/stories/unhandled-errors.stories.ts +++ b/code/addons/interactions/template/stories/unhandled-errors.stories.ts @@ -11,6 +11,7 @@ export default { }, parameters: { actions: { argTypesRegex: '^on[A-Z].*' }, + chromatic: { disable: true }, }, }; diff --git a/code/builders/builder-vite/src/assetsInclude.ts b/code/builders/builder-vite/src/assetsInclude.ts new file mode 100644 index 000000000000..b71388ea2d17 --- /dev/null +++ b/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]; + } +} diff --git a/code/builders/builder-vite/src/vite-server.ts b/code/builders/builder-vite/src/vite-server.ts index 0b1e80435027..cfd3c4051a3e 100644 --- a/code/builders/builder-vite/src/vite-server.ts +++ b/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, diff --git a/code/lib/react-dom-shim/src/preset.ts b/code/lib/react-dom-shim/src/preset.ts index e863a53262b6..fbcb353c3827 100644 --- a/code/lib/react-dom-shim/src/preset.ts +++ b/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; } diff --git a/code/package.json b/code/package.json index ba1722d02610..9628b218c825 100644 --- a/code/package.json +++ b/code/package.json @@ -295,5 +295,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.0.10" } diff --git a/code/ui/blocks/src/blocks/mdx.tsx b/code/ui/blocks/src/blocks/mdx.tsx index 453f5c9ff8ed..fe9c8c24f5c9 100644 --- a/code/ui/blocks/src/blocks/mdx.tsx +++ b/code/ui/blocks/src/blocks/mdx.tsx @@ -96,45 +96,43 @@ export const AnchorMdx: FC> = (props) => { const { href, target, children, ...rest } = props; const context = useContext(DocsContext); - if (href) { - // Enable scrolling for in-page anchors. - if (href.startsWith('#')) { - return {children}; - } - - // 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 ( - ) => { - // 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} - - ); - } + // links to external locations don't need any modifications. + if (!href || target === '_blank' || /^https?:\/\//.test(href)) { + return ; } - // External URL dont need any modification. - return ; + // Enable scrolling for in-page anchors. + if (href.startsWith('#')) { + return {children}; + } + + // 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 ( + ) => { + // 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} + + ); }; const SUPPORTED_MDX_HEADERS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const; diff --git a/docs/get-started/vue3-webpack5.md b/docs/get-started/vue3-webpack5.md index 283ba4fbe2d3..d5aa4c7913a8 100644 --- a/docs/get-started/vue3-webpack5.md +++ b/docs/get-started/vue3-webpack5.md @@ -74,9 +74,9 @@ First, install the framework: @@ -118,8 +118,8 @@ Finally, update your `.storybook/main.js|ts` to change the framework property: diff --git a/docs/snippets/angular/angular-install.pnpm.js.mdx b/docs/snippets/angular/angular-install.pnpm.js.mdx index 5467721722b2..67a20cee831c 100644 --- a/docs/snippets/angular/angular-install.pnpm.js.mdx +++ b/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 ``` diff --git a/docs/snippets/react/nextjs-install.pnpm.js.mdx b/docs/snippets/react/nextjs-install.pnpm.js.mdx index 7774ac6c9b42..246d8c3d4faa 100644 --- a/docs/snippets/react/nextjs-install.pnpm.js.mdx +++ b/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 ``` diff --git a/docs/snippets/react/react-vite-install.pnpm.js.mdx b/docs/snippets/react/react-vite-install.pnpm.js.mdx index 10b128bb0b31..60141fbb62ed 100644 --- a/docs/snippets/react/react-vite-install.pnpm.js.mdx +++ b/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 ``` diff --git a/docs/snippets/react/react-webpack5-install.pnpm.js.mdx b/docs/snippets/react/react-webpack5-install.pnpm.js.mdx index 840d64ae06c9..c954303256ac 100644 --- a/docs/snippets/react/react-webpack5-install.pnpm.js.mdx +++ b/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 ``` diff --git a/docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx b/docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx index 585bc12393ca..c45e7cb6cd33 100644 --- a/docs/snippets/svelte/svelte-vite-install.pnpm.js.mdx +++ b/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 ``` diff --git a/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx b/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx index 34cd1d6fc725..aab7b9126cfc 100644 --- a/docs/snippets/svelte/svelte-webpack5-install.pnpm.js.mdx +++ b/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 ``` diff --git a/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx b/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx index fcbd37499ee9..266855652a06 100644 --- a/docs/snippets/svelte/sveltekit-install.pnpm.js.mdx +++ b/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 ``` diff --git a/docs/snippets/vue/vue3-vite-install.pnpm.js.mdx b/docs/snippets/vue/vue3-vite-install.pnpm.js.mdx index 3c8db13088d7..26dafd70c3ad 100644 --- a/docs/snippets/vue/vue3-vite-install.pnpm.js.mdx +++ b/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 ``` diff --git a/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx b/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx index 24ce6105b49e..91cb03115e56 100644 --- a/docs/snippets/vue/vue3-webpack5-install.pnpm.js.mdx +++ b/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 ``` diff --git a/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx b/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx index c2fa67cea100..b48f36c4e8f3 100644 --- a/docs/snippets/web-components/web-components-vite-install.pnpm.js.mdx +++ b/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 ``` diff --git a/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx b/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx index 91bf902cac48..2e04a2e57537 100644 --- a/docs/snippets/web-components/web-components-webpack5-install.pnpm.js.mdx +++ b/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 ``` diff --git a/docs/versions/latest.json b/docs/versions/latest.json index 266d014199dd..d0ab025f75f6 100644 --- a/docs/versions/latest.json +++ b/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!"}} diff --git a/docs/versions/next.json b/docs/versions/next.json index 2f8990d20967..0b1db18172a4 100644 --- a/docs/versions/next.json +++ b/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!"}} diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index cd7dc643a185..b4e3b535d79d 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/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 || ''} + + \``; + mainConfig.setFieldNode(['previewHead'], babelParse(previewHeadCode).program.body[0].expression); + // Simulate Storybook Lite if (disableDocs) { const addons = mainConfig.getFieldValue(['addons']); diff --git a/scripts/tasks/test-runner-build.ts b/scripts/tasks/test-runner-build.ts index 2dd783abaf00..9cecf1672120 100644 --- a/scripts/tasks/test-runner-build.ts +++ b/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',