Fix experimental winui3 builds (#13203)

* Fix experimental winui3 builds * Update CustomComponent.cpp * Update CustomComponent.cpp * fix * fix * Change files * fix
microsoft · May 10, 2024 · dea1b59 · dea1b59
1 parent 3159c63
commit dea1b59
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 18 deletions.
diff --git a/change/react-native-windows-3f811585-510f-4097-972b-2aa34b14cb56.json b/change/react-native-windows-3f811585-510f-4097-972b-2aa34b14cb56.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Expose CompositionContext from CreateCompositionComponentViewArgs",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/playground/windows/playground-composition/CustomComponent.cpp b/packages/playground/windows/playground-composition/CustomComponent.cpp
@@ -51,7 +51,11 @@ struct CustomComponent : CustomComponentT<CustomComponent> {
   CustomComponent(
       bool nativeLayout,
       const winrt::Microsoft::ReactNative::Composition::CreateCompositionComponentViewArgs &args)
-      : base_type(args), m_nativeLayout(nativeLayout) {}
+      : base_type(args),
+        m_nativeLayout(nativeLayout),
+        m_compContext(
+            args.as<winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCreateComponentViewArgs>()
+                .CompositionContext()) {}
 
   ~CustomComponent() {
 #ifdef USE_EXPERIMENTAL_WINUI3
@@ -100,27 +104,37 @@ struct CustomComponent : CustomComponentT<CustomComponent> {
     base_type::FinalizeUpdates(updateMask);
   }
 
-  winrt::Microsoft::UI::Composition::Visual CreateVisual() noexcept {
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual CreateInternalVisual() noexcept {
 #ifdef USE_EXPERIMENTAL_WINUI3
-
-    m_xamlIsland = winrt::Microsoft::UI::Xaml::XamlIsland{};
-    m_xamlIsland.Content(CreateXamlButtonContent());
-
-    m_contentIsland = m_xamlIsland.ContentIsland();
+    auto systemCompContext =
+        m_compContext
+            .try_as<winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper>();
+    if (systemCompContext) {
+      m_xamlIsland = winrt::Microsoft::UI::Xaml::XamlIsland{};
+      m_xamlIsland.Content(CreateXamlButtonContent());
+
+      m_contentIsland = m_xamlIsland.ContentIsland();
+    }
 #endif
 
-    m_visual = Compositor().CreateSpriteVisual();
-    // m_visual.Brush(CompositionContext().CreateColorBrush({255, 255, 0, 255}));
+    m_visual = m_compContext.CreateSpriteVisual();
+    // m_visual.Brush(m_compContext.CreateColorBrush({255, 255, 0, 255}));
 #ifdef USE_EXPERIMENTAL_WINUI3
 
-    auto hwnd = reinterpret_cast<HWND>(
-        winrt::Microsoft::ReactNative::ReactCoreInjection::GetTopLevelWindowId(ReactContext().Properties()));
+    if (systemCompContext) {
+      auto hwnd = reinterpret_cast<HWND>(
+          winrt::Microsoft::ReactNative::ReactCoreInjection::GetTopLevelWindowId(ReactContext().Properties()));
 
-    m_siteBridge = winrt::Microsoft::UI::Content::SystemVisualSiteBridge::Create(
-        m_contentIsland.Compositor(), m_visual, winrt::Microsoft::UI::GetWindowIdFromWindow(hwnd));
-    m_siteBridge.Connect(m_contentIsland);
+      auto containerVisual =
+          winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::InnerVisual(
+              m_visual)
+              .as<winrt::Windows::UI::Composition::ContainerVisual>();
+      m_siteBridge = winrt::Microsoft::UI::Content::SystemVisualSiteBridge::Create(
+          m_contentIsland.Compositor(), containerVisual, winrt::Microsoft::UI::GetWindowIdFromWindow(hwnd));
+      m_siteBridge.Connect(m_contentIsland);
 
-    auto rootXamlVisualSize = m_contentIsland.Root().Size();
+      auto rootXamlVisualSize = m_contentIsland.Root().Size();
+    }
 #endif
 
     return m_visual;
@@ -165,9 +179,10 @@ struct CustomComponent : CustomComponentT<CustomComponent> {
 
  private:
   const bool m_nativeLayout;
+  winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext m_compContext;
   winrt::Microsoft::UI::Xaml::Controls::TextBlock m_buttonLabelTextBlock{nullptr};
   winrt::Microsoft::ReactNative::IComponentState m_state;
-  winrt::Microsoft::UI::Composition::Visual m_visual{nullptr};
+  winrt::Microsoft::ReactNative::Composition::Experimental::IVisual m_visual;
 #ifdef USE_EXPERIMENTAL_WINUI3
   winrt::Microsoft::UI::Xaml::XamlIsland m_xamlIsland{nullptr};
   winrt::Microsoft::UI::Content::ContentIsland m_contentIsland{nullptr};

diff --git a/packages/playground/windows/playground-composition/CustomComponent.idl b/packages/playground/windows/playground-composition/CustomComponent.idl
@@ -6,7 +6,7 @@ namespace PlaygroundApp
   [default_interface]
   [webhosthidden]
   [experimental]
-  runtimeclass CustomComponent : Microsoft.ReactNative.Composition.ViewComponentView
+  runtimeclass CustomComponent : Microsoft.ReactNative.Composition.ViewComponentView, Microsoft.ReactNative.Composition.Experimental.IInternalCreateVisual
   {
   }
 }
diff --git a/vnext/Microsoft.ReactNative/CompositionComponentView.idl b/vnext/Microsoft.ReactNative/CompositionComponentView.idl
@@ -26,6 +26,15 @@ namespace Microsoft.ReactNative.Composition
     Default       = 0x00000007, // ShadowProps | NativeBorder | Background
   };
 
+  namespace Experimental {
+    [webhosthidden]
+    [experimental]
+    interface IInternalCreateComponentViewArgs
+    {
+      ICompositionContext CompositionContext { get; };
+    }
+  }
+
   [experimental]
   [webhosthidden]
   runtimeclass CreateCompositionComponentViewArgs : Microsoft.ReactNative.CreateComponentViewArgs {

diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.h
@@ -23,7 +23,8 @@ namespace winrt::Microsoft::ReactNative::Composition::implementation {
 struct CreateCompositionComponentViewArgs
     : public CreateCompositionComponentViewArgsT<
           CreateCompositionComponentViewArgs,
-          winrt::Microsoft::ReactNative::implementation::CreateComponentViewArgs> {
+          winrt::Microsoft::ReactNative::implementation::CreateComponentViewArgs,
+          winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCreateComponentViewArgs> {
   CreateCompositionComponentViewArgs(
       const winrt::Microsoft::ReactNative::IReactContext &reactContext,
       facebook::react::Tag tag,