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

Adjust loading of new root api to newest React 18.0.0 release

Browse Source
This commit is contained in:
Valentin Palkovič 2022-04-01 16:19:05 +02:00
parent b908cf3b66
commit 544dfd58f9
3 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.circleci/config.yml
View File

@ -221,7 +221,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_18
command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 react react_new_root_api
no_output_timeout: 5m
- store_artifacts:
path: /tmp/cypress-record

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

@ -6,9 +6,11 @@ import React, {
StrictMode,
Fragment,
} from 'react';
import ReactDOM from 'react-dom';
import ReactDOM, { version as reactDomVersion } from 'react-dom';
import { RenderContext } from '@storybook/store';
import { ArgsStoryFn } from '@storybook/csf';
import { gte, coerce } from '@storybook/semver';
import { StoryContext } from './types';
import { ReactFramework } from './types-6-0';
@ -60,12 +62,15 @@ 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) {
return null;
}
if (!(ReactDOM as any).createRoot) {
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"
);
@ -74,7 +79,8 @@ const getReactRoot = (el: Element): IRoot | null => {
let root = nodes.get(el);
if (!root) {
root = (ReactDOM as any).createRoot(el) as IRoot;
// eslint-disable-next-line global-require
root = require('react-dom/client').createRoot(el) as IRoot;
nodes.set(el, root);
}

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

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