react-native-windows 0.76.0-preview.3 → 0.76.0-preview.4

package/Microsoft.ReactNative/ReactNativeWin32App.cpp

@@ -1,12 +1,42 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
 #include "pch.h"
 #include "ReactNativeWin32App.h"
 #include "ReactNativeWin32App.g.cpp"
+
+#include "IReactDispatcher.h"
+#include "ReactCoreInjection.h"
 #include "ReactNativeHost.h"
+
 #include "winrt/Microsoft.UI.Composition.h"
 #include "winrt/Microsoft.UI.Content.h"
+#include "winrt/Microsoft.UI.Dispatching.h"
 #include "winrt/Microsoft.UI.Interop.h"
 #include "winrt/Microsoft.UI.Windowing.h"
 
+// Scaling factor for the window's content based on the DPI of the display where the window is located.
+float ScaleFactor(HWND hwnd) noexcept {
+  return GetDpiForWindow(hwnd) / static_cast<float>(USER_DEFAULT_SCREEN_DPI);
+}
+
+void UpdateRootViewSizeToAppWindow(
+    winrt::Microsoft::ReactNative::ReactNativeIsland const &rootView,
+    winrt::Microsoft::UI::Windowing::AppWindow const &window) {
+  auto hwnd = winrt::Microsoft::UI::GetWindowFromWindowId(window.Id());
+  auto scaleFactor = ScaleFactor(hwnd);
+  winrt::Windows::Foundation::Size size{
+      window.ClientSize().Width / scaleFactor, window.ClientSize().Height / scaleFactor};
+  // Do not relayout when minimized
+  if (window.Presenter().as<winrt::Microsoft::UI::Windowing::OverlappedPresenter>().State() !=
+      winrt::Microsoft::UI::Windowing::OverlappedPresenterState::Minimized) {
+    winrt::Microsoft::ReactNative::LayoutConstraints constraints;
+    constraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::Undefined;
+    constraints.MaximumSize = constraints.MinimumSize = size;
+    rootView.Arrange(constraints, {0, 0});
+  }
+}
+
 namespace winrt::Microsoft::ReactNative::implementation {
 ReactNativeWin32App::ReactNativeWin32App() {}
 
@@ -14,41 +44,44 @@ ReactNativeWin32App::~ReactNativeWin32App() {
   m_desktopChildSiteBridge = nullptr;
 
   // Destroy all Composition objects
-  m_compositor.Close();
-  m_compositor = nullptr;
-}
-
-void ReactNativeWin32App::AppWindow(winrt::Microsoft::UI::Windowing::AppWindow const &appWindow) {
-  m_appWindow = appWindow;
+  if (m_compositor != nullptr) {
+    m_compositor.Close();
+    m_compositor = nullptr;
+  }
 }
 
 winrt::Microsoft::UI::Windowing::AppWindow ReactNativeWin32App::AppWindow() {
   return m_appWindow;
 }
 
-void ReactNativeWin32App::Compositor(winrt::Microsoft::UI::Composition::Compositor const &compositor) {
-  m_compositor = compositor;
+void ReactNativeWin32App::AppWindow(winrt::Microsoft::UI::Windowing::AppWindow const &appWindow) {
+  m_appWindow = appWindow;
 }
 
 winrt::Microsoft::UI::Composition::Compositor ReactNativeWin32App::Compositor() {
   return m_compositor;
 }
 
-winrt::Microsoft::ReactNative::ReactNativeIsland ReactNativeWin32App::ReactNativeIsland() {
-  return m_reactNativeIsland;
+void ReactNativeWin32App::Compositor(winrt::Microsoft::UI::Composition::Compositor const &compositor) {
+  m_compositor = compositor;
 }
 
-void ReactNativeWin32App::ReactNativeIsland(winrt::Microsoft::ReactNative::ReactNativeIsland const &reactNativeIsland) {
-  m_reactNativeIsland = reactNativeIsland;
+void ReactNativeWin32App::DesktopChildSiteBridge(
+    winrt::Microsoft::UI::Content::DesktopChildSiteBridge const &desktopChildSiteBridge) {
+  m_desktopChildSiteBridge = desktopChildSiteBridge;
 }
 
 winrt::Microsoft::UI::Content::DesktopChildSiteBridge ReactNativeWin32App::DesktopChildSiteBridge() {
   return m_desktopChildSiteBridge;
 }
 
-void ReactNativeWin32App::DesktopChildSiteBridge(
-    winrt::Microsoft::UI::Content::DesktopChildSiteBridge const &desktopChildSiteBridge) {
-  m_desktopChildSiteBridge = desktopChildSiteBridge;
+winrt::Microsoft::UI::Dispatching::DispatcherQueueController ReactNativeWin32App::DispatcherQueueController() {
+  return m_dispatcherQueueController;
+}
+
+void ReactNativeWin32App::DispatcherQueueController(
+    winrt::Microsoft::UI::Dispatching::DispatcherQueueController const &dispatcherQueueController) {
+  m_dispatcherQueueController = dispatcherQueueController;
 }
 
 winrt::Microsoft::ReactNative::ReactNativeHost ReactNativeWin32App::ReactNativeHost() {
@@ -62,12 +95,90 @@ void ReactNativeWin32App::ReactNativeHost(winrt::Microsoft::ReactNative::ReactNa
   m_host = host;
 }
 
-void ReactNativeWin32App::DispatchQueueController(
-    winrt::Microsoft::UI::Dispatching::DispatcherQueueController const &dispatcherQueueController) {
-  m_dispatcherQueueController = dispatcherQueueController;
+winrt::Microsoft::ReactNative::ReactNativeIsland ReactNativeWin32App::ReactNativeIsland() {
+  return m_reactNativeIsland;
+}
+
+void ReactNativeWin32App::ReactNativeIsland(winrt::Microsoft::ReactNative::ReactNativeIsland const &reactNativeIsland) {
+  m_reactNativeIsland = reactNativeIsland;
+}
+
+winrt::Microsoft::ReactNative::ReactViewOptions ReactNativeWin32App::ReactViewOptions() {
+  if (m_reactViewOptions == nullptr) {
+    m_reactViewOptions = winrt::make<winrt::Microsoft::ReactNative::implementation::ReactViewOptions>();
+  }
+  return m_reactViewOptions;
+}
+
+void ReactNativeWin32App::ReactViewOptions(winrt::Microsoft::ReactNative::ReactViewOptions const &viewOptions) {
+  m_reactViewOptions = viewOptions;
 }
 
 void ReactNativeWin32App::Start() {
+  // Show the hosting AppWindow
+  m_appWindow.Show();
+
+  // Currently set the property to use current thread dispatcher as a default UI dispatcher.
+  // TODO: Use the correct dispatcher from a developer-provided DispatcherQueueController
+  ReactNativeHost().InstanceSettings().Properties().Set(
+      ReactDispatcherHelper::UIDispatcherProperty(), ReactDispatcherHelper::UIThreadDispatcher());
+
+  auto hwnd{winrt::Microsoft::UI::GetWindowFromWindowId(m_appWindow.Id())};
+
+  winrt::Microsoft::ReactNative::ReactCoreInjection::SetTopLevelWindowId(
+      ReactNativeHost().InstanceSettings().Properties(), reinterpret_cast<uint64_t>(hwnd));
+
+  winrt::Microsoft::ReactNative::Composition::CompositionUIService::SetCompositor(
+      ReactNativeHost().InstanceSettings(), m_compositor);
+
+  // Start the react-native instance, which will create a JavaScript runtime and load the applications bundle.
+  ReactNativeHost().ReloadInstance();
+
+  // Create a RootView which will present a react-native component
+  if (m_reactNativeIsland == nullptr) {
+    m_reactNativeIsland = winrt::Microsoft::ReactNative::ReactNativeIsland(m_compositor);
+  }
+
+  m_reactNativeIsland.ReactViewHost(
+      winrt::Microsoft::ReactNative::ReactCoreInjection::MakeViewHost(ReactNativeHost(), ReactViewOptions()));
+
+  // Update the size of the RootView when the AppWindow changes size
+  m_appWindow.Changed([wkRootView = winrt::make_weak(m_reactNativeIsland)](
+                          winrt::Microsoft::UI::Windowing::AppWindow const &window,
+                          winrt::Microsoft::UI::Windowing::AppWindowChangedEventArgs const &args) {
+    if (args.DidSizeChange() || args.DidVisibilityChange()) {
+      if (auto rootView = wkRootView.get()) {
+        UpdateRootViewSizeToAppWindow(rootView, window);
+      }
+    }
+  });
+
+  // Quit application when main window is closed
+  m_appWindow.Destroying([this](
+                             winrt::Microsoft::UI::Windowing::AppWindow const &window,
+                             winrt::Windows::Foundation::IInspectable const & /*args*/) {
+    // Before we shutdown the application - unload the ReactNativeHost to give the javascript a chance to save any
+    // state
+    auto async = ReactNativeHost().UnloadInstance();
+    async.Completed([this](auto asyncInfo, winrt::Windows::Foundation::AsyncStatus asyncStatus) {
+      assert(asyncStatus == winrt::Windows::Foundation::AsyncStatus::Completed);
+      ReactNativeHost().InstanceSettings().UIDispatcher().Post([]() { PostQuitMessage(0); });
+    });
+  });
+
+  // DesktopChildSiteBridge create a ContentSite that can host the RootView ContentIsland
+  m_desktopChildSiteBridge =
+      winrt::Microsoft::UI::Content::DesktopChildSiteBridge::Create(m_compositor, m_appWindow.Id());
+
+  m_desktopChildSiteBridge.Connect(m_reactNativeIsland.Island());
+
+  m_desktopChildSiteBridge.ResizePolicy(winrt::Microsoft::UI::Content::ContentSizePolicy::ResizeContentToParentWindow);
+
+  auto scaleFactor = ScaleFactor(hwnd);
+  m_reactNativeIsland.ScaleFactor(scaleFactor);
+
+  UpdateRootViewSizeToAppWindow(m_reactNativeIsland, m_appWindow);
+
   m_desktopChildSiteBridge.Show();
 
   // Run the main application event loop

package/Microsoft.ReactNative/ReactNativeWin32App.h

@@ -1,5 +1,9 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
 #pragma once
+
 #include "ReactNativeWin32App.g.h"
+
 #include "winrt/Microsoft.UI.Dispatching.h"
 
 namespace winrt::Microsoft::ReactNative::implementation {
@@ -13,26 +17,31 @@ struct ReactNativeWin32App : ReactNativeWin32AppT<ReactNativeWin32App> {
   winrt::Microsoft::UI::Composition::Compositor Compositor();
   void Compositor(winrt::Microsoft::UI::Composition::Compositor const &compositor);
 
-  winrt::Microsoft::ReactNative::ReactNativeIsland ReactNativeIsland();
-  void ReactNativeIsland(winrt::Microsoft::ReactNative::ReactNativeIsland const &reactNativeIsland);
-
   winrt::Microsoft::UI::Content::DesktopChildSiteBridge DesktopChildSiteBridge();
   void DesktopChildSiteBridge(winrt::Microsoft::UI::Content::DesktopChildSiteBridge const &desktopChildSiteBridge);
 
-  void DispatchQueueController(
+  winrt::Microsoft::UI::Dispatching::DispatcherQueueController DispatcherQueueController();
+  void DispatcherQueueController(
       winrt::Microsoft::UI::Dispatching::DispatcherQueueController const &dispatcherQueueController);
 
   winrt::Microsoft::ReactNative::ReactNativeHost ReactNativeHost();
   void ReactNativeHost(winrt::Microsoft::ReactNative::ReactNativeHost const &host);
 
+  winrt::Microsoft::ReactNative::ReactNativeIsland ReactNativeIsland();
+  void ReactNativeIsland(winrt::Microsoft::ReactNative::ReactNativeIsland const &reactNativeIsland);
+
+  winrt::Microsoft::ReactNative::ReactViewOptions ReactViewOptions();
+  void ReactViewOptions(winrt::Microsoft::ReactNative::ReactViewOptions const &reactViewOptions);
+
   void Start();
 
  private:
   winrt::Microsoft::UI::Windowing::AppWindow m_appWindow{nullptr};
   winrt::Microsoft::UI::Composition::Compositor m_compositor{nullptr};
+  winrt::Microsoft::UI::Content::DesktopChildSiteBridge m_desktopChildSiteBridge{nullptr};
   winrt::Microsoft::UI::Dispatching::DispatcherQueueController m_dispatcherQueueController{nullptr};
   winrt::Microsoft::ReactNative::ReactNativeHost m_host{nullptr};
   winrt::Microsoft::ReactNative::ReactNativeIsland m_reactNativeIsland{nullptr};
-  winrt::Microsoft::UI::Content::DesktopChildSiteBridge m_desktopChildSiteBridge{nullptr};
+  winrt::Microsoft::ReactNative::ReactViewOptions m_reactViewOptions{nullptr};
 };
 } // namespace winrt::Microsoft::ReactNative::implementation

package/PropertySheets/External/Microsoft.ReactNative.CppLib.props

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright (c) Microsoft Corporation.
+  Licensed under the MIT License.
+
+  This file will be consumed by ALL C++ module projects (both inside
+  and outside of this repo) that build on top of Microsoft.ReactNative.
+  Do not make any changes here unless it applies to ALL such projects.
+-->
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <ImportGroup Condition="'$(UseFabric)' == 'true'">
+    <Import Project="$(MSBuildThisFileDirectory)Microsoft.ReactNative.Composition.CppLib.props" />
+  </ImportGroup>
+  <ImportGroup Condition="'$(UseFabric)' != 'true'">
+    <Import Project="$(MSBuildThisFileDirectory)Microsoft.ReactNative.Uwp.CppLib.props" />
+  </ImportGroup>
+</Project>

package/PropertySheets/External/Microsoft.ReactNative.CppLib.targets

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright (c) Microsoft Corporation.
+  Licensed under the MIT License.
+
+  This file will be consumed by ALL C++ module projects (both inside
+  and outside of this repo) that build on top of Microsoft.ReactNative.
+  Do not make any changes here unless it applies to ALL such projects.
+-->
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <ImportGroup Condition="'$(UseFabric)' == 'true'">
+    <Import Project="$(MSBuildThisFileDirectory)Microsoft.ReactNative.Composition.CppLib.targets" />
+  </ImportGroup>
+  <ImportGroup Condition="'$(UseFabric)' != 'true'">
+    <Import Project="$(MSBuildThisFileDirectory)Microsoft.ReactNative.Uwp.CppLib.targets" />
+  </ImportGroup>
+</Project>

package/PropertySheets/Generated/PackageVersion.g.props

@@ -10,11 +10,11 @@
 -->
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <PropertyGroup>
-    <ReactNativeWindowsVersion>0.76.0-preview.3</ReactNativeWindowsVersion>
+    <ReactNativeWindowsVersion>0.76.0-preview.4</ReactNativeWindowsVersion>
     <ReactNativeWindowsMajor>0</ReactNativeWindowsMajor>
     <ReactNativeWindowsMinor>76</ReactNativeWindowsMinor>
     <ReactNativeWindowsPatch>0</ReactNativeWindowsPatch>
     <ReactNativeWindowsCanary>false</ReactNativeWindowsCanary>
-    <ReactNativeWindowsCommitId>c147dcb404ad758a03db0a8e1733cf30ef60ff4b</ReactNativeWindowsCommitId>
+    <ReactNativeWindowsCommitId>5b950cfec87e5ce5e60f7762619f9acdd33c63d2</ReactNativeWindowsCommitId>
   </PropertyGroup>
 </Project>

package/PropertySheets/WebView2.props

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup Label="WebView2 versioning">
+      <!-- WinAppSDK 1.6+ has a dependency on Microsoft.Web.WebView2, there are a few places we need to pull in this package explicitly. -->
+      <WebView2PackageVersion>1.0.2651.64</WebView2PackageVersion>
+  </PropertyGroup>
+</Project>

package/PropertySheets/WinUI.props

@@ -8,7 +8,7 @@
     -->
     <!-- This value is also used by the CLI, see /packages/@react-native-windows/generate-windows -->
     <WinUI3Version Condition="'$(WinUI3Version)'=='' AND '$(UseExperimentalWinUI3)'=='true'">1.6.240701003-experimental2</WinUI3Version>
-    <WinUI3Version Condition="'$(WinUI3Version)'==''">1.5.240227000</WinUI3Version>
+    <WinUI3Version Condition="'$(WinUI3Version)'==''">1.6.240923002</WinUI3Version>
   </PropertyGroup>
 
   <PropertyGroup Label="WinUI2x versioning">

package/Shared/Shared.vcxitems

@@ -232,11 +232,6 @@
       <ExcludedFromBuild Condition="'$(UseFabric)' != 'true'">true</ExcludedFromBuild>
       <DependentUpon>$(ReactNativeWindowsDir)Microsoft.ReactNative\ReactNativeAppBuilder.idl</DependentUpon>
       <SubType>Code</SubType>
-    </ClCompile>
-	<ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\ReactInstanceSettingsBuilder.cpp">
-      <ExcludedFromBuild Condition="'$(UseFabric)' != 'true'">true</ExcludedFromBuild>
-      <DependentUpon>$(ReactNativeWindowsDir)Microsoft.ReactNative\ReactNativeAppBuilder.idl</DependentUpon>
-      <SubType>Code</SubType>
     </ClCompile>
     <ClCompile Include="$(MSBuildThisFileDirectory)BaseFileReaderResource.cpp" />
     <ClCompile Include="$(MSBuildThisFileDirectory)BaseScriptStoreImpl.cpp" />
@@ -349,11 +344,6 @@
       <ExcludedFromBuild Condition="'$(UseFabric)' != 'true'">true</ExcludedFromBuild>
       <DependentUpon>$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\ReactNativeAppBuilder.idl</DependentUpon>
       <SubType>Code</SubType>
-    </ClInclude>
-	<ClInclude Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\ReactInstanceSettingsBuilder.h">
-     <ExcludedFromBuild Condition="'$(UseFabric)' != 'true'">true</ExcludedFromBuild>
-      <DependentUpon>$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\ReactNativeAppBuilder.idl</DependentUpon>
-      <SubType>Code</SubType>
     </ClInclude>
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\DynamicReader.cpp">
       <DependentUpon>$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\IJSValueReader.idl</DependentUpon>

package/just-task.js

@@ -70,4 +70,4 @@ task(
 
 task('clean', series('cleanRNLibraries'));
 
-task('lint', series('eslint', 'codegen:check', 'flow-check'));
+task('lint', series('prettier', 'eslint', 'codegen:check', 'flow-check'));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-windows",
-  "version": "0.76.0-preview.3",
+  "version": "0.76.0-preview.4",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "@react-native-community/cli": "15.0.0-alpha.2",
     "@react-native-community/cli-platform-android": "15.0.0-alpha.2",
     "@react-native-community/cli-platform-ios": "15.0.0-alpha.2",
-    "@react-native-windows/cli": "0.76.0-preview.3",
+    "@react-native-windows/cli": "0.76.0-preview.4",
     "@react-native/assets": "1.0.0",
     "@react-native/assets-registry": "0.76.0-rc.6",
     "@react-native/codegen": "0.76.0-rc.6",
@@ -69,8 +69,8 @@
     "yargs": "^17.6.2"
   },
   "devDependencies": {
-    "@react-native-windows/codegen": "0.76.0-preview.1",
-    "@react-native/metro-config": "0.76.0-nightly-20240701-9f6cb21ed",
+    "@react-native-windows/codegen": "0.76.0-preview.2",
+    "@react-native/metro-config": "0.76.0-rc.6",
     "@rnw-scripts/babel-react-native-config": "0.0.0",
     "@rnw-scripts/eslint-config": "1.2.27",
     "@rnw-scripts/jest-out-of-tree-snapshot-resolver": "^1.1.31",
@@ -80,7 +80,6 @@
     "@types/node": "^18.0.0",
     "@types/react": "^18.2.6",
     "eslint": "^8.19.0",
-    "eslint-plugin-prettier": "^4.2.1",
     "flow-bin": "^0.245.2",
     "jscodeshift": "^0.14.0",
     "just-scripts": "^1.3.3",

package/templates/cpp-app/template.config.js

@@ -21,7 +21,10 @@ async function preInstall(config = {}, options = {}) {}
 
 async function getFileMappings(config = {}, options = {}) {
   const projectRoot = config?.root ?? process.cwd();
-  const {rnwPath, rnwVersion, devMode, isCanary} = templateUtils.getRnwInfo(config, options);
+  const {rnwPath, rnwVersion, devMode, isCanary} = templateUtils.getRnwInfo(
+    config,
+    options,
+  );
 
   const projectName =
     config?.project?.windows?.project?.projectName ?? options?.name ?? 'MyApp';
@@ -49,7 +52,9 @@ async function getFileMappings(config = {}, options = {}) {
     namespaceCpp: namespaceCpp,
 
     rnwVersion: rnwVersion,
-    rnwPathFromProjectRoot: path.relative(projectRoot, rnwPath).replace(/\//g, '\\'),
+    rnwPathFromProjectRoot: path
+      .relative(projectRoot, rnwPath)
+      .replace(/\//g, '\\'),
 
     mainComponentName,
 
@@ -67,7 +72,7 @@ async function getFileMappings(config = {}, options = {}) {
     devMode,
 
     useNuGets: !devMode, // default is to use published NuGets except in devMode, change to true here if you want to test devMode and nugets simultaneously
-    addReactNativePublicAdoFeed: isCanary,
+    addReactNativePublicAdoFeed: true || isCanary, // Temporary true for all new projects until code-signing is restored, see issue #14030
 
     cppNugetPackages,
   };

package/templates/cpp-app/windows/MyApp/MyApp.cpp

@@ -8,6 +8,7 @@
 
 #include "NativeModules.h"
 
+// A PackageProvider containing any turbo modules you define within this app project
 struct CompReactPackageProvider
     : winrt::implements<CompReactPackageProvider, winrt::Microsoft::ReactNative::IReactPackageProvider> {
  public: // IReactPackageProvider
@@ -16,152 +17,66 @@ struct CompReactPackageProvider
   }
 };
 
-// Global Variables:
-constexpr PCWSTR windowTitle = L"{{ mainComponentName }}";
-constexpr PCWSTR mainComponentName = L"{{ mainComponentName }}";
-
-float ScaleFactor(HWND hwnd) noexcept {
-  return GetDpiForWindow(hwnd) / static_cast<float>(USER_DEFAULT_SCREEN_DPI);
-}
+// The entry point of the Win32 application
+_Use_decl_annotations_ int CALLBACK WinMain(HINSTANCE instance, HINSTANCE, PSTR /* commandLine */, int showCmd) {
+  // Initialize WinRT
+  winrt::init_apartment(winrt::apartment_type::single_threaded);
 
-void UpdateRootViewSizeToAppWindow(
-    winrt::Microsoft::ReactNative::ReactNativeIsland const &rootView,
-    winrt::Microsoft::UI::Windowing::AppWindow const &window) {
-  auto hwnd = winrt::Microsoft::UI::GetWindowFromWindowId(window.Id());
-  auto scaleFactor = ScaleFactor(hwnd);
-  winrt::Windows::Foundation::Size size{
-      window.ClientSize().Width / scaleFactor, window.ClientSize().Height / scaleFactor};
-  // Do not relayout when minimized
-  if (window.Presenter().as<winrt::Microsoft::UI::Windowing::OverlappedPresenter>().State() !=
-      winrt::Microsoft::UI::Windowing::OverlappedPresenterState::Minimized) {
-    winrt::Microsoft::ReactNative::LayoutConstraints constraints;
-    constraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::Undefined;
-    constraints.MaximumSize = constraints.MinimumSize = size;
-    rootView.Arrange(constraints, {0,0});
-  }
-}
+  // Enable per monitor DPI scaling
+  SetProcessDpiAwarenessContext(DPI_AWARENESS_CONTEXT_PER_MONITOR_AWARE_V2);
 
-// Create and configure the ReactNativeHost
-winrt::Microsoft::ReactNative::ReactNativeHost CreateReactNativeHost(
-    HWND hwnd,
-    const winrt::Microsoft::UI::Composition::Compositor &compositor) {
+  // Find the path hosting the app exe file
   WCHAR appDirectory[MAX_PATH];
   GetModuleFileNameW(NULL, appDirectory, MAX_PATH);
   PathCchRemoveFileSpec(appDirectory, MAX_PATH);
 
-  auto host = winrt::Microsoft::ReactNative::ReactNativeHost();
-
-  // Include any autolinked modules
-  RegisterAutolinkedNativeModulePackages(host.PackageProviders());
+  // Create a ReactNativeWin32App with the ReactNativeAppBuilder
+  auto reactNativeWin32App{winrt::Microsoft::ReactNative::ReactNativeAppBuilder().Build()};
 
-  host.PackageProviders().Append(winrt::make<CompReactPackageProvider>());
+  // Configure the initial InstanceSettings for the app's ReactNativeHost
+  auto settings{reactNativeWin32App.ReactNativeHost().InstanceSettings()};
+  // Register any autolinked native modules
+  RegisterAutolinkedNativeModulePackages(settings.PackageProviders());
+  // Register any native modules defined within this app project
+  settings.PackageProviders().Append(winrt::make<CompReactPackageProvider>());
 
 #if BUNDLE
-  host.InstanceSettings().JavaScriptBundleFile(L"index.windows");
-  host.InstanceSettings().BundleRootPath(std::wstring(L"file://").append(appDirectory).append(L"\\Bundle\\").c_str());
-  host.InstanceSettings().UseFastRefresh(false);
+  // Load the JS bundle from a file (not Metro):
+  // Set the path (on disk) where the .bundle file is located
+  settings.BundleRootPath(std::wstring(L"file://").append(appDirectory).append(L"\\Bundle\\").c_str());
+  // Set the name of the bundle file (without the .bundle extension)
+  settings.JavaScriptBundleFile(L"index.windows");
+  // Disable hot reload
+  settings.UseFastRefresh(false);
 #else
-  host.InstanceSettings().JavaScriptBundleFile(L"index");
-  host.InstanceSettings().UseFastRefresh(true);
+  // Load the JS bundle from Metro
+  settings.JavaScriptBundleFile(L"index");
+  // Enable hot reload
+  settings.UseFastRefresh(true);
 #endif
-
 #if _DEBUG
-  host.InstanceSettings().UseDirectDebugger(true);
-  host.InstanceSettings().UseDeveloperSupport(true);
+  // For Debug builds
+  // Enable Direct Debugging of JS
+  settings.UseDirectDebugger(true);
+  // Enable the Developer Menu
+  settings.UseDeveloperSupport(true);
 #else
-  host.InstanceSettings().UseDirectDebugger(false);
-  host.InstanceSettings().UseDeveloperSupport(false);
+  // For Release builds:
+  // Disable Direct Debugging of JS
+  settings.UseDirectDebugger(false);
+  // Disable the Developer Menu
+  settings.UseDeveloperSupport(false);
 #endif
 
-  winrt::Microsoft::ReactNative::ReactCoreInjection::SetTopLevelWindowId(
-      host.InstanceSettings().Properties(), reinterpret_cast<uint64_t>(hwnd));
-
-  winrt::Microsoft::ReactNative::Composition::CompositionUIService::SetCompositor(
-      host.InstanceSettings(), compositor);
-
-  return host;
-}
-
-_Use_decl_annotations_ int CALLBACK WinMain(HINSTANCE instance, HINSTANCE, PSTR /* commandLine */, int showCmd) {
-  // Initialize WinRT.
-  winrt::init_apartment(winrt::apartment_type::single_threaded);
-
-  // Enable per monitor DPI scaling
-  SetProcessDpiAwarenessContext(DPI_AWARENESS_CONTEXT_PER_MONITOR_AWARE_V2);
-
-  // Create a DispatcherQueue for this thread.  This is needed for Composition, Content, and
-  // Input APIs.
-  auto dispatcherQueueController{winrt::Microsoft::UI::Dispatching::DispatcherQueueController::CreateOnCurrentThread()};
-
-  // Create a Compositor for all Content on this thread.
-  auto compositor{winrt::Microsoft::UI::Composition::Compositor()};
-
-  // Create a top-level window.
-  auto window = winrt::Microsoft::UI::Windowing::AppWindow::Create();
-  window.Title(windowTitle);
-  window.Resize({1000, 1000});
-  window.Show();
-  auto hwnd = winrt::Microsoft::UI::GetWindowFromWindowId(window.Id());
-  auto scaleFactor = ScaleFactor(hwnd);
-
-  auto host = CreateReactNativeHost(hwnd, compositor);
-
-  // Start the react-native instance, which will create a JavaScript runtime and load the applications bundle
-  host.ReloadInstance();
-
-  // Create a RootView which will present a react-native component
-  winrt::Microsoft::ReactNative::ReactViewOptions viewOptions;
-  viewOptions.ComponentName(mainComponentName);
-  auto rootView = winrt::Microsoft::ReactNative::ReactNativeIsland(compositor);
-  rootView.ReactViewHost(winrt::Microsoft::ReactNative::ReactCoreInjection::MakeViewHost(host, viewOptions));
-
-  // Update the size of the RootView when the AppWindow changes size
-  window.Changed([wkRootView = winrt::make_weak(rootView)](
-                     winrt::Microsoft::UI::Windowing::AppWindow const &window,
-                     winrt::Microsoft::UI::Windowing::AppWindowChangedEventArgs const &args) {
-    if (args.DidSizeChange() || args.DidVisibilityChange()) {
-      if (auto rootView = wkRootView.get()) {
-        UpdateRootViewSizeToAppWindow(rootView, window);
-      }
-    }
-  });
-
-  // Quit application when main window is closed
-  window.Destroying(
-      [host](winrt::Microsoft::UI::Windowing::AppWindow const &window, winrt::IInspectable const & /*args*/) {
-        // Before we shutdown the application - unload the ReactNativeHost to give the javascript a chance to save any
-        // state
-        auto async = host.UnloadInstance();
-        async.Completed([host](auto asyncInfo, winrt::Windows::Foundation::AsyncStatus asyncStatus) {
-          asyncStatus;
-          assert(asyncStatus == winrt::Windows::Foundation::AsyncStatus::Completed);
-          host.InstanceSettings().UIDispatcher().Post([]() { PostQuitMessage(0); });
-        });
-      });
-
-  // DesktopChildSiteBridge create a ContentSite that can host the RootView ContentIsland
-  auto bridge = winrt::Microsoft::UI::Content::DesktopChildSiteBridge::Create(compositor, window.Id());
-  bridge.Connect(rootView.Island());
-  bridge.ResizePolicy(winrt::Microsoft::UI::Content::ContentSizePolicy::ResizeContentToParentWindow);
-
-  rootView.ScaleFactor(scaleFactor);
-
-  // Set the intialSize of the root view
-  UpdateRootViewSizeToAppWindow(rootView, window);
-
-  bridge.Show();
-
-  // Run the main application event loop
-  dispatcherQueueController.DispatcherQueue().RunEventLoop();
-
-  // Rundown the DispatcherQueue. This drains the queue and raises events to let components
-  // know the message loop has finished.
-  dispatcherQueueController.ShutdownQueue();
+  // Get the AppWindow so we can configure its initial title and size
+  auto appWindow{reactNativeWin32App.AppWindow()};
+  appWindow.Title(L"{{ mainComponentName }}");
+  appWindow.Resize({1000, 1000});
 
-  bridge.Close();
-  bridge = nullptr;
+  // Get the ReactViewOptions so we can set the initial RN component to load
+  auto viewOptions{reactNativeWin32App.ReactViewOptions()};
+  viewOptions.ComponentName(L"{{ mainComponentName }}");
 
-  // Destroy all Composition objects
-  compositor.Close();
-  compositor = nullptr;
+  // Start the app
+  reactNativeWin32App.Start();
 }

package/templates/cpp-lib/template.config.js

@@ -76,7 +76,10 @@ async function getFileMappings(config = {}, options = {}) {
   );
 
   const projectRoot = libConfig.root ?? process.cwd();
-  const {rnwPath, rnwVersion, devMode, isCanary} = templateUtils.getRnwInfo(libConfig, libOptions);
+  const {rnwPath, rnwVersion, devMode, isCanary} = templateUtils.getRnwInfo(
+    libConfig,
+    libOptions,
+  );
 
   const projectName =
     libConfig?.project?.windows?.projects[0]?.projectName ??
@@ -102,7 +105,9 @@ async function getFileMappings(config = {}, options = {}) {
     namespaceCpp: namespaceCpp,
 
     rnwVersion: rnwVersion,
-    rnwPathFromProjectRoot: path.relative(projectRoot, rnwPath).replace(/\//g, '\\'),
+    rnwPathFromProjectRoot: path
+      .relative(projectRoot, rnwPath)
+      .replace(/\//g, '\\'),
 
     // Visual Studio is very picky about the casing of the guids for projects, project references and the solution
     // https://www.bing.com/search?q=visual+studio+project+guid+casing&cvid=311a5ad7f9fc41089507b24600d23ee7&FORM=ANAB01&PC=U531
@@ -115,7 +120,7 @@ async function getFileMappings(config = {}, options = {}) {
     devMode,
 
     useNuGets: !devMode, // default is to use published NuGets except in devMode, change to true here if you want to test devMode and nugets simultaneously
-    addReactNativePublicAdoFeed: isCanary,
+    addReactNativePublicAdoFeed: true || isCanary, // Temporary true for all new projects until code-signing is restored, see issue #14030
 
     cppNugetPackages,
   };