Flow upgrade to 0.153

- method unbinding is no longer supported in Flow for soundness, this added a bunch of suppressions
- Flow now prevents objects to be supertypes of interfaces/classes

ghstack-source-id: d7749cb
Pull Request resolved: #25412

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.152.0",
+    "flow-bin": "^0.153.0",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "^20200517.0.0",

packages/jest-react/src/internalAct.js

@@ -72,6 +72,7 @@ export function act<T>(scope: () => Thenable<T> | T): Thenable<T> {
     if (
       typeof result === 'object' &&
       result !== null &&
+      // $FlowFixMe[method-unbinding]
       typeof result.then === 'function'
     ) {
       const thenableResult: Thenable<T> = (result: any);

packages/react-cache/src/ReactCacheOld.js

@@ -13,7 +13,9 @@ import * as React from 'react';
 
 import {createLRU} from './LRU';
 
-type Suspender = {then(resolve: () => mixed, reject: () => mixed): mixed, ...};
+interface Suspender {
+  then(resolve: () => mixed, reject: () => mixed): mixed;
+}
 
 type PendingResult = {
   status: 0,
@@ -120,6 +122,7 @@ function accessResult<I, K, V>(
     );
     const newResult: PendingResult = {
       status: Pending,
+      // $FlowFixMe[method-unbinding]
       value: thenable,
     };
     // $FlowFixMe[escaped-generic] discovered when updating Flow

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

@@ -11,10 +11,13 @@ import {__PERFORMANCE_PROFILE__} from './constants';
 
 const supportsUserTiming =
   typeof performance !== 'undefined' &&
+  // $FlowFixMe[method-unbinding]
   typeof performance.mark === 'function' &&
+  // $FlowFixMe[method-unbinding]
   typeof performance.clearMarks === 'function';
 
 const supportsPerformanceNow =
+  // $FlowFixMe[method-unbinding]
   typeof performance !== 'undefined' && typeof performance.now === 'function';
 
 function mark(markName: string): void {

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

@@ -44,7 +44,9 @@ let performanceTarget: Performance | null = null;
 // If performance exists and supports the subset of the User Timing API that we require.
 let supportsUserTiming =
   typeof performance !== 'undefined' &&
+  // $FlowFixMe[method-unbinding]
   typeof performance.mark === 'function' &&
+  // $FlowFixMe[method-unbinding]
   typeof performance.clearMarks === 'function';
 
 let supportsUserTimingV3 = false;
@@ -76,6 +78,7 @@ if (supportsUserTimingV3) {
 
 // Some environments (e.g. React Native / Hermes) don't support the performance API yet.
 const getCurrentTime =
+  // $FlowFixMe[method-unbinding]
   typeof performance === 'object' && typeof performance.now === 'function'
     ? () => performance.now()
     : () => Date.now();

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

@@ -151,6 +151,7 @@ function getFiberFlags(fiber: Fiber): number {
 
 // Some environments (e.g. React Native / Hermes) don't support the performance API yet.
 const getCurrentTime =
+  // $FlowFixMe[method-unbinding]
   typeof performance === 'object' && typeof performance.now === 'function'
     ? () => performance.now()
     : () => Date.now();

packages/react-devtools-shared/src/backend/views/Highlighter/index.js

@@ -115,6 +115,7 @@ export default function setupHighlighter(
 
     if (nodes != null && nodes[0] != null) {
       const node = nodes[0];
+      // $FlowFixMe[method-unbinding]
       if (scrollIntoView && typeof node.scrollIntoView === 'function') {
         // If the node isn't visible show it before highlighting it.
         // We may want to reconsider this; it might be a little disruptive.

packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js

@@ -26,6 +26,7 @@ const REMEASUREMENT_AFTER_DURATION = 250;
 
 // Some environments (e.g. React Native / Hermes) don't support the performance API yet.
 const getCurrentTime =
+  // $FlowFixMe[method-unbinding]
   typeof performance === 'object' && typeof performance.now === 'function'
     ? () => performance.now()
     : () => Date.now();

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

@@ -7,15 +7,14 @@
  * @flow
  */
 
-export type Rect = {
-  bottom: number,
-  height: number,
-  left: number,
-  right: number,
-  top: number,
-  width: number,
-  ...
-};
+export interface Rect {
+  bottom: number;
+  height: number;
+  left: number;
+  right: number;
+  top: number;
+  width: number;
+}
 
 // Get the window object for the document that a node belongs to,
 // or return null if it cannot be found (node not attached to DOM,

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

@@ -26,7 +26,9 @@ import {createContext} from 'react';
 
 export type {Thenable};
 
-type Suspender = {then(resolve: () => mixed, reject: () => mixed): mixed, ...};
+interface Suspender {
+  then(resolve: () => mixed, reject: () => mixed): mixed;
+}
 
 type PendingResult = {
   status: 0,
@@ -124,6 +126,7 @@ function accessResult<Input, Key, Value>(
     );
     const newResult: PendingResult = {
       status: Pending,
+      // $FlowFixMe[method-unbinding]
       value: thenable,
     };
     entriesForResource.set(key, newResult);

packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js

@@ -33,6 +33,7 @@ import type {Element} from 'react-devtools-shared/src/devtools/views/Components/
 import type {Element as ReactElement} from 'react';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
 
+// $FlowFixMe[method-unbinding]
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 
 type Type = 'props' | 'state' | 'context' | 'hooks';

packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js

@@ -67,6 +67,7 @@ export default function SidebarSelectedFiberInfo(_: Props): React.Node {
     const selectedElement = selectedListItemRef.current;
     if (
       selectedElement !== null &&
+      // $FlowFixMe[method-unbinding]
       typeof selectedElement.scrollIntoView === 'function'
     ) {
       selectedElement.scrollIntoView({block: 'nearest', inline: 'nearest'});

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

@@ -14,6 +14,7 @@ import isArray from 'react-devtools-shared/src/isArray';
 
 import type {HooksTree} from 'react-debug-tools/src/ReactDebugHooks';
 
+// $FlowFixMe[method-unbinding]
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 
 export function alphaSortEntries(

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

@@ -61,6 +61,7 @@ export function installHook(target: any): DevToolsHook | null {
         // it happens *outside* of the renderer injection. See `checkDCE` below.
       }
 
+      // $FlowFixMe[method-unbinding]
       const toString = Function.prototype.toString;
       if (renderer.Mount && renderer.Mount._renderNewRootComponent) {
         // React DOM Stack
@@ -147,6 +148,7 @@ export function installHook(target: any): DevToolsHook | null {
     // This runs for production versions of React.
     // Needs to be super safe.
     try {
+      // $FlowFixMe[method-unbinding]
       const toString = Function.prototype.toString;
       const code = toString.call(fn);
 

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

@@ -56,6 +56,7 @@ import isArray from './isArray';
 import type {ComponentFilter, ElementType} from './types';
 import type {LRUCache} from 'react-devtools-shared/src/types';
 
+// $FlowFixMe[method-unbinding]
 const hasOwnProperty = Object.prototype.hasOwnProperty;
 
 const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
@@ -598,6 +599,7 @@ export function getDataType(data: Object): DataType {
       } else if (data.constructor && data.constructor.name === 'RegExp') {
         return 'regexp';
       } else {
+        // $FlowFixMe[method-unbinding]
         const toStringValue = Object.prototype.toString.call(data);
         if (toStringValue === '[object Date]') {
           return 'date';
@@ -612,6 +614,7 @@ export function getDataType(data: Object): DataType {
       return 'symbol';
     case 'undefined':
       if (
+        // $FlowFixMe[method-unbinding]
         Object.prototype.toString.call(data) === '[object HTMLAllCollection]'
       ) {
         return 'html_all_collection';

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

@@ -968,8 +968,11 @@ function preprocessFlamechart(rawData: TimelineEvent[]): Flamechart {
   const profile = parsedData.profiles[0]; // TODO: Choose the main CPU thread only
 
   const speedscopeFlamechart = new SpeedscopeFlamechart({
+    // $FlowFixMe[method-unbinding]
     getTotalWeight: profile.getTotalWeight.bind(profile),
+    // $FlowFixMe[method-unbinding]
     forEachCall: profile.forEachCall.bind(profile),
+    // $FlowFixMe[method-unbinding]
     formatValue: profile.formatValue.bind(profile),
     getColorBucketForFrame: () => 0,
   });

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

@@ -455,6 +455,7 @@ export function createElement(
     if (namespaceURI === HTML_NAMESPACE) {
       if (
         !isCustomComponentTag &&
+        // $FlowFixMe[method-unbinding]
         Object.prototype.toString.call(domElement) ===
           '[object HTMLUnknownElement]' &&
         !hasOwnProperty.call(warnedUnknownTags, type)

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

@@ -61,14 +61,17 @@ export function precacheFiberNode(
 }
 
 export function markContainerAsRoot(hostRoot: Fiber, node: Container): void {
+  // $FlowFixMe[prop-missing]
   node[internalContainerInstanceKey] = hostRoot;
 }
 
 export function unmarkContainerAsRoot(node: Container): void {
+  // $FlowFixMe[prop-missing]
   node[internalContainerInstanceKey] = null;
 }
 
 export function isContainerMarkedAsRoot(node: Container): boolean {
+  // $FlowFixMe[prop-missing]
   return !!node[internalContainerInstanceKey];
 }
 
@@ -132,6 +135,7 @@ export function getClosestInstanceFromNode(targetNode: Node): null | Fiber {
           // have had an internalInstanceKey on it.
           // Let's get the fiber associated with the SuspenseComponent
           // as the deepest instance.
+          // $FlowFixMe[prop-missing]
           const targetSuspenseInst = suspenseInstance[internalInstanceKey];
           if (targetSuspenseInst) {
             return targetSuspenseInst;

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

@@ -117,12 +117,14 @@ export type EventTargetChildElement = {
   ...
 };
 export type Container =
-  | (Element & {_reactRootContainer?: FiberRoot, ...})
-  | (Document & {_reactRootContainer?: FiberRoot, ...})
-  | (DocumentFragment & {_reactRootContainer?: FiberRoot, ...});
+  | interface extends Element {_reactRootContainer?: FiberRoot}
+  | interface extends Document {_reactRootContainer?: FiberRoot}
+  | interface extends DocumentFragment {_reactRootContainer?: FiberRoot};
 export type Instance = Element;
 export type TextInstance = Text;
-export type SuspenseInstance = Comment & {_reactRetry?: () => void, ...};
+export interface SuspenseInstance extends Comment {
+  _reactRetry?: () => void;
+}
 export type HydratableInstance = Instance | TextInstance | SuspenseInstance;
 export type PublicInstance = Element | Text;
 type HostContextDev = {
@@ -644,6 +646,7 @@ export function hideInstance(instance: Instance): void {
   // pass host context to this method?
   instance = ((instance: any): HTMLElement);
   const style = instance.style;
+  // $FlowFixMe[method-unbinding]
   if (typeof style.setProperty === 'function') {
     style.setProperty('display', 'none', 'important');
   } else {
@@ -679,6 +682,7 @@ export function clearContainer(container: Container): void {
     ((container: any): Element).textContent = '';
   } else if (container.nodeType === DOCUMENT_NODE) {
     if (container.documentElement) {
+      // $FlowFixMe[incompatible-call]
       container.removeChild(container.documentElement);
     }
   }
@@ -1267,6 +1271,7 @@ export function setFocusIfFocusable(node: Instance): boolean {
   const element = ((node: any): HTMLElement);
   try {
     element.addEventListener('focus', handleFocus);
+    // $FlowFixMe[method-unbinding]
     (element.focus || HTMLElement.prototype.focus).call(element);
   } finally {
     element.removeEventListener('focus', handleFocus);
@@ -1349,11 +1354,13 @@ export const supportsResources = true;
 export {isHostResourceType};
 function isHostResourceInstance(instance: Instance | Container): boolean {
   if (instance.nodeType === ELEMENT_NODE) {
+    // $FlowFixMe[prop-missing] Flow doesn't understand `nodeType` test.
     switch (instance.tagName.toLowerCase()) {
       case 'link': {
         const rel = ((instance: any): HTMLLinkElement).rel;
         return (
           rel === 'preload' ||
+          // $FlowFixMe[prop-missing] Flow doesn't understand `nodeType` test.
           (rel === 'stylesheet' && instance.hasAttribute('data-rprec'))
         );
       }

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

@@ -73,11 +73,7 @@ function updateOptions(
   propValue: any,
   setDefaultSelected: boolean,
 ) {
-  type IndexableHTMLOptionsCollection = HTMLOptionsCollection & {
-    [key: number]: HTMLOptionElement,
-    ...,
-  };
-  const options: IndexableHTMLOptionsCollection = node.options;
+  const options: HTMLOptionsCollection = node.options;
 
   if (multiple) {
     const selectedValues = (propValue: Array<string>);

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

@@ -14,8 +14,9 @@ type ValueTracker = {
   setValue(value: string): void,
   stopTracking(): void,
 };
-type WrapperState = {_valueTracker?: ?ValueTracker, ...};
-type ElementWithValueTracker = HTMLInputElement & WrapperState;
+interface ElementWithValueTracker extends HTMLInputElement {
+  _valueTracker?: ?ValueTracker;
+}
 
 function isCheckable(elem: HTMLInputElement) {
   const type = elem.type;

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

@@ -761,7 +761,7 @@ export function accumulateSinglePhaseListeners(
     // current instance fiber. In which case, we should clear all existing
     // listeners.
     if (enableCreateEventHandleAPI && nativeEvent.type === 'beforeblur') {
-      // $FlowFixMe: internal field
+      // $FlowFixMe[prop-missing] internal field
       const detachedInterceptFiber = nativeEvent._detachedInterceptFiber;
       if (
         detachedInterceptFiber !== null &&

packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js

@@ -7,11 +7,10 @@
  * @flow
  */
 
-export type Destination = {
-  push(chunk: string | null): boolean,
-  destroy(error: Error): mixed,
-  ...
-};
+export interface Destination {
+  push(chunk: string | null): boolean;
+  destroy(error: Error): mixed;
+}
 
 export type PrecomputedChunk = string;
 export type Chunk = string;

packages/react-dom/src/client/ReactDOMLegacy.js

@@ -145,6 +145,7 @@ function legacyCreateRootFromDOMContainer(
 
     const rootContainerElement =
       container.nodeType === COMMENT_NODE ? container.parentNode : container;
+    // $FlowFixMe[incompatible-call]
     listenToAllSupportedEvents(rootContainerElement);
 
     flushSync();
@@ -179,6 +180,7 @@ function legacyCreateRootFromDOMContainer(
 
     const rootContainerElement =
       container.nodeType === COMMENT_NODE ? container.parentNode : container;
+    // $FlowFixMe[incompatible-call]
     listenToAllSupportedEvents(rootContainerElement);
 
     // Initial mount should not be batched.
@@ -435,6 +437,8 @@ export function unmountComponentAtNode(container: Container): boolean {
       const isContainerReactRoot =
         container.nodeType === ELEMENT_NODE &&
         isValidContainerLegacy(container.parentNode) &&
+        // $FlowFixMe[prop-missing]
+        // $FlowFixMe[incompatible-use]
         !!container.parentNode._reactRootContainer;
 
       if (hasNonRootReactChild) {

packages/react-native-renderer/src/ReactFabricEventEmitter.js

@@ -115,6 +115,7 @@ export function dispatchEvent(
     // Note that extracted events are *not* emitted,
     // only events that have a 1:1 mapping with a native event, at least for now.
     const event = {eventName: topLevelType, nativeEvent};
+    // $FlowFixMe[class-object-subtyping] found when upgrading Flow
     RawEventEmitter.emit(topLevelType, event);
     RawEventEmitter.emit('*', event);
 

packages/react-native-renderer/src/ReactFabricHostConfig.js

@@ -316,6 +316,7 @@ class ReactFabricHostComponent {
 }
 
 // eslint-disable-next-line no-unused-expressions
+// $FlowFixMe[class-object-subtyping] found when upgrading Flow
 (ReactFabricHostComponent.prototype: $ReadOnly<{...NativeMethods, ...}>);
 
 export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMutation';