GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 15:11:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

Replace opt-in ReactRoot Api flag by opt-out flag

Browse Source
This commit is contained in:
Valentin Palkovič 2022-04-05 11:24:57 +02:00
parent cd73c3004b
commit aedb6f6956
6 changed files with 77 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.circleci/config.yml
View File

@ -207,7 +207,7 @@ jobs:
name: Run E2E tests
# Do not test CRA here because it's done in PnP part
# TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 react react_new_root_api
command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 react react_legacy_root_api
no_output_timeout: 5m
- store_artifacts:
path: /tmp/cypress-record

45
app/react/src/client/preview/render.tsx
View File

@ -7,6 +7,7 @@ import React, {
Fragment,
} from 'react';
import ReactDOM, { version as reactDomVersion } from 'react-dom';
import type { Root as ReactRoot } from 'react-dom/client';
import { RenderContext } from '@storybook/store';
import { ArgsStoryFn } from '@storybook/csf';
@ -17,14 +18,8 @@ import { ReactFramework } from './types-6-0';
const { FRAMEWORK_OPTIONS } = global;
// TODO: Remove IRoot declaration as soon as @types/react v17.x is used
interface IRoot {
render(children: React.ReactChild | Iterable<React.ReactNode>): void;
unmount(): void;
}
// A map of all rendered React 18 nodes
const nodes = new Map<Element, IRoot>();
const nodes = new Map<Element, ReactRoot>();
export const render: ArgsStoryFn<ReactFramework> = (args, context) => {
const { id, component: Component } = context;
@ -37,11 +32,11 @@ export const render: ArgsStoryFn<ReactFramework> = (args, context) => {
return <Component {...args} />;
};
const renderElement = async (node: ReactElement, el: Element) =>
new Promise((resolve) => {
// Create Root Element conditionally for new React 18 Root Api
const root = getReactRoot(el);
const renderElement = async (node: ReactElement, el: Element) => {
// Create Root Element conditionally for new React 18 Root Api
const root = await getReactRoot(el);
return new Promise((resolve) => {
if (root) {
root.render(node);
setTimeout(() => {
@ -51,10 +46,18 @@ const renderElement = async (node: ReactElement, el: Element) =>
ReactDOM.render(node, el, () => resolve(null));
}
});
};
const canUseNewReactRootApi =
gte(reactDomVersion, '18.0.0') || coerce(reactDomVersion)?.version === '18.0.0';
const shouldUseNewRootApi = FRAMEWORK_OPTIONS?.legacyRootApi !== true;
const isUsingNewReactRootApi = shouldUseNewRootApi && canUseNewReactRootApi;
const unmountElement = (el: Element) => {
const root = nodes.get(el);
if (root && FRAMEWORK_OPTIONS?.newRootApi) {
if (root && isUsingNewReactRootApi) {
root.unmount();
nodes.delete(el);
} else {
@ -62,25 +65,17 @@ const unmountElement = (el: Element) => {
}
};
const canUseReactRoot =
gte(reactDomVersion, '18.0.0') || coerce(reactDomVersion)?.version === '18.0.0';
const getReactRoot = (el: Element): IRoot | null => {
if (!FRAMEWORK_OPTIONS?.newRootApi) {
const getReactRoot = async (el: Element): Promise<ReactRoot | null> => {
if (!isUsingNewReactRootApi) {
return null;
}
if (!canUseReactRoot) {
throw new Error(
"Your React version doesn't support the new React Root Api. Please use react and react-dom in version 18.x or set the storybook feature 'newRootApi' to false"
);
}
let root = nodes.get(el);
if (!root) {
// eslint-disable-next-line global-require
root = require('react-dom/client').createRoot(el) as IRoot;
const reactDomClient = await import('react-dom/client');
root = reactDomClient.createRoot(el);
nodes.set(el, root);
}

42
app/react/src/typings.d.ts vendored
View File

@ -1,2 +1,44 @@
declare module '@storybook/semver';
declare module 'global';
// TODO: Replace, as soon as @types/react-dom 17.0.14 is used
// Source: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/fb0f14b7a35cde26ffaa82e7536c062e593e9ae6/types/react-dom/client.d.ts
declare module 'react-dom/client' {
import React = require('react');
export interface HydrationOptions {
onHydrated?(suspenseInstance: Comment): void;
onDeleted?(suspenseInstance: Comment): void;
/**
* Prefix for `useId`.
*/
identifierPrefix?: string;
onRecoverableError?: (error: unknown) => void;
}
export interface RootOptions {
/**
* Prefix for `useId`.
*/
identifierPrefix?: string;
onRecoverableError?: (error: unknown) => void;
}
export interface Root {
render(children: React.ReactChild | Iterable<React.ReactNode>): void;
unmount(): void;
}
/**
* Replaces `ReactDOM.render` when the `.render` method is called and enables Concurrent Mode.
*
* @see https://reactjs.org/docs/concurrent-mode-reference.html#createroot
*/
export function createRoot(container: Element | Document | DocumentFragment | Comment, options?: RootOptions): Root;
export function hydrateRoot(
container: Element | Document | DocumentFragment | Comment,
initialChildren: React.ReactChild | Iterable<React.ReactNode>,
options?: HydrationOptions,
): Root;
}

9
app/react/types/index.ts
View File

@ -8,9 +8,12 @@ export interface StorybookConfig extends BaseConfig {
fastRefresh?: boolean;
strictMode?: boolean;
/**
* Uses React 18's new root API (ReactDOM.createRoot)
* The new root API happens to be the gateway for accessing new features of React 18 and adds out-of-the-box improvements.
* Use React's legacy root API to mount components
* @description
* React has introduced a new root API with React 18.x to enable a whole set of new features (e.g. concurrent features)
* If this flag is true, the legacy Root API is used to mount components to make it easier to migrate step by step to React 18.
* @default false
*/
newRootApi?: boolean;
legacyRootApi?: boolean;
};
}

18
docs/faq.md
View File

@ -85,24 +85,18 @@ module.exports = {
### How do I setup the new React Context Root API with Storybook?
The new [React Root API](https://reactjs.org/docs/concurrent-mode-reference.html) which was introduced in React 18 is an opt-in feature that can be used in Storybook React.
If your installed React Version equals or is higher than 18.0.0, the new React Root API is automatically used and the newest React [concurrent features](https://reactjs.org/docs/concurrent-mode-intro.html) can be used.
You can set the following properties in your `.storybook/main.js` files:
You can opt-out from the new React Root API by setting the following property in your `.storybook/main.js` file:
```js
module.exports = {
reactOptions: {
newRootApi: true,
legacyRootApi: true,
},
};
```
After enabling it, it is possible to use React's newest [concurrent features](https://reactjs.org/docs/concurrent-mode-intro.html).
<div class="aside">
💡 The new React Root API (React.createRoot) only works with React 18 and above.
</div>
### Why is there no addons channel?
A common error is that an addon tries to access the "channel", but the channel is not set. It can happen in a few different cases:
@ -117,7 +111,6 @@ A common error is that an addon tries to access the "channel", but the channel i
2. In React Native, it's a special case documented in [#1192](https://github.com/storybookjs/storybook/issues/1192)
### Why aren't Controls visible in the Canvas panel but visible in the Docs panel?
If you're adding Storybook's dependencies manually, make sure you include the [`@storybook/addon-controls`](https://www.npmjs.com/package/@storybook/addon-controls) dependency in your project and reference it in your `.storybook/main.js` as follows:
@ -153,7 +146,7 @@ With the release of version 6.0, we updated our documentation as well. That does
We're only covering versions 5.3 and 5.0 as they were important milestones for Storybook. If you want to go back in time a little more, you'll have to check the specific release in the monorepo.
| Section | Page | Current Location | Version 5.3 location | Version 5.0 location |
|------------------|-------------------------------------------|------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
| ---------------- | ----------------------------------------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Get started | Install | [See current documentation](../get-started/install.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/guides/quick-start-guide) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/guides/quick-start-guide) |
| | What's a story | [See current documentation](../get-started/whats-a-story.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
| | Browse Stories | [See current documentation](../get-started/browse-stories.md) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.3/docs/src/pages/guides) | [See versioned documentation for your framework](https://github.com/storybookjs/storybook/blob/release/5.0/docs/src/pages/guides) |
@ -213,6 +206,7 @@ We're only covering versions 5.3 and 5.0 as they were important milestones for S
| | Stories/StoriesOF format (see note below) | [See current documentation](../../lib/core/docs/storiesOf.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/formats/storiesof-api) | Non existing feature or undocumented |
| | Frameworks | [See current documentation](../api/new-frameworks.md) | Non existing feature or undocumented | Non existing feature or undocumented |
| | CLI options | [See current documentation](../api/cli-options.md) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.3/docs/src/pages/configurations/cli-options) | [See versioned documentation](https://github.com/storybookjs/storybook/tree/release/5.0/docs/src/pages/configurations/cli-options) |
<div class="aside">
With the release of version 5.3, we've updated how you can write your stories more compactly and easily. It doesn't mean that the <code>storiesOf</code> format has been removed. For the time being, we're still supporting it, and we have documentation for it. But be advised that this is bound to change in the future.
</div>
@ -380,12 +374,10 @@ export default meta;
Although valid, it introduces additional boilerplate code to the story definition. Instead, we're working towards implementing a safer mechanism based on what's currently being discussed in the following [issue](https://github.com/microsoft/TypeScript/issues/7481). Once the feature is released, we'll migrate our existing examples and documentation accordingly.
## Why is Storybook's source loader returning undefined with curried functions?
This is a known issue with Storybook. If you're interested in getting it fixed, open an issue with a [working reproduction](./contribute/how-to-reproduce) so that it can be triaged and fixed in future releases.
## Why are my args no longer displaying the default values?
Before version 6.3, unset args were set to the `argTypes.defaultValue` if specified or inferred from the component's properties (e.g., React's prop types, Angular inputs, Vue props). Starting with version 6.3, Storybook no longer infers default values but instead defines the arg's value as `undefined` when unset, allowing the framework to supply its default value.

6
lib/cli/src/repro-generators/configs.ts
View File

@ -64,15 +64,15 @@ export const react: Parameters = {
additionalDeps: ['prop-types'],
};
export const react_new_root_api: Parameters = {
export const react_legacy_root_api: Parameters = {
framework: 'react',
name: 'react_new_root_api',
name: 'react_legacy_root_api',
version: 'latest',
generator: fromDeps('react', 'react-dom'),
additionalDeps: ['prop-types'],
mainOverrides: {
reactOptions: {
newRootApi: true,
legacyRootApi: true,
},
},
};