[react devtools] Device storage support

[rbalicki2]

Summary

See this react native diff as well

• There is a new method on the __REACT_DEVTOOLS_GLOBAL_HOOK__, injectDeviceStorageMethods, which (in this diff) takes { setValueOnDevice }. setValueOnDevice gives devtools the ability to update values in device storage. In a future diff, injectDeviceStorageMethods will take an object with multiple properties.
• React Native, during runApplication, will set window.__REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ (etc) from the values in device storage, and then call injectDeviceStorageMethods.
• injectDeviceStorageMethods will:
  • write any recently-changed settings to device storage
  • call patchConsole
• When a relevant setting changes, we also write it local storage.
• Thus, when we modify a setting and restart, that setting can be read before the react devtools frontend connects.

Also

• Instead of calling patchConsole with values from window in multiple places, centralize that in one file

Bigger picture

Three things stand out as obvious follow ups:

• It's very awkward that react native needs to know to set __REACT_DEVTOOLS_APPEND_COMPONENT_STACK__ from a given key in storage. It would be better if all of that logic could exist on the react devtools side. This can be achieved by injecting { setValueOnDevice, getValueOnDevice }
• Likewise, it's awkward that when a setting changes (e.g. append component stack), we know to store it in device storage. This code should be centralized in a follow up.
• This mechanism can be used for component filters, reload-and-profile, etc.

Notes

• This also contains the changes related to [react devtools][easy] Change function names and remove unused functions, add constants, etc #25211. Sorry! It's probably best to look at the changes in isolation locally

How did you test this change?

• Manual testing
• yarn run prettier, flow dom, and unit tests

[lunaruan]

It looks like in your diff, you are putting most of the device storage logic inside the shared devtools folder (react-devtools-shared). This folder is used by the the React DevTools extension, the React DevTools inline package, and React DevTools core and we only need to store settings for React Native.

Looking at your PRs, it seems like the core of the device storage logic lives in React Native, and you are just calling into it from DevTools. I wonder if it would simplify your PR if you moved let RN and DevTools communicate via a bridge instead of passing around functions. Ex:

• In React Native, when we connect to DevTools, listen to a react-devtools event from the __REACT_DEVTOOLS_GLOBAL_HOOK__ when we set up React DevTools
• Emit an event from React Native that to tell React DevTools the device settings (which React DevTools will use if they don't have local storage)
• In DevTools, whenever the settings change, emit an event that React Native will listen to to store the events to global storage?

Also open to other ideas!

[rbalicki2]

Yeah, I can move this logic to to connectToDevTools (called from that RN file to which you linked). I'll do this as follows:

• in connectToDevTools (or at the top level in that file) before the socket is opened, read from local storage and update window.
• In connectToDevTools, after the socket is opened and we have created an agent, add listeners which will write those values to device storage.

Optimistically, this means we can make no changes to RN. However, maybe including an external library in React DevTools that requires pod install (etc) will be problematic, so I might pass getters/setters over in ConnectOptions

Closing for now, until I make these changes

[rbalicki2]

Welp, unless we make react-devtools-core have a dependency on react-native, we can't use react-native-mmkv directly from react-devtools-core. I'll go with passing it over.