Update to Flow from 0.97 to 0.122 (#25204)

* flow 0.122
* update ReactModel type

Author: kassens

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}