Implement microtasks using new JSI method (#43397)

Summary:
Pull Request resolved: #43397

Changelog: [internal]

This migrates the Hermes-specific use of microtasks to an engine agnostic implementation based on the new JSI method to queue microtasks.

Reviewed By: sammy-SC

Differential Revision: D54687056

packages/react-native/Libraries/AppDelegate/RCTAppDelegate.mm

@@ -29,6 +29,7 @@
 #import <ReactCommon/RCTJscInstance.h>
 #endif
 #import <react/nativemodule/featureflags/NativeReactNativeFeatureFlags.h>
+#import <react/nativemodule/microtasks/NativeMicrotasks.h>
 
 @interface RCTAppDelegate () <RCTComponentViewFactoryComponentProvider>
 @end
@@ -210,6 +211,10 @@ - (Class)getModuleClassFromName:(const char *)name
     return std::make_shared<facebook::react::NativeReactNativeFeatureFlags>(jsInvoker);
   }
 
+  if (name == facebook::react::NativeMicrotasks::kModuleName) {
+    return std::make_shared<facebook::react::NativeMicrotasks>(jsInvoker);
+  }
+
   return nullptr;
 }
 

packages/react-native/Libraries/AppDelegate/React-RCTAppDelegate.podspec

@@ -78,6 +78,7 @@ Pod::Spec.new do |s|
   s.dependency "React-nativeconfig"
   s.dependency "ReactCodegen"
   s.dependency "React-featureflagsnativemodule"
+  s.dependency "React-microtasksnativemodule"
 
   add_dependency(s, "ReactCommon", :subspec => "turbomodule/core", :additional_framework_paths => ["react/nativemodule/core"])
   add_dependency(s, "React-NativeModulesApple")

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

@@ -10,7 +10,9 @@
 
 'use strict';
 
-const {isNativeFunction} = require('../Utilities/FeatureDetection');
+const ReactNativeFeatureFlags = require('../../src/private/featureflags/ReactNativeFeatureFlags');
+const NativeReactNativeFeatureFlags =
+  require('../../src/private/featureflags/specs/NativeReactNativeFeatureFlags').default;
 const {polyfillGlobal} = require('../Utilities/PolyfillFunctions');
 
 if (__DEV__) {
@@ -19,14 +21,6 @@ if (__DEV__) {
   }
 }
 
-// Currently, Hermes `Promise` is implemented via Internal Bytecode.
-const hasHermesPromiseQueuedToJSVM =
-  global.HermesInternal?.hasPromise?.() === true &&
-  global.HermesInternal?.useEngineQueue?.() === true;
-
-const hasNativePromise = isNativeFunction(Promise);
-const hasPromiseQueuedToJSVM = hasNativePromise || hasHermesPromiseQueuedToJSVM;
-
 // In bridgeless mode, timers are host functions installed from cpp.
 if (global.RN$Bridgeless !== true) {
   /**
@@ -56,13 +50,33 @@ if (global.RN$Bridgeless !== true) {
   defineLazyTimer('cancelIdleCallback');
 }
 
-/**
- * Set up immediate APIs, which is required to use the same microtask queue
- * as the Promise.
- */
-if (hasPromiseQueuedToJSVM) {
-  // When promise queues to the JSVM microtasks queue, we shim the immediate
-  // APIs via `queueMicrotask` to maintain the backward compatibility.
+// 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 (
+  NativeReactNativeFeatureFlags != null &&
+  ReactNativeFeatureFlags.enableMicrotasks()
+) {
+  // 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;
+
+  polyfillGlobal('queueMicrotask', () => {
+    const nativeQueueMicrotask =
+      require('../../src/private/webapis/microtasks/specs/NativeMicrotasks')
+        .default?.queueMicrotask;
+    if (nativeQueueMicrotask) {
+      return nativeQueueMicrotask;
+    } else {
+      // For backwards-compatibility
+      return global.HermesInternal?.enqueueJob;
+    }
+  });
+
+  // We shim the immediate APIs via `queueMicrotask` to maintain the backward
+  // compatibility.
   polyfillGlobal(
     'setImmediate',
     () => require('./Timers/immediateShim').setImmediate,
@@ -72,6 +86,12 @@ if (hasPromiseQueuedToJSVM) {
     () => require('./Timers/immediateShim').clearImmediate,
   );
 } else {
+  // Polyfill it with promise (regardless it's polyfilled or native) otherwise.
+  polyfillGlobal(
+    'queueMicrotask',
+    () => require('./Timers/queueMicrotask.js').default,
+  );
+
   // 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.
@@ -86,18 +106,3 @@ if (hasPromiseQueuedToJSVM) {
     );
   }
 }
-
-/**
- * Set up the microtask queueing API, which is required to use the same
- * microtask queue as the Promise.
- */
-if (hasHermesPromiseQueuedToJSVM) {
-  // Fast path for Hermes.
-  polyfillGlobal('queueMicrotask', () => global.HermesInternal?.enqueueJob);
-} else {
-  // Polyfill it with promise (regardless it's polyfilled or native) otherwise.
-  polyfillGlobal(
-    'queueMicrotask',
-    () => require('./Timers/queueMicrotask.js').default,
-  );
-}

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

@@ -102,6 +102,7 @@ add_react_common_subdir(react/bridging)
 add_react_common_subdir(react/renderer/mapbuffer)
 add_react_common_subdir(react/nativemodule/core)
 add_react_common_subdir(react/nativemodule/featureflags)
+add_react_common_subdir(react/nativemodule/microtasks)
 add_react_common_subdir(jserrorhandler)
 add_react_common_subdir(react/runtime)
 add_react_common_subdir(react/runtime/hermes)

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

@@ -22,4 +22,5 @@ target_link_libraries(react_newarchdefaults
         react_codegen_rncore
         react_cxxreactpackage
         react_nativemodule_featureflags
+        react_nativemodule_microtasks
         jsi)

packages/react-native/ReactAndroid/src/main/jni/react/newarchdefaults/DefaultTurboModuleManagerDelegate.cpp

@@ -10,6 +10,7 @@
 #include <algorithm>
 
 #include <react/nativemodule/featureflags/NativeReactNativeFeatureFlags.h>
+#include <react/nativemodule/microtasks/NativeMicrotasks.h>
 #include <rncore.h>
 
 namespace facebook::react {
@@ -78,6 +79,10 @@ std::shared_ptr<TurboModule> DefaultTurboModuleManagerDelegate::getTurboModule(
     return std::make_shared<NativeReactNativeFeatureFlags>(jsInvoker);
   }
 
+  if (name == NativeMicrotasks::kModuleName) {
+    return std::make_shared<NativeMicrotasks>(jsInvoker);
+  }
+
   return nullptr;
 }
 

packages/react-native/ReactCommon/react/nativemodule/microtasks/CMakeLists.txt

@@ -0,0 +1,24 @@
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+
+cmake_minimum_required(VERSION 3.13)
+set(CMAKE_VERBOSE_MAKEFILE on)
+
+add_compile_options(
+        -fexceptions
+        -frtti
+        -std=c++20
+        -Wall
+        -Wpedantic
+        -DLOG_TAG=\"ReactNative\")
+
+file(GLOB react_nativemodule_microtasks_SRC CONFIGURE_DEPENDS *.cpp)
+add_library(react_nativemodule_microtasks SHARED ${react_nativemodule_microtasks_SRC})
+
+target_include_directories(react_nativemodule_microtasks PUBLIC ${REACT_COMMON_DIR})
+
+target_link_libraries(react_nativemodule_microtasks
+        react_codegen_rncore
+        reactnative)

packages/react-native/ReactCommon/react/nativemodule/microtasks/NativeMicrotasks.cpp

@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#include "NativeMicrotasks.h"
+
+#ifdef RN_DISABLE_OSS_PLUGIN_HEADER
+#include "Plugins.h"
+#endif
+
+std::shared_ptr<facebook::react::TurboModule> NativeMicrotasksModuleProvider(
+    std::shared_ptr<facebook::react::CallInvoker> jsInvoker) {
+  return std::make_shared<facebook::react::NativeMicrotasks>(
+      std::move(jsInvoker));
+}
+
+namespace facebook::react {
+
+NativeMicrotasks::NativeMicrotasks(std::shared_ptr<CallInvoker> jsInvoker)
+    : NativeMicrotasksCxxSpec(std::move(jsInvoker)) {}
+
+void NativeMicrotasks::queueMicrotask(
+    jsi::Runtime& runtime,
+    jsi::Function callback) {
+  runtime.queueMicrotask(callback);
+}
+
+} // namespace facebook::react

packages/react-native/ReactCommon/react/nativemodule/microtasks/NativeMicrotasks.h

@@ -0,0 +1,28 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#if __has_include("rncoreJSI.h") // Cmake headers on Android
+#include "rncoreJSI.h"
+#elif __has_include("FBReactNativeSpecJSI.h") // CocoaPod headers on Apple
+#include "FBReactNativeSpecJSI.h"
+#else
+#include <FBReactNativeSpec/FBReactNativeSpecJSI.h>
+#endif
+
+namespace facebook::react {
+
+class NativeMicrotasks : public NativeMicrotasksCxxSpec<NativeMicrotasks>,
+                         std::enable_shared_from_this<NativeMicrotasks> {
+ public:
+  NativeMicrotasks(std::shared_ptr<CallInvoker> jsInvoker);
+
+  void queueMicrotask(jsi::Runtime& runtime, jsi::Function callback);
+};
+
+} // namespace facebook::react

packages/react-native/ReactCommon/react/nativemodule/microtasks/React-microtasksnativemodule.podspec

@@ -0,0 +1,48 @@
+# Copyright (c) Meta Platforms, Inc. and affiliates.
+#
+# This source code is licensed under the MIT license found in the
+# LICENSE file in the root directory of this source tree.
+
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "..", "..", "..", "..", "package.json")))
+version = package['version']
+
+source = { :git => 'https://github.com/facebook/react-native.git' }
+if version == '1000.0.0'
+  # This is an unpublished version, use the latest commit hash of the react-native repo, which we’re presumably in.
+  source[:commit] = `git rev-parse HEAD`.strip if system("git rev-parse --git-dir > /dev/null 2>&1")
+else
+  source[:tag] = "v#{version}"
+end
+
+header_search_paths = []
+
+if ENV['USE_FRAMEWORKS']
+  header_search_paths << "\"$(PODS_TARGET_SRCROOT)/../../..\"" # this is needed to allow the microtasks module access its own files
+end
+
+Pod::Spec.new do |s|
+  s.name                   = "React-microtasksnativemodule"
+  s.version                = version
+  s.summary                = "React Native microtasks native module"
+  s.homepage               = "https://reactnative.dev/"
+  s.license                = package["license"]
+  s.author                 = "Meta Platforms, Inc. and its affiliates"
+  s.platforms              = min_supported_versions
+  s.source                 = source
+  s.source_files           = "*.{cpp,h}"
+  s.header_dir             = "react/nativemodule/microtasks"
+  s.pod_target_xcconfig    = { "CLANG_CXX_LANGUAGE_STANDARD" => "c++20",
+                               "HEADER_SEARCH_PATHS" => header_search_paths.join(' '),
+                               "DEFINES_MODULE" => "YES" }
+
+  if ENV['USE_FRAMEWORKS']
+    s.module_name            = "React_microtasksnativemodule"
+    s.header_mappings_dir  = "../.."
+  end
+
+  install_modules_dependencies(s)
+
+  s.dependency "ReactCommon/turbomodule/core"
+end

packages/react-native/scripts/react_native_pods.rb

@@ -126,6 +126,7 @@ def use_react_native! (
   pod 'React-utils', :path => "#{prefix}/ReactCommon/react/utils"
   pod 'React-featureflags', :path => "#{prefix}/ReactCommon/react/featureflags"
   pod 'React-featureflagsnativemodule', :path => "#{prefix}/ReactCommon/react/nativemodule/featureflags"
+  pod 'React-microtasksnativemodule', :path => "#{prefix}/ReactCommon/react/nativemodule/microtasks"
   pod 'React-Mapbuffer', :path => "#{prefix}/ReactCommon"
   pod 'React-jserrorhandler', :path => "#{prefix}/ReactCommon/jserrorhandler"
   pod 'React-nativeconfig', :path => "#{prefix}/ReactCommon"

packages/react-native/src/private/webapis/microtasks/specs/NativeMicrotasks.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ * @format
+ */
+
+import type {TurboModule} from '../../../../../Libraries/TurboModule/RCTExport';
+
+import * as TurboModuleRegistry from '../../../../../Libraries/TurboModule/TurboModuleRegistry';
+
+export interface Spec extends TurboModule {
+  +queueMicrotask: (callback: () => mixed) => void;
+}
+
+export default (TurboModuleRegistry.get<Spec>('NativeMicrotasksCxx'): ?Spec);