[DO NOT REVIEW] Prototype Xaml

packages/sample-app-fabric/App.tsx

@@ -8,6 +8,7 @@
 import React from 'react';
 import {SafeAreaView, StatusBar, useColorScheme} from 'react-native';
 import {NewAppScreen} from '@react-native/new-app-screen';
+import XamlHost from 'react-native-windows/Libraries/Components/Xaml/XamlHost';
 
 function App(): React.JSX.Element {
   const isDarkMode = useColorScheme() === 'dark';
@@ -18,7 +19,9 @@ function App(): React.JSX.Element {
         barStyle={isDarkMode ? 'light-content' : 'dark-content'}
         backgroundColor="transparent"
         translucent
-      />
+          />
+          <XamlHost label="sharath" style={{ width: 300, height: 200, borderWidth: 2, borderColor: 'black' }} />
+          <XamlHost label="sharath" style={{ width: 300, height: 200, borderWidth: 2, borderColor: 'black' }} />
       <NewAppScreen />
     </SafeAreaView>
   );

packages/sample-app-fabric/windows/SampleAppFabric/SampleAppFabric.cpp

@@ -8,12 +8,16 @@
 
 #include "NativeModules.h"
 
+#include "../../../../vnext/Microsoft.ReactNative/XamlHost.h"
+
+
 // A PackageProvider containing any turbo modules you define within this app project
 struct CompReactPackageProvider
     : winrt::implements<CompReactPackageProvider, winrt::Microsoft::ReactNative::IReactPackageProvider> {
  public: // IReactPackageProvider
   void CreatePackage(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) noexcept {
     AddAttributedModules(packageBuilder, true);
+    RegisterXamlHostComponentView(packageBuilder);
   }
 };
 

packages/sample-app-fabric/windows/SampleAppFabric/SampleAppFabric.vcxproj

@@ -77,8 +77,9 @@
       <DisableSpecificWarnings>4453;28204</DisableSpecificWarnings>
     </ClCompile>
     <Link>
-      <AdditionalDependencies>shell32.lib;user32.lib;windowsapp.lib;%(AdditionalDependenices)</AdditionalDependencies>
-      <SubSystem>Windows</SubSystem>
+      <AdditionalDependencies>shell32.lib;user32.lib;windowsapp.lib;Microsoft.ReactNative.lib;%(AdditionalDependencies)</AdditionalDependencies>
+      <AdditionalLibraryDirectories>..\..\..\..\vnext\target\x64\Debug\Microsoft.ReactNative\</AdditionalLibraryDirectories>
+	  <SubSystem>Windows</SubSystem>
       <GenerateDebugInformation>true</GenerateDebugInformation>
     </Link>
   </ItemDefinitionGroup>

vnext/Microsoft.ReactNative/App.xaml

@@ -0,0 +1,6 @@
+<Application
+    x:Class="Microsoft.ReactNative.XamlApplication"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:local="using:Microsoft.ReactNative">
+</Application>

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

@@ -178,14 +178,14 @@ ContentIslandComponentView::~ContentIslandComponentView() noexcept {
 void ContentIslandComponentView::MountChildComponentView(
     const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
     uint32_t index) noexcept {
-  assert(false);
+  //assert(false);
   base_type::MountChildComponentView(childComponentView, index);
 }
 
 void ContentIslandComponentView::UnmountChildComponentView(
     const winrt::Microsoft::ReactNative::ComponentView &childComponentView,
     uint32_t index) noexcept {
-  assert(false);
+  //assert(false);
   base_type::UnmountChildComponentView(childComponentView, index);
 }
 

vnext/Microsoft.ReactNative/Microsoft.ReactNative.vcxproj

@@ -68,7 +68,7 @@
   </ImportGroup>
   <ImportGroup Label="Shared" />
   <Import Project="..\Chakra\Chakra.vcxitems" Label="Shared" />
-  <Import Project="..\Shared\Shared.vcxitems" Label="Shared" />
+  <Import Project="..\Shared\Shared.vcxitems" Label="Shared" /><Import Project="..\Shared\Shared.vcxitems" Label="Shared" />
   <Import Project="..\Mso\Mso.vcxitems" Label="Shared" />
   <Import Project="..\Microsoft.ReactNative.Cxx\Microsoft.ReactNative.Cxx.vcxitems" Label="Shared" />
   <ImportGroup Label="PropertySheets">

vnext/Microsoft.ReactNative/Pch/pch.h

@@ -77,3 +77,20 @@
 #include <activeObject/activeObject.h>
 #include <functional/functorRef.h>
 #include <future/future.h>
+
+#include <winrt/Microsoft.UI.Composition.h>
+#include <winrt/Microsoft.UI.Dispatching.h>
+#include <winrt/Microsoft.UI.Xaml.Controls.Primitives.h>
+#include <winrt/Microsoft.UI.Xaml.Controls.h>
+#include <winrt/Microsoft.UI.Xaml.Data.h>
+#include <winrt/Microsoft.UI.Xaml.Interop.h>
+#include <winrt/Microsoft.UI.Xaml.Markup.h>
+#include <winrt/Microsoft.UI.Xaml.Media.h>
+#include <winrt/Microsoft.UI.Xaml.Navigation.h>
+#include <winrt/Microsoft.UI.Xaml.Shapes.h>
+#include <winrt/Microsoft.UI.Xaml.h>
+#include <winrt/Microsoft.Windows.ApplicationModel.Resources.h>
+#include <winrt/Windows.ApplicationModel.Activation.h>
+#include <winrt/Windows.Foundation.Collections.h>
+#include <winrt/Windows.Foundation.h>
+#include <winrt/Windows.UI.Xaml.Interop.h>

vnext/Microsoft.ReactNative/XamlApplication.cpp

@@ -0,0 +1,79 @@
+#include "pch.h"
+#include "XamlApplication.h"
+#include "XamlApplication.g.cpp"
+
+#include "winrt/Microsoft.UI.Xaml.XamlTypeInfo.h"
+
+namespace winrt::Microsoft::ReactNative::implementation
+{
+using namespace ::winrt::Microsoft::UI::Xaml;
+using namespace ::winrt::Microsoft::UI::Xaml::Markup;
+using namespace ::winrt::Windows::UI::Xaml::Interop;
+    XamlApplication::XamlApplication()
+    {
+      //m_providers.push_back(winrt::make_self<XamlMetaDataProvider>().as<winrt::Microsoft::UI::Xaml::Markup::IXamlMetadataProvider>());
+      s_current = *this;
+
+      // TODO: It's probably not a good idea to only load the controls pri file, there are other ones too.
+      auto resourceManager =
+          winrt::Microsoft::Windows::ApplicationModel::Resources::ResourceManager(L"Microsoft.UI.Xaml.Controls.pri");
+
+      this->ResourceManagerRequested([resourceManager](auto &&, ResourceManagerRequestedEventArgs args) {
+        args.CustomResourceManager(resourceManager);
+      });
+      winrt::Microsoft::UI::Xaml::Hosting::WindowsXamlManager::InitializeForCurrentThread();
+
+      m_providers.push_back(
+          winrt::make_self<XamlMetaDataProvider>()
+              .as<winrt::Microsoft::UI::Xaml::Markup::IXamlMetadataProvider>()); // Default generated provider
+      m_providers.push_back(winrt::Microsoft::UI::Xaml::XamlTypeInfo::XamlControlsXamlMetaDataProvider());
+
+      auto winUIResources = winrt::Microsoft::UI::Xaml::Controls::XamlControlsResources();
+      Resources().MergedDictionaries().Append(winUIResources);
+    }
+
+    XamlApplication::~XamlApplication()
+    {
+      s_current = nullptr;
+    }
+
+    void XamlApplication::AddMetadataProvider(winrt::Microsoft::UI::Xaml::Markup::IXamlMetadataProvider const& otherProvider)
+    {
+      m_providers.push_back(otherProvider);
+    }
+
+    winrt::Microsoft::UI::Xaml::Markup::IXamlType XamlApplication::GetXamlType(winrt::Windows::UI::Xaml::Interop::TypeName const& type)
+    {
+      for (auto &&provider : m_providers) {
+        if (auto result = provider.GetXamlType(type)) {
+          return result;
+        }
+      }
+      return nullptr;
+    }
+
+    winrt::Microsoft::UI::Xaml::Markup::IXamlType XamlApplication::GetXamlType(hstring const& fullName)
+    {
+      for (auto &&provider : m_providers) {
+        if (auto result = provider.GetXamlType(fullName)) {
+          return result;
+        }
+      }
+
+      return nullptr;
+    }
+    com_array<winrt::Microsoft::UI::Xaml::Markup::XmlnsDefinition> XamlApplication::GetXmlnsDefinitions()
+    {
+      std::vector<::winrt::Microsoft::UI::Xaml::Markup::XmlnsDefinition> allDefinitions;
+      for (const auto &provider : m_providers) {
+        auto definitionsCurrentProvider = provider.GetXmlnsDefinitions();
+        for (const auto &definition : definitionsCurrentProvider) {
+          allDefinitions.insert(allDefinitions.begin(), definition);
+        }
+      }
+      return winrt::com_array<::winrt::Microsoft::UI::Xaml::Markup::XmlnsDefinition>(
+          allDefinitions.begin(), allDefinitions.end());
+    }
+
+    winrt::Microsoft::ReactNative::XamlApplication XamlApplication::s_current{nullptr};
+}

vnext/Microsoft.ReactNative/XamlApplication.h

@@ -0,0 +1,47 @@
+#pragma once
+#include "XamlApplication.g.h"
+
+#include "winrt/Microsoft.UI.Xaml.Hosting.h"
+#include "winrt/Microsoft.UI.Xaml.Interop.h"
+#include "winrt/Microsoft.UI.Xaml.Markup.h"
+#include "winrt/Microsoft.UI.Xaml.h"
+
+#include "winrt/Windows.UI.Xaml.Interop.h"
+
+#include "XamlMetaDataProvider.h"
+
+namespace winrt::Microsoft::ReactNative::implementation
+{
+    struct XamlApplication : XamlApplicationT<XamlApplication>
+    {
+      XamlApplication();
+      ~XamlApplication();
+
+      static void EnsureCreated()
+      {
+        if (Current() == nullptr) {
+          s_current = winrt::make<winrt::Microsoft::ReactNative::implementation::XamlApplication>();
+        }
+      }
+
+      static winrt::Microsoft::ReactNative::XamlApplication Current()
+      {
+        return s_current;
+      }
+
+      void AddMetadataProvider(winrt::Microsoft::UI::Xaml::Markup::IXamlMetadataProvider const& otherProvider);
+      winrt::Microsoft::UI::Xaml::Markup::IXamlType GetXamlType(winrt::Windows::UI::Xaml::Interop::TypeName const& type);
+      winrt::Microsoft::UI::Xaml::Markup::IXamlType GetXamlType(hstring const& fullName);
+      com_array<winrt::Microsoft::UI::Xaml::Markup::XmlnsDefinition> GetXmlnsDefinitions();
+
+      private:
+      static winrt::Microsoft::ReactNative::XamlApplication s_current;
+      std::vector<winrt::Microsoft::UI::Xaml::Markup::IXamlMetadataProvider> m_providers;
+    };
+}
+namespace winrt::Microsoft::ReactNative::factory_implementation
+{
+    struct XamlApplication : XamlApplicationT<XamlApplication, implementation::XamlApplication>
+    {
+    };
+}

vnext/Microsoft.ReactNative/XamlApplication.idl

@@ -0,0 +1,17 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+namespace Microsoft.ReactNative {
+[webhosthidden][default_interface] runtimeclass XamlApplication : Microsoft.UI.Xaml.Application,
+    Microsoft.UI.Xaml.Markup.IXamlMetadataProvider {
+  XamlApplication();
+
+  static void EnsureCreated();
+
+  static XamlApplication Current {
+    get;
+  };
+
+  void AddMetadataProvider(Microsoft.UI.Xaml.Markup.IXamlMetadataProvider otherProvider);
+}
+} // namespace Microsoft.ReactNative. Xaml

vnext/Microsoft.ReactNative/XamlHost.cpp

@@ -0,0 +1,93 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+#include "pch.h"
+
+#include "XamlApplication.h"
+#include "XamlHost.h"
+
+#if defined(RNW_NEW_ARCH)
+
+#include "..\codegen\react\components\rnwcore\XamlHost.g.h"
+
+namespace winrt::Microsoft::ReactNative {
+
+struct XamlHostComponentView : public winrt::implements<XamlHostComponentView, winrt::IInspectable>,
+                               ::Microsoft::ReactNativeSpecs::BaseXamlHost<XamlHostComponentView> {
+  void InitializeContentIsland(
+      const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView &islandView) noexcept {
+    winrt::Microsoft::ReactNative::implementation::XamlApplication::EnsureCreated();
+
+    m_xamlIsland = winrt::Microsoft::UI::Xaml::XamlIsland{};
+
+   /* auto grid = winrt::Microsoft::UI::Xaml::Controls::Grid{};
+    auto button = winrt::Microsoft::UI::Xaml::Controls::Button{};
+    button.Content(winrt::box_value(L"(This is placeholder content for the XamlHost.)"));
+    grid.Children().Append(button);
+    m_xamlIsland.Content(grid);
+    m_xamlIsland.Content(m_XamlHost);*/
+    // Create a Button control
+
+    winrt::Microsoft::UI::Xaml::Controls::TextBlock textBlock;
+    textBlock.Text(L"Hello from XAML!");
+    textBlock.HorizontalAlignment(winrt::Microsoft::UI::Xaml::HorizontalAlignment::Center);
+    textBlock.VerticalAlignment(winrt::Microsoft::UI::Xaml::VerticalAlignment::Center);
+
+    m_xamlIsland.Content(textBlock);
+
+    islandView.Connect(m_xamlIsland.ContentIsland());
+  }
+
+  void MountChildComponentView(
+      const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+      const winrt::Microsoft::ReactNative::MountChildComponentViewArgs &args) noexcept override {
+    // Add the xaml child to the m_xamlIsland here.
+    /*
+    auto childXamlControl = args.Child().UserData().as<winrt::Microsoft::ReactNative::IXamlControl>();
+    if (childXamlControl) {
+      auto xamlElement = childXamlControl.GetXamlElement();
+      m_xamlIsland.Content(xamlElement);
+    }
+    */
+
+    // Create a Button control
+    winrt::Microsoft::UI::Xaml::Controls::Button button;
+    button.Content(winrt::box_value(L"Click Me"));
+    button.HorizontalAlignment(winrt::Microsoft::UI::Xaml::HorizontalAlignment::Center);
+    button.VerticalAlignment(winrt::Microsoft::UI::Xaml::VerticalAlignment::Center);
+
+    // Attach Click event handler
+    button.Click([](winrt::IInspectable const &, winrt::Microsoft::UI::Xaml::RoutedEventArgs const &) {
+      OutputDebugString(L"Welcome to XAML world\n");
+    });
+
+    m_xamlIsland.Content(button);
+
+  }
+
+  void UnmountChildComponentView(
+      const winrt::Microsoft::ReactNative::ComponentView & /*view*/,
+      const winrt::Microsoft::ReactNative::UnmountChildComponentViewArgs &) noexcept override {
+    m_xamlIsland.Content(nullptr);
+  }
+
+ private:
+  winrt::Microsoft::UI::Xaml::XamlIsland m_xamlIsland{nullptr};
+};
+
+} // namespace winrt::Microsoft::ReactNative
+
+void RegisterXamlHostComponentView(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) {
+  ::Microsoft::ReactNativeSpecs::RegisterXamlHostNativeComponent<winrt::Microsoft::ReactNative::XamlHostComponentView>(
+      packageBuilder,
+      [](const winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder &builder) {
+        builder.SetContentIslandComponentViewInitializer(
+            [](const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView &islandView) noexcept {
+              OutputDebugString(L"RegisterXamlHostComponentView called\n");
+              auto userData = winrt::make_self<winrt::Microsoft::ReactNative::XamlHostComponentView>();
+              userData->InitializeContentIsland(islandView);
+              islandView.UserData(*userData);
+            });
+      });
+}
+
+#endif // defined(RNW_NEW_ARCH) && defined(USE_EXPERIMENTAL_WINUI3)

vnext/Microsoft.ReactNative/XamlHost.h

@@ -0,0 +1,10 @@
+#pragma once
+
+#if defined(RNW_NEW_ARCH)
+
+__declspec(dllexport) void RegisterXamlHostComponentView(
+    winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder);
+
+//void RegisterXamlControl(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder);
+
+#endif // defined(RNW_NEW_ARCH) && defined(USE_EXPERIMENTAL_WINUI3)

vnext/Microsoft.ReactNative/microsoft.reactnative.def

@@ -1,3 +1,4 @@
 EXPORTS
 DllCanUnloadNow = WINRT_CanUnloadNow                    PRIVATE
 DllGetActivationFactory = WINRT_GetActivationFactory    PRIVATE
+RegisterXamlHostComponentView