Simplify Playground-Composition (#15308)

acoates-ms · web-flow · commit fef23b6417f0 · 2025-11-04T17:57:10.000-08:00
* Simplify Playground-Composition

* format
diff --git a/packages/playground/windows/playground-composition/Playground-Composition.cpp b/packages/playground/windows/playground-composition/Playground-Composition.cpp
@@ -4,22 +4,11 @@
 #include <windows.h>
 #include <windowsx.h>
 
-#include <memory>
-#include <mutex>
-
 // Disabled until we have a 3rd party story for custom components
 // #include "AutolinkedNativeModules.g.h"
 
-#include <winrt/Windows.Foundation.Collections.h>
-
-#include <DispatcherQueue.h>
-#include <UIAutomation.h>
-#include <windows.ui.composition.interop.h>
-
 #include <winrt/Microsoft.ReactNative.Composition.Experimental.h>
 #include <winrt/Microsoft.ReactNative.Composition.h>
-#include <winrt/Windows.UI.Composition.Desktop.h>
-#include <winrt/Windows.UI.Composition.h>
 
 #include <DesktopWindowBridge.h>
 #include "App.xaml.h"
@@ -108,12 +97,9 @@ struct CompReactPackageProvider
   }
 };
 
-winrt::Windows::System::DispatcherQueueController g_dispatcherQueueController{nullptr};
-winrt::Windows::UI::Composition::Compositor g_compositor{nullptr};
-
 constexpr auto WindowDataProperty = L"WindowData";
 
-int RunPlayground(int showCmd, bool useWebDebugger);
+int RunPlayground(int showCmd);
 
 struct WindowData {
   static HINSTANCE s_instance;
@@ -124,10 +110,8 @@ struct WindowData {
   winrt::Microsoft::UI::Content::DesktopChildSiteBridge m_bridge{nullptr};
   winrt::Microsoft::ReactNative::ReactNativeHost m_host{nullptr};
   winrt::Microsoft::ReactNative::ReactInstanceSettings m_instanceSettings{nullptr};
-  bool m_useLiftedComposition{true};
   bool m_sizeToContent{false};
   bool m_forceRTL{false};
-  winrt::Windows::UI::Composition::Desktop::DesktopWindowTarget m_target{nullptr};
   LONG m_height{0};
   LONG m_width{0};
 
@@ -196,114 +180,66 @@ struct WindowData {
 
           winrt::Microsoft::ReactNative::ReactViewOptions viewOptions;
           viewOptions.ComponentName(appName);
-          auto windowData = WindowData::GetFromWindow(hwnd);
 
           if (!m_compRootView) {
-            if (windowData->m_useLiftedComposition) {
-              m_compRootView = winrt::Microsoft::ReactNative::ReactNativeIsland(g_liftedCompositor);
-            } else {
-              m_compRootView = winrt::Microsoft::ReactNative::ReactNativeIsland();
+            m_compRootView = winrt::Microsoft::ReactNative::ReactNativeIsland(g_liftedCompositor);
+
+            // By setting the compositor here we opt into using the new architecture.
+            winrt::Microsoft::ReactNative::Composition::CompositionUIService::SetCompositor(
+                InstanceSettings(), g_liftedCompositor);
+
+            // Register ellipse:// uri hander for images
+            host.PackageProviders().Append(winrt::make<EllipseReactPackageProvider>());
+
+            m_bridge = winrt::Microsoft::UI::Content::DesktopChildSiteBridge::Create(
+                g_liftedCompositor, winrt::Microsoft::UI::GetWindowIdFromWindow(hwnd));
+
+            if (m_forceRTL) {
+              m_bridge.LayoutDirectionOverride(winrt::Microsoft::UI::Content::ContentLayoutDirection::RightToLeft);
             }
 
-            if (windowData->m_useLiftedComposition) {
-              // By setting the compositor here we opt into using the new architecture.
-              winrt::Microsoft::ReactNative::Composition::CompositionUIService::SetCompositor(
-                  InstanceSettings(), g_liftedCompositor);
-
-              // Register ellipse:// uri hander for images
-              host.PackageProviders().Append(winrt::make<EllipseReactPackageProvider>());
-
-              m_bridge = winrt::Microsoft::UI::Content::DesktopChildSiteBridge::Create(
-                  g_liftedCompositor, winrt::Microsoft::UI::GetWindowIdFromWindow(hwnd));
-
-              if (m_forceRTL) {
-                m_bridge.LayoutDirectionOverride(winrt::Microsoft::UI::Content::ContentLayoutDirection::RightToLeft);
-              }
-
-              auto appContent = m_compRootView.Island();
-
-              m_bridge.Connect(appContent);
-              m_bridge.Show();
-
-              m_compRootView.ScaleFactor(ScaleFactor(hwnd));
-              winrt::Microsoft::ReactNative::LayoutConstraints constraints;
-              constraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::Undefined;
-              constraints.MaximumSize =
-                  constraints.MinimumSize = {m_width / ScaleFactor(hwnd), m_height / ScaleFactor(hwnd)};
-
-              if (m_sizeToContent) {
-                ApplyConstraintsForContentSizedWindow(constraints);
-
-                // Disable user sizing of the hwnd
-                ::SetWindowLong(hwnd, GWL_STYLE, GetWindowLong(hwnd, GWL_STYLE) & ~WS_SIZEBOX);
-                m_compRootView.SizeChanged(
-                    [hwnd, props = InstanceSettings().Properties()](
-                        auto /*sender*/, const winrt::Microsoft::ReactNative::RootViewSizeChangedEventArgs &args) {
-                      auto compositor =
-                          winrt::Microsoft::ReactNative::Composition::CompositionUIService::GetCompositor(props);
-                      auto async = compositor.RequestCommitAsync();
-                      async.Completed([hwnd, size = args.Size()](
-                                          auto /*asyncInfo*/, winrt::Windows::Foundation::AsyncStatus /*asyncStatus*/) {
-                        RECT rcClient, rcWindow;
-                        GetClientRect(hwnd, &rcClient);
-                        GetWindowRect(hwnd, &rcWindow);
-
-                        SetWindowPos(
-                            hwnd,
-                            nullptr,
-                            0,
-                            0,
-                            static_cast<int>(size.Width) + rcClient.left - rcClient.right + rcWindow.right -
-                                rcWindow.left,
-                            static_cast<int>(size.Height) + rcClient.top - rcClient.bottom + rcWindow.bottom -
-                                rcWindow.top,
-                            SWP_DEFERERASE | SWP_NOACTIVATE | SWP_NOMOVE | SWP_NOOWNERZORDER | SWP_NOZORDER);
-                      });
-                    });
-              }
-              m_compRootView.Arrange(constraints, {0, 0});
-
-              m_bridge.ResizePolicy(winrt::Microsoft::UI::Content::ContentSizePolicy::ResizeContentToParentWindow);
-
-            } else if (!m_target) {
-              // General users of RNW should never set CompositionContext - this is an advanced usage to inject another
-              // composition implementation. By using the SystemCompositionContextHelper here, React Native Windows will
-              // use System Visuals for its tree.
-              winrt::Microsoft::ReactNative::ReactPropertyBag(InstanceSettings().Properties())
-                  .Set(
-                      winrt::Microsoft::ReactNative::ReactPropertyId<
-                          winrt::Microsoft::ReactNative::Composition::Experimental::ICompositionContext>{
-                          L"ReactNative.Composition", L"CompositionContext"},
-                      winrt::Microsoft::ReactNative::Composition::Experimental::SystemCompositionContextHelper::
-                          CreateContext(g_compositor));
-
-              auto interop = g_compositor.as<ABI::Windows::UI::Composition::Desktop::ICompositorDesktopInterop>();
-              winrt::Windows::UI::Composition::Desktop::DesktopWindowTarget target{nullptr};
-              winrt::check_hresult(interop->CreateDesktopWindowTarget(
-                  hwnd,
-                  false,
-                  reinterpret_cast<ABI::Windows::UI::Composition::Desktop::IDesktopWindowTarget **>(
-                      winrt::put_abi(target))));
-              m_target = target;
-
-              auto root = g_compositor.CreateContainerVisual();
-              root.RelativeSizeAdjustment({1.0f, 1.0f});
-              root.Offset({0, 0, 0});
-              m_target.Root(root);
-              m_compRootView
-                  .as<winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCompositionRootView>()
-                  .SetWindow(reinterpret_cast<uint64_t>(hwnd));
-              m_compRootView
-                  .as<winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCompositionRootView>()
-                  .InternalRootVisual(winrt::Microsoft::ReactNative::Composition::Experimental::
-                                          SystemCompositionContextHelper::CreateVisual(root));
-              m_compRootView.ScaleFactor(ScaleFactor(hwnd));
-              winrt::Microsoft::ReactNative::LayoutConstraints contraints;
-              contraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::Undefined;
-              contraints.MaximumSize =
-                  contraints.MinimumSize = {m_width / ScaleFactor(hwnd), m_height / ScaleFactor(hwnd)};
-              m_compRootView.Arrange(contraints, {0, 0});
+            auto appContent = m_compRootView.Island();
+
+            m_bridge.Connect(appContent);
+            m_bridge.Show();
+
+            m_compRootView.ScaleFactor(ScaleFactor(hwnd));
+            winrt::Microsoft::ReactNative::LayoutConstraints constraints;
+            constraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::Undefined;
+            constraints.MaximumSize =
+                constraints.MinimumSize = {m_width / ScaleFactor(hwnd), m_height / ScaleFactor(hwnd)};
+
+            if (m_sizeToContent) {
+              ApplyConstraintsForContentSizedWindow(constraints);
+
+              // Disable user sizing of the hwnd
+              ::SetWindowLong(hwnd, GWL_STYLE, GetWindowLong(hwnd, GWL_STYLE) & ~WS_SIZEBOX);
+              m_compRootView.SizeChanged([hwnd, props = InstanceSettings().Properties()](
+                                             auto /*sender*/,
+                                             const winrt::Microsoft::ReactNative::RootViewSizeChangedEventArgs &args) {
+                auto compositor =
+                    winrt::Microsoft::ReactNative::Composition::CompositionUIService::GetCompositor(props);
+                auto async = compositor.RequestCommitAsync();
+                async.Completed([hwnd, size = args.Size()](
+                                    auto /*asyncInfo*/, winrt::Windows::Foundation::AsyncStatus /*asyncStatus*/) {
+                  RECT rcClient, rcWindow;
+                  GetClientRect(hwnd, &rcClient);
+                  GetWindowRect(hwnd, &rcWindow);
+
+                  SetWindowPos(
+                      hwnd,
+                      nullptr,
+                      0,
+                      0,
+                      static_cast<int>(size.Width) + rcClient.left - rcClient.right + rcWindow.right - rcWindow.left,
+                      static_cast<int>(size.Height) + rcClient.top - rcClient.bottom + rcWindow.bottom - rcWindow.top,
+                      SWP_DEFERERASE | SWP_NOACTIVATE | SWP_NOMOVE | SWP_NOOWNERZORDER | SWP_NOZORDER);
+                });
+              });
             }
+            m_compRootView.Arrange(constraints, {0, 0});
+
+            m_bridge.ResizePolicy(winrt::Microsoft::UI::Content::ContentSizePolicy::ResizeContentToParentWindow);
           }
 
           // Nudge the ReactNativeHost to create the instance and wrapping context
@@ -319,7 +255,7 @@ struct WindowData {
         std::thread playgroundThread{([]() {
           // For subsequent RN windows do not use the web debugger by default,
           // since one instance can be connected to it at a time.
-          RunPlayground(SW_SHOW, false);
+          RunPlayground(SW_SHOW);
         })};
         playgroundThread.detach();
         break;
@@ -404,15 +340,6 @@ struct WindowData {
     }
   }
 
-  LRESULT TranslateMessage(HWND /*hwnd*/, UINT message, WPARAM wparam, LPARAM lparam) noexcept {
-    if (!m_useLiftedComposition && m_compRootView) {
-      return static_cast<LRESULT>(
-          m_compRootView.as<winrt::Microsoft::ReactNative::Composition::Experimental::IInternalCompositionRootView>()
-              .SendMessage(message, wparam, lparam));
-    }
-    return 0;
-  }
-
   /// Message handler for about box.
   static INT_PTR CALLBACK About(HWND hwnd, UINT message, WPARAM wparam, LPARAM /* lparam */) noexcept {
     switch (message) {
@@ -488,7 +415,6 @@ struct WindowData {
       case WM_INITDIALOG: {
         auto boolToCheck = [](bool b) { return b ? BST_CHECKED : BST_UNCHECKED; };
         auto self = reinterpret_cast<WindowData *>(lparam);
-        CheckDlgButton(hwnd, IDC_LIFTEDCOMPOSITION, boolToCheck(self->m_useLiftedComposition));
         CheckDlgButton(hwnd, IDC_FASTREFRESH, boolToCheck(self->InstanceSettings().UseFastRefresh()));
         CheckDlgButton(hwnd, IDC_DIRECTDEBUGGER, boolToCheck(self->InstanceSettings().UseDirectDebugger()));
         CheckDlgButton(hwnd, IDC_BREAKONNEXTLINE, boolToCheck(self->InstanceSettings().DebuggerBreakOnNextLine()));
@@ -498,20 +424,12 @@ struct WindowData {
         SetWindowTextW(portEditControl, std::to_wstring(self->InstanceSettings().DebuggerPort()).c_str());
         SendMessageW(portEditControl, (UINT)EM_SETLIMITTEXT, (WPARAM)5, (LPARAM)0);
 
-        auto cmbEngines = GetDlgItem(hwnd, IDC_JSENGINE);
-        SendMessageW(cmbEngines, (UINT)CB_ADDSTRING, (WPARAM)0, (LPARAM)TEXT("Chakra"));
-        SendMessageW(cmbEngines, (UINT)CB_ADDSTRING, (WPARAM)0, (LPARAM)TEXT("Hermes"));
-        SendMessageW(cmbEngines, (UINT)CB_ADDSTRING, (WPARAM)0, (LPARAM)TEXT("V8"));
-        // Fabric only supports Hermes right now - So dont actually set JS engine override
-        // SendMessageW(cmbEngines, CB_SETCURSEL, (WPARAM) static_cast<int32_t>(self->m_jsEngine), (LPARAM)0);
-
         return TRUE;
       }
       case WM_COMMAND: {
         switch (LOWORD(wparam)) {
           case IDOK: {
             auto self = GetFromWindow(GetParent(hwnd));
-            self->m_useLiftedComposition = (IsDlgButtonChecked(hwnd, IDC_LIFTEDCOMPOSITION) == BST_CHECKED);
             self->InstanceSettings().UseFastRefresh(IsDlgButtonChecked(hwnd, IDC_FASTREFRESH) == BST_CHECKED);
             self->InstanceSettings().UseDirectDebugger(IsDlgButtonChecked(hwnd, IDC_DIRECTDEBUGGER) == BST_CHECKED);
             self->InstanceSettings().DebuggerBreakOnNextLine(
@@ -533,11 +451,6 @@ struct WindowData {
               // Don't update the debugger port if the new value can't be parsed
               // (E.g. includes letters or symbols).
             }
-
-            // Fabric only supports Hermes right now - So dont actually set JS engine override
-            // auto cmbEngines = GetDlgItem(hwnd, IDC_JSENGINE);
-            // int itemIndex = (int)SendMessageW(cmbEngines, (UINT)CB_GETCURSEL, (WPARAM)0, (LPARAM)0);
-            // self->m_jsEngine = static_cast<Microsoft::ReactNative::JSIEngine>(itemIndex);
           }
             [[fallthrough]];
           case IDCANCEL:
@@ -557,11 +470,6 @@ HINSTANCE WindowData::s_instance = reinterpret_cast<HINSTANCE>(&__ImageBase);
 
 LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wparam, LPARAM lparam) noexcept {
   auto windowData = WindowData::GetFromWindow(hwnd);
-  if (windowData) {
-    auto result = WindowData::GetFromWindow(hwnd)->TranslateMessage(hwnd, message, wparam, lparam);
-    if (result)
-      return result;
-  }
 
   switch (message) {
     case WM_COMMAND: {
@@ -606,20 +514,6 @@ LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wparam, LPARAM lparam)
       SetProp(hwnd, WindowDataProperty, reinterpret_cast<HANDLE>(windowData));
       break;
     }
-    case WM_GETOBJECT: {
-      if (!windowData->m_useLiftedComposition && lparam == UiaRootObjectId) {
-        if (windowData == nullptr || !windowData->m_compRootView)
-          break;
-
-        auto rootView = windowData->m_compRootView;
-        winrt::com_ptr<IRawElementProviderSimple> spReps;
-        if (!rootView.GetUiaProvider().try_as(spReps)) {
-          break;
-        }
-        LRESULT lResult = UiaReturnRawElementProvider(hwnd, wparam, lparam, spReps.get());
-        return lResult;
-      }
-    }
     case WM_WINDOWPOSCHANGED: {
       windowData->UpdateSize(hwnd);
 
@@ -634,7 +528,7 @@ LRESULT CALLBACK WndProc(HWND hwnd, UINT message, WPARAM wparam, LPARAM lparam)
 
 constexpr PCWSTR c_windowClassName = L"MS_REACTNATIVE_PLAYGROUND_COMPOSITION";
 
-int RunPlayground(int showCmd, bool /*useWebDebugger*/) {
+int RunPlayground(int showCmd) {
   constexpr PCWSTR appName = L"React Native Playground (Composition)";
 
   auto windowData = std::make_unique<WindowData>();
@@ -665,10 +559,6 @@ int RunPlayground(int showCmd, bool /*useWebDebugger*/) {
   // know the message loop has finished.
   g_liftedDispatcherQueueController.ShutdownQueue();
 
-  // Destroy all Composition objects
-  g_compositor.Close();
-  g_compositor = nullptr;
-
   return 0;
 }
 
@@ -692,19 +582,6 @@ _Use_decl_annotations_ int CALLBACK WinMain(HINSTANCE instance, HINSTANCE, PSTR
   WINRT_VERIFY(classId);
   winrt::check_win32(!classId);
 
-  DispatcherQueueOptions options{
-      sizeof(DispatcherQueueOptions), /* dwSize */
-      DQTYPE_THREAD_CURRENT, /* threadType */
-      DQTAT_COM_ASTA /* apartmentType */
-  };
-
-  // Need to have a Dispatcher on the current thread to be able to create a Compositor
-  winrt::check_hresult(CreateDispatcherQueueController(
-      options,
-      reinterpret_cast<ABI::Windows::System::IDispatcherQueueController **>(
-          winrt::put_abi(g_dispatcherQueueController))));
-  g_compositor = winrt::Windows::UI::Composition::Compositor();
-
   // Create a Lifted (WinAppSDK) DispatcherQueue for this thread.  This is needed for
   // Microsoft.UI.Composition, Content, and Input APIs.
   g_liftedDispatcherQueueController =
@@ -715,5 +592,5 @@ _Use_decl_annotations_ int CALLBACK WinMain(HINSTANCE instance, HINSTANCE, PSTR
   // in Microsoft.ui.xaml.controls.dll.
   auto playgroundApp{winrt::make<winrt::Playground::implementation::App>()};
 
-  return RunPlayground(showCmd, false);
+  return RunPlayground(showCmd);
 }
diff --git a/packages/playground/windows/playground-composition/Playground-Composition.rc b/packages/playground/windows/playground-composition/Playground-Composition.rc
@@ -103,24 +103,21 @@ BEGIN
     DEFPUSHBUTTON   "OK",IDOK,201,96,50,14,WS_GROUP
 END
 
-IDD_SETTINGSBOX DIALOGEX 0, 0, 192, 178
+IDD_SETTINGSBOX DIALOGEX 0, 0, 192, 138
 STYLE DS_SETFONT | DS_MODALFRAME | DS_FIXEDSYS | WS_POPUP | WS_CAPTION | WS_SYSMENU
 CAPTION "Settings"
 FONT 8, "MS Shell Dlg", 400, 0, 0x1
 BEGIN
-    CONTROL         "&Lifted Composition",IDC_LIFTEDCOMPOSITION,"Button",BS_AUTOCHECKBOX | WS_TABSTOP,8,8,104,10
-    CONTROL         "&Fast Refresh",IDC_FASTREFRESH,"Button",BS_AUTOCHECKBOX | WS_TABSTOP,8,26,104,10
-    CONTROL         "&Direct Debugger",IDC_DIRECTDEBUGGER,"Button",BS_AUTOCHECKBOX | WS_TABSTOP,8,44,104,10
-    CONTROL         "&Break On Next Line",IDC_BREAKONNEXTLINE,"Button",BS_AUTOCHECKBOX | WS_TABSTOP,8,63,104,10
-    CONTROL         "&Size Window To React Content",IDC_SIZETOCONTENT,"Button",BS_AUTOCHECKBOX | WS_TABSTOP,8,82,104,10
-    LTEXT           "Debugger Port",IDC_DEBUGGERPORTLABEL,8,100,50,10
-    EDITTEXT        IDC_DEBUGGERPORT,59,98,28,14,ES_AUTOHSCROLL | ES_NUMBER
-    LTEXT           "JS Engine",IDC_JSENGINELABEL,8,119,50,10
-    COMBOBOX        IDC_JSENGINE,59,116,104,10,CBS_DROPDOWNLIST | CBS_HASSTRINGS | WS_TABSTOP
-    COMBOBOX        IDC_THEME,59,136,104,10,CBS_DROPDOWNLIST | CBS_HASSTRINGS | WS_TABSTOP
-    LTEXT           "Theme",IDC_THEMELABEL,8,138,50,10
-    DEFPUSHBUTTON   "OK",IDOK,75,157,50,14,WS_GROUP
-    PUSHBUTTON      "Cancel",IDCANCEL,130,157,50,14
+    CONTROL         "&Fast Refresh",IDC_FASTREFRESH,"Button",BS_AUTOCHECKBOX | WS_TABSTOP,8,8,104,10
+    CONTROL         "&Direct Debugger",IDC_DIRECTDEBUGGER,"Button",BS_AUTOCHECKBOX | WS_TABSTOP,8,26,104,10
+    CONTROL         "&Break On Next Line",IDC_BREAKONNEXTLINE,"Button",BS_AUTOCHECKBOX | WS_TABSTOP,8,44,104,10
+    CONTROL         "&Size Window To React Content",IDC_SIZETOCONTENT,"Button",BS_AUTOCHECKBOX | WS_TABSTOP,8,63,104,10
+    LTEXT           "Debugger Port",IDC_DEBUGGERPORTLABEL,8,80,50,10
+    EDITTEXT        IDC_DEBUGGERPORT,59,78,28,14,ES_AUTOHSCROLL | ES_NUMBER
+    COMBOBOX        IDC_THEME,59,98,104,10,CBS_DROPDOWNLIST | CBS_HASSTRINGS | WS_TABSTOP
+    LTEXT           "Theme",IDC_THEMELABEL,8,100,50,10
+    DEFPUSHBUTTON   "OK",IDOK,75,118,50,14,WS_GROUP
+    PUSHBUTTON      "Cancel",IDCANCEL,130,118,50,14
 END
 
 IDD_OPENJSBUNDLEBOX DIALOGEX 0, 0, 256, 177
diff --git a/packages/playground/windows/playground-composition/resource.h b/packages/playground/windows/playground-composition/resource.h
