Move createRoot/hydrateRoot to react-dom/client

[sebmarkbage]

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 fixtures
• Fix UMD Won't fix. We plan on deprecating these builds anyway. It's fine if they work but warn.
• Update warnings to reference the new import
• Add tests for the actual warnings
• Fix Webpack build in DevTools

[sizebot]

Comparing: 086fa8e...f403f13

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	+0.02%	131.44 kB	131.46 kB	+0.05%	42.04 kB	42.06 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	+0.02%	136.09 kB	136.12 kB	+0.05%	43.39 kB	43.41 kB
facebook-www/ReactDOM-prod.classic.js	=	435.10 kB	435.13 kB	+0.03%	79.59 kB	79.61 kB
facebook-www/ReactDOM-prod.modern.js	=	421.60 kB	421.63 kB	+0.03%	77.57 kB	77.59 kB
facebook-www/ReactDOMForked-prod.classic.js	=	435.10 kB	435.13 kB	+0.03%	79.59 kB	79.61 kB
oss-experimental/react-dom/client.js	+∞%	0.00 kB	0.62 kB	+∞%	0.00 kB	0.29 kB
oss-stable-semver/react-dom/client.js	+∞%	0.00 kB	0.62 kB	+∞%	0.00 kB	0.29 kB
oss-stable/react-dom/client.js	+∞%	0.00 kB	0.62 kB	+∞%	0.00 kB	0.29 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-experimental/react-dom/client.js	+∞%	0.00 kB	0.62 kB	+∞%	0.00 kB	0.29 kB
oss-stable-semver/react-dom/client.js	+∞%	0.00 kB	0.62 kB	+∞%	0.00 kB	0.29 kB
oss-stable/react-dom/client.js	+∞%	0.00 kB	0.62 kB	+∞%	0.00 kB	0.29 kB

Generated by 🚫 dangerJS against f403f13

[sebmarkbage]

To fix this, I think we can move DevToolsProfilingHooks into a separate file. The problem isn't so much its definition but everything else that file pulls in which creates a cycle.

If we just define DevToolsProfilingHooks separately, we can special case that file in inlinedHostConfigs path fields to be included in all variants.

[Trackhe]

how i can get react-dom/client? because i cant install it over npm and i dont find the repository.

[gaearon]

It's not a separate package. If you install the latest RC of react-dom, it will have react-dom/client in it.