[0.85] Add Fast Refresh performance marker and unstable_fastRefreshComplete CDP event (#56639)

* Add performance marker for Fast Refresh update (#56176)

Summary:
Pull Request resolved: #56176

NOTE: Resubmission of D84624705.

Adds a prominent vertical "Fast Refresh ⚛︎" marker entry in the performance timeline when a Fast Refresh update is complete.

Changelog: [Internal]

Reviewed By: GijsWeterings

Differential Revision: D97486551

fbshipit-source-id: 4c70b674370bab06f02e8d356bbd2979c9686a44

* Add unstable_fastRefreshComplete CDP event (#56273)

Summary:
Pull Request resolved: #56273

Adds a new, experimental `ReactNativeApplication.unstable_fastRefreshComplete` CDP event, emitted to subscribed active CDP sessions when a Fast Refresh update completes.

**Notes**

- As with D97486551, we reuse the `changeId` block in `HMRClient.js`, ensuring duplicate updates for the same change are not reported.

Changelog: [Internal]

Reviewed By: GijsWeterings, hoxyq

Differential Revision: D98493216

fbshipit-source-id: b0b81a210fb84873e9358aa5484038062f110103

* Bump Metro to ^0.84.3

Metro 0.84.3 adds `changeId` to HMR `update-done` messages,
which is required by the `unstable_fastRefreshComplete` CDP
event and the Fast Refresh performance marker to deduplicate
events across multiple updates for the same file change.

---------

Co-authored-by: Alex Hunt <huntie@meta.com>

Author: motiz88

package.json

@@ -98,8 +98,8 @@
     "markdownlint-cli2": "^0.17.2",
     "markdownlint-rule-relative-links": "^3.0.0",
     "memfs": "^4.38.2",
-    "metro-babel-register": "^0.83.3",
-    "metro-transform-plugins": "^0.83.3",
+    "metro-babel-register": "^0.84.3",
+    "metro-transform-plugins": "^0.84.3",
     "micromatch": "^4.0.4",
     "node-fetch": "^2.2.0",
     "nullthrows": "^1.1.1",

packages/community-cli-plugin/package.json

@@ -34,13 +34,13 @@
     "@react-native/dev-middleware": "0.85.2",
     "debug": "^4.4.0",
     "invariant": "^2.2.4",
-    "metro": "^0.84.0",
-    "metro-config": "^0.84.0",
-    "metro-core": "^0.84.0",
+    "metro": "^0.84.3",
+    "metro-config": "^0.84.3",
+    "metro-core": "^0.84.3",
     "semver": "^7.1.3"
   },
   "devDependencies": {
-    "metro-resolver": "^0.84.0"
+    "metro-resolver": "^0.84.3"
   },
   "peerDependencies": {
     "@react-native-community/cli": "*",

packages/metro-config/package.json

@@ -37,7 +37,7 @@
   "dependencies": {
     "@react-native/js-polyfills": "0.85.2",
     "@react-native/metro-babel-transformer": "0.85.2",
-    "metro-config": "^0.84.0",
-    "metro-runtime": "^0.84.0"
+    "metro-config": "^0.84.3",
+    "metro-runtime": "^0.84.3"
   }
 }

packages/react-native/Libraries/Utilities/HMRClient.js

@@ -212,6 +212,7 @@ Error: ${e.message}`;
     });
 
     let pendingUpdatesCount = 0;
+    let lastMarkerChangeId: string | null = null;
     client.on('update-start', ({isInitialUpdate}) => {
       pendingUpdatesCount++;
       currentCompileErrorMessage = null;
@@ -229,10 +230,15 @@ Error: ${e.message}`;
       }
     });
 
-    client.on('update-done', () => {
+    client.on('update-done', body => {
       pendingUpdatesCount--;
       if (pendingUpdatesCount === 0) {
         DevLoadingView.hide();
+        const changeId = body?.changeId;
+        if (changeId != null && changeId !== lastMarkerChangeId) {
+          lastMarkerChangeId = changeId;
+          emitFastRefreshCompleteEvents();
+        }
       }
     });
 
@@ -379,4 +385,25 @@ function showCompileError() {
   throw error;
 }
 
+function emitFastRefreshCompleteEvents() {
+  // Add marker entry in performance timeline
+  performance.mark('Fast Refresh - Update done', {
+    detail: {
+      devtools: {
+        dataType: 'marker',
+        color: 'primary',
+        tooltipText: 'Fast Refresh \u269b',
+      },
+    },
+  });
+
+  // Notify CDP clients via internal binding
+  if (
+    // $FlowFixMe[prop-missing] - Injected by RuntimeTarget
+    typeof globalThis.__notifyFastRefreshComplete === 'function'
+  ) {
+    globalThis.__notifyFastRefreshComplete();
+  }
+}
+
 export default HMRClient;

packages/react-native/ReactCommon/jsinspector-modern/RuntimeAgent.cpp

@@ -8,6 +8,10 @@
 #include "RuntimeAgent.h"
 #include "SessionState.h"
 
+#include <folly/dynamic.h>
+#include <jsinspector-modern/cdp/CdpJson.h>
+
+#include <chrono>
 #include <utility>
 
 namespace facebook::react::jsinspector_modern {
@@ -119,6 +123,21 @@ void RuntimeAgent::notifyBindingCalled(
               "name", bindingName)("payload", payload)));
 }
 
+void RuntimeAgent::notifyFastRefreshComplete() {
+  if (!sessionState_.isReactNativeApplicationDomainEnabled) {
+    return;
+  }
+  folly::dynamic params = folly::dynamic::object(
+      "timestamp",
+      std::chrono::duration_cast<std::chrono::milliseconds>(
+          std::chrono::system_clock::now().time_since_epoch())
+          .count());
+  frontendChannel_(
+      cdp::jsonNotification(
+          "ReactNativeApplication.unstable_fastRefreshComplete",
+          std::move(params)));
+}
+
 RuntimeAgent::ExportedState RuntimeAgent::getExportedState() {
   return {
       .delegateState = delegate_ ? delegate_->getExportedState() : nullptr,

packages/react-native/ReactCommon/jsinspector-modern/RuntimeAgent.h

@@ -72,6 +72,13 @@ class RuntimeAgent final {
 
   void notifyBindingCalled(const std::string &bindingName, const std::string &payload);
 
+  /**
+   * Called by RuntimeTarget when JS calls __notifyFastRefreshComplete().
+   * Emits a ReactNativeApplication.unstable_fastRefreshComplete CDP
+   * notification if the ReactNativeApplication domain is enabled.
+   */
+  void notifyFastRefreshComplete();
+
   struct ExportedState {
     std::unique_ptr<RuntimeAgentDelegate::ExportedState> delegateState;
   };

packages/react-native/ReactCommon/jsinspector-modern/RuntimeTarget.cpp

@@ -47,6 +47,8 @@ void RuntimeTarget::installGlobals() {
   // NOTE: RuntimeTarget::installNetworkReporterAPI is in
   // RuntimeTargetNetwork.cpp
   installNetworkReporterAPI();
+
+  installFastRefreshHandler();
 }
 
 std::shared_ptr<RuntimeAgent> RuntimeTarget::createAgent(
@@ -128,6 +130,37 @@ void RuntimeTarget::installBindingHandler(const std::string& bindingName) {
   });
 }
 
+void RuntimeTarget::installFastRefreshHandler() {
+  jsExecutor_([selfExecutor = executorFromThis()](jsi::Runtime& runtime) {
+    auto globalObj = runtime.global();
+    try {
+      auto name =
+          jsi::PropNameID::forUtf8(runtime, "__notifyFastRefreshComplete");
+      globalObj.setProperty(
+          runtime,
+          name,
+          jsi::Function::createFromHostFunction(
+              runtime,
+              name,
+              0,
+              [selfExecutor](
+                  jsi::Runtime& /*rt*/,
+                  const jsi::Value&,
+                  const jsi::Value*,
+                  size_t) -> jsi::Value {
+                selfExecutor([](auto& self) {
+                  self.agents_.forEach(
+                      [](auto& agent) { agent.notifyFastRefreshComplete(); });
+                });
+
+                return jsi::Value::undefined();
+              }));
+    } catch (jsi::JSError&) {
+      // Swallow JavaScript exceptions that occur while setting up the global.
+    }
+  });
+}
+
 void RuntimeTarget::emitDebuggerSessionCreated() {
   jsExecutor_([selfExecutor = executorFromThis()](jsi::Runtime& runtime) {
     try {

packages/react-native/ReactCommon/jsinspector-modern/RuntimeTarget.h

@@ -295,6 +295,12 @@ class JSINSPECTOR_EXPORT RuntimeTarget : public EnableExecutorFromThis<RuntimeTa
    */
   void installGlobals();
 
+  /**
+   * Installs __notifyFastRefreshComplete on the runtime's global object.
+   * When called from JS, dispatches to all connected RuntimeAgents.
+   */
+  void installFastRefreshHandler();
+
   /**
    * Install the console API handler.
    */

packages/react-native/package.json

@@ -179,8 +179,8 @@
     "hermes-compiler": "250829098.0.10",
     "invariant": "^2.2.4",
     "memoize-one": "^5.0.0",
-    "metro-runtime": "^0.84.0",
-    "metro-source-map": "^0.84.0",
+    "metro-runtime": "^0.84.3",
+    "metro-source-map": "^0.84.3",
     "nullthrows": "^1.1.1",
     "pretty-format": "^29.7.0",
     "promise": "^8.3.0",