react-native-windows 0.78.5 → 0.78.6

package/Microsoft.ReactNative/Modules/NativeUIManager.cpp

@@ -998,14 +998,14 @@ void NativeUIManager::measure(
 
   auto feView = view.try_as<xaml::FrameworkElement>();
   if (feView == nullptr) {
-    m_context.JSDispatcher().Post([callback = std::move(callback)]() { callback(0, 0, 0, 0, 0, 0); });
+    callback(0, 0, 0, 0, 0, 0);
     return;
   }
 
   // Retrieve the XAML element for the root view containing this view
   auto feRootView = static_cast<ShadowNodeBase &>(shadowRoot).GetView().try_as<xaml::FrameworkElement>();
   if (feRootView == nullptr) {
-    m_context.JSDispatcher().Post([callback = std::move(callback)]() { callback(0, 0, 0, 0, 0, 0); });
+    callback(0, 0, 0, 0, 0, 0);
     return;
   }
 
@@ -1015,9 +1015,7 @@ void NativeUIManager::measure(
   // this is exactly, but it is not used anyway.
   //  Either codify this non-use or determine if and how we can send the needed
   //  data.
-  m_context.JSDispatcher().Post([callback = std::move(callback), react = rectInParentCoords]() {
-    callback(0, 0, react.Width, react.Height, react.X, react.Y);
-  });
+  callback(0, 0, rectInParentCoords.Width, rectInParentCoords.Height, rectInParentCoords.X, rectInParentCoords.Y);
 }
 
 void NativeUIManager::measureInWindow(
@@ -1033,14 +1031,11 @@ void NativeUIManager::measureInWindow(
     auto windowTransform = view.TransformToVisual(nullptr);
     auto positionInWindow = windowTransform.TransformPoint({0, 0});
 
-    m_context.JSDispatcher().Post(
-        [callback = std::move(callback), pos = positionInWindow, w = view.ActualWidth(), h = view.ActualHeight()]() {
-          callback(pos.X, pos.Y, w, h);
-        });
+    callback(positionInWindow.X, positionInWindow.Y, view.ActualWidth(), view.ActualHeight());
     return;
   }
 
-  m_context.JSDispatcher().Post([callback = std::move(callback)]() { callback(0, 0, 0, 0); });
+  callback(0, 0, 0, 0);
 }
 
 void NativeUIManager::measureLayout(
@@ -1060,15 +1055,11 @@ void NativeUIManager::measureLayout(
     const auto height = static_cast<float>(targetElement.ActualHeight());
     const auto transformedBounds = ancestorTransform.TransformBounds(winrt::Rect(0, 0, width, height));
 
-    m_context.JSDispatcher().Post([callback = std::move(callback), rect = transformedBounds]() {
-      callback(rect.X, rect.Y, rect.Width, rect.Height);
-    });
+    callback(transformedBounds.X, transformedBounds.Y, transformedBounds.Width, transformedBounds.Height);
   } catch (winrt::hresult_error const &e) {
-    m_context.JSDispatcher().Post([errorCallback = std::move(errorCallback), msg = e.message()]() {
-      auto writer = React::MakeJSValueTreeWriter();
-      writer.WriteString(msg);
-      errorCallback(React::TakeJSValue(writer));
-    });
+    auto writer = React::MakeJSValueTreeWriter();
+    writer.WriteString(e.message());
+    errorCallback(React::TakeJSValue(writer));
   }
 }
 
@@ -1082,7 +1073,7 @@ void NativeUIManager::findSubviewIn(
 
   auto rootUIView = view.try_as<xaml::UIElement>();
   if (rootUIView == nullptr) {
-    m_context.JSDispatcher().Post([callback = std::move(callback)]() { callback(0, 0, 0, 0, 0); });
+    callback(0, 0, 0, 0, 0);
     return;
   }
 
@@ -1111,14 +1102,12 @@ void NativeUIManager::findSubviewIn(
   }
 
   if (foundElement == nullptr) {
-    m_context.JSDispatcher().Post([callback = std::move(callback)]() { callback(0, 0, 0, 0, 0); });
+    callback(0, 0, 0, 0, 0);
     return;
   }
 
-  m_context.JSDispatcher().Post(
-      [callback = std::move(callback), foundTag, box = GetRectOfElementInParentCoords(foundElement, rootUIView)]() {
-        callback(static_cast<double>(foundTag), box.X, box.Y, box.Width, box.Height);
-      });
+  auto box = GetRectOfElementInParentCoords(foundElement, rootUIView);
+  callback(static_cast<double>(foundTag), box.X, box.Y, box.Width, box.Height);
 }
 
 void NativeUIManager::focus(int64_t reactTag) {

package/Microsoft.ReactNative/QuirkSettings.cpp

@@ -77,22 +77,6 @@ winrt::Microsoft::ReactNative::ReactPropertyId<bool> UseRuntimeSchedulerProperty
   return propId;
 }
 
-winrt::Microsoft::ReactNative::ReactPropertyId<bool> IsBridgelessProperty() noexcept {
-  winrt::Microsoft::ReactNative::ReactPropertyId<bool> propId{L"ReactNative", L"IsBridgeless"};
-
-  return propId;
-}
-
-/*static*/ bool QuirkSettings::GetIsBridgeless(winrt::Microsoft::ReactNative::ReactPropertyBag properties) noexcept {
-  return properties.Get(IsBridgelessProperty()).value_or(false);
-}
-
-/*static*/ void QuirkSettings::SetIsBridgeless(
-    const winrt::Microsoft::ReactNative::ReactPropertyBag &properties,
-    bool value) noexcept {
-  properties.Set(IsBridgelessProperty(), value);
-}
-
 #pragma region IDL interface
 
 /*static*/ void QuirkSettings::SetMatchAndroidAndIOSStretchBehavior(

package/Microsoft.ReactNative/QuirkSettings.h

@@ -39,9 +39,6 @@ struct QuirkSettings : QuirkSettingsT<QuirkSettings> {
   static bool GetMapWindowDeactivatedToAppStateInactive(
       winrt::Microsoft::ReactNative::ReactPropertyBag properties) noexcept;
 
-  static bool GetIsBridgeless(winrt::Microsoft::ReactNative::ReactPropertyBag properties) noexcept;
-  static void SetIsBridgeless(const winrt::Microsoft::ReactNative::ReactPropertyBag &properties, bool value) noexcept;
-
 #pragma region Public API - part of IDL interface
   static void SetMatchAndroidAndIOSStretchBehavior(
       winrt::Microsoft::ReactNative::ReactInstanceSettings settings,

package/Microsoft.ReactNative/ReactHost/ReactHost.cpp

@@ -6,6 +6,8 @@
 #include <ReactPropertyBag.h>
 #include <winrt/Windows.Foundation.h>
 
+#include <CppRuntimeOptions.h>
+
 #include <react/featureflags/ReactNativeFeatureFlags.h>
 #include <react/featureflags/ReactNativeFeatureFlagsDefaults.h>
 
@@ -283,7 +285,15 @@ bool ReactOptions::EnableDefaultCrashHandler() const noexcept {
 class ReactNativeWindowsFeatureFlags : public facebook::react::ReactNativeFeatureFlagsDefaults {
  public:
   bool disableEventLoopOnBridgeless() override {
-    return true; // Disable event loop until we are on a JSI version that supports microtasks
+    return Microsoft::React::GetRuntimeOptionBool("ReactFeatureFlag.enableEventLoopOnBridgeless");
+  }
+
+  bool enableBridgelessArchitecture() override {
+#ifdef USE_FABRIC
+    return true;
+#else
+    return false;
+#endif
   }
 
   bool enableCppPropsIteratorSetter() override {

package/Microsoft.ReactNative/ReactHost/ReactInstanceWin.cpp

@@ -4,6 +4,7 @@
 #include "ReactInstanceWin.h"
 
 #include <AppModelHelpers.h>
+#include <CallInvoker.h>
 #include <CppRuntimeOptions.h>
 #include <CreateInstance.h>
 #include <CreateModules.h>
@@ -64,6 +65,7 @@
 #include <react/runtime/JSRuntimeFactory.h>
 #include <react/runtime/PlatformTimerRegistry.h>
 #include <react/runtime/TimerManager.h>
+#include <react/threading/MessageQueueThreadImpl.h>
 #endif
 
 #if !defined(CORE_ABI) && !defined(USE_FABRIC)
@@ -350,12 +352,10 @@ void ReactInstanceWin::LoadModules(
 #endif
 
 #if !defined(CORE_ABI) && !defined(USE_FABRIC)
-  if (!IsBridgeless()) {
-    registerTurboModule(
-        L"UIManager",
-        // TODO: Use MakeTurboModuleProvider after it satisfies ReactNativeSpecs::UIManagerSpec
-        winrt::Microsoft::ReactNative::MakeModuleProvider<::Microsoft::ReactNative::UIManager>());
-  }
+  registerTurboModule(
+      L"UIManager",
+      // TODO: Use MakeTurboModuleProvider after it satisfies ReactNativeSpecs::UIManagerSpec
+      winrt::Microsoft::ReactNative::MakeModuleProvider<::Microsoft::ReactNative::UIManager>());
 #endif
 
 #ifndef CORE_ABI
@@ -489,7 +489,7 @@ void ReactInstanceWin::LoadModules(
 //! Initialize() is called from the native queue.
 void ReactInstanceWin::Initialize() noexcept {
 #ifdef USE_FABRIC
-  if (IsBridgeless()) {
+  if (Microsoft::ReactNative::IsFabricEnabled(m_reactContext->Properties())) {
     InitializeBridgeless();
   } else
 #endif
@@ -643,15 +643,10 @@ void ReactInstanceWin::InitializeBridgeless() noexcept {
             // null moduleProvider since native modules are not supported in bridgeless
             LoadModules(devSettings, nullptr, m_options.TurboModuleProvider);
 
-            auto jsDispatchQueue =
-                Mso::DispatchQueue::MakeLooperQueue(CreateDispatchQueueSettings(m_reactContext->Notifications()));
-            auto jsDispatcher =
-                winrt::make<winrt::Microsoft::ReactNative::implementation::ReactDispatcher>(Mso::Copy(jsDispatchQueue));
-            m_options.Properties.Set(ReactDispatcherHelper::JSDispatcherProperty(), jsDispatcher);
-            m_jsMessageThread.Exchange(std::make_shared<Mso::React::MessageDispatchQueue>(
-                jsDispatchQueue,
-                Mso::MakeWeakMemberFunctor(this, &ReactInstanceWin::OnError),
-                Mso::Copy(m_whenDestroyed)));
+            auto jsMessageThread = std::make_shared<facebook::react::MessageQueueThreadImpl>();
+            m_jsMessageThread.Exchange(jsMessageThread);
+
+            std::shared_ptr<facebook::react::CallInvoker> callInvoker;
 
             m_jsMessageThread.Load()->runOnQueueSync([&]() {
               SetJSThreadDescription();
@@ -674,11 +669,11 @@ void ReactInstanceWin::InitializeBridgeless() noexcept {
               }
 
               m_jsiRuntimeHolder = std::make_shared<Microsoft::ReactNative::HermesRuntimeHolder>(
-                  devSettings, m_jsMessageThread.Load(), CreatePreparedScriptStore());
+                  devSettings, jsMessageThread, CreatePreparedScriptStore());
               auto jsRuntime = std::make_unique<Microsoft::ReactNative::HermesJSRuntime>(m_jsiRuntimeHolder);
               jsRuntime->getRuntime();
               m_bridgelessReactInstance = std::make_unique<facebook::react::ReactInstance>(
-                  std::move(jsRuntime), m_jsMessageThread.Load(), timerManager, jsErrorHandlingFunc);
+                  std::move(jsRuntime), jsMessageThread, timerManager, jsErrorHandlingFunc);
 
               auto bufferedRuntimeExecutor = m_bridgelessReactInstance->getBufferedRuntimeExecutor();
               timerManager->setRuntimeExecutor(bufferedRuntimeExecutor);
@@ -686,56 +681,70 @@ void ReactInstanceWin::InitializeBridgeless() noexcept {
               Microsoft::ReactNative::SchedulerSettings::SetRuntimeScheduler(
                   winrt::Microsoft::ReactNative::ReactPropertyBag(m_options.Properties),
                   m_bridgelessReactInstance->getRuntimeScheduler());
-            });
 
-            facebook::react::ReactInstance::JSRuntimeFlags options;
-            m_bridgelessReactInstance->initializeRuntime(options, [=](facebook::jsi::Runtime &runtime) {
-              auto logger = [loggingHook = GetLoggingCallback()](const std::string &message, unsigned int logLevel) {
-                if (loggingHook)
-                  loggingHook(static_cast<facebook::react::RCTLogLevel>(logLevel), message.c_str());
-              };
-              facebook::react::bindNativeLogger(runtime, logger);
-
-              auto turboModuleManager = std::make_shared<facebook::react::TurboModuleManager>(
-                  m_options.TurboModuleProvider,
-                  std::make_shared<facebook::react::RuntimeSchedulerCallInvoker>(
-                      m_bridgelessReactInstance->getRuntimeScheduler()));
-
-              auto binding =
-                  [turboModuleManager](const std::string &name) -> std::shared_ptr<facebook::react::TurboModule> {
-                return turboModuleManager->getModule(name);
-              };
-
-              // Use a legacy native module binding that always returns null
-              // This means that calls to NativeModules.XXX will always return null, rather than crashing on access
-              auto legacyNativeModuleBinding =
-                  [](const std::string & /*name*/) -> std::shared_ptr<facebook::react::TurboModule> { return nullptr; };
-
-              facebook::react::TurboModuleBinding::install(
-                  runtime,
-                  std::function(binding),
-                  std::function(legacyNativeModuleBinding),
-                  m_options.TurboModuleProvider->LongLivedObjectCollection());
-
-              auto componentDescriptorRegistry =
-                  Microsoft::ReactNative::WindowsComponentDescriptorRegistry::FromProperties(
-                      winrt::Microsoft::ReactNative::ReactPropertyBag(m_options.Properties));
-              auto hasComponentProvider = [componentDescriptorRegistry](const std::string &name) -> bool {
-                return componentDescriptorRegistry->hasComponentProvider(
-                    facebook::react::componentNameByReactViewName(name));
-              };
-              facebook::react::bindHasComponentProvider(runtime, std::move(hasComponentProvider));
+              callInvoker = std::make_shared<facebook::react::RuntimeSchedulerCallInvoker>(
+                  m_bridgelessReactInstance->getRuntimeScheduler());
 
-              // init TurboModule
-              for (const auto &moduleName : turboModuleManager->getEagerInitModuleNames()) {
-                turboModuleManager->getModule(moduleName);
-              }
+              winrt::Microsoft::ReactNative::implementation::CallInvoker::SetProperties(
+                  ReactPropertyBag(m_options.Properties),
+                  winrt::make<winrt::Microsoft::ReactNative::implementation::CallInvoker>(
+                      *m_reactContext, std::shared_ptr<facebook::react::CallInvoker>(callInvoker)));
             });
 
             m_options.TurboModuleProvider->SetReactContext(
                 winrt::make<implementation::ReactContext>(Mso::Copy(m_reactContext)));
 
-            FireInstanceCreatedCallback();
+            facebook::react::ReactInstance::JSRuntimeFlags options;
+            m_bridgelessReactInstance->initializeRuntime(
+                options,
+                [=, onCreated = m_options.OnInstanceCreated, reactContext = m_reactContext](
+                    facebook::jsi::Runtime &runtime) {
+                  auto logger = [loggingHook = GetLoggingCallback()](
+                                    const std::string &message, unsigned int logLevel) {
+                    if (loggingHook)
+                      loggingHook(static_cast<facebook::react::RCTLogLevel>(logLevel), message.c_str());
+                  };
+                  facebook::react::bindNativeLogger(runtime, logger);
+
+                  auto turboModuleManager =
+                      std::make_shared<facebook::react::TurboModuleManager>(m_options.TurboModuleProvider, callInvoker);
+
+                  auto binding =
+                      [turboModuleManager](const std::string &name) -> std::shared_ptr<facebook::react::TurboModule> {
+                    return turboModuleManager->getModule(name);
+                  };
+
+                  // Use a legacy native module binding that always returns null
+                  // This means that calls to NativeModules.XXX will always return null, rather than crashing on access
+                  auto legacyNativeModuleBinding =
+                      [](const std::string & /*name*/) -> std::shared_ptr<facebook::react::TurboModule> {
+                    return nullptr;
+                  };
+
+                  facebook::react::TurboModuleBinding::install(
+                      runtime,
+                      std::function(binding),
+                      std::function(legacyNativeModuleBinding),
+                      m_options.TurboModuleProvider->LongLivedObjectCollection());
+
+                  auto componentDescriptorRegistry =
+                      Microsoft::ReactNative::WindowsComponentDescriptorRegistry::FromProperties(
+                          winrt::Microsoft::ReactNative::ReactPropertyBag(m_options.Properties));
+                  auto hasComponentProvider = [componentDescriptorRegistry](const std::string &name) -> bool {
+                    return componentDescriptorRegistry->hasComponentProvider(
+                        facebook::react::componentNameByReactViewName(name));
+                  };
+                  facebook::react::bindHasComponentProvider(runtime, std::move(hasComponentProvider));
+
+                  // init TurboModule
+                  for (const auto &moduleName : turboModuleManager->getEagerInitModuleNames()) {
+                    turboModuleManager->getModule(moduleName);
+                  }
+
+                  if (onCreated) {
+                    onCreated.Get()->Invoke(reactContext);
+                  }
+                });
 
             LoadJSBundlesBridgeless(devSettings);
             SetupHMRClient();
@@ -1092,9 +1101,9 @@ Mso::Future<void> ReactInstanceWin::Destroy() noexcept {
         }
         this->m_bridgelessReactInstance = nullptr;
         jsMessageThread->quitSynchronous();
+        m_whenDestroyed.SetValue();
       });
     }
-    m_jsDispatchQueue.Exchange(nullptr);
   }
 #endif
 
@@ -1112,13 +1121,19 @@ ReactInstanceState ReactInstanceWin::State() const noexcept {
 void ReactInstanceWin::InitJSMessageThread() noexcept {
   m_instance.Exchange(std::make_shared<facebook::react::Instance>());
 
+  auto callInvoker = m_instance.Load()->getJSCallInvoker();
   auto scheduler = Mso::MakeJSCallInvokerScheduler(
       CreateDispatchQueueSettings(m_reactContext->Notifications()),
-      m_instance.Load()->getJSCallInvoker(),
+      std::shared_ptr<facebook::react::CallInvoker>(callInvoker),
       Mso::MakeWeakMemberFunctor(this, &ReactInstanceWin::OnError),
       Mso::Copy(m_whenDestroyed));
   auto jsDispatchQueue = Mso::DispatchQueue::MakeCustomQueue(Mso::CntPtr(scheduler));
 
+  winrt::Microsoft::ReactNative::implementation::CallInvoker::SetProperties(
+      ReactPropertyBag(m_options.Properties),
+      winrt::make<winrt::Microsoft::ReactNative::implementation::CallInvoker>(
+          *m_reactContext, std::shared_ptr<facebook::react::CallInvoker>(callInvoker)));
+
   auto jsDispatcher =
       winrt::make<winrt::Microsoft::ReactNative::implementation::ReactDispatcher>(Mso::Copy(jsDispatchQueue));
   m_options.Properties.Set(ReactDispatcherHelper::JSDispatcherProperty(), jsDispatcher);
@@ -1161,11 +1176,6 @@ void ReactInstanceWin::InitUIMessageThread() noexcept {
       });
 }
 
-bool ReactInstanceWin::IsBridgeless() noexcept {
-  return winrt::Microsoft::ReactNative::implementation::QuirkSettings::GetIsBridgeless(
-      winrt::Microsoft::ReactNative::ReactPropertyBag(m_reactContext->Properties()));
-}
-
 #if !defined(CORE_ABI) && !defined(USE_FABRIC)
 void ReactInstanceWin::InitUIManager() noexcept {
   std::vector<std::unique_ptr<Microsoft::ReactNative::IViewManager>> viewManagers;

package/Microsoft.ReactNative/ReactHost/ReactInstanceWin.h

@@ -136,7 +136,6 @@ class ReactInstanceWin final : public Mso::ActiveObject<IReactInstanceInternal>
   std::shared_ptr<Mso::React::IRedBoxHandler> GetRedBoxHandler() noexcept;
   std::function<void()> GetWaitingForDebuggerCallback() noexcept;
   std::function<void()> GetDebuggerAttachCallback() noexcept;
-  bool IsBridgeless() noexcept;
 
   void OnError(const Mso::ErrorCode &errorcode) noexcept;
   void OnErrorWithMessage(const std::string &errorMessage) noexcept;
@@ -188,7 +187,7 @@ class ReactInstanceWin final : public Mso::ActiveObject<IReactInstanceInternal>
   mutable std::mutex m_mutex;
 
   // !Bridgeless
-  const Mso::ActiveReadableField<Mso::DispatchQueue> m_jsDispatchQueue{Queue(), m_mutex};
+  const Mso::ActiveReadableField<Mso::DispatchQueue> m_jsDispatchQueue{nullptr, Queue(), m_mutex};
   const Mso::ActiveReadableField<std::shared_ptr<facebook::react::MessageQueueThread>> m_jsMessageThread{
       Queue(),
       m_mutex};

package/Microsoft.ReactNative/ReactInstanceSettings.cpp

@@ -20,6 +20,12 @@ winrt::Microsoft::ReactNative::IReactContext InstanceCreatedEventArgs::Context()
   return m_context;
 }
 
+winrt::Windows::Foundation::IInspectable InstanceCreatedEventArgs::RuntimeHandle() noexcept {
+  return winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactContext>(m_context)
+      ->GetInner()
+      .JsiRuntime();
+}
+
 InstanceLoadedEventArgs::InstanceLoadedEventArgs(Mso::CntPtr<Mso::React::IReactContext> &&context, bool failed)
     : m_context(winrt::make<ReactContext>(std::move(context))), m_failed(failed) {}
 
@@ -31,6 +37,12 @@ winrt::Microsoft::ReactNative::IReactContext InstanceLoadedEventArgs::Context()
   return m_context;
 }
 
+winrt::Windows::Foundation::IInspectable InstanceLoadedEventArgs::RuntimeHandle() noexcept {
+  return winrt::get_self<winrt::Microsoft::ReactNative::implementation::ReactContext>(m_context)
+      ->GetInner()
+      .JsiRuntime();
+}
+
 InstanceDestroyedEventArgs::InstanceDestroyedEventArgs(Mso::CntPtr<Mso::React::IReactContext> &&context)
     : m_context(winrt::make<ReactContext>(std::move(context))) {}
 

package/Microsoft.ReactNative/ReactInstanceSettings.h

@@ -19,6 +19,7 @@ struct InstanceCreatedEventArgs : InstanceCreatedEventArgsT<InstanceCreatedEvent
   InstanceCreatedEventArgs(Mso::CntPtr<Mso::React::IReactContext> &&context);
 
   winrt::Microsoft::ReactNative::IReactContext Context() noexcept;
+  winrt::Windows::Foundation::IInspectable RuntimeHandle() noexcept;
 
  private:
   winrt::Microsoft::ReactNative::IReactContext m_context;
@@ -29,6 +30,7 @@ struct InstanceLoadedEventArgs : InstanceLoadedEventArgsT<InstanceLoadedEventArg
   InstanceLoadedEventArgs(Mso::CntPtr<Mso::React::IReactContext> &&context, bool failed);
 
   winrt::Microsoft::ReactNative::IReactContext Context() noexcept;
+  winrt::Windows::Foundation::IInspectable RuntimeHandle() noexcept;
   bool Failed() noexcept;
 
  private:

package/Microsoft.ReactNative/ReactInstanceSettings.idl

@@ -45,6 +45,9 @@ namespace Microsoft.ReactNative
   {
     DOC_STRING("Gets the @IReactContext for the React instance that was just created.")
     IReactContext Context { get; };
+
+    DOC_STRING("Provides access to the jsi::Runtime for synchronous access using GetOrCreateContextRuntime")
+    Object RuntimeHandle { get; };
   }
 
   [webhosthidden]
@@ -57,6 +60,9 @@ namespace Microsoft.ReactNative
 
     DOC_STRING("Returns `true` if the JavaScript bundle failed to load.")
     Boolean Failed { get; };
+
+    DOC_STRING("Provides access to the jsi::Runtime for synchronous access using GetOrCreateContextRuntime")
+    Object RuntimeHandle { get; };
   }
 
   [webhosthidden]

package/Microsoft.ReactNative/ReactNativeIsland.idl

@@ -119,6 +119,9 @@ namespace Microsoft.ReactNative
     Microsoft.ReactNative.Composition.Theme Theme { get; };
     Int64 RootTag { get; };
 
+    DOC_STRING("Initial props should be set on ReactViewHost. This is used to update props after the initial props are set")
+    void SetProperties(JSValueArgWriter props);
+
 #ifdef USE_WINUI3
     Microsoft.UI.Content.ContentIsland Island { get; };
 #endif

package/Microsoft.ReactNative/ReactSupport.cpp

@@ -82,21 +82,30 @@ folly::dynamic ConvertToDynamic(IInspectable const &object) {
     case PropertyType::BooleanArray: {
       com_array<bool> tmpArray;
       propValue.GetBooleanArray(tmpArray);
-      folly::dynamic d(tmpArray.begin(), tmpArray.end());
+      folly::dynamic d = folly::dynamic::array();
+      for (bool b : tmpArray) {
+        d.push_back(folly::dynamic(b));
+      }
       value = d;
       break;
     }
     case PropertyType::Char16Array: {
       com_array<char16_t> tmpArray;
       propValue.GetChar16Array(tmpArray);
-      folly::dynamic d(tmpArray.begin(), tmpArray.end());
+      folly::dynamic d = folly::dynamic::array();
+      for (char16_t b : tmpArray) {
+        d.push_back(folly::dynamic(b));
+      }
       value = d;
       break;
     }
     case PropertyType::DoubleArray: {
       com_array<double_t> tmpArray;
       propValue.GetDoubleArray(tmpArray);
-      folly::dynamic d(tmpArray.begin(), tmpArray.end());
+      folly::dynamic d = folly::dynamic::array();
+      for (double_t b : tmpArray) {
+        d.push_back(folly::dynamic(b));
+      }
       value = d;
       break;
     }
@@ -113,28 +122,40 @@ folly::dynamic ConvertToDynamic(IInspectable const &object) {
     case PropertyType::Int16Array: {
       com_array<int16_t> tmpArray;
       propValue.GetInt16Array(tmpArray);
-      folly::dynamic d(tmpArray.begin(), tmpArray.end());
+      folly::dynamic d = folly::dynamic::array();
+      for (int16_t b : tmpArray) {
+        d.push_back(folly::dynamic(b));
+      }
       value = d;
       break;
     }
     case PropertyType::Int32Array: {
       com_array<int32_t> tmpArray;
       propValue.GetInt32Array(tmpArray);
-      folly::dynamic d(tmpArray.begin(), tmpArray.end());
+      folly::dynamic d = folly::dynamic::array();
+      for (int32_t b : tmpArray) {
+        d.push_back(folly::dynamic(b));
+      }
       value = d;
       break;
     }
     case PropertyType::Int64Array: {
       com_array<int64_t> tmpArray;
       propValue.GetInt64Array(tmpArray);
-      folly::dynamic d(tmpArray.begin(), tmpArray.end());
+      folly::dynamic d = folly::dynamic::array();
+      for (int64_t b : tmpArray) {
+        d.push_back(folly::dynamic(b));
+      }
       value = d;
       break;
     }
     case PropertyType::SingleArray: {
       com_array<float> tmpArray;
       propValue.GetSingleArray(tmpArray);
-      folly::dynamic d(tmpArray.begin(), tmpArray.end());
+      folly::dynamic d = folly::dynamic::array();
+      for (float b : tmpArray) {
+        d.push_back(folly::dynamic(b));
+      }
       value = d;
       break;
     }
@@ -151,28 +172,40 @@ folly::dynamic ConvertToDynamic(IInspectable const &object) {
     case PropertyType::UInt8Array: {
       com_array<uint8_t> tmpArray;
       propValue.GetUInt8Array(tmpArray);
-      folly::dynamic d(tmpArray.begin(), tmpArray.end());
+      folly::dynamic d = folly::dynamic::array();
+      for (uint8_t b : tmpArray) {
+        d.push_back(folly::dynamic(b));
+      }
       value = d;
       break;
     }
     case PropertyType::UInt16Array: {
       com_array<uint16_t> tmpArray;
       propValue.GetUInt16Array(tmpArray);
-      folly::dynamic d(tmpArray.begin(), tmpArray.end());
+      folly::dynamic d = folly::dynamic::array();
+      for (uint16_t b : tmpArray) {
+        d.push_back(folly::dynamic(b));
+      }
       value = d;
       break;
     }
     case PropertyType::UInt32Array: {
       com_array<uint32_t> tmpArray;
       propValue.GetUInt32Array(tmpArray);
-      folly::dynamic d(tmpArray.begin(), tmpArray.end());
+      folly::dynamic d = folly::dynamic::array();
+      for (uint32_t b : tmpArray) {
+        d.push_back(folly::dynamic(b));
+      }
       value = d;
       break;
     }
     case PropertyType::UInt64Array: {
       com_array<uint64_t> tmpArray;
       propValue.GetUInt64Array(tmpArray);
-      folly::dynamic d(tmpArray.begin(), tmpArray.end());
+      folly::dynamic d = folly::dynamic::array();
+      for (uint64_t b : tmpArray) {
+        d.push_back(folly::dynamic(b));
+      }
       value = d;
       break;
     }

package/Microsoft.ReactNative/RedBox.cpp

@@ -83,7 +83,36 @@ struct RedBox : public std::enable_shared_from_this<RedBox> {
     // Ideally we'd have a dialog we could push UI updates to. -- Maybe we could load XAML and host the XAML dialog?
 
     std::stringstream ss;
-    ss << m_errorInfo.Message;
+
+    const std::regex colorsRegex(
+        "(\\x1b\\[[0-9;]*m)|(\\\\u001b\\[\\d*m)"); // strip out console colors which is often added to JS error messages
+    auto message = std::regex_replace(m_errorInfo.Message, colorsRegex, "");
+    bool needsMessage = true;
+
+    if (!message.empty() && message[0] == '{') {
+      try {
+        auto json = folly::parseJson(message);
+
+        if (json.count("type") && json["type"] == "TransformError") {
+          ss << "TransformError: " << std::endl;
+          if (json.count("errors")) {
+            for (const auto &err : json["errors"]) {
+              ss << "Filename: " << err["filename"] << std::endl;
+              ss << "lineNumber: " << err["lineNumber"] << std::endl;
+              ss << err["description"] << std::endl;
+            }
+          }
+          needsMessage = false;
+        } else {
+          message = folly::toPrettyJson(json);
+          message = std::regex_replace(m_errorInfo.Message, colorsRegex, "");
+        }
+      } catch (...) {
+      }
+    }
+
+    if (needsMessage)
+      ss << message;
     ss << std::endl << std::endl;
     for (auto frame : m_errorInfo.Callstack) {
       ss << frame.Method << "\n" << frame.File << ":" << frame.Line << ":" << frame.Column << std::endl;