Update cpp-app template to use ReactNativeAppBuilder (#13875)

sharath2727 · jonthysell · web-flow · commit ce41d5256118 · 2024-09-27T16:21:01.000-07:00
## Description ### Why Simplify the default template code for creating the fabric app Resolves #12991 ### What Updated the cpp-app template to use ReactNativeAppBuilder ## Changelog Should this change be included in the release notes: yes --------- Co-authored-by: Jon Thysell <jthysell@microsoft.com>
diff --git a/change/react-native-windows-89274b41-baed-45ab-af4c-007248f50238.json b/change/react-native-windows-89274b41-baed-45ab-af4c-007248f50238.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update cpp-app template",
+  "packageName": "react-native-windows",
+  "email": "10109130+sharath2727@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/sample-app-fabric/windows/SampleAppFabric/SampleAppFabric.cpp b/packages/sample-app-fabric/windows/SampleAppFabric/SampleAppFabric.cpp
@@ -43,7 +43,7 @@ _Use_decl_annotations_ int CALLBACK WinMain(HINSTANCE instance, HINSTANCE, PSTR
     winrt::Microsoft::ReactNative::ReactInstanceSettingsBuilder()
         .DebugBundlePath(L"index")
         .JavaScriptBundleFile(L"index.windows")
-        .BundleRootPath(appDirectory)
+        .BundleRootPath(std::wstring(L"file://").append(appDirectory).append(L"\\Bundle\\").c_str())
 #if BUNDLE
         .UseFastRefresh(false)
 #else
diff --git a/vnext/Microsoft.ReactNative/ReactInstanceSettingsBuilder.cpp b/vnext/Microsoft.ReactNative/ReactInstanceSettingsBuilder.cpp
@@ -33,7 +33,7 @@ winrt::ReactNative::ReactInstanceSettingsBuilder ReactInstanceSettingsBuilder::U
 }
 
 winrt::ReactNative::ReactInstanceSettingsBuilder ReactInstanceSettingsBuilder::BundleRootPath(hstring const &path) {
-  m_reactInstanceSettings.BundleRootPath(std::wstring(L"file://").append(path.c_str()).append(L"\\Bundle\\").c_str());
+  m_reactInstanceSettings.BundleRootPath(path.c_str());
 
   return *this;
 }
diff --git a/vnext/templates/cpp-app/windows/MyApp/MyApp.cpp b/vnext/templates/cpp-app/windows/MyApp/MyApp.cpp
@@ -20,148 +20,58 @@ struct CompReactPackageProvider
 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);
-}
+_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) {
   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());
-
-  host.PackageProviders().Append(winrt::make<CompReactPackageProvider>());
-
+  // DebugBundlePath is used when loading from a bundle server such as metro. If this parameter
+  // is not provided fallback to a combination of JavaScriptBundleFile and BundleRootPath
+  auto reactInstanceSettingsBuilder {
+    winrt::Microsoft::ReactNative::ReactInstanceSettingsBuilder()
 #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);
+        .BundleRootPath(std::wstring(L"file://").append(appDirectory).append(L"\\Bundle\\").c_str())
+        .JavaScriptBundleFile(L"index.windows")
+        .UseFastRefresh(false)
 #else
-  host.InstanceSettings().JavaScriptBundleFile(L"index");
-  host.InstanceSettings().UseFastRefresh(true);
+        .JavaScriptBundleFile(L"index")
+        .UseFastRefresh(true)
 #endif
-
 #if _DEBUG
-  host.InstanceSettings().UseDirectDebugger(true);
-  host.InstanceSettings().UseDeveloperSupport(true);
+        .UseDirectDebugger(true)
+        .UseDeveloperSupport(true)
 #else
-  host.InstanceSettings().UseDirectDebugger(false);
-  host.InstanceSettings().UseDeveloperSupport(false);
+        .UseDirectDebugger(false)
+        .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);
+  auto packageProviders{winrt::single_threaded_vector<winrt::Microsoft::ReactNative::IReactPackageProvider>()};
 
-  return host;
-}
+  RegisterAutolinkedNativeModulePackages(packageProviders);
+  packageProviders.Append(winrt::make<CompReactPackageProvider>());
 
-_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);
+  winrt::Microsoft::ReactNative::ReactViewOptions viewOptions;
+  viewOptions.ComponentName(mainComponentName);
 
-  // Create a DispatcherQueue for this thread.  This is needed for Composition, Content, and
-  // Input APIs.
-  auto dispatcherQueueController{winrt::Microsoft::UI::Dispatching::DispatcherQueueController::CreateOnCurrentThread()};
+  // Initialize and Manage the ReactNativeHost
+  auto reactNativeAppBuilder{winrt::Microsoft::ReactNative::ReactNativeAppBuilder()
+                                 .AddPackageProviders(packageProviders)
+                                 .SetReactInstanceSettings(reactInstanceSettingsBuilder.ReactInstanceSettings())
+                                 .SetReactViewOptions(viewOptions)};
 
-  // Create a Compositor for all Content on this thread.
-  auto compositor{winrt::Microsoft::UI::Composition::Compositor()};
+  // Start the react-native instance by creating a javascript runtime and load the bundle.
+  auto reactNativeWin32App{reactNativeAppBuilder.Build()};
 
-  // Create a top-level window.
-  auto window = winrt::Microsoft::UI::Windowing::AppWindow::Create();
+  auto window{reactNativeWin32App.AppWindow()};
   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();
-
-  bridge.Close();
-  bridge = nullptr;
-
-  // Destroy all Composition objects
-  compositor.Close();
-  compositor = nullptr;
+  // Start the island in the application.
+  reactNativeWin32App.Start();
 }

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ winrt::ReactNative::ReactInstanceSettingsBuilder ReactInstanceSettingsBuilder::U`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`winrt::ReactNative::ReactInstanceSettingsBuilder ReactInstanceSettingsBuilder::BundleRootPath(hstring const &path) {`
`36`		`- m_reactInstanceSettings.BundleRootPath(std::wstring(L"file://").append(path.c_str()).append(L"\\Bundle\\").c_str());`
	`36`	`+ m_reactInstanceSettings.BundleRootPath(path.c_str());`
`37`	`37`
`38`	`38`	`return *this;`
`39`	`39`	`}`