From d41a06eb25b0c9426b7bfbd34be43b79fb819397 Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Fri, 18 Oct 2019 17:10:19 -0700 Subject: [PATCH 1/2] Rename unstable_createRoot in DevTools --- packages/react-devtools-core/src/standalone.js | 2 +- packages/react-devtools-extensions/src/main.js | 2 +- packages/react-devtools-inline/README.md | 10 +++++----- packages/react-devtools-shell/src/app/index.js | 2 +- packages/react-devtools-shell/src/devtools.js | 2 +- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index 52e425cecdd1..f495ea063bc7 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -12,7 +12,7 @@ import { // $FlowFixMe Flow does not yet know about flushSync() flushSync, // $FlowFixMe Flow does not yet know about createRoot() - unstable_createRoot as createRoot, + createRoot, } from 'react-dom'; import Bridge from 'react-devtools-shared/src/bridge'; import Store from 'react-devtools-shared/src/devtools/store'; diff --git a/packages/react-devtools-extensions/src/main.js b/packages/react-devtools-extensions/src/main.js index 229eab5c6a0d..0cb5f8b9364d 100644 --- a/packages/react-devtools-extensions/src/main.js +++ b/packages/react-devtools-extensions/src/main.js @@ -1,7 +1,7 @@ /* global chrome */ import {createElement} from 'react'; -import {unstable_createRoot as createRoot, flushSync} from 'react-dom'; +import {createRoot, flushSync} from 'react-dom'; import Bridge from 'react-devtools-shared/src/bridge'; import Store from 'react-devtools-shared/src/devtools/store'; import { diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md index 2847bac8a939..d7c347efcaee 100644 --- a/packages/react-devtools-inline/README.md +++ b/packages/react-devtools-inline/README.md @@ -60,7 +60,7 @@ const contentWindow = iframe.contentWindow; const DevTools = initialize(contentWindow); ``` -3 Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using either `ReactDOM.unstable_createRoot` or `ReactDOM.unstable_createSyncRoot`. **It should not be rendered with `ReactDOM.render`.** +3 Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using either `ReactDOM.createRoot` or `ReactDOM.createSyncRoot`. **It should not be rendered with `ReactDOM.render`.** ## Examples @@ -92,8 +92,8 @@ initializeBackend(contentWindow); const DevTools = initializeFrontend(contentWindow); // interface can be rendered in the parent window at any time now... -// Be sure to use either ReactDOM.unstable_createRoot() -// or ReactDOM.unstable_createSyncRoot() to render this component. +// Be sure to use either ReactDOM.createRoot() +// or ReactDOM.createSyncRoot() to render this component. // Let the backend know the frontend is ready and listening. activateBackend(contentWindow); @@ -136,8 +136,8 @@ const { contentWindow } = iframe; // Initialize DevTools UI to listen to the iframe. // This returns a React component we can render anywhere in the main window. -// Be sure to use either ReactDOM.unstable_createRoot() -// or ReactDOM.unstable_createSyncRoot() to render this component. +// Be sure to use either ReactDOM.createRoot() +// or ReactDOM.createSyncRoot() to render this component. const DevTools = initialize(contentWindow); // Let the backend know to initialize itself. diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js index 8483be6b050a..a66dc85f6754 100644 --- a/packages/react-devtools-shell/src/app/index.js +++ b/packages/react-devtools-shell/src/app/index.js @@ -5,7 +5,7 @@ import {createElement} from 'react'; import { // $FlowFixMe Flow does not yet know about createRoot() - unstable_createRoot as createRoot, + createRoot, } from 'react-dom'; import DeeplyNestedComponents from './DeeplyNestedComponents'; import Iframe from './Iframe'; diff --git a/packages/react-devtools-shell/src/devtools.js b/packages/react-devtools-shell/src/devtools.js index 5ecd250161bd..b2336c44606d 100644 --- a/packages/react-devtools-shell/src/devtools.js +++ b/packages/react-devtools-shell/src/devtools.js @@ -2,7 +2,7 @@ import {createElement} from 'react'; // $FlowFixMe Flow does not yet know about createRoot() -import {unstable_createRoot as createRoot} from 'react-dom'; +import {createRoot} from 'react-dom'; import { activate as activateBackend, initialize as initializeBackend, From d12a60b67ec36c043c93c273f6bac95042332ab7 Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Fri, 18 Oct 2019 17:10:32 -0700 Subject: [PATCH 2/2] Rename createSyncRoot in warning --- .../__tests__/ReactDOMServerPartialHydration-test.internal.js | 2 +- packages/react-reconciler/src/ReactFiberBeginWork.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js index e0ec5e967430..b1f3d80b6677 100644 --- a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js @@ -344,7 +344,7 @@ describe('ReactDOMServerPartialHydration', () => { }).toWarnDev( 'Warning: Cannot hydrate Suspense in legacy mode. Switch from ' + 'ReactDOM.hydrate(element, container) to ' + - 'ReactDOM.unstable_createSyncRoot(container, { hydrate: true })' + + 'ReactDOM.createSyncRoot(container, { hydrate: true })' + '.render(element) or remove the Suspense components from the server ' + 'rendered components.' + '\n in Suspense (at **)' + diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js index a207b5e9ef05..dacaf2f21a3b 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.js @@ -1972,7 +1972,7 @@ function mountDehydratedSuspenseComponent( false, 'Cannot hydrate Suspense in legacy mode. Switch from ' + 'ReactDOM.hydrate(element, container) to ' + - 'ReactDOM.unstable_createSyncRoot(container, { hydrate: true })' + + 'ReactDOM.createSyncRoot(container, { hydrate: true })' + '.render(element) or remove the Suspense components from ' + 'the server rendered components.', );