Update to Flow from 0.97 to 0.122 (#25204)

* flow 0.122
* update ReactModel type

package.json

@@ -63,7 +63,7 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "1.2.0",
     "filesize": "^6.0.1",
-    "flow-bin": "0.97",
+    "flow-bin": "^0.122",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "^20200517.0.0",

packages/jest-react/src/internalAct.js

@@ -28,6 +28,8 @@ export function act<T>(scope: () => Thenable<T> | T): Thenable<T> {
       'This version of `act` requires a special mock build of Scheduler.',
     );
   }
+
+  // $FlowFixMe: _isMockFunction doesn't exist on function
   if (setTimeout._isMockFunction !== true) {
     throw Error(
       "This version of `act` requires Jest's timer mocks " +

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -683,6 +683,7 @@ function handleRenderFunctionError(error: any): void {
   // TODO: refactor this if we ever combine the devtools and debug tools packages
   wrapperError.name = 'ReactDebugToolsRenderError';
   // this stage-4 proposal is not supported by all environments yet.
+  // $FlowFixMe Flow doesn't have this type yet.
   wrapperError.cause = error;
   throw wrapperError;
 }

packages/react-devtools-shared/src/backend/StyleX/utils.js

@@ -92,7 +92,9 @@ function getPropertyValueForStyleName(styleName: string): string | null {
     ]: any): CSSStyleSheet);
     // $FlowFixMe Flow doesn't konw about these properties
     const rules = styleSheet.rules || styleSheet.cssRules;
+    // $FlowFixMe `rules` is mixed
     for (let ruleIndex = 0; ruleIndex < rules.length; ruleIndex++) {
+      // $FlowFixMe `rules` is mixed
       const rule = rules[ruleIndex];
       // $FlowFixMe Flow doesn't konw about these properties
       const {cssText, selectorText, style} = rule;

packages/react-devtools-shared/src/backend/renderer.js

@@ -124,7 +124,7 @@ import type {
 } from 'react-devtools-shared/src/types';
 
 type getDisplayNameForFiberType = (fiber: Fiber) => string | null;
-type getTypeSymbolType = (type: any) => Symbol | number;
+type getTypeSymbolType = (type: any) => symbol | number;
 
 type ReactPriorityLevelsType = {|
   ImmediatePriority: number,
@@ -382,13 +382,14 @@ export function getInternalReactConstants(
   // End of copied code.
   // **********************************************************
 
-  function getTypeSymbol(type: any): Symbol | number {
+  function getTypeSymbol(type: any): symbol | number {
     const symbolOrNumber =
       typeof type === 'object' && type !== null ? type.$$typeof : type;
 
     // $FlowFixMe Flow doesn't know about typeof "symbol"
     return typeof symbolOrNumber === 'symbol'
-      ? symbolOrNumber.toString()
+      ? // $FlowFixMe `toString()` doesn't match the type signature?
+        symbolOrNumber.toString()
       : symbolOrNumber;
   }
 

packages/react-devtools-shared/src/backend/types.js

@@ -84,7 +84,7 @@ export type GetFiberIDForNative = (
 export type FindNativeNodesForFiberID = (id: number) => ?Array<NativeType>;
 
 export type ReactProviderType<T> = {
-  $$typeof: Symbol | number,
+  $$typeof: symbol | number,
   _context: ReactContext<T>,
   ...
 };

packages/react-devtools-shared/src/devtools/views/Button.js

@@ -28,6 +28,7 @@ export default function Button({
   ...rest
 }: Props) {
   let button = (
+    // $FlowFixMe unsafe spread
     <button
       className={`${styles.Button} ${className}`}
       data-testname={testName}

packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/AutoSizeInput.js

@@ -42,6 +42,7 @@ export default function AutoSizeInput({
   const isEmpty = value === '' || value === '""';
 
   return (
+    // $FlowFixMe unsafe rest spread
     <input
       className={[styles.Input, className].join(' ')}
       data-testname={testName}

packages/react-devtools-shared/src/devtools/views/Components/reach-ui/menu-button.js

@@ -19,6 +19,7 @@ import useThemeStyles from '../../useThemeStyles';
 const MenuList = ({children, ...props}: {children: React$Node, ...}) => {
   const style = useThemeStyles();
   return (
+    // $FlowFixMe unsafe spread
     <ReachMenuList style={style} {...props}>
       {children}
     </ReachMenuList>

packages/react-devtools-shared/src/devtools/views/Components/reach-ui/tooltip.js

@@ -23,6 +23,7 @@ const Tooltip = ({
 }) => {
   const style = useThemeStyles();
   return (
+    // $FlowFixMe unsafe spread
     <ReachTooltip
       className={`${tooltipStyles.Tooltip} ${className}`}
       style={style}

packages/react-devtools-shared/src/hydration.js

@@ -396,7 +396,7 @@ export function hydrate(
       parent[last] = undefined;
     } else {
       // Replace the string keys with Symbols so they're non-enumerable.
-      const replaced: {[key: Symbol]: boolean | string, ...} = {};
+      const replaced: {[key: symbol]: boolean | string, ...} = {};
       replaced[meta.inspectable] = !!value.inspectable;
       replaced[meta.inspected] = false;
       replaced[meta.name] = value.name;

packages/react-devtools-shared/src/registerDevToolsEventLogger.js

@@ -31,6 +31,7 @@ export function registerDevToolsEventLogger(
         let metadata = null;
         if (event.metadata != null) {
           metadata = event.metadata;
+          // $FlowFixMe: metadata is not writable and nullable
           delete event.metadata;
         }
         loggingIFrame.contentWindow.postMessage(
@@ -42,7 +43,8 @@ export function registerDevToolsEventLogger(
               version: process.env.DEVTOOLS_VERSION,
               metadata: metadata !== null ? JSON.stringify(metadata) : '',
               ...(fetchAdditionalContext != null
-                ? await fetchAdditionalContext()
+                ? // $FlowFixMe
+                  await fetchAdditionalContext()
                 : {}),
             },
           },

packages/react-devtools-shared/src/utils.js

@@ -67,8 +67,8 @@ const encodedStringCache: LRUCache<string, Array<number>> = new LRU({
 });
 
 export function alphaSortKeys(
-  a: string | number | Symbol,
-  b: string | number | Symbol,
+  a: string | number | symbol,
+  b: string | number | symbol,
 ): number {
   if (a.toString() > b.toString()) {
     return 1;
@@ -81,7 +81,7 @@ export function alphaSortKeys(
 
 export function getAllEnumerableKeys(
   obj: Object,
-): Set<string | number | Symbol> {
+): Set<string | number | symbol> {
   const keys = new Set();
   let current = obj;
   while (current != null) {

packages/react-dom/src/events/SyntheticEvent.js

@@ -166,7 +166,9 @@ let lastMouseEvent;
 function updateMouseMovementPolyfillState(event) {
   if (event !== lastMouseEvent) {
     if (lastMouseEvent && event.type === 'mousemove') {
+      // $FlowFixMe assuming this is a number
       lastMovementX = event.screenX - lastMouseEvent.screenX;
+      // $FlowFixMe assuming this is a number
       lastMovementY = event.screenY - lastMouseEvent.screenY;
     } else {
       lastMovementX = 0;
@@ -367,15 +369,20 @@ function getEventKey(nativeEvent) {
 
     // FireFox implements `key` but returns `MozPrintableKey` for all
     // printable characters (normalized to `Unidentified`), ignore it.
-    const key = normalizeKey[nativeEvent.key] || nativeEvent.key;
+    const key =
+      // $FlowFixMe unable to index with a `mixed` value
+      normalizeKey[nativeEvent.key] || nativeEvent.key;
     if (key !== 'Unidentified') {
       return key;
     }
   }
 
   // Browser does not implement `key`, polyfill as much of it as we can.
   if (nativeEvent.type === 'keypress') {
-    const charCode = getEventCharCode(nativeEvent);
+    const charCode = getEventCharCode(
+      // $FlowFixMe unable to narrow to `KeyboardEvent`
+      nativeEvent,
+    );
 
     // The enter-key is technically both printable and non-printable and can
     // thus be captured by `keypress`, no other non-printable key should.
@@ -384,6 +391,7 @@ function getEventKey(nativeEvent) {
   if (nativeEvent.type === 'keydown' || nativeEvent.type === 'keyup') {
     // While user keyboard layout determines the actual meaning of each
     // `keyCode` value, almost all function keys have a universal value.
+    // $FlowFixMe unable to index with a `mixed` value
     return translateToKey[nativeEvent.keyCode] || 'Unidentified';
   }
   return '';
@@ -441,7 +449,10 @@ const KeyboardEventInterface = {
     // KeyPress is deprecated, but its replacement is not yet final and not
     // implemented in any major browser. Only KeyPress has charCode.
     if (event.type === 'keypress') {
-      return getEventCharCode(event);
+      return getEventCharCode(
+        // $FlowFixMe unable to narrow to `KeyboardEvent`
+        event,
+      );
     }
     return 0;
   },
@@ -462,7 +473,10 @@ const KeyboardEventInterface = {
     // `which` is an alias for either `keyCode` or `charCode` depending on the
     // type of the event.
     if (event.type === 'keypress') {
-      return getEventCharCode(event);
+      return getEventCharCode(
+        // $FlowFixMe unable to narrow to `KeyboardEvent`
+        event,
+      );
     }
     if (event.type === 'keydown' || event.type === 'keyup') {
       return event.keyCode;
@@ -538,18 +552,21 @@ const WheelEventInterface = {
       ? event.deltaX
       : // Fallback to `wheelDeltaX` for Webkit and normalize (right is positive).
       'wheelDeltaX' in event
-      ? -event.wheelDeltaX
+      ? // $FlowFixMe assuming this is a number
+        -event.wheelDeltaX
       : 0;
   },
   deltaY(event) {
     return 'deltaY' in event
       ? event.deltaY
       : // Fallback to `wheelDeltaY` for Webkit and normalize (down is positive).
       'wheelDeltaY' in event
-      ? -event.wheelDeltaY
+      ? // $FlowFixMe assuming this is a number
+        -event.wheelDeltaY
       : // Fallback to `wheelDelta` for IE<9 and normalize (down is positive).
       'wheelDelta' in event
-      ? -event.wheelDelta
+      ? // $FlowFixMe assuming this is a number
+        -event.wheelDelta
       : 0;
   },
   deltaZ: 0,

packages/react-dom/src/server/ReactDOMFizzServerBrowser.js

@@ -57,10 +57,10 @@ function renderToReadableStream(
       const stream: ReactDOMServerReadableStream = (new ReadableStream(
         {
           type: 'bytes',
-          pull(controller) {
+          pull(controller): ?Promise<void> {
             startFlowing(request, controller);
           },
-          cancel(reason) {
+          cancel(reason): ?Promise<void> {
             abort(request);
           },
         },

packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js

@@ -50,7 +50,7 @@ function prerender(
       const stream = new ReadableStream(
         {
           type: 'bytes',
-          pull(controller) {
+          pull(controller): ?Promise<void> {
             startFlowing(request, controller);
           },
         },

packages/react-fetch/src/ReactFetchNode.js

@@ -43,6 +43,7 @@ function nodeFetch(
     // TODO: cherry-pick supported user-passed options.
   };
   const nodeImpl = protocol === 'https:' ? https : http;
+  // $FlowFixMe: node flow type has `port` as a number
   const request = nodeImpl.request(nodeOptions, response => {
     // TODO: support redirects.
     onResolve(new Response(response));

packages/react-native-renderer/src/legacy-events/accumulateInto.js

@@ -40,9 +40,11 @@ function accumulateInto<T>(
   // certain that x is an Array (x could be a string with concat method).
   if (isArray(current)) {
     if (isArray(next)) {
+      // $FlowFixMe `isArray` does not ensure array is mutable
       current.push.apply(current, next);
       return current;
     }
+    // $FlowFixMe `isArray` does not ensure array is mutable
     current.push(next);
     return current;
   }

packages/react-noop-renderer/src/ReactNoopFlightServer.js

@@ -53,7 +53,7 @@ const ReactNoopFlightServer = ReactFlightServer({
   },
   resolveModuleMetaData(
     config: void,
-    reference: {$$typeof: Symbol, value: any},
+    reference: {$$typeof: symbol, value: any},
   ) {
     return saveModule(reference.value);
   },

packages/react-reconciler/src/ReactChildFiber.new.js

@@ -80,6 +80,7 @@ if (__DEV__) {
       );
     }
 
+    // $FlowFixMe unable to narrow type from mixed to writable object
     child._store.validated = true;
 
     const componentName = getComponentNameFromFiber(returnFiber) || 'Component';

packages/react-reconciler/src/ReactChildFiber.old.js

@@ -80,6 +80,7 @@ if (__DEV__) {
       );
     }
 
+    // $FlowFixMe unable to narrow type from mixed to writable object
     child._store.validated = true;
 
     const componentName = getComponentNameFromFiber(returnFiber) || 'Component';

packages/react-reconciler/src/ReactFiberCommitWork.new.js

@@ -296,6 +296,7 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
         }
       }
     } else {
+      // $FlowFixMe unable to narrow type to RefObject
       ref.current = null;
     }
   }
@@ -1522,6 +1523,7 @@ function commitAttachRef(finishedWork: Fiber) {
         }
       }
 
+      // $FlowFixMe unable to narrow type to the non-function case
       ref.current = instanceToUse;
     }
   }
@@ -1542,6 +1544,7 @@ function commitDetachRef(current: Fiber) {
         currentRef(null);
       }
     } else {
+      // $FlowFixMe unable to narrow type to the non-function case
       currentRef.current = null;
     }
   }

packages/react-reconciler/src/ReactFiberCommitWork.old.js

@@ -296,6 +296,7 @@ function safelyDetachRef(current: Fiber, nearestMountedAncestor: Fiber | null) {
         }
       }
     } else {
+      // $FlowFixMe unable to narrow type to RefObject
       ref.current = null;
     }
   }
@@ -1522,6 +1523,7 @@ function commitAttachRef(finishedWork: Fiber) {
         }
       }
 
+      // $FlowFixMe unable to narrow type to the non-function case
       ref.current = instanceToUse;
     }
   }
@@ -1542,6 +1544,7 @@ function commitDetachRef(current: Fiber) {
         currentRef(null);
       }
     } else {
+      // $FlowFixMe unable to narrow type to the non-function case
       currentRef.current = null;
     }
   }

packages/react-reconciler/src/ReactFiberHotReloading.new.js

@@ -222,6 +222,7 @@ export function markFailedErrorBoundaryForHotReloading(fiber: Fiber) {
       return;
     }
     if (failedBoundaries === null) {
+      // $FlowFixMe Flow got confused by the feature check above.
       failedBoundaries = new WeakSet();
     }
     failedBoundaries.add(fiber);

packages/react-reconciler/src/ReactFiberHotReloading.old.js

@@ -222,6 +222,7 @@ export function markFailedErrorBoundaryForHotReloading(fiber: Fiber) {
       return;
     }
     if (failedBoundaries === null) {
+      // $FlowFixMe Flow got confused by the feature check above.
       failedBoundaries = new WeakSet();
     }
     failedBoundaries.add(fiber);

packages/react-reconciler/src/ReactTestSelectors.js

@@ -39,7 +39,7 @@ if (typeof Symbol === 'function' && Symbol.for) {
   TEXT_TYPE = symbolFor('selector.text');
 }
 
-type Type = Symbol | number;
+type Type = symbol | number;
 
 type ComponentSelector = {|
   $$typeof: Type,