fix(runtime): avoid HMRClient.disable startup race (#38)

Fixed HMR (Hot Module Replacement) initialization race condition by adding retry logic with delays when disabling HMR, ensuring Harness waits for HMR to be ready before proceeding.

Author: bheemreddy-samsara

.nx/version-plans/version-plan-1766944841373.md

@@ -0,0 +1,5 @@
+---
+'@react-native-harness/runtime': prerelease
+---
+
+Fixed HMR (Hot Module Replacement) initialization race condition by adding retry logic with delays when disabling HMR, ensuring Harness waits for HMR to be ready before proceeding.

packages/runtime/src/__tests__/initialize.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import { disableHMRWhenReady } from '../disableHMRWhenReady.js';
+
+describe('initialize', () => {
+  it('retries HMRClient.disable until setup is ready', async () => {
+    vi.useFakeTimers();
+
+    const disable = vi
+      .fn()
+      .mockImplementationOnce(() => {
+        throw new Error('Expected HMRClient.setup() call at startup.');
+      })
+      .mockImplementationOnce(() => {
+        // ok
+      });
+
+    const promise = disableHMRWhenReady(disable, 50);
+    await vi.runAllTimersAsync();
+    await promise;
+
+    expect(disable).toHaveBeenCalledTimes(2);
+  });
+});

packages/runtime/src/disableHMRWhenReady.ts

@@ -0,0 +1,27 @@
+export function disableHMRWhenReady(
+  disable: () => void,
+  retriesLeft: number,
+  retryDelay = 10
+) {
+  return new Promise<void>((resolve, reject) => {
+    function attempt(remaining: number) {
+      try {
+        disable();
+        resolve();
+      } catch (error) {
+        if (
+          remaining > 0 &&
+          error instanceof Error &&
+          error.message.includes('Expected HMRClient.setup() call at startup.')
+        ) {
+          setTimeout(() => attempt(remaining - 1), retryDelay);
+          return;
+        }
+
+        reject(error);
+      }
+    }
+
+    attempt(retriesLeft);
+  });
+}

packages/runtime/src/initialize.ts

@@ -1,5 +1,6 @@
 import { getDeviceDescriptor } from './client/getDeviceDescriptor.js';
 import { getClient } from './client/index.js';
+import { disableHMRWhenReady } from './disableHMRWhenReady.js';
 import { setupJestMock } from './jest-mock.js';
 
 // Polyfill for EventTarget
@@ -21,11 +22,10 @@ const HMRClient =
 
 // Wait for HMRClient to be initialized
 setTimeout(() => {
-  HMRClient.disable();
-
-  // Initialize the React Native Harness
-  void getClient().then((client) =>
-    client.rpc.reportReady(getDeviceDescriptor())
+  void disableHMRWhenReady(() => HMRClient.disable(), 50).then(() =>
+    getClient().then((client) =>
+      client.rpc.reportReady(getDeviceDescriptor())
+    )
   );
 });