Merge branch 'main' into improve-lineheight-calc-ios

packages/dev-middleware/package.json

@@ -28,6 +28,7 @@
     "chromium-edge-launcher": "^0.2.0",
     "connect": "^3.6.5",
     "debug": "^2.2.0",
+    "invariant": "^2.2.4",
     "nullthrows": "^1.1.1",
     "open": "^7.0.3",
     "selfsigned": "^2.4.1",

packages/metro-config/src/index.flow.js

@@ -26,7 +26,6 @@ const INTERNAL_CALLSITES_REGEX = new RegExp(
     '/Libraries/Utilities/.+\\.js$',
     '/Libraries/vendor/.+\\.js$',
     '/Libraries/WebSocket/.+\\.js$',
-    '/Libraries/YellowBox/.+\\.js$',
     '/src/private/renderer/errorhandling/.+\\.js$',
     '/metro-runtime/.+\\.js$',
     '/node_modules/@babel/runtime/.+\\.js$',

packages/react-native-codegen/e2e/__tests__/components/__snapshots__/GenerateViewConfigJs-test.js.snap

@@ -31,7 +31,7 @@ export const __INTERNAL_VIEW_CONFIG = {
     radii: true,
 
     colors: {
-      process: require('react-native/Libraries/StyleSheet/processColorArray').default,
+      process: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/StyleSheet/processColorArray')),
     },
 
     srcs: true,

packages/react-native-codegen/src/generators/components/GenerateViewConfigJs.js

@@ -91,7 +91,7 @@ function getReactDiffProcessValue(typeAnnotation: PropTypeAnnotation) {
         switch (typeAnnotation.elementType.name) {
           case 'ColorPrimitive':
             return j.template
-              .expression`{ process: require('react-native/Libraries/StyleSheet/processColorArray').default }`;
+              .expression`{ process: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/StyleSheet/processColorArray')) }`;
           case 'ImageSourcePrimitive':
           case 'PointPrimitive':
           case 'EdgeInsetsPrimitive':

packages/react-native-codegen/src/generators/components/__tests__/__snapshots__/GenerateViewConfigJs-test.js.snap

@@ -31,7 +31,7 @@ export const __INTERNAL_VIEW_CONFIG = {
     radii: true,
 
     colors: {
-      process: require('react-native/Libraries/StyleSheet/processColorArray').default,
+      process: ((req) => 'default' in req ? req.default : req)(require('react-native/Libraries/StyleSheet/processColorArray')),
     },
 
     srcs: true,

packages/react-native-fantom/src/Benchmark.js

@@ -19,10 +19,11 @@ import {
 } from 'tinybench';
 
 type SuiteOptions = $ReadOnly<{
-  ...Pick<
-    BenchOptions,
-    'iterations' | 'time' | 'warmup' | 'warmupIterations' | 'warmupTime',
-  >,
+  minIterations?: number,
+  minDuration?: number,
+  warmup?: boolean,
+  minWarmupDuration?: number,
+  minWarmupIterations?: number,
   disableOptimizedBuildCheck?: boolean,
 }>;
 
@@ -35,7 +36,7 @@ interface SuiteAPI {
 
 export function suite(
   suiteName: string,
-  suiteOptions?: ?SuiteOptions,
+  suiteOptions?: SuiteOptions = {},
 ): SuiteAPI {
   const tasks: Array<{
     name: string,
@@ -57,7 +58,7 @@ export function suite(
     // logic in the benchmark doesn't break.
     const isTestOnly = isRunningFromCI && verifyFns.length === 0;
 
-    const overriddenOptions: BenchOptions = isTestOnly
+    const benchOptions: BenchOptions = isTestOnly
       ? {
           warmupIterations: 1,
           warmupTime: 0,
@@ -66,15 +67,31 @@ export function suite(
         }
       : {};
 
-    const {disableOptimizedBuildCheck, ...benchOptions} = suiteOptions ?? {};
+    benchOptions.name = suiteName;
+    benchOptions.throws = true;
+    benchOptions.now = () => NativeCPUTime.getCPUTimeNanos() / 1000000;
 
-    const bench = new Bench({
-      ...benchOptions,
-      ...overriddenOptions,
-      name: suiteName,
-      throws: true,
-      now: () => NativeCPUTime.getCPUTimeNanos() / 1000000,
-    });
+    if (suiteOptions.minIterations != null) {
+      benchOptions.iterations = suiteOptions.minIterations;
+    }
+
+    if (suiteOptions.minDuration != null) {
+      benchOptions.time = suiteOptions.minDuration;
+    }
+
+    if (suiteOptions.warmup != null) {
+      benchOptions.warmup = suiteOptions.warmup;
+    }
+
+    if (suiteOptions.minWarmupDuration != null) {
+      benchOptions.warmupTime = suiteOptions.minWarmupDuration;
+    }
+
+    if (suiteOptions.minWarmupIterations != null) {
+      benchOptions.warmupIterations = suiteOptions.minWarmupIterations;
+    }
+
+    const bench = new Bench(benchOptions);
 
     for (const task of tasks) {
       bench.add(task.name, task.fn, task.options);
@@ -96,7 +113,7 @@ export function suite(
       );
     }
 
-    if (__DEV__ && disableOptimizedBuildCheck !== true) {
+    if (__DEV__ && suiteOptions.disableOptimizedBuildCheck !== true) {
       throw new Error('Benchmarks should not be run in development mode');
     }
   });

packages/react-native/Libraries/Components/Keyboard/__tests__/Keyboard-test.js

@@ -9,7 +9,8 @@
  * @oncall react_native
  */
 
-const LayoutAnimation = require('../../../LayoutAnimation/LayoutAnimation');
+const LayoutAnimation =
+  require('../../../LayoutAnimation/LayoutAnimation').default;
 const dismissKeyboard = require('../../../Utilities/dismissKeyboard');
 const Keyboard = require('../Keyboard').default;
 

packages/react-native/Libraries/Core/setUpBatchedBridge.js

@@ -21,8 +21,9 @@ registerModule(
   'RCTDeviceEventEmitter',
   () => require('../EventEmitter/RCTDeviceEventEmitter').default,
 );
-registerModule('RCTNativeAppEventEmitter', () =>
-  require('../EventEmitter/RCTNativeAppEventEmitter'),
+registerModule(
+  'RCTNativeAppEventEmitter',
+  () => require('../EventEmitter/RCTNativeAppEventEmitter').default,
 );
 registerModule('GlobalPerformanceLogger', () =>
   require('../Utilities/GlobalPerformanceLogger'),

packages/react-native/Libraries/Core/setUpDeveloperTools.js

@@ -17,10 +17,6 @@ declare var console: {[string]: $FlowFixMe};
  * You can use this module directly, or just require InitializeCore.
  */
 if (__DEV__) {
-  // Set up inspector
-  const JSInspector = require('../JSInspector/JSInspector');
-  JSInspector.registerAgent(require('../JSInspector/NetworkAgent'));
-
   // Note we can't check if console is "native" because it would appear "native" in JSC and Hermes.
   // We also can't check any properties that don't exist in the Chrome worker environment.
   // So we check a navigator property that's set to a particular value ("Netscape") in all real browsers.

packages/react-native/Libraries/Core/setUpReactDevTools.js

@@ -209,7 +209,8 @@ if (__DEV__) {
   );
 
   // 3. Fallback to attempting to connect WS-based RDT frontend
-  const RCTNativeAppEventEmitter = require('../EventEmitter/RCTNativeAppEventEmitter');
+  const RCTNativeAppEventEmitter =
+    require('../EventEmitter/RCTNativeAppEventEmitter').default;
   RCTNativeAppEventEmitter.addListener(
     'RCTDevMenuShown',
     connectToWSBasedReactDevToolsFrontend,

packages/react-native/Libraries/Core/setUpTimers.js

@@ -10,9 +10,6 @@
 
 'use strict';
 
-const ReactNativeFeatureFlags = require('../../src/private/featureflags/ReactNativeFeatureFlags');
-const NativeReactNativeFeatureFlags =
-  require('../../src/private/featureflags/specs/NativeReactNativeFeatureFlags').default;
 const {polyfillGlobal} = require('../Utilities/PolyfillFunctions');
 
 if (__DEV__) {
@@ -21,19 +18,46 @@ if (__DEV__) {
   }
 }
 
-const isEventLoopEnabled = (() => {
-  if (NativeReactNativeFeatureFlags == null) {
-    return false;
-  }
+// In bridgeless mode, timers are host functions installed from cpp.
+if (global.RN$Bridgeless === true) {
+  // This is the flag that tells React to use `queueMicrotask` to batch state
+  // updates, instead of using the scheduler to schedule a regular task.
+  // We use a global variable because we don't currently have any other
+  // mechanism to pass feature flags from RN to React in OSS.
+  global.RN$enableMicrotasksInReact = true;
 
-  return (
-    ReactNativeFeatureFlags.enableBridgelessArchitecture() &&
-    !ReactNativeFeatureFlags.disableEventLoopOnBridgeless()
+  polyfillGlobal(
+    'queueMicrotask',
+    () =>
+      require('../../src/private/webapis/microtasks/specs/NativeMicrotasks')
+        .default.queueMicrotask,
   );
-})();
 
-// In bridgeless mode, timers are host functions installed from cpp.
-if (global.RN$Bridgeless !== true) {
+  // We shim the immediate APIs via `queueMicrotask` to maintain the backward
+  // compatibility.
+  polyfillGlobal(
+    'setImmediate',
+    () => require('./Timers/immediateShim').setImmediate,
+  );
+  polyfillGlobal(
+    'clearImmediate',
+    () => require('./Timers/immediateShim').clearImmediate,
+  );
+
+  polyfillGlobal(
+    'requestIdleCallback',
+    () =>
+      require('../../src/private/webapis/idlecallbacks/specs/NativeIdleCallbacks')
+        .default.requestIdleCallback,
+  );
+
+  polyfillGlobal(
+    'cancelIdleCallback',
+    () =>
+      require('../../src/private/webapis/idlecallbacks/specs/NativeIdleCallbacks')
+        .default.cancelIdleCallback,
+  );
+} else {
   /**
    * Set up timers.
    * You can use this module directly, or just require InitializeCore.
@@ -59,67 +83,22 @@ if (global.RN$Bridgeless !== true) {
   defineLazyTimer('cancelAnimationFrame');
   defineLazyTimer('requestIdleCallback');
   defineLazyTimer('cancelIdleCallback');
-} else if (isEventLoopEnabled) {
-  polyfillGlobal(
-    'requestIdleCallback',
-    () =>
-      require('../../src/private/webapis/idlecallbacks/specs/NativeIdleCallbacks')
-        .default.requestIdleCallback,
-  );
-
-  polyfillGlobal(
-    'cancelIdleCallback',
-    () =>
-      require('../../src/private/webapis/idlecallbacks/specs/NativeIdleCallbacks')
-        .default.cancelIdleCallback,
-  );
-}
-
-// We need to check if the native module is available before accessing the
-// feature flag, because otherwise the API would throw an error in the legacy
-// architecture in OSS, where the native module isn't available.
-if (isEventLoopEnabled) {
-  // This is the flag that tells React to use `queueMicrotask` to batch state
-  // updates, instead of using the scheduler to schedule a regular task.
-  // We use a global variable because we don't currently have any other
-  // mechanism to pass feature flags from RN to React in OSS.
-  global.RN$enableMicrotasksInReact = true;
 
+  // Polyfill it with promise (regardless it's polyfilled or native) otherwise.
   polyfillGlobal(
     'queueMicrotask',
-    () =>
-      require('../../src/private/webapis/microtasks/specs/NativeMicrotasks')
-        .default.queueMicrotask,
+    () => require('./Timers/queueMicrotask.js').default,
   );
 
-  // We shim the immediate APIs via `queueMicrotask` to maintain the backward
-  // compatibility.
+  // When promise was polyfilled hence is queued to the RN microtask queue,
+  // we polyfill the immediate APIs as aliases to the ReactNativeMicrotask APIs.
+  // Note that in bridgeless mode, immediate APIs are installed from cpp.
   polyfillGlobal(
     'setImmediate',
-    () => require('./Timers/immediateShim').setImmediate,
+    () => require('./Timers/JSTimers').default.queueReactNativeMicrotask,
   );
   polyfillGlobal(
     'clearImmediate',
-    () => require('./Timers/immediateShim').clearImmediate,
-  );
-} else {
-  // Polyfill it with promise (regardless it's polyfilled or native) otherwise.
-  polyfillGlobal(
-    'queueMicrotask',
-    () => require('./Timers/queueMicrotask.js').default,
+    () => require('./Timers/JSTimers').default.clearReactNativeMicrotask,
   );
-
-  // When promise was polyfilled hence is queued to the RN microtask queue,
-  // we polyfill the immediate APIs as aliases to the ReactNativeMicrotask APIs.
-  // Note that in bridgeless mode, immediate APIs are installed from cpp.
-  if (global.RN$Bridgeless !== true) {
-    polyfillGlobal(
-      'setImmediate',
-      () => require('./Timers/JSTimers').default.queueReactNativeMicrotask,
-    );
-    polyfillGlobal(
-      'clearImmediate',
-      () => require('./Timers/JSTimers').default.clearReactNativeMicrotask,
-    );
-  }
 }

packages/react-native/Libraries/EventEmitter/RCTEventEmitter.js

@@ -18,4 +18,4 @@ const RCTEventEmitter = {
   },
 };
 
-module.exports = RCTEventEmitter;
+export default RCTEventEmitter;

packages/react-native/Libraries/EventEmitter/RCTNativeAppEventEmitter.js

@@ -15,4 +15,4 @@ import RCTDeviceEventEmitter from './RCTDeviceEventEmitter';
  * adding all event listeners directly to RCTNativeAppEventEmitter.
  */
 const RCTNativeAppEventEmitter = RCTDeviceEventEmitter;
-module.exports = RCTNativeAppEventEmitter;
+export default RCTNativeAppEventEmitter;

packages/react-native/Libraries/Image/AssetRegistry.js

@@ -12,7 +12,9 @@
 
 import type {PackagerAsset} from '@react-native/assets-registry/registry';
 
-module.exports = require('@react-native/assets-registry/registry') as {
+const AssetRegistry = require('@react-native/assets-registry/registry') as {
   registerAsset: (asset: PackagerAsset) => number,
   getAssetByID: (assetId: number) => PackagerAsset,
 };
+
+module.exports = AssetRegistry;

packages/react-native/Libraries/Image/AssetSourceResolver.js

@@ -210,4 +210,4 @@ class AssetSourceResolver {
     pickScale;
 }
 
-module.exports = AssetSourceResolver;
+export default AssetSourceResolver;

packages/react-native/Libraries/Image/Image.android.js

@@ -319,4 +319,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = Image;
+export default Image;

packages/react-native/Libraries/Image/Image.ios.js

@@ -249,4 +249,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = Image;
+export default Image;

packages/react-native/Libraries/Image/Image.js.flow

@@ -10,4 +10,4 @@
 
 import type {Image} from './ImageTypes.flow';
 
-declare module.exports: Image;
+declare export default Image;

packages/react-native/Libraries/Image/ImageBackground.js

@@ -103,4 +103,4 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
   }
 }
 
-module.exports = ImageBackground;
+export default ImageBackground;

packages/react-native/Libraries/Image/ImageViewNativeComponent.js

@@ -83,7 +83,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
         validAttributes: {
           blurRadius: true,
           defaultSource: {
-            process: require('./resolveAssetSource'),
+            process: require('./resolveAssetSource').default,
           },
           internal_analyticTag: true,
           resizeMethod: true,
@@ -146,7 +146,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
             diff: require('../Utilities/differ/insetsDiffer'),
           },
           defaultSource: {
-            process: require('./resolveAssetSource'),
+            process: require('./resolveAssetSource').default,
           },
           internal_analyticTag: true,
           resizeMode: true,

packages/react-native/Libraries/Image/RelativeImageStub.js

@@ -15,7 +15,7 @@
 
 const AssetRegistry = require('@react-native/assets-registry/registry');
 
-module.exports = (AssetRegistry.registerAsset({
+const RelativeImageStub = (AssetRegistry.registerAsset({
   __packager_asset: true,
   fileSystemLocation: '/full/path/to/directory',
   httpServerLocation: '/assets/full/path/to/directory',
@@ -26,3 +26,5 @@ module.exports = (AssetRegistry.registerAsset({
   name: 'icon',
   type: 'png',
 }): number);
+
+module.exports = RelativeImageStub;