From 5629f673f3d1a2fc69c3e7c1a4b568497745e516 Mon Sep 17 00:00:00 2001
From: Sebastian Markbage <sebastian@calyptus.eu>
Date: Mon, 28 Feb 2022 19:05:11 -0500
Subject: [PATCH] Update devtools

---
 packages/react-devtools-inline/README.md          | 8 +++-----
 packages/react-devtools-shell/src/app/index.js    | 8 ++------
 packages/react-devtools-shell/src/e2e/app.js      | 4 ++--
 packages/react-devtools-shell/src/e2e/devtools.js | 3 ++-
 packages/react-devtools-shell/webpack.config.js   | 1 +
 packages/react-dom/client.js                      | 4 ++--
 scripts/shared/inlinedHostConfigs.js              | 4 ++++
 7 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/packages/react-devtools-inline/README.md b/packages/react-devtools-inline/README.md
index fe071633528c6..53edee429bd02 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);
 ```
 
-<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.
diff --git a/packages/react-devtools-shell/src/app/index.js b/packages/react-devtools-shell/src/app/index.js
index f949b8598f48a..b00ea8ad6e90d 100644
--- a/packages/react-devtools-shell/src/app/index.js
+++ b/packages/react-devtools-shell/src/app/index.js
@@ -3,12 +3,8 @@
 // This test harness mounts each test app as a separate root to test multi-root applications.
 
 import {createElement} from 'react';
-import {
-  // $FlowFixMe Flow does not yet know about createRoot()
-  createRoot,
-  render,
-  unmountComponentAtNode,
-} from 'react-dom';
+import {createRoot} from 'react-dom/client';
+import {render, unmountComponentAtNode} from 'react-dom';
 import DeeplyNestedComponents from './DeeplyNestedComponents';
 import Iframe from './Iframe';
 import EditableProps from './EditableProps';
diff --git a/packages/react-devtools-shell/src/e2e/app.js b/packages/react-devtools-shell/src/e2e/app.js
index a3885e9331361..71f33f9044873 100644
--- a/packages/react-devtools-shell/src/e2e/app.js
+++ b/packages/react-devtools-shell/src/e2e/app.js
@@ -4,6 +4,7 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 
 const container = document.createElement('div');
 
@@ -13,8 +14,7 @@ const container = document.createElement('div');
 // so that it can load things other than just ToDoList.
 const App = require('./apps/ListApp').default;
 
-// $FlowFixMe Flow doesn't know about createRoot() yet.
-const root = ReactDOM.createRoot(container);
+const root = ReactDOMClient.createRoot(container);
 root.render(<App />);
 
 // ReactDOM Test Selector APIs used by Playwright e2e tests
diff --git a/packages/react-devtools-shell/src/e2e/devtools.js b/packages/react-devtools-shell/src/e2e/devtools.js
index 5665be4c5f130..059d330e83c95 100644
--- a/packages/react-devtools-shell/src/e2e/devtools.js
+++ b/packages/react-devtools-shell/src/e2e/devtools.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import * as ReactDOMClient from 'react-dom/client';
 import {
   activate as activateBackend,
   initialize as initializeBackend,
@@ -33,7 +34,7 @@ function init(appIframe, devtoolsContainer, appSource) {
 
   inject(contentDocument, appSource, () => {
     // $FlowFixMe Flow doesn't know about createRoot() yet.
-    ReactDOM.createRoot(devtoolsContainer).render(
+    ReactDOMClient.createRoot(devtoolsContainer).render(
       <DevTools
         hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
         showTabBar={true}
diff --git a/packages/react-devtools-shell/webpack.config.js b/packages/react-devtools-shell/webpack.config.js
index 496bdabd6b761..cb710bb48cc41 100644
--- a/packages/react-devtools-shell/webpack.config.js
+++ b/packages/react-devtools-shell/webpack.config.js
@@ -61,6 +61,7 @@ const config = {
       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
       'react-devtools-feature-flags': resolveFeatureFlags('shell'),
       'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
+      'react-dom/client': resolve(builtModulesDir, 'react-dom/client'),
       'react-is': resolve(builtModulesDir, 'react-is'),
       scheduler: resolve(builtModulesDir, 'scheduler'),
     },
diff --git a/packages/react-dom/client.js b/packages/react-dom/client.js
index df179503866f5..694b75eb1e5f3 100644
--- a/packages/react-dom/client.js
+++ b/packages/react-dom/client.js
@@ -25,7 +25,7 @@ import {
 
 export function createRoot(
   container: Container,
-  options: CreateRootOptions,
+  options?: CreateRootOptions,
 ): RootType {
   if (__DEV__) {
     Internals.usingClientEntryPoint = true;
@@ -42,7 +42,7 @@ export function createRoot(
 export function hydrateRoot(
   container: Container,
   children: ReactNodeList,
-  options: HydrateRootOptions,
+  options?: HydrateRootOptions,
 ): RootType {
   if (__DEV__) {
     Internals.usingClientEntryPoint = true;
diff --git a/scripts/shared/inlinedHostConfigs.js b/scripts/shared/inlinedHostConfigs.js
index b2b9639505a7b..39836d98bef2a 100644
--- a/scripts/shared/inlinedHostConfigs.js
+++ b/scripts/shared/inlinedHostConfigs.js
@@ -18,12 +18,14 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/client',
       'react-dom/src/server/ReactDOMFizzServerNode.js', // react-dom/server.node
       'react-server-dom-webpack',
       'react-server-dom-webpack/writer',
       'react-server-dom-webpack/writer.node.server',
       'react-server-dom-webpack/src/ReactFlightDOMServerNode.js', // react-server-dom-webpack/writer.node.server
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
+      'react-devtools-shell',
       'react-interactions',
     ],
     isFlowTyped: true,
@@ -40,12 +42,14 @@ module.exports = [
     ],
     paths: [
       'react-dom',
+      'react-dom/client',
       'react-dom/unstable_testing',
       'react-dom/src/server/ReactDOMFizzServerBrowser.js', // react-dom/server.browser
       'react-server-dom-webpack',
       'react-server-dom-webpack/writer.browser.server',
       'react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js', // react-server-dom-webpack/writer.browser.server
       'react-client/src/ReactFlightClientStream.js', // We can only type check this in streaming configurations.
+      'react-devtools-shell',
     ],
     isFlowTyped: true,
     isServerSupported: true,