Consolidate packages

[gaearon]

Currently there's a lot of forking going on which makes it harder to figure out how everything fits together. For example:

• Injecting into the hook

  • React tries to do this here
  • But actually the hook doesn't exist yet until injected so RN just copies the same code here

• Setting up the connection

  • Happens here in RN
  • However Electron shell has very similar code

• Nuclide vendors the Electron build for the Inspector (although it only uses the client while RN runs its fork of the server).

• Backends depend on React internals but aren’t colocated with React

---

The goals for consolidation:

• Reduce the number of forks to make it easier to make changes across them (e.g. to support Fiber).
• Make it easy for downstream packages (RN, Nuclide) to accept changes related to DevTools by packaging them.
• Consolidate the code relying on React internal data structure inside the React repo.

The plan for consolidation:

• Publish react-devtools package added in Add npm package for standalone devtools app #487
• Publish react-devtools-core separately
• Make nuclide-react-inspector depend on it instead of vendoring its build ([React Inspector] Replace vendored React DevTools with npm package facebookarchive/nuclide#1016)
• Rewrite RN setupDevtools()
  • Use the server from react-devtools instead of a fork (WIP: Add connectToDevTools(options) for React Native #494)
  • Remove the late hook call since the hook would already exist by the time React calls it (Add connectToDevTools(options) for React Native #494)
  • Add a way to inject resolveStyle in it (Add connectToDevTools(options) for React Native #494)
  • Pick up changes to the server introduced in RN:
    • Make sure we don’t regress on react/react-native@d0a26a7
    • Try to reconnect automatically react/react-native@9a93a3c
    • Do we need attach:agent? react/react-native@9e4af68#diff-31cd378efa6368c1a37db84beec02002R46
    • Fix RN WebSocket race condition [WebSocket] Fix race condition during initialization react/react-native#12305
    • (Maybe) don't reconnect if we started unconnected? Meh
    • Try to add backwards compat to react-devtools-core@2.0 so it works with old clients (stable RN)
    • Remove outdated wording (like "touch the app for bridge to work") which doesn't make sense anymore
    • Maybe Fix Fiber specific stuff? Later, too much of it
    • Test on Android simulator Somebody help plz
    • Actually send a diff for depending on react-devtools-core [React DevTools] Move DevTools integration into its own repo react/react-native#12316
  • Bump Nuclide inspector to use react-devtools-core@2.0.2 [React Inspector] Bump react-devtools-core facebookarchive/nuclide#1021
  • Figure out why Relay plugin is crashing
  • Move (current) backends into React repo
• Fix Fiber DevTools
  • topsecret-RTView
  • Editing styles
  • Inspector (dirty solution: [WIP][Not for merge] Support Inspector in Fiber react/react-native#12421)
• Fix RN Inspector internal dependencies on React:
  • https://github.com/facebook/react-native/blob/a54d449e947afc609a404a699494902823fbbf5e/Libraries/Inspector/Inspector.js#L133-L134
  • https://github.com/facebook/react-native/blob/a54d449e947afc609a404a699494902823fbbf5e/Libraries/Inspector/InspectorUtils.js#L18

[gaearon]

cc @jhen0409, do you have any feedback on this plan? Would it help you to simplify anything in react-native-debugger?

[gaearon]

Some initial work in #494.

[jhen0409]

This is a good news!

Just wondering we could provide Panel component in react-devtools-core? Currently I used it for react-native-debugger with forked server setup, I want to avoid some console.log and all DOM manipulation for use react inspector. If you agree:

• To avoid Panel use another react instance, add react to externals for standalone config, and export Panel
• Or a new component webpack config

[gaearon]

Is there anything in particular we could fix in standalone that would make it good for you? For example we could easily remove logs. Is there something else annoying you?

[jhen0409]

@gaearon, looks like it just a little problem, I don't want to set #loading-status (It also not explained in the readme), I simply made a PR for that. #497

[gaearon]

@jhen0409 Published 2.0 with setStatusListener(), do you need anything else? Happy to do more changes.

[bvaughn]

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools