Implement microtasks using new JSI method (#43397)

rubennorte · facebook-github-bot · commit 5f7b5085552d · 2024-03-12T06:43:53.000-07:00
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
diff --git a/packages/react-native/Libraries/AppDelegate/RCTAppDelegate.mm b/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;
 }
 
diff --git a/packages/react-native/Libraries/AppDelegate/React-RCTAppDelegate.podspec b/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")
diff --git a/packages/react-native/Libraries/Core/setUpTimers.js b/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,
-  );
-}
diff --git a/packages/react-native/ReactAndroid/src/main/jni/CMakeLists.txt b/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)
diff --git a/packages/react-native/ReactAndroid/src/main/jni/react/newarchdefaults/CMakeLists.txt b/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)
diff --git a/packages/react-native/ReactAndroid/src/main/jni/react/newarchdefaults/DefaultTurboModuleManagerDelegate.cpp b/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;
 }
 
diff --git a/packages/react-native/ReactCommon/react/nativemodule/microtasks/CMakeLists.txt b/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)
diff --git a/packages/react-native/ReactCommon/react/nativemodule/microtasks/NativeMicrotasks.cpp b/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
diff --git a/packages/react-native/ReactCommon/react/nativemodule/microtasks/NativeMicrotasks.h b/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
diff --git a/packages/react-native/ReactCommon/react/nativemodule/microtasks/React-microtasksnativemodule.podspec b/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
diff --git a/packages/react-native/scripts/react_native_pods.rb b/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"
diff --git a/packages/react-native/src/private/webapis/microtasks/specs/NativeMicrotasks.js b/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);

Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@`
`10`	`10`	`#include <algorithm>`
`11`	`11`
`12`	`12`	`#include <react/nativemodule/featureflags/NativeReactNativeFeatureFlags.h>`
	`13`	`+#include <react/nativemodule/microtasks/NativeMicrotasks.h>`
`13`	`14`	`#include <rncore.h>`
`14`	`15`
`15`	`16`	`namespace facebook::react {`
`@@ -78,6 +79,10 @@ std::shared_ptr<TurboModule> DefaultTurboModuleManagerDelegate::getTurboModule(`
`78`	`79`	`return std::make_shared<NativeReactNativeFeatureFlags>(jsInvoker);`
`79`	`80`	`}`
`80`	`81`
	`82`	`+ if (name == NativeMicrotasks::kModuleName) {`
	`83`	`+ return std::make_shared<NativeMicrotasks>(jsInvoker);`
	`84`	`+ }`
	`85`	`+`
`81`	`86`	`return nullptr;`
`82`	`87`	`}`
`83`	`88`