Introduce ReactNativeAppBuilder (#13368)

sharath2727 · web-flow · commit c56788cfd719 · 2024-06-25T11:14:29.000-07:00
* Introduce ReactNativeAppBuilder.idl

* yarn format fix

* Change files

* Address feedback

* Add a fabric check for ReactNativeAppBuilder

* yarn format
diff --git a/change/react-native-windows-af1ca5e8-ba4b-496c-a7ca-2c9e3ffd32c1.json b/change/react-native-windows-af1ca5e8-ba4b-496c-a7ca-2c9e3ffd32c1.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Introduce ReactNativeAppBuilder.idl",
+  "packageName": "react-native-windows",
+  "email": "10109130+sharath2727@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/sample-app-fabric/windows/SampleAppFabric/packages.lock.json b/packages/sample-app-fabric/windows/SampleAppFabric/packages.lock.json
@@ -10,9 +10,9 @@
       },
       "Microsoft.JavaScript.Hermes": {
         "type": "Direct",
-        "requested": "[0.1.18, )",
-        "resolved": "0.1.18",
-        "contentHash": "5K8rRihGwIs2XNOTP2Jsw3T6cegxCBQXcpPS4optONU/AmFElGAfnA6XBQJ4UqlCFCl9Nf9zQrgvCUPBWYHiag=="
+        "requested": "[0.1.21, )",
+        "resolved": "0.1.21",
+        "contentHash": "5njCh+3eXTLOv7+8nOnp6nJ5C0r6it5ze54c0nuWleeDptuK8t3dEDB79XTU4D5DKNvAPlqJpgXRDOak5nYIug=="
       },
       "Microsoft.VCRTForwarders.140": {
         "type": "Direct",
@@ -61,7 +61,7 @@
         "dependencies": {
           "Common": "[1.0.0, )",
           "Folly": "[1.0.0, )",
-          "Microsoft.JavaScript.Hermes": "[0.1.18, )",
+          "Microsoft.JavaScript.Hermes": "[0.1.21, )",
           "Microsoft.WindowsAppSDK": "[1.5.240227000, )",
           "ReactCommon": "[1.0.0, )",
           "boost": "[1.76.0, )"
diff --git a/vnext/Microsoft.ReactNative/ReactInstanceSettingsBuilder.cpp b/vnext/Microsoft.ReactNative/ReactInstanceSettingsBuilder.cpp
@@ -0,0 +1,53 @@
+#include "pch.h"
+#include "ReactInstanceSettingsBuilder.h"
+#include "ReactInstanceSettingsBuilder.g.cpp"
+#include "ReactInstanceSettings.h"
+
+namespace winrt::ReactNative {
+using namespace winrt::Microsoft::ReactNative;
+}
+
+namespace winrt::UI {
+using namespace winrt::Microsoft::UI;
+}
+
+namespace winrt::Microsoft::ReactNative::implementation {
+ReactInstanceSettingsBuilder::ReactInstanceSettingsBuilder() {
+  m_reactInstanceSettings = winrt::make<winrt::ReactNative::implementation::ReactInstanceSettings>();
+}
+
+winrt::ReactNative::ReactInstanceSettings ReactInstanceSettingsBuilder::ReactInstanceSettings() {
+  return m_reactInstanceSettings;
+}
+
+winrt::ReactNative::ReactInstanceSettingsBuilder ReactInstanceSettingsBuilder::UseDirectDebugger(bool const &state) {
+  m_reactInstanceSettings.UseDirectDebugger(state);
+
+  return *this;
+}
+
+winrt::ReactNative::ReactInstanceSettingsBuilder ReactInstanceSettingsBuilder::UseDeveloperSupport(bool const &state) {
+  m_reactInstanceSettings.UseDeveloperSupport(state);
+
+  return *this;
+}
+
+winrt::ReactNative::ReactInstanceSettingsBuilder ReactInstanceSettingsBuilder::BundleRootPath(hstring const &path) {
+  m_reactInstanceSettings.BundleRootPath(path.c_str());
+
+  return *this;
+}
+
+winrt::ReactNative::ReactInstanceSettingsBuilder ReactInstanceSettingsBuilder::JavaScriptBundleFile(
+    hstring const &file) {
+  m_reactInstanceSettings.JavaScriptBundleFile(file.c_str());
+
+  return *this;
+}
+
+winrt::ReactNative::ReactInstanceSettingsBuilder ReactInstanceSettingsBuilder::UseFastRefresh(bool const &state) {
+  m_reactInstanceSettings.UseFastRefresh(state);
+
+  return *this;
+}
+} // namespace winrt::Microsoft::ReactNative::implementation
diff --git a/vnext/Microsoft.ReactNative/ReactInstanceSettingsBuilder.h b/vnext/Microsoft.ReactNative/ReactInstanceSettingsBuilder.h
@@ -0,0 +1,22 @@
+#pragma once
+#include "ReactInstanceSettingsBuilder.g.h"
+
+namespace winrt::Microsoft::ReactNative::implementation {
+struct ReactInstanceSettingsBuilder : ReactInstanceSettingsBuilderT<ReactInstanceSettingsBuilder> {
+  ReactInstanceSettingsBuilder();
+
+  winrt::Microsoft::ReactNative::ReactInstanceSettings ReactInstanceSettings();
+  winrt::Microsoft::ReactNative::ReactInstanceSettingsBuilder UseDirectDebugger(bool const &state);
+  winrt::Microsoft::ReactNative::ReactInstanceSettingsBuilder UseDeveloperSupport(bool const &state);
+  winrt::Microsoft::ReactNative::ReactInstanceSettingsBuilder BundleRootPath(hstring const &path);
+  winrt::Microsoft::ReactNative::ReactInstanceSettingsBuilder JavaScriptBundleFile(hstring const &file);
+  winrt::Microsoft::ReactNative::ReactInstanceSettingsBuilder UseFastRefresh(bool const &state);
+
+ private:
+  winrt::Microsoft::ReactNative::ReactInstanceSettings m_reactInstanceSettings{nullptr};
+};
+} // namespace winrt::Microsoft::ReactNative::implementation
+namespace winrt::Microsoft::ReactNative::factory_implementation {
+struct ReactInstanceSettingsBuilder
+    : ReactInstanceSettingsBuilderT<ReactInstanceSettingsBuilder, implementation::ReactInstanceSettingsBuilder> {};
+} // namespace winrt::Microsoft::ReactNative::factory_implementation
diff --git a/vnext/Microsoft.ReactNative/ReactNativeAppBuilder.cpp b/vnext/Microsoft.ReactNative/ReactNativeAppBuilder.cpp
@@ -0,0 +1,66 @@
+#include "pch.h"
+#include "ReactNativeAppBuilder.h"
+#include "ReactNativeAppBuilder.g.cpp"
+#include "ReactNativeHost.h"
+#include "winrt/Microsoft.UI.Composition.h"
+#include "winrt/Microsoft.UI.Windowing.h"
+#include "winrt/microsoft.UI.Interop.h"
+
+namespace winrt::ReactNative {
+using namespace winrt::Microsoft::ReactNative;
+}
+
+namespace winrt::UI {
+using namespace winrt::Microsoft::UI;
+}
+
+namespace winrt::Microsoft::ReactNative::implementation {
+ReactNativeAppBuilder::ReactNativeAppBuilder() {
+  m_host = winrt::make<winrt::ReactNative::implementation::ReactNativeHost>();
+}
+
+winrt::ReactNative::ReactNativeAppBuilder ReactNativeAppBuilder::AddPackageProviders(
+    winrt::Windows::Foundation::Collections::IVector<winrt::Microsoft::ReactNative::IReactPackageProvider> const
+        &packageProviders) {
+  for (auto const &provider : packageProviders) {
+    m_host.PackageProviders().Append(provider);
+  }
+
+  return *this;
+}
+
+winrt::ReactNative::ReactNativeAppBuilder ReactNativeAppBuilder::SetReactInstanceSettings(
+    winrt::Microsoft::ReactNative::ReactInstanceSettings const &settings) {
+  m_host.InstanceSettings(settings);
+
+  return *this;
+}
+
+winrt::ReactNative::ReactNativeAppBuilder ReactNativeAppBuilder::SetCompositor(
+    winrt::Microsoft::UI::Composition::Compositor const &compositor) {
+  m_compositor = compositor;
+
+  return *this;
+}
+
+winrt::ReactNative::ReactNativeAppBuilder ReactNativeAppBuilder::SetAppWindow(
+    winrt::Microsoft::UI::Windowing::AppWindow const &appWindow) {
+  m_appWindow = appWindow;
+
+  return *this;
+}
+
+winrt::ReactNative::ReactNativeHost ReactNativeAppBuilder::Start() {
+  auto hwnd{winrt::UI::GetWindowFromWindowId(m_appWindow.Id())};
+
+  winrt::ReactNative::ReactCoreInjection::SetTopLevelWindowId(
+      m_host.InstanceSettings().Properties(), reinterpret_cast<uint64_t>(hwnd));
+
+  winrt::ReactNative::Composition::CompositionUIService::SetCompositor(m_host.InstanceSettings(), m_compositor);
+
+  // Start the react-native instance, which will create a JavaScript runtime and load the applications bundle.
+  m_host.ReloadInstance();
+
+  return m_host;
+}
+} // namespace winrt::Microsoft::ReactNative::implementation
diff --git a/vnext/Microsoft.ReactNative/ReactNativeAppBuilder.h b/vnext/Microsoft.ReactNative/ReactNativeAppBuilder.h
@@ -0,0 +1,27 @@
+#pragma once
+#include "ReactNativeAppBuilder.g.h"
+
+namespace winrt::Microsoft::ReactNative::implementation {
+struct ReactNativeAppBuilder : ReactNativeAppBuilderT<ReactNativeAppBuilder> {
+  ReactNativeAppBuilder();
+
+  winrt::Microsoft::ReactNative::ReactNativeAppBuilder AddPackageProviders(
+      winrt::Windows::Foundation::Collections::IVector<winrt::Microsoft::ReactNative::IReactPackageProvider> const
+          &packageProviders);
+  winrt::Microsoft::ReactNative::ReactNativeAppBuilder SetReactInstanceSettings(
+      winrt::Microsoft::ReactNative::ReactInstanceSettings const &settings);
+  winrt::Microsoft::ReactNative::ReactNativeAppBuilder SetCompositor(
+      winrt::Microsoft::UI::Composition::Compositor const &compositor);
+  winrt::Microsoft::ReactNative::ReactNativeAppBuilder SetAppWindow(
+      winrt::Microsoft::UI::Windowing::AppWindow const &appWindow);
+  winrt::Microsoft::ReactNative::ReactNativeHost Start();
+
+ private:
+  winrt::Microsoft::UI::Windowing::AppWindow m_appWindow{nullptr};
+  winrt::Microsoft::UI::Composition::Compositor m_compositor{};
+  winrt::Microsoft::ReactNative::ReactNativeHost m_host{};
+};
+} // namespace winrt::Microsoft::ReactNative::implementation
+namespace winrt::Microsoft::ReactNative::factory_implementation {
+struct ReactNativeAppBuilder : ReactNativeAppBuilderT<ReactNativeAppBuilder, implementation::ReactNativeAppBuilder> {};
+} // namespace winrt::Microsoft::ReactNative::factory_implementation
diff --git a/vnext/Microsoft.ReactNative/ReactNativeAppBuilder.idl b/vnext/Microsoft.ReactNative/ReactNativeAppBuilder.idl
@@ -0,0 +1,47 @@
+
+import "ReactNativeHost.idl";
+import "ReactInstanceSettings.idl";
+import "IReactPackageProvider.idl";
+
+#include "DocString.h"
+
+namespace Microsoft.ReactNative
+{
+    [experimental]
+    DOC_STRING("This is the builder for creating ReactInstanceSettings.")
+    runtimeclass ReactInstanceSettingsBuilder
+    {
+        ReactInstanceSettingsBuilder();
+
+        // Properties
+        ReactInstanceSettings ReactInstanceSettings {get;};
+
+        // Set Methods
+        ReactInstanceSettingsBuilder UseDirectDebugger(Boolean state);
+
+        ReactInstanceSettingsBuilder UseDeveloperSupport(Boolean state);
+    
+        ReactInstanceSettingsBuilder BundleRootPath(String path);
+
+        ReactInstanceSettingsBuilder JavaScriptBundleFile(String file);
+
+        ReactInstanceSettingsBuilder UseFastRefresh(Boolean state);
+    }
+
+    [experimental]
+    DOC_STRING("ReactNativeAppBuilder initializes and manages the ReactNativeHost component for a Win32 Fabric Application.")
+    runtimeclass ReactNativeAppBuilder
+    {
+        ReactNativeAppBuilder();
+
+        ReactNativeAppBuilder AddPackageProviders(Windows.Foundation.Collections.IVector<Microsoft.ReactNative.IReactPackageProvider> packageProviders);
+
+        ReactNativeAppBuilder SetReactInstanceSettings(ReactInstanceSettings settings);
+
+        ReactNativeAppBuilder SetCompositor(Microsoft.UI.Composition.Compositor compositor);
+
+        ReactNativeAppBuilder SetAppWindow(Microsoft.UI.Windowing.AppWindow appWindow);
+
+        ReactNativeHost Start();
+    }
+}
diff --git a/vnext/Microsoft.ReactNative/packages.lock.json b/vnext/Microsoft.ReactNative/packages.lock.json
@@ -67,8 +67,8 @@
       "folly": {
         "type": "Project",
         "dependencies": {
-          "Fmt": "[1.0.0, )",
-          "boost": "[1.76.0, )"
+          "boost": "[1.76.0, )",
+          "fmt": "[1.0.0, )"
         }
       },
       "reactcommon": {
diff --git a/vnext/Shared/Shared.vcxitems b/vnext/Shared/Shared.vcxitems
@@ -212,6 +212,16 @@
     </ClCompile>
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\SynchronousEventBeat.cpp">
       <ExcludedFromBuild Condition="'$(UseFabric)' != 'true'">true</ExcludedFromBuild>
+    </ClCompile>
+	<ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\ReactNativeAppBuilder.cpp">
+      <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" />
@@ -315,6 +325,16 @@
       <DependentUpon>$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\JsiApi.idl</DependentUpon>
     </ClInclude>
     <ClInclude Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\SchedulerSettings.h" />
+    <ClInclude Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\ReactNativeAppBuilder.h">
+      <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>
     </ClCompile>
@@ -369,6 +389,7 @@
     <ClCompile Include="$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Timer.cpp">
       <DependentUpon>$(MSBuildThisFileDirectory)..\Microsoft.ReactNative\Timer.idl</DependentUpon>
     </ClCompile>
+	
     <ClInclude Include="$(MSBuildThisFileDirectory)AbiSafe.h" />
     <ClInclude Include="$(MSBuildThisFileDirectory)BaseFileReaderResource.h" />
     <ClInclude Include="$(MSBuildThisFileDirectory)CppRuntimeOptions.h" />
@@ -655,6 +676,7 @@
     <Midl Condition="'$(UseFabric)' == 'true' OR '$(IncludeFabricInterface)' == 'true'" Include="$(ReactNativeWindowsDir)Microsoft.ReactNative\Theme.idl" />
     <Midl Condition="'$(UseFabric)' == 'true' OR '$(IncludeFabricInterface)' == 'true'" Include="$(ReactNativeWindowsDir)Microsoft.ReactNative\UriImageManager.idl" />
     <Midl Condition="'$(UseFabric)' == 'true' OR '$(IncludeFabricInterface)' == 'true'" Include="$(ReactNativeWindowsDir)Microsoft.ReactNative\ViewProps.idl" />
+	<Midl Condition="'$(UseFabric)' == 'true' OR '$(IncludeFabricInterface)' == 'true'" Include="$(ReactNativeWindowsDir)Microsoft.ReactNative\ReactNativeAppBuilder.idl" />
   </ItemGroup>
   <ItemGroup>
     <ClInclude Include="$(NodeApiJsiDir)src\ApiLoaders\HermesApi.h" />
