Adds support to compile react-native-svg against WinAppSDK (#2255)

# Summary

Adds namespace redirects required to compile react-native-svg sources
against WinAppSDK for react-native-windows.

## Test Plan

There aren't a lot of examples for building react-native-windows apps in
open source targeting WinAppSDK, but we have some proprietary builds,
and this source code is working there (it is also still compatible with
UWP).

windows/RNSVG/D2DHelpers.h

@@ -78,7 +78,7 @@ struct D2DHelpers {
      }
    }
 
-   static D2D1::ColorF AsD2DColor(ui::Color const &color) {
+   static D2D1::ColorF AsD2DColor(Windows::UI::Color const &color) {
      return {
          color.R / 255.0f,
          color.G / 255.0f,
@@ -86,12 +86,13 @@ struct D2DHelpers {
          color.A / 255.0f};
    }
 
-   static ui::Color FromD2DColor(D2D1::ColorF const color) {
-     return ui::ColorHelper::FromArgb(
+   static Windows::UI::Color FromD2DColor(D2D1::ColorF const color) {
+     return Windows::UI::Color{
          static_cast<uint8_t>(color.a),
          static_cast<uint8_t>(color.r),
          static_cast<uint8_t>(color.g),
-         static_cast<uint8_t>(color.b));
+         static_cast<uint8_t>(color.b),
+     };
    }
 
    static D2D1_RECT_F AsD2DRect(Rect const &rect) {

windows/RNSVG/GroupViewManager.cpp

@@ -13,7 +13,7 @@ using namespace Microsoft::ReactNative;
 
 using namespace Windows::Foundation;
 using namespace Windows::Foundation::Collections;
-using namespace Windows::UI::Xaml;
+using namespace xaml;
 
 namespace winrt::RNSVG::implementation {
 GroupViewManager::GroupViewManager() {

windows/RNSVG/GroupViewManager.h

@@ -13,13 +13,13 @@ struct GroupViewManager : GroupViewManagerT<GroupViewManager, RNSVG::implementat
 
   // IViewManagerWithChildren
   void
-  AddView(Windows::UI::Xaml::FrameworkElement const &parent, Windows::UI::Xaml::UIElement const &child, int64_t index);
-  void RemoveAllChildren(Windows::UI::Xaml::FrameworkElement const &parent);
-  void RemoveChildAt(Windows::UI::Xaml::FrameworkElement const &parent, int64_t index);
+  AddView(xaml::FrameworkElement const &parent, xaml::UIElement const &child, int64_t index);
+  void RemoveAllChildren(xaml::FrameworkElement const &parent);
+  void RemoveChildAt(xaml::FrameworkElement const &parent, int64_t index);
   void ReplaceChild(
-      Windows::UI::Xaml::FrameworkElement const &parent,
-      Windows::UI::Xaml::UIElement const &oldChild,
-      Windows::UI::Xaml::UIElement const &newChild);
+      xaml::FrameworkElement const &parent,
+      xaml::UIElement const &oldChild,
+      xaml::UIElement const &newChild);
 };
 } // namespace winrt::RNSVG::implementation
 

windows/RNSVG/RenderableView.cpp

@@ -385,7 +385,7 @@ RNSVG::IRenderable RenderableView::HitTest(Point const &point) {
   return nullptr;
 }
 
-void RenderableView::SetColor(const JSValueObject &propValue, ui::Color const &fallbackColor, std::string propName) {
+void RenderableView::SetColor(const JSValueObject &propValue, Windows::UI::Color const &fallbackColor, std::string propName) {
   switch (propValue["type"].AsInt64()) {
     // https://github.com/software-mansion/react-native-svg/blob/main/src/lib/extract/extractBrush.ts#L29
     case 1: {

windows/RNSVG/RenderableView.h

@@ -13,8 +13,8 @@ struct RenderableView : RenderableViewT<RenderableView> {
 
   RNSVG::SvgView SvgRoot();
 
-  Windows::UI::Xaml::FrameworkElement SvgParent() { return m_parent; }
-  void SvgParent(Windows::UI::Xaml::FrameworkElement const &value) { m_parent = value; }
+  xaml::FrameworkElement SvgParent() { return m_parent; }
+  void SvgParent(xaml::FrameworkElement const &value) { m_parent = value; }
 
   RNSVG::D2DGeometry Geometry() { return m_geometry; }
   void Geometry(RNSVG::D2DGeometry const &value) { m_geometry = value; }
@@ -71,7 +71,7 @@ struct RenderableView : RenderableViewT<RenderableView> {
 
  private:
   Microsoft::ReactNative::IReactContext m_reactContext{nullptr};
-  Windows::UI::Xaml::FrameworkElement m_parent{nullptr};
+  xaml::FrameworkElement m_parent{nullptr};
   RNSVG::D2DGeometry m_geometry{nullptr};
   bool m_recreateResources{true};
   bool m_isResponsible{false};
@@ -80,8 +80,8 @@ struct RenderableView : RenderableViewT<RenderableView> {
   hstring m_id{L""};
   hstring m_clipPathId{L""};
   Numerics::float3x2 m_transformMatrix{Numerics::make_float3x2_rotation(0)};
-  Windows::UI::Color m_fill{Windows::UI::Colors::Black()};
-  Windows::UI::Color m_stroke{Windows::UI::Colors::Transparent()};
+  Windows::UI::Color m_fill{Colors::Black()};
+  Windows::UI::Color m_stroke{Colors::Transparent()};
   hstring m_fillBrushId{L""};
   hstring m_strokeBrushId{L""};
   float m_fillOpacity{1.0f};

windows/RNSVG/RenderableViewManager.cpp

@@ -8,7 +8,7 @@ using namespace winrt;
 using namespace Microsoft::ReactNative;
 
 namespace winrt::RNSVG::implementation {
-Windows::UI::Xaml::FrameworkElement RenderableViewManager::CreateView() {
+xaml::FrameworkElement RenderableViewManager::CreateView() {
   switch (m_class) {
     case RNSVG::SVGClass::RNSVGGroup:
       return winrt::RNSVG::GroupView(m_reactContext);
@@ -75,7 +75,7 @@ IMapView<hstring, ViewManagerPropertyType> RenderableViewManager::NativeProps()
 }
 
 void RenderableViewManager::UpdateProperties(
-    Windows::UI::Xaml::FrameworkElement const &view,
+    xaml::FrameworkElement const &view,
     Microsoft::ReactNative::IJSValueReader const &propertyMapReader) {
   if (auto const &renderable{view.try_as<RenderableView>()}) {
     renderable->UpdateProperties(propertyMapReader);

windows/RNSVG/RenderableViewManager.h

@@ -10,7 +10,7 @@ struct RenderableViewManager : RenderableViewManagerT<RenderableViewManager> {
 
   // IViewManager
   hstring Name() { return m_name; }
-  Windows::UI::Xaml::FrameworkElement CreateView();
+  xaml::FrameworkElement CreateView();
 
   // IViewManagerWithReactContext
   Microsoft::ReactNative::IReactContext ReactContext() { return m_reactContext; }
@@ -18,7 +18,7 @@ struct RenderableViewManager : RenderableViewManagerT<RenderableViewManager> {
 
   // IViewManagerWithNativeProperties
   void UpdateProperties(
-      Windows::UI::Xaml::FrameworkElement const &view,
+      xaml::FrameworkElement const &view,
       Microsoft::ReactNative::IJSValueReader const &propertyMapReader);
   virtual
     Windows::Foundation::Collections::IMapView<hstring, Microsoft::ReactNative::ViewManagerPropertyType> NativeProps();

windows/RNSVG/SvgView.cpp

@@ -5,9 +5,14 @@
 #include "SvgView.g.cpp"
 #endif
 
+#include <UI.Xaml.Media.Imaging.h>
+#ifdef USE_WINUI3
+#include <microsoft.ui.xaml.media.dxinterop.h>
+#include <winrt/Microsoft.Graphics.Display.h>
+#else
 #include <windows.ui.xaml.media.dxinterop.h>
-#include <winrt/Windows.UI.Xaml.Media.Imaging.h>
 #include <winrt/Windows.Graphics.Display.h>
+#endif
 
 #include "D2DDevice.h"
 #include "D2DDeviceContext.h"

windows/RNSVG/SvgView.h

@@ -9,8 +9,8 @@ struct SvgView : SvgViewT<SvgView> {
 
   SvgView(Microsoft::ReactNative::IReactContext const &context);
 
-  Windows::UI::Xaml::FrameworkElement SvgParent() { return m_parent; }
-  void SvgParent(Windows::UI::Xaml::FrameworkElement const &value);
+  xaml::FrameworkElement SvgParent() { return m_parent; }
+  void SvgParent(xaml::FrameworkElement const &value);
 
   RNSVG::GroupView Group() { return m_group; }
   void Group(RNSVG::GroupView const &value) { m_group = value; }
@@ -48,8 +48,8 @@ struct SvgView : SvgViewT<SvgView> {
   Windows::Foundation::Size MeasureOverride(Windows::Foundation::Size const &availableSize);
   Windows::Foundation::Size ArrangeOverride(Windows::Foundation::Size const &finalSize);
 
-  void Panel_Loaded(Windows::Foundation::IInspectable const &sender, Windows::UI::Xaml::RoutedEventArgs const &args);
-  void Panel_Unloaded(Windows::Foundation::IInspectable const &sender, Windows::UI::Xaml::RoutedEventArgs const &args);
+  void Panel_Loaded(Windows::Foundation::IInspectable const &sender, xaml::RoutedEventArgs const &args);
+  void Panel_Unloaded(Windows::Foundation::IInspectable const &sender, xaml::RoutedEventArgs const &args);
 
   void Invalidate();
 
@@ -58,10 +58,10 @@ struct SvgView : SvgViewT<SvgView> {
   bool m_hasRendered{false};
   bool m_isResponsible{false};
   Microsoft::ReactNative::IReactContext m_reactContext{nullptr};
-  Windows::UI::Xaml::FrameworkElement m_parent{nullptr};
+  xaml::FrameworkElement m_parent{nullptr};
   RNSVG::D2DDevice m_device;
   RNSVG::D2DDeviceContext m_deviceContext;
-  Windows::UI::Xaml::Controls::Image m_image;
+  xaml::Controls::Image m_image;
   RNSVG::GroupView m_group{nullptr};
   hstring m_id{L""};
   float m_minX{0.0f};
@@ -74,14 +74,14 @@ struct SvgView : SvgViewT<SvgView> {
   RNSVG::SVGLength m_height{};
   std::string m_align{""};
   RNSVG::MeetOrSlice m_meetOrSlice{RNSVG::MeetOrSlice::Meet};
-  Windows::UI::Color m_currentColor{Windows::UI::Colors::Black()};
+  Windows::UI::Color m_currentColor{Colors::Black()};
 
   Windows::Foundation::Collections::IMap<hstring, RNSVG::IRenderable> m_templates{
       winrt::single_threaded_map<hstring, RNSVG::IRenderable>()};
   Windows::Foundation::Collections::IMap<hstring, RNSVG::BrushView> m_brushes{
       winrt::single_threaded_map<hstring, RNSVG::BrushView>()};
-  Windows::UI::Xaml::FrameworkElement::Loaded_revoker m_panelLoadedRevoker{};
-  Windows::UI::Xaml::FrameworkElement::Unloaded_revoker m_panelUnloadedRevoker{};
+  xaml::FrameworkElement::Loaded_revoker m_panelLoadedRevoker{};
+  xaml::FrameworkElement::Unloaded_revoker m_panelUnloadedRevoker{};
 };
 } // namespace winrt::RNSVG::implementation
 

windows/RNSVG/SvgViewManager.cpp

@@ -4,10 +4,10 @@
 #include "SvgViewManager.g.cpp"
 #endif
 
-#include <winrt/Windows.UI.Input.h>
-#include <winrt/Windows.UI.Xaml.Input.h>
-#include <winrt/Windows.UI.Xaml.Media.h>
-#include <winrt/Windows.UI.Xaml.Shapes.h>
+#include <UI.Input.h>
+#include <UI.Xaml.Input.h>
+#include <UI.Xaml.Media.h>
+#include <UI.Xaml.Shapes.h>
 
 #include "RenderableView.h"
 #include "SvgView.h"
@@ -16,8 +16,8 @@ namespace winrt {
 using namespace Windows::Foundation;
 using namespace Windows::Foundation::Collections;
 using namespace Microsoft::ReactNative;
-using namespace Windows::UI::Xaml;
-using namespace Windows::UI::Xaml::Controls;
+using namespace xaml;
+using namespace xaml::Controls;
 } // namespace winrt
 
 namespace winrt::RNSVG::implementation {

windows/RNSVG/SvgViewManager.h

@@ -8,7 +8,7 @@ struct SvgViewManager : SvgViewManagerT<SvgViewManager> {
 
   // IViewManager
   hstring Name();
-  Windows::UI::Xaml::FrameworkElement CreateView();
+  xaml::FrameworkElement CreateView();
 
   // IViewManagerWithReactContext
   Microsoft::ReactNative::IReactContext ReactContext();
@@ -17,18 +17,18 @@ struct SvgViewManager : SvgViewManagerT<SvgViewManager> {
   // IViewManagerWithNativeProperties
   Windows::Foundation::Collections::IMapView<hstring, Microsoft::ReactNative::ViewManagerPropertyType> NativeProps();
   void UpdateProperties(
-      Windows::UI::Xaml::FrameworkElement const &view,
+      xaml::FrameworkElement const &view,
       Microsoft::ReactNative::IJSValueReader const &propertyMapReader);
 
   // IViewManagerWithChildren
   void
-  AddView(Windows::UI::Xaml::FrameworkElement const &parent, Windows::UI::Xaml::UIElement const &child, int64_t index);
-  void RemoveAllChildren(Windows::UI::Xaml::FrameworkElement const &parent);
-  void RemoveChildAt(Windows::UI::Xaml::FrameworkElement const &parent, int64_t index);
+  AddView(xaml::FrameworkElement const &parent, xaml::UIElement const &child, int64_t index);
+  void RemoveAllChildren(xaml::FrameworkElement const &parent);
+  void RemoveChildAt(xaml::FrameworkElement const &parent, int64_t index);
   void ReplaceChild(
-      Windows::UI::Xaml::FrameworkElement const &parent,
-      Windows::UI::Xaml::UIElement const &oldChild,
-      Windows::UI::Xaml::UIElement const &newChild);
+      xaml::FrameworkElement const &parent,
+      xaml::UIElement const &oldChild,
+      xaml::UIElement const &newChild);
 
   // IViewManagerWithPointerEvents
   void OnPointerEvent(

windows/RNSVG/Utils.h

@@ -3,7 +3,7 @@
 #include "pch.h"
 
 #include <winrt/Windows.Foundation.Numerics.h>
-#include <winrt/Windows.UI.Text.h>
+#include <UI.Text.h>
 #include "JSValueReader.h"
 #include "D2DHelpers.h"
 #include "D2DBrush.h"
@@ -194,7 +194,7 @@ struct Utils {
     }
   }
 
-  static ui::Color JSValueAsColor(JSValue const &value, ui::Color const &defaultValue = Colors::Transparent()) {
+  static Windows::UI::Color JSValueAsColor(JSValue const &value, Windows::UI::Color const &defaultValue = Colors::Transparent()) {
     if (value.IsNull()) {
       return defaultValue;
     } else if (auto const &brush{value.To<xaml::Media::Brush>()}) {
@@ -266,7 +266,7 @@ struct Utils {
 
   static com_ptr<ID2D1Brush> GetCanvasBrush(
       hstring const &brushId,
-      ui::Color const &color,
+      Windows::UI::Color const &color,
       RNSVG::SvgView const &root,
       com_ptr<ID2D1Geometry> const &geometry) {
     com_ptr<ID2D1Brush> brush;

windows/RNSVG/Views.idl

@@ -1,10 +1,11 @@
 import "Types.idl";
+#include <NamespaceRedirect.h>
 
 namespace RNSVG
 {
   interface IRenderable
   {
-    Windows.UI.Xaml.FrameworkElement SvgParent;
+    XAML_NAMESPACE.FrameworkElement SvgParent;
     D2DGeometry Geometry;
     Boolean IsResponsible;
 
@@ -19,7 +20,7 @@ namespace RNSVG
   };
 
   [default_interface]
-  runtimeclass SvgView : Windows.UI.Xaml.Controls.Panel, IRenderable
+  runtimeclass SvgView : XAML_NAMESPACE.Controls.Panel, IRenderable
   {
     SvgView(Microsoft.ReactNative.IReactContext context);
 
@@ -34,7 +35,7 @@ namespace RNSVG
   };
 
   [default_interface]
-  unsealed runtimeclass RenderableView : Windows.UI.Xaml.FrameworkElement, IRenderable
+  unsealed runtimeclass RenderableView : XAML_NAMESPACE.FrameworkElement, IRenderable
   {
     RenderableView(Microsoft.ReactNative.IReactContext context);
     SvgView SvgRoot{ get; };

windows/RNSVG/pch.h

@@ -9,7 +9,7 @@
 #include <windows.h>
 #include <winrt/Windows.Foundation.Collections.h>
 #include <winrt/Windows.Foundation.h>
-#include <winrt/Windows.UI.Xaml.Media.h>
-#include <winrt/Windows.UI.Xaml.h>
+#include <CppWinRTIncludes.h>
+#include <UI.Xaml.Media.h>
 
 #include <winrt/Microsoft.ReactNative.h>