[Fabric] Move to using winrt objects for ComponentViews (#12580)

* Move to using winrt objects for ComponentViews

* Change files

* fix

Author: acoates-ms

change/react-native-windows-6e7b978e-4dbe-4508-9201-392c4f0b736d.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Move to using winrt objects for ComponentViews",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

vnext/Microsoft.ReactNative/ComponentView.idl

@@ -0,0 +1,15 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+#include "DocString.h"
+
+namespace Microsoft.ReactNative
+{
+
+  [experimental]
+  [webhosthidden]
+  unsealed runtimeclass ComponentView {
+    Int32 Tag { get; };
+  };
+
+} // namespace Microsoft.ReactNative

vnext/Microsoft.ReactNative/CompositionComponentView.idl

@@ -0,0 +1,79 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import "ComponentView.idl";
+import "Theme.idl";
+import "ViewProps.idl";
+
+#include "DocString.h"
+
+namespace Microsoft.ReactNative.Composition
+{
+
+  [experimental]
+  [webhosthidden]
+  unsealed runtimeclass ComponentView : Microsoft.ReactNative.ComponentView {
+    Theme Theme;
+  };
+
+  [experimental]
+  [webhosthidden]
+  unsealed runtimeclass ViewComponentView : ComponentView {
+    Microsoft.ReactNative.ViewProps ViewProps { get; };
+  };
+
+  [experimental]
+  [webhosthidden]
+  [default_interface]
+  unsealed runtimeclass SwitchComponentView : ComponentView {
+  };
+
+  [experimental]
+  [webhosthidden]
+  [default_interface]
+  unsealed runtimeclass RootComponentView : ViewComponentView {
+  };
+
+  [experimental]
+  [webhosthidden]
+  [default_interface]
+  unsealed runtimeclass AbiCompositionViewComponentView : ComponentView {
+  };
+
+  [experimental]
+  [webhosthidden]
+  [default_interface]
+  unsealed runtimeclass ActivityIndicatorComponentView : ComponentView {
+  };
+
+  [experimental]
+  [webhosthidden]
+  [default_interface]
+  unsealed runtimeclass ImageComponentView : ComponentView {
+  };
+
+  [experimental]
+  [webhosthidden]
+  [default_interface]
+  unsealed runtimeclass ParagraphComponentView : ComponentView {
+  };
+
+  [experimental]
+  [webhosthidden]
+  [default_interface]
+  unsealed runtimeclass ScrollViewComponentView : ComponentView {
+  };
+
+  [experimental]
+  [webhosthidden]
+  [default_interface]
+  unsealed runtimeclass UnimplementedNativeViewComponentView : ComponentView {
+  };
+
+  [experimental]
+  [webhosthidden]
+  [default_interface]
+  unsealed runtimeclass WindowsTextInputComponentView : ComponentView {
+  };
+  
+} // namespace Microsoft.ReactNative

vnext/Microsoft.ReactNative/Fabric/AbiViewProps.cpp

@@ -45,4 +45,10 @@ float UserViewProps::Opacity() noexcept {
   return m_viewProps ? m_viewProps->opacity : 1.0f;
 }
 
+ViewProps::ViewProps(facebook::react::SharedViewProps props) noexcept : m_props(props) {}
+
+float ViewProps::Opacity() noexcept {
+  return m_props->opacity;
+}
+
 } // namespace winrt::Microsoft::ReactNative::implementation

vnext/Microsoft.ReactNative/Fabric/AbiViewProps.h

@@ -45,4 +45,13 @@ struct UserViewProps : ViewPropsT<UserViewProps> {
   ::Microsoft::ReactNative::AbiViewProps const *m_viewProps{nullptr};
 };
 
+struct ViewProps : ViewPropsT<ViewProps> {
+  ViewProps(facebook::react::SharedViewProps props) noexcept;
+
+  float Opacity() noexcept;
+
+ private:
+  facebook::react::SharedViewProps m_props;
+};
+
 } // namespace winrt::Microsoft::ReactNative::implementation

vnext/Microsoft.ReactNative/Fabric/ComponentView.h

@@ -13,8 +13,15 @@
 
 #include <Fabric/Composition/Theme.h>
 #include <winrt/Microsoft.ReactNative.Composition.Input.h>
+#include <winrt/Microsoft.ReactNative.h>
 
-namespace Microsoft::ReactNative {
+#include "ComponentView.g.h"
+
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
+struct RootComponentView;
+}
+
+namespace winrt::Microsoft::ReactNative::implementation {
 
 enum class RNComponentViewUpdateMask : std::uint_fast8_t {
   None = 0,
@@ -34,8 +41,6 @@ enum class ClipState : std::uint_fast8_t {
 
 DEFINE_ENUM_FLAG_OPERATORS(RNComponentViewUpdateMask);
 
-struct RootComponentView;
-
 struct BringIntoViewOptions {
   bool AnimationDesired{false};
   // NaN will bring the element fully into view aligned to the nearest edge of the viewport
@@ -47,11 +52,11 @@ struct BringIntoViewOptions {
   float VerticalOffset{0};
 };
 
-struct IComponentView {
+struct ComponentView : public ComponentViewT<ComponentView> {
   virtual std::vector<facebook::react::ComponentDescriptorProvider>
   supplementalComponentDescriptorProviders() noexcept = 0;
-  virtual void mountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept = 0;
-  virtual void unmountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept = 0;
+  virtual void mountChildComponentView(ComponentView &childComponentView, uint32_t index) noexcept = 0;
+  virtual void unmountChildComponentView(ComponentView &childComponentView, uint32_t index) noexcept = 0;
   virtual void updateProps(
       facebook::react::Props::Shared const &props,
       facebook::react::Props::Shared const &oldProps) noexcept = 0;
@@ -66,16 +71,17 @@ struct IComponentView {
   virtual void prepareForRecycle() noexcept = 0;
   virtual facebook::react::Props::Shared props() noexcept = 0;
   virtual void handleCommand(std::string const &commandName, folly::dynamic const &arg) noexcept = 0;
-  virtual RootComponentView *rootComponentView() noexcept = 0;
-  virtual void parent(IComponentView *parent) noexcept = 0;
-  virtual IComponentView *parent() const noexcept = 0;
+  virtual winrt::Microsoft::ReactNative::Composition::implementation::RootComponentView *
+  rootComponentView() noexcept = 0;
+  virtual void parent(ComponentView *parent) noexcept = 0;
+  virtual ComponentView *parent() const noexcept = 0;
   virtual void theme(winrt::Microsoft::ReactNative::Composition::implementation::Theme *theme) noexcept = 0;
   virtual winrt::Microsoft::ReactNative::Composition::implementation::Theme *theme() const noexcept = 0;
   virtual void onThemeChanged() noexcept = 0;
-  virtual const std::vector<IComponentView *> &children() const noexcept = 0;
+  virtual const std::vector<ComponentView *> &children() const noexcept = 0;
   // Run fn on all children of this node until fn returns true
   // returns true if the fn ever returned true
-  virtual bool runOnChildren(bool forward, Mso::Functor<bool(IComponentView &)> &fn) noexcept = 0;
+  virtual bool runOnChildren(bool forward, Mso::Functor<bool(ComponentView &)> &fn) noexcept = 0;
   virtual RECT getClientRect() const noexcept = 0;
   // The offset from this elements parent to its children (accounts for things like scroll position)
   virtual facebook::react::Point getClientOffset() const noexcept = 0;
@@ -105,7 +111,7 @@ struct IComponentView {
   virtual bool focusable() const noexcept = 0;
   virtual facebook::react::SharedViewEventEmitter eventEmitterAtPoint(facebook::react::Point pt) noexcept = 0;
   virtual facebook::react::SharedViewEventEmitter eventEmitter() noexcept = 0;
-  virtual facebook::react::Tag tag() const noexcept = 0;
+  virtual facebook::react::Tag Tag() const noexcept = 0;
   // By default, hitTests according the pointerEvents prop on the Component.
   // If ignorePointerEvents = true, all Components are treated as valid targets
   virtual facebook::react::Tag hitTest(
@@ -124,6 +130,9 @@ struct IComponentView {
 
 // Run fn on all nodes of the component view tree starting from this one until fn returns true
 // returns true if the fn ever returned true
-bool walkTree(IComponentView &view, bool forward, Mso::Functor<bool(IComponentView &)> &fn) noexcept;
+bool walkTree(
+    ComponentView &view,
+    bool forward,
+    Mso::Functor<bool(const winrt::Microsoft::ReactNative::ComponentView &)> &fn) noexcept;
 
-} // namespace Microsoft::ReactNative
+} // namespace winrt::Microsoft::ReactNative::implementation

vnext/Microsoft.ReactNative/Fabric/Composition/AbiCompositionViewComponentView.cpp

@@ -13,28 +13,27 @@
 #include "RootComponentView.h"
 #include "Unicode.h"
 
-namespace Microsoft::ReactNative {
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
 AbiCompositionViewComponentView::AbiCompositionViewComponentView(
     winrt::Microsoft::ReactNative::ReactContext const &reactContext,
     const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::IReactViewComponentBuilder builder)
     : Super(compContext, tag, reactContext, CompositionComponentViewFeatures::Default), m_builder(builder) {
-  static auto const defaultProps = std::make_shared<AbiViewProps const>();
+  static auto const defaultProps = std::make_shared<::Microsoft::ReactNative::AbiViewProps const>();
   m_props = defaultProps;
   m_handle = Builder().CreateView(reactContext.Handle(), compContext);
   m_visual = Builder().CreateVisual(m_handle);
   OuterVisual().InsertAt(m_visual, 0);
 }
 
-std::shared_ptr<AbiCompositionViewComponentView> AbiCompositionViewComponentView::Create(
+winrt::Microsoft::ReactNative::ComponentView AbiCompositionViewComponentView::Create(
     winrt::Microsoft::ReactNative::ReactContext const &reactContext,
     const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
     facebook::react::Tag tag,
     winrt::Microsoft::ReactNative::IReactViewComponentBuilder builder) noexcept {
-  return std::shared_ptr<AbiCompositionViewComponentView>(
-      new AbiCompositionViewComponentView(reactContext, compContext, tag, builder));
+  return winrt::make<AbiCompositionViewComponentView>(reactContext, compContext, tag, builder);
 }
 
 winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder &
@@ -43,22 +42,22 @@ AbiCompositionViewComponentView::Builder() noexcept {
 }
 
 void AbiCompositionViewComponentView::mountChildComponentView(
-    IComponentView &childComponentView,
+    winrt::Microsoft::ReactNative::implementation::ComponentView &childComponentView,
     uint32_t index) noexcept {
   assert(false);
 }
 
 void AbiCompositionViewComponentView::unmountChildComponentView(
-    IComponentView &childComponentView,
+    winrt::Microsoft::ReactNative::implementation::ComponentView &childComponentView,
     uint32_t index) noexcept {
   assert(false);
 }
 
 void AbiCompositionViewComponentView::updateProps(
     facebook::react::Props::Shared const &props,
     facebook::react::Props::Shared const &oldProps) noexcept {
-  const auto &oldViewProps = *std::static_pointer_cast<const AbiViewProps>(m_props);
-  const auto &newViewProps = *std::static_pointer_cast<const AbiViewProps>(props);
+  const auto &oldViewProps = *std::static_pointer_cast<const ::Microsoft::ReactNative::AbiViewProps>(m_props);
+  const auto &newViewProps = *std::static_pointer_cast<const ::Microsoft::ReactNative::AbiViewProps>(props);
 
   if (oldViewProps.testId != newViewProps.testId) {
     m_visual.Comment(winrt::to_hstring(newViewProps.testId));
@@ -71,7 +70,7 @@ void AbiCompositionViewComponentView::updateProps(
 
   Builder().UpdateProps(m_handle, newViewProps.UserProps());
 
-  m_props = std::static_pointer_cast<AbiViewProps const>(props);
+  m_props = std::static_pointer_cast<::Microsoft::ReactNative::AbiViewProps const>(props);
 }
 
 void AbiCompositionViewComponentView::updateLayoutMetrics(
@@ -96,11 +95,12 @@ void AbiCompositionViewComponentView::updateLayoutMetrics(
 void AbiCompositionViewComponentView::updateState(
     facebook::react::State::Shared const &state,
     facebook::react::State::Shared const &oldState) noexcept {
-  m_state = winrt::make<AbiComponentState>(state);
+  m_state = winrt::make<::Microsoft::ReactNative::AbiComponentState>(state);
   Builder().UpdateState(m_handle, m_state);
 }
 
-void AbiCompositionViewComponentView::finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept {
+void AbiCompositionViewComponentView::finalizeUpdates(
+    winrt::Microsoft::ReactNative::implementation::RNComponentViewUpdateMask updateMask) noexcept {
   Super::finalizeUpdates(updateMask);
   Builder().FinalizeUpdates(m_handle);
 }
@@ -192,18 +192,18 @@ facebook::react::Tag AbiCompositionViewComponentView::hitTest(
       ptLocal.x >= 0 && ptLocal.x <= m_layoutMetrics.frame.size.width && ptLocal.y >= 0 &&
       ptLocal.y <= m_layoutMetrics.frame.size.height) {
     localPt = ptLocal;
-    return tag();
+    return Tag();
   }
 
   return -1;
 }
 
 winrt::IInspectable AbiCompositionViewComponentView::EnsureUiaProvider() noexcept {
   if (m_uiaProvider == nullptr) {
-    m_uiaProvider = winrt::make<winrt::Microsoft::ReactNative::implementation::CompositionDynamicAutomationProvider>(
-        shared_from_this());
+    m_uiaProvider =
+        winrt::make<winrt::Microsoft::ReactNative::implementation::CompositionDynamicAutomationProvider>(*get_strong());
   }
   return m_uiaProvider;
 }
 
-} // namespace Microsoft::ReactNative
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation

vnext/Microsoft.ReactNative/Fabric/Composition/AbiCompositionViewComponentView.h

@@ -11,23 +11,29 @@
 
 #include <Fabric/Composition/ReactCompositionViewComponentBuilder.h>
 
+#include "Composition.AbiCompositionViewComponentView.g.h"
 #include <react/components/rnwcore/ShadowNodes.h>
 
-namespace Microsoft::ReactNative {
+namespace winrt::Microsoft::ReactNative::Composition::implementation {
 
-struct AbiCompositionViewComponentView : CompositionBaseComponentView {
-  using Super = CompositionBaseComponentView;
+struct AbiCompositionViewComponentView
+    : public AbiCompositionViewComponentViewT<AbiCompositionViewComponentView, CompositionBaseComponentView> {
+  using Super = AbiCompositionViewComponentViewT<AbiCompositionViewComponentView, CompositionBaseComponentView>;
 
-  [[nodiscard]] static std::shared_ptr<AbiCompositionViewComponentView> Create(
+  [[nodiscard]] static winrt::Microsoft::ReactNative::ComponentView Create(
       winrt::Microsoft::ReactNative::ReactContext const &reactContext,
       const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::IReactViewComponentBuilder builder) noexcept;
 
   winrt::IInspectable EnsureUiaProvider() noexcept override;
 
-  void mountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept override;
-  void unmountChildComponentView(IComponentView &childComponentView, uint32_t index) noexcept override;
+  void mountChildComponentView(
+      winrt::Microsoft::ReactNative::implementation::ComponentView &childComponentView,
+      uint32_t index) noexcept override;
+  void unmountChildComponentView(
+      winrt::Microsoft::ReactNative::implementation::ComponentView &childComponentView,
+      uint32_t index) noexcept override;
 
   void updateState(facebook::react::State::Shared const &state, facebook::react::State::Shared const &oldState) noexcept
       override;
@@ -37,7 +43,8 @@ struct AbiCompositionViewComponentView : CompositionBaseComponentView {
   void updateLayoutMetrics(
       facebook::react::LayoutMetrics const &layoutMetrics,
       facebook::react::LayoutMetrics const &oldLayoutMetrics) noexcept override;
-  void finalizeUpdates(RNComponentViewUpdateMask updateMask) noexcept override;
+  void finalizeUpdates(
+      winrt::Microsoft::ReactNative::implementation::RNComponentViewUpdateMask updateMask) noexcept override;
   void prepareForRecycle() noexcept override;
   bool focusable() const noexcept override;
   void onKeyDown(
@@ -69,20 +76,20 @@ struct AbiCompositionViewComponentView : CompositionBaseComponentView {
       const noexcept override;
   winrt::Microsoft::ReactNative::Composition::IVisual Visual() const noexcept override;
 
- private:
   AbiCompositionViewComponentView(
       winrt::Microsoft::ReactNative::ReactContext const &reactContext,
       const winrt::Microsoft::ReactNative::Composition::ICompositionContext &compContext,
       facebook::react::Tag tag,
       winrt::Microsoft::ReactNative::IReactViewComponentBuilder builder);
 
+ private:
   winrt::Microsoft::ReactNative::Composition::ReactCompositionViewComponentBuilder &Builder() noexcept;
 
   winrt::IInspectable m_handle;
   winrt::Microsoft::ReactNative::IReactViewComponentBuilder m_builder;
   winrt::Microsoft::ReactNative::IComponentState m_state;
-  std::shared_ptr<AbiViewProps const> m_props;
+  std::shared_ptr<::Microsoft::ReactNative::AbiViewProps const> m_props;
   winrt::Microsoft::ReactNative::Composition::IVisual m_visual{nullptr};
 };
 
-} // namespace Microsoft::ReactNative
+} // namespace winrt::Microsoft::ReactNative::Composition::implementation