[flow] Upgrade Flow to 0.245.2 (#30919)

## Summary This PR bumps Flow all the way to the latest 0.245.2. Most of the suppressions comes from Flow v0.239.0's change to include undefined in the return of `Array.pop`. I also enabled `react.custom_jsx_typing=true` and added custom jsx typing to match the old behavior that `React.createElement` is effectively any typed. This is necessary since various builtin components like `React.Fragment` is actually symbol in the React repo instead of `React.AbstractComponent<...>`. It can be made more accurate by customizing the `React$CustomJSXFactory` type, but I will leave it to the React team to decide. ## How did you test this change? `yarn flow` for all the renderers
facebook · Sep 9, 2024 · e210d08 · e210d08
1 parent 984ea11
commit e210d08
Show file tree

Hide file tree

Showing 24 changed files with 142 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -63,8 +63,8 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "^3.0.1",
     "filesize": "^6.0.1",
-    "flow-bin": "^0.235.0",
-    "flow-remove-types": "^2.235.0",
+    "flow-bin": "^0.245.2",
+    "flow-remove-types": "^2.245.2",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "^20230206.0.0",

diff --git a/packages/internal-test-utils/internalAct.js b/packages/internal-test-utils/internalAct.js
@@ -163,6 +163,7 @@ export async function act<T>(scope: () => Thenable<T>): Thenable<T> {
       throw thrownError;
     }
 
+    // $FlowFixMe[incompatible-return]
     return result;
   } finally {
     const depth = actingUpdatesScopeDepth;
@@ -271,6 +272,7 @@ export async function serverAct<T>(scope: () => Thenable<T>): Thenable<T> {
       throw thrownError;
     }
 
+    // $FlowFixMe[incompatible-return]
     return result;
   } finally {
     if (typeof process === 'object') {

diff --git a/packages/react-client/src/ReactFlightReplyClient.js b/packages/react-client/src/ReactFlightReplyClient.js
@@ -554,6 +554,7 @@ export function processReply(
         const prefix = formFieldPrefix + refId + '_';
         // $FlowFixMe[prop-missing]: FormData has forEach.
         value.forEach((originalValue: string | File, originalKey: string) => {
+          // $FlowFixMe[incompatible-call]
           data.append(prefix + originalKey, originalValue);
         });
         return serializeFormDataReference(refId);
@@ -925,6 +926,7 @@ function defaultEncodeFormAction(
     const prefixedData = new FormData();
     // $FlowFixMe[prop-missing]
     encodedFormData.forEach((value: string | File, key: string) => {
+      // $FlowFixMe[incompatible-call]
       prefixedData.append('$ACTION_' + identifierPrefix + ':' + key, value);
     });
     data = prefixedData;
@@ -1153,6 +1155,7 @@ const FunctionBind = Function.prototype.bind;
 const ArraySlice = Array.prototype.slice;
 function bind(this: Function): Function {
   // $FlowFixMe[unsupported-syntax]
+  // $FlowFixMe[prop-missing]
   const newFn = FunctionBind.apply(this, arguments);
   const reference = knownServerReferences.get(this);
   if (reference) {

diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js
@@ -1033,6 +1033,7 @@ function buildTree(
         }
         // Pop back the stack as many steps as were not common.
         for (let j = prevStack.length - 1; j > commonSteps; j--) {
+          // $FlowFixMe[incompatible-type]
           levelChildren = stackOfChildren.pop();
         }
       }

diff --git a/packages/react-devtools-shared/src/backend/profilingHooks.js b/packages/react-devtools-shared/src/backend/profilingHooks.js
@@ -274,16 +274,19 @@ export function createProfilingHooks({
     }
 
     const top = currentReactMeasuresStack.pop();
+    // $FlowFixMe[incompatible-type]
     if (top.type !== type) {
       console.error(
         'Unexpected type "%s" completed at %sms before "%s" completed.',
         type,
         currentTime,
+        // $FlowFixMe[incompatible-use]
         top.type,
       );
     }
 
     // $FlowFixMe[cannot-write] This property should not be writable outside of this function.
+    // $FlowFixMe[incompatible-use]
     top.duration = currentTime - top.timestamp;
 
     if (currentTimelineData) {

diff --git a/packages/react-devtools-shared/src/backend/utils.js b/packages/react-devtools-shared/src/backend/utils.js
@@ -299,10 +299,12 @@ export function formatConsoleArgumentsToSingleString(
     if (args.length) {
       const REGEXP = /(%?)(%([jds]))/g;
 
+      // $FlowFixMe[incompatible-call]
       formatted = formatted.replace(REGEXP, (match, escaped, ptn, flag) => {
         let arg = args.shift();
         switch (flag) {
           case 's':
+            // $FlowFixMe[unsafe-addition]
             arg += '';
             break;
           case 'd':

diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
@@ -194,6 +194,7 @@ export default class Overlay {
 
     while (this.rects.length > elements.length) {
       const rect = this.rects.pop();
+      // $FlowFixMe[incompatible-use]
       rect.remove();
     }
     if (elements.length === 0) {

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitTreeBuilder.js
@@ -391,18 +391,22 @@ const __printTree = (commitTree: CommitTree) => {
       const id = queue.shift();
       const depth = queue.shift();
 
+      // $FlowFixMe[incompatible-call]
       const node = nodes.get(id);
       if (node == null) {
+        // $FlowFixMe[incompatible-type]
         throw Error(`Could not find node with id "${id}" in commit tree`);
       }
 
       console.log(
+        // $FlowFixMe[incompatible-call]
         `${'•'.repeat(depth)}${node.id}:${node.displayName || ''} ${
           node.key ? `key:"${node.key}"` : ''
         } (${node.treeBaseDuration})`,
       );
 
       node.children.forEach(childID => {
+        // $FlowFixMe[unsafe-addition]
         queue.push(childID, depth + 1);
       });
     }

diff --git a/packages/react-devtools-shared/src/devtools/views/utils.js b/packages/react-devtools-shared/src/devtools/views/utils.js
@@ -142,10 +142,14 @@ export function serializeHooksForCopy(hooks: HooksTree | null): string {
     const current = queue.pop();
 
     // These aren't meaningful
+    // $FlowFixMe[incompatible-use]
     delete current.id;
+    // $FlowFixMe[incompatible-use]
     delete current.isStateEditable;
 
+    // $FlowFixMe[incompatible-use]
     if (current.subHooks.length > 0) {
+      // $FlowFixMe[incompatible-use]
       queue.push(...current.subHooks);
     }
   }

diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js
@@ -532,6 +532,7 @@ export function installHook(target: any): DevToolsHook | null {
       const startStackFrame = openModuleRangesStack.pop();
       const stopStackFrame = getTopStackFrameString(error);
       if (stopStackFrame !== null) {
+        // $FlowFixMe[incompatible-call]
         moduleRanges.push([startStackFrame, stopStackFrame]);
       }
     }

diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js
@@ -475,6 +475,7 @@ export function parseElementDisplayNameFromBackend(
       if (displayName.indexOf('(') >= 0) {
         const matches = displayName.match(/[^()]+/g);
         if (matches != null) {
+          // $FlowFixMe[incompatible-type]
           displayName = matches.pop();
           hocDisplayNames = matches;
         }
@@ -485,6 +486,7 @@ export function parseElementDisplayNameFromBackend(
   }
 
   return {
+    // $FlowFixMe[incompatible-return]
     formattedDisplayName: displayName,
     hocDisplayNames,
     compiledWithForget: false,

diff --git a/packages/react-devtools-timeline/src/import-worker/preprocessData.js b/packages/react-devtools-timeline/src/import-worker/preprocessData.js
@@ -202,6 +202,7 @@ function markWorkCompleted(
     );
   }
 
+  // $FlowFixMe[incompatible-use]
   const {measure, startTime} = stack.pop();
   if (!measure) {
     console.error('Could not find matching measure for type "%s".', type);

diff --git a/packages/react-dom/src/client/ReactDOMClientFB.js b/packages/react-dom/src/client/ReactDOMClientFB.js
@@ -100,6 +100,7 @@ function flushSyncFromReconciler<R>(fn: (() => R) | void): R | void {
       );
     }
   }
+  // $FlowFixMe[incompatible-call]
   return flushSyncWithoutWarningIfAlreadyRendering(fn);
 }
 

diff --git a/packages/react-native-renderer/src/ReactNativeTypes.js b/packages/react-native-renderer/src/ReactNativeTypes.js
@@ -233,8 +233,8 @@ export type ReactNativeType = {
   ): ?ElementRef<ElementType>,
   unmountComponentAtNode(containerTag: number): void,
   unmountComponentAtNodeAndRemoveContainer(containerTag: number): void,
-  unstable_batchedUpdates: <T>(fn: (T) => void, bookkeeping: T) => void,
-  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: SecretInternalsType,
+  +unstable_batchedUpdates: <T>(fn: (T) => void, bookkeeping: T) => void,
+  +__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: SecretInternalsType,
   ...
 };
 

diff --git a/packages/react-server-dom-esm/src/ReactFlightESMReferences.js b/packages/react-server-dom-esm/src/ReactFlightESMReferences.js
@@ -49,7 +49,7 @@ const FunctionBind = Function.prototype.bind;
 // $FlowFixMe[method-unbinding]
 const ArraySlice = Array.prototype.slice;
 function bind(this: ServerReference<any>): any {
-  // $FlowFixMe[unsupported-syntax]
+  // $FlowFixMe[prop-missing]
   const newFn = FunctionBind.apply(this, arguments);
   if (this.$$typeof === SERVER_REFERENCE_TAG) {
     if (__DEV__) {

diff --git a/packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js b/packages/react-server-dom-turbopack/src/ReactFlightTurbopackReferences.js
@@ -63,7 +63,7 @@ const FunctionBind = Function.prototype.bind;
 // $FlowFixMe[method-unbinding]
 const ArraySlice = Array.prototype.slice;
 function bind(this: ServerReference<any>): any {
-  // $FlowFixMe[unsupported-syntax]
+  // $FlowFixMe[prop-missing]
   const newFn = FunctionBind.apply(this, arguments);
   if (this.$$typeof === SERVER_REFERENCE_TAG) {
     if (__DEV__) {

diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js
@@ -64,6 +64,7 @@ const FunctionBind = Function.prototype.bind;
 const ArraySlice = Array.prototype.slice;
 function bind(this: ServerReference<any>): any {
   // $FlowFixMe[unsupported-syntax]
+  // $FlowFixMe[prop-missing]
   const newFn = FunctionBind.apply(this, arguments);
   if (this.$$typeof === SERVER_REFERENCE_TAG) {
     if (__DEV__) {

diff --git a/packages/react-server/src/ReactFlightActionServer.js b/packages/react-server/src/ReactFlightActionServer.js
@@ -93,6 +93,7 @@ export function decodeAction<T>(
   // $FlowFixMe[prop-missing]
   body.forEach((value: string | File, key: string) => {
     if (!key.startsWith('$ACTION_')) {
+      // $FlowFixMe[incompatible-call]
       formData.append(key, value);
       return;
     }

diff --git a/packages/react-server/src/ReactFlightReplyServer.js b/packages/react-server/src/ReactFlightReplyServer.js
@@ -978,6 +978,7 @@ function parseModelString(
         // $FlowFixMe[prop-missing] FormData has forEach on it.
         backingFormData.forEach((entry: File | string, entryKey: string) => {
           if (entryKey.startsWith(formPrefix)) {
+            // $FlowFixMe[incompatible-call]
             data.append(entryKey.slice(formPrefix.length), entry);
           }
         });

diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js
@@ -166,10 +166,14 @@ function flatten(arr) {
   const stack = [{i: 0, array: arr}];
   while (stack.length) {
     const n = stack.pop();
+    // $FlowFixMe[incompatible-use]
     while (n.i < n.array.length) {
+      // $FlowFixMe[incompatible-use]
       const el = n.array[n.i];
+      // $FlowFixMe[incompatible-use]
       n.i += 1;
       if (isArray(el)) {
+        // $FlowFixMe[incompatible-call]
         stack.push(n);
         stack.push({i: 0, array: el});
         break;

diff --git a/packages/scheduler/src/SchedulerMinHeap.js b/packages/scheduler/src/SchedulerMinHeap.js
@@ -31,7 +31,9 @@ export function pop<T: Node>(heap: Heap<T>): T | null {
   const first = heap[0];
   const last = heap.pop();
   if (last !== first) {
+    // $FlowFixMe[incompatible-type]
     heap[0] = last;
+    // $FlowFixMe[incompatible-call]
     siftDown(heap, last, 0);
   }
   return first;

diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig
@@ -31,9 +31,12 @@
 
 [lints]
 untyped-type-import=error
+internal-type=off
+deprecated-type=off
 
 [options]
 munge_underscores=false
+react.custom_jsx_typing=true
 
 # Substituted by createFlowConfig.js:
 %REACT_RENDERER_FLOW_OPTIONS%

diff --git a/scripts/flow/environment.js b/scripts/flow/environment.js
@@ -26,7 +26,7 @@ declare const AggregateError: Class<Error>;
 declare const FinalizationRegistry: any;
 
 declare module 'create-react-class' {
-  declare const exports: React$CreateClass;
+  declare const exports: $FlowFixMe;
 }
 
 declare interface ConsoleTask {
@@ -46,6 +46,8 @@ declare opaque type React$Element<
   +ref: any,
 };
 
+declare type React$CustomJSXFactory = any;
+
 declare const trustedTypes: {
   isHTML: (value: any) => boolean,
   isScript: (value: any) => boolean,
-Original file line number
+Diff line change
@@ Expand Up @@
           );
         }
       }
+      // $FlowFixMe[incompatible-call]
       return flushSyncWithoutWarningIfAlreadyRendering(fn);
     }
@@ Expand Down @@