[0.75] Cherry-pick Fabric changes (#13948)

* Introduce ReactNativeAppBuilder (#13368) * Introduce ReactNativeAppBuilder.idl * yarn format fix * Change files * Address feedback * Add a fabric check for ReactNativeAppBuilder * yarn format * Update reactnativeappbuilder (#13467) * Build reactnativeappbuilder * Setup reactnativewin32 app * Fix dispatcherqueue issue * Change files * Cleanup * Address feedback * Address feedback2 * Fix pipeline error * Fix pipeline errors * Address feedback * [Fabric] Fix crash when running inspect (#13592) * [Fabric] Fix crash when running inspect * Change files * fix * [Fabric] LogBox should destroy its window on instance shutdown (#13675) * [Fabric] LogBox should destroy its window on instance shutdown * Change files * format * [Fabric] Add FocusNavigationDirection and allow overriding of default command handling (#13857) * [Fabric] Add FocusNavigationDirection and allow overriding of default command handling * Change files * revert packages.lock * [Fabric] LayoutDirection and FontSizeMultiplier support (#13866) * [Fabric] LayoutDirection and FontSizeMultiplier support * Change files * Missed a few places not setting LayoutDirection * fix crash on logbox * Fix textinput caret * fix * RichEdit has to be told its multiline before we can set a multiline string * Update SampleAppFabric to use ReactNativeAppBuilder (#13382) * Update SampleAppFabric to use ReactNativeAppBuilder * Yarn format fix * Address feedback to keep BUNDLE and DEBUG * Yarn format * Change files * Setup the DebugBundlePath when loading from metro * fix typo * [Fabric] Enable ScrollView touch scrolling (#13664) * [Fabric] Enable ScrolView touch scrolling * Change files * format * typo * [Fabric] Add Support for accessibilityActions and onAccessibilityAction (#13674) * Add Implementation for accessibilityActions * Add activate action * Format * Change files * Use a legacy native module binding that always returns null in bridgeless mode (#13905) * Use a legacy native module binding that always returns null in bridgeless mode * Change files * format * SampleTurboModule only works as a turbomodule, so do not install it when using web debugger (#13911) * SampleTurboModule only works as a turbomodule, so do not install it when using web debugger * Change files * fix * Implement the SampleTurboModule module (#13541) This PR provides a proper implementation of the `SampleTurboModule` module and removes the proxy code in `TurboModuleManager` which instead substituted the old `SampleTurboCxxModule` module. - New feature (non-breaking change which adds functionality) The APIs of `SampleTurboModule` are starting to deviate from the older `SampleTurboCxxModule`, specifically the addition of new `EventEmitter` members. So it's time we had a "real" implementation of `SampleTurboModule`. Closes #13531 See above. N/A Verified tests still pass and the new module is being called. Should this change be included in the release notes: _yes_ Implement the SampleTurboModule module * fix previous merge * fix bad merge * fix more typos * update snapshots --------- Co-authored-by: Sharath Manchala <[email protected]> Co-authored-by: Andrew Coates <[email protected]> Co-authored-by: Chiara Mooney <[email protected]> Co-authored-by: Jon Thysell <[email protected]>
microsoft · Oct 11, 2024 · 91192a3 · 91192a3
1 parent ac7ecfa
commit 91192a3
Show file tree

Hide file tree

Showing 81 changed files with 1,459 additions and 683 deletions.
diff --git a/change/@react-native-windows-codegen-8d6e2cd0-f94e-4aea-93b7-ac7b5edb0529.json b/change/@react-native-windows-codegen-8d6e2cd0-f94e-4aea-93b7-ac7b5edb0529.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Add FocusNavigationDirection and allow overriding of default command handling",
+  "packageName": "@react-native-windows/codegen",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-061e13a1-aed7-4c50-b382-f49b0863935b.json b/change/react-native-windows-061e13a1-aed7-4c50-b382-f49b0863935b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Fix crash when running inspect",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-35fe2283-4a8f-4316-8159-4f399c3fbe8f.json b/change/react-native-windows-35fe2283-4a8f-4316-8159-4f399c3fbe8f.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] LogBox should destroy its window on instance shutdown",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-40511e3c-feb7-429f-9b7f-22d0ba2f9dc1.json b/change/react-native-windows-40511e3c-feb7-429f-9b7f-22d0ba2f9dc1.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Use a legacy native module binding that always returns null in bridgeless mode",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-53895955-fc85-4bdd-bf07-423af7773f83.json b/change/react-native-windows-53895955-fc85-4bdd-bf07-423af7773f83.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Add FocusNavigationDirection and allow overriding of default command handling",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-61e991a4-b01f-44ee-a7a3-43a6d7f79eb1.json b/change/react-native-windows-61e991a4-b01f-44ee-a7a3-43a6d7f79eb1.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] Enable ScrollView touch scrolling",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-6a82bdc7-fdc0-4d57-bd42-cb297ef7a7ea.json b/change/react-native-windows-6a82bdc7-fdc0-4d57-bd42-cb297ef7a7ea.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Implement SampleTurboModule",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-8fc62f61-155f-45b2-824c-26d42a3281cb.json b/change/react-native-windows-8fc62f61-155f-45b2-824c-26d42a3281cb.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "SampleTurboModule only works as a turbomodule, so do not install it when using web debugger",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-96eb3191-d3a4-40fa-910c-c016a99977f7.json b/change/react-native-windows-96eb3191-d3a4-40fa-910c-c016a99977f7.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update SampleAppFabric to use ReactNativeAppBuilder",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
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": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-b2ad5990-4475-4b62-9ec8-6ddd45ba06be.json b/change/react-native-windows-b2ad5990-4475-4b62-9ec8-6ddd45ba06be.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add Implementation for accessibilityActions",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-b64d95ea-c807-42e3-8bc9-4213bd67d886.json b/change/react-native-windows-b64d95ea-c807-42e3-8bc9-4213bd67d886.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Setup reactnativewin32 app",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/change/react-native-windows-b828ab6b-3220-4d51-b6c9-3db3b91887c1.json b/change/react-native-windows-b828ab6b-3220-4d51-b6c9-3db3b91887c1.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "[Fabric] LayoutDirection and FontSizeMultiplier support",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/@react-native-windows/codegen/src/generators/GenerateComponentWindows.ts b/packages/@react-native-windows/codegen/src/generators/GenerateComponentWindows.ts
@@ -334,28 +334,27 @@ export function createComponentGenerator({
         }).join('\n\n') : '';
 
 
-        const commandHandler = hasAnyCommands ? `void HandleCommand(const winrt::Microsoft::ReactNative::ComponentView &view, winrt::hstring commandName, const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
-    args;
+        const commandHandler = hasAnyCommands ? `void HandleCommand(const winrt::Microsoft::ReactNative::ComponentView &view, const winrt::Microsoft::ReactNative::HandleCommandArgs& args) noexcept {
     auto userData = view.UserData().as<TUserData>();
+    auto commandName = args.CommandName();
 ${componentShape.commands.map(command => {
       const commaSeparatedCommandArgs = command.typeAnnotation.params.map(param => param.name).join(', ');
       return `    if (commandName == L"${command.name}") {
 ${command.typeAnnotation.params.length !== 0 ? `      ${command.typeAnnotation.params.map(param => {
             const commandArgType = translateCommandParamType(param.typeAnnotation, commandAliases, `${componentName}_${command.name}`, cppCodegenOptions);
             return `${(param.optional && !commandArgType.alreadySupportsOptionalOrHasDefault) ? `std::optional<${commandArgType.type}>` : commandArgType.type} ${param.name};`;
       }).join('\n')}
-      winrt::Microsoft::ReactNative::ReadArgs(args, ${commaSeparatedCommandArgs});` : ''}
+      winrt::Microsoft::ReactNative::ReadArgs(args.CommandArgs(), ${commaSeparatedCommandArgs});` : ''}
       userData->Handle${capitalizeFirstLetter(command.name)}Command(${commaSeparatedCommandArgs});
       return;
     }`
     }).join('\n\n')}
   }` : '';
 
       const registerCommandHandler = hasAnyCommands ? `        builder.SetCustomCommandHandler([](const winrt::Microsoft::ReactNative::ComponentView &view,
-                                          winrt::hstring commandName,
-                                          const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
+                                          const winrt::Microsoft::ReactNative::HandleCommandArgs& args) noexcept {
           auto userData = view.UserData().as<TUserData>();
-          userData->HandleCommand(view, commandName, args);
+          userData->HandleCommand(view, args);
         });` : '';
 
         const baseType = baseStructTemplate

diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap
@@ -379,7 +379,7 @@ exports[`TextInput Tests Text have cursorColor 1`] = `
           "Brush Type": "ColorBrush",
           "Color": "rgba(0, 128, 0, 255)",
         },
-        "Offset": "83, 133, 0",
+        "Offset": "83, 5, 0",
         "Opacity": 0,
         "Size": "1, 19",
         "Visual Type": "SpriteVisual",
@@ -1612,7 +1612,7 @@ exports[`TextInput Tests TextInputs can clear on submit 1`] = `
           "Brush Type": "ColorBrush",
           "Color": "rgba(0, 0, 0, 255)",
         },
-        "Offset": "5, 133, 0",
+        "Offset": "5, 5, 0",
         "Opacity": 0,
         "Size": "1, 19",
         "Visual Type": "SpriteVisual",

diff --git a/packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/RNTesterApp-Fabric.cpp b/packages/e2e-test-app-fabric/windows/RNTesterApp-Fabric/RNTesterApp-Fabric.cpp
@@ -51,6 +51,7 @@ void UpdateRootViewSizeToAppWindow(
   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});
   }

diff --git a/packages/playground/windows/playground-composition/Playground-Composition.cpp b/packages/playground/windows/playground-composition/Playground-Composition.cpp
@@ -128,6 +128,7 @@ struct WindowData {
   winrt::Microsoft::ReactNative::ReactInstanceSettings m_instanceSettings{nullptr};
   bool m_useLiftedComposition{true};
   bool m_sizeToContent{false};
+  bool m_forceRTL{false};
   winrt::Windows::UI::Composition::Desktop::DesktopWindowTarget m_target{nullptr};
   LONG m_height{0};
   LONG m_width{0};
@@ -252,14 +253,18 @@ struct WindowData {
               m_bridge = winrt::Microsoft::UI::Content::DesktopChildSiteBridge::Create(
                   g_liftedCompositor, winrt::Microsoft::UI::GetWindowIdFromWindow(hwnd));
 
+              if (m_forceRTL) {
+                m_bridge.LayoutDirectionOverride(winrt::Microsoft::UI::Content::ContentLayoutDirection::RightToLeft);
+              }
+
               auto appContent = m_compRootView.Island();
 
               m_bridge.Connect(appContent);
               m_bridge.Show();
 
               m_compRootView.ScaleFactor(ScaleFactor(hwnd));
               winrt::Microsoft::ReactNative::LayoutConstraints constraints;
-              constraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::LeftToRight;
+              constraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::Undefined;
               constraints.MaximumSize =
                   constraints.MinimumSize = {m_width / ScaleFactor(hwnd), m_height / ScaleFactor(hwnd)};
 
@@ -324,6 +329,7 @@ struct WindowData {
                                           SystemCompositionContextHelper::CreateVisual(root));
               m_compRootView.ScaleFactor(ScaleFactor(hwnd));
               winrt::Microsoft::ReactNative::LayoutConstraints contraints;
+              contraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::Undefined;
               contraints.MaximumSize =
                   contraints.MinimumSize = {m_width / ScaleFactor(hwnd), m_height / ScaleFactor(hwnd)};
               m_compRootView.Arrange(contraints, {0, 0});
@@ -368,15 +374,25 @@ struct WindowData {
           OutputDebugStringA("Instance Unload completed\n");
 
           uidispatch.Post([&]() {
-            m_bridge.Close();
-            m_bridge = nullptr;
+            if (m_bridge) {
+              m_bridge.Close();
+              m_bridge = nullptr;
+            }
           });
           assert(asyncStatus == winrt::Windows::Foundation::AsyncStatus::Completed);
         });
         m_compRootView = nullptr;
         m_instanceSettings = nullptr;
         m_host = nullptr;
       } break;
+      case IDM_TOGGLE_LAYOUT_DIRECTION: {
+        if (m_bridge) {
+          m_bridge.LayoutDirectionOverride(
+              (m_forceRTL) ? winrt::Microsoft::UI::Content::ContentLayoutDirection::LeftToRight
+                           : winrt::Microsoft::UI::Content::ContentLayoutDirection::RightToLeft);
+        }
+        m_forceRTL = !m_forceRTL;
+      }
     }
 
     return 0;
@@ -397,7 +413,7 @@ struct WindowData {
           winrt::Windows::Foundation::Size size{m_width / ScaleFactor(hwnd), m_height / ScaleFactor(hwnd)};
           if (!IsIconic(hwnd)) {
             winrt::Microsoft::ReactNative::LayoutConstraints constraints;
-            constraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::LeftToRight;
+            constraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::Undefined;
             constraints.MinimumSize = constraints.MaximumSize = size;
             if (m_sizeToContent) {
               ApplyConstraintsForContentSizedWindow(constraints);

diff --git a/packages/playground/windows/playground-composition/Playground-Composition.rc b/packages/playground/windows/playground-composition/Playground-Composition.rc
@@ -58,6 +58,7 @@ BEGIN
         MENUITEM "&New Window\tCtrl+N",         IDM_NEWWINDOW
         MENUITEM "&Refresh\tF5",                IDM_REFRESH
         MENUITEM "&Unload",                     IDM_UNLOAD
+        MENUITEM "Toggle Layout &Direction",    IDM_TOGGLE_LAYOUT_DIRECTION
         MENUITEM SEPARATOR
         MENUITEM "&Settings...\tAlt+S",         IDM_SETTINGS
         MENUITEM SEPARATOR

diff --git a/packages/playground/windows/playground-composition/resource.h b/packages/playground/windows/playground-composition/resource.h
@@ -25,6 +25,7 @@
 #define IDC_JSENGINELABEL 111
 #define IDC_SIZETOCONTENT 112
 #define IDM_UNLOAD 113
+#define IDM_TOGGLE_LAYOUT_DIRECTION 114
 #define IDI_ICON1 1008
 
 // Next default values for new objects