Wire up Fusebox in react-native-windows #13008

rozele · 2024-04-29T16:21:25Z

Description

Type of Change

Erase all that don't apply.

New feature (non-breaking change which adds functionality)

Why

React Native is moving to a new direct debugging architecture. This PR is a stack of commits to unblock Fusebox debugging in react-native-windows.

What

Wires up the HostTarget in ReactNativeHost for react-native-windows. This code will only run if InspectorFlags::getEnableModernCDPRegistry() returns true.

Testing

TBD

Changelog

Should this change be included in the release notes: no

Microsoft Reviewers: Open in CodeFlow

In preparation for unblocking Fusebox in react-native-windows, this change adds a stable device ID, which is a hash of the publisher device ID from Windows APIs and the bundle ID.

Adds thread pool queue for Fusebox debugger for use when implementing callbacks for the HostTarget or the InspectorPackagerConnection.

Wires up the HostTarget in ReactNativeHost for react-native-windows. This code will only run if InspectorFlags::getEnableModernCDPRegistry() returns true.

This adds an implementation of InspectorPackagerConnectionDelegate for react-native-windows.

Using the same inspector thread initialized in ReactNativeHost, this change wires up the InspectorPackagerConnectionDelegate to use when initializatng the InspectorPackagerConnection from ReactCommon and conditionally sets it for Hermes direct debugging when the appropriate feature flag is set.

To avoid conflicting with content manipulation of the ReactRootView, this change uses a Flyout anchored to the top of the ReactRootView to show the debugger paused overlay. It disables the default light dismiss (and automatic dismissal when the window loses focus) by overriding the Closing method and canceling the close event until we receive a hide debugger overlay notification.

Similar to browsers, this change adds the Ctrl+Shift+I shortcut to each XamlRoot containing a ReactRootView. For simplicity, this only works with metro on localhost:8081, but we (or Microsoft) can revisit this in the future if we want to add more granular control over the host and port for metro.

rozele · 2024-05-01T23:19:48Z

vnext/Shared/OInstance.cpp

@@ -73,6 +73,20 @@ using namespace Microsoft::JSI;
 using std::make_shared;
 using winrt::Microsoft::ReactNative::ReactPropertyBagHelper;

+namespace facebook::react {
+bool shouldStartHermesInspector(DevSettings &devSettings) {


This didn't actually end up needing to be moved.

rozele · 2024-05-01T23:19:58Z

vnext/Shared/OInstance.cpp

@@ -105,6 +119,12 @@ void LoadRemoteUrlScript(
  hermesBytecodeVersion = ::hermes::hbc::BYTECODE_VERSION;
 #endif

+  const auto bundlePath = ;
+  if (facebook::react::shouldStartHermesInspector(*devSettings)) {
+    devManager->EnsureHermesInspector(


This doesn't have to move either.

rozele · 2024-05-01T23:21:22Z

vnext/Microsoft.ReactNative/ReactHost/ReactInstanceWin.cpp

@@ -291,6 +291,18 @@ ReactInstanceWin::ReactInstanceWin(
 }

 ReactInstanceWin::~ReactInstanceWin() noexcept {
+#ifdef USE_FABRIC
+  if (m_bridgelessReactInstance && m_options.InspectorTarget) {
+    auto messageDispatchQueue =


Using MessageDispatchQueue to get the runOnQueueSync function on an Mso::DispatchQueue. We need to ensure the ReactInstance stays alive for as long as it takes to unregister the inspector.

rozele · 2024-05-01T23:21:53Z

vnext/Microsoft.ReactNative/ReactHost/ReactInstanceWin.h

@@ -204,7 +204,7 @@ class ReactInstanceWin final : public Mso::ActiveObject<IReactInstanceInternal>

 #ifdef USE_FABRIC
  // Bridgeless
-  std::unique_ptr<facebook::react::ReactInstance> m_bridgelessReactInstance;
+  std::shared_ptr<facebook::react::ReactInstance> m_bridgelessReactInstance;


converted to shared_ptr to provide weak_ptr to host target de-init

rozele · 2024-05-01T23:23:02Z

vnext/Microsoft.ReactNative/ReactNativeHost.cpp

 ReactNativeHost::ReactNativeHost() noexcept : m_reactHost{Mso::React::MakeReactHost()} {
 #if _DEBUG
  facebook::react::InitializeLogging([](facebook::react::RCTLogLevel /*logLevel*/, const char *message) {
    std::string str = std::string("ReactNative:") + message;
    OutputDebugStringA(str.c_str());
  });
 #endif
+
+  auto &inspectorFlags = facebook::react::jsinspector_modern::InspectorFlags::getInstance();


This should all be lazy init'd on the first reload, otherwise you have to set the feature flag before calling the ReactNativeHost ctor, rather than just before attaching the ReactNativeHost to the ReactRootView.

rozele · 2024-05-01T23:24:14Z

vnext/Microsoft.ReactNative/ReactRootView.cpp

+    const std::string &message,
+    const std::function<void()> &onResume) noexcept {
+  // Initialize content
+  const xaml::Controls::Grid contentGrid;


This could probably be converted to a xaml string or something, or a xaml component, but since we don't have a XAML compiler outside visual studio, I prefer this to be imperative WinUI set up :|

rozele · 2024-05-01T23:26:53Z

vnext/Microsoft.ReactNative/ReactRootView.cpp

+  messageBlock.Text(winrt::to_hstring(message));
+  messageBlock.FontWeight(winrt::Windows::UI::Text::FontWeights::SemiBold());
+  xaml::Controls::FontIcon resumeGlyph;
+  resumeGlyph.FontFamily(xaml::Media::FontFamily(L"Segoe MDL2 Assets"));


The goal is to look like this, but I didn't want to introduce an image asset in Microsoft.ReactNative for various reasons (most notably I'd end up having to configure it twice, once for Visual Studio and once for buck), so I took a shortcut here and just used a glyph that kind of looks like the Visual Studio continue debugging button.

rozele · 2024-05-01T23:27:14Z

vnext/Microsoft.ReactNative/ReactRootView.cpp

+  // Disable light dismiss
+  m_debuggerPausedFlyout.Closing([weakThis = this->get_weak()](auto &&, const auto &args) {
+    if (auto strongThis = weakThis.get()) {
+      args.Cancel(strongThis->m_isDebuggerPausedOverlayOpen);


There's still a bug with this Flyout where it dismisses when resizing the window :(

rozele · 2024-05-01T23:28:14Z

vnext/Microsoft.ReactNative/ReactRootView.cpp

+              if (const auto strongThis = weakThis.get()) {
+                if (IsCtrlShiftI(args.Key())) {
+                  ::Microsoft::ReactNative::GetSharedDevManager()->OpenDevTools(
+                      winrt::to_string(strongThis->m_reactNativeHost.InstanceSettings().BundleAppId()));


This is a hack, we probably need to put this somewhere else, but I couldn't think of a good place that both had access to DevSettings and all active XamlRoots, and I was being a bit lazy not wanting to wire this through the ReactNativeHost.

rozele · 2024-05-01T23:29:00Z

vnext/Shared/DevSupportManager.cpp

+  // TODO: Use currently configured dev server host
+  winrt::Windows::Foundation::Uri uri(
+      Microsoft::Common::Unicode::Utf8ToUtf16(facebook::react::DevServerHelper::get_OpenDebuggerUrl(
+          std::string{DevServerHelper::DefaultPackagerHost},


This is where we'd specifically not want to use the defaults (localhost:8081)

rozele · 2024-05-01T23:29:40Z

vnext/Shared/FuseboxInspectorThread.h

+class FuseboxInspectorThread final {
+ public:
+  static Mso::DispatchQueue &Instance() {
+    static Mso::DispatchQueue queue = Mso::DispatchQueue::MakeSerialQueue();


I used a SerialQueue so I didn't have to worry about tearing anything down, maybe that's not really true though.

rozele requested a review from a team as a code owner April 29, 2024 16:21

rozele changed the title ~~Add HostTarget to CDP registry~~ Wire up Fusebox in react-native-windows Apr 29, 2024

rozele marked this pull request as draft April 29, 2024 16:22

rozele force-pushed the fusebox branch 5 times, most recently from 25067d1 to 7f7bcaa Compare April 29, 2024 18:08

rozele added 7 commits May 1, 2024 16:35

Adds device parameter to InspectorPackagerConnection URL

23db8ef

In preparation for unblocking Fusebox in react-native-windows, this change adds a stable device ID, which is a hash of the publisher device ID from Windows APIs and the bundle ID.

Add static thread pool queue for inspector

7d33a05

Adds thread pool queue for Fusebox debugger for use when implementing callbacks for the HostTarget or the InspectorPackagerConnection.

Add HostTarget to CDP registry

5358bfd

Wires up the HostTarget in ReactNativeHost for react-native-windows. This code will only run if InspectorFlags::getEnableModernCDPRegistry() returns true.

Add InspectorPackagerConnectionDelegate implementation

0b83a21

This adds an implementation of InspectorPackagerConnectionDelegate for react-native-windows.

Change files

4740af3

Example wiring up the inspector flag

bfed766

rozele force-pushed the fusebox branch from 7f7bcaa to bfed766 Compare May 1, 2024 21:18

rozele added 2 commits May 1, 2024 19:04

rozele commented May 1, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Wire up Fusebox in react-native-windows #13008

Wire up Fusebox in react-native-windows #13008

rozele commented Apr 29, 2024 •

edited

rozele May 1, 2024

rozele May 1, 2024

rozele May 1, 2024

rozele May 1, 2024

rozele May 1, 2024

rozele May 1, 2024

rozele May 1, 2024

rozele May 1, 2024

rozele May 1, 2024

rozele May 1, 2024

rozele May 1, 2024

Wire up Fusebox in react-native-windows #13008

Are you sure you want to change the base?

Wire up Fusebox in react-native-windows #13008

Conversation

rozele commented Apr 29, 2024 • edited

Description

Type of Change

Why

What

Testing

Changelog

Microsoft Reviewers: Open in CodeFlow

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rozele commented Apr 29, 2024 •

edited