mirror of https://github.com/zebrajr/react.git synced 2026-01-15 12:15:22 +00:00

Files

Sebastian Markbåge 17806594cc Move createRoot/hydrateRoot to react-dom/client (#23385 )

* 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>

2022-03-01 00:13:28 -05:00

src

Move createRoot/hydrateRoot to react-dom/client (#23385 )

2022-03-01 00:13:28 -05:00

backend.js

Standalone NPM packages and React Native support (#335 )

2019-07-13 10:05:04 -07:00

package.json

Update the exports field (#23257 )

2022-02-08 21:07:26 -05:00

README.md

fixed: typo in react-devtools/README.md Websocked -> Websocket (#20376 )

2020-12-04 09:59:17 -05:00

standalone.js

Standalone NPM packages and React Native support (#335 )

2019-07-13 10:05:04 -07:00

webpack.backend.js

[build2 -> build] Local scripts

2021-09-21 15:14:09 -04:00

webpack.standalone.js

Move createRoot/hydrateRoot to react-dom/client (#23385 )

2022-03-01 00:13:28 -05:00

README.md

`react-devtools-core`

A standalone React DevTools implementation.

This is a low-level package. If you're looking for the Electron app you can run, use react-devtools package instead.

API

`react-devtools-core`

This is similar requiring the react-devtools package, but provides several configurable options. Unlike react-devtools, requiring react-devtools-core doesn't connect immediately but instead exports a function:

const { connectToDevTools } = require("react-devtools-core");
connectToDevTools(config);

Run connectToDevTools() in the same context as React to set up a connection to DevTools.
Be sure to run this function before importing e.g. react, react-dom, react-native.

The config object may contain:

host: string (defaults to "localhost") - Websocket will connect to this host.
port: number (defaults to 8097) - Websocket will connect to this port.
useHttps: boolean (defaults to false) - Websocket should use a secure protocol (wss).
websocket: Websocket - Custom websocket to use. Overrides host and port settings if provided.
resolveRNStyle: (style: number) => ?Object - Used by the React Native style plug-in.
retryConnectionDelay: number (defaults to 2000) - Milliseconds delay to wait between retrying a failed Websocket connection.
isAppActive: () => boolean - If provided, DevTools will poll this method and wait until it returns true before connecting to React.

`react-devtools-core/standalone`

Renders the DevTools interface into a DOM node.

require("react-devtools-core/standalone")
  .setContentDOMNode(document.getElementById("container"))
  .setStatusListener(status => {
    // This callback is optional...
  })
  .startServer(port);

Renders DevTools interface into a DOM node over SSL using a custom host name (Default is localhost).

const host = 'dev.server.com';
const options = {
  key: fs.readFileSync('test/fixtures/keys/agent2-key.pem'),
  cert: fs.readFileSync('test/fixtures/keys/agent2-cert.pem')
};


require("react-devtools-core/standalone")
  .setContentDOMNode(document.getElementById("container"))
  .setStatusListener(status => {
    // This callback is optional...
  })
  .startServer(port, host, options);

Reference the react-devtools package for a complete integration example.

Development

Watch for changes made to the backend entry point and rebuild:

yarn start:backend

Watch for changes made to the standalone UI entry point and rebuild:

yarn start:standalone