[0.74] Backport various fabric fixes (#13960)

* Introduce ReactNativeAppBuilder (#13368) * Introduce ReactNativeAppBuilder.idl * yarn format fix * Change files * Address feedback * Add a fabric check for ReactNativeAppBuilder * yarn format * 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 * 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 * 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 * [Fabric] Fix crash when running inspect (#13592) * [Fabric] Fix crash when running inspect * Change files * fix * [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 * [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 * 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 * merge conflicts * format * fix * lint fix * fix * fix * update snapshots --------- Co-authored-by: Sharath Manchala <[email protected]> Co-authored-by: Jon Thysell <[email protected]> Co-authored-by: Chiara Mooney <[email protected]> Co-authored-by: React-Native-Windows Bot <[email protected]>
microsoft · Oct 15, 2024 · cc7dea7 · cc7dea7
1 parent 7c51f96
commit cc7dea7
Show file tree

Hide file tree

Showing 82 changed files with 1,342 additions and 391 deletions.
diff --git a/.ado/templates/checkout-shallow.yml b/.ado/templates/checkout-shallow.yml
@@ -4,5 +4,6 @@ steps:
   - checkout: self
     fetchDepth: 10 # Buffer to avoid race condition with AZP jobs started against merge branch
     clean: false
+    persistCredentials: true
     submodules: false
     lfs: false
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
@@ -439,9 +439,9 @@ export function createComponentGenerator({
           : '';
 
         const commandHandler = hasAnyCommands
-          ? `void HandleCommand(const winrt::Microsoft::ReactNative::ComponentView &view, winrt::hstring commandName, const winrt::Microsoft::ReactNative::IJSValueReader &args) noexcept {
-    args;
+          ? `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
@@ -466,7 +466,7 @@ ${
           } ${param.name};`;
         })
         .join('\n')}
-      winrt::Microsoft::ReactNative::ReadArgs(args, ${commaSeparatedCommandArgs});`
+      winrt::Microsoft::ReactNative::ReadArgs(args.CommandArgs(), ${commaSeparatedCommandArgs});`
     : ''
 }
       userData->Handle${capitalizeFirstLetter(
@@ -481,10 +481,9 @@ ${
 
         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);
         });`
           : '';
 

diff --git a/packages/@rnw-scripts/just-task/flow-tasks.js b/packages/@rnw-scripts/just-task/flow-tasks.js
@@ -57,7 +57,9 @@ async function downloadFilesFromReactNative(
   }
 
   const octokit = new Octokit({
-    auth: process.env.PLATFORM_OVERRIDE_GITHUB_TOKEN, // Used to make sure CI doesn't get rate-throttled
+    ...(process.env.PLATFORM_OVERRIDE_GITHUB_TOKEN
+      ? {auth: process.env.PLATFORM_OVERRIDE_GITHUB_TOKEN}
+      : {}), // Used to make sure CI doesn't get rate-throttled
     userAgent: 'RNW Just Task Script',
   });
 

diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextInputTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextInputTest.test.ts.snap
@@ -91,9 +91,7 @@ onKeyPress key: c
 onChange text: ab
 onSelectionChange range: 2,2
 onKeyPress key: b
-onSelectionChange range: 1,1
 onChange text: a
-onSelectionChange range: 0,0
 onChange text: a
 onSelectionChange range: 1,1
 onKeyPress key: a
@@ -111,7 +109,7 @@ onFocus
   "Visual Tree": {
     "Comment": "textinput-log",
     "Offset": "0, 0, 0",
-    "Size": "998, 858",
+    "Size": "998, 820",
     "Visual Type": "SpriteVisual",
   },
 }
@@ -129,9 +127,7 @@ onKeyPress key: c
 onChange text: ab
 onSelectionChange range: 2,2
 onKeyPress key: b
-onSelectionChange range: 1,1
 onChange text: a
-onSelectionChange range: 0,0
 onChange text: a
 onSelectionChange range: 1,1
 onKeyPress key: a
@@ -149,7 +145,7 @@ onFocus
   "Visual Tree": {
     "Comment": "textinput-log",
     "Offset": "0, 0, 0",
-    "Size": "998, 299",
+    "Size": "998, 262",
     "Visual Type": "SpriteVisual",
   },
 }
@@ -190,9 +186,7 @@ onKeyPress key: c
 onChange text: ab
 onSelectionChange range: 2,2
 onKeyPress key: b
-onSelectionChange range: 1,1
 onChange text: a
-onSelectionChange range: 0,0
 onChange text: a
 onSelectionChange range: 1,1
 onKeyPress key: a
@@ -210,7 +204,7 @@ onFocus
   "Visual Tree": {
     "Comment": "textinput-log",
     "Offset": "0, 0, 0",
-    "Size": "998, 727",
+    "Size": "998, 690",
     "Visual Type": "SpriteVisual",
   },
 }

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
@@ -2056,7 +2056,7 @@ exports[`TextInput Tests TextInputs can have caretHidden 1`] = `
           "Brush Type": "ColorBrush",
           "Color": "rgba(0, 0, 0, 228)",
         },
-        "Offset": "78, 128, 0",
+        "Offset": "78, 0, 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

diff --git a/vnext/Microsoft.ReactNative/ComponentView.idl b/vnext/Microsoft.ReactNative/ComponentView.idl
@@ -49,6 +49,15 @@ namespace Microsoft.ReactNative
     All           = 0x0000000F,
   };
 
+  enum FocusNavigationDirection
+  {
+    None,
+    Next,
+    Previous,
+    First,
+    Last,
+  };
+
   [webhosthidden]
   [experimental]
   interface IComponentState 
@@ -63,6 +72,7 @@ namespace Microsoft.ReactNative
   [experimental]
   [webhosthidden]
   runtimeclass LosingFocusEventArgs : Microsoft.ReactNative.Composition.Input.RoutedEventArgs {
+    FocusNavigationDirection Direction { get; };
     Microsoft.ReactNative.ComponentView NewFocusedComponent { get; };
     Microsoft.ReactNative.ComponentView OldFocusedComponent { get; };
 
@@ -73,6 +83,7 @@ namespace Microsoft.ReactNative
   [experimental]
   [webhosthidden]
   runtimeclass GettingFocusEventArgs : Microsoft.ReactNative.Composition.Input.RoutedEventArgs {
+    FocusNavigationDirection Direction { get; };
     Microsoft.ReactNative.ComponentView NewFocusedComponent { get; };
     Microsoft.ReactNative.ComponentView OldFocusedComponent { get; };
 

diff --git a/vnext/Microsoft.ReactNative/Composition.Input.idl b/vnext/Microsoft.ReactNative/Composition.Input.idl
@@ -106,6 +106,7 @@ namespace Microsoft.ReactNative.Composition.Input
     UInt64 Timestamp { get; };
     PointerPoint GetOffsetPoint(
         Windows.Foundation.Point offset);
+    Microsoft.UI.Input.PointerPoint Inner { get; };
   };
 
   runtimeclass PointerRoutedEventArgs : RoutedEventArgs

diff --git a/vnext/Microsoft.ReactNative/CompositionSwitcher.idl b/vnext/Microsoft.ReactNative/CompositionSwitcher.idl
@@ -3,6 +3,7 @@
 
 #include "NamespaceRedirect.h"
 #include "DocString.h"
+import "Composition.Input.idl";
 
 namespace Microsoft.ReactNative.Composition.Experimental
 {
@@ -112,6 +113,8 @@ namespace Microsoft.ReactNative.Composition.Experimental
     Windows.Foundation.Numerics.Vector3 ScrollPosition { get; };
     void ScrollBy(Windows.Foundation.Numerics.Vector3 offset, Boolean animate);
     void TryUpdatePosition(Windows.Foundation.Numerics.Vector3 position, Boolean animate);
+    void OnPointerPressed(Microsoft.ReactNative.Composition.Input.PointerRoutedEventArgs args);
+    Boolean Horizontal;
   }
 
   [webhosthidden]