Split ReactDOM entry point

[gaearon]

This is kind of subjective. I find it hard to navigate ReactDOM.js. It's long, mixes public API with implementation details, and mixes some injection with old APIs with new ones. It's hard to tell what's being used only by the old code, and what's only needed for legacy (or missing in modern code).

This is a refactor that does no functional changes. It splits ReactDOM.js into:

• ReactDOM.js: Entry point is lean and only does some injection and importing.
• ReactDOMRoot.js: Exports createRoot, createBlockingRoot, and createLegacyRoot (internal). This is the where the shared root implementation lives.
• ReactDOMLegacy.js: All legacy APIs like findDOMNode, render, hydrate, unmountComponentAtNode, unstable_renderSubtreeIntoContainer, live here. This includes some batching and legacy hyration heuristics code that isn't used by the modern roots.

Eventually we can move ReactDOMLegacy.js to a separate package entry point.

I've also renamed BatchedRoot to BlockingRoot (missed that during last refactoring).

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 900a54f:

Sandbox	Source
adoring-fire-11qik	Configuration

[acdlite]

This is fine with me, I had the same thought the last time I was looking at that file

[sizebot]

Details of bundled changes.

Comparing: a7b4d51...900a54f

react-dom

File	Filesize Diff	Gzip Diff	Prev Size	Current Size	Prev Gzip	Current Gzip	ENV
react-dom.profiling.min.js	0.0%	-0.0%	123.6 KB	123.6 KB	38.81 KB	38.8 KB	NODE_PROFILING
react-dom-server.browser.development.js	0.0%	0.0%	140.2 KB	140.2 KB	36.81 KB	36.81 KB	UMD_DEV
react-dom-unstable-flight-server.browser.production.min.js	0.0%	-0.1%	2.85 KB	2.85 KB	1.33 KB	1.33 KB	UMD_PROD
react-dom-test-utils.development.js	0.0%	0.0%	56.1 KB	56.1 KB	15.52 KB	15.52 KB	UMD_DEV
react-dom-test-utils.production.min.js	0.0%	0.0%	11.18 KB	11.18 KB	4.15 KB	4.15 KB	UMD_PROD
react-dom-unstable-fizz.browser.production.min.js	0.0%	🔺+0.1%	1.21 KB	1.21 KB	710 B	711 B	UMD_PROD
ReactDOMServer-dev.js	0.0%	0.0%	139.57 KB	139.57 KB	35.4 KB	35.4 KB	FB_WWW_DEV
react-dom-test-utils.development.js	0.0%	0.0%	54.37 KB	54.37 KB	15.18 KB	15.19 KB	NODE_DEV
react-dom-test-utils.production.min.js	0.0%	0.0%	10.95 KB	10.95 KB	4.09 KB	4.09 KB	NODE_PROD
react-dom-unstable-fizz.browser.production.min.js	0.0%	🔺+0.2%	1.05 KB	1.05 KB	641 B	642 B	NODE_PROD
react-dom-unstable-flight-client.production.min.js	0.0%	🔺+0.1%	2.72 KB	2.72 KB	1.28 KB	1.28 KB	NODE_PROD
react-dom.development.js	-0.0%	-0.0%	952.75 KB	952.62 KB	215.4 KB	215.33 KB	UMD_DEV
react-dom.production.min.js	0.0%	0.0%	119.63 KB	119.63 KB	38.42 KB	38.43 KB	UMD_PROD
react-dom.profiling.min.js	0.0%	-0.0%	123.31 KB	123.31 KB	39.47 KB	39.47 KB	UMD_PROFILING
react-dom.development.js	-0.0%	-0.0%	946.86 KB	946.73 KB	213.82 KB	213.75 KB	NODE_DEV
react-dom-server.node.development.js	0.0%	0.0%	137.24 KB	137.24 KB	36.03 KB	36.03 KB	NODE_DEV
react-dom-unstable-flight-server.node.development.js	0.0%	0.0%	10.03 KB	10.03 KB	3.27 KB	3.27 KB	NODE_DEV
react-dom.production.min.js	0.0%	0.0%	119.8 KB	119.8 KB	37.76 KB	37.76 KB	NODE_PROD
react-dom-server.browser.development.js	0.0%	0.0%	136.13 KB	136.13 KB	35.81 KB	35.81 KB	NODE_DEV
react-dom-server.browser.production.min.js	0.0%	0.0%	20.31 KB	20.31 KB	7.46 KB	7.46 KB	NODE_PROD
ReactDOM-dev.js	-0.0%	-0.0%	975.23 KB	974.92 KB	216.39 KB	216.33 KB	FB_WWW_DEV
ReactDOM-prod.js	0.0%	0.0%	402.56 KB	402.59 KB	73.16 KB	73.16 KB	FB_WWW_PROD
react-dom-unstable-fizz.node.development.js	0.0%	+0.1%	4.42 KB	4.42 KB	1.65 KB	1.65 KB	NODE_DEV
ReactDOM-profiling.js	0.0%	-0.0%	403.39 KB	403.42 KB	73.71 KB	73.71 KB	FB_WWW_PROFILING

Size changes (experimental)

Generated by 🚫 dangerJS against 900a54f

[sizebot]

No significant bundle size changes to report.

Size changes (stable)

Generated by 🚫 dangerJS against 900a54f

[trueadm]

Rather than ReactDOMLegacy, maybe another name might be more fitting? Heritage? Legacy makes the APIs feel less relevant and important.

[gaearon]

Rather than ReactDOMLegacy, maybe another name might be more fitting? Heritage? Legacy makes the APIs feel less relevant and important.

This file is internal naming and is consistent with other places we call it "legacy mode" in the codebase. So I wouldn't worry too much about that here.

Generally this might be a discussion worth having (e.g. the docs also call it a "legacy mode" here). This discussion can probably be decoupled from this PR though.

Early on I had the same concern. But given that we have a "half measure" Blocking Mode, it might make sense for the ecosystem to migrate to that when possible. In that sense, Legacy is truly "legacy" — it has semantics causing issues today (#14536, #15080), and it might be good to encourage moving away from it. We'll adjust the messaging as we get more info from people who try it.