Update Flow to 0.273 (#34274)

This version introduces "Natural Inference" which requires a couple more
type annotations to make Flow pass.

Author: kassens

.eslintrc.js

@@ -565,6 +565,7 @@ module.exports = {
     BigInt: 'readonly',
     BigInt64Array: 'readonly',
     BigUint64Array: 'readonly',
+    CacheType: 'readonly',
     Class: 'readonly',
     ClientRect: 'readonly',
     CopyInspectedElementPath: 'readonly',

package.json

@@ -74,8 +74,8 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "^3.0.1",
     "filesize": "^6.0.1",
-    "flow-bin": "^0.272",
-    "flow-remove-types": "^2.272",
+    "flow-bin": "^0.273",
+    "flow-remove-types": "^2.273",
     "flow-typed": "^4.1.1",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",

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

@@ -6705,7 +6705,7 @@ export function attach(
     if (isMostRecentlyInspectedElement(id) && !forceFullData) {
       if (!hasElementUpdatedSinceLastInspected) {
         if (path !== null) {
-          let secondaryCategory = null;
+          let secondaryCategory: 'suspendedBy' | 'hooks' | null = null;
           if (path[0] === 'hooks') {
             secondaryCategory = 'hooks';
           }

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

@@ -103,7 +103,7 @@ export function loadHookNames(
 
     let timeoutID: $FlowFixMe | null;
     let didTimeout = false;
-    let status = 'unknown';
+    let status: 'success' | 'error' | 'timeout' | 'unknown' = 'unknown';
     let resolvedHookNames: HookNames | null = null;
 
     const wake = () => {

packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js

@@ -64,7 +64,7 @@ import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/view
 
 // Prefer a cached albeit stale response to reduce download time.
 // We wouldn't want to load/parse a newer version of the source (even if one existed).
-const FETCH_OPTIONS = {cache: 'force-cache'};
+const FETCH_OPTIONS = {cache: 'force-cache' as CacheType};
 
 const MAX_SOURCE_LENGTH = 100_000_000;
 

packages/react-devtools-timeline/src/import-worker/preprocessData.js

@@ -509,7 +509,7 @@ function processTimelineEvent(
       } else if (name.startsWith('--schedule-forced-update-')) {
         const [laneBitmaskString, componentName] = name.slice(25).split('-');
 
-        const forceUpdateEvent = {
+        const forceUpdateEvent: SchedulingEvent = {
           type: 'schedule-force-update',
           lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
           componentName,
@@ -527,7 +527,7 @@ function processTimelineEvent(
       } else if (name.startsWith('--schedule-state-update-')) {
         const [laneBitmaskString, componentName] = name.slice(24).split('-');
 
-        const stateUpdateEvent = {
+        const stateUpdateEvent: SchedulingEvent = {
           type: 'schedule-state-update',
           lanes: getLanesFromTransportDecimalBitmask(laneBitmaskString),
           componentName,
@@ -578,7 +578,7 @@ function processTimelineEvent(
         // We can't know if they'll be resolved or not at this point.
         // We'll just give them a default (fake) duration width.
 
-        const suspenseEvent = {
+        const suspenseEvent: SuspenseEvent = {
           componentName,
           depth,
           duration: null,

packages/react-dom-bindings/src/client/inputValueTracking.js

@@ -140,7 +140,7 @@ export function trackHydrated(
     return false;
   }
 
-  let valueField;
+  let valueField: 'checked' | 'value';
   let expectedValue;
   if (isCheckable(node)) {
     valueField = 'checked';
@@ -150,8 +150,11 @@ export function trackHydrated(
     valueField = 'value';
     expectedValue = initialValue;
   }
-  // eslint-disable-next-line react-internal/safe-string-coercion
-  const currentValue = '' + (node[valueField]: any);
+  const currentValue =
+    // eslint-disable-next-line react-internal/safe-string-coercion
+    '' +
+    (// $FlowFixMe[prop-missing]
+    node[valueField]: any);
   node._valueTracker = trackValueOnNode(node, valueField, expectedValue);
   return currentValue !== expectedValue;
 }

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

@@ -146,7 +146,7 @@ function createSyntheticEvent(Interface: EventInterfaceType) {
  * @interface Event
  * @see http://www.w3.org/TR/DOM-Level-3-Events/
  */
-const EventInterface = {
+const EventInterface: EventInterfaceType = {
   eventPhase: 0,
   bubbles: 0,
   cancelable: 0,
@@ -442,7 +442,7 @@ function getEventModifierState(nativeEvent: {[propName: string]: mixed}) {
  * @interface KeyboardEvent
  * @see http://www.w3.org/TR/DOM-Level-3-Events/
  */
-const KeyboardEventInterface = {
+const KeyboardEventInterface: EventInterfaceType = {
   ...UIEventInterface,
   key: getEventKey,
   code: 0,
@@ -505,7 +505,7 @@ export const SyntheticKeyboardEvent: $FlowFixMe = createSyntheticEvent(
  * @interface PointerEvent
  * @see http://www.w3.org/TR/pointerevents/
  */
-const PointerEventInterface = {
+const PointerEventInterface: EventInterfaceType = {
   ...MouseEventInterface,
   pointerId: 0,
   width: 0,
@@ -526,7 +526,7 @@ export const SyntheticPointerEvent: $FlowFixMe = createSyntheticEvent(
  * @interface TouchEvent
  * @see http://www.w3.org/TR/touch-events/
  */
-const TouchEventInterface = {
+const TouchEventInterface: EventInterfaceType = {
   ...UIEventInterface,
   touches: 0,
   targetTouches: 0,
@@ -545,7 +545,7 @@ export const SyntheticTouchEvent: $FlowFixMe =
  * @see http://www.w3.org/TR/2009/WD-css3-transitions-20090320/#transition-events-
  * @see https://developer.mozilla.org/en-US/docs/Web/API/TransitionEvent
  */
-const TransitionEventInterface = {
+const TransitionEventInterface: EventInterfaceType = {
   ...EventInterface,
   propertyName: 0,
   elapsedTime: 0,
@@ -559,7 +559,7 @@ export const SyntheticTransitionEvent: $FlowFixMe = createSyntheticEvent(
  * @interface WheelEvent
  * @see http://www.w3.org/TR/DOM-Level-3-Events/
  */
-const WheelEventInterface = {
+const WheelEventInterface: EventInterfaceType = {
   ...MouseEventInterface,
   deltaX(event: {[propName: string]: mixed}) {
     return 'deltaX' in event
@@ -594,7 +594,7 @@ const WheelEventInterface = {
 export const SyntheticWheelEvent: $FlowFixMe =
   createSyntheticEvent(WheelEventInterface);
 
-const ToggleEventInterface = {
+const ToggleEventInterface: EventInterfaceType = {
   ...EventInterface,
   newState: 0,
   oldState: 0,

packages/react-dom-bindings/src/shared/ReactDOMFormActions.js

@@ -31,7 +31,7 @@ export type FormStatus = FormStatusPending | FormStatusNotPending;
 
 // Since the "not pending" value is always the same, we can reuse the
 // same object across all transitions.
-const sharedNotPendingObject = {
+const sharedNotPendingObject: FormStatusNotPending = {
   pending: false,
   data: null,
   method: null,

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

@@ -207,6 +207,7 @@ const ResponderTouchHistoryStore = {
       touchHistory.numberActiveTouches = nativeEvent.touches.length;
       if (touchHistory.numberActiveTouches === 1) {
         touchHistory.indexOfSingleActiveTouch =
+          // $FlowFixMe[incompatible-type] might be null according to type
           nativeEvent.touches[0].identifier;
       }
     } else if (isEndish(topLevelType)) {