@office-iss/react-native-win32 0.0.0-canary.288 → 0.0.0-canary.289

package/Libraries/ReactNative/AppRegistryImpl.js

@@ -0,0 +1,316 @@
+/**
+ * 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
+ * @format
+ */
+
+import type {RootTag} from '../Types/RootTagTypes';
+import type {
+  AppConfig,
+  AppParameters,
+  ComponentProvider,
+  ComponentProviderInstrumentationHook,
+  Registry,
+  RootViewStyleProvider,
+  Runnable,
+  Runnables,
+  TaskProvider,
+  WrapperComponentProvider,
+} from './AppRegistry.flow';
+
+import BugReporting from '../BugReporting/BugReporting';
+import createPerformanceLogger from '../Utilities/createPerformanceLogger';
+import infoLog from '../Utilities/infoLog';
+import SceneTracker from '../Utilities/SceneTracker';
+import {coerceDisplayMode} from './DisplayMode';
+import HeadlessJsTaskError from './HeadlessJsTaskError';
+import NativeHeadlessJsTaskSupport from './NativeHeadlessJsTaskSupport';
+import renderApplication from './renderApplication';
+import {unmountComponentAtNodeAndRemoveContainer} from './RendererProxy';
+import invariant from 'invariant';
+
+type TaskCanceller = () => void;
+type TaskCancelProvider = () => TaskCanceller;
+
+const runnables: Runnables = {};
+let runCount = 1;
+const sections: Runnables = {};
+const taskProviders: Map<string, TaskProvider> = new Map();
+const taskCancelProviders: Map<string, TaskCancelProvider> = new Map();
+let componentProviderInstrumentationHook: ComponentProviderInstrumentationHook =
+  (component: ComponentProvider) => component();
+
+let wrapperComponentProvider: ?WrapperComponentProvider;
+let rootViewStyleProvider: ?RootViewStyleProvider;
+
+export function setWrapperComponentProvider(
+  provider: WrapperComponentProvider,
+) {
+  wrapperComponentProvider = provider;
+}
+
+export function setRootViewStyleProvider(provider: RootViewStyleProvider) {
+  rootViewStyleProvider = provider;
+}
+
+export function registerConfig(config: Array<AppConfig>): void {
+  config.forEach(appConfig => {
+    if (appConfig.run) {
+      registerRunnable(appConfig.appKey, appConfig.run);
+    } else {
+      invariant(
+        appConfig.component != null,
+        'AppRegistry.registerConfig(...): Every config is expected to set ' +
+          'either `run` or `component`, but `%s` has neither.',
+        appConfig.appKey,
+      );
+      registerComponent(
+        appConfig.appKey,
+        appConfig.component,
+        appConfig.section,
+      );
+    }
+  });
+}
+
+/**
+ * Registers an app's root component.
+ *
+ * See https://reactnative.dev/docs/appregistry#registercomponent
+ */
+export function registerComponent(
+  appKey: string,
+  componentProvider: ComponentProvider,
+  section?: boolean,
+): string {
+  const scopedPerformanceLogger = createPerformanceLogger();
+  runnables[appKey] = (appParameters, displayMode) => {
+    renderApplication(
+      componentProviderInstrumentationHook(
+        componentProvider,
+        scopedPerformanceLogger,
+      ),
+      appParameters.initialProps,
+      appParameters.rootTag,
+      wrapperComponentProvider && wrapperComponentProvider(appParameters),
+      rootViewStyleProvider && rootViewStyleProvider(appParameters),
+      appParameters.fabric,
+      scopedPerformanceLogger,
+      appKey === 'LogBox', // is logbox
+      appKey,
+      displayMode,
+    );
+  };
+  if (section) {
+    sections[appKey] = runnables[appKey];
+  }
+  return appKey;
+}
+
+export function registerRunnable(appKey: string, run: Runnable): string {
+  runnables[appKey] = run;
+  return appKey;
+}
+
+export function registerSection(
+  appKey: string,
+  component: ComponentProvider,
+): void {
+  registerComponent(appKey, component, true);
+}
+
+export function getAppKeys(): $ReadOnlyArray<string> {
+  return Object.keys(runnables);
+}
+
+export function getSectionKeys(): $ReadOnlyArray<string> {
+  return Object.keys(sections);
+}
+
+export function getSections(): Runnables {
+  return {
+    ...sections,
+  };
+}
+
+export function getRunnable(appKey: string): ?Runnable {
+  return runnables[appKey];
+}
+
+export function getRegistry(): Registry {
+  return {
+    sections: getSectionKeys(),
+    runnables: {...runnables},
+  };
+}
+
+export function setComponentProviderInstrumentationHook(
+  hook: ComponentProviderInstrumentationHook,
+) {
+  componentProviderInstrumentationHook = hook;
+}
+
+/**
+ * Loads the JavaScript bundle and runs the app.
+ *
+ * See https://reactnative.dev/docs/appregistry#runapplication
+ */
+export function runApplication(
+  appKey: string,
+  appParameters: AppParameters,
+  displayMode?: number,
+): void {
+  if (appKey !== 'LogBox') {
+    const logParams = __DEV__ ? ` with ${JSON.stringify(appParameters)}` : '';
+    const msg = `Running "${appKey}"${logParams}`;
+    infoLog(msg);
+    BugReporting.addSource(
+      'AppRegistry.runApplication' + runCount++,
+      () => msg,
+    );
+  }
+  invariant(
+    runnables[appKey],
+    `"${appKey}" has not been registered. This can happen if:\n` +
+      '* Metro (the local dev server) is run from the wrong folder. ' +
+      'Check if Metro is running, stop it and restart it in the current project.\n' +
+      "* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.",
+  );
+
+  SceneTracker.setActiveScene({name: appKey});
+  runnables[appKey](appParameters, coerceDisplayMode(displayMode));
+}
+
+/**
+ * Update initial props for a surface that's already rendered
+ */
+export function setSurfaceProps(
+  appKey: string,
+  appParameters: Object,
+  displayMode?: number,
+): void {
+  if (appKey !== 'LogBox') {
+    const msg =
+      'Updating props for Surface "' +
+      appKey +
+      '" with ' +
+      JSON.stringify(appParameters);
+    infoLog(msg);
+    BugReporting.addSource(
+      'AppRegistry.setSurfaceProps' + runCount++,
+      () => msg,
+    );
+  }
+  invariant(
+    runnables[appKey],
+    `"${appKey}" has not been registered. This can happen if:\n` +
+      '* Metro (the local dev server) is run from the wrong folder. ' +
+      'Check if Metro is running, stop it and restart it in the current project.\n' +
+      "* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.",
+  );
+
+  runnables[appKey](appParameters, coerceDisplayMode(displayMode));
+}
+
+/**
+ * Stops an application when a view should be destroyed.
+ *
+ * See https://reactnative.dev/docs/appregistry#unmountapplicationcomponentatroottag
+ */
+export function unmountApplicationComponentAtRootTag(rootTag: RootTag): void {
+  unmountComponentAtNodeAndRemoveContainer(rootTag);
+}
+
+/**
+ * Register a headless task. A headless task is a bit of code that runs without a UI.
+ *
+ * See https://reactnative.dev/docs/appregistry#registerheadlesstask
+ */
+export function registerHeadlessTask(
+  taskKey: string,
+  taskProvider: TaskProvider,
+): void {
+  // $FlowFixMe[object-this-reference]
+  registerCancellableHeadlessTask(taskKey, taskProvider, () => () => {
+    /* Cancel is no-op */
+  });
+}
+
+/**
+ * Register a cancellable headless task. A headless task is a bit of code that runs without a UI.
+ *
+ * See https://reactnative.dev/docs/appregistry#registercancellableheadlesstask
+ */
+export function registerCancellableHeadlessTask(
+  taskKey: string,
+  taskProvider: TaskProvider,
+  taskCancelProvider: TaskCancelProvider,
+): void {
+  if (taskProviders.has(taskKey)) {
+    console.warn(
+      `registerHeadlessTask or registerCancellableHeadlessTask called multiple times for same key '${taskKey}'`,
+    );
+  }
+  taskProviders.set(taskKey, taskProvider);
+  taskCancelProviders.set(taskKey, taskCancelProvider);
+}
+
+/**
+ * Only called from native code. Starts a headless task.
+ *
+ * See https://reactnative.dev/docs/appregistry#startheadlesstask
+ */
+export function startHeadlessTask(
+  taskId: number,
+  taskKey: string,
+  data: any,
+): void {
+  const taskProvider = taskProviders.get(taskKey);
+  if (!taskProvider) {
+    console.warn(`No task registered for key ${taskKey}`);
+    if (NativeHeadlessJsTaskSupport) {
+      NativeHeadlessJsTaskSupport.notifyTaskFinished(taskId);
+    }
+    return;
+  }
+  taskProvider()(data)
+    .then(() => {
+      if (NativeHeadlessJsTaskSupport) {
+        NativeHeadlessJsTaskSupport.notifyTaskFinished(taskId);
+      }
+    })
+    .catch(reason => {
+      console.error(reason);
+
+      if (
+        NativeHeadlessJsTaskSupport &&
+        reason instanceof HeadlessJsTaskError
+      ) {
+        // $FlowFixMe[unused-promise]
+        NativeHeadlessJsTaskSupport.notifyTaskRetry(taskId).then(
+          retryPosted => {
+            if (!retryPosted) {
+              NativeHeadlessJsTaskSupport.notifyTaskFinished(taskId);
+            }
+          },
+        );
+      }
+    });
+}
+
+/**
+ * Only called from native code. Cancels a headless task.
+ *
+ * See https://reactnative.dev/docs/appregistry#cancelheadlesstask
+ */
+export function cancelHeadlessTask(taskId: number, taskKey: string): void {
+  const taskCancelProvider = taskCancelProviders.get(taskKey);
+  if (!taskCancelProvider) {
+    throw new Error(`No task canceller registered for key '${taskKey}'`);
+  }
+  taskCancelProvider()();
+}

package/Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstance.js

@@ -71,10 +71,7 @@ function getReadOnlyTextClass(): Class<ReadOnlyTextT> {
 }
 
 export function createPublicRootInstance(rootTag: RootTag): PublicRootInstance {
-  if (
-    ReactNativeFeatureFlags.enableAccessToHostTreeInFabric() &&
-    ReactNativeFeatureFlags.enableDOMDocumentAPI()
-  ) {
+  if (ReactNativeFeatureFlags.enableAccessToHostTreeInFabric()) {
     const ReactNativeDocumentModule = getReactNativeDocumentModule();
 
     // $FlowExpectedError[incompatible-return]

package/Libraries/StyleSheet/PlatformColorValueTypesIOS.js

@@ -17,6 +17,12 @@ export type DynamicColorIOSTuple = {
   highContrastDark?: ColorValue,
 };
 
+/**
+ * Specify color to display depending on the current system appearance settings
+ *
+ * @param tuple Colors you want to use for "light mode" and "dark mode"
+ * @platform ios
+ */
 export const DynamicColorIOS = (tuple: DynamicColorIOSTuple): ColorValue => {
   throw new Error('DynamicColorIOS is not available on this platform.');
 };

package/Libraries/StyleSheet/StyleSheet.js

@@ -10,25 +10,21 @@
 
 'use strict';
 
+import typeof * as StyleSheetExports from './StyleSheetExports';
 import type {
   ____ColorValue_Internal,
   ____DangerouslyImpreciseStyle_Internal,
   ____DangerouslyImpreciseStyleProp_Internal,
   ____ImageStyle_Internal,
   ____ImageStyleProp_Internal,
-  ____Styles_Internal,
   ____TextStyle_Internal,
   ____TextStyleProp_Internal,
   ____ViewStyle_Internal,
   ____ViewStyleProp_Internal,
 } from './StyleSheetTypes';
-
-import composeStyles from '../../src/private/styles/composeStyles';
-import flatten from './flattenStyle';
-
-const ReactNativeStyleAttributes =
-  require('../Components/View/ReactNativeStyleAttributes').default;
-const PixelRatio = require('../Utilities/PixelRatio').default;
+const StyleSheet: StyleSheetExports = (
+  require('./StyleSheetExports') as $FlowFixMe
+).default;
 
 export type {NativeColorValue} from './StyleSheetTypes';
 
@@ -166,192 +162,4 @@ export type ImageStyle = ____ImageStyle_Internal;
  */
 export type DangerouslyImpreciseStyle = ____DangerouslyImpreciseStyle_Internal;
 
-let hairlineWidth: number = PixelRatio.roundToNearestPixel(0.4);
-if (hairlineWidth === 0) {
-  hairlineWidth = 1 / PixelRatio.get();
-}
-
-const absoluteFill: {
-  +bottom: 0,
-  +left: 0,
-  +position: 'absolute',
-  +right: 0,
-  +top: 0,
-} = {
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  top: 0,
-  bottom: 0,
-};
-if (__DEV__) {
-  Object.freeze(absoluteFill);
-}
-
-/**
- * A StyleSheet is an abstraction similar to CSS StyleSheets
- *
- * Create a new StyleSheet:
- *
- * ```
- * const styles = StyleSheet.create({
- *   container: {
- *     borderRadius: 4,
- *     borderWidth: 0.5,
- *     borderColor: '#d6d7da',
- *   },
- *   title: {
- *     fontSize: 19,
- *     fontWeight: 'bold',
- *   },
- *   activeTitle: {
- *     color: 'red',
- *   },
- * });
- * ```
- *
- * Use a StyleSheet:
- *
- * ```
- * <View style={styles.container}>
- *   <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
- * </View>
- * ```
- *
- * Code quality:
- *
- *  - By moving styles away from the render function, you're making the code
- *    easier to understand.
- *  - Naming the styles is a good way to add meaning to the low level components
- *  in the render function, and encourage reuse.
- *  - In most IDEs, using `StyleSheet.create()` will offer static type checking
- *  and suggestions to help you write valid styles.
- *
- */
-export default {
-  /**
-   * This is defined as the width of a thin line on the platform. It can be
-   * used as the thickness of a border or division between two elements.
-   * Example:
-   * ```
-   *   {
-   *     borderBottomColor: '#bbb',
-   *     borderBottomWidth: StyleSheet.hairlineWidth
-   *   }
-   * ```
-   *
-   * This constant will always be a round number of pixels (so a line defined
-   * by it look crisp) and will try to match the standard width of a thin line
-   * on the underlying platform. However, you should not rely on it being a
-   * constant size, because on different platforms and screen densities its
-   * value may be calculated differently.
-   *
-   * A line with hairline width may not be visible if your simulator is downscaled.
-   */
-  hairlineWidth,
-
-  /**
-   * A very common pattern is to create overlays with position absolute and zero positioning,
-   * so `absoluteFill` can be used for convenience and to reduce duplication of these repeated
-   * styles.
-   */
-  absoluteFill: (absoluteFill: any), // TODO: This should be updated after we fix downstream Flow sites.
-
-  /**
-   * Sometimes you may want `absoluteFill` but with a couple tweaks - `absoluteFillObject` can be
-   * used to create a customized entry in a `StyleSheet`, e.g.:
-   *
-   *   const styles = StyleSheet.create({
-   *     wrapper: {
-   *       ...StyleSheet.absoluteFillObject,
-   *       top: 10,
-   *       backgroundColor: 'transparent',
-   *     },
-   *   });
-   */
-  absoluteFillObject: absoluteFill,
-
-  /**
-   * Combines two styles such that `style2` will override any styles in `style1`.
-   * If either style is falsy, the other one is returned without allocating an
-   * array, saving allocations and maintaining reference equality for
-   * PureComponent checks.
-   */
-  compose: composeStyles,
-
-  /**
-   * Flattens an array of style objects, into one aggregated style object.
-   *
-   * Example:
-   * ```
-   * const styles = StyleSheet.create({
-   *   listItem: {
-   *     flex: 1,
-   *     fontSize: 16,
-   *     color: 'white'
-   *   },
-   *   selectedListItem: {
-   *     color: 'green'
-   *   }
-   * });
-   *
-   * StyleSheet.flatten([styles.listItem, styles.selectedListItem])
-   * // returns { flex: 1, fontSize: 16, color: 'green' }
-   * ```
-   */
-  flatten,
-
-  /**
-   * WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will
-   * not be reliably announced. The whole thing might be deleted, who knows? Use
-   * at your own risk.
-   *
-   * Sets a function to use to pre-process a style property value. This is used
-   * internally to process color and transform values. You should not use this
-   * unless you really know what you are doing and have exhausted other options.
-   */
-  setStyleAttributePreprocessor(
-    property: string,
-    process: (nextProp: mixed) => mixed,
-  ) {
-    let value;
-
-    if (ReactNativeStyleAttributes[property] === true) {
-      value = {process};
-    } else if (typeof ReactNativeStyleAttributes[property] === 'object') {
-      value = {...ReactNativeStyleAttributes[property], process};
-    } else {
-      console.error(`${property} is not a valid style attribute`);
-      return;
-    }
-
-    if (
-      __DEV__ &&
-      typeof value.process === 'function' &&
-      typeof ReactNativeStyleAttributes[property]?.process === 'function' &&
-      value.process !== ReactNativeStyleAttributes[property]?.process
-    ) {
-      console.warn(`Overwriting ${property} style attribute preprocessor`);
-    }
-
-    ReactNativeStyleAttributes[property] = value;
-  },
-
-  /**
-   * An identity function for creating style sheets.
-   */
-  // $FlowFixMe[unsupported-variance-annotation]
-  create<+S: ____Styles_Internal>(obj: S): $ReadOnly<S> {
-    // TODO: This should return S as the return type. But first,
-    // we need to codemod all the callsites that are typing this
-    // return value as a number (even though it was opaque).
-    if (__DEV__) {
-      for (const key in obj) {
-        if (obj[key]) {
-          Object.freeze(obj[key]);
-        }
-      }
-    }
-    return obj;
-  },
-};
+export default StyleSheet;