From 8c9c081394120db7cacddb07c88abfc4217f2e7e Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 16 Jan 2024 16:01:54 +0800 Subject: [PATCH] Fully switch to experimentalRSC --- MIGRATION.md | 25 ++++++++++++------- code/frameworks/nextjs/README.md | 4 +-- code/frameworks/nextjs/package.json | 2 -- code/frameworks/nextjs/src/preset.ts | 5 +--- code/frameworks/nextjs/src/rsc/decorator.tsx | 14 ----------- code/frameworks/nextjs/src/rsc/preview.tsx | 10 -------- code/lib/types/src/modules/core-common.ts | 7 ------ .../renderers/react/src/entry-preview-rsc.tsx | 6 +++-- 8 files changed, 23 insertions(+), 50 deletions(-) delete mode 100644 code/frameworks/nextjs/src/rsc/decorator.tsx delete mode 100644 code/frameworks/nextjs/src/rsc/preview.tsx diff --git a/MIGRATION.md b/MIGRATION.md index 670f89c77ac8..1438d5719b22 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -32,6 +32,7 @@ - [Next.js](#nextjs) - [Require Next.js 13.5 and up](#require-nextjs-135-and-up) - [Automatic SWC mode detection](#automatic-swc-mode-detection) + - [RSC config moved to React renderer](#rsc-config-moved-to-react-renderer) - [Angular](#angular) - [Require Angular 15 and up](#require-angular-15-and-up) - [Svelte](#svelte) @@ -66,17 +67,17 @@ - [`createChannel` from `@storybook/postmessage` and `@storybook/channel-websocket`](#createchannel-from-storybookpostmessage-and-storybookchannel-websocket) - [StoryStore and methods deprecated](#storystore-and-methods-deprecated) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) - - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) - - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) + - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) + - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) + - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) + - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) + - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) - - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) - - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) + - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) + - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - - [Addon API is more type-strict](#addon-api-is-more-type-strict) - - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) + - [Addon API is more type-strict](#addon-api-is-more-type-strict) + - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [7.0 breaking changes](#70-breaking-changes) - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) @@ -728,6 +729,12 @@ Similar to how Next.js detects if SWC should be used, Storybook will follow more - If you use Next.js 14 or higher and you don't have a .babelrc file, Storybook will use SWC to transpile your code. - Even if you have a .babelrc file, Storybook will still use SWC to transpile your code if you set the experimental `experimental.forceSwcTransforms` flag to `true` in your `next.config.js`. +##### RSC config moved to React renderer + +Storybook 7.6 introduced a new feature flag, `experimentalNextRSC`, to enable React Server Components in a Next.jsS project. It also introduced a parameter `nextjs.rsc` to selectively disable it on particular components or stories. + +These flags have been renamed to `experimentalRSC` and `react.rsc`, respectively. This is a breaking change to accommodate RSC support in other, non-Next.js frameworks. For now, `@storybook/nextjs` is the only framework that supports it, and does so experimentally. + #### Angular ##### Require Angular 15 and up diff --git a/code/frameworks/nextjs/README.md b/code/frameworks/nextjs/README.md index ab6a8fc9cad5..d1d234ab89fc 100644 --- a/code/frameworks/nextjs/README.md +++ b/code/frameworks/nextjs/README.md @@ -907,13 +907,13 @@ Storybook handles most [Typescript](https://www.typescriptlang.org/) configurati If your app uses [React Server Components (RSC)](https://nextjs.org/docs/app/building-your-application/rendering/server-components), Storybook can render them in stories in the browser. -To enable this set the `experimentalNextRSC` feature flag in your `.storybook/main.js` config: +To enable this set the `experimentalRSC` feature flag in your `.storybook/main.js` config: ```js // main.js export default { features: { - experimentalNextRSC: true, + experimentalRSC: true, }, }; ``` diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 052baf685f6c..5c7e73f7b8dc 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -42,7 +42,6 @@ "import": "./dist/font/webpack/loader/storybook-nextjs-font-loader.mjs" }, "./dist/preview.mjs": "./dist/preview.mjs", - "./dist/rsc/preview.mjs": "./dist/rsc/preview.mjs", "./next-image-loader-stub.js": { "types": "./dist/next-image-loader-stub.d.ts", "require": "./dist/next-image-loader-stub.js", @@ -164,7 +163,6 @@ "./src/images/next-legacy-image.tsx", "./src/images/next-image.tsx", "./src/font/webpack/loader/storybook-nextjs-font-loader.ts", - "./src/rsc/preview.tsx", "./src/rsc/server-only.ts", "./src/swc/next-swc-loader-patch.ts" ], diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index a8360cc634da..3d58706ad2b4 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -76,9 +76,6 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = ( ) => { const nextDir = dirname(require.resolve('@storybook/nextjs/package.json')); const result = [...entry, join(nextDir, 'dist/preview.mjs')]; - if (features?.experimentalNextRSC) { - result.unshift(join(nextDir, 'dist/rsc/preview.mjs')); - } return result; }; @@ -170,7 +167,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, configureFastRefresh(baseConfig); } - if (options.features?.experimentalNextRSC || options.features?.experimentalRSC) { + if (options.features?.experimentalRSC) { configureRSC(baseConfig); } diff --git a/code/frameworks/nextjs/src/rsc/decorator.tsx b/code/frameworks/nextjs/src/rsc/decorator.tsx deleted file mode 100644 index 73b7e7b4d817..000000000000 --- a/code/frameworks/nextjs/src/rsc/decorator.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react'; -import type { StoryContext } from '@storybook/react'; - -export const ServerComponentDecorator = ( - Story: React.FC, - { parameters }: StoryContext -): React.ReactNode => - parameters?.nextjs?.rsc ? ( - - - - ) : ( - - ); diff --git a/code/frameworks/nextjs/src/rsc/preview.tsx b/code/frameworks/nextjs/src/rsc/preview.tsx deleted file mode 100644 index a26737ec1e06..000000000000 --- a/code/frameworks/nextjs/src/rsc/preview.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import type { Addon_DecoratorFunction } from '@storybook/types'; -import { ServerComponentDecorator } from './decorator'; - -export const decorators: Addon_DecoratorFunction[] = [ServerComponentDecorator]; - -export const parameters = { - nextjs: { - rsc: true, - }, -}; diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index dd178258c61f..9e254a75a8a1 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -372,13 +372,6 @@ export interface StorybookConfigRaw { */ disallowImplicitActionsInRenderV8?: boolean; - /** - * Enable asynchronous component rendering in NextJS framework - * - * @deprecated use `experimentalRSC` instead - */ - experimentalNextRSC?: boolean; - /** * Enable asynchronous component rendering in React renderer */ diff --git a/code/renderers/react/src/entry-preview-rsc.tsx b/code/renderers/react/src/entry-preview-rsc.tsx index 2d8fbd103721..96b04ab996ba 100644 --- a/code/renderers/react/src/entry-preview-rsc.tsx +++ b/code/renderers/react/src/entry-preview-rsc.tsx @@ -9,8 +9,10 @@ export const ServerComponentDecorator = ( ): React.ReactNode => { if (!parameters?.react?.rsc) return ; - if (semver.major(React.version) < 18 || semver.minor(React.version) < 3) { - throw new Error('React Server Components require React 18.3'); + const major = semver.major(React.version); + const minor = semver.minor(React.version); + if (major < 18 || (major === 18 && minor < 3)) { + throw new Error('React Server Components require React >= 18.3'); } return (