Move createRoot/hydrateRoot to react-dom/client

fixtures/blocks/src/index.js

@@ -6,7 +6,7 @@
  */
 
 import React from 'react';
-import {createRoot} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import './index.css';
 import Router from './Router';
 

fixtures/concurrent/time-slicing/src/index.js

@@ -1,5 +1,5 @@
 import React, {PureComponent, unstable_startTransition} from 'react';
-import {createRoot} from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import _ from 'lodash';
 import Charts from './Charts';
 import Clock from './Clock';

fixtures/ssr/src/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {hydrateRoot} from 'react-dom';
+import {hydrateRoot} from 'react-dom/client';
 
 import App from './components/App';
 

fixtures/ssr/yarn.lock

@@ -4265,7 +4265,7 @@ longest@^1.0.1:
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
   integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
 
-loose-envify@^1.0.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -5945,6 +5945,14 @@ sax@^1.2.1, sax@~1.2.1:
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
+scheduler@^0.20.1:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 "semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"

fixtures/ssr2/src/index.js

@@ -6,7 +6,7 @@
  *
  */
 
-import {hydrateRoot} from 'react-dom';
+import {hydrateRoot} from 'react-dom/client';
 import App from './App';
 
 hydrateRoot(document, <App assets={window.assetManifest} />);

packages/react-devtools-core/src/standalone.js

@@ -11,9 +11,8 @@ import {createElement} from 'react';
 import {
   // $FlowFixMe Flow does not yet know about flushSync()
   flushSync,
-  // $FlowFixMe Flow does not yet know about createRoot()
-  createRoot,
-} from 'react-dom';
+} from 'react-dom/client';
+import {createRoot} from 'react-dom/client';
 import Bridge from 'react-devtools-shared/src/bridge';
 import Store from 'react-devtools-shared/src/devtools/store';
 import {

packages/react-devtools-core/webpack.standalone.js

@@ -64,6 +64,7 @@ module.exports = {
       react: resolve(builtModulesDir, 'react'),
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
       'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget),
+      'react-dom/client': resolve(builtModulesDir, 'react-dom/client'),
       'react-dom': resolve(builtModulesDir, 'react-dom'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),

packages/react-devtools-extensions/webpack.config.js

@@ -76,6 +76,7 @@ module.exports = {
       react: resolve(builtModulesDir, 'react'),
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
       'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget),
+      'react-dom/client': resolve(builtModulesDir, 'react-dom/client'),
       'react-dom': resolve(builtModulesDir, 'react-dom'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),

packages/react-devtools-inline/README.md

@@ -60,7 +60,7 @@ const contentWindow = iframe.contentWindow;
 const DevTools = initialize(contentWindow);
 ```
 
-<sup>3</sup> 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`.**
+<sup>3</sup> Because the DevTools interface makes use of several new React APIs (e.g. suspense, concurrent mode) it should be rendered using `ReactDOMClient.createRoot`. **It should not be rendered with `ReactDOM.render`.**
 
 ## Examples
 
@@ -110,8 +110,7 @@ const DevTools = initializeFrontend(contentWindow);
 // as setting the src of the <iframe> would load a new page (without the injected backend).
 
 // <DevTools /> interface can be rendered in the parent window at any time now...
-// Be sure to use either ReactDOM.createRoot()
-// or ReactDOM.createSyncRoot() to render this component.
+// Be sure to use ReactDOMClient.createRoot() to render this component.
 
 // Let the backend know the frontend is ready and listening.
 activateBackend(contentWindow);
@@ -154,8 +153,7 @@ 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.createRoot()
-// or ReactDOM.createSyncRoot() to render this component.
+// Be sure to use ReactDOMClient.createRoot() to render this component.
 const DevTools = initialize(contentWindow);
 
 // Let the backend know to initialize itself.

packages/react-devtools-inline/webpack.config.js

@@ -51,6 +51,7 @@ module.exports = {
   externals: {
     react: 'react',
     'react-dom': 'react-dom',
+    'react-dom/client': 'react-dom/client',
     'react-is': 'react-is',
     scheduler: 'scheduler',
   },

packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js

@@ -11,7 +11,7 @@
 
 describe('Timeline profiler', () => {
   let React;
-  let ReactDOM;
+  let ReactDOMClient;
   let Scheduler;
   let renderHelper;
   let renderRootHelper;
@@ -31,15 +31,15 @@ describe('Timeline profiler', () => {
     };
     renderRootHelper = element => {
       const container = document.createElement('div');
-      const root = ReactDOM.createRoot(container);
+      const root = ReactDOMClient.createRoot(container);
       root.render(element);
       const unmountFn = () => root.unmount();
       unmountFns.push(unmountFn);
       return unmountFn;
     };
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     Scheduler = require('scheduler');
 
     store = global.store;

packages/react-devtools-shared/src/__tests__/console-test.js

@@ -7,7 +7,7 @@
  * @flow
  */
 let React;
-let ReactDOM;
+let ReactDOMClient;
 let act;
 let fakeConsole;
 let legacyRender;
@@ -53,7 +53,7 @@ describe('console', () => {
     };
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
 
     const utils = require('./utils');
     act = utils.act;
@@ -476,7 +476,7 @@ describe('console', () => {
     global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = false;
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
@@ -515,7 +515,7 @@ describe('console', () => {
     global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = true;
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
@@ -557,7 +557,7 @@ describe('console', () => {
       null,
     );
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
@@ -605,7 +605,7 @@ describe('console', () => {
       null,
     );
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');
@@ -639,7 +639,7 @@ describe('console', () => {
     global.__REACT_DEVTOOLS_HIDE_CONSOLE_LOGS_IN_STRICT_MODE__ = false;
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     const Intermediate = ({children}) => children;
     const Parent = ({children}) => (
@@ -719,7 +719,7 @@ describe('console error', () => {
     };
 
     React = require('react');
-    ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
 
     const utils = require('./utils');
     act = utils.act;
@@ -728,7 +728,7 @@ describe('console error', () => {
 
   it('error in console log throws without interfering with logging', () => {
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
 
     function App() {
       fakeConsole.log('log');

packages/react-devtools-shared/src/__tests__/inspectedElement-test.js

@@ -16,6 +16,7 @@ import type Store from 'react-devtools-shared/src/devtools/store';
 describe('InspectedElement', () => {
   let React;
   let ReactDOM;
+  let ReactDOMClient;
   let PropTypes;
   let TestRenderer: ReactTestRenderer;
   let bridge: FrontendBridge;
@@ -52,6 +53,7 @@ describe('InspectedElement', () => {
 
     React = require('react');
     ReactDOM = require('react-dom');
+    ReactDOMClient = require('react-dom/client');
     PropTypes = require('prop-types');
     TestUtilsAct = require('jest-react').act;
     TestRenderer = utils.requireTestRenderer();
@@ -506,7 +508,7 @@ describe('InspectedElement', () => {
     });
 
     const container = document.createElement('div');
-    const root = ReactDOM.createRoot(container);
+    const root = ReactDOMClient.createRoot(container);
     await utils.actAsync(() => root.render(<Target a={1} b="abc" />));
 
     expect(targetRenderCount).toBe(1);
@@ -2091,25 +2093,25 @@ describe('InspectedElement', () => {
     expect(inspectedElement.rootType).toMatchInlineSnapshot(`"render()"`);
   });
 
-  it('should display the root type for ReactDOM.hydrateRoot', async () => {
+  it('should display the root type for ReactDOMClient.hydrateRoot', async () => {
     const Example = () => <div />;
 
     await utils.actAsync(() => {
       const container = document.createElement('div');
       container.innerHTML = '<div></div>';
-      ReactDOM.hydrateRoot(container).render(<Example />);
+      ReactDOMClient.hydrateRoot(container).render(<Example />);
     }, false);
 
     const inspectedElement = await inspectElementAtIndex(0);
     expect(inspectedElement.rootType).toMatchInlineSnapshot(`"hydrateRoot()"`);
   });
 
-  it('should display the root type for ReactDOM.createRoot', async () => {
+  it('should display the root type for ReactDOMClient.createRoot', async () => {
     const Example = () => <div />;
 
     await utils.actAsync(() => {
       const container = document.createElement('div');
-      ReactDOM.createRoot(container).render(<Example />);
+      ReactDOMClient.createRoot(container).render(<Example />);
     }, false);
 
     const inspectedElement = await inspectElementAtIndex(0);
@@ -2133,7 +2135,7 @@ describe('InspectedElement', () => {
 
     await utils.actAsync(() => {
       const container = document.createElement('div');
-      ReactDOM.createRoot(container).render(<Example />);
+      ReactDOMClient.createRoot(container).render(<Example />);
     }, false);
 
     shouldThrow = true;