Skip to content

Commit

Permalink
Move createRoot/hydrateRoot to react-dom/client (#23385)
Browse files Browse the repository at this point in the history
* Move createRoot/hydrateRoot to /client

We want these APIs ideally to be imported separately from things you
might use in arbitrary components (like flushSync). Those other methods
are "isomorphic" to how the ReactDOM tree is rendered. Similar to hooks.

E.g. importing flushSync into a component that only uses it on the client
should ideally not also pull in the entry client implementation on the
server.

This also creates a nicer parity with /server where the roots are in a
separate entry point.

Unfortunately, I can't quite do this yet because we have some legacy APIs
that we plan on removing (like findDOMNode) and we also haven't implemented
flushSync using a flag like startTransition does yet.

Another problem is that we currently encourage these APIs to be aliased by
/profiling (or unstable_testing). In the future you don't have to alias
them because you can just change your roots to just import those APIs and
they'll still work with the isomorphic forms. Although we might also just
use export conditions for them.

For that all to work, I went with a different strategy for now where the
real API is in / but it comes with a warning if you use it. If you instead
import /client it disables the warning in a wrapper. That means that if you
alias / then import /client that will inturn import the alias and it'll
just work.

In a future breaking changes (likely when we switch to ESM) we can just
remove createRoot/hydrateRoot from / and move away from the aliasing
strategy.

* Update tests to import from react-dom/client

* Fix fixtures

* Update warnings

* Add test for the warning

* Update devtools

* Change order of react-dom, react-dom/client alias

I think the order matters here. The first one takes precedence.

* Require react-dom through client so it can be aliased

Co-authored-by: Andrew Clark <git@andrewclark.io>
  • Loading branch information
sebmarkbage and acdlite authored Mar 1, 2022
1 parent 75662d6 commit 1780659
Show file tree
Hide file tree
Showing 72 changed files with 648 additions and 356 deletions.
2 changes: 1 addition & 1 deletion fixtures/blocks/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
2 changes: 1 addition & 1 deletion fixtures/concurrent/time-slicing/src/index.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down
2 changes: 1 addition & 1 deletion fixtures/ssr/src/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import {hydrateRoot} from 'react-dom';
import {hydrateRoot} from 'react-dom/client';

import App from './components/App';

Expand Down
10 changes: 9 additions & 1 deletion fixtures/ssr/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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==
Expand Down Expand Up @@ -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"
Expand Down
2 changes: 1 addition & 1 deletion fixtures/ssr2/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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} />);
5 changes: 2 additions & 3 deletions packages/react-devtools-core/src/standalone.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
1 change: 1 addition & 0 deletions packages/react-devtools-core/webpack.standalone.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down
1 change: 1 addition & 0 deletions packages/react-devtools-extensions/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand Down
8 changes: 3 additions & 5 deletions packages/react-devtools-inline/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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.
Expand Down
1 change: 1 addition & 0 deletions packages/react-devtools-inline/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

describe('Timeline profiler', () => {
let React;
let ReactDOM;
let ReactDOMClient;
let Scheduler;
let renderHelper;
let renderRootHelper;
Expand All @@ -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;
Expand Down
18 changes: 9 additions & 9 deletions packages/react-devtools-shared/src/__tests__/console-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
* @flow
*/
let React;
let ReactDOM;
let ReactDOMClient;
let act;
let fakeConsole;
let legacyRender;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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}) => (
Expand Down Expand Up @@ -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;
Expand All @@ -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');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -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;
Expand Down
Loading

0 comments on commit 1780659

Please sign in to comment.