react-native-windows 0.74.12 → 0.75.0-preview.2

package/Libraries/Core/Devtools/loadBundleFromServer.windows.js

@@ -0,0 +1,153 @@
+/**
+ * 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-local
+ * @format
+ * @oncall react_native
+ */
+
+import Networking from '../../Network/RCTNetworking';
+import DevLoadingView from '../../Utilities/DevLoadingView';
+import HMRClient from '../../Utilities/HMRClient';
+import getDevServer from './getDevServer';
+
+declare var global: {globalEvalWithSourceUrl?: (string, string) => mixed, ...};
+
+let pendingRequests = 0;
+
+const cachedPromisesByUrl = new Map<string, Promise<void>>();
+
+function asyncRequest(
+  url: string,
+): Promise<{body: string, headers: {[string]: string}}> {
+  let id = null;
+  let responseText = null;
+  let headers = null;
+  let dataListener;
+  let completeListener;
+  let responseListener;
+  let incrementalDataListener;
+  return new Promise<{body: string, headers: {[string]: string}}>(
+    (resolve, reject) => {
+      dataListener = Networking.addListener(
+        'didReceiveNetworkData',
+        ([requestId, response]) => {
+          if (requestId === id) {
+            responseText = response;
+          }
+        },
+      );
+      incrementalDataListener = Networking.addListener(
+        'didReceiveNetworkIncrementalData',
+        ([requestId, data]) => {
+          if (requestId === id) {
+            if (responseText != null) {
+              responseText += data;
+            } else {
+              responseText = data;
+            }
+          }
+        },
+      );
+      responseListener = Networking.addListener(
+        'didReceiveNetworkResponse',
+        ([requestId, status, responseHeaders]) => {
+          if (requestId === id) {
+            headers = responseHeaders;
+          }
+        },
+      );
+      completeListener = Networking.addListener(
+        'didCompleteNetworkResponse',
+        ([requestId, error]) => {
+          if (requestId === id) {
+            if (error) {
+              reject(error);
+            } else {
+              //$FlowFixMe[incompatible-call]
+              resolve({body: responseText, headers});
+            }
+          }
+        },
+      );
+      Networking.sendRequest(
+        'GET',
+        'asyncRequest',
+        url,
+        {},
+        '',
+        'text',
+        true,
+        0,
+        requestId => {
+          id = requestId;
+        },
+        true,
+      );
+    },
+  ).finally(() => {
+    dataListener?.remove();
+    completeListener?.remove();
+    responseListener?.remove();
+    incrementalDataListener?.remove();
+  });
+}
+
+function buildUrlForBundle(bundlePathAndQuery: string) {
+  const {url: serverUrl} = getDevServer();
+  return (
+    serverUrl.replace(/\/+$/, '') + '/' + bundlePathAndQuery.replace(/^\/+/, '')
+  );
+}
+
+module.exports = function (bundlePathAndQuery: string): Promise<void> {
+  const requestUrl = buildUrlForBundle(bundlePathAndQuery);
+  let loadPromise = cachedPromisesByUrl.get(requestUrl);
+
+  if (loadPromise) {
+    return loadPromise;
+  }
+  DevLoadingView.showMessage('Downloading...', 'load');
+  ++pendingRequests;
+
+  loadPromise = asyncRequest(requestUrl)
+    .then<void>(({body, headers}) => {
+      if (
+        headers['Content-Type'] != null &&
+        headers['Content-Type'].indexOf('application/json') >= 0
+      ) {
+        // Errors are returned as JSON.
+        throw new Error(
+          JSON.parse(body).message ||
+            `Unknown error fetching '${bundlePathAndQuery}'`,
+        );
+      }
+
+      HMRClient.registerBundle(requestUrl);
+
+      // Some engines do not support `sourceURL` as a comment. We expose a
+      // `globalEvalWithSourceUrl` function to handle updates in that case.
+      if (global.globalEvalWithSourceUrl) {
+        global.globalEvalWithSourceUrl(body, requestUrl);
+      } else {
+        // [Windows #12704 - CodeQL patch]
+        // eslint-disable-next-line no-eval
+        eval(body); // CodeQL [js/eval-usage] Debug only. Developer inner loop.
+      }
+    })
+    .catch<void>(e => {
+      cachedPromisesByUrl.delete(requestUrl);
+      throw e;
+    })
+    .finally(() => {
+      if (!--pendingRequests) {
+        DevLoadingView.hide();
+      }
+    });
+
+  cachedPromisesByUrl.set(requestUrl, loadPromise);
+  return loadPromise;
+};

package/Libraries/Core/Devtools/parseErrorStack.js

@@ -47,11 +47,11 @@ function parseErrorStack(errorStack?: string): Array<StackFrame> {
   const parsedStack = Array.isArray(errorStack)
     ? errorStack
     : global.HermesInternal
-    ? convertHermesStack(parseHermesStack(errorStack))
-    : stacktraceParser.parse(errorStack).map((frame): StackFrame => ({
-        ...frame,
-        column: frame.column != null ? frame.column - 1 : null,
-      }));
+      ? convertHermesStack(parseHermesStack(errorStack))
+      : stacktraceParser.parse(errorStack).map((frame): StackFrame => ({
+          ...frame,
+          column: frame.column != null ? frame.column - 1 : null,
+        }));
 
   return parsedStack;
 }

package/Libraries/Core/Devtools/parseHermesStack.js

@@ -72,6 +72,7 @@ const RE_FRAME =
 // Capturing groups:
 // 1. count of skipped frames
 const RE_SKIPPED = /^ {4}... skipping (\d+) frames$/;
+const RE_COMPONENT_NO_STACK = /^ {4}at .*$/;
 
 function isInternalBytecodeSourceUrl(sourceUrl: string): boolean {
   // See https://github.com/facebook/hermes/blob/3332fa020cae0bab751f648db7c94e1d687eeec7/lib/VM/Runtime.cpp#L1100
@@ -88,25 +89,25 @@ function parseLine(line: string): ?HermesStackEntry {
         asFrame[2] === 'native'
           ? {type: 'NATIVE'}
           : asFrame[3] === 'address at '
-          ? isInternalBytecodeSourceUrl(asFrame[4])
-            ? {
-                type: 'INTERNAL_BYTECODE',
-                sourceUrl: asFrame[4],
-                line1Based: Number.parseInt(asFrame[5], 10),
-                virtualOffset0Based: Number.parseInt(asFrame[6], 10),
-              }
+            ? isInternalBytecodeSourceUrl(asFrame[4])
+              ? {
+                  type: 'INTERNAL_BYTECODE',
+                  sourceUrl: asFrame[4],
+                  line1Based: Number.parseInt(asFrame[5], 10),
+                  virtualOffset0Based: Number.parseInt(asFrame[6], 10),
+                }
+              : {
+                  type: 'BYTECODE',
+                  sourceUrl: asFrame[4],
+                  line1Based: Number.parseInt(asFrame[5], 10),
+                  virtualOffset0Based: Number.parseInt(asFrame[6], 10),
+                }
             : {
-                type: 'BYTECODE',
+                type: 'SOURCE',
                 sourceUrl: asFrame[4],
                 line1Based: Number.parseInt(asFrame[5], 10),
-                virtualOffset0Based: Number.parseInt(asFrame[6], 10),
-              }
-          : {
-              type: 'SOURCE',
-              sourceUrl: asFrame[4],
-              line1Based: Number.parseInt(asFrame[5], 10),
-              column1Based: Number.parseInt(asFrame[6], 10),
-            },
+                column1Based: Number.parseInt(asFrame[6], 10),
+              },
     };
   }
   const asSkipped = line.match(RE_SKIPPED);
@@ -132,6 +133,11 @@ module.exports = function parseHermesStack(stack: string): HermesParsedStack {
       entries.push(entry);
       continue;
     }
+    if (RE_COMPONENT_NO_STACK.test(line)) {
+      // Skip component stacks without source location.
+      // TODO: This will not be displayed, not sure how to handle it.
+      continue;
+    }
     // No match - we're still in the message
     lastMessageLine = i;
     entries = [];

package/Libraries/Core/ErrorHandlers.js

@@ -0,0 +1,116 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow strict
+ */
+
+'use strict';
+
+import type {ExtendedError} from './ExtendedError';
+
+import {SyntheticError, handleException} from './ExceptionsManager';
+
+type ErrorInfo = {
+  +componentStack?: ?string,
+  // $FlowFixMe[unclear-type] unknown props and state.
+  +errorBoundary?: ?React$Component<any, any>,
+};
+
+export function onUncaughtError(errorValue: mixed, errorInfo: ErrorInfo): void {
+  let error;
+
+  // Typically, `errorValue` should be an error. However, other values such as
+  // strings (or even null) are sometimes thrown.
+  if (errorValue instanceof Error) {
+    /* $FlowFixMe[class-object-subtyping] added when improving typing for
+     * this parameters */
+    error = (errorValue: ExtendedError);
+  } else if (typeof errorValue === 'string') {
+    /* $FlowFixMe[class-object-subtyping] added when improving typing for
+     * this parameters */
+    error = (new SyntheticError(errorValue): ExtendedError);
+  } else {
+    /* $FlowFixMe[class-object-subtyping] added when improving typing for
+     * this parameters */
+    error = (new SyntheticError('Unspecified error'): ExtendedError);
+  }
+  try {
+    // $FlowFixMe[incompatible-use] this is in try/catch.
+    error.componentStack = errorInfo.componentStack;
+    error.isComponentError = true;
+  } catch {
+    // Ignored.
+  }
+
+  // Uncaught errors are fatal.
+  handleException(error, true);
+}
+
+export function onCaughtError(errorValue: mixed, errorInfo: ErrorInfo): void {
+  let error;
+
+  // Typically, `errorValue` should be an error. However, other values such as
+  // strings (or even null) are sometimes thrown.
+  if (errorValue instanceof Error) {
+    /* $FlowFixMe[class-object-subtyping] added when improving typing for
+     * this parameters */
+    error = (errorValue: ExtendedError);
+  } else if (typeof errorValue === 'string') {
+    /* $FlowFixMe[class-object-subtyping] added when improving typing for
+     * this parameters */
+    error = (new SyntheticError(errorValue): ExtendedError);
+  } else {
+    /* $FlowFixMe[class-object-subtyping] added when improving typing for
+     * this parameters */
+    error = (new SyntheticError('Unspecified error'): ExtendedError);
+  }
+  try {
+    // $FlowFixMe[incompatible-use] this is in try/catch.
+    error.componentStack = errorInfo.componentStack;
+    error.isComponentError = true;
+  } catch {
+    // Ignored.
+  }
+
+  // Caught errors are not fatal.
+  handleException(error, false);
+}
+
+export function onRecoverableError(
+  errorValue: mixed,
+  errorInfo: ErrorInfo,
+): void {
+  let error;
+
+  // Typically, `errorValue` should be an error. However, other values such as
+  // strings (or even null) are sometimes thrown.
+  if (errorValue instanceof Error) {
+    /* $FlowFixMe[class-object-subtyping] added when improving typing for
+     * this parameters */
+    error = (errorValue: ExtendedError);
+  } else if (typeof errorValue === 'string') {
+    /* $FlowFixMe[class-object-subtyping] added when improving typing for
+     * this parameters */
+    error = (new SyntheticError(errorValue): ExtendedError);
+  } else {
+    /* $FlowFixMe[class-object-subtyping] added when improving typing for
+     * this parameters */
+    error = (new SyntheticError('Unspecified error'): ExtendedError);
+  }
+  try {
+    // $FlowFixMe[incompatible-use] this is in try/catch.
+    error.componentStack = errorInfo.componentStack;
+    error.isComponentError = true;
+  } catch {
+    // Ignored.
+  }
+
+  // Recoverable errors should only be warnings.
+  // This will make it a soft error in LogBox.
+  // TODO: improve the logging for recoverable errors in prod.
+  console.warn(error);
+}

package/Libraries/Core/ExceptionsManager.js

@@ -126,8 +126,8 @@ function reportException(
 }
 
 declare var console: {
-  error: typeof console.error,
-  _errorOriginal: typeof console.error,
+  error: (...data: $ReadOnlyArray<mixed>) => void,
+  _errorOriginal: (...data: $ReadOnlyArray<mixed>) => void,
   reportErrorsAsExceptions: boolean,
   ...
 };

package/Libraries/Core/ReactNativeVersion.js

@@ -15,9 +15,9 @@ const version: $ReadOnly<{
   prerelease: string | null,
 }> = {
   major: 0,
-  minor: 74,
-  patch: 3,
-  prerelease: null,
+  minor: 75,
+  patch: 0,
+  prerelease: 'rc.3',
 };
 
 module.exports = {version};

package/Libraries/Core/setUpDeveloperTools.js

@@ -42,7 +42,9 @@ if (__DEV__) {
   if (!Platform.isTesting) {
     const HMRClient = require('../Utilities/HMRClient');
 
-    if (console._isPolyfilled) {
+    if (global.__FUSEBOX_HAS_FULL_CONSOLE_SUPPORT__) {
+      HMRClient.unstable_notifyFuseboxConsoleEnabled();
+    } else if (console._isPolyfilled) {
       // We assume full control over the console and send JavaScript logs to Metro.
       [
         'trace',

package/Libraries/Core/setUpPerformance.js

@@ -8,8 +8,8 @@
  * @format
  */
 
-import NativePerformance from '../../src/private/webapis/performance/NativePerformance';
 import Performance from '../../src/private/webapis/performance/Performance';
+import NativePerformance from '../../src/private/webapis/performance/specs/NativePerformance';
 
 // In case if the native implementation of the Performance API is available, use it,
 // otherwise fall back to the legacy/default one, which only defines 'Performance.now()'
@@ -19,11 +19,13 @@ if (NativePerformance) {
 } else {
   if (!global.performance) {
     // $FlowExpectedError[cannot-write]
-    global.performance = ({
-      now: function () {
+    global.performance = {
+      mark: () => {},
+      measure: () => {},
+      now: () => {
         const performanceNow = global.nativePerformanceNow || Date.now;
         return performanceNow();
       },
-    }: {now?: () => number});
+    };
   }
 }

package/Libraries/Core/setUpReactDevTools.js

@@ -10,12 +10,52 @@
 
 'use strict';
 
+import type {Domain} from '../../src/private/fusebox/setUpFuseboxReactDevToolsDispatcher';
+
 if (__DEV__) {
-  let isWebSocketOpen = false;
-  let ws = null;
+  // Register dispatcher on global, which can be used later by Chrome DevTools frontend
+  require('../../src/private/fusebox/setUpFuseboxReactDevToolsDispatcher');
 
+  // Install hook before React is loaded.
   const reactDevTools = require('react-devtools-core');
-  const connectToDevTools = () => {
+  // This should be defined in DEV, otherwise error is expected.
+  const fuseboxReactDevToolsDispatcher =
+    global.__FUSEBOX_REACT_DEVTOOLS_DISPATCHER__;
+  const reactDevToolsFuseboxGlobalBindingName =
+    fuseboxReactDevToolsDispatcher.BINDING_NAME;
+
+  const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
+  const devToolsSettingsManager = require('../DevToolsSettings/DevToolsSettingsManager');
+  const resolveRNStyle = require('../StyleSheet/flattenStyle');
+
+  let disconnect = null;
+  function disconnectBackendFromReactDevToolsInFuseboxIfNeeded() {
+    if (disconnect != null) {
+      disconnect();
+      disconnect = null;
+    }
+  }
+
+  function connectToReactDevToolsInFusebox(domain: Domain) {
+    disconnect = reactDevTools.connectWithCustomMessagingProtocol({
+      onSubscribe: listener => {
+        domain.onMessage.addEventListener(listener);
+      },
+      onUnsubscribe: listener => {
+        domain.onMessage.removeEventListener(listener);
+      },
+      onMessage: (event, payload) => {
+        domain.sendMessage({event, payload});
+      },
+      settingsManager: devToolsSettingsManager,
+      nativeStyleEditorValidAttributes: Object.keys(ReactNativeStyleAttributes),
+      resolveRNStyle,
+    });
+  }
+
+  let isWebSocketOpen = false;
+  let ws = null;
+  function connectToWSBasedReactDevToolsFrontend() {
     if (ws !== null && isWebSocketOpen) {
       // If the DevTools backend is already connected, don't recreate the WebSocket.
       // This would break the connection.
@@ -61,12 +101,9 @@ if (__DEV__) {
         isWebSocketOpen = true;
       });
 
-      const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
-      const devToolsSettingsManager = require('../DevToolsSettings/DevToolsSettingsManager');
-
       reactDevTools.connectToDevTools({
         isAppActive,
-        resolveRNStyle: require('../StyleSheet/flattenStyle'),
+        resolveRNStyle,
         nativeStyleEditorValidAttributes: Object.keys(
           ReactNativeStyleAttributes,
         ),
@@ -74,9 +111,32 @@ if (__DEV__) {
         devToolsSettingsManager,
       });
     }
-  };
+  }
+
+  // 1. If React DevTools has already been opened and initialized in Fusebox, bindings survive reloads
+  if (global[reactDevToolsFuseboxGlobalBindingName] != null) {
+    disconnectBackendFromReactDevToolsInFuseboxIfNeeded();
+    const domain =
+      fuseboxReactDevToolsDispatcher.initializeDomain('react-devtools');
+    connectToReactDevToolsInFusebox(domain);
+  }
+
+  // 2. If React DevTools panel in Fusebox was opened for the first time after the runtime has been created
+  // 2. OR if React DevTools frontend was re-initialized: Chrome DevTools was closed and then re-opened
+  global.__FUSEBOX_REACT_DEVTOOLS_DISPATCHER__.onDomainInitialization.addEventListener(
+    (domain: Domain) => {
+      if (domain.name === 'react-devtools') {
+        disconnectBackendFromReactDevToolsInFuseboxIfNeeded();
+        connectToReactDevToolsInFusebox(domain);
+      }
+    },
+  );
 
+  // 3. Fallback to attempting to connect WS-based RDT frontend
   const RCTNativeAppEventEmitter = require('../EventEmitter/RCTNativeAppEventEmitter');
-  RCTNativeAppEventEmitter.addListener('RCTDevMenuShown', connectToDevTools);
-  connectToDevTools(); // Try connecting once on load
+  RCTNativeAppEventEmitter.addListener(
+    'RCTDevMenuShown',
+    connectToWSBasedReactDevToolsFrontend,
+  );
+  connectToWSBasedReactDevToolsFrontend(); // Try connecting once on load
 }

package/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) {
   /**
@@ -54,15 +48,49 @@ if (global.RN$Bridgeless !== true) {
   defineLazyTimer('cancelAnimationFrame');
   defineLazyTimer('requestIdleCallback');
   defineLazyTimer('cancelIdleCallback');
+} else if (
+  // TODO remove this condition when bridgeless == modern scheduler everywhere.
+  NativeReactNativeFeatureFlags != null &&
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- false positive due to `use` prefix
+  ReactNativeFeatureFlags.useModernRuntimeScheduler()
+) {
+  polyfillGlobal(
+    'requestIdleCallback',
+    () =>
+      require('../../src/private/webapis/idlecallbacks/specs/NativeIdleCallbacks')
+        .default.requestIdleCallback,
+  );
+
+  polyfillGlobal(
+    'cancelIdleCallback',
+    () =>
+      require('../../src/private/webapis/idlecallbacks/specs/NativeIdleCallbacks')
+        .default.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',
+    () =>
+      require('../../src/private/webapis/microtasks/specs/NativeMicrotasks')
+        .default.queueMicrotask,
+  );
+
+  // We shim the immediate APIs via `queueMicrotask` to maintain the backward
+  // compatibility.
   polyfillGlobal(
     'setImmediate',
     () => require('./Timers/immediateShim').setImmediate,
@@ -72,6 +100,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 +120,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,
-  );
-}

package/Libraries/Debugging/DebuggingOverlayRegistry.js

@@ -62,9 +62,9 @@ class DebuggingOverlayRegistry {
   constructor() {
     if (reactDevToolsHook?.reactDevtoolsAgent != null) {
       this.#onReactDevToolsAgentAttached(reactDevToolsHook.reactDevtoolsAgent);
-      return;
     }
 
+    // There could be cases when frontend is disconnected and then connected again for the same React Native runtime.
     reactDevToolsHook?.on?.(
       'react-devtools',
       this.#onReactDevToolsAgentAttached,