Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[react-dom] move all client code to react-dom/client #28271

Merged
merged 2 commits into from
Apr 24, 2024
Merged

[react-dom] move all client code to react-dom/client #28271

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4ac97cc
Move client only exports to `react-dom/client`
gnoff Nov 30, 2023
223ea80
Now that react-dom/client is a separate build there are additional in…
gnoff Apr 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2,368 changes: 1,204 additions & 1,164 deletions packages/react-devtools-shared/src/__tests__/TimelineProfiler-test.js
View file
Open in desktop

Large diffs are not rendered by default.

70 changes: 35 additions & 35 deletions packages/react-devtools-shared/src/__tests__/preprocessData-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -841,83 +841,83 @@ describe('Timeline profiler', () => {
{
"batchUID": 0,
"depth": 0,
"duration": 0.012,
"duration": 0.014,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.006,
"timestamp": 0.008,
"type": "render-idle",
},
{
"batchUID": 0,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.006,
"timestamp": 0.008,
"type": "render",
},
{
"batchUID": 0,
"depth": 0,
"duration": 0.008,
"duration": 0.010,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.01,
"timestamp": 0.012,
"type": "commit",
},
{
"batchUID": 0,
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.016,
"timestamp": 0.02,
"type": "layout-effects",
},
{
"batchUID": 0,
"depth": 0,
"duration": 0.004,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.019,
"timestamp": 0.023,
"type": "passive-effects",
},
],
1 => [
{
"batchUID": 1,
"depth": 0,
"duration": 0.012,
"duration": 0.014,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.024,
"timestamp": 0.028,
"type": "render-idle",
},
{
"batchUID": 1,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.024,
"timestamp": 0.028,
"type": "render",
},
{
"batchUID": 1,
"depth": 0,
"duration": 0.008,
"duration": 0.010,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.028,
"timestamp": 0.032,
"type": "commit",
},
{
"batchUID": 1,
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.034,
"timestamp": 0.04,
"type": "layout-effects",
},
{
"batchUID": 1,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.037,
"timestamp": 0.043,
"type": "passive-effects",
},
],
Expand All @@ -926,33 +926,33 @@ describe('Timeline profiler', () => {
{
"componentName": "App",
"duration": 0.001,
"timestamp": 0.007,
"timestamp": 0.009,
"type": "render",
"warning": null,
},
{
"componentName": "App",
"duration": 0.002,
"timestamp": 0.02,
"timestamp": 0.024,
"type": "passive-effect-mount",
"warning": null,
},
{
"componentName": "App",
"duration": 0.001,
"timestamp": 0.025,
"timestamp": 0.029,
"type": "render",
"warning": null,
},
{
"componentName": "App",
"duration": 0.001,
"timestamp": 0.038,
"timestamp": 0.044,
"type": "passive-effect-mount",
"warning": null,
},
],
"duration": 0.04,
"duration": 0.046,
"flamechart": [],
"internalModuleSourceToRanges": Map {
undefined => [
Expand Down Expand Up @@ -1015,81 +1015,81 @@ describe('Timeline profiler', () => {
{
"batchUID": 0,
"depth": 0,
"duration": 0.012,
"duration": 0.014,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.006,
"timestamp": 0.008,
"type": "render-idle",
},
{
"batchUID": 0,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.006,
"timestamp": 0.008,
"type": "render",
},
{
"batchUID": 0,
"depth": 0,
"duration": 0.008,
"duration": 0.010,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.01,
"timestamp": 0.012,
"type": "commit",
},
{
"batchUID": 0,
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.016,
"timestamp": 0.02,
"type": "layout-effects",
},
{
"batchUID": 0,
"depth": 0,
"duration": 0.004,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.019,
"timestamp": 0.023,
"type": "passive-effects",
},
{
"batchUID": 1,
"depth": 0,
"duration": 0.012,
"duration": 0.014,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.024,
"timestamp": 0.028,
"type": "render-idle",
},
{
"batchUID": 1,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.024,
"timestamp": 0.028,
"type": "render",
},
{
"batchUID": 1,
"depth": 0,
"duration": 0.008,
"duration": 0.010,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.028,
"timestamp": 0.032,
"type": "commit",
},
{
"batchUID": 1,
"depth": 1,
"duration": 0.001,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.034,
"timestamp": 0.04,
"type": "layout-effects",
},
{
"batchUID": 1,
"depth": 0,
"duration": 0.003,
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.037,
"timestamp": 0.043,
"type": "passive-effects",
},
],
Expand Down Expand Up @@ -1126,14 +1126,14 @@ describe('Timeline profiler', () => {
"schedulingEvents": [
{
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.005,
"timestamp": 0.007,
"type": "schedule-render",
"warning": null,
},
{
"componentName": "App",
"lanes": "0b0000000000000000000000000000101",
"timestamp": 0.021,
"timestamp": 0.025,
"type": "schedule-state-update",
"warning": null,
},
Expand Down
7 changes: 3 additions & 4 deletions packages/react-devtools-shell/src/e2e-regression/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,15 @@
// This test harness mounts each test app as a separate root to test multi-root applications.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {createRoot} from 'react-dom/client';
import * as ReactDOMClient from 'react-dom/client';
import ListApp from '../e2e-apps/ListApp';

function mountApp(App: () => React$Node) {
const container = document.createElement('div');

((document.body: any): HTMLBodyElement).appendChild(container);

const root = createRoot(container);
const root = ReactDOMClient.createRoot(container);
root.render(<App />);
}
function mountTestApp() {
Expand All @@ -27,5 +26,5 @@ window.parent.REACT_DOM_APP = {
createTestNameSelector: name => `[data-testname="${name}"]`,
findAllNodes: (container, nodes) =>
container.querySelectorAll(nodes.join(' ')),
...ReactDOM,
...ReactDOMClient,
};
7 changes: 4 additions & 3 deletions packages/react-devtools-shell/src/e2e-regression/devtools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {createRoot} from 'react-dom/client';
import * as ReactDOMClient from 'react-dom/client';
import {
activate as activateBackend,
initialize as initializeBackend,
Expand Down Expand Up @@ -32,7 +32,7 @@ function init(appIframe, devtoolsContainer, appSource) {
const DevTools = createDevTools(contentWindow);

inject(contentDocument, appSource, () => {
createRoot(devtoolsContainer).render(
ReactDOMClient.createRoot(devtoolsContainer).render(
<DevTools
hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
showTabBar={true}
Expand All @@ -55,4 +55,5 @@ init(
);

// ReactDOM Test Selector APIs used by Playwright e2e tests
window.parent.REACT_DOM_DEVTOOLS = ReactDOM;
window.parent.REACT_DOM_DEVTOOLS =
'createTestNameSelector' in ReactDOMClient ? ReactDOMClient : ReactDOM;
7 changes: 3 additions & 4 deletions packages/react-devtools-shell/src/e2e/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,7 @@
// This test harness mounts each test app as a separate root to test multi-root applications.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {createRoot} from 'react-dom/client';
import * as ReactDOMClient from 'react-dom/client';

const container = document.createElement('div');

Expand All @@ -14,8 +13,8 @@ const container = document.createElement('div');
// so that it can load things other than just ToDoList.
const App = require('../e2e-apps/ListApp').default;

const root = createRoot(container);
const root = ReactDOMClient.createRoot(container);
root.render(<App />);

// ReactDOM Test Selector APIs used by Playwright e2e tests
window.parent.REACT_DOM_APP = ReactDOM;
window.parent.REACT_DOM_APP = ReactDOMClient;
7 changes: 3 additions & 4 deletions packages/react-devtools-shell/src/e2e/devtools.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@
*/

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {createRoot} from 'react-dom/client';
import * as ReactDOMClient from 'react-dom/client';
import {
activate as activateBackend,
initialize as initializeBackend,
Expand Down Expand Up @@ -41,7 +40,7 @@ function init(appIframe, devtoolsContainer, appSource) {
const DevTools = createDevTools(contentWindow);

inject(contentDocument, appSource, () => {
createRoot(devtoolsContainer).render(
ReactDOMClient.createRoot(devtoolsContainer).render(
<DevTools
hookNamesModuleLoaderFunction={hookNamesModuleLoaderFunction}
showTabBar={true}
Expand All @@ -58,4 +57,4 @@ const devtoolsContainer = document.getElementById('devtools');
init(iframe, devtoolsContainer, 'dist/e2e-app.js');

// ReactDOM Test Selector APIs used by Playwright e2e tests
window.parent.REACT_DOM_DEVTOOLS = ReactDOM;
window.parent.REACT_DOM_DEVTOOLS = ReactDOMClient;
12 changes: 10 additions & 2 deletions packages/react-devtools-shell/webpack-server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,8 @@ const makeConfig = (entry, alias) => ({
},
});

const clientAsSeparateBuild = semver.gte(REACT_VERSION, '19.0.0');

const app = makeConfig(
{
'app-index': './src/app/index.js',
Expand All @@ -142,8 +144,14 @@ const app = makeConfig(
react: resolve(builtModulesDir, 'react'),
'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
'react-devtools-feature-flags': resolveFeatureFlags('shell'),
'react-dom/client': resolve(builtModulesDir, 'react-dom/client'),
'react-dom': resolve(builtModulesDir, 'react-dom/unstable_testing'),
'react-dom/client': resolve(
builtModulesDir,
clientAsSeparateBuild ? 'react-dom/unstable_testing' : 'react-dom/client',
),
'react-dom': resolve(
builtModulesDir,
clientAsSeparateBuild ? 'react-dom' : 'react-dom/unstable_testing',
),
'react-is': resolve(builtModulesDir, 'react-is'),
scheduler: resolve(builtModulesDir, 'scheduler'),
},
Expand Down
Loading