From 092a9d380ade33573ee27aa3ee0833c1a9647adc Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 28 Nov 2023 12:06:45 +0100 Subject: [PATCH 1/5] Merge pull request #25004 from storybookjs/kasper/downgrade-testing-lib Test: Downgrade @testing-library/user-event to 14.3.0 (cherry picked from commit f304715f809bc51719689dea4a6f3d304ab81965) --- code/lib/test/package.json | 2 +- code/yarn.lock | 13 +++++++++++-- 2 files changed, 12 insertions(+), 3 deletions(-) diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 3a9ac93a2adc..d9d50e05b572 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -49,7 +49,7 @@ "@storybook/preview-api": "workspace:*", "@testing-library/dom": "^9.3.1", "@testing-library/jest-dom": "^6.1.3", - "@testing-library/user-event": "^14.4.3", + "@testing-library/user-event": "14.3.0", "@types/chai": "^4", "@vitest/expect": "^0.34.2", "@vitest/spy": "^0.34.1", diff --git a/code/yarn.lock b/code/yarn.lock index be5721edec43..ad90083b8b36 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -7697,7 +7697,7 @@ __metadata: "@storybook/preview-api": "workspace:*" "@testing-library/dom": "npm:^9.3.1" "@testing-library/jest-dom": "npm:^6.1.3" - "@testing-library/user-event": "npm:^14.4.3" + "@testing-library/user-event": "npm:14.3.0" "@types/chai": "npm:^4" "@vitest/expect": "npm:^0.34.2" "@vitest/spy": "npm:^0.34.1" @@ -8368,6 +8368,15 @@ __metadata: languageName: node linkType: hard +"@testing-library/user-event@npm:14.3.0": + version: 14.3.0 + resolution: "@testing-library/user-event@npm:14.3.0" + peerDependencies: + "@testing-library/dom": ">=7.21.4" + checksum: 8a0e708709f2510287568dff668bc7d6f5c4e7e17407452b7aa0fcf74732dccf511c63fc76ac514d753cb1f0586c1def59ba7f5245a9523715d37a8f198745d3 + languageName: node + linkType: hard + "@testing-library/user-event@npm:^13.2.1": version: 13.5.0 resolution: "@testing-library/user-event@npm:13.5.0" @@ -8379,7 +8388,7 @@ __metadata: languageName: node linkType: hard -"@testing-library/user-event@npm:^14.4.0, @testing-library/user-event@npm:^14.4.3": +"@testing-library/user-event@npm:^14.4.0": version: 14.5.1 resolution: "@testing-library/user-event@npm:14.5.1" peerDependencies: From c0306c2b452b92df1e7096b10a261dc6de2208ff Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 29 Nov 2023 10:56:35 +0100 Subject: [PATCH 2/5] Merge pull request #25030 from storybookjs/valentin/fix-react-docgen-loader-for-windows Webpack: Fix exclude regex in react-docgen-loader (cherry picked from commit 0fa30d8afbd511d54775acfc3270509d2508073a) --- .../react-webpack/src/framework-preset-react-docs.test.ts | 4 ++-- code/presets/react-webpack/src/framework-preset-react-docs.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.test.ts b/code/presets/react-webpack/src/framework-preset-react-docs.test.ts index e3dac587cb54..bfdcd7851e07 100644 --- a/code/presets/react-webpack/src/framework-preset-react-docs.test.ts +++ b/code/presets/react-webpack/src/framework-preset-react-docs.test.ts @@ -43,7 +43,7 @@ describe('framework-preset-react-docgen', () => { module: { rules: [ { - exclude: /node_modules\/.*/, + exclude: /node_modules/, loader: '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader', options: { babelOptions: { plugins: [], presets: [] } }, test: /\.(cjs|mjs|tsx?|jsx?)$/, @@ -88,7 +88,7 @@ describe('framework-preset-react-docgen', () => { module: { rules: [ { - exclude: /node_modules\/.*/, + exclude: /node_modules/, loader: '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader', options: { babelOptions: { plugins: [], presets: [] } }, test: /\.(cjs|mjs|jsx?)$/, diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.ts b/code/presets/react-webpack/src/framework-preset-react-docs.ts index 5ccaaf14ba51..4825312b90d8 100644 --- a/code/presets/react-webpack/src/framework-preset-react-docs.ts +++ b/code/presets/react-webpack/src/framework-preset-react-docs.ts @@ -38,7 +38,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( options: { babelOptions, }, - exclude: /node_modules\/.*/, + exclude: /node_modules/, }, ], }, @@ -64,7 +64,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( options: { babelOptions, }, - exclude: /node_modules\/.*/, + exclude: /node_modules/, }, ], }, From 6536867ddee511b589fbd608cb1f4394baad5b95 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Wed, 29 Nov 2023 11:06:08 +0100 Subject: [PATCH 3/5] Merge pull request #25031 from storybookjs/25029-bug-sveltekit-hot-reload-not-working-after-upgrading-to-storybook-76 SvelteKit: Fix HMR not working (cherry picked from commit 7ffc515e79853e408a8863bcccc820e0e64df997) --- .../src/plugins/mock-sveltekit-stores.ts | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts index 873ce8bf3517..b5e63f8591e2 100644 --- a/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts +++ b/code/frameworks/sveltekit/src/plugins/mock-sveltekit-stores.ts @@ -1,17 +1,15 @@ import { resolve } from 'node:path'; -import { mergeConfig, type Plugin } from 'vite'; +import type { Plugin } from 'vite'; export function mockSveltekitStores() { return { name: 'storybook:sveltekit-mock-stores', - enforce: 'post', - config: (config) => - mergeConfig(config, { - resolve: { - alias: { - $app: resolve(__dirname, '../src/mocks/app/'), - }, + config: () => ({ + resolve: { + alias: { + $app: resolve(__dirname, '../src/mocks/app/'), }, - }), + }, + }), } satisfies Plugin; } From eed9ddb24061c896e79dcd904fcc60b6738444dc Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 29 Nov 2023 11:25:09 +0100 Subject: [PATCH 4/5] Merge pull request #25032 from storybookjs/valentin/fix-app-router-in-nextjs Next.js: Fix AppRouterProvider usage (cherry picked from commit ab4e5ed536de9636eacff69a5842e7c80ce2825e) --- code/frameworks/nextjs/package.json | 12 ++++++++++++ code/frameworks/nextjs/src/dependency-map.ts | 4 ++++ .../src/routing/app-router-provider-mock.tsx | 6 ++++++ .../frameworks/nextjs/src/routing/decorator.tsx | 17 +++-------------- 4 files changed, 25 insertions(+), 14 deletions(-) create mode 100644 code/frameworks/nextjs/src/routing/app-router-provider-mock.tsx diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index dac0d282ad9a..db2d2a84196d 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -32,6 +32,16 @@ "require": "./dist/image-context.js", "import": "./dist/image-context.mjs" }, + "./dist/routing/app-router-provider": { + "types": "./dist/routing/app-router-provider.d.ts", + "require": "./dist/routing/app-router-provider.js", + "import": "./dist/routing/app-router-provider.mjs" + }, + "./dist/routing/app-router-provider-mock": { + "types": "./dist/routing/app-router-provider-mock.d.ts", + "require": "./dist/routing/app-router-provider-mock.js", + "import": "./dist/routing/app-router-provider-mock.mjs" + }, "./preset": { "types": "./dist/preset.d.ts", "require": "./dist/preset.js" @@ -161,6 +171,8 @@ "./src/images/next-future-image.tsx", "./src/images/next-legacy-image.tsx", "./src/images/next-image.tsx", + "./src/routing/app-router-provider.tsx", + "./src/routing/app-router-provider-mock.tsx", "./src/font/webpack/loader/storybook-nextjs-font-loader.ts", "./src/swc/next-swc-loader-patch.ts" ], diff --git a/code/frameworks/nextjs/src/dependency-map.ts b/code/frameworks/nextjs/src/dependency-map.ts index dd848087f3e3..2849f6b02498 100644 --- a/code/frameworks/nextjs/src/dependency-map.ts +++ b/code/frameworks/nextjs/src/dependency-map.ts @@ -13,6 +13,10 @@ const mapping: Record> = { 'next/dist/shared/lib/hooks-client-context.shared-runtime': 'next/dist/shared/lib/hooks-client-context', }, + '<13.0.0': { + '@storybook/nextjs/dist/routing/app-router-provider': + '@storybook/nextjs/dist/routing/app-router-provider-mock', + }, '<13.5.0': { 'next/dist/shared/lib/router-context.shared-runtime': 'next/dist/shared/lib/router-context', 'next/dist/shared/lib/head-manager-context.shared-runtime': diff --git a/code/frameworks/nextjs/src/routing/app-router-provider-mock.tsx b/code/frameworks/nextjs/src/routing/app-router-provider-mock.tsx new file mode 100644 index 000000000000..38682dbcdaa6 --- /dev/null +++ b/code/frameworks/nextjs/src/routing/app-router-provider-mock.tsx @@ -0,0 +1,6 @@ +import React from 'react'; + +// The mock is used for Next.js < 13, where the AppRouterProvider doesn't exist +export const AppRouterProvider: React.FC = ({ children }) => { + return <>{children}; +}; diff --git a/code/frameworks/nextjs/src/routing/decorator.tsx b/code/frameworks/nextjs/src/routing/decorator.tsx index 059e378c2521..28f227bd259c 100644 --- a/code/frameworks/nextjs/src/routing/decorator.tsx +++ b/code/frameworks/nextjs/src/routing/decorator.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; import type { Addon_StoryContext } from '@storybook/types'; import { action } from '@storybook/addon-actions'; +// @ts-expect-error Using absolute path import to 1) avoid prebundling and 2) being able to substitute the module for Next.js < 13 +// eslint-disable-next-line import/no-extraneous-dependencies +import { AppRouterProvider } from '@storybook/nextjs/dist/routing/app-router-provider'; import { PageRouterProvider } from './page-router-provider'; -import type { AppRouterProvider as TAppRouterProvider } from './app-router-provider'; import type { RouteParams, NextAppDirectory } from './types'; const defaultRouterParams: RouteParams = { @@ -17,19 +19,6 @@ export const RouterDecorator = ( const nextAppDirectory = (parameters.nextjs?.appDirectory as NextAppDirectory | undefined) ?? false; - const [AppRouterProvider, setAppRouterProvider] = React.useState< - typeof TAppRouterProvider | undefined - >(); - - React.useEffect(() => { - if (!nextAppDirectory) { - return; - } - import('./app-router-provider').then((exports) => - setAppRouterProvider(() => exports.AppRouterProvider) - ); - }, [nextAppDirectory]); - if (nextAppDirectory) { if (!AppRouterProvider) { return null; From a3255ff976e4be5dcf2a3473353cec06fc3381bf Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Wed, 29 Nov 2023 11:56:30 +0000 Subject: [PATCH 5/5] Write changelog for 7.6.1 [skip ci] --- CHANGELOG.md | 7 +++++++ code/package.json | 3 ++- docs/versions/latest.json | 7 +------ 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 28d18cedd4ca..f1861a3686b1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +## 7.6.1 + +- Next.js: Fix AppRouterProvider usage - [#25032](https://github.com/storybookjs/storybook/pull/25032), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- SvelteKit: Fix HMR not working - [#25031](https://github.com/storybookjs/storybook/pull/25031), thanks [@JReinhold](https://github.com/JReinhold)! +- Test: Downgrade @testing-library/user-event to 14.3.0 - [#25004](https://github.com/storybookjs/storybook/pull/25004), thanks [@kasperpeulen](https://github.com/kasperpeulen)! +- Webpack: Fix exclude regex in react-docgen-loader - [#25030](https://github.com/storybookjs/storybook/pull/25030), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! + ## 7.6.0 Storybook 7.6 is here with increased performance and much more! diff --git a/code/package.json b/code/package.json index d7296cadf934..da3aeb481d18 100644 --- a/code/package.json +++ b/code/package.json @@ -328,5 +328,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "7.6.1" } diff --git a/docs/versions/latest.json b/docs/versions/latest.json index bf6c9f1c4f34..c75de132ca72 100644 --- a/docs/versions/latest.json +++ b/docs/versions/latest.json @@ -1,6 +1 @@ -{ - "version": "7.6.0", - "info": { - "plain": "- 🔥 Improved SWC support\n- 🧪New test utilities and fast build mode\n- 🔼NextJS SWC + avif support & fixes\n- 🤡 SvelteKit page and navigation mocking\n- ⚛️React-docgen upgrade\n- 🎨Controls a11y, background theming, and viewports\n- 🩺CLI: The doctor is in!\n- 🚫Addons: Remove React as a peer dependency\n- 🪦Storyshots and Vue2 deprecated" - } -} +{"version":"7.6.1","info":{"plain":"- Next.js: Fix AppRouterProvider usage - [#25032](https://github.com/storybookjs/storybook/pull/25032), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- SvelteKit: Fix HMR not working - [#25031](https://github.com/storybookjs/storybook/pull/25031), thanks [@JReinhold](https://github.com/JReinhold)!\n- Test: Downgrade @testing-library/user-event to 14.3.0 - [#25004](https://github.com/storybookjs/storybook/pull/25004), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Webpack: Fix exclude regex in react-docgen-loader - [#25030](https://github.com/storybookjs/storybook/pull/25030), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!"}}