From a393c48e2eece73043385a60f4de44b699dec739 Mon Sep 17 00:00:00 2001
From: JesseCol <50150435+JesseCol@users.noreply.github.com>
Date: Fri, 10 Jan 2025 14:48:02 -0800
Subject: [PATCH 01/10] Enable basic XamlIsland in rntester within playground
 app when UseExperimentalWinUI3 is true

---
 .../FabricXamlCalendarViewNativeComponent.js  |  36 +++++
 .../js/examples-win/XAML/FabricXamlExample.js |  67 ++++++++
 .../src/js/utils/RNTesterList.windows.js      |   5 +
 .../CustomComponent.cpp                       | 145 ++++++++++++++++++
 .../Playground-Composition.cpp                |   9 +-
 vnext/Microsoft.ReactNative.Cxx/XamlUtils.h   |  12 ++
 .../Fabric/Composition/Theme.cpp              |   2 +-
 .../renderer/graphics/PlatformColorUtils.cpp  |   2 +-
 .../Modules/AlertModule.cpp                   |   3 +-
 .../Modules/AppStateModule.cpp                |   2 +-
 .../Modules/AppThemeModuleUwp.cpp             |   4 +-
 .../Modules/AppearanceModule.cpp              |   4 +-
 .../Modules/DeviceInfoModule.cpp              |   6 +-
 .../Modules/I18nManagerModule.cpp             |   2 +-
 .../Microsoft.ReactNative/Modules/Timing.cpp  |   4 +-
 vnext/Microsoft.ReactNative/Views/DevMenu.cpp |   2 +-
 16 files changed, 286 insertions(+), 19 deletions(-)
 create mode 100644 packages/@react-native-windows/tester/src/js/examples-win/XAML/FabricXamlCalendarViewNativeComponent.js
 create mode 100644 packages/@react-native-windows/tester/src/js/examples-win/XAML/FabricXamlExample.js

diff --git a/packages/@react-native-windows/tester/src/js/examples-win/XAML/FabricXamlCalendarViewNativeComponent.js b/packages/@react-native-windows/tester/src/js/examples-win/XAML/FabricXamlCalendarViewNativeComponent.js
new file mode 100644
index 00000000000..9de666f9ea2
--- /dev/null
+++ b/packages/@react-native-windows/tester/src/js/examples-win/XAML/FabricXamlCalendarViewNativeComponent.js
@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+// Temporary test example for UseExperimentalWinUI3=true
+// Remove when we get react-native-xaml working well for Fabric
+
+import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+type SelectedDatesChangedEvent = $ReadOnly<{|
+  value: boolean,
+  target: Int32,
+  startDate: string,
+|}>;
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+
+  // Props
+  label: string,
+
+  // Events
+  onSelectedDatesChanged?: ?DirectEventHandler<SelectedDatesChangedEvent>,
+|}>;
+
+type ComponentType = HostComponent<NativeProps>;
+
+export default (codegenNativeComponent<NativeProps>(
+  'CalendarView',
+): ComponentType);
diff --git a/packages/@react-native-windows/tester/src/js/examples-win/XAML/FabricXamlExample.js b/packages/@react-native-windows/tester/src/js/examples-win/XAML/FabricXamlExample.js
new file mode 100644
index 00000000000..4a79cc56a3d
--- /dev/null
+++ b/packages/@react-native-windows/tester/src/js/examples-win/XAML/FabricXamlExample.js
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+// Temporary test example for UseExperimentalWinUI3=true
+// Remove when we get react-native-xaml working well for Fabric
+
+import React, {useState} from 'react';
+import {Alert, Button, Text, View, ScrollView} from 'react-native';
+import CalendarView from './FabricXamlCalendarViewNativeComponent';
+
+const XamlContentExample = () => {
+  const [selectedDate, setSelectedDate] = useState(true);
+
+  return (
+    <ScrollView>
+      <View
+        style={{
+          margin: 20,
+          flexDirection: 'column',
+          gap: 5,
+        }}>
+        <Button
+          title="Before Button"
+          onPress={() => Alert.alert('Before button pressed')}
+        />
+        <Text>Xaml CalendarView control. Selected date: {selectedDate}</Text>
+        <CalendarView
+          style={{
+            width: 400,
+            height: 400,
+            minWidth: 400,
+            minHeight: 400,
+          }}
+          onSelectedDatesChanged={e => {
+            setSelectedDate(e.nativeEvent.startDate);
+          }}
+        />
+        <Button
+          title="After Button"
+          onPress={() => Alert.alert('After button pressed')}
+        />
+      </View>
+    </ScrollView>
+  );
+};
+
+exports.displayName = 'XamlFabricExample';
+exports.framework = 'React';
+exports.category = 'UI';
+exports.title = 'Xaml WinUI3 (Experimental, for Fabric)';
+exports.description =
+  'Requires UseExperimentalWinUI3 - Xaml content that works in Fabric';
+
+exports.examples = [
+  {
+    title: 'Xaml WinUI3 (Experimental, for Fabric)',
+    render: function (): React.Node {
+      return <XamlContentExample />;
+    },
+  },
+];
diff --git a/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js b/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js
index 2e9d60dd9a4..d6eabdbb776 100644
--- a/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js
+++ b/packages/@react-native-windows/tester/src/js/utils/RNTesterList.windows.js
@@ -176,6 +176,11 @@ const Components: Array<RNTesterModuleInfo> = [
     category: 'UI',
     module: require('../examples-win/XAML/XAMLExample'),
   },
+  {
+    key: 'FabricXaml',
+    category: 'UI',
+    module: require('../examples-win/XAML/FabricXamlExample'),
+  },
   {
     key: 'LegacyControlStyleTest',
     module: require('../examples-win/LegacyTests/ControlStyleTestPage'),
diff --git a/packages/playground/windows/playground-composition/CustomComponent.cpp b/packages/playground/windows/playground-composition/CustomComponent.cpp
index 80e5f9a643f..60ebe6e02d9 100644
--- a/packages/playground/windows/playground-composition/CustomComponent.cpp
+++ b/packages/playground/windows/playground-composition/CustomComponent.cpp
@@ -14,6 +14,12 @@
 #include <winrt/Windows.UI.Composition.h>
 #include <winrt/Windows.UI.h>
 
+// For converting wf::DateTime to string
+#include <ctime>
+#include <iomanip>
+#include <strsafe.h>
+#include <sstream>
+
 #include <NativeModules.h>
 #include "YogaXamlPanel.h"
 
@@ -236,6 +242,138 @@ struct CustomComponentUserData : winrt::implements<CustomComponentUserData, winr
 #endif
 };
 
+
+#ifdef USE_EXPERIMENTAL_WINUI3
+
+// Should be codegen'd
+REACT_STRUCT(OnSelectedDatesChanged)
+struct OnSelectedDatesChanged {
+  REACT_FIELD(value)
+  bool value{false};
+
+  REACT_FIELD(target)
+  int32_t target{1};
+  REACT_FIELD(startDate)
+  winrt::hstring startDate;
+};
+
+// Should be codegen'd
+struct XamlCalendarComponentEventEmitter {
+  XamlCalendarComponentEventEmitter(const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter)
+      : m_eventEmitter(eventEmitter) {}
+
+  void onSelectedDatesChanged(OnSelectedDatesChanged &value) const {
+    m_eventEmitter.DispatchEvent(L"SelectedDatesChanged", [value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
+      winrt::Microsoft::ReactNative::WriteValue(writer, value);
+    });
+  }
+
+ private:
+  winrt::Microsoft::ReactNative::EventEmitter m_eventEmitter{nullptr};
+};
+
+struct XamlCalendarComponent : winrt::implements<XamlCalendarComponent, winrt::IInspectable> {
+  void Initialize(const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView &islandView) {
+    m_xamlIsland = winrt::Microsoft::UI::Xaml::XamlIsland{};
+    m_calendarView = winrt::Microsoft::UI::Xaml::Controls::CalendarView{};
+    m_xamlIsland.Content(m_calendarView);
+    islandView.Connect(m_xamlIsland.ContentIsland());
+    m_calendarView.SelectedDatesChanged([this](auto &&, auto&&) {
+          if (m_eventEmitter) {
+            OnSelectedDatesChanged args;
+            auto selectedDates = m_calendarView.SelectedDates();
+            if (selectedDates.Size() == 0) {
+              args.startDate = L"(none)";
+            } else {
+              auto firstSelectedDate = selectedDates.GetAt(0);
+
+              auto tt = winrt::clock::to_time_t(firstSelectedDate);
+              tm local{};
+              localtime_s(&local, &tt);
+              auto timeStr = std::put_time(&local, "%F");
+
+              std::wstringstream wss;
+
+              wss << (timeStr._Tptr->tm_year + 1900) << L"-"
+                  << (timeStr._Tptr->tm_mon + 1) << L"-"
+                  << timeStr._Tptr->tm_mday;
+
+              args.startDate = winrt::hstring(wss.str().c_str());
+            }
+            m_eventEmitter->onSelectedDatesChanged(args);
+          }
+        });
+  }
+
+  void PropsChanged(
+      const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView & /*islandView*/,
+      const winrt::Microsoft::ReactNative::IComponentProps & /*newProps*/,
+      const winrt::Microsoft::ReactNative::IComponentProps & /*oldProps*/) {}
+
+  void FinalizeUpdates() noexcept {
+  }
+
+  static void ConfigureBuilderForCustomComponent(
+      winrt::Microsoft::ReactNative::IReactViewComponentBuilder const &builder) {
+    builder.SetCreateProps([](winrt::Microsoft::ReactNative::ViewProps props,
+                              const winrt::Microsoft::ReactNative::IComponentProps &cloneFrom) noexcept {
+      return winrt::make<CustomXamlComponentProps>(props, cloneFrom);
+    });
+
+    builder.SetFinalizeUpdateHandler([](const winrt::Microsoft::ReactNative::ComponentView &source,
+                                        winrt::Microsoft::ReactNative::ComponentViewUpdateMask /*mask*/) {
+      auto userData = source.UserData().as<XamlCalendarComponent>();
+      userData->FinalizeUpdates();
+    });
+
+    auto compBuilder = builder.as<winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder>();
+
+    compBuilder.SetContentIslandComponentViewInitializer(
+        [](const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView &islandView) noexcept {
+          auto userData = winrt::make_self<XamlCalendarComponent>();
+          userData->Initialize(islandView);
+          islandView.UserData(*userData);
+
+          islandView.Destroying([](const winrt::IInspectable &sender, const winrt::IInspectable & /*args*/) {
+            auto senderIslandView = sender.as<winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView>();
+            auto userData = senderIslandView.UserData().as<XamlCalendarComponent>();
+            userData->m_xamlIsland.Close();
+          });
+        });
+
+    builder.SetUpdateEventEmitterHandler([](const winrt::Microsoft::ReactNative::ComponentView &source,
+                                            const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter) {
+      auto senderIslandView = source.as<winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView>();
+      auto userData = senderIslandView.UserData().as<XamlCalendarComponent>();
+      userData->m_eventEmitter = std::make_unique<XamlCalendarComponentEventEmitter>(eventEmitter);
+    });
+
+    builder.SetUpdatePropsHandler([](const winrt::Microsoft::ReactNative::ComponentView &source,
+                                     const winrt::Microsoft::ReactNative::IComponentProps &newProps,
+                                     const winrt::Microsoft::ReactNative::IComponentProps &oldProps) {
+      auto senderIslandView = source.as<winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView>();
+      auto userData = senderIslandView.UserData().as<XamlCalendarComponent>();
+      userData->PropsChanged(senderIslandView, newProps, oldProps);
+    });
+
+    builder.SetUpdateStateHandler([](const winrt::Microsoft::ReactNative::ComponentView &source,
+                                     const winrt::Microsoft::ReactNative::IComponentState &newState) {
+      auto senderIslandView = source.as<winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView>();
+      auto userData = senderIslandView.UserData().as<XamlCalendarComponent>();
+      userData->m_state = newState;
+    });
+  }
+
+ private:
+  winrt::Microsoft::UI::Xaml::Controls::TextBlock m_buttonLabelTextBlock{nullptr};
+  winrt::Microsoft::ReactNative::IComponentState m_state;
+  std::unique_ptr<XamlCalendarComponentEventEmitter> m_eventEmitter{nullptr};
+  winrt::Microsoft::UI::Xaml::XamlIsland m_xamlIsland{nullptr};
+  winrt::Microsoft::UI::Xaml::Controls::CalendarView m_calendarView{nullptr};
+};
+
+#endif // USE_EXPERIMENTAL_WINUI3
+
 static void RegisterViewComponent(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) {
   packageBuilder.as<winrt::Microsoft::ReactNative::IReactPackageBuilderFabric>().AddViewComponent(
       L"CustomXamlComponentWithNativeLayout",
@@ -248,6 +386,13 @@ static void RegisterViewComponent(winrt::Microsoft::ReactNative::IReactPackageBu
       [](winrt::Microsoft::ReactNative::IReactViewComponentBuilder const &builder) noexcept {
         CustomComponentUserData::ConfigureBuilderForCustomComponent(builder, false /*nativeLayout*/);
       });
+
+#ifdef USE_EXPERIMENTAL_WINUI3
+  packageBuilder.as<winrt::Microsoft::ReactNative::IReactPackageBuilderFabric>().AddViewComponent(
+      L"CalendarView", [](winrt::Microsoft::ReactNative::IReactViewComponentBuilder const &builder) noexcept {
+        XamlCalendarComponent::ConfigureBuilderForCustomComponent(builder);
+      });
+#endif // USE_EXPERIMENTAL_WINUI3
 }
 } // namespace winrt::PlaygroundApp::implementation
 
diff --git a/packages/playground/windows/playground-composition/Playground-Composition.cpp b/packages/playground/windows/playground-composition/Playground-Composition.cpp
index e1d010fcd62..318e27d45e5 100644
--- a/packages/playground/windows/playground-composition/Playground-Composition.cpp
+++ b/packages/playground/windows/playground-composition/Playground-Composition.cpp
@@ -103,9 +103,10 @@ struct EllipseReactPackageProvider
 struct CompReactPackageProvider
     : winrt::implements<CompReactPackageProvider, winrt::Microsoft::ReactNative::IReactPackageProvider> {
  public: // IReactPackageProvider
-  void CreatePackage(winrt::Microsoft::ReactNative::IReactPackageBuilder const & /*packageBuilder*/) noexcept {
-    // Reenable RegisterCustomComponent when we have better XamlIsland hosting support
-    // RegisterCustomComponent(packageBuilder);
+  void CreatePackage(winrt::Microsoft::ReactNative::IReactPackageBuilder const & packageBuilder) noexcept {
+#ifdef USE_EXPERIMENTAL_WINUI3
+    RegisterCustomComponent(packageBuilder);
+#endif // USE_EXPERIMENTAL_WINUI3
   }
 };
 
@@ -739,7 +740,7 @@ _Use_decl_annotations_ int CALLBACK WinMain(HINSTANCE instance, HINSTANCE, PSTR
 #ifdef USE_EXPERIMENTAL_WINUI3
   // Island-support: Create our custom Xaml App object. This is needed to properly use the controls and metadata
   // in Microsoft.ui.xaml.controls.dll.
-  // auto playgroundApp{winrt::make<winrt::Playground::implementation::App>()};
+  auto playgroundApp{winrt::make<winrt::Playground::implementation::App>()};
 #endif
 
   return RunPlayground(showCmd, false);
diff --git a/vnext/Microsoft.ReactNative.Cxx/XamlUtils.h b/vnext/Microsoft.ReactNative.Cxx/XamlUtils.h
index c4287ca3cab..71cbd24cbe2 100644
--- a/vnext/Microsoft.ReactNative.Cxx/XamlUtils.h
+++ b/vnext/Microsoft.ReactNative.Cxx/XamlUtils.h
@@ -54,6 +54,18 @@ inline Application TryGetCurrentApplication() noexcept {
   }
 }
 
+// In the legacy architecture, RNW uses a Uwp Xaml app as the groundwork for the UI.
+// In the new architecture, WinUI3 Xaml may be involved, but only as XamlIslands -- leaf nodes in the RNW content.
+// This function returns the Uwp/System Xaml Application if we're running in the legacy architecture and Xaml is
+// running, and null if otherwise.
+inline Application TryGetCurrentUwpXamlApplication() noexcept {
+#ifdef USE_WINUI3
+  return nullptr;
+#else
+  return TryGetCurrentApplication();
+#endif
+}
+
 // Using Windows::UI::ColorHelper causes the process to load Windows.UI.Xaml.dll which is not needed just to fill a
 // Color struct
 inline winrt::Windows::UI::Color FromArgb(uint8_t a, uint8_t r, uint8_t g, uint8_t b) {
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/Theme.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/Theme.cpp
index 2c4a3e72ad3..8a86a67c0f2 100644
--- a/vnext/Microsoft.ReactNative/Fabric/Composition/Theme.cpp
+++ b/vnext/Microsoft.ReactNative/Fabric/Composition/Theme.cpp
@@ -124,7 +124,7 @@ bool Theme::TryGetPlatformColor(const std::string &platformColor, winrt::Windows
 
 #ifndef CORE_ABI
   // If XAML is loaded, look in application resources
-  if (xaml::TryGetCurrentApplication()) {
+  if (xaml::TryGetCurrentUwpXamlApplication()) {
     const auto appResources{xaml::Application::Current().Resources()};
     const auto boxedResourceName{winrt::box_value(winrt::to_hstring(platformColor))};
     if (appResources.HasKey(boxedResourceName)) {
diff --git a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/PlatformColorUtils.cpp b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/PlatformColorUtils.cpp
index 589290f6f71..f87ce95c057 100644
--- a/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/PlatformColorUtils.cpp
+++ b/vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/PlatformColorUtils.cpp
@@ -16,7 +16,7 @@ winrt::Windows::UI::Color ResolvePlatformColor(const std::vector<std::string> &s
     for (auto platformColor : semanticItems) {
 #ifndef CORE_ABI
       // If XAML is loaded, look in application resources
-      if (xaml::TryGetCurrentApplication()) {
+      if (xaml::TryGetCurrentUwpXamlApplication()) {
         xaml::Media::Brush brush{Microsoft::ReactNative::BrushFromColorObject(platformColor)};
         if (auto scb{brush.try_as<xaml::Media::SolidColorBrush>()}) {
           return scb.Color();
diff --git a/vnext/Microsoft.ReactNative/Modules/AlertModule.cpp b/vnext/Microsoft.ReactNative/Modules/AlertModule.cpp
index 04de7fc2240..d16763e40da 100644
--- a/vnext/Microsoft.ReactNative/Modules/AlertModule.cpp
+++ b/vnext/Microsoft.ReactNative/Modules/AlertModule.cpp
@@ -220,7 +220,7 @@ void Alert::ProcessPendingAlertRequests() noexcept {
   if (pendingAlerts.empty())
     return;
 
-  if (xaml::TryGetCurrentApplication()) {
+  if (xaml::TryGetCurrentUwpXamlApplication()) {
     ProcessPendingAlertRequestsXaml();
   }
 #ifdef USE_FABRIC
@@ -230,6 +230,7 @@ void Alert::ProcessPendingAlertRequests() noexcept {
   }
 #endif
 }
+
 Alert::Constants Alert::GetConstants() noexcept {
   return m_constants;
 }
diff --git a/vnext/Microsoft.ReactNative/Modules/AppStateModule.cpp b/vnext/Microsoft.ReactNative/Modules/AppStateModule.cpp
index 89d9a0cd294..185b31c22d4 100644
--- a/vnext/Microsoft.ReactNative/Modules/AppStateModule.cpp
+++ b/vnext/Microsoft.ReactNative/Modules/AppStateModule.cpp
@@ -21,7 +21,7 @@ void AppState::Initialize(winrt::Microsoft::ReactNative::ReactContext const &rea
   // We need to register for notifications from the XAML thread.
   if (auto dispatcher = reactContext.UIDispatcher()) {
     dispatcher.Post([this]() {
-      auto currentApp = xaml::TryGetCurrentApplication();
+      auto currentApp = xaml::TryGetCurrentUwpXamlApplication();
 
       if (!IsWinUI3Island() && currentApp != nullptr) {
 #ifndef USE_WINUI3
diff --git a/vnext/Microsoft.ReactNative/Modules/AppThemeModuleUwp.cpp b/vnext/Microsoft.ReactNative/Modules/AppThemeModuleUwp.cpp
index dd6960e0508..6b3259f3b00 100644
--- a/vnext/Microsoft.ReactNative/Modules/AppThemeModuleUwp.cpp
+++ b/vnext/Microsoft.ReactNative/Modules/AppThemeModuleUwp.cpp
@@ -44,7 +44,7 @@ static const React::ReactPropertyId<React::ReactNonAbiValue<std::shared_ptr<AppT
 AppThemeHolder::AppThemeHolder(const Mso::React::IReactContext &context) : m_context(&context) {
   NotifyHighContrastChanged();
 
-  if (auto currentApp = xaml::TryGetCurrentApplication()) {
+  if (auto currentApp = xaml::TryGetCurrentUwpXamlApplication()) {
     if (IsWinUI3Island()) {
       m_wmSubscription = SubscribeToWindowMessage(
           ReactNotificationService(m_context->Notifications()), WM_THEMECHANGED, [this](const auto &, const auto &) {
@@ -77,7 +77,7 @@ void AppThemeHolder::SetCallback(
 
 void AppThemeHolder::NotifyHighContrastChanged() noexcept {
   m_appThemeData.isHighContrast =
-      xaml::TryGetCurrentApplication() ? m_accessibilitySettings.HighContrast() : IsInHighContrastWin32();
+      xaml::TryGetCurrentUwpXamlApplication() ? m_accessibilitySettings.HighContrast() : IsInHighContrastWin32();
   m_appThemeData.highContrastColors.ButtonFaceColor =
       FormatRGB(m_uiSettings.UIElementColor(winrt::UIElementType::ButtonFace));
   m_appThemeData.highContrastColors.ButtonTextColor =
diff --git a/vnext/Microsoft.ReactNative/Modules/AppearanceModule.cpp b/vnext/Microsoft.ReactNative/Modules/AppearanceModule.cpp
index fd16f26a606..5a2791c2bd6 100644
--- a/vnext/Microsoft.ReactNative/Modules/AppearanceModule.cpp
+++ b/vnext/Microsoft.ReactNative/Modules/AppearanceModule.cpp
@@ -50,7 +50,7 @@ ApplicationTheme CurrentThemeFromUISettings(const winrt::Windows::UI::ViewManage
 
 ApplicationTheme Appearance::GetCurrentTheme() noexcept {
   assert(m_context.UIDispatcher().HasThreadAccess()); // xaml::Application is only accessible on the UI thread
-  if (auto currentApp = xaml::TryGetCurrentApplication()) {
+  if (auto currentApp = xaml::TryGetCurrentUwpXamlApplication()) {
     return currentApp.RequestedTheme();
   }
 
@@ -74,7 +74,7 @@ void Appearance::RequeryTheme() noexcept {
 
 void Appearance::InitOnUIThread(const Mso::React::IReactContext &context) noexcept {
   xaml::ApplicationTheme theme = ApplicationTheme::Light;
-  if (auto currentApp = xaml::TryGetCurrentApplication()) {
+  if (auto currentApp = xaml::TryGetCurrentUwpXamlApplication()) {
     theme = currentApp.RequestedTheme();
   } else {
     theme = CurrentThemeFromUISettings(winrt::Windows::UI::ViewManagement::UISettings());
diff --git a/vnext/Microsoft.ReactNative/Modules/DeviceInfoModule.cpp b/vnext/Microsoft.ReactNative/Modules/DeviceInfoModule.cpp
index ea74ae6b188..610e08bca0b 100644
--- a/vnext/Microsoft.ReactNative/Modules/DeviceInfoModule.cpp
+++ b/vnext/Microsoft.ReactNative/Modules/DeviceInfoModule.cpp
@@ -36,7 +36,7 @@ DeviceInfoHolder::DeviceInfoHolder(const Mso::React::IReactContext &context) : m
 }
 
 void DeviceInfoHolder::InitDeviceInfoHolder(const Mso::React::IReactContext &context) noexcept {
-  if (xaml::TryGetCurrentApplication() || IsFabricEnabled(context.Properties())) {
+  if (xaml::TryGetCurrentUwpXamlApplication() || IsFabricEnabled(context.Properties())) {
     auto deviceInfoHolder = std::make_shared<DeviceInfoHolder>(context);
 
     deviceInfoHolder->updateDeviceInfo();
@@ -51,7 +51,7 @@ void DeviceInfoHolder::InitDeviceInfoHolder(const Mso::React::IReactContext &con
     }
 #endif
 
-    if (xaml::TryGetCurrentApplication()) {
+    if (xaml::TryGetCurrentUwpXamlApplication()) {
       if (auto window = xaml::Window::Current()) {
         auto const &coreWindow = window.CoreWindow();
 
@@ -157,7 +157,7 @@ void DeviceInfoHolder::SetCallback(
 }
 
 void DeviceInfoHolder::updateDeviceInfo() noexcept {
-  if (xaml::TryGetCurrentApplication() && xaml::Window::Current()) {
+  if (xaml::TryGetCurrentUwpXamlApplication() && xaml::Window::Current()) {
     auto const window = xaml::Window::Current().CoreWindow();
 
     m_windowWidth = window.Bounds().Width;
diff --git a/vnext/Microsoft.ReactNative/Modules/I18nManagerModule.cpp b/vnext/Microsoft.ReactNative/Modules/I18nManagerModule.cpp
index 404c3d3e108..de8c5e01fba 100644
--- a/vnext/Microsoft.ReactNative/Modules/I18nManagerModule.cpp
+++ b/vnext/Microsoft.ReactNative/Modules/I18nManagerModule.cpp
@@ -28,7 +28,7 @@ static const React::ReactPropertyId<bool> &ForceRTLPropertyId() noexcept {
 }
 
 void I18nManager::InitI18nInfo(const winrt::Microsoft::ReactNative::ReactPropertyBag &propertyBag) noexcept {
-  if (xaml::TryGetCurrentApplication() && !IsXamlIsland()) {
+  if (xaml::TryGetCurrentUwpXamlApplication() && !IsXamlIsland()) {
     // TODO: Figure out packaged win32 app story for WinUI 3
     auto layoutDirection = winrt::Windows::ApplicationModel::Resources::Core::ResourceContext()
                                .GetForCurrentView()
diff --git a/vnext/Microsoft.ReactNative/Modules/Timing.cpp b/vnext/Microsoft.ReactNative/Modules/Timing.cpp
index 7819f07f74d..083b1f6c542 100644
--- a/vnext/Microsoft.ReactNative/Modules/Timing.cpp
+++ b/vnext/Microsoft.ReactNative/Modules/Timing.cpp
@@ -124,7 +124,7 @@ void TimerRegistry::setTimerManager(std::weak_ptr<facebook::react::TimerManager>
 void Timing::Initialize(winrt::Microsoft::ReactNative::ReactContext const &reactContext) noexcept {
   m_context = reactContext;
   m_properties = reactContext.Properties().Handle();
-  m_usePostForRendering = !xaml::TryGetCurrentApplication();
+  m_usePostForRendering = !xaml::TryGetCurrentUwpXamlApplication();
   m_uiDispatcher = m_context.UIDispatcher().Handle();
 }
 
@@ -133,7 +133,7 @@ void Timing::InitializeBridgeless(
     const winrt::Microsoft::ReactNative::IReactPropertyBag &properties) noexcept {
   m_timerRegistry = timerRegistry;
   m_properties = properties;
-  m_usePostForRendering = !xaml::TryGetCurrentApplication();
+  m_usePostForRendering = !xaml::TryGetCurrentUwpXamlApplication();
   m_uiDispatcher = {properties.Get(winrt::Microsoft::ReactNative::ReactDispatcherHelper::UIDispatcherProperty())
                         .try_as<winrt::Microsoft::ReactNative::IReactDispatcher>()};
 }
diff --git a/vnext/Microsoft.ReactNative/Views/DevMenu.cpp b/vnext/Microsoft.ReactNative/Views/DevMenu.cpp
index d382abe902b..1b8f6a7a4c6 100644
--- a/vnext/Microsoft.ReactNative/Views/DevMenu.cpp
+++ b/vnext/Microsoft.ReactNative/Views/DevMenu.cpp
@@ -397,7 +397,7 @@ std::shared_ptr<IDevMenu> GetOrCreateDevMenu(Mso::CntPtr<Mso::React::IReactConte
           DevMenuImplProperty(),
           [reactContext]() -> std::shared_ptr<IDevMenu> {
 #ifndef CORE_ABI
-            if (xaml::TryGetCurrentApplication()) {
+            if (xaml::TryGetCurrentUwpXamlApplication()) {
               auto devMenu = std::make_shared<InAppXamlDevMenu>(reactContext);
               return devMenu;
             } else

From b62111a25446172d06e0bdbea0ca594d1e56611b Mon Sep 17 00:00:00 2001
From: JesseCol <50150435+JesseCol@users.noreply.github.com>
Date: Fri, 10 Jan 2025 14:58:21 -0800
Subject: [PATCH 02/10] Change files

---
 ...ative-windows-1fbec1a3-51f6-4e89-ac75-86846570013e.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/react-native-windows-1fbec1a3-51f6-4e89-ac75-86846570013e.json

diff --git a/change/react-native-windows-1fbec1a3-51f6-4e89-ac75-86846570013e.json b/change/react-native-windows-1fbec1a3-51f6-4e89-ac75-86846570013e.json
new file mode 100644
index 00000000000..2d1a9520d1f
--- /dev/null
+++ b/change/react-native-windows-1fbec1a3-51f6-4e89-ac75-86846570013e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Enable basic XamlIsland in rntester within playground app when UseExperimentalWinUI3 is true",
+  "packageName": "react-native-windows",
+  "email": "50150435+JesseCol@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

From 9c0c68a0e9255cb2059ea79ed13c5de7192d38bc Mon Sep 17 00:00:00 2001
From: JesseCol <50150435+JesseCol@users.noreply.github.com>
Date: Fri, 10 Jan 2025 16:18:19 -0800
Subject: [PATCH 03/10] Fix build break due to unreferenced parameter

---
 .../windows/playground-composition/Playground-Composition.cpp   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/playground/windows/playground-composition/Playground-Composition.cpp b/packages/playground/windows/playground-composition/Playground-Composition.cpp
index 318e27d45e5..3d3104878f1 100644
--- a/packages/playground/windows/playground-composition/Playground-Composition.cpp
+++ b/packages/playground/windows/playground-composition/Playground-Composition.cpp
@@ -106,6 +106,8 @@ struct CompReactPackageProvider
   void CreatePackage(winrt::Microsoft::ReactNative::IReactPackageBuilder const & packageBuilder) noexcept {
 #ifdef USE_EXPERIMENTAL_WINUI3
     RegisterCustomComponent(packageBuilder);
+#else
+    UNREFERENCED_PARAMETER(packageBuilder);
 #endif // USE_EXPERIMENTAL_WINUI3
   }
 };

From aad94e2f6adf0edc33501d79b3fc468d852fe204 Mon Sep 17 00:00:00 2001
From: JesseCol <50150435+JesseCol@users.noreply.github.com>
Date: Fri, 10 Jan 2025 16:39:33 -0800
Subject: [PATCH 04/10] lint

---
 .../CustomComponent.cpp                       | 62 +++++++++----------
 .../Playground-Composition.cpp                |  2 +-
 2 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/packages/playground/windows/playground-composition/CustomComponent.cpp b/packages/playground/windows/playground-composition/CustomComponent.cpp
index 60ebe6e02d9..5b44da57545 100644
--- a/packages/playground/windows/playground-composition/CustomComponent.cpp
+++ b/packages/playground/windows/playground-composition/CustomComponent.cpp
@@ -15,9 +15,9 @@
 #include <winrt/Windows.UI.h>
 
 // For converting wf::DateTime to string
+#include <strsafe.h>
 #include <ctime>
 #include <iomanip>
-#include <strsafe.h>
 #include <sstream>
 
 #include <NativeModules.h>
@@ -242,7 +242,6 @@ struct CustomComponentUserData : winrt::implements<CustomComponentUserData, winr
 #endif
 };
 
-
 #ifdef USE_EXPERIMENTAL_WINUI3
 
 // Should be codegen'd
@@ -263,9 +262,10 @@ struct XamlCalendarComponentEventEmitter {
       : m_eventEmitter(eventEmitter) {}
 
   void onSelectedDatesChanged(OnSelectedDatesChanged &value) const {
-    m_eventEmitter.DispatchEvent(L"SelectedDatesChanged", [value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
-      winrt::Microsoft::ReactNative::WriteValue(writer, value);
-    });
+    m_eventEmitter.DispatchEvent(
+        L"SelectedDatesChanged", [value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
+          winrt::Microsoft::ReactNative::WriteValue(writer, value);
+        });
   }
 
  private:
@@ -278,31 +278,30 @@ struct XamlCalendarComponent : winrt::implements<XamlCalendarComponent, winrt::I
     m_calendarView = winrt::Microsoft::UI::Xaml::Controls::CalendarView{};
     m_xamlIsland.Content(m_calendarView);
     islandView.Connect(m_xamlIsland.ContentIsland());
-    m_calendarView.SelectedDatesChanged([this](auto &&, auto&&) {
-          if (m_eventEmitter) {
-            OnSelectedDatesChanged args;
-            auto selectedDates = m_calendarView.SelectedDates();
-            if (selectedDates.Size() == 0) {
-              args.startDate = L"(none)";
-            } else {
-              auto firstSelectedDate = selectedDates.GetAt(0);
-
-              auto tt = winrt::clock::to_time_t(firstSelectedDate);
-              tm local{};
-              localtime_s(&local, &tt);
-              auto timeStr = std::put_time(&local, "%F");
-
-              std::wstringstream wss;
-
-              wss << (timeStr._Tptr->tm_year + 1900) << L"-"
-                  << (timeStr._Tptr->tm_mon + 1) << L"-"
-                  << timeStr._Tptr->tm_mday;
-
-              args.startDate = winrt::hstring(wss.str().c_str());
-            }
-            m_eventEmitter->onSelectedDatesChanged(args);
-          }
-        });
+    m_calendarView.SelectedDatesChanged([this](auto &&, auto &&) {
+      if (m_eventEmitter) {
+        OnSelectedDatesChanged args;
+        auto selectedDates = m_calendarView.SelectedDates();
+        if (selectedDates.Size() == 0) {
+          args.startDate = L"(none)";
+        } else {
+          auto firstSelectedDate = selectedDates.GetAt(0);
+
+          auto tt = winrt::clock::to_time_t(firstSelectedDate);
+          tm local{};
+          localtime_s(&local, &tt);
+          auto timeStr = std::put_time(&local, "%F");
+
+          std::wstringstream wss;
+
+          wss << (timeStr._Tptr->tm_year + 1900) << L"-" << (timeStr._Tptr->tm_mon + 1) << L"-"
+              << timeStr._Tptr->tm_mday;
+
+          args.startDate = winrt::hstring(wss.str().c_str());
+        }
+        m_eventEmitter->onSelectedDatesChanged(args);
+      }
+    });
   }
 
   void PropsChanged(
@@ -310,8 +309,7 @@ struct XamlCalendarComponent : winrt::implements<XamlCalendarComponent, winrt::I
       const winrt::Microsoft::ReactNative::IComponentProps & /*newProps*/,
       const winrt::Microsoft::ReactNative::IComponentProps & /*oldProps*/) {}
 
-  void FinalizeUpdates() noexcept {
-  }
+  void FinalizeUpdates() noexcept {}
 
   static void ConfigureBuilderForCustomComponent(
       winrt::Microsoft::ReactNative::IReactViewComponentBuilder const &builder) {
diff --git a/packages/playground/windows/playground-composition/Playground-Composition.cpp b/packages/playground/windows/playground-composition/Playground-Composition.cpp
index 3d3104878f1..bd2d52a28db 100644
--- a/packages/playground/windows/playground-composition/Playground-Composition.cpp
+++ b/packages/playground/windows/playground-composition/Playground-Composition.cpp
@@ -103,7 +103,7 @@ struct EllipseReactPackageProvider
 struct CompReactPackageProvider
     : winrt::implements<CompReactPackageProvider, winrt::Microsoft::ReactNative::IReactPackageProvider> {
  public: // IReactPackageProvider
-  void CreatePackage(winrt::Microsoft::ReactNative::IReactPackageBuilder const & packageBuilder) noexcept {
+  void CreatePackage(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) noexcept {
 #ifdef USE_EXPERIMENTAL_WINUI3
     RegisterCustomComponent(packageBuilder);
 #else

From 9be3311dbc255d0f26cc31a3d7aa0832571d4b87 Mon Sep 17 00:00:00 2001
From: JesseCol <50150435+JesseCol@users.noreply.github.com>
Date: Tue, 14 Jan 2025 07:35:44 -0800
Subject: [PATCH 05/10] Move the implementation of CalendarView to
 sample-custom-component, and use codegen

---
 .../FabricXamlCalendarViewNativeComponent.js  |  36 -----
 .../js/examples-win/XAML/FabricXamlExample.js |   2 +-
 .../CustomComponent.cpp                       | 143 ------------------
 .../FabricXamlCalendarViewNativeComponent.ts  |  27 ++++
 packages/sample-custom-component/src/index.ts |   3 +
 .../SampleCustomComponent/CalendarView.cpp    |  76 ++++++++++
 .../SampleCustomComponent/CalendarView.h      |   3 +
 .../ReactPackageProvider.cpp                  |   2 +
 .../SampleCustomComponent.vcxproj             |   2 +
 9 files changed, 114 insertions(+), 180 deletions(-)
 delete mode 100644 packages/@react-native-windows/tester/src/js/examples-win/XAML/FabricXamlCalendarViewNativeComponent.js
 create mode 100644 packages/sample-custom-component/src/FabricXamlCalendarViewNativeComponent.ts
 create mode 100644 packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.cpp
 create mode 100644 packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.h

diff --git a/packages/@react-native-windows/tester/src/js/examples-win/XAML/FabricXamlCalendarViewNativeComponent.js b/packages/@react-native-windows/tester/src/js/examples-win/XAML/FabricXamlCalendarViewNativeComponent.js
deleted file mode 100644
index 9de666f9ea2..00000000000
--- a/packages/@react-native-windows/tester/src/js/examples-win/XAML/FabricXamlCalendarViewNativeComponent.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright (c) Microsoft Corporation.
- * Licensed under the MIT License.
- * @format
- * @flow
- */
-
-'use strict';
-
-// Temporary test example for UseExperimentalWinUI3=true
-// Remove when we get react-native-xaml working well for Fabric
-
-import type {HostComponent} from 'react-native/Libraries/Renderer/shims/ReactNativeTypes';
-import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
-
-type SelectedDatesChangedEvent = $ReadOnly<{|
-  value: boolean,
-  target: Int32,
-  startDate: string,
-|}>;
-
-type NativeProps = $ReadOnly<{|
-  ...ViewProps,
-
-  // Props
-  label: string,
-
-  // Events
-  onSelectedDatesChanged?: ?DirectEventHandler<SelectedDatesChangedEvent>,
-|}>;
-
-type ComponentType = HostComponent<NativeProps>;
-
-export default (codegenNativeComponent<NativeProps>(
-  'CalendarView',
-): ComponentType);
diff --git a/packages/@react-native-windows/tester/src/js/examples-win/XAML/FabricXamlExample.js b/packages/@react-native-windows/tester/src/js/examples-win/XAML/FabricXamlExample.js
index 4a79cc56a3d..fe0680ec259 100644
--- a/packages/@react-native-windows/tester/src/js/examples-win/XAML/FabricXamlExample.js
+++ b/packages/@react-native-windows/tester/src/js/examples-win/XAML/FabricXamlExample.js
@@ -12,7 +12,7 @@
 
 import React, {useState} from 'react';
 import {Alert, Button, Text, View, ScrollView} from 'react-native';
-import CalendarView from './FabricXamlCalendarViewNativeComponent';
+import {CalendarView} from 'sample-custom-component';
 
 const XamlContentExample = () => {
   const [selectedDate, setSelectedDate] = useState(true);
diff --git a/packages/playground/windows/playground-composition/CustomComponent.cpp b/packages/playground/windows/playground-composition/CustomComponent.cpp
index 5b44da57545..80e5f9a643f 100644
--- a/packages/playground/windows/playground-composition/CustomComponent.cpp
+++ b/packages/playground/windows/playground-composition/CustomComponent.cpp
@@ -14,12 +14,6 @@
 #include <winrt/Windows.UI.Composition.h>
 #include <winrt/Windows.UI.h>
 
-// For converting wf::DateTime to string
-#include <strsafe.h>
-#include <ctime>
-#include <iomanip>
-#include <sstream>
-
 #include <NativeModules.h>
 #include "YogaXamlPanel.h"
 
@@ -242,136 +236,6 @@ struct CustomComponentUserData : winrt::implements<CustomComponentUserData, winr
 #endif
 };
 
-#ifdef USE_EXPERIMENTAL_WINUI3
-
-// Should be codegen'd
-REACT_STRUCT(OnSelectedDatesChanged)
-struct OnSelectedDatesChanged {
-  REACT_FIELD(value)
-  bool value{false};
-
-  REACT_FIELD(target)
-  int32_t target{1};
-  REACT_FIELD(startDate)
-  winrt::hstring startDate;
-};
-
-// Should be codegen'd
-struct XamlCalendarComponentEventEmitter {
-  XamlCalendarComponentEventEmitter(const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter)
-      : m_eventEmitter(eventEmitter) {}
-
-  void onSelectedDatesChanged(OnSelectedDatesChanged &value) const {
-    m_eventEmitter.DispatchEvent(
-        L"SelectedDatesChanged", [value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
-          winrt::Microsoft::ReactNative::WriteValue(writer, value);
-        });
-  }
-
- private:
-  winrt::Microsoft::ReactNative::EventEmitter m_eventEmitter{nullptr};
-};
-
-struct XamlCalendarComponent : winrt::implements<XamlCalendarComponent, winrt::IInspectable> {
-  void Initialize(const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView &islandView) {
-    m_xamlIsland = winrt::Microsoft::UI::Xaml::XamlIsland{};
-    m_calendarView = winrt::Microsoft::UI::Xaml::Controls::CalendarView{};
-    m_xamlIsland.Content(m_calendarView);
-    islandView.Connect(m_xamlIsland.ContentIsland());
-    m_calendarView.SelectedDatesChanged([this](auto &&, auto &&) {
-      if (m_eventEmitter) {
-        OnSelectedDatesChanged args;
-        auto selectedDates = m_calendarView.SelectedDates();
-        if (selectedDates.Size() == 0) {
-          args.startDate = L"(none)";
-        } else {
-          auto firstSelectedDate = selectedDates.GetAt(0);
-
-          auto tt = winrt::clock::to_time_t(firstSelectedDate);
-          tm local{};
-          localtime_s(&local, &tt);
-          auto timeStr = std::put_time(&local, "%F");
-
-          std::wstringstream wss;
-
-          wss << (timeStr._Tptr->tm_year + 1900) << L"-" << (timeStr._Tptr->tm_mon + 1) << L"-"
-              << timeStr._Tptr->tm_mday;
-
-          args.startDate = winrt::hstring(wss.str().c_str());
-        }
-        m_eventEmitter->onSelectedDatesChanged(args);
-      }
-    });
-  }
-
-  void PropsChanged(
-      const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView & /*islandView*/,
-      const winrt::Microsoft::ReactNative::IComponentProps & /*newProps*/,
-      const winrt::Microsoft::ReactNative::IComponentProps & /*oldProps*/) {}
-
-  void FinalizeUpdates() noexcept {}
-
-  static void ConfigureBuilderForCustomComponent(
-      winrt::Microsoft::ReactNative::IReactViewComponentBuilder const &builder) {
-    builder.SetCreateProps([](winrt::Microsoft::ReactNative::ViewProps props,
-                              const winrt::Microsoft::ReactNative::IComponentProps &cloneFrom) noexcept {
-      return winrt::make<CustomXamlComponentProps>(props, cloneFrom);
-    });
-
-    builder.SetFinalizeUpdateHandler([](const winrt::Microsoft::ReactNative::ComponentView &source,
-                                        winrt::Microsoft::ReactNative::ComponentViewUpdateMask /*mask*/) {
-      auto userData = source.UserData().as<XamlCalendarComponent>();
-      userData->FinalizeUpdates();
-    });
-
-    auto compBuilder = builder.as<winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder>();
-
-    compBuilder.SetContentIslandComponentViewInitializer(
-        [](const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView &islandView) noexcept {
-          auto userData = winrt::make_self<XamlCalendarComponent>();
-          userData->Initialize(islandView);
-          islandView.UserData(*userData);
-
-          islandView.Destroying([](const winrt::IInspectable &sender, const winrt::IInspectable & /*args*/) {
-            auto senderIslandView = sender.as<winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView>();
-            auto userData = senderIslandView.UserData().as<XamlCalendarComponent>();
-            userData->m_xamlIsland.Close();
-          });
-        });
-
-    builder.SetUpdateEventEmitterHandler([](const winrt::Microsoft::ReactNative::ComponentView &source,
-                                            const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter) {
-      auto senderIslandView = source.as<winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView>();
-      auto userData = senderIslandView.UserData().as<XamlCalendarComponent>();
-      userData->m_eventEmitter = std::make_unique<XamlCalendarComponentEventEmitter>(eventEmitter);
-    });
-
-    builder.SetUpdatePropsHandler([](const winrt::Microsoft::ReactNative::ComponentView &source,
-                                     const winrt::Microsoft::ReactNative::IComponentProps &newProps,
-                                     const winrt::Microsoft::ReactNative::IComponentProps &oldProps) {
-      auto senderIslandView = source.as<winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView>();
-      auto userData = senderIslandView.UserData().as<XamlCalendarComponent>();
-      userData->PropsChanged(senderIslandView, newProps, oldProps);
-    });
-
-    builder.SetUpdateStateHandler([](const winrt::Microsoft::ReactNative::ComponentView &source,
-                                     const winrt::Microsoft::ReactNative::IComponentState &newState) {
-      auto senderIslandView = source.as<winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView>();
-      auto userData = senderIslandView.UserData().as<XamlCalendarComponent>();
-      userData->m_state = newState;
-    });
-  }
-
- private:
-  winrt::Microsoft::UI::Xaml::Controls::TextBlock m_buttonLabelTextBlock{nullptr};
-  winrt::Microsoft::ReactNative::IComponentState m_state;
-  std::unique_ptr<XamlCalendarComponentEventEmitter> m_eventEmitter{nullptr};
-  winrt::Microsoft::UI::Xaml::XamlIsland m_xamlIsland{nullptr};
-  winrt::Microsoft::UI::Xaml::Controls::CalendarView m_calendarView{nullptr};
-};
-
-#endif // USE_EXPERIMENTAL_WINUI3
-
 static void RegisterViewComponent(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) {
   packageBuilder.as<winrt::Microsoft::ReactNative::IReactPackageBuilderFabric>().AddViewComponent(
       L"CustomXamlComponentWithNativeLayout",
@@ -384,13 +248,6 @@ static void RegisterViewComponent(winrt::Microsoft::ReactNative::IReactPackageBu
       [](winrt::Microsoft::ReactNative::IReactViewComponentBuilder const &builder) noexcept {
         CustomComponentUserData::ConfigureBuilderForCustomComponent(builder, false /*nativeLayout*/);
       });
-
-#ifdef USE_EXPERIMENTAL_WINUI3
-  packageBuilder.as<winrt::Microsoft::ReactNative::IReactPackageBuilderFabric>().AddViewComponent(
-      L"CalendarView", [](winrt::Microsoft::ReactNative::IReactViewComponentBuilder const &builder) noexcept {
-        XamlCalendarComponent::ConfigureBuilderForCustomComponent(builder);
-      });
-#endif // USE_EXPERIMENTAL_WINUI3
 }
 } // namespace winrt::PlaygroundApp::implementation
 
diff --git a/packages/sample-custom-component/src/FabricXamlCalendarViewNativeComponent.ts b/packages/sample-custom-component/src/FabricXamlCalendarViewNativeComponent.ts
new file mode 100644
index 00000000000..bd8d765083e
--- /dev/null
+++ b/packages/sample-custom-component/src/FabricXamlCalendarViewNativeComponent.ts
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ * Licensed under the MIT License.
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+// Temporary test example for UseExperimentalWinUI3=true
+// Remove when we get react-native-xaml working well for Fabric
+
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type {ViewProps} from 'react-native';
+import type {DirectEventHandler} from 'react-native/Libraries/Types/CodegenTypes';
+
+type SelectedDatesChangedEvent = Readonly<{
+  value: boolean;
+  startDate: string;
+}>;
+
+export interface CalendarViewProps extends ViewProps {
+  label: string;
+  onSelectedDatesChanged?: DirectEventHandler<SelectedDatesChangedEvent>;
+}
+
+export default codegenNativeComponent<CalendarViewProps>('CalendarView');
diff --git a/packages/sample-custom-component/src/index.ts b/packages/sample-custom-component/src/index.ts
index a397cf026bd..182564080ea 100644
--- a/packages/sample-custom-component/src/index.ts
+++ b/packages/sample-custom-component/src/index.ts
@@ -3,8 +3,11 @@ import type {MovingLightHandle} from './MovingLight';
 
 import DrawingIsland from './DrawingIsland';
 
+import CalendarView from './FabricXamlCalendarViewNativeComponent'
+
 export {
     DrawingIsland,
     MovingLight,
     MovingLightHandle,
+    CalendarView,
 };
\ No newline at end of file
diff --git a/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.cpp b/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.cpp
new file mode 100644
index 00000000000..32b7f243733
--- /dev/null
+++ b/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.cpp
@@ -0,0 +1,76 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+#include "pch.h"
+
+#include "CalendarView.h"
+
+#ifdef RNW_NEW_ARCH
+
+#include "codegen/react/components/SampleCustomComponent/CalendarView.g.h"
+
+#include <winrt/Microsoft.UI.Xaml.Controls.h>
+
+namespace winrt::SampleCustomComponent {
+
+// This is a "toy" implementation of Xaml's CalendarView, just for bringup and testing.
+// When UseExperimentalWinUI3 and UseNewArchitecture are both true, it will host a
+// CalendarView control in a XamlIsland.  But we only expose a few APIs right now.
+// Later, we'll expose this through react-native-xaml.
+
+struct CalendarViewComponentView : public winrt::implements<CalendarViewComponentView, winrt::IInspectable>,
+                                   Codegen::BaseCalendarView<CalendarViewComponentView> {
+  void InitializeContentIsland(
+      const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView &islandView) noexcept {
+    m_xamlIsland = winrt::Microsoft::UI::Xaml::XamlIsland{};
+    m_calendarView = winrt::Microsoft::UI::Xaml::Controls::CalendarView{};
+    m_xamlIsland.Content(m_calendarView);
+    islandView.Connect(m_xamlIsland.ContentIsland());
+
+    m_calendarView.SelectedDatesChanged([this](auto &&, auto &&) {
+      if (auto emitter = EventEmitter()) {
+        Codegen::CalendarView_OnSelectedDatesChanged args;
+        auto selectedDates = m_calendarView.SelectedDates();
+        if (selectedDates.Size() == 0) {
+          args.startDate = "(none)";
+        } else {
+          auto firstSelectedDate = selectedDates.GetAt(0);
+
+          auto tt = winrt::clock::to_time_t(firstSelectedDate);
+          tm local{};
+          localtime_s(&local, &tt);
+          auto timeStr = std::put_time(&local, "%F");
+
+          std::stringstream ss;
+          ss << (timeStr._Tptr->tm_year + 1900) << "-" << (timeStr._Tptr->tm_mon + 1) << "-" << timeStr._Tptr->tm_mday;
+
+          args.startDate = ss.str();
+        }
+        emitter->onSelectedDatesChanged(args);
+      }
+    });
+  }
+
+ private:
+  winrt::Microsoft::UI::Xaml::Controls::TextBlock m_buttonLabelTextBlock{nullptr};
+  winrt::Microsoft::ReactNative::IComponentState m_state;
+  winrt::Microsoft::UI::Xaml::XamlIsland m_xamlIsland{nullptr};
+  winrt::Microsoft::UI::Xaml::Controls::CalendarView m_calendarView{nullptr};
+};
+
+} // namespace winrt::SampleCustomComponent
+
+void RegisterCalendarViewComponentView(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder) {
+  winrt::SampleCustomComponent::Codegen::RegisterCalendarViewNativeComponent<
+      winrt::SampleCustomComponent::CalendarViewComponentView>(
+      packageBuilder,
+      [](const winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder &builder) {
+        builder.SetContentIslandComponentViewInitializer(
+            [](const winrt::Microsoft::ReactNative::Composition::ContentIslandComponentView &islandView) noexcept {
+              auto userData = winrt::make_self<winrt::SampleCustomComponent::CalendarViewComponentView>();
+              userData->InitializeContentIsland(islandView);
+              islandView.UserData(*userData);
+            });
+      });
+}
+
+#endif // #ifdef RNW_NEW_ARCH
diff --git a/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.h b/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.h
new file mode 100644
index 00000000000..7195155688b
--- /dev/null
+++ b/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.h
@@ -0,0 +1,3 @@
+#pragma once
+
+void RegisterCalendarViewComponentView(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder);
diff --git a/packages/sample-custom-component/windows/SampleCustomComponent/ReactPackageProvider.cpp b/packages/sample-custom-component/windows/SampleCustomComponent/ReactPackageProvider.cpp
index 16d46adb132..def08f3df4c 100644
--- a/packages/sample-custom-component/windows/SampleCustomComponent/ReactPackageProvider.cpp
+++ b/packages/sample-custom-component/windows/SampleCustomComponent/ReactPackageProvider.cpp
@@ -9,6 +9,7 @@
 
 #include "DrawingIsland.h"
 #include "MovingLight.h"
+#include "CalendarView.h"
 
 using namespace winrt::Microsoft::ReactNative;
 
@@ -20,6 +21,7 @@ void ReactPackageProvider::CreatePackage(IReactPackageBuilder const &packageBuil
 #ifdef RNW_NEW_ARCH
   RegisterDrawingIslandComponentView(packageBuilder);
   RegisterMovingLightNativeComponent(packageBuilder);
+  RegisterCalendarViewComponentView(packageBuilder);
 #endif // #ifdef RNW_NEW_ARCH
 }
 
diff --git a/packages/sample-custom-component/windows/SampleCustomComponent/SampleCustomComponent.vcxproj b/packages/sample-custom-component/windows/SampleCustomComponent/SampleCustomComponent.vcxproj
index 81665a9aeaf..0ef07d3aeb9 100644
--- a/packages/sample-custom-component/windows/SampleCustomComponent/SampleCustomComponent.vcxproj
+++ b/packages/sample-custom-component/windows/SampleCustomComponent/SampleCustomComponent.vcxproj
@@ -99,6 +99,7 @@
   </ItemDefinitionGroup>
   <PropertyGroup Label="UserMacros" />
   <ItemGroup>
+    <ClInclude Include="CalendarView.h" />
     <ClInclude Include="DrawingIsland.h">
       <DependentUpon>DrawingIsland.idl</DependentUpon>
     </ClInclude>
@@ -121,6 +122,7 @@
     <ClCompile Include="ReactPackageProvider.cpp">
       <DependentUpon>ReactPackageProvider.idl</DependentUpon>
     </ClCompile>
+    <ClCompile Include="CalendarView.cpp" />
     <ClCompile Include="$(GeneratedFilesDir)module.g.cpp" />
   </ItemGroup>
   <ItemGroup>

From 7533915344e74e0cf46f2b6a4e3cb306b45627ae Mon Sep 17 00:00:00 2001
From: JesseCol <50150435+JesseCol@users.noreply.github.com>
Date: Tue, 14 Jan 2025 09:00:32 -0800
Subject: [PATCH 06/10] Enable CalendarView only when UseExperimentalWinUI3 is
 true, and add CalendarView.g.h to git

---
 .../SampleCustomComponent/CalendarView.cpp    |   4 +-
 .../SampleCustomComponent/CalendarView.h      |   4 +
 .../ReactPackageProvider.cpp                  |   5 +-
 .../SampleCustomComponent/CalendarView.g.h    | 217 ++++++++++++++++++
 4 files changed, 227 insertions(+), 3 deletions(-)
 create mode 100644 packages/sample-custom-component/windows/SampleCustomComponent/codegen/react/components/SampleCustomComponent/CalendarView.g.h

diff --git a/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.cpp b/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.cpp
index 32b7f243733..484ebfc0323 100644
--- a/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.cpp
+++ b/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.cpp
@@ -4,7 +4,7 @@
 
 #include "CalendarView.h"
 
-#ifdef RNW_NEW_ARCH
+#if defined(RNW_NEW_ARCH) && defined(USE_EXPERIMENTAL_WINUI3)
 
 #include "codegen/react/components/SampleCustomComponent/CalendarView.g.h"
 
@@ -73,4 +73,4 @@ void RegisterCalendarViewComponentView(winrt::Microsoft::ReactNative::IReactPack
       });
 }
 
-#endif // #ifdef RNW_NEW_ARCH
+#endif // defined(RNW_NEW_ARCH) && defined(USE_EXPERIMENTAL_WINUI3)
diff --git a/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.h b/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.h
index 7195155688b..2ef17343b84 100644
--- a/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.h
+++ b/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.h
@@ -1,3 +1,7 @@
 #pragma once
 
+#if defined(RNW_NEW_ARCH) && defined(USE_EXPERIMENTAL_WINUI3)
+
 void RegisterCalendarViewComponentView(winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder);
+
+#endif // defined(RNW_NEW_ARCH) && defined(USE_EXPERIMENTAL_WINUI3)
diff --git a/packages/sample-custom-component/windows/SampleCustomComponent/ReactPackageProvider.cpp b/packages/sample-custom-component/windows/SampleCustomComponent/ReactPackageProvider.cpp
index def08f3df4c..9441ddf60af 100644
--- a/packages/sample-custom-component/windows/SampleCustomComponent/ReactPackageProvider.cpp
+++ b/packages/sample-custom-component/windows/SampleCustomComponent/ReactPackageProvider.cpp
@@ -21,8 +21,11 @@ void ReactPackageProvider::CreatePackage(IReactPackageBuilder const &packageBuil
 #ifdef RNW_NEW_ARCH
   RegisterDrawingIslandComponentView(packageBuilder);
   RegisterMovingLightNativeComponent(packageBuilder);
-  RegisterCalendarViewComponentView(packageBuilder);
 #endif // #ifdef RNW_NEW_ARCH
+
+#if defined(RNW_NEW_ARCH) && defined(USE_EXPERIMENTAL_WINUI3)
+  RegisterCalendarViewComponentView(packageBuilder);
+#endif // #if defined(RNW_NEW_ARCH) && defined(USE_EXPERIMENTAL_WINUI3)
 }
 
 } // namespace winrt::SampleCustomComponent::implementation
diff --git a/packages/sample-custom-component/windows/SampleCustomComponent/codegen/react/components/SampleCustomComponent/CalendarView.g.h b/packages/sample-custom-component/windows/SampleCustomComponent/codegen/react/components/SampleCustomComponent/CalendarView.g.h
new file mode 100644
index 00000000000..5246a8570b9
--- /dev/null
+++ b/packages/sample-custom-component/windows/SampleCustomComponent/codegen/react/components/SampleCustomComponent/CalendarView.g.h
@@ -0,0 +1,217 @@
+
+/*
+ * This file is auto-generated from CalendarViewNativeComponent spec file in flow / TypeScript.
+ */
+// clang-format off
+#pragma once
+
+#include <NativeModules.h>
+
+#ifdef RNW_NEW_ARCH
+#include <JSValueComposition.h>
+
+#include <winrt/Microsoft.ReactNative.Composition.h>
+#include <winrt/Microsoft.UI.Composition.h>
+#endif // #ifdef RNW_NEW_ARCH
+
+#ifdef RNW_NEW_ARCH
+
+namespace winrt::SampleCustomComponent::Codegen {
+
+REACT_STRUCT(CalendarViewProps)
+struct CalendarViewProps : winrt::implements<CalendarViewProps, winrt::Microsoft::ReactNative::IComponentProps> {
+  CalendarViewProps(winrt::Microsoft::ReactNative::ViewProps props, const winrt::Microsoft::ReactNative::IComponentProps& cloneFrom)
+    : ViewProps(props)
+  {
+     if (cloneFrom) {
+       auto cloneFromProps = cloneFrom.as<CalendarViewProps>();
+       label = cloneFromProps->label;  
+     }
+  }
+
+  void SetProp(uint32_t hash, winrt::hstring propName, winrt::Microsoft::ReactNative::IJSValueReader value) noexcept {
+    winrt::Microsoft::ReactNative::ReadProp(hash, propName, value, *this);
+  }
+
+  REACT_FIELD(label)
+  std::string label;
+
+  const winrt::Microsoft::ReactNative::ViewProps ViewProps;
+};
+
+REACT_STRUCT(CalendarView_OnSelectedDatesChanged)
+struct CalendarView_OnSelectedDatesChanged {
+  REACT_FIELD(value)
+  bool value{};
+
+  REACT_FIELD(startDate)
+  std::string startDate;
+};
+
+struct CalendarViewEventEmitter {
+  CalendarViewEventEmitter(const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter)
+      : m_eventEmitter(eventEmitter) {}
+
+  using OnSelectedDatesChanged = CalendarView_OnSelectedDatesChanged;
+
+  void onSelectedDatesChanged(OnSelectedDatesChanged &value) const {
+    m_eventEmitter.DispatchEvent(L"selectedDatesChanged", [value](const winrt::Microsoft::ReactNative::IJSValueWriter writer) {
+      winrt::Microsoft::ReactNative::WriteValue(writer, value);
+    });
+  }
+
+ private:
+  winrt::Microsoft::ReactNative::EventEmitter m_eventEmitter{nullptr};
+};
+
+template<typename TUserData>
+struct BaseCalendarView {
+
+  virtual void UpdateProps(
+    const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+    const winrt::com_ptr<CalendarViewProps> &newProps,
+    const winrt::com_ptr<CalendarViewProps> &/*oldProps*/) noexcept {
+    m_props = newProps;
+  }
+
+  // UpdateLayoutMetrics will only be called if this method is overridden
+  virtual void UpdateLayoutMetrics(
+    const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+    const winrt::Microsoft::ReactNative::LayoutMetrics &/*newLayoutMetrics*/,
+    const winrt::Microsoft::ReactNative::LayoutMetrics &/*oldLayoutMetrics*/) noexcept {
+  }
+
+  // UpdateState will only be called if this method is overridden
+  virtual void UpdateState(
+    const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+    const winrt::Microsoft::ReactNative::IComponentState &/*newState*/) noexcept {
+  }
+
+  virtual void UpdateEventEmitter(const std::shared_ptr<CalendarViewEventEmitter> &eventEmitter) noexcept {
+    m_eventEmitter = eventEmitter;
+  }
+
+  // MountChildComponentView will only be called if this method is overridden
+  virtual void MountChildComponentView(const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+           const winrt::Microsoft::ReactNative::MountChildComponentViewArgs &/*args*/) noexcept {
+  }
+
+  // UnmountChildComponentView will only be called if this method is overridden
+  virtual void UnmountChildComponentView(const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+           const winrt::Microsoft::ReactNative::UnmountChildComponentViewArgs &/*args*/) noexcept {
+  }
+
+  // Initialize will only be called if this method is overridden
+  virtual void Initialize(const winrt::Microsoft::ReactNative::ComponentView &/*view*/) noexcept {
+  }
+
+  // CreateVisual will only be called if this method is overridden
+  virtual winrt::Microsoft::UI::Composition::Visual CreateVisual(const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+    return view.as<winrt::Microsoft::ReactNative::Composition::ComponentView>().Compositor().CreateSpriteVisual();
+  }
+
+  // FinalizeUpdate will only be called if this method is overridden
+  virtual void FinalizeUpdate(const winrt::Microsoft::ReactNative::ComponentView &/*view*/,
+                                        winrt::Microsoft::ReactNative::ComponentViewUpdateMask /*mask*/) noexcept {
+  }
+
+  
+
+  const std::shared_ptr<CalendarViewEventEmitter>& EventEmitter() const { return m_eventEmitter; }
+  const winrt::com_ptr<CalendarViewProps>& Props() const { return m_props; }
+
+private:
+  winrt::com_ptr<CalendarViewProps> m_props;
+  std::shared_ptr<CalendarViewEventEmitter> m_eventEmitter;
+};
+
+template <typename TUserData>
+void RegisterCalendarViewNativeComponent(
+    winrt::Microsoft::ReactNative::IReactPackageBuilder const &packageBuilder,
+    std::function<void(const winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder&)> builderCallback) noexcept {
+  packageBuilder.as<winrt::Microsoft::ReactNative::IReactPackageBuilderFabric>().AddViewComponent(
+      L"CalendarView", [builderCallback](winrt::Microsoft::ReactNative::IReactViewComponentBuilder const &builder) noexcept {
+        auto compBuilder = builder.as<winrt::Microsoft::ReactNative::Composition::IReactCompositionViewComponentBuilder>();
+
+        builder.SetCreateProps([](winrt::Microsoft::ReactNative::ViewProps props,
+                              const winrt::Microsoft::ReactNative::IComponentProps& cloneFrom) noexcept {
+            return winrt::make<CalendarViewProps>(props, cloneFrom); 
+        });
+
+        builder.SetUpdatePropsHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                     const winrt::Microsoft::ReactNative::IComponentProps &newProps,
+                                     const winrt::Microsoft::ReactNative::IComponentProps &oldProps) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            userData->UpdateProps(view, newProps ? newProps.as<CalendarViewProps>() : nullptr, oldProps ? oldProps.as<CalendarViewProps>() : nullptr);
+        });
+
+        compBuilder.SetUpdateLayoutMetricsHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                      const winrt::Microsoft::ReactNative::LayoutMetrics &newLayoutMetrics,
+                                      const winrt::Microsoft::ReactNative::LayoutMetrics &oldLayoutMetrics) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            userData->UpdateLayoutMetrics(view, newLayoutMetrics, oldLayoutMetrics);
+        });
+
+        builder.SetUpdateEventEmitterHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                     const winrt::Microsoft::ReactNative::EventEmitter &eventEmitter) noexcept {
+          auto userData = view.UserData().as<TUserData>();
+          userData->UpdateEventEmitter(std::make_shared<CalendarViewEventEmitter>(eventEmitter));
+        });
+
+        if constexpr (&TUserData::FinalizeUpdate != &BaseCalendarView<TUserData>::FinalizeUpdate) {
+            builder.SetFinalizeUpdateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                     winrt::Microsoft::ReactNative::ComponentViewUpdateMask mask) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            userData->FinalizeUpdate(view, mask);
+          });
+        } 
+
+        if constexpr (&TUserData::UpdateState != &BaseCalendarView<TUserData>::UpdateState) {
+          builder.SetUpdateStateHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                     const winrt::Microsoft::ReactNative::IComponentState &newState) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            userData->member(view, newState);
+          });
+        }
+
+        if constexpr (&TUserData::MountChildComponentView != &BaseCalendarView<TUserData>::MountChildComponentView) {
+          builder.SetMountChildComponentViewHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                      const winrt::Microsoft::ReactNative::MountChildComponentViewArgs &args) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            return userData->MountChildComponentView(view, args);
+          });
+        }
+
+        if constexpr (&TUserData::UnmountChildComponentView != &BaseCalendarView<TUserData>::UnmountChildComponentView) {
+          builder.SetUnmountChildComponentViewHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
+                                      const winrt::Microsoft::ReactNative::UnmountChildComponentViewArgs &args) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            return userData->UnmountChildComponentView(view, args);
+          });
+        }
+
+        compBuilder.SetViewComponentViewInitializer([](const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+          auto userData = winrt::make_self<TUserData>();
+          if constexpr (&TUserData::Initialize != &BaseCalendarView<TUserData>::Initialize) {
+            userData->Initialize(view);
+          }
+          view.UserData(*userData);
+        });
+
+        if constexpr (&TUserData::CreateVisual != &BaseCalendarView<TUserData>::CreateVisual) {
+          compBuilder.SetCreateVisualHandler([](const winrt::Microsoft::ReactNative::ComponentView &view) noexcept {
+            auto userData = view.UserData().as<TUserData>();
+            return userData->CreateVisual(view);
+          });
+        }
+
+        // Allow app to further customize the builder
+        if (builderCallback) {
+          builderCallback(compBuilder);
+        }
+      });
+}
+
+} // namespace winrt::SampleCustomComponent::Codegen
+
+#endif // #ifdef RNW_NEW_ARCH

From 81fd28bf08da3473827151cbe5d25fa443b1095c Mon Sep 17 00:00:00 2001
From: JesseCol <50150435+JesseCol@users.noreply.github.com>
Date: Tue, 14 Jan 2025 09:20:35 -0800
Subject: [PATCH 07/10] clang format

---
 .../windows/SampleCustomComponent/ReactPackageProvider.cpp      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sample-custom-component/windows/SampleCustomComponent/ReactPackageProvider.cpp b/packages/sample-custom-component/windows/SampleCustomComponent/ReactPackageProvider.cpp
index 9441ddf60af..6e8affd9f6e 100644
--- a/packages/sample-custom-component/windows/SampleCustomComponent/ReactPackageProvider.cpp
+++ b/packages/sample-custom-component/windows/SampleCustomComponent/ReactPackageProvider.cpp
@@ -7,9 +7,9 @@
 #include "ReactPackageProvider.g.cpp"
 #endif
 
+#include "CalendarView.h"
 #include "DrawingIsland.h"
 #include "MovingLight.h"
-#include "CalendarView.h"
 
 using namespace winrt::Microsoft::ReactNative;
 

From abbc0acf8cd0afa1c74f881a9c7f3c6cde58bbce Mon Sep 17 00:00:00 2001
From: JesseCol <50150435+JesseCol@users.noreply.github.com>
Date: Tue, 14 Jan 2025 14:20:38 -0800
Subject: [PATCH 08/10] Update snapshots and remove some unused variables

---
 .../__snapshots__/HomeUIADump.test.ts.snap    | 79 +++++++++++++++++++
 .../SampleCustomComponent/CalendarView.cpp    |  2 -
 2 files changed, 79 insertions(+), 2 deletions(-)

diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap
index e74cc513012..d0057572694 100644
--- a/packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap
+++ b/packages/e2e-test-app-fabric/test/__snapshots__/HomeUIADump.test.ts.snap
@@ -6350,3 +6350,82 @@ exports[`Home UIA Tree Dump XMLHttpRequest 1`] = `
   },
 }
 `;
+
+exports[`Home UIA Tree Dump Xaml WinUI3 (Experimental, for Fabric) 1`] = `
+{
+  "Automation Tree": {
+    "AutomationId": "Xaml WinUI3 (Experimental, for Fabric)",
+    "ControlType": 50026,
+    "IsKeyboardFocusable": true,
+    "LocalizedControlType": "group",
+    "Name": "Xaml WinUI3 (Experimental, for Fabric) Requires UseExperimentalWinUI3 - Xaml content that works in Fabric",
+    "__Children": [
+      {
+        "AutomationId": "",
+        "ControlType": 50020,
+        "LocalizedControlType": "text",
+        "Name": "Xaml WinUI3 (Experimental, for Fabric)",
+      },
+      {
+        "AutomationId": "",
+        "ControlType": 50020,
+        "LocalizedControlType": "text",
+        "Name": "Requires UseExperimentalWinUI3 - Xaml content that works in Fabric",
+      },
+    ],
+  },
+  "Component Tree": {
+    "Type": "Microsoft.ReactNative.Composition.ViewComponentView",
+    "_Props": {
+      "AccessibilityLabel": "Xaml WinUI3 (Experimental, for Fabric) Requires UseExperimentalWinUI3 - Xaml content that works in Fabric",
+      "TestId": "Xaml WinUI3 (Experimental, for Fabric)",
+    },
+    "__Children": [
+      {
+        "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+        "_Props": {},
+      },
+      {
+        "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView",
+        "_Props": {},
+      },
+    ],
+  },
+  "Visual Tree": {
+    "Brush": {
+      "Brush Type": "ColorBrush",
+      "Color": "rgba(255, 255, 255, 255)",
+    },
+    "Comment": "Xaml WinUI3 (Experimental, for Fabric)",
+    "Offset": "0, 0, 0",
+    "Size": "966, 78",
+    "Visual Type": "SpriteVisual",
+    "__Children": [
+      {
+        "Offset": "16, 16, 0",
+        "Size": "305, 25",
+        "Visual Type": "SpriteVisual",
+        "__Children": [
+          {
+            "Offset": "0, 0, 0",
+            "Size": "305, 25",
+            "Visual Type": "SpriteVisual",
+          },
+        ],
+      },
+      {
+        "Offset": "16, 45, 0",
+        "Size": "934, 17",
+        "Visual Type": "SpriteVisual",
+        "__Children": [
+          {
+            "Offset": "0, 0, 0",
+            "Size": "934, 17",
+            "Visual Type": "SpriteVisual",
+          },
+        ],
+      },
+    ],
+  },
+}
+`;
diff --git a/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.cpp b/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.cpp
index 484ebfc0323..977b221d943 100644
--- a/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.cpp
+++ b/packages/sample-custom-component/windows/SampleCustomComponent/CalendarView.cpp
@@ -51,8 +51,6 @@ struct CalendarViewComponentView : public winrt::implements<CalendarViewComponen
   }
 
  private:
-  winrt::Microsoft::UI::Xaml::Controls::TextBlock m_buttonLabelTextBlock{nullptr};
-  winrt::Microsoft::ReactNative::IComponentState m_state;
   winrt::Microsoft::UI::Xaml::XamlIsland m_xamlIsland{nullptr};
   winrt::Microsoft::UI::Xaml::Controls::CalendarView m_calendarView{nullptr};
 };

From 375bf20f5f8a2babca5b1e8f2fc5152d6c5cf5c0 Mon Sep 17 00:00:00 2001
From: JesseCol <50150435+JesseCol@users.noreply.github.com>
Date: Tue, 14 Jan 2025 15:23:31 -0800
Subject: [PATCH 09/10] Update snapshotPages.test.js.snap

---
 .../__snapshots__/snapshotPages.test.js.snap  | 201 ++++++++++++++++++
 1 file changed, 201 insertions(+)

diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap b/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap
index 4c67fc34d5d..fbcdd6150eb 100644
--- a/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap
+++ b/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap
@@ -87138,3 +87138,204 @@ exports[`snapshotAllPages XMLHttpRequest 6`] = `
   </View>
 </View>
 `;
+
+exports[`snapshotAllPages Xaml WinUI3 (Experimental, for Fabric) 1`] = `
+<RCTScrollView>
+  <View>
+    <View
+      style={
+        {
+          "flexDirection": "column",
+          "gap": 5,
+          "margin": 20,
+        }
+      }
+    >
+      <View
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "multiselectable": undefined,
+            "readOnly": undefined,
+            "required": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "backgroundColor": {
+                "windowsbrush": [
+                  "ButtonBackground",
+                ],
+              },
+              "borderBottomWidth": 1.5,
+              "borderColor": {
+                "windowsbrush": [
+                  "ButtonBorderBrush",
+                ],
+              },
+              "borderRadius": 3,
+              "borderWidth": 1,
+            },
+          ]
+        }
+      >
+        <View
+          style={{}}
+        >
+          <View
+            style={{}}
+          >
+            <Text
+              style={
+                [
+                  {
+                    "color": {
+                      "windowsbrush": [
+                        "ButtonForeground",
+                      ],
+                    },
+                    "fontSize": 14,
+                    "fontWeight": "400",
+                    "margin": 8,
+                    "textAlign": "center",
+                  },
+                ]
+              }
+            >
+              Before Button
+            </Text>
+          </View>
+        </View>
+      </View>
+      <Text>
+        Xaml CalendarView control. Selected date: 
+      </Text>
+      <CalendarView
+        onSelectedDatesChanged={[Function]}
+        style={
+          {
+            "height": 400,
+            "minHeight": 400,
+            "minWidth": 400,
+            "width": 400,
+          }
+        }
+      />
+      <View
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "multiselectable": undefined,
+            "readOnly": undefined,
+            "required": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            {
+              "backgroundColor": {
+                "windowsbrush": [
+                  "ButtonBackground",
+                ],
+              },
+              "borderBottomWidth": 1.5,
+              "borderColor": {
+                "windowsbrush": [
+                  "ButtonBorderBrush",
+                ],
+              },
+              "borderRadius": 3,
+              "borderWidth": 1,
+            },
+          ]
+        }
+      >
+        <View
+          style={{}}
+        >
+          <View
+            style={{}}
+          >
+            <Text
+              style={
+                [
+                  {
+                    "color": {
+                      "windowsbrush": [
+                        "ButtonForeground",
+                      ],
+                    },
+                    "fontSize": 14,
+                    "fontWeight": "400",
+                    "margin": 8,
+                    "textAlign": "center",
+                  },
+                ]
+              }
+            >
+              After Button
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</RCTScrollView>
+`;

From 9ae19ee48443842130181fba731bfa7bb7fd13ae Mon Sep 17 00:00:00 2001
From: JesseCol <50150435+JesseCol@users.noreply.github.com>
Date: Wed, 15 Jan 2025 12:07:59 -0800
Subject: [PATCH 10/10] Remove new page from the visitAllPages test

---
 packages/e2e-test-app/test/visitAllPages.test.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/e2e-test-app/test/visitAllPages.test.ts b/packages/e2e-test-app/test/visitAllPages.test.ts
index 7251fe12f89..8e92597bfe2 100644
--- a/packages/e2e-test-app/test/visitAllPages.test.ts
+++ b/packages/e2e-test-app/test/visitAllPages.test.ts
@@ -38,7 +38,8 @@ describe('visitAllPages', () => {
       component === 'Moving Light Example' ||
       component === 'Drawing Island Example' ||
       component === 'Fabric Native Component' ||
-      component === 'Fabric Native Component Yoga'
+      component === 'Fabric Native Component Yoga' ||
+      component === 'Xaml WinUI3 (Experimental, for Fabric)'
     ) {
       continue; // disable fabric specific tests
     }