react-native-windows 0.0.0-canary.587 → 0.0.0-canary.588

package/Microsoft.ReactNative/CompositionHwndHost.idl

@@ -2,6 +2,7 @@
 // Licensed under the MIT License.
 
 import "IJSValueWriter.idl";
+import "ReactCoreInjection.idl";
 import "ReactNativeHost.idl";
 #include "NamespaceRedirect.h"
 #include "DocString.h"
@@ -21,18 +22,12 @@ namespace Microsoft.ReactNative
 
     void Initialize(UInt64 hwnd);
 
-    DOC_STRING("The @ReactNativeHost associated with the @CompositionRootView. It must be set to show any React UI elements.")
-    ReactNativeHost ReactNativeHost { get; set; };
-
-    Int64 TranslateMessage(UInt32 msg, UInt64 wParam, Int64 lParam);
-
     DOC_STRING(
-      "The name of the root UI component registered in JavaScript with help of the "
-      "[`AppRegistry.registerComponent`](https://reactnative.dev/docs/appregistry#registercomponent) method.")
-    String ComponentName { get; set; };
+      "A ReactViewHost specifies the root UI component and initial properties to render in this RootView"
+      "It must be set to show any React UI elements.")
+    IReactViewHost ReactViewHost { get; set; };
 
-    DOC_STRING("The @JSValueArgWriter that is used to serialize the main component initial properties.")
-    JSValueArgWriter InitialProps { get; set; };
+    Int64 TranslateMessage(UInt32 msg, UInt64 wParam, Int64 lParam);
   }
 
 } // namespace Microsoft.ReactNative

package/Microsoft.ReactNative/CompositionRootView.idl

@@ -3,6 +3,7 @@
 
 import "CompositionContext.idl";
 import "IJSValueWriter.idl";
+import "ReactCoreInjection.idl";
 import "ReactNativeHost.idl";
 #include "NamespaceRedirect.h"
 #include "DocString.h"
@@ -18,8 +19,10 @@ namespace Microsoft.ReactNative
     DOC_STRING("Creates a new instance of @CompositionRootView.")
     CompositionRootView();
 
-    DOC_STRING("The @ReactNativeHost associated with the @CompositionRootView. It must be set to show any React UI elements.")
-    ReactNativeHost ReactNativeHost { get; set; };
+    DOC_STRING(
+      "A ReactViewHost specifies the root UI component and initial properties to render in this RootView"
+      "It must be set to show any React UI elements.")
+    IReactViewHost ReactViewHost { get; set; };
 
     DOC_STRING("The RootVisual associated with the @CompositionRootView. It must be set to show any React UI elements.")
     Microsoft.ReactNative.Composition.IVisual RootVisual { get; set; };
@@ -37,17 +40,6 @@ namespace Microsoft.ReactNative
     //void OnPointerPressed(PointerPressedArgs args);
     //void OnMouseUp(Windows.Foundation.Point point);
     void OnScrollWheel(Windows.Foundation.Point point, Int32 delta);
-
-    DOC_STRING(
-      "The name of the root UI component registered in JavaScript with help of the "
-      "[`AppRegistry.registerComponent`](https://reactnative.dev/docs/appregistry#registercomponent) method.")
-    String ComponentName { get; set; };
-
-    DOC_STRING("The @JSValueArgWriter that is used to serialize the main component initial properties.")
-    JSValueArgWriter InitialProps { get; set; };
-
-    DOC_STRING("Reloads the current @ReactRootView UI components.")
-    void ReloadView();
   }
 
 } // namespace Microsoft.ReactNative

package/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.cpp

@@ -66,10 +66,11 @@ facebook::react::SharedEventEmitter EventEmitterForComponent(
   return nullptr;
 }
 
-CompositionEventHandler::CompositionEventHandler(const Mso::React::IReactContext &context) : m_context(&context) {}
+CompositionEventHandler::CompositionEventHandler(const winrt::Microsoft::ReactNative::ReactContext &context)
+    : m_context(context) {}
 
 CompositionEventHandler::CompositionEventHandler(
-    const Mso::React::IReactContext &context,
+    const winrt::Microsoft::ReactNative::ReactContext &context,
     const winrt::Microsoft::ReactNative::CompositionRootView &CompositionRootView)
     : CompositionEventHandler(context) {
   m_compRootView = CompositionRootView;
@@ -108,8 +109,8 @@ void CompositionEventHandler::ScrollWheel(
     facebook::react::SurfaceId surfaceId,
     facebook::react::Point pt,
     uint32_t delta) {
-  if (std::shared_ptr<FabricUIManager> fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
-          winrt::Microsoft::ReactNative::ReactPropertyBag(m_context->Properties()))) {
+  if (std::shared_ptr<FabricUIManager> fabricuiManager =
+          ::Microsoft::ReactNative::FabricUIManager::FromProperties(m_context.Properties())) {
     facebook::react::Point ptLocal;
 
     auto rootComponentViewDescriptor = fabricuiManager->GetViewRegistry().componentViewDescriptorWithTag(surfaceId);
@@ -302,8 +303,8 @@ void CompositionEventHandler::HandleIncomingPointerEvent(
   }
 
   std::vector<ReactTaggedView> hoveredViews;
-  std::shared_ptr<FabricUIManager> fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
-      winrt::Microsoft::ReactNative::ReactPropertyBag(m_context->Properties()));
+  std::shared_ptr<FabricUIManager> fabricuiManager =
+      ::Microsoft::ReactNative::FabricUIManager::FromProperties(m_context.Properties());
   auto &viewRegistry = fabricuiManager->GetViewRegistry();
   for (auto &view : eventPathViews) {
     auto componentViewDescriptor = viewRegistry.componentViewDescriptorWithTag(view->tag());
@@ -376,8 +377,8 @@ void CompositionEventHandler::MouseMove(
   auto x = GET_X_LPARAM(lParam);
   auto y = GET_Y_LPARAM(lParam);
 
-  if (std::shared_ptr<FabricUIManager> fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
-          winrt::Microsoft::ReactNative::ReactPropertyBag(m_context->Properties()))) {
+  if (std::shared_ptr<FabricUIManager> fabricuiManager =
+          ::Microsoft::ReactNative::FabricUIManager::FromProperties(m_context.Properties())) {
     facebook::react::Point ptLocal;
 
     auto rootComponentViewDescriptor = fabricuiManager->GetViewRegistry().componentViewDescriptorWithTag(surfaceId);
@@ -431,8 +432,8 @@ void CompositionEventHandler::PointerPressed(
 
   const auto eventType = TouchEventType::Start;
 
-  if (std::shared_ptr<FabricUIManager> fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
-          winrt::Microsoft::ReactNative::ReactPropertyBag(m_context->Properties()))) {
+  if (std::shared_ptr<FabricUIManager> fabricuiManager =
+          ::Microsoft::ReactNative::FabricUIManager::FromProperties(m_context.Properties())) {
     facebook::react::Point ptLocal;
 
     auto rootComponentViewDescriptor = fabricuiManager->GetViewRegistry().componentViewDescriptorWithTag(surfaceId);
@@ -514,8 +515,8 @@ void CompositionEventHandler::ButtonDown(
   auto y = GET_Y_LPARAM(lParam);
   const auto eventType = TouchEventType::Start;
 
-  if (std::shared_ptr<FabricUIManager> fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
-          winrt::Microsoft::ReactNative::ReactPropertyBag(m_context->Properties()))) {
+  if (std::shared_ptr<FabricUIManager> fabricuiManager =
+          ::Microsoft::ReactNative::FabricUIManager::FromProperties(m_context.Properties())) {
     facebook::react::Point ptLocal;
 
     auto rootComponentViewDescriptor = fabricuiManager->GetViewRegistry().componentViewDescriptorWithTag(surfaceId);
@@ -583,8 +584,8 @@ void CompositionEventHandler::PointerUp(
 
   const auto eventType = TouchEventType::Start;
 
-  if (std::shared_ptr<FabricUIManager> fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
-          winrt::Microsoft::ReactNative::ReactPropertyBag(m_context->Properties()))) {
+  if (std::shared_ptr<FabricUIManager> fabricuiManager =
+          ::Microsoft::ReactNative::FabricUIManager::FromProperties(m_context.Properties())) {
     facebook::react::Point ptLocal;
 
     auto rootComponentViewDescriptor = fabricuiManager->GetViewRegistry().componentViewDescriptorWithTag(surfaceId);
@@ -624,8 +625,8 @@ void CompositionEventHandler::ButtonUp(
   auto x = GET_X_LPARAM(lParam);
   auto y = GET_Y_LPARAM(lParam);
 
-  if (std::shared_ptr<FabricUIManager> fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
-          winrt::Microsoft::ReactNative::ReactPropertyBag(m_context->Properties()))) {
+  if (std::shared_ptr<FabricUIManager> fabricuiManager =
+          ::Microsoft::ReactNative::FabricUIManager::FromProperties(m_context.Properties())) {
     facebook::react::Point ptLocal;
 
     auto rootComponentViewDescriptor = fabricuiManager->GetViewRegistry().componentViewDescriptorWithTag(surfaceId);
@@ -726,8 +727,7 @@ void CompositionEventHandler::DispatchTouchEvent(
     facebook::react::SurfaceId surfaceId,
     TouchEventType eventType,
     PointerId pointerId) {
-  auto fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
-      winrt::Microsoft::ReactNative::ReactPropertyBag(m_context->Properties()));
+  auto fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(m_context.Properties());
 
   if (!fabricuiManager)
     return;

package/Microsoft.ReactNative/Fabric/Composition/CompositionEventHandler.h

@@ -5,6 +5,7 @@
 #include <Fabric/ReactTaggedView.h>
 #include <IReactInstance.h>
 #include <JSValue.h>
+#include <ReactContext.h>
 #include <react/renderer/components/view/PointerEvent.h>
 #include <react/renderer/components/view/Touch.h>
 #include <react/renderer/components/view/TouchEventEmitter.h>
@@ -26,9 +27,9 @@ typedef int PointerId;
 
 class CompositionEventHandler {
  public:
-  CompositionEventHandler(const Mso::React::IReactContext &context);
+  CompositionEventHandler(const winrt::Microsoft::ReactNative::ReactContext &context);
   CompositionEventHandler(
-      const Mso::React::IReactContext &context,
+      const winrt::Microsoft::ReactNative::ReactContext &context,
       const winrt::Microsoft::ReactNative::CompositionRootView &CompositionRootView);
   virtual ~CompositionEventHandler();
 
@@ -109,7 +110,7 @@ class CompositionEventHandler {
 
   std::map<PointerId, std::vector<ReactTaggedView>> m_currentlyHoveredViewsPerPointer;
   winrt::Microsoft::ReactNative::CompositionRootView m_compRootView{nullptr};
-  Mso::CntPtr<const Mso::React::IReactContext> m_context;
+  winrt::Microsoft::ReactNative::ReactContext m_context;
 };
 
 } // namespace Microsoft::ReactNative

package/Microsoft.ReactNative/Fabric/Composition/CompositionHwndHost.cpp

@@ -54,9 +54,7 @@ void CompositionHwndHost::Initialize(uint64_t hwnd) noexcept {
   CreateDesktopWindowTarget(m_hwnd);
   CreateCompositionRoot();
 
-  m_compRootView.InitialProps(std::move(m_initialPropsWriter));
-  m_compRootView.ComponentName(std::move(m_componentName));
-  m_compRootView.ReactNativeHost(std::move(m_reactNativeHost));
+  m_compRootView.ReactViewHost(std::move(m_reactViewHost));
 
   m_compRootView.ScaleFactor(ScaleFactor());
   m_compRootView.RootVisual(
@@ -123,47 +121,25 @@ LRESULT CompositionHwndHost::TranslateMessage(int msg, uint64_t wParam, int64_t
   return 0;
 }
 
-ReactNative::ReactNativeHost CompositionHwndHost::ReactNativeHost() const noexcept {
-  return m_reactNativeHost ? m_reactNativeHost : m_compRootView.ReactNativeHost();
+ReactNative::IReactViewHost CompositionHwndHost::ReactViewHost() const noexcept {
+  return m_reactViewHost ? m_reactViewHost : m_compRootView.ReactViewHost();
 }
 
-void CompositionHwndHost::ReactNativeHost(ReactNative::ReactNativeHost const &value) noexcept {
+void CompositionHwndHost::ReactViewHost(ReactNative::IReactViewHost const &value) noexcept {
   if (m_compRootView) {
-    m_compRootView.ReactNativeHost(value);
+    m_compRootView.ReactViewHost(value);
   } else {
-    m_reactNativeHost = value;
+    m_reactViewHost = value;
   }
 }
 
 winrt::Windows::UI::Composition::Compositor CompositionHwndHost::Compositor() const noexcept {
   auto compositionContext =
       winrt::Microsoft::ReactNative::Composition::implementation::CompositionUIService::GetCompositionContext(
-          ReactNativeHost().InstanceSettings().Properties());
+          m_reactViewHost.ReactNativeHost().InstanceSettings().Properties());
 
   return winrt::Microsoft::ReactNative::Composition::implementation::CompositionContextHelper::InnerCompositor(
       compositionContext);
 }
 
-winrt::hstring CompositionHwndHost::ComponentName() noexcept {
-  return m_compRootView ? m_compRootView.ComponentName() : m_componentName;
-}
-
-void CompositionHwndHost::ComponentName(winrt::hstring const &value) noexcept {
-  if (m_compRootView)
-    m_compRootView.ComponentName(value);
-  else
-    m_componentName = value;
-}
-
-ReactNative::JSValueArgWriter CompositionHwndHost::InitialProps() noexcept {
-  return m_compRootView ? m_compRootView.InitialProps() : m_initialPropsWriter;
-}
-
-void CompositionHwndHost::InitialProps(ReactNative::JSValueArgWriter const &value) noexcept {
-  if (m_compRootView)
-    m_compRootView.InitialProps(value);
-  else
-    m_initialPropsWriter = value;
-}
-
 } // namespace winrt::Microsoft::ReactNative::implementation

package/Microsoft.ReactNative/Fabric/Composition/CompositionHwndHost.h

@@ -17,19 +17,9 @@ struct CompositionHwndHost : CompositionHwndHostT<CompositionHwndHost> {
 
   void Initialize(uint64_t hwnd) noexcept;
 
-  // property ReactNativeHost
-  ReactNative::ReactNativeHost ReactNativeHost() const noexcept;
-  void ReactNativeHost(ReactNative::ReactNativeHost const &value) noexcept;
+  winrt::Microsoft::ReactNative::IReactViewHost ReactViewHost() const noexcept;
+  void ReactViewHost(winrt::Microsoft::ReactNative::IReactViewHost const &value) noexcept;
 
-  // property ComponentName
-  hstring ComponentName() noexcept;
-  void ComponentName(hstring const &value) noexcept;
-
-  // property InitialProps
-  ReactNative::JSValueArgWriter InitialProps() noexcept;
-  void InitialProps(ReactNative::JSValueArgWriter const &value) noexcept;
-
-  void ReloadView() noexcept;
   winrt::Windows::UI::Composition::Visual RootVisual() const noexcept;
 
   LRESULT TranslateMessage(int msg, uint64_t wParam, int64_t lParam) noexcept;
@@ -49,9 +39,7 @@ struct CompositionHwndHost : CompositionHwndHostT<CompositionHwndHost> {
   winrt::Windows::UI::Composition::Desktop::DesktopWindowTarget m_target{nullptr};
 
   // Store locally if set before we have a rootview
-  hstring m_componentName;
-  ReactNative::ReactNativeHost m_reactNativeHost{nullptr};
-  ReactNative::JSValueArgWriter m_initialPropsWriter{nullptr};
+  ReactNative::IReactViewHost m_reactViewHost{nullptr};
 };
 
 } // namespace winrt::Microsoft::ReactNative::implementation

package/Microsoft.ReactNative/Fabric/Composition/CompositionRootView.cpp

@@ -4,35 +4,35 @@
 #include "CompositionRootView.h"
 #include "CompositionRootView.g.cpp"
 
+#include <DynamicWriter.h>
+#include <Fabric/FabricUIManagerModule.h>
 #include <IReactInstance.h>
+#include <Modules/ReactRootViewTagGenerator.h>
 #include <QuirkSettings.h>
 #include <ReactHost/MsoUtils.h>
 #include <Utils/Helpers.h>
 #include <dispatchQueue/dispatchQueue.h>
+#include <react/renderer/core/LayoutConstraints.h>
+#include <react/renderer/core/LayoutContext.h>
 #include <winrt/Windows.UI.Core.h>
 #include "CompositionContextHelper.h"
 #include "CompositionHelpers.h"
 #include "ReactNativeHost.h"
 
-#ifdef USE_FABRIC
-#include <Fabric/FabricUIManagerModule.h>
-#include <react/renderer/core/LayoutConstraints.h>
-#include <react/renderer/core/LayoutContext.h>
-#endif
-
 namespace winrt::Microsoft::ReactNative::implementation {
 
 //! This class ensures that we access ReactRootView from UI thread.
 struct CompositionReactViewInstance
-    : public Mso::UnknownObject<Mso::RefCountStrategy::WeakRef, Mso::React::IReactViewInstance> {
+    : public winrt::implements<CompositionReactViewInstance, winrt::Microsoft::ReactNative::IReactViewInstance> {
   CompositionReactViewInstance(
       winrt::weak_ref<winrt::Microsoft::ReactNative::implementation::CompositionRootView> &&weakRootControl) noexcept;
 
-  Mso::Future<void> InitRootView(
-      Mso::CntPtr<Mso::React::IReactInstance> &&reactInstance,
-      Mso::React::ReactViewOptions &&viewOptions) noexcept override;
-  Mso::Future<void> UpdateRootView() noexcept override;
-  Mso::Future<void> UninitRootView() noexcept override;
+  void InitRootView(
+      winrt::Microsoft::ReactNative::IReactContext context,
+      winrt::Microsoft::ReactNative::ReactViewOptions viewOptions) noexcept;
+
+  void UpdateRootView() noexcept;
+  void UninitRootView() noexcept;
 
  private:
   template <class TAction>
@@ -47,29 +47,28 @@ CompositionReactViewInstance::CompositionReactViewInstance(
     winrt::weak_ref<winrt::Microsoft::ReactNative::implementation::CompositionRootView> &&weakRootControl) noexcept
     : m_weakRootControl{std::move(weakRootControl)} {}
 
-Mso::Future<void> CompositionReactViewInstance::InitRootView(
-    Mso::CntPtr<Mso::React::IReactInstance> &&reactInstance,
-    Mso::React::ReactViewOptions &&viewOptions) noexcept {
-  m_uiDispatcher = reactInstance->GetReactContext()
-                       .Properties()
+void CompositionReactViewInstance::InitRootView(
+    winrt::Microsoft::ReactNative::IReactContext context,
+    winrt::Microsoft::ReactNative::ReactViewOptions viewOptions) noexcept {
+  m_uiDispatcher = context.Properties()
                        .Get(winrt::Microsoft::ReactNative::ReactDispatcherHelper::UIDispatcherProperty())
                        .try_as<IReactDispatcher>();
 
-  return PostInUIQueue([reactInstance{std::move(reactInstance)}, viewOptions{std::move(viewOptions)}](
-                           winrt::com_ptr<winrt::Microsoft::ReactNative::implementation::CompositionRootView>
-                               &rootControl) mutable noexcept {
-    rootControl->InitRootView(std::move(reactInstance), std::move(viewOptions));
+  PostInUIQueue([context{std::move(context)}, viewOptions{std::move(viewOptions)}](
+                    winrt::com_ptr<winrt::Microsoft::ReactNative::implementation::CompositionRootView>
+                        &rootControl) mutable noexcept {
+    rootControl->InitRootView(std::move(context), std::move(viewOptions));
   });
 }
 
-Mso::Future<void> CompositionReactViewInstance::UpdateRootView() noexcept {
-  return PostInUIQueue([](winrt::com_ptr<winrt::Microsoft::ReactNative::implementation::CompositionRootView>
-                              &rootControl) mutable noexcept { rootControl->UpdateRootView(); });
+void CompositionReactViewInstance::UpdateRootView() noexcept {
+  PostInUIQueue([](winrt::com_ptr<winrt::Microsoft::ReactNative::implementation::CompositionRootView>
+                       &rootControl) mutable noexcept { rootControl->UpdateRootView(); });
 }
 
-Mso::Future<void> CompositionReactViewInstance::UninitRootView() noexcept {
-  return PostInUIQueue([](winrt::com_ptr<winrt::Microsoft::ReactNative::implementation::CompositionRootView>
-                              &rootControl) mutable noexcept { rootControl->UninitRootView(); });
+void CompositionReactViewInstance::UninitRootView() noexcept {
+  PostInUIQueue([](winrt::com_ptr<winrt::Microsoft::ReactNative::implementation::CompositionRootView>
+                       &rootControl) mutable noexcept { rootControl->UninitRootView(); });
 }
 
 //===========================================================================
@@ -81,8 +80,8 @@ inline Mso::Future<void> CompositionReactViewInstance::PostInUIQueue(TAction &&a
   // ReactViewInstance has shorter lifetime than ReactRootControl. Thus, we capture this WeakPtr.
   auto promise = Mso::Promise<void>();
 
-  m_uiDispatcher.Post([promise, weakThis = Mso::WeakPtr{this}, action{std::forward<TAction>(action)}]() mutable {
-    if (auto strongThis = weakThis.GetStrongPtr()) {
+  m_uiDispatcher.Post([promise, weakThis{get_weak()}, action{std::forward<TAction>(action)}]() mutable {
+    if (auto strongThis = weakThis.get()) {
       if (auto rootControl = strongThis->m_weakRootControl.get()) {
         action(rootControl);
         promise.SetValue();
@@ -97,15 +96,24 @@ inline Mso::Future<void> CompositionReactViewInstance::PostInUIQueue(TAction &&a
 
 CompositionRootView::CompositionRootView() noexcept {}
 
-ReactNative::ReactNativeHost CompositionRootView::ReactNativeHost() noexcept {
-  return m_reactNativeHost;
+ReactNative::IReactViewHost CompositionRootView::ReactViewHost() noexcept {
+  return m_reactViewHost;
 }
 
-void CompositionRootView::ReactNativeHost(ReactNative::ReactNativeHost const &value) noexcept {
-  if (m_reactNativeHost != value) {
-    ReactViewHost(nullptr);
-    m_reactNativeHost = value;
-    ReloadView();
+void CompositionRootView::ReactViewHost(winrt::Microsoft::ReactNative::IReactViewHost const &value) noexcept {
+  if (m_reactViewHost == value) {
+    return;
+  }
+
+  if (m_reactViewHost) {
+    m_reactViewHost.DetachViewInstance();
+  }
+
+  m_reactViewHost = value;
+
+  if (m_reactViewHost) {
+    auto viewInstance = winrt::make<CompositionReactViewInstance>(this->get_weak());
+    m_reactViewHost.AttachViewInstance(viewInstance);
   }
 }
 
@@ -136,51 +144,12 @@ void CompositionRootView::ScaleFactor(double value) noexcept {
   m_scaleFactor = value;
 }
 
-winrt::hstring CompositionRootView::ComponentName() noexcept {
-  return m_componentName;
-}
-
-void CompositionRootView::ComponentName(winrt::hstring const &value) noexcept {
-  if (m_componentName != value) {
-    m_componentName = value;
-    ReloadView();
-  }
-}
-
-ReactNative::JSValueArgWriter CompositionRootView::InitialProps() noexcept {
-  return m_initialPropsWriter;
-}
-
-void CompositionRootView::InitialProps(ReactNative::JSValueArgWriter const &value) noexcept {
-  if (m_initialPropsWriter != value) {
-    m_initialPropsWriter = value;
-    ReloadView();
-  }
-}
-
-void CompositionRootView::ReloadView() noexcept {
-  if (m_reactNativeHost && !m_componentName.empty()) {
-    Mso::React::ReactViewOptions viewOptions{};
-    viewOptions.ComponentName = to_string(m_componentName);
-    viewOptions.InitialProps = m_initialPropsWriter;
-    if (auto reactViewHost = ReactViewHost()) {
-      reactViewHost->ReloadViewInstanceWithOptions(std::move(viewOptions));
-    } else {
-      auto reactNativeHost = winrt::get_self<implementation::ReactNativeHost>(m_reactNativeHost);
-      auto newReactViewHost = reactNativeHost->ReactHost()->MakeViewHost(std::move(viewOptions));
-      ReactViewHost(newReactViewHost.Get());
-    }
-  } else {
-    ReactViewHost(nullptr);
-  }
-}
-
 winrt::Microsoft::ReactNative::Composition::IVisual CompositionRootView::GetVisual() const noexcept {
   return m_rootVisual;
 }
 
 std::string CompositionRootView::JSComponentName() const noexcept {
-  return to_string(m_componentName);
+  return to_string(m_reactViewOptions.ComponentName());
 }
 
 int64_t CompositionRootView::GetActualHeight() const noexcept {
@@ -189,7 +158,6 @@ int64_t CompositionRootView::GetActualHeight() const noexcept {
 
 int64_t CompositionRootView::GetActualWidth() const noexcept {
   return static_cast<int64_t>(m_size.Width);
-  // return static_cast<int64_t>(m_xamlRootView.ActualWidth());
 }
 
 int64_t CompositionRootView::GetTag() const noexcept {
@@ -225,10 +193,9 @@ void CompositionRootView::OnScrollWheel(Windows::Foundation::Point point, int32_
 }
 
 void CompositionRootView::InitRootView(
-    Mso::CntPtr<Mso::React::IReactInstance> &&reactInstance,
-    Mso::React::ReactViewOptions &&reactViewOptions) noexcept {
-  m_uiDispatcher = reactInstance->GetReactContext()
-                       .Properties()
+    winrt::Microsoft::ReactNative::IReactContext &&context,
+    winrt::Microsoft::ReactNative::ReactViewOptions &&viewOptions) noexcept {
+  m_uiDispatcher = context.Properties()
                        .Get(winrt::Microsoft::ReactNative::ReactDispatcherHelper::UIDispatcherProperty())
                        .try_as<IReactDispatcher>();
   VerifyElseCrash(m_uiDispatcher.HasThreadAccess());
@@ -237,16 +204,14 @@ void CompositionRootView::InitRootView(
     UninitRootView();
   }
 
-  m_reactOptions = std::make_unique<Mso::React::ReactOptions>(reactInstance->Options());
-  m_weakReactInstance = Mso::WeakPtr{reactInstance};
-  m_context = &reactInstance->GetReactContext();
+  m_context = winrt::Microsoft::ReactNative::ReactContext(std::move(context));
 
-  winrt::Microsoft::ReactNative::CompositionRootView CompositionRootView;
-  get_strong().as(CompositionRootView);
+  winrt::Microsoft::ReactNative::CompositionRootView compositionRootView;
+  get_strong().as(compositionRootView);
 
-  m_reactViewOptions = std::make_unique<Mso::React::ReactViewOptions>(std::move(reactViewOptions));
+  m_reactViewOptions = std::move(viewOptions);
   m_CompositionEventHandler =
-      std::make_shared<::Microsoft::ReactNative::CompositionEventHandler>(*m_context, CompositionRootView);
+      std::make_shared<::Microsoft::ReactNative::CompositionEventHandler>(m_context, compositionRootView);
 
   UpdateRootViewInternal();
 
@@ -260,23 +225,18 @@ void CompositionRootView::UpdateRootView() noexcept {
 }
 
 void CompositionRootView::UpdateRootViewInternal() noexcept {
-  if (auto reactInstance = m_weakReactInstance.GetStrongPtr()) {
-    switch (reactInstance->State()) {
-      case Mso::React::ReactInstanceState::Loading:
-        ShowInstanceLoading();
-        break;
-      case Mso::React::ReactInstanceState::WaitingForDebugger:
-        ShowInstanceWaiting();
-        break;
-      case Mso::React::ReactInstanceState::Loaded:
-        ShowInstanceLoaded();
-        break;
-      case Mso::React::ReactInstanceState::HasError:
-        ShowInstanceError();
-        break;
-      default:
-        VerifyElseCrashSz(false, "Unexpected value");
-    }
+  switch (m_context.Handle().LoadingState()) {
+    case winrt::Microsoft::ReactNative::LoadingState::Loading:
+      ShowInstanceLoading();
+      break;
+    case winrt::Microsoft::ReactNative::LoadingState::Loaded:
+      ShowInstanceLoaded();
+      break;
+    case winrt::Microsoft::ReactNative::LoadingState::HasError:
+      ShowInstanceError();
+      break;
+    default:
+      VerifyElseCrashSz(false, "Unexpected value");
   }
 }
 
@@ -286,16 +246,22 @@ void CompositionRootView::UninitRootView() noexcept {
   }
 
   if (m_isJSViewAttached) {
-    if (auto reactInstance = m_weakReactInstance.GetStrongPtr()) {
-      reactInstance->DetachRootView(this, true);
-    }
+    if (m_context.Handle().LoadingState() == winrt::Microsoft::ReactNative::LoadingState::HasError)
+      return;
+
+    auto uiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
+        winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties()));
+    uiManager->stopSurface(static_cast<facebook::react::SurfaceId>(GetTag()));
+
+    m_context.CallJSFunction(L"ReactFabric", L"unmountComponentAtNode", GetTag());
+
+    // Paper version gives the JS thread time to finish executing - Is this needed?
+    // m_jsMessageThread.Load()->runOnQueueSync([]() {});
   }
 
   m_rootTag = -1;
-  m_reactOptions = nullptr;
-  m_context.Clear();
+  m_context = nullptr;
   m_reactViewOptions = nullptr;
-  m_weakReactInstance = nullptr;
 
   m_isInitialized = false;
 }
@@ -308,42 +274,25 @@ void CompositionRootView::ShowInstanceLoaded() noexcept {
   if (m_rootVisual) {
     ClearLoadingUI();
 
-    if (auto reactInstance = m_weakReactInstance.GetStrongPtr()) {
-      reactInstance->AttachMeasuredRootView(this, Mso::Copy(m_reactViewOptions->InitialProps), true);
-    }
+    auto uiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
+        winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties()));
+
+    auto rootTag = ::Microsoft::ReactNative::getNextRootViewTag();
+    SetTag(rootTag);
+    uiManager->startSurface(
+        this, rootTag, JSComponentName(), DynamicWriter::ToDynamic(Mso::Copy(m_reactViewOptions.InitialProps())));
+
     m_isJSViewAttached = true;
   }
 }
 
 void CompositionRootView::ShowInstanceError() noexcept {}
 
-void CompositionRootView::ShowInstanceWaiting() noexcept {}
-
 void CompositionRootView::ShowInstanceLoading() noexcept {
-  if (!m_context->SettingsSnapshot().UseDeveloperSupport())
+  if (!Mso::React::ReactOptions::UseDeveloperSupport(m_context.Properties().Handle()))
     return;
-}
-
-Mso::React::IReactViewHost *CompositionRootView::ReactViewHost() noexcept {
-  return m_reactViewHost.Get();
-}
 
-void CompositionRootView::ReactViewHost(Mso::React::IReactViewHost *viewHost) noexcept {
-  if (m_reactViewHost.Get() == viewHost) {
-    return;
-  }
-
-  if (m_reactViewHost) {
-    UninitRootView();
-    m_reactViewHost->DetachViewInstance();
-  }
-
-  m_reactViewHost = viewHost;
-
-  if (m_reactViewHost) {
-    auto viewInstance = Mso::Make<CompositionReactViewInstance>(this->get_weak());
-    m_reactViewHost->AttachViewInstance(*viewInstance);
-  }
+  // TODO: Show loading UI here
 }
 
 Windows::Foundation::Size CompositionRootView::Measure(Windows::Foundation::Size const &availableSize) const {
@@ -351,7 +300,7 @@ Windows::Foundation::Size CompositionRootView::Measure(Windows::Foundation::Size
 
   if (m_isInitialized && m_rootTag != -1) {
     if (auto fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
-            winrt::Microsoft::ReactNative::ReactPropertyBag(m_context->Properties()))) {
+            winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties()))) {
       facebook::react::LayoutContext context;
       // TODO scaling factor
       context.pointScaleFactor = static_cast<facebook::react::Float>(m_scaleFactor);
@@ -382,7 +331,7 @@ Windows::Foundation::Size CompositionRootView::Measure(Windows::Foundation::Size
 Windows::Foundation::Size CompositionRootView::Arrange(Windows::Foundation::Size finalSize) const {
   if (m_isInitialized && m_rootTag != -1) {
     if (auto fabricuiManager = ::Microsoft::ReactNative::FabricUIManager::FromProperties(
-            winrt::Microsoft::ReactNative::ReactPropertyBag(m_context->Properties()))) {
+            winrt::Microsoft::ReactNative::ReactPropertyBag(m_context.Properties()))) {
       facebook::react::LayoutContext context;
       context.pointScaleFactor = static_cast<facebook::react::Float>(m_scaleFactor);
       context.fontSizeMultiplier = static_cast<facebook::react::Float>(m_scaleFactor);

package/Microsoft.ReactNative/Fabric/Composition/CompositionRootView.h

@@ -4,6 +4,7 @@
 
 #include "CompositionRootView.g.h"
 
+#include <ReactContext.h>
 #include <winrt/Microsoft.ReactNative.h>
 #include "CompositionEventHandler.h"
 #include "ReactHost/React.h"
@@ -14,22 +15,14 @@ namespace winrt::Microsoft::ReactNative::implementation {
 struct CompositionRootView : CompositionRootViewT<CompositionRootView>, ::Microsoft::ReactNative::ICompositionRootView {
   CompositionRootView() noexcept;
 
-  // property ReactNativeHost
-  ReactNative::ReactNativeHost ReactNativeHost() noexcept;
-  void ReactNativeHost(ReactNative::ReactNativeHost const &value) noexcept;
-
-  // property ComponentName
-  hstring ComponentName() noexcept;
-  void ComponentName(hstring const &value) noexcept;
+  // property ReactViewHost
+  ReactNative::IReactViewHost ReactViewHost() noexcept;
+  void ReactViewHost(ReactNative::IReactViewHost const &value) noexcept;
 
   // property RootVisual
   winrt::Microsoft::ReactNative::Composition::IVisual RootVisual() noexcept;
   void RootVisual(winrt::Microsoft::ReactNative::Composition::IVisual const &value) noexcept;
 
-  // property InitialProps
-  ReactNative::JSValueArgWriter InitialProps() noexcept;
-  void InitialProps(ReactNative::JSValueArgWriter const &value) noexcept;
-
   // property Size
   winrt::Windows::Foundation::Size Size() noexcept;
   void Size(winrt::Windows::Foundation::Size value) noexcept;
@@ -38,8 +31,6 @@ struct CompositionRootView : CompositionRootViewT<CompositionRootView>, ::Micros
   double ScaleFactor() noexcept;
   void ScaleFactor(double value) noexcept;
 
-  void ReloadView() noexcept;
-
   Windows::Foundation::Size Measure(Windows::Foundation::Size const &availableSize) const;
   Windows::Foundation::Size Arrange(Windows::Foundation::Size finalSize) const;
 
@@ -58,27 +49,21 @@ struct CompositionRootView : CompositionRootViewT<CompositionRootView>, ::Micros
 
  public: // IReactViewInstance UI-thread implementation
   void InitRootView(
-      Mso::CntPtr<Mso::React::IReactInstance> &&reactInstance,
-      Mso::React::ReactViewOptions &&viewOptions) noexcept;
+      winrt::Microsoft::ReactNative::IReactContext &&context,
+      winrt::Microsoft::ReactNative::ReactViewOptions &&viewOptions) noexcept;
   void UpdateRootView() noexcept;
   void UninitRootView() noexcept;
 
  private:
-  ReactNative::ReactNativeHost m_reactNativeHost{nullptr};
-  hstring m_componentName;
-  ReactNative::JSValueArgWriter m_initialPropsWriter;
-  bool m_isPerspectiveEnabled{true};
   bool m_isInitialized{false};
   bool m_isJSViewAttached{false};
   IReactDispatcher m_uiDispatcher{nullptr};
   int64_t m_rootTag{-1};
   double m_scaleFactor{1.0};
   winrt::Windows::Foundation::Size m_size;
-  std::unique_ptr<Mso::React::ReactOptions> m_reactOptions;
-  Mso::WeakPtr<Mso::React::IReactInstance> m_weakReactInstance;
-  Mso::CntPtr<Mso::React::IReactContext> m_context;
-  Mso::CntPtr<Mso::React::IReactViewHost> m_reactViewHost;
-  std::unique_ptr<Mso::React::ReactViewOptions> m_reactViewOptions;
+  winrt::Microsoft::ReactNative::ReactContext m_context;
+  winrt::Microsoft::ReactNative::IReactViewHost m_reactViewHost;
+  winrt::Microsoft::ReactNative::ReactViewOptions m_reactViewOptions;
   std::shared_ptr<::Microsoft::ReactNative::CompositionEventHandler> m_CompositionEventHandler;
   winrt::Microsoft::ReactNative::Composition::IVisual m_rootVisual{nullptr};
   void UpdateRootViewInternal() noexcept;
@@ -86,10 +71,7 @@ struct CompositionRootView : CompositionRootViewT<CompositionRootView>, ::Micros
   void EnsureLoadingUI() noexcept;
   void ShowInstanceLoaded() noexcept;
   void ShowInstanceError() noexcept;
-  void ShowInstanceWaiting() noexcept;
   void ShowInstanceLoading() noexcept;
-  Mso::React::IReactViewHost *ReactViewHost() noexcept;
-  void ReactViewHost(Mso::React::IReactViewHost *viewHost) noexcept;
 };
 
 } // namespace winrt::Microsoft::ReactNative::implementation

package/Microsoft.ReactNative/Modules/LogBoxModule.cpp

@@ -167,8 +167,10 @@ void LogBox::ShowOnUIThread() noexcept {
 
     if (!m_hwnd) {
       auto CompositionHwndHost = React::CompositionHwndHost();
-      CompositionHwndHost.ComponentName(L"LogBox");
-      CompositionHwndHost.ReactNativeHost(host);
+      winrt::Microsoft::ReactNative::ReactViewOptions viewOptions;
+      viewOptions.ComponentName(L"LogBox");
+      CompositionHwndHost.ReactViewHost(
+          winrt::Microsoft::ReactNative::ReactCoreInjection::MakeViewHost(host, viewOptions));
       HINSTANCE hInstance = GetModuleHandle(NULL);
       winrt::impl::abi<winrt::Microsoft::ReactNative::ICompositionHwndHost>::type *pHost{nullptr};
       winrt::com_ptr<::IUnknown> spunk;

package/Microsoft.ReactNative/ReactCoreInjection.cpp

@@ -70,7 +70,7 @@ ReactCoreInjection::PostToUIBatchingQueueProperty() noexcept {
                           .Get(winrt::Microsoft::ReactNative::ReactDispatcherHelper::UIDispatcherProperty())
                           .as<winrt::Microsoft::ReactNative::IReactDispatcher>();
   auto viewHost = rnhost->MakeViewHost(viewOptions.as<ReactViewOptions>()->CreateViewOptions());
-  return winrt::make<ReactViewHost>(*viewHost, uiDispatcher);
+  return winrt::make<ReactViewHost>(host, *viewHost, uiDispatcher);
 }
 
 /*static*/ void ReactCoreInjection::PostToUIBatchingQueue(
@@ -81,9 +81,10 @@ ReactCoreInjection::PostToUIBatchingQueueProperty() noexcept {
 }
 
 ReactViewHost::ReactViewHost(
+    const ReactNative::ReactNativeHost &host,
     Mso::React::IReactViewHost &viewHost,
     const winrt::Microsoft::ReactNative::IReactDispatcher &uiDispatcher)
-    : m_viewHost(&viewHost), m_uiDispatcher(uiDispatcher) {}
+    : m_host(host), m_viewHost(&viewHost), m_uiDispatcher(uiDispatcher) {}
 
 // ReactViewOptions ReactViewHost::Options() noexcept;
 // ReactNative::ReactNativeHost ReactViewHost::ReactHost() noexcept {}
@@ -157,4 +158,8 @@ winrt::Windows::Foundation::IAsyncAction ReactViewHost::DetachViewInstance() noe
   return make<Mso::AsyncActionFutureAdapter>(m_viewHost->DetachViewInstance());
 }
 
+winrt::Microsoft::ReactNative::ReactNativeHost ReactViewHost::ReactNativeHost() noexcept {
+  return m_host;
+}
+
 } // namespace winrt::Microsoft::ReactNative::implementation

package/Microsoft.ReactNative/ReactCoreInjection.h

@@ -50,6 +50,7 @@ struct ReactCoreInjection : ReactCoreInjectionT<ReactCoreInjection> {
 
 struct ReactViewHost : public winrt::implements<ReactViewHost, IReactViewHost> {
   ReactViewHost(
+      const winrt::Microsoft::ReactNative::ReactNativeHost &host,
       Mso::React::IReactViewHost &viewHost,
       const winrt::Microsoft::ReactNative::IReactDispatcher &uiDispatcher);
 
@@ -58,8 +59,10 @@ struct ReactViewHost : public winrt::implements<ReactViewHost, IReactViewHost> {
   Windows::Foundation::IAsyncAction UnloadViewInstance() noexcept;
   Windows::Foundation::IAsyncAction AttachViewInstance(IReactViewInstance viewInstance) noexcept;
   Windows::Foundation::IAsyncAction DetachViewInstance() noexcept;
+  winrt::Microsoft::ReactNative::ReactNativeHost ReactNativeHost() noexcept;
 
  private:
+  const ReactNative::ReactNativeHost m_host;
   Mso::CntPtr<Mso::React::IReactViewHost> m_viewHost;
   winrt::Microsoft::ReactNative::IReactDispatcher m_uiDispatcher;
 };
@@ -69,4 +72,4 @@ struct ReactViewHost : public winrt::implements<ReactViewHost, IReactViewHost> {
 namespace winrt::Microsoft::ReactNative::factory_implementation {
 struct ReactCoreInjection : ReactCoreInjectionT<ReactCoreInjection, implementation::ReactCoreInjection> {};
 struct ReactViewOptions : ReactViewOptionsT<ReactViewOptions, implementation::ReactViewOptions> {};
-} // namespace winrt::Microsoft::ReactNative::factory_implementation
+} // namespace winrt::Microsoft::ReactNative::factory_implementation

package/Microsoft.ReactNative/ReactCoreInjection.idl

@@ -63,6 +63,9 @@ DOC_STRING("Settings per each IReactViewHost associated with an IReactHost insta
 
     DOC_STRING("Detaches IReactViewInstance from the IReactViewHost.")
       Windows.Foundation.IAsyncAction DetachViewInstance();
+
+    DOC_STRING("The ReactNativeHost associated with this ReactViewHost.")
+      ReactNativeHost ReactNativeHost { get; };
   }
 
   [experimental]
@@ -89,4 +92,4 @@ DOC_STRING("Settings per each IReactViewHost associated with an IReactHost insta
   }
 
 
-} // namespace Microsoft.ReactNative
+} // namespace Microsoft.ReactNative

package/PropertySheets/Generated/PackageVersion.g.props

@@ -10,7 +10,7 @@
 -->
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <PropertyGroup>
-    <ReactNativeWindowsVersion>0.0.0-canary.587</ReactNativeWindowsVersion>
+    <ReactNativeWindowsVersion>0.0.0-canary.588</ReactNativeWindowsVersion>
     <ReactNativeWindowsMajor>0</ReactNativeWindowsMajor>
     <ReactNativeWindowsMinor>0</ReactNativeWindowsMinor>
     <ReactNativeWindowsPatch>0</ReactNativeWindowsPatch>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-windows",
-  "version": "0.0.0-canary.587",
+  "version": "0.0.0-canary.588",
   "license": "MIT",
   "repository": {
     "type": "git",