Implement Long Tasks API for PerformanceObserver

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlags.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<2dda5cec029bcd7bb62e428f4b4557f5>>
+ * @generated SignedSource<<3fa1a97be20aa80ef7a1e1595bee0dac>>
  */
 
 /**
@@ -82,6 +82,12 @@ public object ReactNativeFeatureFlags {
   @JvmStatic
   public fun enableGranularShadowTreeStateReconciliation(): Boolean = accessor.enableGranularShadowTreeStateReconciliation()
 
+  /**
+   * Enables the reporting of long tasks through `PerformanceObserver`. Only works if the event loop is enabled.
+   */
+  @JvmStatic
+  public fun enableLongTaskAPI(): Boolean = accessor.enableLongTaskAPI()
+
   /**
    * Enables the use of microtasks in Hermes (scheduling) and RuntimeScheduler (execution).
    */

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<125b4c5029a2f7f3d10ecd6f5382c46c>>
+ * @generated SignedSource<<89b4a679d8121ece9291dd55c46567ad>>
  */
 
 /**
@@ -29,6 +29,7 @@ public class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAccesso
   private var enableAlignItemsBaselineOnFabricIOSCache: Boolean? = null
   private var enableCleanTextInputYogaNodeCache: Boolean? = null
   private var enableGranularShadowTreeStateReconciliationCache: Boolean? = null
+  private var enableLongTaskAPICache: Boolean? = null
   private var enableMicrotasksCache: Boolean? = null
   private var enablePropsUpdateReconciliationAndroidCache: Boolean? = null
   private var enableSynchronousStateUpdatesCache: Boolean? = null
@@ -133,6 +134,15 @@ public class ReactNativeFeatureFlagsCxxAccessor : ReactNativeFeatureFlagsAccesso
     return cached
   }
 
+  override fun enableLongTaskAPI(): Boolean {
+    var cached = enableLongTaskAPICache
+    if (cached == null) {
+      cached = ReactNativeFeatureFlagsCxxInterop.enableLongTaskAPI()
+      enableLongTaskAPICache = cached
+    }
+    return cached
+  }
+
   override fun enableMicrotasks(): Boolean {
     var cached = enableMicrotasksCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsCxxInterop.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<15d521183f0efa93c87155890d88cf72>>
+ * @generated SignedSource<<98bd8f4b2b262ac3e75897da515706f5>>
  */
 
 /**
@@ -46,6 +46,8 @@ public object ReactNativeFeatureFlagsCxxInterop {
 
   @DoNotStrip @JvmStatic public external fun enableGranularShadowTreeStateReconciliation(): Boolean
 
+  @DoNotStrip @JvmStatic public external fun enableLongTaskAPI(): Boolean
+
   @DoNotStrip @JvmStatic public external fun enableMicrotasks(): Boolean
 
   @DoNotStrip @JvmStatic public external fun enablePropsUpdateReconciliationAndroid(): Boolean

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsDefaults.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<b1b7c96550acfde22c054d90fd691b49>>
+ * @generated SignedSource<<a42ecd51ef7f12eb8758dbd029a2d67b>>
  */
 
 /**
@@ -41,6 +41,8 @@ public open class ReactNativeFeatureFlagsDefaults : ReactNativeFeatureFlagsProvi
 
   override fun enableGranularShadowTreeStateReconciliation(): Boolean = false
 
+  override fun enableLongTaskAPI(): Boolean = false
+
   override fun enableMicrotasks(): Boolean = false
 
   override fun enablePropsUpdateReconciliationAndroid(): Boolean = false

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsLocalAccessor.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<0b90fde158e97c4cad711c3ab832f067>>
+ * @generated SignedSource<<96ed168a0e80e78d1d6f96374f045eca>>
  */
 
 /**
@@ -33,6 +33,7 @@ public class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcces
   private var enableAlignItemsBaselineOnFabricIOSCache: Boolean? = null
   private var enableCleanTextInputYogaNodeCache: Boolean? = null
   private var enableGranularShadowTreeStateReconciliationCache: Boolean? = null
+  private var enableLongTaskAPICache: Boolean? = null
   private var enableMicrotasksCache: Boolean? = null
   private var enablePropsUpdateReconciliationAndroidCache: Boolean? = null
   private var enableSynchronousStateUpdatesCache: Boolean? = null
@@ -146,6 +147,16 @@ public class ReactNativeFeatureFlagsLocalAccessor : ReactNativeFeatureFlagsAcces
     return cached
   }
 
+  override fun enableLongTaskAPI(): Boolean {
+    var cached = enableLongTaskAPICache
+    if (cached == null) {
+      cached = currentProvider.enableLongTaskAPI()
+      accessedFeatureFlags.add("enableLongTaskAPI")
+      enableLongTaskAPICache = cached
+    }
+    return cached
+  }
+
   override fun enableMicrotasks(): Boolean {
     var cached = enableMicrotasksCache
     if (cached == null) {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/internal/featureflags/ReactNativeFeatureFlagsProvider.kt

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<55fa16b3333fb8e2820a078c68850f91>>
+ * @generated SignedSource<<13469640e36f5985531f872b28ff0c30>>
  */
 
 /**
@@ -41,6 +41,8 @@ public interface ReactNativeFeatureFlagsProvider {
 
   @DoNotStrip public fun enableGranularShadowTreeStateReconciliation(): Boolean
 
+  @DoNotStrip public fun enableLongTaskAPI(): Boolean
+
   @DoNotStrip public fun enableMicrotasks(): Boolean
 
   @DoNotStrip public fun enablePropsUpdateReconciliationAndroid(): Boolean

packages/react-native/ReactAndroid/src/main/jni/CMakeLists.txt

@@ -115,6 +115,7 @@ add_react_common_subdir(jserrorhandler)
 add_react_common_subdir(react/runtime)
 add_react_common_subdir(react/runtime/hermes)
 add_react_common_subdir(react/runtime/nativeviewconfig)
+add_react_common_subdir(react/timing)
 
 # ReactAndroid JNI targets
 add_react_build_subdir(generated/source/codegen/jni)

packages/react-native/ReactAndroid/src/main/jni/react/featureflags/JReactNativeFeatureFlagsCxxInterop.cpp

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<0be20439a937a322afa27a9c935a98ad>>
+ * @generated SignedSource<<8efce8efb9cc312512b8736ed0073b30>>
  */
 
 /**
@@ -93,6 +93,12 @@ class ReactNativeFeatureFlagsProviderHolder
     return method(javaProvider_);
   }
 
+  bool enableLongTaskAPI() override {
+    static const auto method =
+        getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("enableLongTaskAPI");
+    return method(javaProvider_);
+  }
+
   bool enableMicrotasks() override {
     static const auto method =
         getReactNativeFeatureFlagsProviderJavaClass()->getMethod<jboolean()>("enableMicrotasks");
@@ -274,6 +280,11 @@ bool JReactNativeFeatureFlagsCxxInterop::enableGranularShadowTreeStateReconcilia
   return ReactNativeFeatureFlags::enableGranularShadowTreeStateReconciliation();
 }
 
+bool JReactNativeFeatureFlagsCxxInterop::enableLongTaskAPI(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
+  return ReactNativeFeatureFlags::enableLongTaskAPI();
+}
+
 bool JReactNativeFeatureFlagsCxxInterop::enableMicrotasks(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop> /*unused*/) {
   return ReactNativeFeatureFlags::enableMicrotasks();
@@ -428,6 +439,9 @@ void JReactNativeFeatureFlagsCxxInterop::registerNatives() {
       makeNativeMethod(
         "enableGranularShadowTreeStateReconciliation",
         JReactNativeFeatureFlagsCxxInterop::enableGranularShadowTreeStateReconciliation),
+      makeNativeMethod(
+        "enableLongTaskAPI",
+        JReactNativeFeatureFlagsCxxInterop::enableLongTaskAPI),
       makeNativeMethod(
         "enableMicrotasks",
         JReactNativeFeatureFlagsCxxInterop::enableMicrotasks),

packages/react-native/ReactAndroid/src/main/jni/react/featureflags/JReactNativeFeatureFlagsCxxInterop.h

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<5771674cf23f066fb2c7a493441e9967>>
+ * @generated SignedSource<<d7599e61abcedfa8a7f3270f2b0cd9ef>>
  */
 
 /**
@@ -57,6 +57,9 @@ class JReactNativeFeatureFlagsCxxInterop
   static bool enableGranularShadowTreeStateReconciliation(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
 
+  static bool enableLongTaskAPI(
+    facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
+
   static bool enableMicrotasks(
     facebook::jni::alias_ref<JReactNativeFeatureFlagsCxxInterop>);
 

packages/react-native/ReactCommon/cxxreact/CMakeLists.txt

@@ -28,4 +28,5 @@ target_link_libraries(react_cxxreact
         logger
         reactperflogger
         runtimeexecutor
+        react_timing
         react_debug)

packages/react-native/ReactCommon/cxxreact/JSExecutor.cpp

@@ -12,6 +12,7 @@
 #include <folly/Conv.h>
 #include <jsinspector-modern/ReactCdp.h>
 
+#include <react/timing/primitives.h>
 #include <chrono>
 
 namespace facebook::react {
@@ -26,13 +27,7 @@ std::string JSExecutor::getSyntheticBundlePath(
 }
 
 double JSExecutor::performanceNow() {
-  auto time = std::chrono::steady_clock::now();
-  auto duration = std::chrono::duration_cast<std::chrono::nanoseconds>(
-                      time.time_since_epoch())
-                      .count();
-
-  constexpr double NANOSECONDS_IN_MILLISECOND = 1000000.0;
-  return duration / NANOSECONDS_IN_MILLISECOND;
+  return chronoToDOMHighResTimeStamp(std::chrono::steady_clock::now());
 }
 
 jsinspector_modern::RuntimeTargetDelegate&

packages/react-native/ReactCommon/cxxreact/React-cxxreact.podspec

@@ -52,6 +52,7 @@ Pod::Spec.new do |s|
   s.dependency "React-jsi", version
   s.dependency "React-logger", version
   s.dependency "React-debug", version
+  s.dependency "React-timing", version
 
   s.resource_bundles = {'React-cxxreact_privacy' => 'PrivacyInfo.xcprivacy'}
 

packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.cpp

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<0f673fbed5f3cce13f7a42a8817ed404>>
+ * @generated SignedSource<<ce0749b4f2ccf11b420cb9762012c02b>>
  */
 
 /**
@@ -57,6 +57,10 @@ bool ReactNativeFeatureFlags::enableGranularShadowTreeStateReconciliation() {
   return getAccessor().enableGranularShadowTreeStateReconciliation();
 }
 
+bool ReactNativeFeatureFlags::enableLongTaskAPI() {
+  return getAccessor().enableLongTaskAPI();
+}
+
 bool ReactNativeFeatureFlags::enableMicrotasks() {
   return getAccessor().enableMicrotasks();
 }

packages/react-native/ReactCommon/react/featureflags/ReactNativeFeatureFlags.h

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @generated SignedSource<<f9c32a7245be31e900aa51f2b93a61d4>>
+ * @generated SignedSource<<5b0c518e45a5c98814c8151870aed591>>
  */
 
 /**
@@ -82,6 +82,11 @@ class ReactNativeFeatureFlags {
    */
   RN_EXPORT static bool enableGranularShadowTreeStateReconciliation();
 
+  /**
+   * Enables the reporting of long tasks through `PerformanceObserver`. Only works if the event loop is enabled.
+   */
+  RN_EXPORT static bool enableLongTaskAPI();
+
   /**
    * Enables the use of microtasks in Hermes (scheduling) and RuntimeScheduler (execution).
    */