Enable app reloads for other runtimes than `Hermes React Native`

[Kwasow]

Motivation

Hi, I'm a member of the react-native-reanimated team at Software Mansion, where we develop a module for React Native. Due to the architecture of this module, we need to create our own runtime. It has long been the case that code being executed in our runtime environment, could not have been debugged using most debugging tools. This is due to change soon, as the work done in this PR enables full support for debugging using Chrome DevTools, when using Hermes as the runtime.

Unfortunately, this runtime makes the app crash if a reload is performed. The same happens for the default React Native runtime. This is fixed by the metro-inspector-proxy package, that creates a React Native Experimental (Improved Chrome Reloads) “virtual” runtime, which doesn't have this issue and handles changes due to app reloads.

Similar issues may be encountered by brownfield apps, which can have multiple JS runtimes.

Proposed solution

I've updated the implementation of Device.js in the metro-inspector-proxy package for it to be more general. Previously it would only create a “virtual” runtime for the Hermes React Native runtime. Now it uses a map and dynamically creates a reloadable “virtual” runtime for every registered runtime and then handles reloads for all of them.

Test plan

The output from localhost:8081/json is correct and debugging in Flipper works (both for the React Native runtime and our own Reanimated runtime).

Related PRs

• facebook/flipper#4047
• software-mansion/react-native-reanimated#3526
• Could be useful for: facebook/react-native#34489

[codecov-commenter]

Codecov Report

Base: 79.73% // Head: 79.67% // Decreases project coverage by -0.06% :warning:

Coverage data is based on head (cbcfe05) compared to base (553241c). Patch coverage: 2.85% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #864      +/-   ##
==========================================
- Coverage   79.73%   79.67%   -0.07%     
==========================================
  Files         210      210              
  Lines       10671    10680       +9     
  Branches     2584     2587       +3     
==========================================
  Hits         8509     8509              
- Misses       2162     2171       +9     

Impacted Files	Coverage Δ
packages/metro-inspector-proxy/src/Device.js	2.80% <2.85%> (-0.13%)	:arrow_down:

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.