@office-iss/react-native-win32 0.0.0-canary.29 → 0.0.0-canary.291

package/Libraries/Core/setUpReactDevTools.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -10,14 +10,129 @@
 
 'use strict';
 
+import type {Domain} from '../../src/private/debugging/setUpFuseboxReactDevToolsDispatcher';
+import type {Spec as NativeReactDevToolsRuntimeSettingsModuleSpec} from '../../src/private/fusebox/specs/NativeReactDevToolsRuntimeSettingsModule';
+
+if (__DEV__) {
+  if (typeof global.queueMicrotask !== 'function') {
+    console.error(
+      'queueMicrotask should exist before setting up React DevTools.',
+    );
+  }
+
+  // Keep in sync with ExceptionsManager/installConsoleErrorReporter
+  // $FlowExpectedError[prop-missing]
+  if (console._errorOriginal != null) {
+    console.error(
+      'ExceptionsManager should be set up after React DevTools to avoid console.error arguments mutation',
+    );
+  }
+}
+
 if (__DEV__) {
-  const reactDevTools = require('react-devtools-core');
-  const connectToDevTools = () => {
+  // Register dispatcher on global, which can be used later by Chrome DevTools frontend
+  require('../../src/private/debugging/setUpFuseboxReactDevToolsDispatcher');
+  const {
+    initialize,
+    connectToDevTools,
+    connectWithCustomMessagingProtocol,
+  } = require('react-devtools-core');
+
+  const reactDevToolsSettingsManager = require('../../src/private/debugging/ReactDevToolsSettingsManager');
+  const serializedHookSettings =
+    reactDevToolsSettingsManager.getGlobalHookSettings();
+  const maybeReactDevToolsRuntimeSettingsModuleModule =
+    require('../../src/private/fusebox/specs/NativeReactDevToolsRuntimeSettingsModule').default;
+
+  let hookSettings = null;
+  if (serializedHookSettings != null) {
+    try {
+      const parsedSettings = JSON.parse(serializedHookSettings);
+      hookSettings = parsedSettings;
+    } catch {
+      console.error(
+        'Failed to parse persisted React DevTools hook settings. React DevTools will be initialized with default settings.',
+      );
+    }
+  }
+
+  const {
+    isProfiling: shouldStartProfilingNow,
+    profilingSettings: initialProfilingSettings,
+  } = readReloadAndProfileConfig(maybeReactDevToolsRuntimeSettingsModuleModule);
+
+  // Install hook before React is loaded.
+  initialize(hookSettings, shouldStartProfilingNow, initialProfilingSettings);
+
+  // 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').default;
+  const resolveRNStyle = require('../StyleSheet/flattenStyle').default;
+
+  function handleReactDevToolsSettingsUpdate(settings: Object) {
+    reactDevToolsSettingsManager.setGlobalHookSettings(
+      JSON.stringify(settings),
+    );
+  }
+
+  let disconnect = null;
+  function disconnectBackendFromReactDevToolsInFuseboxIfNeeded() {
+    if (disconnect != null) {
+      disconnect();
+      disconnect = null;
+    }
+  }
+
+  function connectToReactDevToolsInFusebox(domain: Domain) {
+    const {
+      isReloadAndProfileSupported,
+      isProfiling,
+      onReloadAndProfile,
+      onReloadAndProfileFlagsReset,
+    } = readReloadAndProfileConfig(
+      maybeReactDevToolsRuntimeSettingsModuleModule,
+    );
+    disconnect = connectWithCustomMessagingProtocol({
+      onSubscribe: listener => {
+        domain.onMessage.addEventListener(listener);
+      },
+      onUnsubscribe: listener => {
+        domain.onMessage.removeEventListener(listener);
+      },
+      onMessage: (event, payload) => {
+        domain.sendMessage({event, payload});
+      },
+      nativeStyleEditorValidAttributes: Object.keys(ReactNativeStyleAttributes),
+      resolveRNStyle,
+      onSettingsUpdated: handleReactDevToolsSettingsUpdate,
+      isReloadAndProfileSupported,
+      isProfiling,
+      onReloadAndProfile,
+      onReloadAndProfileFlagsReset,
+    });
+  }
+
+  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.
+      // If there isn't an active connection, a backend may be waiting to connect,
+      // in which case it's okay to make a new one.
+      return;
+    }
+
     // not when debugging in chrome
     // TODO(t12832058) This check is broken
     if (!window.document) {
-      const AppState = require('../AppState/AppState');
-      const getDevServer = require('./Devtools/getDevServer');
+      const AppState = require('../AppState/AppState').default;
+      const getDevServer = require('./Devtools/getDevServer').default;
 
       // Don't steal the DevTools from currently active app.
       // Note: if you add any AppState subscriptions to this file,
@@ -28,32 +143,119 @@ if (__DEV__) {
       // Get hostname from development server (packager)
       const devServer = getDevServer();
       const host = devServer.bundleLoadedFromServer
-        ? devServer.url.replace(/https?:\/\//, '').split(':')[0]
+        ? devServer.url
+            .replace(/https?:\/\//, '')
+            .replace(/\/$/, '')
+            .split(':')[0]
         : 'localhost';
 
       // Read the optional global variable for backward compatibility.
       // It was added in https://github.com/facebook/react-native/commit/bf2b435322e89d0aeee8792b1c6e04656c2719a0.
       const port =
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
         window.__REACT_DEVTOOLS_PORT__ != null
           ? window.__REACT_DEVTOOLS_PORT__
           : 8097;
 
-      const WebSocket = require('../WebSocket/WebSocket');
-      const ws = new WebSocket('ws://' + host + ':' + port);
+      const WebSocket = require('../WebSocket/WebSocket').default;
+      ws = new WebSocket('ws://' + host + ':' + port);
+      ws.addEventListener('close', event => {
+        isWebSocketOpen = false;
+      });
+      ws.addEventListener('open', event => {
+        isWebSocketOpen = true;
+      });
 
-      const viewConfig = require('../Components/View/ReactNativeViewViewConfig');
-      reactDevTools.connectToDevTools({
+      const {
+        isReloadAndProfileSupported,
+        isProfiling,
+        onReloadAndProfile,
+        onReloadAndProfileFlagsReset,
+      } = readReloadAndProfileConfig(
+        maybeReactDevToolsRuntimeSettingsModuleModule,
+      );
+      connectToDevTools({
         isAppActive,
-        resolveRNStyle: require('../StyleSheet/flattenStyle'),
+        resolveRNStyle,
         nativeStyleEditorValidAttributes: Object.keys(
-          viewConfig.validAttributes.style,
+          ReactNativeStyleAttributes,
         ),
         websocket: ws,
+        onSettingsUpdated: handleReactDevToolsSettingsUpdate,
+        isReloadAndProfileSupported,
+        isProfiling,
+        onReloadAndProfile,
+        onReloadAndProfileFlagsReset,
       });
     }
+  }
+
+  // 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').default;
+  RCTNativeAppEventEmitter.addListener(
+    'RCTDevMenuShown',
+    connectToWSBasedReactDevToolsFrontend,
+  );
+  connectToWSBasedReactDevToolsFrontend(); // Try connecting once on load
+}
+
+function readReloadAndProfileConfig(
+  maybeModule: ?NativeReactDevToolsRuntimeSettingsModuleSpec,
+) {
+  const isReloadAndProfileSupported = maybeModule != null;
+  const config = maybeModule?.getReloadAndProfileConfig();
+  const isProfiling = config?.shouldReloadAndProfile === true;
+  const profilingSettings = {
+    recordChangeDescriptions: config?.recordChangeDescriptions === true,
+    recordTimeline: false,
+  };
+  const onReloadAndProfile = (recordChangeDescriptions: boolean) => {
+    if (maybeModule == null) {
+      return;
+    }
+
+    maybeModule.setReloadAndProfileConfig({
+      shouldReloadAndProfile: true,
+      recordChangeDescriptions,
+    });
+  };
+  const onReloadAndProfileFlagsReset = () => {
+    if (maybeModule == null) {
+      return;
+    }
+
+    maybeModule.setReloadAndProfileConfig({
+      shouldReloadAndProfile: false,
+      recordChangeDescriptions: false,
+    });
   };
 
-  const RCTNativeAppEventEmitter = require('../EventEmitter/RCTNativeAppEventEmitter');
-  RCTNativeAppEventEmitter.addListener('RCTDevMenuShown', connectToDevTools);
-  connectToDevTools(); // Try connecting once on load
+  return {
+    isReloadAndProfileSupported,
+    isProfiling,
+    profilingSettings,
+    onReloadAndProfile,
+    onReloadAndProfileFlagsReset,
+  };
 }

package/Libraries/Core/setUpReactRefresh.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -11,7 +11,7 @@
 'use strict';
 
 if (__DEV__) {
-  const DevSettings = require('../Utilities/DevSettings');
+  const DevSettings = require('../Utilities/DevSettings').default;
 
   if (typeof DevSettings.reload !== 'function') {
     throw new Error('Could not find the reload() implementation.');
@@ -36,14 +36,12 @@ if (__DEV__) {
     register: ReactRefreshRuntime.register,
 
     performReactRefresh() {
-      if (ReactRefreshRuntime.hasUnrecoverableErrors()) {
-        DevSettings.reload('Fast Refresh - Unrecoverable');
-        return;
-      }
       ReactRefreshRuntime.performReactRefresh();
       DevSettings.onFastRefresh();
     },
   };
 
-  (require: any).Refresh = Refresh;
+  // The metro require polyfill can not have dependencies (applies for all polyfills).
+  // Expose `Refresh` by assigning it to global to make it available in the polyfill.
+  global[(global.__METRO_GLOBAL_PREFIX__ || '') + '__ReactRefresh'] = Refresh;
 }

package/Libraries/Core/setUpRegeneratorRuntime.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -10,18 +10,37 @@
 
 'use strict';
 
+const {hasNativeConstructor} = require('../Utilities/FeatureDetection');
 const {polyfillGlobal} = require('../Utilities/PolyfillFunctions');
 
 /**
  * Set up regenerator.
  * You can use this module directly, or just require InitializeCore.
  */
-polyfillGlobal('regeneratorRuntime', () => {
-  // The require just sets up the global, so make sure when we first
-  // invoke it the global does not exist
-  delete global.regeneratorRuntime;
 
-  // regenerator-runtime/runtime exports the regeneratorRuntime object, so we
-  // can return it safely.
-  return require('regenerator-runtime/runtime'); // flowlint-line untyped-import:off
-});
+let hasNativeGenerator;
+try {
+  // If this function was lowered by regenerator-transform, it will try to
+  // access `global.regeneratorRuntime` which doesn't exist yet and will throw.
+  hasNativeGenerator = hasNativeConstructor(
+    function* () {},
+    'GeneratorFunction',
+  );
+} catch {
+  // In this case, we know generators are not provided natively.
+  hasNativeGenerator = false;
+}
+
+// If generators are provided natively, which suggests that there was no
+// regenerator-transform, then there is no need to set up the runtime.
+if (!hasNativeGenerator) {
+  polyfillGlobal('regeneratorRuntime', () => {
+    // The require just sets up the global, so make sure when we first
+    // invoke it the global does not exist
+    delete global.regeneratorRuntime;
+
+    // regenerator-runtime/runtime exports the regeneratorRuntime object, so we
+    // can return it safely.
+    return require('regenerator-runtime/runtime'); // flowlint-line untyped-import:off
+  });
+}

package/Libraries/Core/setUpSegmentFetcher.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -11,7 +11,6 @@
 'use strict';
 
 export type FetchSegmentFunction = typeof __fetchSegment;
-export type GetSegmentFunction = typeof __getSegment;
 
 /**
  * Set up SegmentFetcher.
@@ -20,14 +19,15 @@ export type GetSegmentFunction = typeof __getSegment;
 
 function __fetchSegment(
   segmentId: number,
-  options: {|
-    +otaBuildNumber: ?string,
-    +requestedModuleName?: ?string,
-  |},
+  options: $ReadOnly<{
+    otaBuildNumber: ?string,
+    requestedModuleName: string,
+    segmentHash: string,
+  }>,
   callback: (?Error) => void,
 ) {
-  const SegmentFetcher = require('./SegmentFetcher/NativeSegmentFetcher')
-    .default;
+  const SegmentFetcher =
+    require('./SegmentFetcher/NativeSegmentFetcher').default;
   SegmentFetcher.fetchSegment(
     segmentId,
     options,
@@ -42,6 +42,7 @@ function __fetchSegment(
         const error = new Error(errorObject.message);
         (error: any).code = errorObject.code; // flowlint-line unclear-type: off
         callback(error);
+        return;
       }
 
       callback(null);
@@ -50,42 +51,3 @@ function __fetchSegment(
 }
 
 global.__fetchSegment = __fetchSegment;
-
-function __getSegment(
-  segmentId: number,
-  options: {|
-    +otaBuildNumber: ?string,
-    +requestedModuleName?: ?string,
-  |},
-  callback: (?Error, ?string) => void,
-) {
-  const SegmentFetcher = require('./SegmentFetcher/NativeSegmentFetcher')
-    .default;
-
-  if (!SegmentFetcher.getSegment) {
-    throw new Error('SegmentFetcher.getSegment must be defined');
-  }
-
-  SegmentFetcher.getSegment(
-    segmentId,
-    options,
-    (
-      errorObject: ?{
-        message: string,
-        code: string,
-        ...
-      },
-      path: ?string,
-    ) => {
-      if (errorObject) {
-        const error = new Error(errorObject.message);
-        (error: any).code = errorObject.code; // flowlint-line unclear-type: off
-        callback(error);
-      }
-
-      callback(null, path);
-    },
-  );
-}
-
-global.__getSegment = __getSegment;

package/Libraries/Core/setUpTimers.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -10,25 +10,95 @@
 
 'use strict';
 
+const {polyfillGlobal} = require('../Utilities/PolyfillFunctions');
+
+if (__DEV__) {
+  if (typeof global.Promise !== 'function') {
+    console.error('Promise should exist before setting up timers.');
+  }
+}
+
 // In bridgeless mode, timers are host functions installed from cpp.
-if (!global.RN$Bridgeless) {
-  const {polyfillGlobal} = require('../Utilities/PolyfillFunctions');
+if (global.RN$Bridgeless === true) {
+  // 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,
+  );
+  polyfillGlobal(
+    'clearImmediate',
+    () => require('./Timers/immediateShim').clearImmediate,
+  );
 
+  polyfillGlobal(
+    'requestIdleCallback',
+    () =>
+      require('../../src/private/webapis/idlecallbacks/specs/NativeIdleCallbacks')
+        .default.requestIdleCallback,
+  );
+
+  polyfillGlobal(
+    'cancelIdleCallback',
+    () =>
+      require('../../src/private/webapis/idlecallbacks/specs/NativeIdleCallbacks')
+        .default.cancelIdleCallback,
+  );
+} else {
   /**
    * Set up timers.
    * You can use this module directly, or just require InitializeCore.
    */
-  const defineLazyTimer = name => {
-    polyfillGlobal(name, () => require('./Timers/JSTimers')[name]);
+  const defineLazyTimer = (
+    name:
+      | 'cancelAnimationFrame'
+      | 'cancelIdleCallback'
+      | 'clearInterval'
+      | 'clearTimeout'
+      | 'requestAnimationFrame'
+      | 'requestIdleCallback'
+      | 'setInterval'
+      | 'setTimeout',
+  ) => {
+    polyfillGlobal(name, () => require('./Timers/JSTimers').default[name]);
   };
   defineLazyTimer('setTimeout');
-  defineLazyTimer('setInterval');
-  defineLazyTimer('setImmediate');
   defineLazyTimer('clearTimeout');
+  defineLazyTimer('setInterval');
   defineLazyTimer('clearInterval');
-  defineLazyTimer('clearImmediate');
   defineLazyTimer('requestAnimationFrame');
   defineLazyTimer('cancelAnimationFrame');
   defineLazyTimer('requestIdleCallback');
   defineLazyTimer('cancelIdleCallback');
+
+  // 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.
+  polyfillGlobal(
+    'setImmediate',
+    () => require('./Timers/JSTimers').default.queueReactNativeMicrotask,
+  );
+  polyfillGlobal(
+    'clearImmediate',
+    () => require('./Timers/JSTimers').default.clearReactNativeMicrotask,
+  );
 }

package/Libraries/Core/setUpXHR.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * 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.
@@ -18,19 +18,22 @@ const {polyfillGlobal} = require('../Utilities/PolyfillFunctions');
  *
  * You can use this module directly, or just require InitializeCore.
  */
-polyfillGlobal('XMLHttpRequest', () => require('../Network/XMLHttpRequest'));
-polyfillGlobal('FormData', () => require('../Network/FormData'));
+polyfillGlobal(
+  'XMLHttpRequest',
+  () => require('../Network/XMLHttpRequest').default,
+);
+polyfillGlobal('FormData', () => require('../Network/FormData').default);
 
-polyfillGlobal('fetch', () => require('../Network/fetch').fetch); // flowlint-line untyped-import:off
-polyfillGlobal('Headers', () => require('../Network/fetch').Headers); // flowlint-line untyped-import:off
-polyfillGlobal('Request', () => require('../Network/fetch').Request); // flowlint-line untyped-import:off
-polyfillGlobal('Response', () => require('../Network/fetch').Response); // flowlint-line untyped-import:off
-polyfillGlobal('WebSocket', () => require('../WebSocket/WebSocket'));
-polyfillGlobal('Blob', () => require('../Blob/Blob'));
-polyfillGlobal('File', () => require('../Blob/File'));
-polyfillGlobal('FileReader', () => require('../Blob/FileReader'));
-polyfillGlobal('URL', () => require('../Blob/URL').URL); // flowlint-line untyped-import:off
-polyfillGlobal('URLSearchParams', () => require('../Blob/URL').URLSearchParams); // flowlint-line untyped-import:off
+polyfillGlobal('fetch', () => require('../Network/fetch').fetch);
+polyfillGlobal('Headers', () => require('../Network/fetch').Headers);
+polyfillGlobal('Request', () => require('../Network/fetch').Request);
+polyfillGlobal('Response', () => require('../Network/fetch').Response);
+polyfillGlobal('WebSocket', () => require('../WebSocket/WebSocket').default);
+polyfillGlobal('Blob', () => require('../Blob/Blob').default);
+polyfillGlobal('File', () => require('../Blob/File').default);
+polyfillGlobal('FileReader', () => require('../Blob/FileReader').default);
+polyfillGlobal('URL', () => require('../Blob/URL').URL);
+polyfillGlobal('URLSearchParams', () => require('../Blob/URL').URLSearchParams);
 polyfillGlobal(
   'AbortController',
   () => require('abort-controller/dist/abort-controller').AbortController, // flowlint-line untyped-import:off