From 94ac3066882903ed1739d7f4457bda87dc6fc236 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Mon, 3 Oct 2022 16:52:14 -0400 Subject: [PATCH 01/24] CI: update CircleCI docker image (#25374) This updates to an image that's using node 16.16.0 and java 18.0.2. | Package | Old | New | ------ | ------- | --- | git | 2.32.0 | 2.37.1 | gradle | 7.2 | 7.5.1 | java | 17 | 18.0.2 | maven | 3.8.2 | 3.8.6 | node | 14.17.6 | 16.16.0 | ubuntu | 20.04.2 LTS | 20.04.4 LTS | yarn | 1.22.5 | 1.22.5 --- .circleci/config.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 43a299d9feb6d..f9ae56ca58905 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -2,7 +2,7 @@ version: 2.1 aliases: - &docker - - image: cimg/openjdk:17.0.0-node + - image: cimg/openjdk:18.0-node - &environment TZ: /usr/share/zoneinfo/America/Los_Angeles @@ -121,7 +121,7 @@ jobs: steps: - checkout - run: - name: Nodejs Version + name: NodeJS Version command: node --version - *restore_yarn_cache - *restore_node_modules From 9143864ae1f6d3e8158e5670f5a8623dc6c47dbf Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Mon, 3 Oct 2022 16:52:41 -0400 Subject: [PATCH 02/24] Flow: well formed exports for smaller packages (#25361) Enforces well formed exports for packages where the fixes are small. --- .../react-devtools-core/src/standalone.js | 8 +-- packages/react-is/src/ReactIs.js | 2 +- .../react-refresh/src/ReactFreshRuntime.js | 7 ++- packages/react-server/src/ReactFlightHooks.js | 6 ++- .../src/useSyncExternalStoreShim.js | 7 ++- scripts/flow/config/flowconfig | 52 +++++++++---------- 6 files changed, 47 insertions(+), 35 deletions(-) diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index 4a2ba8ff08e67..315b6bcaf936e 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -57,7 +57,7 @@ function hookNamesModuleLoaderFunction() { ); } -function setContentDOMNode(value: HTMLElement) { +function setContentDOMNode(value: HTMLElement): typeof DevtoolsUI { node = value; // Save so we can restore the exact waiting message between sessions. @@ -70,12 +70,14 @@ function setProjectRoots(value: Array) { projectRoots = value; } -function setStatusListener(value: StatusListener) { +function setStatusListener(value: StatusListener): typeof DevtoolsUI { statusListener = value; return DevtoolsUI; } -function setDisconnectedCallback(value: OnDisconnectedCallback) { +function setDisconnectedCallback( + value: OnDisconnectedCallback, +): typeof DevtoolsUI { disconnectedCallback = value; return DevtoolsUI; } diff --git a/packages/react-is/src/ReactIs.js b/packages/react-is/src/ReactIs.js index 26bf7e3c6b36d..8d383485daa49 100644 --- a/packages/react-is/src/ReactIs.js +++ b/packages/react-is/src/ReactIs.js @@ -26,7 +26,7 @@ import { } from 'shared/ReactSymbols'; import isValidElementType from 'shared/isValidElementType'; -export function typeOf(object: any) { +export function typeOf(object: any): mixed { if (typeof object === 'object' && object !== null) { const $$typeof = object.$$typeof; switch ($$typeof) { diff --git a/packages/react-refresh/src/ReactFreshRuntime.js b/packages/react-refresh/src/ReactFreshRuntime.js index 56af77a8e8584..00e7932ec401e 100644 --- a/packages/react-refresh/src/ReactFreshRuntime.js +++ b/packages/react-refresh/src/ReactFreshRuntime.js @@ -637,7 +637,12 @@ export function _getMountedRootCount(): number { // 'useState{[foo, setFoo]}(0)', // () => [useCustomHook], /* Lazy to avoid triggering inline requires */ // ); -export function createSignatureFunctionForTransform() { +export function createSignatureFunctionForTransform(): ( + type: T, + key: string, + forceReset?: boolean, + getCustomHooks?: () => Array, +) => T | void { if (__DEV__) { let savedType; let hasCustomHooks; diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js index c2d319074e7f8..aa6358efcd4dc 100644 --- a/packages/react-server/src/ReactFlightHooks.js +++ b/packages/react-server/src/ReactFlightHooks.js @@ -122,12 +122,14 @@ function unsupportedRefresh(): void { let currentCache: Map | null = null; -export function setCurrentCache(cache: Map | null) { +export function setCurrentCache( + cache: Map | null, +): Map | null { currentCache = cache; return currentCache; } -export function getCurrentCache() { +export function getCurrentCache(): Map | null { return currentCache; } diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreShim.js b/packages/use-sync-external-store/src/useSyncExternalStoreShim.js index 82d944de1dd1d..73fcf26439010 100644 --- a/packages/use-sync-external-store/src/useSyncExternalStoreShim.js +++ b/packages/use-sync-external-store/src/useSyncExternalStoreShim.js @@ -14,5 +14,8 @@ import {useSyncExternalStore as builtInAPI} from 'react'; const shim = isServerEnvironment ? server : client; -export const useSyncExternalStore = - builtInAPI !== undefined ? ((builtInAPI: any): typeof shim) : shim; +export const useSyncExternalStore: ( + subscribe: (() => void) => () => void, + getSnapshot: () => T, + getServerSnapshot?: () => T, +) => T = builtInAPI !== undefined ? builtInAPI : shim; diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig index d5330858f60c7..adc89ba407667 100644 --- a/scripts/flow/config/flowconfig +++ b/scripts/flow/config/flowconfig @@ -48,43 +48,43 @@ munge_underscores=false types_first=false well_formed_exports=true -; well_formed_exports.includes=/packages/dom-event-testing-library -; well_formed_exports.includes=/packages/eslint-plugin-react-hooks -; well_formed_exports.includes=/packages/jest-mock-scheduler -; well_formed_exports.includes=/packages/jest-react +well_formed_exports.includes=/packages/dom-event-testing-library +well_formed_exports.includes=/packages/eslint-plugin-react-hooks +well_formed_exports.includes=/packages/jest-mock-scheduler +well_formed_exports.includes=/packages/jest-react ; well_formed_exports.includes=/packages/react -; well_formed_exports.includes=/packages/react-art -; well_formed_exports.includes=/packages/react-cache -; well_formed_exports.includes=/packages/react-client -; well_formed_exports.includes=/packages/react-debug-tools -; well_formed_exports.includes=/packages/react-devtools -; well_formed_exports.includes=/packages/react-devtools-core -; well_formed_exports.includes=/packages/react-devtools-extensions -; well_formed_exports.includes=/packages/react-devtools-inline +well_formed_exports.includes=/packages/react-art +well_formed_exports.includes=/packages/react-cache +well_formed_exports.includes=/packages/react-client +well_formed_exports.includes=/packages/react-debug-tools +well_formed_exports.includes=/packages/react-devtools +well_formed_exports.includes=/packages/react-devtools-core +well_formed_exports.includes=/packages/react-devtools-extensions +well_formed_exports.includes=/packages/react-devtools-inline well_formed_exports.includes=/packages/react-devtools-shared well_formed_exports.includes=/packages/react-devtools-shell well_formed_exports.includes=/packages/react-devtools-timeline ; well_formed_exports.includes=/packages/react-dom ; well_formed_exports.includes=/packages/react-dom-bindings -; well_formed_exports.includes=/packages/react-fetch -; well_formed_exports.includes=/packages/react-fs -; well_formed_exports.includes=/packages/react-interactions -; well_formed_exports.includes=/packages/react-is +well_formed_exports.includes=/packages/react-fetch +well_formed_exports.includes=/packages/react-fs +well_formed_exports.includes=/packages/react-interactions +well_formed_exports.includes=/packages/react-is ; well_formed_exports.includes=/packages/react-native-renderer -; well_formed_exports.includes=/packages/react-noop-renderer -; well_formed_exports.includes=/packages/react-pg +well_formed_exports.includes=/packages/react-noop-renderer +well_formed_exports.includes=/packages/react-pg well_formed_exports.includes=/packages/react-reconciler -; well_formed_exports.includes=/packages/react-refresh -; well_formed_exports.includes=/packages/react-server -; well_formed_exports.includes=/packages/react-server-dom-relay -; well_formed_exports.includes=/packages/react-server-dom-webpack -; well_formed_exports.includes=/packages/react-server-native-relay -; well_formed_exports.includes=/packages/react-suspense-test-utils +well_formed_exports.includes=/packages/react-refresh +well_formed_exports.includes=/packages/react-server +well_formed_exports.includes=/packages/react-server-dom-relay +well_formed_exports.includes=/packages/react-server-dom-webpack +well_formed_exports.includes=/packages/react-server-native-relay +well_formed_exports.includes=/packages/react-suspense-test-utils ; well_formed_exports.includes=/packages/react-test-renderer well_formed_exports.includes=/packages/scheduler ; well_formed_exports.includes=/packages/shared -; well_formed_exports.includes=/packages/use-subscription -; well_formed_exports.includes=/packages/use-sync-external-store +well_formed_exports.includes=/packages/use-subscription +well_formed_exports.includes=/packages/use-sync-external-store # Substituted by createFlowConfig.js: %REACT_RENDERER_FLOW_OPTIONS% From b1f34aa307b004681b3d4c75446d354cda6368cb Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Mon, 3 Oct 2022 17:03:33 -0400 Subject: [PATCH 03/24] Flow: types first in react-native-renderer (#25363) --- .../react-native-renderer/src/ReactFabric.js | 4 ++-- .../src/ReactNativeBridgeEventPlugin.js | 7 +++++-- .../src/ReactNativeFiberInspector.js | 14 ++++++++++--- .../src/ReactNativeRenderer.js | 4 ++-- .../src/legacy-events/EventPluginRegistry.js | 20 +++++++++++++------ .../src/legacy-events/PluginModuleType.js | 2 +- scripts/flow/config/flowconfig | 2 +- 7 files changed, 36 insertions(+), 17 deletions(-) diff --git a/packages/react-native-renderer/src/ReactFabric.js b/packages/react-native-renderer/src/ReactFabric.js index 428ffe20acd37..d874742cd4846 100644 --- a/packages/react-native-renderer/src/ReactFabric.js +++ b/packages/react-native-renderer/src/ReactFabric.js @@ -8,7 +8,7 @@ */ import type {HostComponent} from './ReactNativeTypes'; -import type {ReactNodeList} from 'shared/ReactTypes'; +import type {ReactPortal, ReactNodeList} from 'shared/ReactTypes'; import type {ElementRef, Element, ElementType} from 'react'; import './ReactFabricInjection'; @@ -249,7 +249,7 @@ function createPortal( children: ReactNodeList, containerTag: number, key: ?string = null, -) { +): ReactPortal { return createPortalImpl(children, containerTag, null, key); } diff --git a/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js b/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js index f3ce8a49c28f6..ecd531e3cdaf0 100644 --- a/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js +++ b/packages/react-native-renderer/src/ReactNativeBridgeEventPlugin.js @@ -7,7 +7,10 @@ * @flow */ -import type {AnyNativeEvent} from './legacy-events/PluginModuleType'; +import type { + AnyNativeEvent, + EventTypes, +} from './legacy-events/PluginModuleType'; import type {TopLevelType} from './legacy-events/TopLevelEventTypes'; import SyntheticEvent from './legacy-events/SyntheticEvent'; import type {PropagationPhases} from './legacy-events/PropagationPhases'; @@ -175,7 +178,7 @@ function accumulateDirectDispatches(events: ?(Array | Object)) { // End of inline const ReactNativeBridgeEventPlugin = { - eventTypes: {}, + eventTypes: ({}: EventTypes), extractEvents: function( topLevelType: TopLevelType, diff --git a/packages/react-native-renderer/src/ReactNativeFiberInspector.js b/packages/react-native-renderer/src/ReactNativeFiberInspector.js index f0c6a8de2f566..874ac91d84734 100644 --- a/packages/react-native-renderer/src/ReactNativeFiberInspector.js +++ b/packages/react-native-renderer/src/ReactNativeFiberInspector.js @@ -30,7 +30,9 @@ let createHierarchy; let getHostNode; let getHostProps; let lastNonHostInstance; -let getInspectorDataForInstance; +let getInspectorDataForInstance: ( + closestInstance: Fiber | null, +) => InspectorData; let getOwnerHierarchy; let traverseOwnerTreeUp; @@ -142,8 +144,14 @@ if (__DEV__ || enableGetInspectorDataForInstanceInProduction) { }; } -let getInspectorDataForViewTag; -let getInspectorDataForViewAtPoint; +let getInspectorDataForViewTag: (viewTag: number) => Object; +let getInspectorDataForViewAtPoint: ( + findNodeHandle: (componentOrHandle: any) => ?number, + inspectedView: Object, + locationX: number, + locationY: number, + callback: (viewData: TouchedViewDataAtPoint) => mixed, +) => void; if (__DEV__) { getInspectorDataForViewTag = function(viewTag: number): Object { diff --git a/packages/react-native-renderer/src/ReactNativeRenderer.js b/packages/react-native-renderer/src/ReactNativeRenderer.js index 68241f8def7ac..b47baf0c9bb8c 100644 --- a/packages/react-native-renderer/src/ReactNativeRenderer.js +++ b/packages/react-native-renderer/src/ReactNativeRenderer.js @@ -8,7 +8,7 @@ */ import type {HostComponent} from './ReactNativeTypes'; -import type {ReactNodeList} from 'shared/ReactTypes'; +import type {ReactPortal, ReactNodeList} from 'shared/ReactTypes'; import type {ElementRef, Element, ElementType} from 'react'; import './ReactNativeInjection'; @@ -248,7 +248,7 @@ function createPortal( children: ReactNodeList, containerTag: number, key: ?string = null, -) { +): ReactPortal { return createPortalImpl(children, containerTag, null, key); } diff --git a/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js b/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js index 3737d2c073b61..a1fe155e1eaaa 100644 --- a/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js +++ b/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js @@ -13,10 +13,10 @@ import type { PluginName, LegacyPluginModule, } from './PluginModuleType'; +import type {TopLevelType} from './TopLevelEventTypes'; type NamesToPlugins = { [key: PluginName]: LegacyPluginModule, - ..., }; type EventPluginOrder = null | Array; @@ -166,22 +166,28 @@ function publishRegistrationName( /** * Ordered list of injected plugins. */ -export const plugins = []; +export const plugins: Array> = []; /** * Mapping from event name to dispatch config */ -export const eventNameDispatchConfigs = {}; +export const eventNameDispatchConfigs: { + [eventName: string]: DispatchConfig, +} = {}; /** * Mapping from registration name to plugin module */ -export const registrationNameModules = {}; +export const registrationNameModules: { + [registrationName: string]: LegacyPluginModule, +} = {}; /** * Mapping from registration name to event name */ -export const registrationNameDependencies = {}; +export const registrationNameDependencies: { + [registrationName: string]: Array | void, +} = {}; /** * Mapping from lowercase registration names to the properly cased version, @@ -189,7 +195,9 @@ export const registrationNameDependencies = {}; * only in __DEV__. * @type {Object} */ -export const possibleRegistrationNames = __DEV__ ? {} : (null: any); +export const possibleRegistrationNames: { + [lowerCasedName: string]: string, +} = __DEV__ ? {} : (null: any); // Trust the developer to only use possibleRegistrationNames in __DEV__ /** diff --git a/packages/react-native-renderer/src/legacy-events/PluginModuleType.js b/packages/react-native-renderer/src/legacy-events/PluginModuleType.js index 9488629dca6dd..fcd8ea3ebb870 100644 --- a/packages/react-native-renderer/src/legacy-events/PluginModuleType.js +++ b/packages/react-native-renderer/src/legacy-events/PluginModuleType.js @@ -14,7 +14,7 @@ import type { } from './ReactSyntheticEventType'; import type {TopLevelType} from './TopLevelEventTypes'; -export type EventTypes = {[key: string]: DispatchConfig, ...}; +export type EventTypes = {[key: string]: DispatchConfig}; export type AnyNativeEvent = Event | KeyboardEvent | MouseEvent | TouchEvent; diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig index adc89ba407667..404ac2d8b315e 100644 --- a/scripts/flow/config/flowconfig +++ b/scripts/flow/config/flowconfig @@ -70,7 +70,7 @@ well_formed_exports.includes=/packages/react-fetch well_formed_exports.includes=/packages/react-fs well_formed_exports.includes=/packages/react-interactions well_formed_exports.includes=/packages/react-is -; well_formed_exports.includes=/packages/react-native-renderer +well_formed_exports.includes=/packages/react-native-renderer well_formed_exports.includes=/packages/react-noop-renderer well_formed_exports.includes=/packages/react-pg well_formed_exports.includes=/packages/react-reconciler From dc52b6739e2cdff92d5d877ef69c507237f6b537 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Mon, 3 Oct 2022 20:57:06 -0400 Subject: [PATCH 04/24] Add NodeJS 18.x as devEngine (#25348) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 05e7f835128ab..5066427dc5f5b 100644 --- a/package.json +++ b/package.json @@ -100,7 +100,7 @@ "yargs": "^15.3.1" }, "devEngines": { - "node": "^12.17.0 || 13.x || 14.x || 15.x || 16.x || 17.x" + "node": "^12.17.0 || 13.x || 14.x || 15.x || 16.x || 17.x || 18.x" }, "jest": { "testRegex": "/scripts/jest/dont-run-jest-directly\\.js$" From bcc05671fcdb159016fb64ab6f0b8f137fa3862c Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Mon, 3 Oct 2022 20:57:34 -0400 Subject: [PATCH 05/24] Flow: types first in shared (#25343) --- .../react/src/ReactServerContextRegistry.js | 9 +++++ packages/shared/ReactErrorUtils.js | 2 +- packages/shared/ReactServerContextRegistry.js | 6 ++- packages/shared/enqueueTask.js | 2 +- packages/shared/invokeGuardedCallbackImpl.js | 39 ++++++------------- scripts/flow/config/flowconfig | 2 +- 6 files changed, 29 insertions(+), 31 deletions(-) diff --git a/packages/react/src/ReactServerContextRegistry.js b/packages/react/src/ReactServerContextRegistry.js index dda738ac7439c..d0c1e67d5995e 100644 --- a/packages/react/src/ReactServerContextRegistry.js +++ b/packages/react/src/ReactServerContextRegistry.js @@ -1,3 +1,12 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + import type {ReactServerContext} from 'shared/ReactTypes'; export const ContextRegistry: { diff --git a/packages/shared/ReactErrorUtils.js b/packages/shared/ReactErrorUtils.js index 5a33bfceae1c0..d1d9660c6ea3b 100644 --- a/packages/shared/ReactErrorUtils.js +++ b/packages/shared/ReactErrorUtils.js @@ -109,7 +109,7 @@ export function hasCaughtError(): boolean { return hasError; } -export function clearCaughtError() { +export function clearCaughtError(): mixed { if (hasError) { const error = caughtError; hasError = false; diff --git a/packages/shared/ReactServerContextRegistry.js b/packages/shared/ReactServerContextRegistry.js index d8f7c7082940e..9729865a238c1 100644 --- a/packages/shared/ReactServerContextRegistry.js +++ b/packages/shared/ReactServerContextRegistry.js @@ -7,13 +7,17 @@ * @flow */ +import type {ReactServerContext} from 'shared/ReactTypes'; + import {REACT_SERVER_CONTEXT_DEFAULT_VALUE_NOT_LOADED} from 'shared/ReactSymbols'; import ReactSharedInternals from 'shared/ReactSharedInternals'; import {createServerContext} from 'react'; const ContextRegistry = ReactSharedInternals.ContextRegistry; -export function getOrCreateServerContext(globalName: string) { +export function getOrCreateServerContext( + globalName: string, +): ReactServerContext { if (!ContextRegistry[globalName]) { ContextRegistry[globalName] = createServerContext( globalName, diff --git a/packages/shared/enqueueTask.js b/packages/shared/enqueueTask.js index d8fc646db2b26..95d11d613f5be 100644 --- a/packages/shared/enqueueTask.js +++ b/packages/shared/enqueueTask.js @@ -10,7 +10,7 @@ let didWarnAboutMessageChannel = false; let enqueueTaskImpl = null; -export default function enqueueTask(task: () => void) { +export default function enqueueTask(task: () => void): void { if (enqueueTaskImpl === null) { try { // read require off the module object to get around the bundlers. diff --git a/packages/shared/invokeGuardedCallbackImpl.js b/packages/shared/invokeGuardedCallbackImpl.js index 9fcfbaaef0e93..74f8bd6454f5c 100644 --- a/packages/shared/invokeGuardedCallbackImpl.js +++ b/packages/shared/invokeGuardedCallbackImpl.js @@ -7,26 +7,25 @@ * @flow */ -function invokeGuardedCallbackProd( +function invokeGuardedCallbackProd, Context>( name: string | null, - func: (a: A, b: B, c: C, d: D, e: E, f: F) => mixed, + func: (...Args) => mixed, context: Context, - a: A, - b: B, - c: C, - d: D, - e: E, - f: F, -) { +): void { const funcArgs = Array.prototype.slice.call(arguments, 3); try { + // $FlowFixMe[incompatible-call] Flow doesn't understand the arguments splicing. func.apply(context, funcArgs); } catch (error) { this.onError(error); } } -let invokeGuardedCallbackImpl = invokeGuardedCallbackProd; +let invokeGuardedCallbackImpl: , Context>( + name: string | null, + func: (...Args) => mixed, + context: Context, +) => void = invokeGuardedCallbackProd; if (__DEV__) { // In DEV mode, we swap out invokeGuardedCallback for a special version @@ -59,24 +58,9 @@ if (__DEV__) { const fakeNode = document.createElement('react'); invokeGuardedCallbackImpl = function invokeGuardedCallbackDev< - A, - B, - C, - D, - E, - F, + Args: Array, Context, - >( - name: string | null, - func: (a: A, b: B, c: C, d: D, e: E, f: F) => mixed, - context: Context, - a: A, - b: B, - c: C, - d: D, - e: E, - f: F, - ) { + >(name: string | null, func: (...Args) => mixed, context: Context): void { // If document doesn't exist we know for sure we will crash in this method // when we call document.createEvent(). However this can cause confusing // errors: https://github.com/facebook/create-react-app/issues/3482 @@ -142,6 +126,7 @@ if (__DEV__) { function callCallback() { didCall = true; restoreAfterDispatch(); + // $FlowFixMe[incompatible-call] Flow doesn't understand the arguments splicing. func.apply(context, funcArgs); didError = false; } diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig index 404ac2d8b315e..68e1aef4a3408 100644 --- a/scripts/flow/config/flowconfig +++ b/scripts/flow/config/flowconfig @@ -82,7 +82,7 @@ well_formed_exports.includes=/packages/react-server-native-relay well_formed_exports.includes=/packages/react-suspense-test-utils ; well_formed_exports.includes=/packages/react-test-renderer well_formed_exports.includes=/packages/scheduler -; well_formed_exports.includes=/packages/shared +well_formed_exports.includes=/packages/shared well_formed_exports.includes=/packages/use-subscription well_formed_exports.includes=/packages/use-sync-external-store From 0a3072278ee5fb46ddb58e6f5ba9e2b78f6f715a Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Mon, 3 Oct 2022 21:59:33 -0400 Subject: [PATCH 06/24] Flow: complete types first migration (#25389) This complete the "types first" migration and enables the config everywhere. --- .../react-window/src/FixedSizeGrid.js | 4 +- .../react-window/src/FixedSizeList.js | 4 +- .../react-window/src/VariableSizeGrid.js | 4 +- .../react-window/src/VariableSizeList.js | 4 +- .../src/client/ReactDOMInput.js | 2 +- .../src/client/ReactDOMSelect.js | 2 +- .../src/client/ReactDOMTextarea.js | 2 +- .../src/client/setInnerHTML.js | 5 ++- .../src/events/EventRegistry.js | 8 +++- .../src/events/ReactDOMEventListener.js | 10 ++--- .../src/events/SyntheticEvent.js | 39 +++++++++++------- .../src/events/forks/EventListener-www.js | 8 ++-- packages/react-dom/src/client/ReactDOM.js | 9 +++-- .../react-dom/src/client/ReactDOMLegacy.js | 15 ++++--- .../src/ReactFabricHostConfig.js | 2 +- .../src/ReactNativeHostConfig.js | 2 +- .../src/legacy-events/accumulate.js | 2 + .../src/legacy-events/accumulateInto.js | 2 + .../ReactFiberHostConfigWithNoHydration.js | 2 +- .../ReactFiberHostConfigWithNoMicrotasks.js | 2 +- .../src/ReactFiberHostConfigWithNoMutation.js | 2 +- .../ReactFiberHostConfigWithNoPersistence.js | 2 +- .../ReactFiberHostConfigWithNoResources.js | 2 +- .../src/ReactFiberHostConfigWithNoScopes.js | 2 +- ...ReactFiberHostConfigWithNoTestSelectors.js | 2 +- .../src/ReactFiberWorkLoop.new.js | 2 +- .../src/ReactFiberWorkLoop.old.js | 2 +- .../src/ReactTestHostConfig.js | 4 +- .../src/ReactTestRenderer.js | 26 +++++++++--- packages/react/src/React.js | 12 ++++-- packages/react/src/ReactDebugCurrentFrame.js | 10 ++++- packages/react/src/jsx/ReactJSX.js | 6 +-- scripts/flow/config/flowconfig | 40 +------------------ 33 files changed, 133 insertions(+), 107 deletions(-) diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeGrid.js b/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeGrid.js index 685ad33478205..3f0b9f40676b9 100644 --- a/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeGrid.js +++ b/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeGrid.js @@ -1,10 +1,12 @@ // @flow +import type {ComponentType} from "react"; + import createGridComponent from './createGridComponent'; import type { Props, ScrollToAlign } from './createGridComponent'; -const FixedSizeGrid = createGridComponent({ +const FixedSizeGrid: ComponentType> = createGridComponent({ getColumnOffset: ({ columnWidth }: Props, index: number): number => index * ((columnWidth: any): number), diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeList.js b/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeList.js index 0e0fc305bc301..5b6dab45988fb 100644 --- a/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeList.js +++ b/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeList.js @@ -1,10 +1,12 @@ // @flow +import type {ComponentType} from "react"; + import createListComponent from './createListComponent'; import type { Props, ScrollToAlign } from './createListComponent'; -const FixedSizeList = createListComponent({ +const FixedSizeList: ComponentType> = createListComponent({ getItemOffset: ({ itemSize }: Props, index: number): number => index * ((itemSize: any): number), diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js index 2ce4f2d9a04ce..6b0d6a65e987a 100644 --- a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js +++ b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js @@ -1,5 +1,7 @@ // @flow +import type {ComponentType} from "react"; + import createGridComponent from './createGridComponent'; import type { Props, ScrollToAlign } from './createGridComponent'; @@ -286,7 +288,7 @@ const getOffsetForIndexAndAlignment = ( } }; -const VariableSizeGrid = createGridComponent({ +const VariableSizeGrid: ComponentType> = createGridComponent({ getColumnOffset: ( props: Props, index: number, diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js index 887641b010eef..fa876ad994cbf 100644 --- a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js +++ b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js @@ -1,5 +1,7 @@ // @flow +import type {ComponentType} from "react"; + import createListComponent from './createListComponent'; import type { Props, ScrollToAlign } from './createListComponent'; @@ -163,7 +165,7 @@ const getEstimatedTotalSize = ( return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems; }; -const VariableSizeList = createListComponent({ +const VariableSizeList: ComponentType> = createListComponent({ getItemOffset: ( props: Props, index: number, diff --git a/packages/react-dom-bindings/src/client/ReactDOMInput.js b/packages/react-dom-bindings/src/client/ReactDOMInput.js index 8d9ea1f45a431..ec03d75e37afb 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMInput.js +++ b/packages/react-dom-bindings/src/client/ReactDOMInput.js @@ -59,7 +59,7 @@ function isControlled(props) { * See http://www.w3.org/TR/2012/WD-html5-20121025/the-input-element.html */ -export function getHostProps(element: Element, props: Object) { +export function getHostProps(element: Element, props: Object): Object { const node = ((element: any): InputWithWrapperState); const checked = props.checked; diff --git a/packages/react-dom-bindings/src/client/ReactDOMSelect.js b/packages/react-dom-bindings/src/client/ReactDOMSelect.js index 57f53b5206a82..3493879cf7989 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMSelect.js +++ b/packages/react-dom-bindings/src/client/ReactDOMSelect.js @@ -134,7 +134,7 @@ function updateOptions( * selected. */ -export function getHostProps(element: Element, props: Object) { +export function getHostProps(element: Element, props: Object): Object { return assign({}, props, { value: undefined, }); diff --git a/packages/react-dom-bindings/src/client/ReactDOMTextarea.js b/packages/react-dom-bindings/src/client/ReactDOMTextarea.js index 065f76d16c12d..4bf87f2e2340c 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMTextarea.js +++ b/packages/react-dom-bindings/src/client/ReactDOMTextarea.js @@ -37,7 +37,7 @@ type TextAreaWithWrapperState = HTMLTextAreaElement & { * `defaultValue` if specified, or the children content (deprecated). */ -export function getHostProps(element: Element, props: Object) { +export function getHostProps(element: Element, props: Object): Object { const node = ((element: any): TextAreaWithWrapperState); if (props.dangerouslySetInnerHTML != null) { diff --git a/packages/react-dom-bindings/src/client/setInnerHTML.js b/packages/react-dom-bindings/src/client/setInnerHTML.js index e283efb270770..fd4eb00748e95 100644 --- a/packages/react-dom-bindings/src/client/setInnerHTML.js +++ b/packages/react-dom-bindings/src/client/setInnerHTML.js @@ -21,7 +21,10 @@ let reusableSVGContainer; * @param {string} html * @internal */ -const setInnerHTML = createMicrosoftUnsafeLocalFunction(function( +const setInnerHTML: ( + node: Element, + html: {valueOf(): {toString(): string, ...}, ...}, +) => void = createMicrosoftUnsafeLocalFunction(function( node: Element, html: {valueOf(): {toString(): string, ...}, ...}, ): void { diff --git a/packages/react-dom-bindings/src/events/EventRegistry.js b/packages/react-dom-bindings/src/events/EventRegistry.js index eed8b9dc49845..f86948f8d5227 100644 --- a/packages/react-dom-bindings/src/events/EventRegistry.js +++ b/packages/react-dom-bindings/src/events/EventRegistry.js @@ -21,7 +21,9 @@ if (enableCreateEventHandleAPI) { /** * Mapping from registration name to event name */ -export const registrationNameDependencies = {}; +export const registrationNameDependencies: { + [registrationName: string]: Array, +} = {}; /** * Mapping from lowercase registration names to the properly cased version, @@ -29,7 +31,9 @@ export const registrationNameDependencies = {}; * only in __DEV__. * @type {Object} */ -export const possibleRegistrationNames = __DEV__ ? {} : (null: any); +export const possibleRegistrationNames: { + [lowerCasedName: string]: string, +} = __DEV__ ? {} : (null: any); // Trust the developer to only use possibleRegistrationNames in __DEV__ export function registerTwoPhaseEvent( diff --git a/packages/react-dom-bindings/src/events/ReactDOMEventListener.js b/packages/react-dom-bindings/src/events/ReactDOMEventListener.js index bd7e05b1d760e..ba2c1e63239de 100644 --- a/packages/react-dom-bindings/src/events/ReactDOMEventListener.js +++ b/packages/react-dom-bindings/src/events/ReactDOMEventListener.js @@ -8,7 +8,7 @@ */ import type {AnyNativeEvent} from '../events/PluginModuleType'; -import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes'; +import type {Fiber, FiberRoot} from 'react-reconciler/src/ReactInternalTypes'; import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig'; import type {DOMEventName} from '../events/DOMEventNames'; import {enableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay} from 'shared/ReactFeatureFlags'; @@ -58,15 +58,15 @@ import {isRootDehydrated} from 'react-reconciler/src/ReactFiberShellHydration'; const {ReactCurrentBatchConfig} = ReactSharedInternals; // TODO: can we stop exporting these? -export let _enabled = true; +export let _enabled: boolean = true; // This is exported in FB builds for use by legacy FB layer infra. // We'd like to remove this but it's not clear if this is safe. -export function setEnabled(enabled: ?boolean) { +export function setEnabled(enabled: ?boolean): void { _enabled = !!enabled; } -export function isEnabled() { +export function isEnabled(): boolean { return _enabled; } @@ -348,7 +348,7 @@ function dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEve ); } -export let return_targetInst = null; +export let return_targetInst: null | Fiber = null; // Returns a SuspenseInstance or Container if it's blocked. // The return_targetInst field above is conceptually part of the return value. diff --git a/packages/react-dom-bindings/src/events/SyntheticEvent.js b/packages/react-dom-bindings/src/events/SyntheticEvent.js index 87bdad3548cdc..2d75b647aca80 100644 --- a/packages/react-dom-bindings/src/events/SyntheticEvent.js +++ b/packages/react-dom-bindings/src/events/SyntheticEvent.js @@ -16,7 +16,6 @@ import getEventCharCode from './getEventCharCode'; type EventInterfaceType = { [propName: string]: 0 | ((event: {[propName: string]: mixed, ...}) => mixed), - ..., }; function functionThatReturnsTrue() { @@ -153,14 +152,16 @@ const EventInterface = { defaultPrevented: 0, isTrusted: 0, }; -export const SyntheticEvent = createSyntheticEvent(EventInterface); +export const SyntheticEvent: $FlowFixMe = createSyntheticEvent(EventInterface); const UIEventInterface: EventInterfaceType = { ...EventInterface, view: 0, detail: 0, }; -export const SyntheticUIEvent = createSyntheticEvent(UIEventInterface); +export const SyntheticUIEvent: $FlowFixMe = createSyntheticEvent( + UIEventInterface, +); let lastMovementX; let lastMovementY; @@ -225,7 +226,9 @@ const MouseEventInterface: EventInterfaceType = { return lastMovementY; }, }; -export const SyntheticMouseEvent = createSyntheticEvent(MouseEventInterface); +export const SyntheticMouseEvent: $FlowFixMe = createSyntheticEvent( + MouseEventInterface, +); /** * @interface DragEvent @@ -235,7 +238,9 @@ const DragEventInterface: EventInterfaceType = { ...MouseEventInterface, dataTransfer: 0, }; -export const SyntheticDragEvent = createSyntheticEvent(DragEventInterface); +export const SyntheticDragEvent: $FlowFixMe = createSyntheticEvent( + DragEventInterface, +); /** * @interface FocusEvent @@ -245,7 +250,9 @@ const FocusEventInterface: EventInterfaceType = { ...UIEventInterface, relatedTarget: 0, }; -export const SyntheticFocusEvent = createSyntheticEvent(FocusEventInterface); +export const SyntheticFocusEvent: $FlowFixMe = createSyntheticEvent( + FocusEventInterface, +); /** * @interface Event @@ -258,7 +265,7 @@ const AnimationEventInterface: EventInterfaceType = { elapsedTime: 0, pseudoElement: 0, }; -export const SyntheticAnimationEvent = createSyntheticEvent( +export const SyntheticAnimationEvent: $FlowFixMe = createSyntheticEvent( AnimationEventInterface, ); @@ -274,7 +281,7 @@ const ClipboardEventInterface: EventInterfaceType = { : window.clipboardData; }, }; -export const SyntheticClipboardEvent = createSyntheticEvent( +export const SyntheticClipboardEvent: $FlowFixMe = createSyntheticEvent( ClipboardEventInterface, ); @@ -286,7 +293,7 @@ const CompositionEventInterface: EventInterfaceType = { ...EventInterface, data: 0, }; -export const SyntheticCompositionEvent = createSyntheticEvent( +export const SyntheticCompositionEvent: $FlowFixMe = createSyntheticEvent( CompositionEventInterface, ); @@ -487,7 +494,7 @@ const KeyboardEventInterface = { return 0; }, }; -export const SyntheticKeyboardEvent = createSyntheticEvent( +export const SyntheticKeyboardEvent: $FlowFixMe = createSyntheticEvent( KeyboardEventInterface, ); @@ -508,7 +515,7 @@ const PointerEventInterface = { pointerType: 0, isPrimary: 0, }; -export const SyntheticPointerEvent = createSyntheticEvent( +export const SyntheticPointerEvent: $FlowFixMe = createSyntheticEvent( PointerEventInterface, ); @@ -527,7 +534,9 @@ const TouchEventInterface = { shiftKey: 0, getModifierState: getEventModifierState, }; -export const SyntheticTouchEvent = createSyntheticEvent(TouchEventInterface); +export const SyntheticTouchEvent: $FlowFixMe = createSyntheticEvent( + TouchEventInterface, +); /** * @interface Event @@ -540,7 +549,7 @@ const TransitionEventInterface = { elapsedTime: 0, pseudoElement: 0, }; -export const SyntheticTransitionEvent = createSyntheticEvent( +export const SyntheticTransitionEvent: $FlowFixMe = createSyntheticEvent( TransitionEventInterface, ); @@ -580,4 +589,6 @@ const WheelEventInterface = { // ~40 pixels, for DOM_DELTA_SCREEN (2) it is 87.5% of viewport size. deltaMode: 0, }; -export const SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface); +export const SyntheticWheelEvent: $FlowFixMe = createSyntheticEvent( + WheelEventInterface, +); diff --git a/packages/react-dom-bindings/src/events/forks/EventListener-www.js b/packages/react-dom-bindings/src/events/forks/EventListener-www.js index 04521613b5962..b9f20cca800ad 100644 --- a/packages/react-dom-bindings/src/events/forks/EventListener-www.js +++ b/packages/react-dom-bindings/src/events/forks/EventListener-www.js @@ -16,7 +16,7 @@ export function addEventBubbleListener( target: EventTarget, eventType: string, listener: Function, -) { +): mixed { return EventListenerWWW.listen(target, eventType, listener); } @@ -24,7 +24,7 @@ export function addEventCaptureListener( target: EventTarget, eventType: string, listener: Function, -) { +): mixed { return EventListenerWWW.capture(target, eventType, listener); } @@ -33,7 +33,7 @@ export function addEventCaptureListenerWithPassiveFlag( eventType: string, listener: Function, passive: boolean, -) { +): mixed { return EventListenerWWW.captureWithPassiveFlag( target, eventType, @@ -47,7 +47,7 @@ export function addEventBubbleListenerWithPassiveFlag( eventType: string, listener: Function, passive: boolean, -) { +): mixed { return EventListenerWWW.bubbleWithPassiveFlag( target, eventType, diff --git a/packages/react-dom/src/client/ReactDOM.js b/packages/react-dom/src/client/ReactDOM.js index 849bc283e01db..3f3265043e881 100644 --- a/packages/react-dom/src/client/ReactDOM.js +++ b/packages/react-dom/src/client/ReactDOM.js @@ -8,7 +8,10 @@ */ import type {ReactNodeList} from 'shared/ReactTypes'; -import type {Container} from 'react-dom-bindings/src/client/ReactDOMHostConfig'; +import type { + Container, + PublicInstance, +} from 'react-dom-bindings/src/client/ReactDOMHostConfig'; import type { RootType, HydrateRootOptions, @@ -125,7 +128,7 @@ function renderSubtreeIntoContainer( element: React$Element, containerNode: Container, callback: ?Function, -) { +): React$Component | PublicInstance | null { return unstable_renderSubtreeIntoContainer( parentComponent, element, @@ -171,7 +174,7 @@ declare function flushSync(fn: () => R): R; // eslint-disable-next-line no-redeclare declare function flushSync(): void; // eslint-disable-next-line no-redeclare -function flushSync(fn) { +function flushSync(fn: (() => R) | void): R | void { if (__DEV__) { if (isAlreadyRendering()) { console.error( diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js index 7118ba1e871c7..92f1ff0cdca5f 100644 --- a/packages/react-dom/src/client/ReactDOMLegacy.js +++ b/packages/react-dom/src/client/ReactDOMLegacy.js @@ -7,7 +7,10 @@ * @flow */ -import type {Container} from 'react-dom-bindings/src/client/ReactDOMHostConfig'; +import type { + Container, + PublicInstance, +} from 'react-dom-bindings/src/client/ReactDOMHostConfig'; import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes'; import type {ReactNodeList} from 'shared/ReactTypes'; @@ -206,7 +209,7 @@ function legacyRenderSubtreeIntoContainer( container: Container, forceHydrate: boolean, callback: ?Function, -) { +): React$Component | PublicInstance | null { if (__DEV__) { topLevelUpdateWarnings(container); warnOnInvalidCallback(callback === undefined ? null : callback, 'render'); @@ -274,7 +277,7 @@ export function hydrate( element: React$Node, container: Container, callback: ?Function, -) { +): React$Component | PublicInstance | null { if (__DEV__) { console.error( 'ReactDOM.hydrate is no longer supported in React 18. Use hydrateRoot ' + @@ -314,7 +317,7 @@ export function render( element: React$Element, container: Container, callback: ?Function, -) { +): React$Component | PublicInstance | null { if (__DEV__) { console.error( 'ReactDOM.render is no longer supported in React 18. Use createRoot ' + @@ -354,7 +357,7 @@ export function unstable_renderSubtreeIntoContainer( element: React$Element, containerNode: Container, callback: ?Function, -) { +): React$Component | PublicInstance | null { if (__DEV__) { console.error( 'ReactDOM.unstable_renderSubtreeIntoContainer() is no longer supported ' + @@ -381,7 +384,7 @@ export function unstable_renderSubtreeIntoContainer( ); } -export function unmountComponentAtNode(container: Container) { +export function unmountComponentAtNode(container: Container): boolean { if (!isValidContainerLegacy(container)) { throw new Error( 'unmountComponentAtNode(...): Target container is not a DOM element.', diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js index d78339b8128ea..4284889658c5c 100644 --- a/packages/react-native-renderer/src/ReactFabricHostConfig.js +++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js @@ -593,7 +593,7 @@ export function replaceContainerChildren( newChildren: ChildSet, ): void {} -export function getInstanceFromNode(node: any) { +export function getInstanceFromNode(node: any): empty { throw new Error('Not yet implemented.'); } diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js index 5deae0672e6ba..26855bd87e838 100644 --- a/packages/react-native-renderer/src/ReactNativeHostConfig.js +++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js @@ -492,7 +492,7 @@ export function unhideTextInstance( throw new Error('Not yet implemented.'); } -export function getInstanceFromNode(node: any) { +export function getInstanceFromNode(node: any): empty { throw new Error('Not yet implemented.'); } diff --git a/packages/react-native-renderer/src/legacy-events/accumulate.js b/packages/react-native-renderer/src/legacy-events/accumulate.js index 6d43ada04f0ef..9d4fe02b4793c 100644 --- a/packages/react-native-renderer/src/legacy-events/accumulate.js +++ b/packages/react-native-renderer/src/legacy-events/accumulate.js @@ -39,6 +39,8 @@ function accumulate( } if (isArray(next)) { + /* $FlowFixMe[incompatible-return] unsound if `next` is `T` and `T` an array, + * `isArray` might refine to the array element type of `T` */ return [current].concat(next); } diff --git a/packages/react-native-renderer/src/legacy-events/accumulateInto.js b/packages/react-native-renderer/src/legacy-events/accumulateInto.js index 7c9f17a757793..6016a1383dab3 100644 --- a/packages/react-native-renderer/src/legacy-events/accumulateInto.js +++ b/packages/react-native-renderer/src/legacy-events/accumulateInto.js @@ -51,6 +51,8 @@ function accumulateInto( if (isArray(next)) { // A bit too dangerous to mutate `next`. + /* $FlowFixMe[incompatible-return] unsound if `next` is `T` and `T` an array, + * `isArray` might refine to the array element type of `T` */ return [current].concat(next); } diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js index f61c0eb7789e7..72d2c72fe2814 100644 --- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js +++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoHydration.js @@ -10,7 +10,7 @@ // Renderers that don't support hydration // can re-export everything from this module. -function shim(...args: any) { +function shim(...args: any): empty { throw new Error( 'The current renderer does not support hydration. ' + 'This error is likely caused by a bug in React. ' + diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js index 5c55d9d59b01f..f50545747cffe 100644 --- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js +++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMicrotasks.js @@ -10,7 +10,7 @@ // Renderers that don't support microtasks // can re-export everything from this module. -function shim(...args: any) { +function shim(...args: any): empty { throw new Error( 'The current renderer does not support microtasks. ' + 'This error is likely caused by a bug in React. ' + diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js index 59e8c450861f0..742e115f13334 100644 --- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js +++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoMutation.js @@ -10,7 +10,7 @@ // Renderers that don't support mutation // can re-export everything from this module. -function shim(...args: any) { +function shim(...args: any): empty { throw new Error( 'The current renderer does not support mutation. ' + 'This error is likely caused by a bug in React. ' + diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js index c34449f6a2466..85d0d83caa533 100644 --- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js +++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoPersistence.js @@ -10,7 +10,7 @@ // Renderers that don't support persistence // can re-export everything from this module. -function shim(...args: any) { +function shim(...args: any): empty { throw new Error( 'The current renderer does not support persistence. ' + 'This error is likely caused by a bug in React. ' + diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoResources.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoResources.js index b620a06b37fb9..1075834cb9bd0 100644 --- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoResources.js +++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoResources.js @@ -10,7 +10,7 @@ // Renderers that don't support hydration // can re-export everything from this module. -function shim(...args: any) { +function shim(...args: any): empty { throw new Error( 'The current renderer does not support Resources. ' + 'This error is likely caused by a bug in React. ' + diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoScopes.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoScopes.js index 6eb3d08a4de64..3d4064ebfdb5f 100644 --- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoScopes.js +++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoScopes.js @@ -10,7 +10,7 @@ // Renderers that don't support React Scopes // can re-export everything from this module. -function shim(...args: any) { +function shim(...args: any): empty { throw new Error( 'The current renderer does not support React Scopes. ' + 'This error is likely caused by a bug in React. ' + diff --git a/packages/react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors.js b/packages/react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors.js index 964bf4b2c43d5..a597ca526565d 100644 --- a/packages/react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors.js +++ b/packages/react-reconciler/src/ReactFiberHostConfigWithNoTestSelectors.js @@ -10,7 +10,7 @@ // Renderers that don't support test selectors // can re-export everything from this module. -function shim(...args: any) { +function shim(...args: any): empty { throw new Error( 'The current renderer does not support test selectors. ' + 'This error is likely caused by a bug in React. ' + diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index e0add4c8db6fd..34b9d3f10c06b 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js @@ -1565,7 +1565,7 @@ export function discreteUpdates( // Warning, this opts-out of checking the function body. declare function flushSync(fn: () => R): R; // eslint-disable-next-line no-redeclare -declare function flushSync(): void; +declare function flushSync(void): void; // eslint-disable-next-line no-redeclare export function flushSync(fn: (() => R) | void): R | void { // In legacy mode, we flush pending passive effects at the beginning of the diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index e5774487dc2cf..b5cd4565ef104 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js @@ -1565,7 +1565,7 @@ export function discreteUpdates( // Warning, this opts-out of checking the function body. declare function flushSync(fn: () => R): R; // eslint-disable-next-line no-redeclare -declare function flushSync(): void; +declare function flushSync(void): void; // eslint-disable-next-line no-redeclare export function flushSync(fn: (() => R) | void): R | void { // In legacy mode, we flush pending passive effects at the beginning of the diff --git a/packages/react-test-renderer/src/ReactTestHostConfig.js b/packages/react-test-renderer/src/ReactTestHostConfig.js index 1db038e411286..e8daa8368f9e7 100644 --- a/packages/react-test-renderer/src/ReactTestHostConfig.js +++ b/packages/react-test-renderer/src/ReactTestHostConfig.js @@ -57,7 +57,7 @@ if (__DEV__) { Object.freeze(UPDATE_SIGNAL); } -export function getPublicInstance(inst: Instance | TextInstance): * { +export function getPublicInstance(inst: Instance | TextInstance): $FlowFixMe { switch (inst.tag) { case 'INSTANCE': const createNodeMock = inst.rootContainerInstance.createNodeMock; @@ -283,7 +283,7 @@ export function unhideTextInstance( textInstance.isHidden = false; } -export function getInstanceFromNode(mockNode: Object) { +export function getInstanceFromNode(mockNode: Object): Object | null { const instance = nodeToInstanceMap.get(mockNode); if (instance !== undefined) { return instance.internalInstanceHandle; diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js index f8d8b8ca3a37a..f0ba1fce9c0b6 100644 --- a/packages/react-test-renderer/src/ReactTestRenderer.js +++ b/packages/react-test-renderer/src/ReactTestRenderer.js @@ -9,7 +9,11 @@ import type {Fiber} from 'react-reconciler/src/ReactInternalTypes'; import type {FiberRoot} from 'react-reconciler/src/ReactInternalTypes'; -import type {Instance, TextInstance} from './ReactTestHostConfig'; +import type { + PublicInstance, + Instance, + TextInstance, +} from './ReactTestHostConfig'; import * as React from 'react'; import * as Scheduler from 'scheduler/unstable_mock'; @@ -303,7 +307,7 @@ class ReactTestInstance { this._fiber = fiber; } - get instance() { + get instance(): $FlowFixMe { if (this._fiber.tag === HostComponent || this._fiber.tag === HostResource) { return getPublicInstance(this._fiber.stateNode); } else { @@ -311,7 +315,7 @@ class ReactTestInstance { } } - get type() { + get type(): any { return this._fiber.type; } @@ -445,7 +449,19 @@ function onRecoverableError(error) { console.error(error); } -function create(element: React$Element, options: TestRendererOptions) { +function create( + element: React$Element, + options: TestRendererOptions, +): { + _Scheduler: typeof Scheduler, + root: void, + toJSON(): Array | ReactTestRendererNode | null, + toTree(): mixed, + update(newElement: React$Element): any, + unmount(): void, + getInstance(): React$Component | PublicInstance | null, + unstable_flushSync: typeof flushSync, +} { let createNodeMock = defaultTestOptions.createNodeMock; let isConcurrent = false; let isStrictMode = false; @@ -534,7 +550,7 @@ function create(element: React$Element, options: TestRendererOptions) { } return toTree(root.current); }, - update(newElement: React$Element) { + update(newElement: React$Element): number | void { if (root == null || root.current == null) { return; } diff --git a/packages/react/src/React.js b/packages/react/src/React.js index fc6c77cbb6539..5edcd9e83049b 100644 --- a/packages/react/src/React.js +++ b/packages/react/src/React.js @@ -71,9 +71,15 @@ import {startTransition} from './ReactStartTransition'; import {act} from './ReactAct'; // TODO: Move this branching into the other module instead and just re-export. -const createElement = __DEV__ ? createElementWithValidation : createElementProd; -const cloneElement = __DEV__ ? cloneElementWithValidation : cloneElementProd; -const createFactory = __DEV__ ? createFactoryWithValidation : createFactoryProd; +const createElement: any = __DEV__ + ? createElementWithValidation + : createElementProd; +const cloneElement: any = __DEV__ + ? cloneElementWithValidation + : cloneElementProd; +const createFactory: any = __DEV__ + ? createFactoryWithValidation + : createFactoryProd; const Children = { map, diff --git a/packages/react/src/ReactDebugCurrentFrame.js b/packages/react/src/ReactDebugCurrentFrame.js index ddaeed70f99b7..557a4cd56abc6 100644 --- a/packages/react/src/ReactDebugCurrentFrame.js +++ b/packages/react/src/ReactDebugCurrentFrame.js @@ -7,11 +7,17 @@ * @flow */ -const ReactDebugCurrentFrame = {}; +const ReactDebugCurrentFrame: { + setExtraStackFrame?: (stack: null | string) => void, + getCurrentStack?: null | (() => string), + getStackAddendum?: () => string, +} = + // $FlowFixMe[incompatible-exact] + {}; let currentExtraStackFrame = (null: null | string); -export function setExtraStackFrame(stack: null | string) { +export function setExtraStackFrame(stack: null | string): void { if (__DEV__) { currentExtraStackFrame = stack; } diff --git a/packages/react/src/jsx/ReactJSX.js b/packages/react/src/jsx/ReactJSX.js index a4e8f63dedd74..f0134421ec51f 100644 --- a/packages/react/src/jsx/ReactJSX.js +++ b/packages/react/src/jsx/ReactJSX.js @@ -13,10 +13,10 @@ import { jsxWithValidation, } from './ReactJSXElementValidator'; import {jsx as jsxProd} from './ReactJSXElement'; -const jsx = __DEV__ ? jsxWithValidationDynamic : jsxProd; +const jsx: any = __DEV__ ? jsxWithValidationDynamic : jsxProd; // we may want to special case jsxs internally to take advantage of static children. // for now we can ship identical prod functions -const jsxs = __DEV__ ? jsxWithValidationStatic : jsxProd; -const jsxDEV = __DEV__ ? jsxWithValidation : undefined; +const jsxs: any = __DEV__ ? jsxWithValidationStatic : jsxProd; +const jsxDEV: any = __DEV__ ? jsxWithValidation : undefined; export {REACT_FRAGMENT_TYPE as Fragment, jsx, jsxs, jsxDEV}; diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig index 68e1aef4a3408..0299da6337508 100644 --- a/scripts/flow/config/flowconfig +++ b/scripts/flow/config/flowconfig @@ -45,46 +45,8 @@ esproposal.class_instance_fields=enable esproposal.optional_chaining=enable exact_by_default=true munge_underscores=false -types_first=false - +types_first=true well_formed_exports=true -well_formed_exports.includes=/packages/dom-event-testing-library -well_formed_exports.includes=/packages/eslint-plugin-react-hooks -well_formed_exports.includes=/packages/jest-mock-scheduler -well_formed_exports.includes=/packages/jest-react -; well_formed_exports.includes=/packages/react -well_formed_exports.includes=/packages/react-art -well_formed_exports.includes=/packages/react-cache -well_formed_exports.includes=/packages/react-client -well_formed_exports.includes=/packages/react-debug-tools -well_formed_exports.includes=/packages/react-devtools -well_formed_exports.includes=/packages/react-devtools-core -well_formed_exports.includes=/packages/react-devtools-extensions -well_formed_exports.includes=/packages/react-devtools-inline -well_formed_exports.includes=/packages/react-devtools-shared -well_formed_exports.includes=/packages/react-devtools-shell -well_formed_exports.includes=/packages/react-devtools-timeline -; well_formed_exports.includes=/packages/react-dom -; well_formed_exports.includes=/packages/react-dom-bindings -well_formed_exports.includes=/packages/react-fetch -well_formed_exports.includes=/packages/react-fs -well_formed_exports.includes=/packages/react-interactions -well_formed_exports.includes=/packages/react-is -well_formed_exports.includes=/packages/react-native-renderer -well_formed_exports.includes=/packages/react-noop-renderer -well_formed_exports.includes=/packages/react-pg -well_formed_exports.includes=/packages/react-reconciler -well_formed_exports.includes=/packages/react-refresh -well_formed_exports.includes=/packages/react-server -well_formed_exports.includes=/packages/react-server-dom-relay -well_formed_exports.includes=/packages/react-server-dom-webpack -well_formed_exports.includes=/packages/react-server-native-relay -well_formed_exports.includes=/packages/react-suspense-test-utils -; well_formed_exports.includes=/packages/react-test-renderer -well_formed_exports.includes=/packages/scheduler -well_formed_exports.includes=/packages/shared -well_formed_exports.includes=/packages/use-subscription -well_formed_exports.includes=/packages/use-sync-external-store # Substituted by createFlowConfig.js: %REACT_RENDERER_FLOW_OPTIONS% From 00a2f81508cccd59556e1bea0208726f9dbfbfa9 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 4 Oct 2022 10:50:28 -0400 Subject: [PATCH 07/24] Flow upgrade to 0.143 This was a large upgrade that removed "classic mode" and made "types first" the only option. Most of the needed changes have been done in previous PRs, this just fixes up the last few instances. ghstack-source-id: 9612d95ba4b32edeb73fee8be9f3d67c43e86b80 Pull Request resolved: https://github.com/facebook/react/pull/25408 --- package.json | 2 +- .../src/server/ReactDOMFizzServerBrowser.js | 4 ++-- .../src/server/ReactDOMFizzStaticBrowser.js | 2 +- .../src/ReactStrictModeWarnings.new.js | 10 +++++----- .../src/ReactStrictModeWarnings.old.js | 10 +++++----- packages/react-refresh/src/ReactFreshRuntime.js | 12 +++++------- .../src/ReactFlightDOMServerBrowser.js | 6 +++--- scripts/flow/config/flowconfig | 4 +--- yarn.lock | 8 ++++---- 9 files changed, 27 insertions(+), 31 deletions(-) diff --git a/package.json b/package.json index 5066427dc5f5b..f34cce9415e38 100644 --- a/package.json +++ b/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.142.0", + "flow-bin": "^0.143.0", "glob": "^7.1.6", "glob-stream": "^6.1.0", "google-closure-compiler": "^20200517.0.0", diff --git a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js index c9cf4b81b5301..2394f656c53a7 100644 --- a/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js +++ b/packages/react-dom/src/server/ReactDOMFizzServerBrowser.js @@ -57,10 +57,10 @@ function renderToReadableStream( const stream: ReactDOMServerReadableStream = (new ReadableStream( { type: 'bytes', - pull(controller): ?Promise { + pull: (controller): ?Promise => { startFlowing(request, controller); }, - cancel(reason): ?Promise { + cancel: (reason): ?Promise => { abort(request); }, }, diff --git a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js index 2036b078b760d..743e807a0594f 100644 --- a/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js +++ b/packages/react-dom/src/server/ReactDOMFizzStaticBrowser.js @@ -50,7 +50,7 @@ function prerender( const stream = new ReadableStream( { type: 'bytes', - pull(controller): ?Promise { + pull: (controller): ?Promise => { startFlowing(request, controller); }, }, diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.new.js b/packages/react-reconciler/src/ReactStrictModeWarnings.new.js index 4de90a15869a8..c9e5ffce85cfb 100644 --- a/packages/react-reconciler/src/ReactStrictModeWarnings.new.js +++ b/packages/react-reconciler/src/ReactStrictModeWarnings.new.js @@ -20,11 +20,11 @@ type FiberArray = Array; type FiberToFiberComponentsMap = Map; const ReactStrictModeWarnings = { - recordUnsafeLifecycleWarnings(fiber: Fiber, instance: any): void {}, - flushPendingUnsafeLifecycleWarnings(): void {}, - recordLegacyContextWarning(fiber: Fiber, instance: any): void {}, - flushLegacyContextWarning(): void {}, - discardPendingWarnings(): void {}, + recordUnsafeLifecycleWarnings: (fiber: Fiber, instance: any): void => {}, + flushPendingUnsafeLifecycleWarnings: (): void => {}, + recordLegacyContextWarning: (fiber: Fiber, instance: any): void => {}, + flushLegacyContextWarning: (): void => {}, + discardPendingWarnings: (): void => {}, }; if (__DEV__) { diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.old.js b/packages/react-reconciler/src/ReactStrictModeWarnings.old.js index 4de90a15869a8..c9e5ffce85cfb 100644 --- a/packages/react-reconciler/src/ReactStrictModeWarnings.old.js +++ b/packages/react-reconciler/src/ReactStrictModeWarnings.old.js @@ -20,11 +20,11 @@ type FiberArray = Array; type FiberToFiberComponentsMap = Map; const ReactStrictModeWarnings = { - recordUnsafeLifecycleWarnings(fiber: Fiber, instance: any): void {}, - flushPendingUnsafeLifecycleWarnings(): void {}, - recordLegacyContextWarning(fiber: Fiber, instance: any): void {}, - flushLegacyContextWarning(): void {}, - discardPendingWarnings(): void {}, + recordUnsafeLifecycleWarnings: (fiber: Fiber, instance: any): void => {}, + flushPendingUnsafeLifecycleWarnings: (): void => {}, + recordLegacyContextWarning: (fiber: Fiber, instance: any): void => {}, + flushLegacyContextWarning: (): void => {}, + discardPendingWarnings: (): void => {}, }; if (__DEV__) { diff --git a/packages/react-refresh/src/ReactFreshRuntime.js b/packages/react-refresh/src/ReactFreshRuntime.js index 00e7932ec401e..2a971185f337a 100644 --- a/packages/react-refresh/src/ReactFreshRuntime.js +++ b/packages/react-refresh/src/ReactFreshRuntime.js @@ -460,20 +460,18 @@ export function injectIntoGlobalHook(globalObject: any): void { globalObject.__REACT_DEVTOOLS_GLOBAL_HOOK__ = hook = { renderers: new Map(), supportsFiber: true, - inject(injected) { - return nextID++; - }, - onScheduleFiberRoot( + inject: injected => nextID++, + onScheduleFiberRoot: ( id: number, root: FiberRoot, children: ReactNodeList, - ) {}, - onCommitFiberRoot( + ) => {}, + onCommitFiberRoot: ( id: number, root: FiberRoot, maybePriorityLevel: mixed, didError: boolean, - ) {}, + ) => {}, onCommitFiberUnmount() {}, }; } diff --git a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js index 2cbd609b473f2..243040ab36131 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js +++ b/packages/react-server-dom-webpack/src/ReactFlightDOMServerBrowser.js @@ -52,13 +52,13 @@ function renderToReadableStream( const stream = new ReadableStream( { type: 'bytes', - start(controller): ?Promise { + start: (controller): ?Promise => { startWork(request); }, - pull(controller): ?Promise { + pull: (controller): ?Promise => { startFlowing(request, controller); }, - cancel(reason): ?Promise {}, + cancel: (reason): ?Promise => {}, }, // $FlowFixMe size() methods are not allowed on byte streams. {highWaterMark: 0}, diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig index 0299da6337508..03ebe986a168a 100644 --- a/scripts/flow/config/flowconfig +++ b/scripts/flow/config/flowconfig @@ -45,11 +45,9 @@ esproposal.class_instance_fields=enable esproposal.optional_chaining=enable exact_by_default=true munge_underscores=false -types_first=true -well_formed_exports=true # Substituted by createFlowConfig.js: %REACT_RENDERER_FLOW_OPTIONS% [version] -^0.142.0 +^0.143.0 diff --git a/yarn.lock b/yarn.lock index 88c7fbc092c39..33cc0aafa251a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7911,10 +7911,10 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== -flow-bin@^0.142.0: - version "0.142.0" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.142.0.tgz#b46b69de1123cf7c5a50917402968e07291df054" - integrity sha512-YgiapK/wrJjcgSgOWfoncbZ4vZrZWdHs+p7V9duI9zo4ehW2nM/VRrpSaWoZ+CWu3t+duGyAvupJvC6MM2l07w== +flow-bin@^0.143.0: + version "0.143.1" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.143.1.tgz#2ff825dfd85e84531b0ae780842cb1c2a9743cd2" + integrity sha512-6S6bgZ/pghBzEUELXkwFH/bsHT+GBMo8ftHDYs0SSJ+1e6NRdFfqxcYhaTvAK8zteSfQLZBIoec6G4WPPp4qQg== fluent-syntax@0.13.0: version "0.13.0" From d3c6c16a0312b4d2051d75aaf85bb5335a8a6fa6 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 4 Oct 2022 10:50:31 -0400 Subject: [PATCH 08/24] Flow upgrade to 0.145 Fixed a RN library definition that defined `CustomEvent` as a reference to itself. ghstack-source-id: 90da2e316f4caf3e5ff1172982f02d0a87a45ecb Pull Request resolved: https://github.com/facebook/react/pull/25409 --- package.json | 2 +- .../src/ReactNativeGetListeners.js | 3 --- scripts/flow/config/flowconfig | 2 +- scripts/flow/react-native-host-hooks.js | 13 ++++++++++++- yarn.lock | 8 ++++---- 5 files changed, 18 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index f34cce9415e38..33ca768ab71ad 100644 --- a/package.json +++ b/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.143.0", + "flow-bin": "^0.145.0", "glob": "^7.1.6", "glob-stream": "^6.1.0", "google-closure-compiler": "^20200517.0.0", diff --git a/packages/react-native-renderer/src/ReactNativeGetListeners.js b/packages/react-native-renderer/src/ReactNativeGetListeners.js index 2ab198c504383..1bd7a49acc359 100644 --- a/packages/react-native-renderer/src/ReactNativeGetListeners.js +++ b/packages/react-native-renderer/src/ReactNativeGetListeners.js @@ -122,9 +122,6 @@ export default function getListeners( detail: syntheticEvent.nativeEvent, }); eventInst.isTrusted = true; - // setSyntheticEvent is present on the React Native Event shim. - // It is used to forward method calls on Event to the underlying SyntheticEvent. - // $FlowFixMe eventInst.setSyntheticEvent(syntheticEvent); listenerObj.listener(eventInst, ...args); diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig index 03ebe986a168a..e8e11f7233f71 100644 --- a/scripts/flow/config/flowconfig +++ b/scripts/flow/config/flowconfig @@ -50,4 +50,4 @@ munge_underscores=false %REACT_RENDERER_FLOW_OPTIONS% [version] -^0.143.0 +^0.145.0 diff --git a/scripts/flow/react-native-host-hooks.js b/scripts/flow/react-native-host-hooks.js index 86f5cabe7400c..1b87cc247cc39 100644 --- a/scripts/flow/react-native-host-hooks.js +++ b/scripts/flow/react-native-host-hooks.js @@ -143,7 +143,18 @@ declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInterface' emit: (channel: string, event: RawEventEmitterEvent) => string, ... }; - declare export var CustomEvent: CustomEvent; + declare export class CustomEvent { + isTrusted: boolean; + + constructor( + name: string, + { + detail: any, + }, + ): void; + + setSyntheticEvent(event: any): void; + } } declare module 'react-native/Libraries/ReactPrivate/ReactNativePrivateInitializeCore' { diff --git a/yarn.lock b/yarn.lock index 33cc0aafa251a..6ded6d98bcb38 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7911,10 +7911,10 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== -flow-bin@^0.143.0: - version "0.143.1" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.143.1.tgz#2ff825dfd85e84531b0ae780842cb1c2a9743cd2" - integrity sha512-6S6bgZ/pghBzEUELXkwFH/bsHT+GBMo8ftHDYs0SSJ+1e6NRdFfqxcYhaTvAK8zteSfQLZBIoec6G4WPPp4qQg== +flow-bin@^0.145.0: + version "0.145.0" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.145.0.tgz#922f7c3568caaa5eb64621ec536deb56b24d1795" + integrity sha512-+9fi9BMxRBtSWC1x0hWggWTb8Vih+AC7wyvLAX5wR1m6u2lF2HLtixXqy2GX8bWgaynSEJR5lmPxYYC4wMI8cA== fluent-syntax@0.13.0: version "0.13.0" From 64fe791be84ad04a4a1d005376ba5cf5701db9b7 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 4 Oct 2022 10:50:34 -0400 Subject: [PATCH 09/24] Flow upgrade to 0.146 This upgrade made more expressions invalidate refinements. In some places this lead to a large number of suppressions that I automatically suppressed and should be followed up on when the code is touched. I think most of them might require either manual annotations or moving a value into a const to allow refinement. ghstack-source-id: a45b40abf03474b691a2dc18a4f1f3b06cfbdffd Pull Request resolved: https://github.com/facebook/react/pull/25410 --- package.json | 2 +- packages/react-devtools-core/src/editor.js | 1 + .../src/backend/profilingHooks.js | 10 ++++++++++ .../react-devtools-shared/src/backend/renderer.js | 11 ++++++++++- .../views/Components/OwnersListContext.js | 2 ++ .../parseHookNames/parseSourceAndMetadata.js | 1 + .../src/inspectedElementMutableSource.js | 2 ++ packages/react-devtools/app.js | 4 ++++ .../src/client/ReactDOMFloatClient.js | 3 +++ .../src/events/plugins/BeforeInputEventPlugin.js | 1 + .../src/events/plugins/EnterLeaveEventPlugin.js | 1 + .../src/server/ReactDOMFloatServer.js | 15 +++++++++++++++ packages/react-fs/src/ReactFilesystem.js | 6 ++++++ .../src/ReactNativeAttributePayload.js | 4 +++- .../src/ReactFiberCommitWork.new.js | 4 ++++ .../src/ReactFiberCommitWork.old.js | 4 ++++ .../src/ReactFiberHotReloading.new.js | 1 + .../src/ReactFiberHotReloading.old.js | 1 + .../src/ReactFiberSyncTaskQueue.new.js | 2 ++ .../src/ReactFiberSyncTaskQueue.old.js | 2 ++ .../src/ReactFiberWorkLoop.new.js | 9 ++++++++- .../src/ReactFiberWorkLoop.old.js | 9 ++++++++- .../src/ReactFlightWebpackPlugin.js | 2 ++ packages/react-server/src/ReactFizzHooks.js | 10 ++++++++++ packages/react-server/src/ReactFlightHooks.js | 1 + .../src/ReactServerStreamConfigNode.js | 1 + .../react-test-renderer/src/ReactTestRenderer.js | 1 + packages/react/src/ReactStartTransition.js | 1 + packages/scheduler/src/SchedulerProfiling.js | 1 + packages/scheduler/src/forks/Scheduler.js | 12 ++++++++++++ packages/scheduler/src/forks/SchedulerMock.js | 14 ++++++++++++++ scripts/flow/config/flowconfig | 2 +- yarn.lock | 8 ++++---- 33 files changed, 138 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 33ca768ab71ad..5b870e97c3308 100644 --- a/package.json +++ b/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.145.0", + "flow-bin": "^0.146.0", "glob": "^7.1.6", "glob-stream": "^6.1.0", "google-closure-compiler": "^20200517.0.0", diff --git a/packages/react-devtools-core/src/editor.js b/packages/react-devtools-core/src/editor.js index a570befd9ef24..1867551e57385 100644 --- a/packages/react-devtools-core/src/editor.js +++ b/packages/react-devtools-core/src/editor.js @@ -186,6 +186,7 @@ export function launchEditor( childProcess = spawn(editor, args, {stdio: 'inherit'}); } childProcess.on('error', function() {}); + // $FlowFixMe[incompatible-use] found when upgrading Flow childProcess.on('exit', function(errorCode) { childProcess = null; }); diff --git a/packages/react-devtools-shared/src/backend/profilingHooks.js b/packages/react-devtools-shared/src/backend/profilingHooks.js index bd08fef3505af..47dd5a3baa1ae 100644 --- a/packages/react-devtools-shared/src/backend/profilingHooks.js +++ b/packages/react-devtools-shared/src/backend/profilingHooks.js @@ -350,7 +350,9 @@ export function createProfilingHooks({ ); } + // $FlowFixMe[incompatible-use] found when upgrading Flow currentReactComponentMeasure.duration = + // $FlowFixMe[incompatible-use] found when upgrading Flow getRelativeTime() - currentReactComponentMeasure.timestamp; currentReactComponentMeasure = null; } @@ -393,7 +395,9 @@ export function createProfilingHooks({ ); } + // $FlowFixMe[incompatible-use] found when upgrading Flow currentReactComponentMeasure.duration = + // $FlowFixMe[incompatible-use] found when upgrading Flow getRelativeTime() - currentReactComponentMeasure.timestamp; currentReactComponentMeasure = null; } @@ -438,7 +442,9 @@ export function createProfilingHooks({ ); } + // $FlowFixMe[incompatible-use] found when upgrading Flow currentReactComponentMeasure.duration = + // $FlowFixMe[incompatible-use] found when upgrading Flow getRelativeTime() - currentReactComponentMeasure.timestamp; currentReactComponentMeasure = null; } @@ -481,7 +487,9 @@ export function createProfilingHooks({ ); } + // $FlowFixMe[incompatible-use] found when upgrading Flow currentReactComponentMeasure.duration = + // $FlowFixMe[incompatible-use] found when upgrading Flow getRelativeTime() - currentReactComponentMeasure.timestamp; currentReactComponentMeasure = null; } @@ -526,7 +534,9 @@ export function createProfilingHooks({ ); } + // $FlowFixMe[incompatible-use] found when upgrading Flow currentReactComponentMeasure.duration = + // $FlowFixMe[incompatible-use] found when upgrading Flow getRelativeTime() - currentReactComponentMeasure.timestamp; currentReactComponentMeasure = null; } diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index 9e0d8c278c45f..8e249f1a3b7db 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -1310,6 +1310,7 @@ export function attach( const id = getFiberIDThrows(fiber); const contexts = getContextsForFiber(fiber); if (contexts !== null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow idToContextsMap.set(id, contexts); } } @@ -1380,8 +1381,10 @@ export function attach( function getContextChangedKeys(fiber: Fiber): null | boolean | Array { if (idToContextsMap !== null) { const id = getFiberIDThrows(fiber); + // $FlowFixMe[incompatible-use] found when upgrading Flow const prevContexts = idToContextsMap.has(id) - ? idToContextsMap.get(id) + ? // $FlowFixMe[incompatible-use] found when upgrading Flow + idToContextsMap.get(id) : null; const nextContexts = getContextsForFiber(fiber); @@ -2636,7 +2639,9 @@ export function attach( const {effectDuration, passiveEffectDuration} = getEffectDurations( root, ); + // $FlowFixMe[incompatible-use] found when upgrading Flow currentCommitProfilingMetadata.effectDuration = effectDuration; + // $FlowFixMe[incompatible-use] found when upgrading Flow currentCommitProfilingMetadata.passiveEffectDuration = passiveEffectDuration; } } @@ -3702,6 +3707,7 @@ export function attach( id, responseID: requestID, type: 'full-data', + // $FlowFixMe[incompatible-return] found when upgrading Flow value: cleanedInspectedElement, }; } @@ -4276,6 +4282,7 @@ export function attach( ) { // Is this the next Fiber we should select? Let's compare the frames. const actualFrame = getPathFrame(fiber); + // $FlowFixMe[incompatible-use] found when upgrading Flow const expectedFrame = trackedPath[trackedPathMatchDepth + 1]; if (expectedFrame === undefined) { throw new Error('Expected to see a frame at the next depth.'); @@ -4289,6 +4296,7 @@ export function attach( trackedPathMatchFiber = fiber; trackedPathMatchDepth++; // Are we out of frames to match? + // $FlowFixMe[incompatible-use] found when upgrading Flow if (trackedPathMatchDepth === trackedPath.length - 1) { // There's nothing that can possibly match afterwards. // Don't check the children. @@ -4443,6 +4451,7 @@ export function attach( } return { id: getFiberIDThrows(fiber), + // $FlowFixMe[incompatible-use] found when upgrading Flow isFullMatch: trackedPathMatchDepth === trackedPath.length - 1, }; } diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js index 8d1f58ef28dc9..a6f929c46dacf 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js @@ -45,6 +45,7 @@ const resource: Resource< (element: Element) => { const request = inProgressRequests.get(element); if (request != null) { + // $FlowFixMe[incompatible-call] found when upgrading Flow return request.promise; } @@ -53,6 +54,7 @@ const resource: Resource< resolveFn = resolve; }); + // $FlowFixMe[incompatible-call] found when upgrading Flow inProgressRequests.set(element, {promise, resolveFn}); return promise; diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js index ba3c1e096b67b..15c3202b88457 100644 --- a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js +++ b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js @@ -186,6 +186,7 @@ function findHookNames( } const key = getHookSourceLocationKey(hookSource); + // $FlowFixMe[incompatible-call] found when upgrading Flow map.set(key, name); }); diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js index 96021dd2ae25e..7c3704ee424fb 100644 --- a/packages/react-devtools-shared/src/inspectedElementMutableSource.js +++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js @@ -137,6 +137,7 @@ export function inspectElement({ // A path has been hydrated. // Merge it with the latest copy we have locally and resolve with the merged value. + // $FlowFixMe[incompatible-type] found when upgrading Flow inspectedElement = inspectedElementCache.get(id) || null; if (inspectedElement !== null) { // Clone element @@ -150,6 +151,7 @@ export function inspectElement({ hydrateHelper(value, ((path: any): Path)), ); + // $FlowFixMe[incompatible-call] found when upgrading Flow inspectedElementCache.set(id, inspectedElement); return [inspectedElement, type]; diff --git a/packages/react-devtools/app.js b/packages/react-devtools/app.js index e33a425633448..ec0793a5bb9e1 100644 --- a/packages/react-devtools/app.js +++ b/packages/react-devtools/app.js @@ -40,13 +40,16 @@ app.on('ready', function() { } // https://stackoverflow.com/questions/32402327/ + // $FlowFixMe[incompatible-use] found when upgrading Flow mainWindow.webContents.on('new-window', function(event, url) { event.preventDefault(); require('electron').shell.openExternal(url); }); // and load the index.html of the app. + // $FlowFixMe[incompatible-use] found when upgrading Flow mainWindow.loadURL('file://' + __dirname + '/app.html'); // eslint-disable-line no-path-concat + // $FlowFixMe[incompatible-use] found when upgrading Flow mainWindow.webContents.executeJavaScript( // We use this so that RN can keep relative JSX __source filenames // but "click to open in editor" still works. js1 passes project roots @@ -55,6 +58,7 @@ app.on('ready', function() { ); // Emitted when the window is closed. + // $FlowFixMe[incompatible-use] found when upgrading Flow mainWindow.on('closed', function() { mainWindow = null; }); diff --git a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js index 716c2c679eba8..0658e14134770 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js +++ b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js @@ -241,6 +241,7 @@ function preinit(href: string, options: PreinitOptions) { options, ); resource = createStyleResource( + // $FlowFixMe[incompatible-call] found when upgrading Flow currentDocument, href, precedence, @@ -347,6 +348,7 @@ export function getResource( } else { const resourceProps = stylePropsFromRawProps(styleRawProps); resource = createStyleResource( + // $FlowFixMe[incompatible-call] found when upgrading Flow currentDocument, href, precedence, @@ -382,6 +384,7 @@ export function getResource( } else { const resourceProps = preloadPropsFromRawProps(preloadRawProps); resource = createPreloadResource( + // $FlowFixMe[incompatible-call] found when upgrading Flow currentDocument, href, resourceProps, diff --git a/packages/react-dom-bindings/src/events/plugins/BeforeInputEventPlugin.js b/packages/react-dom-bindings/src/events/plugins/BeforeInputEventPlugin.js index c9f18c6abf7c4..a4554f6c9213a 100644 --- a/packages/react-dom-bindings/src/events/plugins/BeforeInputEventPlugin.js +++ b/packages/react-dom-bindings/src/events/plugins/BeforeInputEventPlugin.js @@ -227,6 +227,7 @@ function extractCompositionEvent( } } + // $FlowFixMe[incompatible-call] found when upgrading Flow const listeners = accumulateTwoPhaseListeners(targetInst, eventType); if (listeners.length > 0) { // $FlowFixMe[incompatible-type] diff --git a/packages/react-dom-bindings/src/events/plugins/EnterLeaveEventPlugin.js b/packages/react-dom-bindings/src/events/plugins/EnterLeaveEventPlugin.js index ef90afcec0414..4183b8785620a 100644 --- a/packages/react-dom-bindings/src/events/plugins/EnterLeaveEventPlugin.js +++ b/packages/react-dom-bindings/src/events/plugins/EnterLeaveEventPlugin.js @@ -104,6 +104,7 @@ function extractEvents( const nearestMounted = getNearestMountedFiber(to); if ( to !== nearestMounted || + // $FlowFixMe[incompatible-use] found when upgrading Flow (to.tag !== HostComponent && to.tag !== HostText) ) { to = null; diff --git a/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js b/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js index aef1d3553959f..59c77ee6f781e 100644 --- a/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js +++ b/packages/react-dom-bindings/src/server/ReactDOMFloatServer.js @@ -144,6 +144,7 @@ function preload(href: string, options: PreloadOptions) { options !== null ) { const as = options.as; + // $FlowFixMe[incompatible-use] found when upgrading Flow let resource = currentResources.preloadsMap.get(href); if (resource) { if (__DEV__) { @@ -159,12 +160,14 @@ function preload(href: string, options: PreloadOptions) { } } else { resource = createPreloadResource( + // $FlowFixMe[incompatible-call] found when upgrading Flow currentResources, href, as, preloadPropsFromPreloadOptions(href, as, options), ); } + // $FlowFixMe[incompatible-call] found when upgrading Flow captureExplicitPreloadResourceDependency(currentResources, resource); } } @@ -199,6 +202,7 @@ function preinit(href: string, options: PreinitOptions) { case 'style': { const precedence = options.precedence || 'default'; + // $FlowFixMe[incompatible-use] found when upgrading Flow let resource = currentResources.stylesMap.get(href); if (resource) { if (__DEV__) { @@ -216,6 +220,7 @@ function preinit(href: string, options: PreinitOptions) { options, ); resource = createStyleResource( + // $FlowFixMe[incompatible-call] found when upgrading Flow currentResources, href, precedence, @@ -224,6 +229,7 @@ function preinit(href: string, options: PreinitOptions) { } // Do not associate preinit style resources with any specific boundary regardless of where it is called + // $FlowFixMe[incompatible-call] found when upgrading Flow captureStyleResourceDependency(currentResources, null, resource); return; @@ -459,9 +465,11 @@ export function resourcesFromLink(props: Props): boolean { if (__DEV__) { validateLinkPropsForStyleResource(props); } + // $FlowFixMe[incompatible-use] found when upgrading Flow let preloadResource = currentResources.preloadsMap.get(href); if (!preloadResource) { preloadResource = createPreloadResource( + // $FlowFixMe[incompatible-call] found when upgrading Flow currentResources, href, 'style', @@ -472,6 +480,7 @@ export function resourcesFromLink(props: Props): boolean { } } captureImplicitPreloadResourceDependency( + // $FlowFixMe[incompatible-call] found when upgrading Flow currentResources, preloadResource, ); @@ -492,6 +501,7 @@ export function resourcesFromLink(props: Props): boolean { } else { const resourceProps = stylePropsFromRawProps(href, precedence, props); resource = createStyleResource( + // $FlowFixMe[incompatible-call] found when upgrading Flow currentResources, href, precedence, @@ -499,7 +509,9 @@ export function resourcesFromLink(props: Props): boolean { ); } captureStyleResourceDependency( + // $FlowFixMe[incompatible-call] found when upgrading Flow currentResources, + // $FlowFixMe[incompatible-use] found when upgrading Flow currentResources.boundaryResources, resource, ); @@ -519,6 +531,7 @@ export function resourcesFromLink(props: Props): boolean { if (__DEV__) { validateLinkPropsForPreloadResource(props); } + // $FlowFixMe[incompatible-use] found when upgrading Flow let resource = currentResources.preloadsMap.get(href); if (resource) { if (__DEV__) { @@ -534,12 +547,14 @@ export function resourcesFromLink(props: Props): boolean { } } else { resource = createPreloadResource( + // $FlowFixMe[incompatible-call] found when upgrading Flow currentResources, href, as, preloadPropsFromRawProps(href, as, props), ); } + // $FlowFixMe[incompatible-call] found when upgrading Flow captureExplicitPreloadResourceDependency(currentResources, resource); return true; } diff --git a/packages/react-fs/src/ReactFilesystem.js b/packages/react-fs/src/ReactFilesystem.js index 782d35728c401..da8d43c535243 100644 --- a/packages/react-fs/src/ReactFilesystem.js +++ b/packages/react-fs/src/ReactFilesystem.js @@ -121,6 +121,7 @@ export function access(path: string, mode?: number): void { record = createRecordFromThenable(thenable); accessCache.push(mode, record); } + // $FlowFixMe[incompatible-call] found when upgrading Flow readRecord(record); // No return value. } @@ -154,6 +155,7 @@ export function lstat(path: string, options?: {bigint?: boolean}): mixed { record = createRecordFromThenable(thenable); lstatCache.push(bigint, record); } + // $FlowFixMe[incompatible-call] found when upgrading Flow const stats = readRecord(record).value; return stats; } @@ -203,6 +205,7 @@ export function readdir( record = createRecordFromThenable(thenable); readdirCache.push(encoding, withFileTypes, record); } + // $FlowFixMe[incompatible-call] found when upgrading Flow const files = readRecord(record).value; return files; } @@ -301,6 +304,7 @@ export function readlink( record = createRecordFromThenable(thenable); readlinkCache.push(encoding, record); } + // $FlowFixMe[incompatible-call] found when upgrading Flow const linkString = readRecord(record).value; return linkString; } @@ -342,6 +346,7 @@ export function realpath( record = createRecordFromThenable(thenable); realpathCache.push(encoding, record); } + // $FlowFixMe[incompatible-call] found when upgrading Flow const resolvedPath = readRecord(record).value; return resolvedPath; } @@ -376,6 +381,7 @@ export function stat(path: string, options?: {bigint?: boolean}): mixed { record = createRecordFromThenable(thenable); statCache.push(bigint, record); } + // $FlowFixMe[incompatible-call] found when upgrading Flow const stats = readRecord(record).value; return stats; } diff --git a/packages/react-native-renderer/src/ReactNativeAttributePayload.js b/packages/react-native-renderer/src/ReactNativeAttributePayload.js index d388f4046a011..effdf12bace1e 100644 --- a/packages/react-native-renderer/src/ReactNativeAttributePayload.js +++ b/packages/react-native-renderer/src/ReactNativeAttributePayload.js @@ -98,6 +98,7 @@ function restoreDeletedValuesInNestedArray( : nextProp; updatePayload[propKey] = nextValue; } + // $FlowFixMe[incompatible-use] found when upgrading Flow removedKeys[propKey] = false; removedKeyCount--; } @@ -356,7 +357,8 @@ function diffProperties( if (shouldUpdate) { const nextValue = typeof attributeConfig.process === 'function' - ? attributeConfig.process(nextProp) + ? // $FlowFixMe[incompatible-use] found when upgrading Flow + attributeConfig.process(nextProp) : nextProp; (updatePayload || (updatePayload = {}))[propKey] = nextValue; } diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js index 71937836b59d0..bea625a59023f 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js @@ -350,6 +350,7 @@ function commitBeforeMutationEffects_begin() { // Let's skip the whole loop if it's off. if (enableCreateEventHandleAPI) { // TODO: Should wrap this in flags check, too, as optimization + // $FlowFixMe[incompatible-use] found when upgrading Flow const deletions = fiber.deletions; if (deletions !== null) { for (let i = 0; i < deletions.length; i++) { @@ -359,8 +360,10 @@ function commitBeforeMutationEffects_begin() { } } + // $FlowFixMe[incompatible-use] found when upgrading Flow const child = fiber.child; if ( + // $FlowFixMe[incompatible-use] found when upgrading Flow (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags && child !== null ) { @@ -405,6 +408,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) { if ( finishedWork.tag === SuspenseComponent && isSuspenseBoundaryBeingHidden(current, finishedWork) && + // $FlowFixMe[incompatible-call] found when upgrading Flow doesFiberContain(finishedWork, focusedInstanceHandle) ) { shouldFireAfterActiveInstanceBlur = true; diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js index f54bfe22d9652..09cda5a2ef0fc 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js @@ -350,6 +350,7 @@ function commitBeforeMutationEffects_begin() { // Let's skip the whole loop if it's off. if (enableCreateEventHandleAPI) { // TODO: Should wrap this in flags check, too, as optimization + // $FlowFixMe[incompatible-use] found when upgrading Flow const deletions = fiber.deletions; if (deletions !== null) { for (let i = 0; i < deletions.length; i++) { @@ -359,8 +360,10 @@ function commitBeforeMutationEffects_begin() { } } + // $FlowFixMe[incompatible-use] found when upgrading Flow const child = fiber.child; if ( + // $FlowFixMe[incompatible-use] found when upgrading Flow (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags && child !== null ) { @@ -405,6 +408,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) { if ( finishedWork.tag === SuspenseComponent && isSuspenseBoundaryBeingHidden(current, finishedWork) && + // $FlowFixMe[incompatible-call] found when upgrading Flow doesFiberContain(finishedWork, focusedInstanceHandle) ) { shouldFireAfterActiveInstanceBlur = true; diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.new.js b/packages/react-reconciler/src/ReactFiberHotReloading.new.js index 96eefa62f7905..223ba8088d8fa 100644 --- a/packages/react-reconciler/src/ReactFiberHotReloading.new.js +++ b/packages/react-reconciler/src/ReactFiberHotReloading.new.js @@ -191,6 +191,7 @@ export function isCompatibleFamilyForHotReloading( // then we would risk falsely saying two separate memo(Foo) // calls are equivalent because they wrap the same Foo function. const prevFamily = resolveFamily(prevType); + // $FlowFixMe[not-a-function] found when upgrading Flow if (prevFamily !== undefined && prevFamily === resolveFamily(nextType)) { return true; } diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.old.js b/packages/react-reconciler/src/ReactFiberHotReloading.old.js index 5b08bdf35f311..0d4af2cad05e4 100644 --- a/packages/react-reconciler/src/ReactFiberHotReloading.old.js +++ b/packages/react-reconciler/src/ReactFiberHotReloading.old.js @@ -191,6 +191,7 @@ export function isCompatibleFamilyForHotReloading( // then we would risk falsely saying two separate memo(Foo) // calls are equivalent because they wrap the same Foo function. const prevFamily = resolveFamily(prevType); + // $FlowFixMe[not-a-function] found when upgrading Flow if (prevFamily !== undefined && prevFamily === resolveFamily(nextType)) { return true; } diff --git a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js index 73c04034b7e9d..a1ef7d64bbf2e 100644 --- a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js +++ b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js @@ -60,7 +60,9 @@ export function flushSyncCallbacks(): null { // TODO: Is this necessary anymore? The only user code that runs in this // queue is in the render or commit phases. setCurrentUpdatePriority(DiscreteEventPriority); + // $FlowFixMe[incompatible-use] found when upgrading Flow for (; i < queue.length; i++) { + // $FlowFixMe[incompatible-use] found when upgrading Flow let callback = queue[i]; do { callback = callback(isSync); diff --git a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js index 12d8371b72251..9286a9d156e6e 100644 --- a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js +++ b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js @@ -60,7 +60,9 @@ export function flushSyncCallbacks(): null { // TODO: Is this necessary anymore? The only user code that runs in this // queue is in the render or commit phases. setCurrentUpdatePriority(DiscreteEventPriority); + // $FlowFixMe[incompatible-use] found when upgrading Flow for (; i < queue.length; i++) { + // $FlowFixMe[incompatible-use] found when upgrading Flow let callback = queue[i]; do { callback = callback(isSync); diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index 34b9d3f10c06b..04909c9c2d1d8 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js @@ -415,6 +415,7 @@ export function addMarkerProgressCallbackToPendingTransition( } if (currentPendingTransitionCallbacks.markerProgress === null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow currentPendingTransitionCallbacks.markerProgress = new Map(); } @@ -443,6 +444,7 @@ export function addMarkerIncompleteCallbackToPendingTransition( } if (currentPendingTransitionCallbacks.markerIncomplete === null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow currentPendingTransitionCallbacks.markerIncomplete = new Map(); } @@ -470,6 +472,7 @@ export function addMarkerCompleteCallbackToPendingTransition( } if (currentPendingTransitionCallbacks.markerComplete === null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow currentPendingTransitionCallbacks.markerComplete = new Map(); } @@ -497,6 +500,7 @@ export function addTransitionProgressCallbackToPendingTransition( } if (currentPendingTransitionCallbacks.transitionProgress === null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow currentPendingTransitionCallbacks.transitionProgress = new Map(); } @@ -1670,7 +1674,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber { if (workInProgress !== null) { let interruptedWork = workInProgressIsSuspended ? workInProgress - : workInProgress.return; + : // $FlowFixMe[incompatible-use] found when upgrading Flow + workInProgress.return; while (interruptedWork !== null) { const current = interruptedWork.alternate; unwindInterruptedWork( @@ -3052,10 +3057,12 @@ export function attachPingListener( pingCache.set(wakeable, threadIDs); } } + // $FlowFixMe[incompatible-use] found when upgrading Flow if (!threadIDs.has(lanes)) { workInProgressRootDidAttachPingListener = true; // Memoize using the thread ID to prevent redundant listeners. + // $FlowFixMe[incompatible-use] found when upgrading Flow threadIDs.add(lanes); const ping = pingSuspendedRoot.bind(null, root, wakeable, lanes); if (enableUpdaterTracking) { diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index b5cd4565ef104..85ac3813d54a5 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js @@ -415,6 +415,7 @@ export function addMarkerProgressCallbackToPendingTransition( } if (currentPendingTransitionCallbacks.markerProgress === null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow currentPendingTransitionCallbacks.markerProgress = new Map(); } @@ -443,6 +444,7 @@ export function addMarkerIncompleteCallbackToPendingTransition( } if (currentPendingTransitionCallbacks.markerIncomplete === null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow currentPendingTransitionCallbacks.markerIncomplete = new Map(); } @@ -470,6 +472,7 @@ export function addMarkerCompleteCallbackToPendingTransition( } if (currentPendingTransitionCallbacks.markerComplete === null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow currentPendingTransitionCallbacks.markerComplete = new Map(); } @@ -497,6 +500,7 @@ export function addTransitionProgressCallbackToPendingTransition( } if (currentPendingTransitionCallbacks.transitionProgress === null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow currentPendingTransitionCallbacks.transitionProgress = new Map(); } @@ -1670,7 +1674,8 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber { if (workInProgress !== null) { let interruptedWork = workInProgressIsSuspended ? workInProgress - : workInProgress.return; + : // $FlowFixMe[incompatible-use] found when upgrading Flow + workInProgress.return; while (interruptedWork !== null) { const current = interruptedWork.alternate; unwindInterruptedWork( @@ -3052,10 +3057,12 @@ export function attachPingListener( pingCache.set(wakeable, threadIDs); } } + // $FlowFixMe[incompatible-use] found when upgrading Flow if (!threadIDs.has(lanes)) { workInProgressRootDidAttachPingListener = true; // Memoize using the thread ID to prevent redundant listeners. + // $FlowFixMe[incompatible-use] found when upgrading Flow threadIDs.add(lanes); const ping = pingSuspendedRoot.bind(null, root, wakeable, lanes); if (enableUpdaterTracking) { diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js index bbc26b6c84f83..f0b66659a4a70 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js +++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js @@ -159,7 +159,9 @@ export default class ReactFlightWebpackPlugin { clientFileNameFound = true; if (resolvedClientReferences) { + // $FlowFixMe[incompatible-use] found when upgrading Flow for (let i = 0; i < resolvedClientReferences.length; i++) { + // $FlowFixMe[incompatible-use] found when upgrading Flow const dep = resolvedClientReferences[i]; const chunkName = _this.chunkName diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js index cfa5808609eb6..48b18c7b3dfcd 100644 --- a/packages/react-server/src/ReactFizzHooks.js +++ b/packages/react-server/src/ReactFizzHooks.js @@ -182,6 +182,7 @@ function createWorkInProgressHook(): Hook { if (workInProgressHook.next === null) { isReRender = false; // Append to the end of the list + // $FlowFixMe[incompatible-use] found when upgrading Flow workInProgressHook = workInProgressHook.next = createHook(); } else { // There's already a work-in-progress. Reuse it. @@ -339,7 +340,9 @@ export function useReducer( // Render phase updates are stored in a map of queue -> linked list const firstRenderPhaseUpdate = renderPhaseUpdates.get(queue); if (firstRenderPhaseUpdate !== undefined) { + // $FlowFixMe[incompatible-use] found when upgrading Flow renderPhaseUpdates.delete(queue); + // $FlowFixMe[incompatible-use] found when upgrading Flow let newState = workInProgressHook.memoizedState; let update = firstRenderPhaseUpdate; do { @@ -357,11 +360,13 @@ export function useReducer( update = update.next; } while (update !== null); + // $FlowFixMe[incompatible-use] found when upgrading Flow workInProgressHook.memoizedState = newState; return [newState, dispatch]; } } + // $FlowFixMe[incompatible-use] found when upgrading Flow return [workInProgressHook.memoizedState, dispatch]; } else { if (__DEV__) { @@ -381,7 +386,9 @@ export function useReducer( if (__DEV__) { isInHookUserCodeInDev = false; } + // $FlowFixMe[incompatible-use] found when upgrading Flow workInProgressHook.memoizedState = initialState; + // $FlowFixMe[incompatible-use] found when upgrading Flow const queue: UpdateQueue = (workInProgressHook.queue = { last: null, dispatch: null, @@ -391,6 +398,7 @@ export function useReducer( currentlyRenderingComponent, queue, ): any)); + // $FlowFixMe[incompatible-use] found when upgrading Flow return [workInProgressHook.memoizedState, dispatch]; } } @@ -420,6 +428,7 @@ function useMemo(nextCreate: () => T, deps: Array | void | null): T { if (__DEV__) { isInHookUserCodeInDev = false; } + // $FlowFixMe[incompatible-use] found when upgrading Flow workInProgressHook.memoizedState = [nextValue, nextDeps]; return nextValue; } @@ -483,6 +492,7 @@ function dispatchAction( } const firstRenderPhaseUpdate = renderPhaseUpdates.get(queue); if (firstRenderPhaseUpdate === undefined) { + // $FlowFixMe[incompatible-use] found when upgrading Flow renderPhaseUpdates.set(queue, update); } else { // Append the update to the end of the list. diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js index aa6358efcd4dc..b2fef5969c53c 100644 --- a/packages/react-server/src/ReactFlightHooks.js +++ b/packages/react-server/src/ReactFlightHooks.js @@ -83,6 +83,7 @@ export const Dispatcher: DispatcherType = { if (entry === undefined) { entry = resourceType(); // TODO: Warn if undefined? + // $FlowFixMe[incompatible-use] found when upgrading Flow currentCache.set(resourceType, entry); } return entry; diff --git a/packages/react-server/src/ReactServerStreamConfigNode.js b/packages/react-server/src/ReactServerStreamConfigNode.js index c34d288cd2a4f..cb92d8d18466b 100644 --- a/packages/react-server/src/ReactServerStreamConfigNode.js +++ b/packages/react-server/src/ReactServerStreamConfigNode.js @@ -73,6 +73,7 @@ function writeStringChunk(destination: Destination, stringChunk: string) { if (read < stringChunk.length) { writeToDestination(destination, (currentView: any)); currentView = new Uint8Array(VIEW_SIZE); + // $FlowFixMe[incompatible-call] found when upgrading Flow writtenBytes = textEncoder.encodeInto(stringChunk.slice(read), currentView) .written; } diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js index f0ba1fce9c0b6..0b5947729bbe6 100644 --- a/packages/react-test-renderer/src/ReactTestRenderer.js +++ b/packages/react-test-renderer/src/ReactTestRenderer.js @@ -593,6 +593,7 @@ function create( } else { // However, we give you the root if there's more than one root child. // We could make this the behavior for all cases but it would be a breaking change. + // $FlowFixMe[incompatible-use] found when upgrading Flow return wrapFiber(root.current); } }, diff --git a/packages/react/src/ReactStartTransition.js b/packages/react/src/ReactStartTransition.js index 634f5442645f7..678daf9832ebc 100644 --- a/packages/react/src/ReactStartTransition.js +++ b/packages/react/src/ReactStartTransition.js @@ -20,6 +20,7 @@ export function startTransition( const currentTransition = ReactCurrentBatchConfig.transition; if (__DEV__) { + // $FlowFixMe[incompatible-use] found when upgrading Flow ReactCurrentBatchConfig.transition._updatedFibers = new Set(); } diff --git a/packages/scheduler/src/SchedulerProfiling.js b/packages/scheduler/src/SchedulerProfiling.js index b31e27bbebf4b..4972c6018e199 100644 --- a/packages/scheduler/src/SchedulerProfiling.js +++ b/packages/scheduler/src/SchedulerProfiling.js @@ -47,6 +47,7 @@ function logEvent(entries) { return; } const newEventLog = new Int32Array(eventLogSize * 4); + // $FlowFixMe[incompatible-call] found when upgrading Flow newEventLog.set(eventLog); eventLogBuffer = newEventLog.buffer; eventLog = newEventLog; diff --git a/packages/scheduler/src/forks/Scheduler.js b/packages/scheduler/src/forks/Scheduler.js index fedc4510f7420..4c8b39c95fe78 100644 --- a/packages/scheduler/src/forks/Scheduler.js +++ b/packages/scheduler/src/forks/Scheduler.js @@ -183,7 +183,9 @@ function flushWork(hasTimeRemaining, initialTime) { } catch (error) { if (currentTask !== null) { const currentTime = getCurrentTime(); + // $FlowFixMe[incompatible-call] found when upgrading Flow markTaskErrored(currentTask, currentTime); + // $FlowFixMe[incompatible-use] found when upgrading Flow currentTask.isQueued = false; } throw error; @@ -218,12 +220,17 @@ function workLoop(hasTimeRemaining, initialTime) { // This currentTask hasn't expired, and we've reached the deadline. break; } + // $FlowFixMe[incompatible-use] found when upgrading Flow const callback = currentTask.callback; if (typeof callback === 'function') { + // $FlowFixMe[incompatible-use] found when upgrading Flow currentTask.callback = null; + // $FlowFixMe[incompatible-use] found when upgrading Flow currentPriorityLevel = currentTask.priorityLevel; + // $FlowFixMe[incompatible-use] found when upgrading Flow const didUserCallbackTimeout = currentTask.expirationTime <= currentTime; if (enableProfiling) { + // $FlowFixMe[incompatible-call] found when upgrading Flow markTaskRun(currentTask, currentTime); } const continuationCallback = callback(didUserCallbackTimeout); @@ -231,15 +238,19 @@ function workLoop(hasTimeRemaining, initialTime) { if (typeof continuationCallback === 'function') { // If a continuation is returned, immediately yield to the main thread // regardless of how much time is left in the current time slice. + // $FlowFixMe[incompatible-use] found when upgrading Flow currentTask.callback = continuationCallback; if (enableProfiling) { + // $FlowFixMe[incompatible-call] found when upgrading Flow markTaskYield(currentTask, currentTime); } advanceTimers(currentTime); return true; } else { if (enableProfiling) { + // $FlowFixMe[incompatible-call] found when upgrading Flow markTaskCompleted(currentTask, currentTime); + // $FlowFixMe[incompatible-use] found when upgrading Flow currentTask.isQueued = false; } if (currentTask === peek(taskQueue)) { @@ -564,6 +575,7 @@ const performWorkUntilDeadline = () => { // `hasMoreWork` will remain true, and we'll continue the work loop. let hasMoreWork = true; try { + // $FlowFixMe[not-a-function] found when upgrading Flow hasMoreWork = scheduledHostCallback(hasTimeRemaining, currentTime); } finally { if (hasMoreWork) { diff --git a/packages/scheduler/src/forks/SchedulerMock.js b/packages/scheduler/src/forks/SchedulerMock.js index d7402dcb19621..ef1d03a9bd595 100644 --- a/packages/scheduler/src/forks/SchedulerMock.js +++ b/packages/scheduler/src/forks/SchedulerMock.js @@ -169,7 +169,9 @@ function flushWork(hasTimeRemaining: boolean, initialTime: number) { } catch (error) { if (currentTask !== null) { const currentTime = getCurrentTime(); + // $FlowFixMe[incompatible-call] found when upgrading Flow markTaskErrored(currentTask, currentTime); + // $FlowFixMe[incompatible-use] found when upgrading Flow currentTask.isQueued = false; } throw error; @@ -204,12 +206,17 @@ function workLoop(hasTimeRemaining, initialTime: number): boolean { // This currentTask hasn't expired, and we've reached the deadline. break; } + // $FlowFixMe[incompatible-use] found when upgrading Flow const callback = currentTask.callback; if (typeof callback === 'function') { + // $FlowFixMe[incompatible-use] found when upgrading Flow currentTask.callback = null; + // $FlowFixMe[incompatible-use] found when upgrading Flow currentPriorityLevel = currentTask.priorityLevel; + // $FlowFixMe[incompatible-use] found when upgrading Flow const didUserCallbackTimeout = currentTask.expirationTime <= currentTime; if (enableProfiling) { + // $FlowFixMe[incompatible-call] found when upgrading Flow markTaskRun(currentTask, currentTime); } const continuationCallback = callback(didUserCallbackTimeout); @@ -217,8 +224,10 @@ function workLoop(hasTimeRemaining, initialTime: number): boolean { if (typeof continuationCallback === 'function') { // If a continuation is returned, immediately yield to the main thread // regardless of how much time is left in the current time slice. + // $FlowFixMe[incompatible-use] found when upgrading Flow currentTask.callback = continuationCallback; if (enableProfiling) { + // $FlowFixMe[incompatible-call] found when upgrading Flow markTaskYield(currentTask, currentTime); } advanceTimers(currentTime); @@ -233,7 +242,9 @@ function workLoop(hasTimeRemaining, initialTime: number): boolean { } } else { if (enableProfiling) { + // $FlowFixMe[incompatible-call] found when upgrading Flow markTaskCompleted(currentTask, currentTime); + // $FlowFixMe[incompatible-use] found when upgrading Flow currentTask.isQueued = false; } if (currentTask === peek(taskQueue)) { @@ -509,6 +520,7 @@ function unstable_flushNumberOfYields(count: number): void { try { let hasMoreWork = true; do { + // $FlowFixMe[not-a-function] found when upgrading Flow hasMoreWork = cb(true, currentMockTime); } while (hasMoreWork && !didStop); if (!hasMoreWork) { @@ -534,6 +546,7 @@ function unstable_flushUntilNextPaint(): false { try { let hasMoreWork = true; do { + // $FlowFixMe[not-a-function] found when upgrading Flow hasMoreWork = cb(true, currentMockTime); } while (hasMoreWork && !didStop); if (!hasMoreWork) { @@ -580,6 +593,7 @@ function unstable_flushAllWithoutAsserting(): boolean { try { let hasMoreWork = true; do { + // $FlowFixMe[not-a-function] found when upgrading Flow hasMoreWork = cb(true, currentMockTime); } while (hasMoreWork); if (!hasMoreWork) { diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig index e8e11f7233f71..8473008b31a5c 100644 --- a/scripts/flow/config/flowconfig +++ b/scripts/flow/config/flowconfig @@ -50,4 +50,4 @@ munge_underscores=false %REACT_RENDERER_FLOW_OPTIONS% [version] -^0.145.0 +^0.146.0 diff --git a/yarn.lock b/yarn.lock index 6ded6d98bcb38..e3154c895de7e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7911,10 +7911,10 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== -flow-bin@^0.145.0: - version "0.145.0" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.145.0.tgz#922f7c3568caaa5eb64621ec536deb56b24d1795" - integrity sha512-+9fi9BMxRBtSWC1x0hWggWTb8Vih+AC7wyvLAX5wR1m6u2lF2HLtixXqy2GX8bWgaynSEJR5lmPxYYC4wMI8cA== +flow-bin@^0.146.0: + version "0.146.0" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.146.0.tgz#fafa002663a0e13bf3c08c3972dd93d68289ccc6" + integrity sha512-TP8eCwltqc7fo6ad5klgsrZ2veZIK2qM1vHf1A/cnXTStPh8hLAz1cOXmlQIFZR/7fjSMI39TS3CgF6M/HUhAw== fluent-syntax@0.13.0: version "0.13.0" From adb58f529d861882418274966f53767f60501c01 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 4 Oct 2022 11:04:43 -0400 Subject: [PATCH 10/24] Flow upgrade to 0.152 - 0.147 removes access to Object.prototype via the global object. - 0.149 removed deprecated config options ghstack-source-id: c77f9b3739796547dd2d82a549b6dc24d502af54 Pull Request resolved: https://github.com/facebook/react/pull/25411 --- package.json | 2 +- .../src/devtools/views/Components/KeyValue.js | 2 ++ .../react-devtools-shared/src/devtools/views/utils.js | 2 ++ packages/react-devtools-shared/src/utils.js | 2 ++ scripts/flow/config/flowconfig | 5 +---- yarn.lock | 9 +++++---- 6 files changed, 13 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 5b870e97c3308..22d9bc8dfe6a9 100644 --- a/package.json +++ b/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.146.0", + "flow-bin": "^0.152.0", "glob": "^7.1.6", "glob-stream": "^6.1.0", "google-closure-compiler": "^20200517.0.0", diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js index 1da9920566d31..e11d4e712bcef 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js @@ -33,6 +33,8 @@ 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'; +const hasOwnProperty = Object.prototype.hasOwnProperty; + type Type = 'props' | 'state' | 'context' | 'hooks'; type KeyValueProps = { diff --git a/packages/react-devtools-shared/src/devtools/views/utils.js b/packages/react-devtools-shared/src/devtools/views/utils.js index ae9c4ddff309c..ab0986736bef0 100644 --- a/packages/react-devtools-shared/src/devtools/views/utils.js +++ b/packages/react-devtools-shared/src/devtools/views/utils.js @@ -14,6 +14,8 @@ import isArray from 'react-devtools-shared/src/isArray'; import type {HooksTree} from 'react-debug-tools/src/ReactDebugHooks'; +const hasOwnProperty = Object.prototype.hasOwnProperty; + export function alphaSortEntries( entryA: [string, mixed], entryB: [string, mixed], diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 36063f4f0e0c4..71d0f283ef640 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/packages/react-devtools-shared/src/utils.js @@ -56,6 +56,8 @@ import isArray from './isArray'; import type {ComponentFilter, ElementType} from './types'; import type {LRUCache} from 'react-devtools-shared/src/types'; +const hasOwnProperty = Object.prototype.hasOwnProperty; + const cachedDisplayNames: WeakMap = new WeakMap(); // On large trees, encoding takes significant time. diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig index 8473008b31a5c..20ff77029f208 100644 --- a/scripts/flow/config/flowconfig +++ b/scripts/flow/config/flowconfig @@ -40,9 +40,6 @@ untyped-type-import=error [options] %CI_MAX_WORKERS% -esproposal.class_static_fields=enable -esproposal.class_instance_fields=enable -esproposal.optional_chaining=enable exact_by_default=true munge_underscores=false @@ -50,4 +47,4 @@ munge_underscores=false %REACT_RENDERER_FLOW_OPTIONS% [version] -^0.146.0 +^0.152.0 diff --git a/yarn.lock b/yarn.lock index e3154c895de7e..f85d9cf0011d2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6901,6 +6901,7 @@ eslint-plugin-no-unsanitized@3.1.2: "eslint-plugin-react-internal@link:./scripts/eslint-rules": version "0.0.0" + uid "" eslint-plugin-react@^6.7.1: version "6.10.3" @@ -7911,10 +7912,10 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== -flow-bin@^0.146.0: - version "0.146.0" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.146.0.tgz#fafa002663a0e13bf3c08c3972dd93d68289ccc6" - integrity sha512-TP8eCwltqc7fo6ad5klgsrZ2veZIK2qM1vHf1A/cnXTStPh8hLAz1cOXmlQIFZR/7fjSMI39TS3CgF6M/HUhAw== +flow-bin@^0.152.0: + version "0.152.0" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.152.0.tgz#6980d0cd58f59e9aefd580b11109a1d56eba46b1" + integrity sha512-b4ijbZIQovcx5l/T7VnwyBPIikj60A2qk7hKqQKVWiuftQMrUmC5ct2/0SuVvheX6ZbPdZfeyw2EHO1/n3eAmw== fluent-syntax@0.13.0: version "0.13.0" From 9f8a98a390bca3310cb80f536ba015446af19c3f Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 4 Oct 2022 11:04:47 -0400 Subject: [PATCH 11/24] 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: d7749cbad8050874fa14d533442f110ad1d0209d Pull Request resolved: https://github.com/facebook/react/pull/25412 --- package.json | 2 +- packages/jest-react/src/internalAct.js | 1 + packages/react-cache/src/ReactCacheOld.js | 5 ++++- .../src/PerformanceLoggingUtils.js | 3 +++ .../src/backend/profilingHooks.js | 3 +++ .../src/backend/renderer.js | 1 + .../src/backend/views/Highlighter/index.js | 1 + .../src/backend/views/TraceUpdates/index.js | 1 + .../src/backend/views/utils.js | 17 ++++++++--------- .../react-devtools-shared/src/devtools/cache.js | 5 ++++- .../src/devtools/views/Components/KeyValue.js | 1 + .../views/Profiler/SidebarSelectedFiberInfo.js | 1 + .../src/devtools/views/utils.js | 1 + packages/react-devtools-shared/src/hook.js | 2 ++ packages/react-devtools-shared/src/utils.js | 3 +++ .../src/import-worker/preprocessData.js | 3 +++ .../src/client/ReactDOMComponent.js | 1 + .../src/client/ReactDOMComponentTree.js | 4 ++++ .../src/client/ReactDOMHostConfig.js | 15 +++++++++++---- .../src/client/ReactDOMSelect.js | 6 +----- .../src/client/inputValueTracking.js | 5 +++-- .../src/events/DOMPluginEventSystem.js | 2 +- .../server/ReactDOMLegacyServerStreamConfig.js | 9 ++++----- packages/react-dom/src/client/ReactDOMLegacy.js | 4 ++++ .../src/ReactFabricEventEmitter.js | 1 + .../src/ReactFabricHostConfig.js | 1 + .../src/ReactNativeFiberHostComponent.js | 1 + .../src/legacy-events/EventPluginRegistry.js | 1 + .../react-reconciler/src/ReactChildFiber.new.js | 1 + .../react-reconciler/src/ReactChildFiber.old.js | 1 + .../src/ReactFiberCommitWork.new.js | 1 + .../src/ReactFiberCommitWork.old.js | 1 + .../react-reconciler/src/ReactFiberHooks.new.js | 2 ++ .../react-reconciler/src/ReactFiberHooks.old.js | 2 ++ .../src/ReactFiberOffscreenComponent.js | 1 + .../src/ReactFiberWorkLoop.new.js | 2 ++ .../src/ReactFiberWorkLoop.old.js | 2 ++ .../ReactFlightClientWebpackBundlerConfig.js | 1 + .../src/ReactFlightWebpackNodeRegister.js | 1 + .../src/ReactFlightWebpackPlugin.js | 1 + packages/react-server/src/ReactFizzHooks.js | 2 ++ packages/react-server/src/ReactFizzServer.js | 1 + packages/react-server/src/ReactFlightHooks.js | 2 ++ packages/react-server/src/ReactFlightServer.js | 3 +++ .../src/ReactServerStreamConfigBrowser.js | 1 + .../src/ReactServerStreamConfigNode.js | 7 +++---- packages/react/src/ReactAct.js | 1 + packages/scheduler/src/forks/Scheduler.js | 1 + packages/shared/hasOwnProperty.js | 1 + packages/shared/invokeGuardedCallbackImpl.js | 3 +++ scripts/flow/config/flowconfig | 2 +- yarn.lock | 8 ++++---- 52 files changed, 110 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index 22d9bc8dfe6a9..ce16ee3811c7e 100644 --- a/package.json +++ b/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", diff --git a/packages/jest-react/src/internalAct.js b/packages/jest-react/src/internalAct.js index 84ee25b7617ed..873ca1430361c 100644 --- a/packages/jest-react/src/internalAct.js +++ b/packages/jest-react/src/internalAct.js @@ -72,6 +72,7 @@ export function act(scope: () => Thenable | T): Thenable { if ( typeof result === 'object' && result !== null && + // $FlowFixMe[method-unbinding] typeof result.then === 'function' ) { const thenableResult: Thenable = (result: any); diff --git a/packages/react-cache/src/ReactCacheOld.js b/packages/react-cache/src/ReactCacheOld.js index 9693113b49d0e..edd75e5861c64 100644 --- a/packages/react-cache/src/ReactCacheOld.js +++ b/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( ); const newResult: PendingResult = { status: Pending, + // $FlowFixMe[method-unbinding] value: thenable, }; // $FlowFixMe[escaped-generic] discovered when updating Flow diff --git a/packages/react-devtools-shared/src/PerformanceLoggingUtils.js b/packages/react-devtools-shared/src/PerformanceLoggingUtils.js index fc10bbd9992e9..84163cebbec0c 100644 --- a/packages/react-devtools-shared/src/PerformanceLoggingUtils.js +++ b/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 { diff --git a/packages/react-devtools-shared/src/backend/profilingHooks.js b/packages/react-devtools-shared/src/backend/profilingHooks.js index 47dd5a3baa1ae..a6c314584c140 100644 --- a/packages/react-devtools-shared/src/backend/profilingHooks.js +++ b/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(); diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index 8e249f1a3b7db..c4ff00e08f423 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/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(); diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js index 38d951623c482..3005f2481be06 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js +++ b/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. diff --git a/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js b/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js index 4927d4a3cb221..dce1c3ecb71b8 100644 --- a/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js +++ b/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(); diff --git a/packages/react-devtools-shared/src/backend/views/utils.js b/packages/react-devtools-shared/src/backend/views/utils.js index 35e8d17192c6a..43c6ffdc197a2 100644 --- a/packages/react-devtools-shared/src/backend/views/utils.js +++ b/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, diff --git a/packages/react-devtools-shared/src/devtools/cache.js b/packages/react-devtools-shared/src/devtools/cache.js index acbbfff00b997..693153715bfc2 100644 --- a/packages/react-devtools-shared/src/devtools/cache.js +++ b/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( ); const newResult: PendingResult = { status: Pending, + // $FlowFixMe[method-unbinding] value: thenable, }; entriesForResource.set(key, newResult); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js index e11d4e712bcef..592cdb52b94c4 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js +++ b/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'; diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js index b27aab877656f..97714cb4735d6 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js +++ b/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'}); diff --git a/packages/react-devtools-shared/src/devtools/views/utils.js b/packages/react-devtools-shared/src/devtools/views/utils.js index ab0986736bef0..dc799c250039e 100644 --- a/packages/react-devtools-shared/src/devtools/views/utils.js +++ b/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( diff --git a/packages/react-devtools-shared/src/hook.js b/packages/react-devtools-shared/src/hook.js index 4ebec51074bd2..3d65ca34c8316 100644 --- a/packages/react-devtools-shared/src/hook.js +++ b/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); diff --git a/packages/react-devtools-shared/src/utils.js b/packages/react-devtools-shared/src/utils.js index 71d0f283ef640..064a57d3f3458 100644 --- a/packages/react-devtools-shared/src/utils.js +++ b/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 = 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'; diff --git a/packages/react-devtools-timeline/src/import-worker/preprocessData.js b/packages/react-devtools-timeline/src/import-worker/preprocessData.js index d41bde0267c71..5566a5c208f81 100644 --- a/packages/react-devtools-timeline/src/import-worker/preprocessData.js +++ b/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, }); diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js index 6c98f317aedd7..17255b9fcc80d 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js +++ b/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) diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js b/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js index 87529594664f2..064646a7c1f91 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js +++ b/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; diff --git a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js b/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js index 1d5f27089ae8c..4b1ff5bf1e6a8 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js +++ b/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')) ); } diff --git a/packages/react-dom-bindings/src/client/ReactDOMSelect.js b/packages/react-dom-bindings/src/client/ReactDOMSelect.js index 3493879cf7989..41350390c4f2c 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMSelect.js +++ b/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); diff --git a/packages/react-dom-bindings/src/client/inputValueTracking.js b/packages/react-dom-bindings/src/client/inputValueTracking.js index 2c279331e8adc..748154a4c0b2d 100644 --- a/packages/react-dom-bindings/src/client/inputValueTracking.js +++ b/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; diff --git a/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js b/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js index 06c42b82e2252..131578fae8b6e 100644 --- a/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js +++ b/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 && diff --git a/packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js b/packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js index 6f471a5552a56..4f8878030b055 100644 --- a/packages/react-dom-bindings/src/server/ReactDOMLegacyServerStreamConfig.js +++ b/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; diff --git a/packages/react-dom/src/client/ReactDOMLegacy.js b/packages/react-dom/src/client/ReactDOMLegacy.js index 92f1ff0cdca5f..7e136b8728a2a 100644 --- a/packages/react-dom/src/client/ReactDOMLegacy.js +++ b/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) { diff --git a/packages/react-native-renderer/src/ReactFabricEventEmitter.js b/packages/react-native-renderer/src/ReactFabricEventEmitter.js index 12ba859bf70f4..49f83b43758df 100644 --- a/packages/react-native-renderer/src/ReactFabricEventEmitter.js +++ b/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); diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js index 4284889658c5c..868eaaab48d50 100644 --- a/packages/react-native-renderer/src/ReactFabricHostConfig.js +++ b/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'; diff --git a/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js index b4d91806cf56e..3f3cf1540f962 100644 --- a/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js +++ b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js @@ -127,6 +127,7 @@ class ReactNativeFiberHostComponent { } // eslint-disable-next-line no-unused-expressions +// $FlowFixMe[class-object-subtyping] found when upgrading Flow (ReactNativeFiberHostComponent.prototype: $ReadOnly<{...NativeMethods, ...}>); export default ReactNativeFiberHostComponent; diff --git a/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js b/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js index a1fe155e1eaaa..7944c120a7294 100644 --- a/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js +++ b/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js @@ -219,6 +219,7 @@ export function injectEventPluginOrder( } // Clone the ordering so it cannot be dynamically mutated. + // $FlowFixMe[method-unbinding] found when upgrading Flow eventPluginOrder = Array.prototype.slice.call(injectedEventPluginOrder); recomputePluginOrdering(); } diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js index 21821f91b9b63..5ccb578da6e55 100644 --- a/packages/react-reconciler/src/ReactChildFiber.new.js +++ b/packages/react-reconciler/src/ReactChildFiber.new.js @@ -228,6 +228,7 @@ function coerceRef( } function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) { + // $FlowFixMe[method-unbinding] const childString = Object.prototype.toString.call(newChild); throw new Error( diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js index 264ab51db2191..ec2416d0941c6 100644 --- a/packages/react-reconciler/src/ReactChildFiber.old.js +++ b/packages/react-reconciler/src/ReactChildFiber.old.js @@ -228,6 +228,7 @@ function coerceRef( } function throwOnInvalidObjectType(returnFiber: Fiber, newChild: Object) { + // $FlowFixMe[method-unbinding] const childString = Object.prototype.toString.call(newChild); throw new Error( diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js index bea625a59023f..cd8671e645d1d 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js @@ -2336,6 +2336,7 @@ function getRetryCache(finishedWork) { const instance: OffscreenInstance = finishedWork.stateNode; let retryCache = instance._retryCache; if (retryCache === null) { + // $FlowFixMe[incompatible-type] retryCache = instance._retryCache = new PossiblyWeakSet(); } return retryCache; diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js index 09cda5a2ef0fc..284dc4a471653 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js @@ -2336,6 +2336,7 @@ function getRetryCache(finishedWork) { const instance: OffscreenInstance = finishedWork.stateNode; let retryCache = instance._retryCache; if (retryCache === null) { + // $FlowFixMe[incompatible-type] retryCache = instance._retryCache = new PossiblyWeakSet(); } return retryCache; diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js index a1c8fb605fb5c..638f072150aa3 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.new.js +++ b/packages/react-reconciler/src/ReactFiberHooks.new.js @@ -768,6 +768,8 @@ if (enableUseMemoCacheHook) { function use(usable: Usable): T { if (usable !== null && typeof usable === 'object') { + // $FlowFixMe[method-unbinding] + // $FlowFixMe[prop-missing] if (typeof usable.then === 'function') { // This is a thenable. const thenable: Thenable = (usable: any); diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js index d536ab25fb96c..badad3a53bf6d 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.old.js +++ b/packages/react-reconciler/src/ReactFiberHooks.old.js @@ -768,6 +768,8 @@ if (enableUseMemoCacheHook) { function use(usable: Usable): T { if (usable !== null && typeof usable === 'object') { + // $FlowFixMe[method-unbinding] + // $FlowFixMe[prop-missing] if (typeof usable.then === 'function') { // This is a thenable. const thenable: Thenable = (usable: any); diff --git a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js index 081f6a5a519ea..fe2817f0f4377 100644 --- a/packages/react-reconciler/src/ReactFiberOffscreenComponent.js +++ b/packages/react-reconciler/src/ReactFiberOffscreenComponent.js @@ -51,5 +51,6 @@ export type OffscreenInstance = { _visibility: OffscreenVisibility, _pendingMarkers: Set | null, _transitions: Set | null, + // $FlowFixMe[incompatible-type-arg] found when upgrading Flow _retryCache: WeakSet | Set | null, }; diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index 04909c9c2d1d8..c32c6bed13f0e 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js @@ -1213,6 +1213,7 @@ export function queueRecoverableErrors(errors: Array>) { if (workInProgressRootRecoverableErrors === null) { workInProgressRootRecoverableErrors = errors; } else { + // $FlowFixMe[method-unbinding] workInProgressRootRecoverableErrors.push.apply( workInProgressRootRecoverableErrors, errors, @@ -3169,6 +3170,7 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) { break; case OffscreenComponent: { const instance: OffscreenInstance = boundaryFiber.stateNode; + // $FlowFixMe[incompatible-type] found when upgrading Flow retryCache = instance._retryCache; break; } diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index 85ac3813d54a5..339bee2ea0879 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js @@ -1213,6 +1213,7 @@ export function queueRecoverableErrors(errors: Array>) { if (workInProgressRootRecoverableErrors === null) { workInProgressRootRecoverableErrors = errors; } else { + // $FlowFixMe[method-unbinding] workInProgressRootRecoverableErrors.push.apply( workInProgressRootRecoverableErrors, errors, @@ -3169,6 +3170,7 @@ export function resolveRetryWakeable(boundaryFiber: Fiber, wakeable: Wakeable) { break; case OffscreenComponent: { const instance: OffscreenInstance = boundaryFiber.stateNode; + // $FlowFixMe[incompatible-type] found when upgrading Flow retryCache = instance._retryCache; break; } diff --git a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js index 976f874444d29..4911104151a18 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js +++ b/packages/react-server-dom-webpack/src/ReactFlightClientWebpackBundlerConfig.js @@ -74,6 +74,7 @@ export function preloadModule( if (entry === undefined) { const thenable = __webpack_chunk_load__(chunkId); promises.push(thenable); + // $FlowFixMe[method-unbinding] const resolve = chunkCache.set.bind(chunkCache, chunkId, null); thenable.then(resolve, ignoreReject); chunkCache.set(chunkId, thenable); diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js index 9c89122b04edc..009c003eee517 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js +++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js @@ -59,6 +59,7 @@ module.exports = function register() { async: true, }; return Promise.resolve( + // $FlowFixMe[incompatible-call] found when upgrading Flow resolve(new Proxy(moduleReference, proxyHandlers)), ); }; diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js index f0b66659a4a70..b7dcb25369899 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js +++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js @@ -351,6 +351,7 @@ export default class ReactFlightWebpackPlugin { if (err) return callback(err); const flat = []; for (let i = 0; i < result.length; i++) { + // $FlowFixMe[method-unbinding] flat.push.apply(flat, result[i]); } callback(null, flat); diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js index 48b18c7b3dfcd..c2ed08aeb033e 100644 --- a/packages/react-server/src/ReactFizzHooks.js +++ b/packages/react-server/src/ReactFizzHooks.js @@ -589,6 +589,8 @@ function useId(): string { function use(usable: Usable): T { if (usable !== null && typeof usable === 'object') { + // $FlowFixMe[method-unbinding] + // $FlowFixMe[prop-missing] if (typeof usable.then === 'function') { // This is a thenable. const thenable: Thenable = (usable: any); diff --git a/packages/react-server/src/ReactFizzServer.js b/packages/react-server/src/ReactFizzServer.js index ab9415d88d369..0da6a37ca47da 100644 --- a/packages/react-server/src/ReactFizzServer.js +++ b/packages/react-server/src/ReactFizzServer.js @@ -1455,6 +1455,7 @@ function renderNodeDestructiveImpl( } } + // $FlowFixMe[method-unbinding] const childString = Object.prototype.toString.call(node); throw new Error( diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js index b2fef5969c53c..fe485824c93a4 100644 --- a/packages/react-server/src/ReactFlightHooks.js +++ b/packages/react-server/src/ReactFlightHooks.js @@ -145,6 +145,8 @@ function useId(): string { function use(usable: Usable): T { if (usable !== null && typeof usable === 'object') { + // $FlowFixMe[method-unbinding] + // $FlowFixMe[prop-missing] if (typeof usable.then === 'function') { // This is a thenable. const thenable: Thenable = (usable: any); diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js index 67014934e429d..41ccc9867dd8a 100644 --- a/packages/react-server/src/ReactFlightServer.js +++ b/packages/react-server/src/ReactFlightServer.js @@ -435,6 +435,7 @@ function isSimpleObject(object): boolean { } function objectName(object): string { + // $FlowFixMe[method-unbinding] const name = Object.prototype.toString.call(object); return name.replace(/^\[object (.*)\]$/, function(m, p0) { return p0; @@ -494,6 +495,7 @@ function describeObjectForErrorMessage( typeof value === 'object' && value !== null ) { + // $FlowFixMe[incompatible-call] found when upgrading Flow str += describeObjectForErrorMessage(value); } else { str += describeValueForErrorMessage(value); @@ -521,6 +523,7 @@ function describeObjectForErrorMessage( typeof value === 'object' && value !== null ) { + // $FlowFixMe[incompatible-call] found when upgrading Flow str += describeObjectForErrorMessage(value); } else { str += describeValueForErrorMessage(value); diff --git a/packages/react-server/src/ReactServerStreamConfigBrowser.js b/packages/react-server/src/ReactServerStreamConfigBrowser.js index 1540e994d66c7..fecbb46e86fbd 100644 --- a/packages/react-server/src/ReactServerStreamConfigBrowser.js +++ b/packages/react-server/src/ReactServerStreamConfigBrowser.js @@ -115,6 +115,7 @@ export function stringToPrecomputedChunk(content: string): PrecomputedChunk { } export function closeWithError(destination: Destination, error: mixed): void { + // $FlowFixMe[method-unbinding] if (typeof destination.error === 'function') { // $FlowFixMe: This is an Error object or the destination accepts other types. destination.error(error); diff --git a/packages/react-server/src/ReactServerStreamConfigNode.js b/packages/react-server/src/ReactServerStreamConfigNode.js index cb92d8d18466b..0de042948d842 100644 --- a/packages/react-server/src/ReactServerStreamConfigNode.js +++ b/packages/react-server/src/ReactServerStreamConfigNode.js @@ -10,10 +10,9 @@ import type {Writable} from 'stream'; import {TextEncoder} from 'util'; -type MightBeFlushable = { - flush?: () => void, - ... -}; +interface MightBeFlushable { + flush?: () => void; +} export type Destination = Writable & MightBeFlushable; diff --git a/packages/react/src/ReactAct.js b/packages/react/src/ReactAct.js index 25456f7f1ec1e..6a3712ef0b7f1 100644 --- a/packages/react/src/ReactAct.js +++ b/packages/react/src/ReactAct.js @@ -60,6 +60,7 @@ export function act(callback: () => T | Thenable): Thenable { if ( result !== null && typeof result === 'object' && + // $FlowFixMe[method-unbinding] typeof result.then === 'function' ) { const thenableResult: Thenable = (result: any); diff --git a/packages/scheduler/src/forks/Scheduler.js b/packages/scheduler/src/forks/Scheduler.js index 4c8b39c95fe78..22c70f58486bf 100644 --- a/packages/scheduler/src/forks/Scheduler.js +++ b/packages/scheduler/src/forks/Scheduler.js @@ -58,6 +58,7 @@ type Task = { let getCurrentTime: () => number | DOMHighResTimeStamp; const hasPerformanceNow = + // $FlowFixMe[method-unbinding] typeof performance === 'object' && typeof performance.now === 'function'; if (hasPerformanceNow) { diff --git a/packages/shared/hasOwnProperty.js b/packages/shared/hasOwnProperty.js index 2751eda737b24..b30a60dc75860 100644 --- a/packages/shared/hasOwnProperty.js +++ b/packages/shared/hasOwnProperty.js @@ -7,6 +7,7 @@ * @flow */ +// $FlowFixMe[method-unbinding] const hasOwnProperty = Object.prototype.hasOwnProperty; export default hasOwnProperty; diff --git a/packages/shared/invokeGuardedCallbackImpl.js b/packages/shared/invokeGuardedCallbackImpl.js index 74f8bd6454f5c..225dec6700cb1 100644 --- a/packages/shared/invokeGuardedCallbackImpl.js +++ b/packages/shared/invokeGuardedCallbackImpl.js @@ -12,6 +12,7 @@ function invokeGuardedCallbackProd, Context>( func: (...Args) => mixed, context: Context, ): void { + // $FlowFixMe[method-unbinding] const funcArgs = Array.prototype.slice.call(arguments, 3); try { // $FlowFixMe[incompatible-call] Flow doesn't understand the arguments splicing. @@ -53,6 +54,7 @@ if (__DEV__) { typeof window !== 'undefined' && typeof window.dispatchEvent === 'function' && typeof document !== 'undefined' && + // $FlowFixMe[method-unbinding] typeof document.createEvent === 'function' ) { const fakeNode = document.createElement('react'); @@ -122,6 +124,7 @@ if (__DEV__) { // Create an event handler for our fake event. We will synchronously // dispatch our fake event using `dispatchEvent`. Inside the handler, we // call the user-provided callback. + // $FlowFixMe[method-unbinding] const funcArgs = Array.prototype.slice.call(arguments, 3); function callCallback() { didCall = true; diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig index 20ff77029f208..9f498d2af55c1 100644 --- a/scripts/flow/config/flowconfig +++ b/scripts/flow/config/flowconfig @@ -47,4 +47,4 @@ munge_underscores=false %REACT_RENDERER_FLOW_OPTIONS% [version] -^0.152.0 +^0.153.0 diff --git a/yarn.lock b/yarn.lock index f85d9cf0011d2..9dd6c9e3b8eb8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7912,10 +7912,10 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== -flow-bin@^0.152.0: - version "0.152.0" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.152.0.tgz#6980d0cd58f59e9aefd580b11109a1d56eba46b1" - integrity sha512-b4ijbZIQovcx5l/T7VnwyBPIikj60A2qk7hKqQKVWiuftQMrUmC5ct2/0SuVvheX6ZbPdZfeyw2EHO1/n3eAmw== +flow-bin@^0.153.0: + version "0.153.0" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.153.0.tgz#44d941acaf5ef977fa26d1b4b5dc3cf56b68eefc" + integrity sha512-sxP9nfXnoyCUT6hjAO+zDyHLO3dZcWg0h+4HttHs/5wg/2oAkTDwmsWbj095IQsEmwTicq2TfqWq5QRuLxynlQ== fluent-syntax@0.13.0: version "0.13.0" From 8bc95bb3c8c975d650161e472de4d8a92d9a92fd Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 4 Oct 2022 11:39:25 -0400 Subject: [PATCH 12/24] Flow upgrade to 0.154 ghstack-source-id: d84024950a249f209db88be6788b80f7fa4f26d0 Pull Request resolved: https://github.com/facebook/react/pull/25413 --- package.json | 2 +- .../src/devtools/views/Components/KeyValue.js | 2 +- .../src/devtools/views/Profiler/Updaters.js | 2 +- .../react-native-renderer/src/ReactFabricHostConfig.js | 1 + .../src/ReactNativeFiberHostComponent.js | 1 + packages/shared/objectIs.js | 1 + scripts/flow/config/flowconfig | 2 +- yarn.lock | 8 ++++---- 8 files changed, 11 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index ce16ee3811c7e..3c61d53d123b6 100644 --- a/package.json +++ b/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.153.0", + "flow-bin": "^0.154.0", "glob": "^7.1.6", "glob-stream": "^6.1.0", "google-closure-compiler": "^20200517.0.0", diff --git a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js index 592cdb52b94c4..9f2c9160d3ae1 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/KeyValue.js @@ -411,7 +411,7 @@ export default function KeyValue({ const hasChildren = entries.length > 0 || canEditValues; const displayName = getMetaValueLabel(value); - children = entries.map>(([key, keyValue]) => ( + children = entries.map(([key, keyValue]): ReactElement => ( 0 ? ( - updaters.map((serializedElement: SerializedElement) => { + updaters.map((serializedElement: SerializedElement): React$Node => { const {displayName, id, key, type} = serializedElement; const isVisibleInTree = commitTree.nodes.has(id) && type !== ElementTypeRoot; diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js index 868eaaab48d50..c0d17b3c24129 100644 --- a/packages/react-native-renderer/src/ReactFabricHostConfig.js +++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js @@ -317,6 +317,7 @@ class ReactFabricHostComponent { // eslint-disable-next-line no-unused-expressions // $FlowFixMe[class-object-subtyping] found when upgrading Flow +// $FlowFixMe[method-unbinding] found when upgrading Flow (ReactFabricHostComponent.prototype: $ReadOnly<{...NativeMethods, ...}>); export * from 'react-reconciler/src/ReactFiberHostConfigWithNoMutation'; diff --git a/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js index 3f3cf1540f962..548f588680431 100644 --- a/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js +++ b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js @@ -128,6 +128,7 @@ class ReactNativeFiberHostComponent { // eslint-disable-next-line no-unused-expressions // $FlowFixMe[class-object-subtyping] found when upgrading Flow +// $FlowFixMe[method-unbinding] found when upgrading Flow (ReactNativeFiberHostComponent.prototype: $ReadOnly<{...NativeMethods, ...}>); export default ReactNativeFiberHostComponent; diff --git a/packages/shared/objectIs.js b/packages/shared/objectIs.js index f83b5c2838b0e..9fd10592dbe9e 100644 --- a/packages/shared/objectIs.js +++ b/packages/shared/objectIs.js @@ -18,6 +18,7 @@ function is(x: any, y: any) { } const objectIs: (x: any, y: any) => boolean = + // $FlowFixMe[method-unbinding] typeof Object.is === 'function' ? Object.is : is; export default objectIs; diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig index 9f498d2af55c1..4dbf5dfa8e601 100644 --- a/scripts/flow/config/flowconfig +++ b/scripts/flow/config/flowconfig @@ -47,4 +47,4 @@ munge_underscores=false %REACT_RENDERER_FLOW_OPTIONS% [version] -^0.153.0 +^0.154.0 diff --git a/yarn.lock b/yarn.lock index 9dd6c9e3b8eb8..90312a8c30d4b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7912,10 +7912,10 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== -flow-bin@^0.153.0: - version "0.153.0" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.153.0.tgz#44d941acaf5ef977fa26d1b4b5dc3cf56b68eefc" - integrity sha512-sxP9nfXnoyCUT6hjAO+zDyHLO3dZcWg0h+4HttHs/5wg/2oAkTDwmsWbj095IQsEmwTicq2TfqWq5QRuLxynlQ== +flow-bin@^0.154.0: + version "0.154.0" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.154.0.tgz#e086964398e671daa8f56ed8663d7876337f77e5" + integrity sha512-I6u2ETdkAyard+8C5na6bfZp4EM0zIMB7O5zH4GKzBLv9/y8/NYRTxEXQe5T0hvj9R9DxFBUoPsFK76ziweUFw== fluent-syntax@0.13.0: version "0.13.0" From 338e6a967ccbdde156559b00e17ffcc7319533fc Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 4 Oct 2022 11:39:26 -0400 Subject: [PATCH 13/24] Flow upgrade to 0.155 This version banned use of this in object functions. ghstack-source-id: f49fd5e1b7732cea1ec75e71f2611f0ffa19e80d Pull Request resolved: https://github.com/facebook/react/pull/25414 --- package.json | 2 +- .../react-devtools-shared/src/backend/legacy/renderer.js | 9 +++++++++ packages/react-fetch/src/ReactFetchBrowser.js | 9 +++++++++ packages/react-fetch/src/ReactFetchNode.js | 9 +++++++++ scripts/flow/config/flowconfig | 2 +- yarn.lock | 8 ++++---- 6 files changed, 33 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 3c61d53d123b6..ceeeb1ade3a02 100644 --- a/package.json +++ b/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.154.0", + "flow-bin": "^0.155.0", "glob": "^7.1.6", "glob-stream": "^6.1.0", "google-closure-compiler": "^20200517.0.0", diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js index a3b1a860b8acd..1f53b61d71e82 100644 --- a/packages/react-devtools-shared/src/backend/legacy/renderer.js +++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js @@ -218,10 +218,12 @@ export function attach( const internalInstance = args[0]; const hostContainerInfo = args[3]; if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) { + // $FlowFixMe[object-this-reference] found when upgrading Flow return fn.apply(this, args); } if (hostContainerInfo._topLevelWrapper === undefined) { // SSR + // $FlowFixMe[object-this-reference] found when upgrading Flow return fn.apply(this, args); } @@ -241,6 +243,7 @@ export function attach( ); try { + // $FlowFixMe[object-this-reference] found when upgrading Flow const result = fn.apply(this, args); parentIDStack.pop(); return result; @@ -260,6 +263,7 @@ export function attach( performUpdateIfNecessary(fn, args) { const internalInstance = args[0]; if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) { + // $FlowFixMe[object-this-reference] found when upgrading Flow return fn.apply(this, args); } @@ -268,6 +272,7 @@ export function attach( const prevChildren = getChildren(internalInstance); try { + // $FlowFixMe[object-this-reference] found when upgrading Flow const result = fn.apply(this, args); const nextChildren = getChildren(internalInstance); @@ -294,6 +299,7 @@ export function attach( receiveComponent(fn, args) { const internalInstance = args[0]; if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) { + // $FlowFixMe[object-this-reference] found when upgrading Flow return fn.apply(this, args); } @@ -302,6 +308,7 @@ export function attach( const prevChildren = getChildren(internalInstance); try { + // $FlowFixMe[object-this-reference] found when upgrading Flow const result = fn.apply(this, args); const nextChildren = getChildren(internalInstance); @@ -328,12 +335,14 @@ export function attach( unmountComponent(fn, args) { const internalInstance = args[0]; if (getElementType(internalInstance) === ElementTypeOtherOrUnknown) { + // $FlowFixMe[object-this-reference] found when upgrading Flow return fn.apply(this, args); } const id = getID(internalInstance); parentIDStack.push(id); try { + // $FlowFixMe[object-this-reference] found when upgrading Flow const result = fn.apply(this, args); parentIDStack.pop(); diff --git a/packages/react-fetch/src/ReactFetchBrowser.js b/packages/react-fetch/src/ReactFetchBrowser.js index 3bba1e31b6f95..62339227cc8e7 100644 --- a/packages/react-fetch/src/ReactFetchBrowser.js +++ b/packages/react-fetch/src/ReactFetchBrowser.js @@ -98,27 +98,36 @@ Response.prototype = { constructor: Response, arrayBuffer() { return readRecordValue( + // $FlowFixMe[object-this-reference] found when upgrading Flow this._arrayBuffer || + // $FlowFixMe[object-this-reference] found when upgrading Flow (this._arrayBuffer = createRecordFromThenable( + // $FlowFixMe[object-this-reference] found when upgrading Flow this._response.arrayBuffer(), )), ); }, blob() { return readRecordValue( + // $FlowFixMe[object-this-reference] found when upgrading Flow this._blob || + // $FlowFixMe[object-this-reference] found when upgrading Flow (this._blob = createRecordFromThenable(this._response.blob())), ); }, json() { return readRecordValue( + // $FlowFixMe[object-this-reference] found when upgrading Flow this._json || + // $FlowFixMe[object-this-reference] found when upgrading Flow (this._json = createRecordFromThenable(this._response.json())), ); }, text() { return readRecordValue( + // $FlowFixMe[object-this-reference] found when upgrading Flow this._text || + // $FlowFixMe[object-this-reference] found when upgrading Flow (this._text = createRecordFromThenable(this._response.text())), ); }, diff --git a/packages/react-fetch/src/ReactFetchNode.js b/packages/react-fetch/src/ReactFetchNode.js index c689c08a70d95..1aea85ff4e2b1 100644 --- a/packages/react-fetch/src/ReactFetchNode.js +++ b/packages/react-fetch/src/ReactFetchNode.js @@ -143,6 +143,7 @@ function Response(nativeResponse) { Response.prototype = { constructor: Response, arrayBuffer() { + // $FlowFixMe[object-this-reference] found when upgrading Flow const buffer = readRecordValue(this._bufferRecord); return buffer; }, @@ -151,20 +152,28 @@ Response.prototype = { throw new Error('Not implemented.'); }, json() { + // $FlowFixMe[object-this-reference] found when upgrading Flow if (this._json !== null) { + // $FlowFixMe[object-this-reference] found when upgrading Flow return this._json; } + // $FlowFixMe[object-this-reference] found when upgrading Flow const buffer = readRecordValue(this._bufferRecord); const json = JSON.parse(buffer.toString()); + // $FlowFixMe[object-this-reference] found when upgrading Flow this._json = json; return json; }, text() { + // $FlowFixMe[object-this-reference] found when upgrading Flow if (this._text !== null) { + // $FlowFixMe[object-this-reference] found when upgrading Flow return this._text; } + // $FlowFixMe[object-this-reference] found when upgrading Flow const buffer = readRecordValue(this._bufferRecord); const text = buffer.toString(); + // $FlowFixMe[object-this-reference] found when upgrading Flow this._text = text; return text; }, diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig index 4dbf5dfa8e601..a8611db12c348 100644 --- a/scripts/flow/config/flowconfig +++ b/scripts/flow/config/flowconfig @@ -47,4 +47,4 @@ munge_underscores=false %REACT_RENDERER_FLOW_OPTIONS% [version] -^0.154.0 +^0.155.0 diff --git a/yarn.lock b/yarn.lock index 90312a8c30d4b..1dfbb00609bba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7912,10 +7912,10 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== -flow-bin@^0.154.0: - version "0.154.0" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.154.0.tgz#e086964398e671daa8f56ed8663d7876337f77e5" - integrity sha512-I6u2ETdkAyard+8C5na6bfZp4EM0zIMB7O5zH4GKzBLv9/y8/NYRTxEXQe5T0hvj9R9DxFBUoPsFK76ziweUFw== +flow-bin@^0.155.0: + version "0.155.1" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.155.1.tgz#1263ee3e0f42d11cb13ba56c3851a096213ce5f7" + integrity sha512-qy2eXkgngR6u+MYA1ydzPnclhos21BZlpkJ50Y9YOZ4eTMq6txswB3X+gUsg8XUyCteLoMeo7n30k7aY2no2Yw== fluent-syntax@0.13.0: version "0.13.0" From 3fd9bd8e748231f2efb3624ee29f55633c0f3e05 Mon Sep 17 00:00:00 2001 From: Lauren Tan Date: Tue, 4 Oct 2022 11:52:21 -0400 Subject: [PATCH 14/24] Add RulesOfHooks support for `use` Usage of the new `use` hook needs to conform to the rules of hooks, with the one exception that it can be called conditionally. ghstack-source-id: 7ea5beceaf2c080f2c48821b5117bdd0c1194836 Pull Request resolved: https://github.com/facebook/react/pull/25370 --- .../__tests__/ESLintRulesOfHooks-test.js | 86 ++++++++++++++++++- .../src/RulesOfHooks.js | 22 ++++- 2 files changed, 102 insertions(+), 6 deletions(-) diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js index ef8e3c7ee6781..839c9fbb34302 100644 --- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js +++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRulesOfHooks-test.js @@ -257,7 +257,6 @@ const tests = { code: normalizeIndent` // Valid because they're not matching use[A-Z]. fooState(); - use(); _use(); _useState(); use_hook(); @@ -496,8 +495,6 @@ const tests = { }, { code: normalizeIndent` - Hook.use(); - Hook._use(); Hook.useState(); Hook._useState(); Hook.use42(); @@ -1146,6 +1143,45 @@ if (__EXPERIMENTAL__) { } `, }, + { + code: normalizeIndent` + function App() { + const text = use(Promise.resolve('A')); + return + } + `, + }, + { + code: normalizeIndent` + function App() { + if (shouldShowText) { + const text = use(query); + return + } + return + } + `, + }, + { + code: normalizeIndent` + function App() { + let data = []; + for (const query of queries) { + const text = use(item); + data.push(text); + } + return + } + `, + }, + { + code: normalizeIndent` + function App() { + const data = someCallback((x) => use(x)); + return + } + `, + }, ]; tests.invalid = [ ...tests.invalid, @@ -1220,6 +1256,50 @@ if (__EXPERIMENTAL__) { `, errors: [useEventError('onClick')], }, + { + code: normalizeIndent` + Hook.use(); + Hook._use(); + Hook.useState(); + Hook._useState(); + Hook.use42(); + Hook.useHook(); + Hook.use_hook(); + `, + errors: [ + topLevelError('Hook.use'), + topLevelError('Hook.useState'), + topLevelError('Hook.use42'), + topLevelError('Hook.useHook'), + ], + }, + { + code: normalizeIndent` + function notAComponent() { + use(promise); + } + `, + errors: [functionError('use', 'notAComponent')], + }, + { + code: normalizeIndent` + const text = use(promise); + function App() { + return + } + `, + errors: [topLevelError('use')], + }, + { + code: normalizeIndent` + class C { + m() { + use(promise); + } + } + `, + errors: [classError('use')], + }, ]; } diff --git a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js index 2164d63aac47b..ca3a6167b36c4 100644 --- a/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js +++ b/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js @@ -16,6 +16,9 @@ */ function isHookName(s) { + if (__EXPERIMENTAL__) { + return s === 'use' || /^use[A-Z0-9]/.test(s); + } return /^use[A-Z0-9]/.test(s); } @@ -107,6 +110,13 @@ function isUseEventIdentifier(node) { return false; } +function isUseIdentifier(node) { + if (__EXPERIMENTAL__) { + return node.type === 'Identifier' && node.name === 'use'; + } + return false; +} + export default { meta: { type: 'problem', @@ -458,7 +468,8 @@ export default { for (const hook of reactHooks) { // Report an error if a hook may be called more then once. - if (cycled) { + // `use(...)` can be called in loops. + if (cycled && !isUseIdentifier(hook)) { context.report({ node: hook, message: @@ -479,7 +490,11 @@ export default { // path segments. // // Special case when we think there might be an early return. - if (!cycled && pathsFromStartToEnd !== allPathsFromStartToEnd) { + if ( + !cycled && + pathsFromStartToEnd !== allPathsFromStartToEnd && + !isUseIdentifier(hook) // `use(...)` can be called conditionally. + ) { const message = `React Hook "${context.getSource(hook)}" is called ` + 'conditionally. React Hooks must be called in the exact ' + @@ -525,7 +540,8 @@ export default { // anonymous function expressions. Hopefully this is clarifying // enough in the common case that the incorrect message in // uncommon cases doesn't matter. - if (isSomewhereInsideComponentOrHook) { + // `use(...)` can be called in callbacks. + if (isSomewhereInsideComponentOrHook && !isUseIdentifier(hook)) { const message = `React Hook "${context.getSource(hook)}" cannot be called ` + 'inside a callback. React Hooks must be called in a ' + From 1089faf0d88411921980b7d1dfe3f539b5fda1d3 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 4 Oct 2022 13:25:16 -0400 Subject: [PATCH 15/24] Flow: run codemod to remove existential type The existential type `*` was deprecated and a codemod provided to replace it. Ran that and did some manual fixups: ```sh node_modules/.bin/flow codemod replace-existentials --write . ``` ghstack-source-id: 4c98b8db6a80159aa6ba3f2fc3659c11939da134 Pull Request resolved: https://github.com/facebook/react/pull/25416 --- .../src/devtools/ContextMenu/useContextMenu.js | 2 +- .../src/devtools/views/Profiler/ChartNode.js | 8 ++++---- .../views/Profiler/CommitFlamegraphListItem.js | 2 +- .../src/devtools/views/Profiler/Tooltip.js | 6 +++--- .../hooks/parseHookNames/loadSourceAndMetadata.js | 4 ++-- packages/react-devtools-timeline/src/types.js | 2 +- .../src/client/ReactDOMHostConfig.js | 5 +++-- .../react-dom-bindings/src/client/ReactDOMInput.js | 2 +- .../src/events/ReactDOMEventListener.js | 3 ++- .../react-reconciler/src/ReactChildFiber.new.js | 6 +++--- .../react-reconciler/src/ReactChildFiber.old.js | 6 +++--- .../src/ReactFiberClassUpdateQueue.new.js | 4 ++-- .../src/ReactFiberClassUpdateQueue.old.js | 4 ++-- .../src/ReactFiberCommitWork.new.js | 14 ++++---------- .../src/ReactFiberCommitWork.old.js | 14 ++++---------- .../react-reconciler/src/ReactInternalTypes.js | 2 +- 16 files changed, 37 insertions(+), 47 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js index 1a457f0de2c14..977b2801bb4ed 100644 --- a/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js +++ b/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js @@ -22,7 +22,7 @@ export default function useContextMenu({ data: Object, id: string, onChange?: OnChangeFn, - ref: {current: ElementRef<*> | null}, + ref: {current: ElementRef | null}, }) { const {showMenu} = useContext(RegistryContext); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js index e26b73ec8c4bc..31ea3f83b598c 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js @@ -16,10 +16,10 @@ type Props = { height: number, isDimmed?: boolean, label: string, - onClick: (event: SyntheticMouseEvent<*>) => mixed, - onDoubleClick?: (event: SyntheticMouseEvent<*>) => mixed, - onMouseEnter: (event: SyntheticMouseEvent<*>) => mixed, - onMouseLeave: (event: SyntheticMouseEvent<*>) => mixed, + onClick: (event: SyntheticMouseEvent) => mixed, + onDoubleClick?: (event: SyntheticMouseEvent) => mixed, + onMouseEnter: (event: SyntheticMouseEvent) => mixed, + onMouseLeave: (event: SyntheticMouseEvent) => mixed, placeLabelAboveNode?: boolean, textStyle?: Object, width: number, diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js index f30a294fd7e44..b40ce91fa56f8 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js @@ -41,7 +41,7 @@ function CommitFlamegraphListItem({data, index, style}: Props): React.Node { const {lineHeight} = useContext(SettingsContext); const handleClick = useCallback( - (event: SyntheticMouseEvent<*>, id: number, name: string) => { + (event: SyntheticMouseEvent, id: number, name: string) => { event.stopPropagation(); selectFiber(id, name); }, diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js index 0d7af3e63ee48..5287cf3d56308 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js @@ -17,7 +17,7 @@ export default function Tooltip({ const tooltipRef = useRef(null); // update the position of the tooltip based on current mouse position - const updateTooltipPosition = (event: SyntheticMouseEvent<*>) => { + const updateTooltipPosition = (event: SyntheticMouseEvent) => { const element = tooltipRef.current; if (element != null) { // first find the mouse position @@ -30,7 +30,7 @@ export default function Tooltip({ } }; - const onMouseMove = (event: SyntheticMouseEvent<*>) => { + const onMouseMove = (event: SyntheticMouseEvent) => { updateTooltipPosition(event); }; @@ -86,7 +86,7 @@ function getTooltipPosition(element, mousePosition) { // method used to find the current mouse position inside the container function getMousePosition( relativeContainer, - mouseEvent: SyntheticMouseEvent<*>, + mouseEvent: SyntheticMouseEvent, ) { if (relativeContainer !== null) { // Position within the nearest position:relative container. diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js index 3e08302c157b8..652549253c7c7 100644 --- a/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js +++ b/packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js @@ -134,7 +134,7 @@ function decodeBase64String(encoded: string): Object { function extractAndLoadSourceMapJSON( locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata, -): Promise<*> { +): Promise(p: Promise | T) => T, Promise>>> { // Deduplicate fetches, since there can be multiple location keys per source map. const dedupedFetchPromises = new Map(); @@ -459,7 +459,7 @@ function isUnnamedBuiltInHook(hook: HooksNode) { function loadSourceFiles( locationKeyToHookSourceAndMetadata: LocationKeyToHookSourceAndMetadata, fetchFileWithCaching: FetchFileWithCaching | null, -): Promise<*> { +): Promise(p: Promise | T) => T, Promise>>> { // Deduplicate fetches, since there can be multiple location keys per file. const dedupedFetchPromises = new Map(); diff --git a/packages/react-devtools-timeline/src/types.js b/packages/react-devtools-timeline/src/types.js index daf764ad151e1..2a3aa690148e0 100644 --- a/packages/react-devtools-timeline/src/types.js +++ b/packages/react-devtools-timeline/src/types.js @@ -13,7 +13,7 @@ import type {ScrollState} from './view-base/utils/scrollState'; // eslint-disable-next-line no-unused-vars type Return_) => R> = R; /** Get return type of a function. */ -export type Return = Return_<*, T>; +export type Return = Return_; // Project types diff --git a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js b/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js index 4b1ff5bf1e6a8..a6c193e17edbe 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js +++ b/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js @@ -7,6 +7,7 @@ * @flow */ +import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities'; import type {DOMEventName} from '../events/DOMEventNames'; import type {Fiber, FiberRoot} from 'react-reconciler/src/ReactInternalTypes'; import type { @@ -209,7 +210,7 @@ export function getChildHostContext( return getChildNamespace(parentNamespace, type); } -export function getPublicInstance(instance: Instance): * { +export function getPublicInstance(instance: Instance): Instance { return instance; } @@ -370,7 +371,7 @@ export function createTextInstance( return textNode; } -export function getCurrentEventPriority(): * { +export function getCurrentEventPriority(): EventPriority { const currentEvent = window.event; if (currentEvent === undefined) { return DefaultEventPriority; diff --git a/packages/react-dom-bindings/src/client/ReactDOMInput.js b/packages/react-dom-bindings/src/client/ReactDOMInput.js index ec03d75e37afb..96bc16cd66e3a 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMInput.js +++ b/packages/react-dom-bindings/src/client/ReactDOMInput.js @@ -415,7 +415,7 @@ function updateNamedCousins(rootNode, props) { export function setDefaultValue( node: InputWithWrapperState, type: ?string, - value: *, + value: ToStringValue, ) { if ( // Focused number inputs synchronize on blur. See ChangeEventPlugin.js diff --git a/packages/react-dom-bindings/src/events/ReactDOMEventListener.js b/packages/react-dom-bindings/src/events/ReactDOMEventListener.js index ba2c1e63239de..10e215913b78b 100644 --- a/packages/react-dom-bindings/src/events/ReactDOMEventListener.js +++ b/packages/react-dom-bindings/src/events/ReactDOMEventListener.js @@ -7,6 +7,7 @@ * @flow */ +import type {EventPriority} from 'react-reconciler/src/ReactEventPriorities'; import type {AnyNativeEvent} from '../events/PluginModuleType'; import type {Fiber, FiberRoot} from 'react-reconciler/src/ReactInternalTypes'; import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig'; @@ -407,7 +408,7 @@ export function findInstanceBlockingEvent( return null; } -export function getEventPriority(domEventName: DOMEventName): * { +export function getEventPriority(domEventName: DOMEventName): EventPriority { switch (domEventName) { // Used by SimpleEventPlugin: case 'cancel': diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js index 5ccb578da6e55..179310ec46a91 100644 --- a/packages/react-reconciler/src/ReactChildFiber.new.js +++ b/packages/react-reconciler/src/ReactChildFiber.new.js @@ -475,7 +475,7 @@ function createChildReconciler(shouldTrackSideEffects): ChildReconciler { function updateFragment( returnFiber: Fiber, current: Fiber | null, - fragment: Iterable<*>, + fragment: Iterable, lanes: Lanes, key: null | string, ): Fiber { @@ -750,7 +750,7 @@ function createChildReconciler(shouldTrackSideEffects): ChildReconciler { function reconcileChildrenArray( returnFiber: Fiber, currentFirstChild: Fiber | null, - newChildren: Array<*>, + newChildren: Array, lanes: Lanes, ): Fiber | null { // This algorithm can't optimize by searching from both ends since we @@ -917,7 +917,7 @@ function createChildReconciler(shouldTrackSideEffects): ChildReconciler { function reconcileChildrenIterator( returnFiber: Fiber, currentFirstChild: Fiber | null, - newChildrenIterable: Iterable<*>, + newChildrenIterable: Iterable, lanes: Lanes, ): Fiber | null { // This is the same implementation as reconcileChildrenArray(), diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js index ec2416d0941c6..74abb553458f7 100644 --- a/packages/react-reconciler/src/ReactChildFiber.old.js +++ b/packages/react-reconciler/src/ReactChildFiber.old.js @@ -475,7 +475,7 @@ function createChildReconciler(shouldTrackSideEffects): ChildReconciler { function updateFragment( returnFiber: Fiber, current: Fiber | null, - fragment: Iterable<*>, + fragment: Iterable, lanes: Lanes, key: null | string, ): Fiber { @@ -750,7 +750,7 @@ function createChildReconciler(shouldTrackSideEffects): ChildReconciler { function reconcileChildrenArray( returnFiber: Fiber, currentFirstChild: Fiber | null, - newChildren: Array<*>, + newChildren: Array, lanes: Lanes, ): Fiber | null { // This algorithm can't optimize by searching from both ends since we @@ -917,7 +917,7 @@ function createChildReconciler(shouldTrackSideEffects): ChildReconciler { function reconcileChildrenIterator( returnFiber: Fiber, currentFirstChild: Fiber | null, - newChildrenIterable: Iterable<*>, + newChildrenIterable: Iterable, lanes: Lanes, ): Fiber | null { // This is the same implementation as reconcileChildrenArray(), diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js index 5bf0a7a376cec..6b76bd9453223 100644 --- a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js +++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js @@ -207,8 +207,8 @@ export function cloneUpdateQueue( } } -export function createUpdate(eventTime: number, lane: Lane): Update<*> { - const update: Update<*> = { +export function createUpdate(eventTime: number, lane: Lane): Update { + const update: Update = { eventTime, lane, diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js index c9918ae104c01..0a2d3c4e75117 100644 --- a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js +++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js @@ -207,8 +207,8 @@ export function cloneUpdateQueue( } } -export function createUpdate(eventTime: number, lane: Lane): Update<*> { - const update: Update<*> = { +export function createUpdate(eventTime: number, lane: Lane): Update { + const update: Update = { eventTime, lane, diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js index cd8671e645d1d..18d30effcb704 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js @@ -883,7 +883,7 @@ function commitClassLayoutLifecycles( function commitClassCallbacks(finishedWork: Fiber) { // TODO: I think this is now always non-null by the time it reaches the // commit phase. Consider removing the type check. - const updateQueue: UpdateQueue<*> | null = (finishedWork.updateQueue: any); + const updateQueue: UpdateQueue | null = (finishedWork.updateQueue: any); if (updateQueue !== null) { const instance = finishedWork.stateNode; if (__DEV__) { @@ -1050,9 +1050,7 @@ function commitLayoutEffectOnFiber( if (flags & Callback) { // TODO: I think this is now always non-null by the time it reaches the // commit phase. Consider removing the type check. - const updateQueue: UpdateQueue< - *, - > | null = (finishedWork.updateQueue: any); + const updateQueue: UpdateQueue | null = (finishedWork.updateQueue: any); if (updateQueue !== null) { let instance = null; if (finishedWork.child !== null) { @@ -2521,9 +2519,7 @@ function commitMutationEffectsOnFiber( } if (flags & Callback && offscreenSubtreeIsHidden) { - const updateQueue: UpdateQueue< - *, - > | null = (finishedWork.updateQueue: any); + const updateQueue: UpdateQueue | null = (finishedWork.updateQueue: any); if (updateQueue !== null) { deferHiddenCallbacks(updateQueue); } @@ -3015,9 +3011,7 @@ export function reappearLayoutEffects( // Commit any callbacks that would have fired while the component // was hidden. - const updateQueue: UpdateQueue< - *, - > | null = (finishedWork.updateQueue: any); + const updateQueue: UpdateQueue | null = (finishedWork.updateQueue: any); if (updateQueue !== null) { commitHiddenCallbacks(updateQueue, instance); } diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js index 284dc4a471653..fb2e9ab00e746 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js @@ -883,7 +883,7 @@ function commitClassLayoutLifecycles( function commitClassCallbacks(finishedWork: Fiber) { // TODO: I think this is now always non-null by the time it reaches the // commit phase. Consider removing the type check. - const updateQueue: UpdateQueue<*> | null = (finishedWork.updateQueue: any); + const updateQueue: UpdateQueue | null = (finishedWork.updateQueue: any); if (updateQueue !== null) { const instance = finishedWork.stateNode; if (__DEV__) { @@ -1050,9 +1050,7 @@ function commitLayoutEffectOnFiber( if (flags & Callback) { // TODO: I think this is now always non-null by the time it reaches the // commit phase. Consider removing the type check. - const updateQueue: UpdateQueue< - *, - > | null = (finishedWork.updateQueue: any); + const updateQueue: UpdateQueue | null = (finishedWork.updateQueue: any); if (updateQueue !== null) { let instance = null; if (finishedWork.child !== null) { @@ -2521,9 +2519,7 @@ function commitMutationEffectsOnFiber( } if (flags & Callback && offscreenSubtreeIsHidden) { - const updateQueue: UpdateQueue< - *, - > | null = (finishedWork.updateQueue: any); + const updateQueue: UpdateQueue | null = (finishedWork.updateQueue: any); if (updateQueue !== null) { deferHiddenCallbacks(updateQueue); } @@ -3015,9 +3011,7 @@ export function reappearLayoutEffects( // Commit any callbacks that would have fired while the component // was hidden. - const updateQueue: UpdateQueue< - *, - > | null = (finishedWork.updateQueue: any); + const updateQueue: UpdateQueue | null = (finishedWork.updateQueue: any); if (updateQueue !== null) { commitHiddenCallbacks(updateQueue, instance); } diff --git a/packages/react-reconciler/src/ReactInternalTypes.js b/packages/react-reconciler/src/ReactInternalTypes.js index bee847ce29d63..2ee501d2a433f 100644 --- a/packages/react-reconciler/src/ReactInternalTypes.js +++ b/packages/react-reconciler/src/ReactInternalTypes.js @@ -238,7 +238,7 @@ type BaseFiberRootProperties = { // Node returned by Scheduler.scheduleCallback. Represents the next rendering // task that the root will work on. - callbackNode: *, + callbackNode: any, callbackPriority: Lane, eventTimes: LaneMap, expirationTimes: LaneMap, From 46d40f306ad5fb5c868d9022ce848f49fc5c1ac0 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 4 Oct 2022 13:25:16 -0400 Subject: [PATCH 16/24] Flow upgrade to 0.175 ghstack-source-id: 99008118ef76d850eb1c460e07b1db1392c55806 Pull Request resolved: https://github.com/facebook/react/pull/25417 --- package.json | 2 +- .../src/ReactFlightWebpackNodeRegister.js | 3 +++ scripts/flow/config/flowconfig | 3 ++- yarn.lock | 8 ++++---- 4 files changed, 10 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index ceeeb1ade3a02..902912b3389bc 100644 --- a/package.json +++ b/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.155.0", + "flow-bin": "^0.175.0", "glob": "^7.1.6", "glob-stream": "^6.1.0", "google-closure-compiler": "^20200517.0.0", diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js index 009c003eee517..0adff81020373 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js +++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js @@ -92,6 +92,7 @@ module.exports = function register() { }, }; + // $FlowFixMe[prop-missing] found when upgrading Flow Module._extensions['.client.js'] = function(module, path) { const moduleId = url.pathToFileURL(path).href; const moduleReference: {[string]: any, ...} = { @@ -103,8 +104,10 @@ module.exports = function register() { module.exports = new Proxy(moduleReference, proxyHandlers); }; + // $FlowFixMe[prop-missing] found when upgrading Flow const originalResolveFilename = Module._resolveFilename; + // $FlowFixMe[prop-missing] found when upgrading Flow Module._resolveFilename = function(request, parent, isMain, options) { const resolved = originalResolveFilename.apply(this, arguments); if (resolved.endsWith('.server.js')) { diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig index a8611db12c348..28bacfe8c32a9 100644 --- a/scripts/flow/config/flowconfig +++ b/scripts/flow/config/flowconfig @@ -14,6 +14,7 @@ .*/node_modules/devtools-timeline-model/.* .*/node_modules/create-react-class/.* .*/node_modules/react-native-web/.* +.*/node_modules/fbjs/lib/keyMirrorRecursive.js.flow .*/__mocks__/.* .*/__tests__/.* @@ -47,4 +48,4 @@ munge_underscores=false %REACT_RENDERER_FLOW_OPTIONS% [version] -^0.155.0 +^0.175.0 diff --git a/yarn.lock b/yarn.lock index 1dfbb00609bba..4d8272b10801f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7912,10 +7912,10 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== -flow-bin@^0.155.0: - version "0.155.1" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.155.1.tgz#1263ee3e0f42d11cb13ba56c3851a096213ce5f7" - integrity sha512-qy2eXkgngR6u+MYA1ydzPnclhos21BZlpkJ50Y9YOZ4eTMq6txswB3X+gUsg8XUyCteLoMeo7n30k7aY2no2Yw== +flow-bin@^0.175.0: + version "0.175.1" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.175.1.tgz#72237070ba4f293f9e04113481e18929c1de50df" + integrity sha512-zMCP0BPa9BrfBSR7QTcyT/XBwzUbyLdNG0eXvBuNxfHCbMRkUzSceRoOaEZIw+R+GH0UHjVfUvPJ30hXxz1Nfw== fluent-syntax@0.13.0: version "0.13.0" From 72593f008ec2011104d78b460dd287e7dfcac838 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 4 Oct 2022 13:25:17 -0400 Subject: [PATCH 17/24] Flow upgrade to 0.176 This upgrade deprecated calling `new` on functions which introduced the majority of breakages and I suppressed those. ghstack-source-id: 545363f3c5b9f0327ac53fdea56a582d6cc29d72 Pull Request resolved: https://github.com/facebook/react/pull/25418 --- package.json | 2 +- .../src/hooks/SourceMapConsumer.js | 1 + .../src/inspectedElementCache.js | 11 +++++++---- .../react-dom-bindings/src/shared/DOMProperty.js | 15 +++++++++++++++ packages/react-dom/src/client/ReactDOMRoot.js | 2 ++ packages/react-fetch/src/ReactFetchBrowser.js | 1 + packages/react-fetch/src/ReactFetchNode.js | 1 + packages/react-pg/src/ReactPostgres.js | 1 + .../react-reconciler/src/ReactFiberRoot.new.js | 1 + .../react-reconciler/src/ReactFiberRoot.old.js | 1 + scripts/flow/config/flowconfig | 2 +- yarn.lock | 8 ++++---- 12 files changed, 36 insertions(+), 10 deletions(-) diff --git a/package.json b/package.json index 902912b3389bc..6b7571870f657 100644 --- a/package.json +++ b/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.175.0", + "flow-bin": "^0.176.0", "glob": "^7.1.6", "glob-stream": "^6.1.0", "google-closure-compiler": "^20200517.0.0", diff --git a/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js b/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js index 3bb955005ba8a..96c20cf5c7772 100644 --- a/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js +++ b/packages/react-devtools-shared/src/hooks/SourceMapConsumer.js @@ -242,6 +242,7 @@ function IndexedSourceMapConsumer(sourceMapJSON: IndexSourceMap) { if (section.sourceMapConsumer === null) { // Lazily parse the section only when it's needed. + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions section.sourceMapConsumer = new SourceMapConsumer(section.map); } diff --git a/packages/react-devtools-shared/src/inspectedElementCache.js b/packages/react-devtools-shared/src/inspectedElementCache.js index 4ecb98ffab5ea..9268159cf1e07 100644 --- a/packages/react-devtools-shared/src/inspectedElementCache.js +++ b/packages/react-devtools-shared/src/inspectedElementCache.js @@ -128,7 +128,10 @@ export function inspectElement( path, rendererID: ((rendererID: any): number), }).then( - ([inspectedElement: InspectedElementFrontend]) => { + ([inspectedElement]: [ + InspectedElementFrontend, + InspectedElementResponseType, + ]) => { const resolvedRecord = ((newRecord: any): ResolvedRecord); resolvedRecord.status = Resolved; resolvedRecord.value = inspectedElement; @@ -183,9 +186,9 @@ export function checkForUpdate({ path: null, rendererID: ((rendererID: any): number), }).then( - ([ - inspectedElement: InspectedElementFrontend, - responseType: InspectedElementResponseType, + ([inspectedElement, responseType]: [ + InspectedElementFrontend, + InspectedElementResponseType, ]) => { if (responseType === 'full-data') { startTransition(() => { diff --git a/packages/react-dom-bindings/src/shared/DOMProperty.js b/packages/react-dom-bindings/src/shared/DOMProperty.js index 0ae244d8c98a3..c4ae688aff35f 100644 --- a/packages/react-dom-bindings/src/shared/DOMProperty.js +++ b/packages/react-dom-bindings/src/shared/DOMProperty.js @@ -260,6 +260,7 @@ if (enableCustomElementPropertySupport) { } reservedProps.forEach(name => { + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions properties[name] = new PropertyInfoRecord( name, RESERVED, @@ -279,6 +280,7 @@ reservedProps.forEach(name => { ['htmlFor', 'for'], ['httpEquiv', 'http-equiv'], ].forEach(([name, attributeName]) => { + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions properties[name] = new PropertyInfoRecord( name, STRING, @@ -294,6 +296,7 @@ reservedProps.forEach(name => { // In React, we let users pass `true` and `false` even though technically // these aren't boolean attributes (they are coerced to strings). ['contentEditable', 'draggable', 'spellCheck', 'value'].forEach(name => { + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions properties[name] = new PropertyInfoRecord( name, BOOLEANISH_STRING, @@ -315,6 +318,7 @@ reservedProps.forEach(name => { 'focusable', 'preserveAlpha', ].forEach(name => { + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions properties[name] = new PropertyInfoRecord( name, BOOLEANISH_STRING, @@ -355,6 +359,7 @@ reservedProps.forEach(name => { // Microdata 'itemScope', ].forEach(name => { + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions properties[name] = new PropertyInfoRecord( name, BOOLEAN, @@ -380,6 +385,7 @@ reservedProps.forEach(name => { // you'll need to set attributeName to name.toLowerCase() // instead in the assignment below. ].forEach(name => { + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions properties[name] = new PropertyInfoRecord( name, BOOLEAN, @@ -401,6 +407,7 @@ reservedProps.forEach(name => { // you'll need to set attributeName to name.toLowerCase() // instead in the assignment below. ].forEach(name => { + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions properties[name] = new PropertyInfoRecord( name, OVERLOADED_BOOLEAN, @@ -423,6 +430,7 @@ reservedProps.forEach(name => { // you'll need to set attributeName to name.toLowerCase() // instead in the assignment below. ].forEach(name => { + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions properties[name] = new PropertyInfoRecord( name, POSITIVE_NUMERIC, @@ -436,6 +444,7 @@ reservedProps.forEach(name => { // These are HTML attributes that must be numbers. ['rowSpan', 'start'].forEach(name => { + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions properties[name] = new PropertyInfoRecord( name, NUMERIC, @@ -535,6 +544,7 @@ const capitalize = token => token[1].toUpperCase(); // instead in the assignment below. ].forEach(attributeName => { const name = attributeName.replace(CAMELIZE, capitalize); + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions properties[name] = new PropertyInfoRecord( name, STRING, @@ -560,6 +570,7 @@ const capitalize = token => token[1].toUpperCase(); // instead in the assignment below. ].forEach(attributeName => { const name = attributeName.replace(CAMELIZE, capitalize); + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions properties[name] = new PropertyInfoRecord( name, STRING, @@ -582,6 +593,7 @@ const capitalize = token => token[1].toUpperCase(); // instead in the assignment below. ].forEach(attributeName => { const name = attributeName.replace(CAMELIZE, capitalize); + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions properties[name] = new PropertyInfoRecord( name, STRING, @@ -597,6 +609,7 @@ const capitalize = token => token[1].toUpperCase(); // The attribute name is case-sensitive in SVG so we can't just use // the React name like we do for attributes that exist only in HTML. ['tabIndex', 'crossOrigin'].forEach(attributeName => { + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions properties[attributeName] = new PropertyInfoRecord( attributeName, STRING, @@ -611,6 +624,7 @@ const capitalize = token => token[1].toUpperCase(); // These attributes accept URLs. These must not allow javascript: URLS. // These will also need to accept Trusted Types object in the future. const xlinkHref = 'xlinkHref'; +// $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions properties[xlinkHref] = new PropertyInfoRecord( 'xlinkHref', STRING, @@ -622,6 +636,7 @@ properties[xlinkHref] = new PropertyInfoRecord( ); ['src', 'href', 'action', 'formAction'].forEach(attributeName => { + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions properties[attributeName] = new PropertyInfoRecord( attributeName, STRING, diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js index 992634612857e..13498ae1fa96e 100644 --- a/packages/react-dom/src/client/ReactDOMRoot.js +++ b/packages/react-dom/src/client/ReactDOMRoot.js @@ -248,6 +248,7 @@ export function createRoot( : container; listenToAllSupportedEvents(rootContainerElement); + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions return new ReactDOMRoot(root); } @@ -340,6 +341,7 @@ export function hydrateRoot( } } + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions return new ReactDOMHydrationRoot(root); } diff --git a/packages/react-fetch/src/ReactFetchBrowser.js b/packages/react-fetch/src/ReactFetchBrowser.js index 62339227cc8e7..6e1c2e89afbb8 100644 --- a/packages/react-fetch/src/ReactFetchBrowser.js +++ b/packages/react-fetch/src/ReactFetchBrowser.js @@ -163,6 +163,7 @@ export function fetch(url: string, options: mixed): Object { if (nativeResponse._reactResponse) { return nativeResponse._reactResponse; } else { + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions return (nativeResponse._reactResponse = new Response(nativeResponse)); } } diff --git a/packages/react-fetch/src/ReactFetchNode.js b/packages/react-fetch/src/ReactFetchNode.js index 1aea85ff4e2b1..d645f6e4ad0ac 100644 --- a/packages/react-fetch/src/ReactFetchNode.js +++ b/packages/react-fetch/src/ReactFetchNode.js @@ -46,6 +46,7 @@ function nodeFetch( // $FlowFixMe: node flow type has `port` as a number const request = nodeImpl.request(nodeOptions, response => { // TODO: support redirects. + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions onResolve(new Response(response)); }); request.on('error', error => { diff --git a/packages/react-pg/src/ReactPostgres.js b/packages/react-pg/src/ReactPostgres.js index 85d840d0013f1..1bad8df2aae4a 100644 --- a/packages/react-pg/src/ReactPostgres.js +++ b/packages/react-pg/src/ReactPostgres.js @@ -67,6 +67,7 @@ function readRecordValue(record: Record) { } export function Pool(options: mixed) { + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions this.pool = new PostgresPool(options); // Unique function per instance because it's used for cache identity. this.createRecordMap = function() { diff --git a/packages/react-reconciler/src/ReactFiberRoot.new.js b/packages/react-reconciler/src/ReactFiberRoot.new.js index beaa5f509bc95..c9dd3bbd8f949 100644 --- a/packages/react-reconciler/src/ReactFiberRoot.new.js +++ b/packages/react-reconciler/src/ReactFiberRoot.new.js @@ -144,6 +144,7 @@ export function createFiberRoot( onRecoverableError: null | ((error: mixed) => void), transitionCallbacks: null | TransitionTracingCallbacks, ): FiberRoot { + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions const root: FiberRoot = (new FiberRootNode( containerInfo, tag, diff --git a/packages/react-reconciler/src/ReactFiberRoot.old.js b/packages/react-reconciler/src/ReactFiberRoot.old.js index 11221f86a8f4c..483f7b9ab618a 100644 --- a/packages/react-reconciler/src/ReactFiberRoot.old.js +++ b/packages/react-reconciler/src/ReactFiberRoot.old.js @@ -144,6 +144,7 @@ export function createFiberRoot( onRecoverableError: null | ((error: mixed) => void), transitionCallbacks: null | TransitionTracingCallbacks, ): FiberRoot { + // $FlowFixMe[invalid-constructor] Flow no longer supports calling new on functions const root: FiberRoot = (new FiberRootNode( containerInfo, tag, diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig index 28bacfe8c32a9..470bd086920f3 100644 --- a/scripts/flow/config/flowconfig +++ b/scripts/flow/config/flowconfig @@ -48,4 +48,4 @@ munge_underscores=false %REACT_RENDERER_FLOW_OPTIONS% [version] -^0.175.0 +^0.176.0 diff --git a/yarn.lock b/yarn.lock index 4d8272b10801f..e5bf340809a88 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7912,10 +7912,10 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== -flow-bin@^0.175.0: - version "0.175.1" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.175.1.tgz#72237070ba4f293f9e04113481e18929c1de50df" - integrity sha512-zMCP0BPa9BrfBSR7QTcyT/XBwzUbyLdNG0eXvBuNxfHCbMRkUzSceRoOaEZIw+R+GH0UHjVfUvPJ30hXxz1Nfw== +flow-bin@^0.176.0: + version "0.176.3" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.176.3.tgz#d32de04e044ab474afe543b9fd245608bb6a6ac8" + integrity sha512-lbNqgjr2GlGLAEVp5+dhG4LdnFE7ekbvVNifAdlvTx58/nE8GrCOMiUwEQy4dLnfL2NIRMk2dbEVTrugeQJ3mA== fluent-syntax@0.13.0: version "0.13.0" From f02a5f5c79eed4a200afe477452b6b7a680c16af Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 4 Oct 2022 13:25:17 -0400 Subject: [PATCH 18/24] Flow upgrade to 0.182 ghstack-source-id: b9bb8c1560e8ac6baf424deea2015c00629fb353 Pull Request resolved: https://github.com/facebook/react/pull/25419 --- package.json | 2 +- packages/react-devtools-inline/src/backend.js | 1 + packages/react-devtools-inline/src/frontend.js | 1 + .../src/config/DevToolsFeatureFlags.core-fb.js | 6 ++---- .../src/config/DevToolsFeatureFlags.core-oss.js | 6 ++---- .../src/config/DevToolsFeatureFlags.extension-fb.js | 6 ++---- .../src/config/DevToolsFeatureFlags.extension-oss.js | 6 ++---- .../src/devtools/views/Settings/SettingsModal.js | 1 + .../react-dom-bindings/src/client/ReactDOMFloatClient.js | 1 + .../src/events/forks/EventListener-www.js | 5 +---- packages/react/src/ReactStartTransition.js | 3 +++ .../shared/forks/ReactFeatureFlags.native-fb-dynamic.js | 5 +---- packages/shared/forks/ReactFeatureFlags.native-fb.js | 6 ++---- packages/shared/forks/ReactFeatureFlags.native-oss.js | 6 ++---- packages/shared/forks/ReactFeatureFlags.test-renderer.js | 6 ++---- .../forks/ReactFeatureFlags.test-renderer.native.js | 6 ++---- .../shared/forks/ReactFeatureFlags.test-renderer.www.js | 6 ++---- packages/shared/forks/ReactFeatureFlags.testing.js | 6 ++---- packages/shared/forks/ReactFeatureFlags.testing.www.js | 6 ++---- packages/shared/forks/ReactFeatureFlags.www.js | 6 ++---- scripts/flow/config/flowconfig | 2 +- yarn.lock | 8 ++++---- 22 files changed, 39 insertions(+), 62 deletions(-) diff --git a/package.json b/package.json index 6b7571870f657..b3c25420349d6 100644 --- a/package.json +++ b/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.176.0", + "flow-bin": "^0.182.0", "glob": "^7.1.6", "glob-stream": "^6.1.0", "google-closure-compiler": "^20200517.0.0", diff --git a/packages/react-devtools-inline/src/backend.js b/packages/react-devtools-inline/src/backend.js index 234c7f5f8853d..97d2368ac1696 100644 --- a/packages/react-devtools-inline/src/backend.js +++ b/packages/react-devtools-inline/src/backend.js @@ -80,6 +80,7 @@ export function activate( bridge, }: { bridge?: BackendBridge, + // $FlowFixMe[incompatible-exact] } = {}, ): void { if (bridge == null) { diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js index 1e5ea336a477f..272fbba0b9265 100644 --- a/packages/react-devtools-inline/src/frontend.js +++ b/packages/react-devtools-inline/src/frontend.js @@ -62,6 +62,7 @@ export function initialize( }: { bridge?: FrontendBridge, store?: Store, + // $FlowFixMe[incompatible-exact] } = {}, ): React.AbstractComponent { if (bridge == null) { diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js index 59b8e61a42ae1..41d7d0aa112a7 100644 --- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js +++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-fb.js @@ -29,7 +29,5 @@ export const enableProfilerComponentTree = true; import typeof * as FeatureFlagsType from './DevToolsFeatureFlags.default'; import typeof * as ExportsType from './DevToolsFeatureFlags.core-fb'; -// eslint-disable-next-line no-unused-vars -type Check<_X, Y: _X, X: Y = _X> = null; -// eslint-disable-next-line no-unused-expressions -(null: Check); +// Flow magic to verify the exports of this file match the original version. +((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js index 8102c6b751c92..1811dc34119b3 100644 --- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js +++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.core-oss.js @@ -29,7 +29,5 @@ export const enableProfilerComponentTree = true; import typeof * as FeatureFlagsType from './DevToolsFeatureFlags.default'; import typeof * as ExportsType from './DevToolsFeatureFlags.core-oss'; -// eslint-disable-next-line no-unused-vars -type Check<_X, Y: _X, X: Y = _X> = null; -// eslint-disable-next-line no-unused-expressions -(null: Check); +// Flow magic to verify the exports of this file match the original version. +((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js index 76d5546efb3d4..ffe795786b521 100644 --- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js +++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-fb.js @@ -29,7 +29,5 @@ export const enableProfilerComponentTree = true; import typeof * as FeatureFlagsType from './DevToolsFeatureFlags.default'; import typeof * as ExportsType from './DevToolsFeatureFlags.extension-fb'; -// eslint-disable-next-line no-unused-vars -type Check<_X, Y: _X, X: Y = _X> = null; -// eslint-disable-next-line no-unused-expressions -(null: Check); +// Flow magic to verify the exports of this file match the original version. +((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js index 2e6cabf4b56f1..b006b25e7df0b 100644 --- a/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js +++ b/packages/react-devtools-shared/src/config/DevToolsFeatureFlags.extension-oss.js @@ -29,7 +29,5 @@ export const enableProfilerComponentTree = true; import typeof * as FeatureFlagsType from './DevToolsFeatureFlags.default'; import typeof * as ExportsType from './DevToolsFeatureFlags.extension-oss'; -// eslint-disable-next-line no-unused-vars -type Check<_X, Y: _X, X: Y = _X> = null; -// eslint-disable-next-line no-unused-expressions -(null: Check); +// Flow magic to verify the exports of this file match the original version. +((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js index 58377f9696b9b..bafaf237d472e 100644 --- a/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js +++ b/packages/react-devtools-shared/src/devtools/views/Settings/SettingsModal.js @@ -82,6 +82,7 @@ function SettingsModalImpl(_: {}) { case 'components': view = ; break; + // $FlowFixMe[incompatible-type] is this missing in TabID? case 'debugging': view = ; break; diff --git a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js index 0658e14134770..dbe74440146fc 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js +++ b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js @@ -657,6 +657,7 @@ function acquireStyleResource(resource: StyleResource): Instance { } } resource.count++; + // $FlowFixMe[incompatible-return] found when upgrading Flow return resource.instance; } diff --git a/packages/react-dom-bindings/src/events/forks/EventListener-www.js b/packages/react-dom-bindings/src/events/forks/EventListener-www.js index b9f20cca800ad..1055979bcf5d0 100644 --- a/packages/react-dom-bindings/src/events/forks/EventListener-www.js +++ b/packages/react-dom-bindings/src/events/forks/EventListener-www.js @@ -66,7 +66,4 @@ export function removeEventListener( } // Flow magic to verify the exports of this file match the original version. -// eslint-disable-next-line no-unused-vars -type Check<_X, Y: _X, X: Y = _X> = null; -// eslint-disable-next-line no-unused-expressions -(null: Check); +((((null: any): EventListenerType): EventListenerShimType): EventListenerType); diff --git a/packages/react/src/ReactStartTransition.js b/packages/react/src/ReactStartTransition.js index 678daf9832ebc..daafea7e9e67e 100644 --- a/packages/react/src/ReactStartTransition.js +++ b/packages/react/src/ReactStartTransition.js @@ -26,7 +26,9 @@ export function startTransition( if (enableTransitionTracing) { if (options !== undefined && options.name !== undefined) { + // $FlowFixMe[incompatible-use] found when upgrading Flow ReactCurrentBatchConfig.transition.name = options.name; + // $FlowFixMe[incompatible-use] found when upgrading Flow ReactCurrentBatchConfig.transition.startTime = -1; } } @@ -46,6 +48,7 @@ export function startTransition( 'Otherwise concurrent mode guarantees are off the table.', ); } + // $FlowFixMe[incompatible-use] found when upgrading Flow currentTransition._updatedFibers.clear(); } } diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js b/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js index 7138679c536e7..6e9aaacf0e158 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb-dynamic.js @@ -23,7 +23,4 @@ // update the test configuration. // // Flow magic to verify the exports of this file match the original version. -// // eslint-disable-next-line no-unused-vars -// type Check<_X, Y: _X, X: Y = _X> = null; -// // eslint-disable-next-line no-unused-expressions -// (null: Check); +// ((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 821f947415dcd..beafb67bf0716 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -86,8 +86,6 @@ export const enableTransitionTracing = false; export const enableFloat = false; export const useModernStrictMode = false; + // Flow magic to verify the exports of this file match the original version. -// eslint-disable-next-line no-unused-vars -type Check<_X, Y: _X, X: Y = _X> = null; -// eslint-disable-next-line no-unused-expressions -(null: Check); +((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index c63c2187005ae..3fdedac1118e1 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -75,8 +75,6 @@ export const enableTransitionTracing = false; export const enableFloat = false; export const useModernStrictMode = false; + // Flow magic to verify the exports of this file match the original version. -// eslint-disable-next-line no-unused-vars -type Check<_X, Y: _X, X: Y = _X> = null; -// eslint-disable-next-line no-unused-expressions -(null: Check); +((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index 665c42cb8f84d..ce7afbcef7084 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -75,8 +75,6 @@ export const enableTransitionTracing = false; export const enableFloat = false; export const useModernStrictMode = false; + // Flow magic to verify the exports of this file match the original version. -// eslint-disable-next-line no-unused-vars -type Check<_X, Y: _X, X: Y = _X> = null; -// eslint-disable-next-line no-unused-expressions -(null: Check); +((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js index c48df6576ef6b..7d9054bfeb7de 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js @@ -73,8 +73,6 @@ export const enableTransitionTracing = false; export const enableFloat = false; export const useModernStrictMode = false; + // Flow magic to verify the exports of this file match the original version. -// eslint-disable-next-line no-unused-vars -type Check<_X, Y: _X, X: Y = _X> = null; -// eslint-disable-next-line no-unused-expressions -(null: Check); +((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index d4e135d655a05..38278fbc93d42 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -77,8 +77,6 @@ export const enableTransitionTracing = false; export const enableFloat = false; export const useModernStrictMode = false; + // Flow magic to verify the exports of this file match the original version. -// eslint-disable-next-line no-unused-vars -type Check<_X, Y: _X, X: Y = _X> = null; -// eslint-disable-next-line no-unused-expressions -(null: Check); +((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js index f77ed6fa13620..308aaed94dfaa 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.js @@ -75,8 +75,6 @@ export const enableTransitionTracing = false; export const enableFloat = false; export const useModernStrictMode = false; + // Flow magic to verify the exports of this file match the original version. -// eslint-disable-next-line no-unused-vars -type Check<_X, Y: _X, X: Y = _X> = null; -// eslint-disable-next-line no-unused-expressions -(null: Check); +((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js index 1c78538140e1b..89b24c8ed6d03 100644 --- a/packages/shared/forks/ReactFeatureFlags.testing.www.js +++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js @@ -76,8 +76,6 @@ export const enableTransitionTracing = false; export const enableFloat = false; export const useModernStrictMode = false; + // Flow magic to verify the exports of this file match the original version. -// eslint-disable-next-line no-unused-vars -type Check<_X, Y: _X, X: Y = _X> = null; -// eslint-disable-next-line no-unused-expressions -(null: Check); +((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index f8566f9ecb2bd..1811c9bf7ce57 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -112,8 +112,6 @@ export const enableUseMutableSource = true; export const enableCustomElementPropertySupport = __EXPERIMENTAL__; export const useModernStrictMode = false; + // Flow magic to verify the exports of this file match the original version. -// eslint-disable-next-line no-unused-vars -type Check<_X, Y: _X, X: Y = _X> = null; -// eslint-disable-next-line no-unused-expressions -(null: Check); +((((null: any): ExportsType): FeatureFlagsType): ExportsType); diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig index 470bd086920f3..fadeb06f0bb75 100644 --- a/scripts/flow/config/flowconfig +++ b/scripts/flow/config/flowconfig @@ -48,4 +48,4 @@ munge_underscores=false %REACT_RENDERER_FLOW_OPTIONS% [version] -^0.176.0 +^0.182.0 diff --git a/yarn.lock b/yarn.lock index e5bf340809a88..696a20379ab4a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7912,10 +7912,10 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== -flow-bin@^0.176.0: - version "0.176.3" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.176.3.tgz#d32de04e044ab474afe543b9fd245608bb6a6ac8" - integrity sha512-lbNqgjr2GlGLAEVp5+dhG4LdnFE7ekbvVNifAdlvTx58/nE8GrCOMiUwEQy4dLnfL2NIRMk2dbEVTrugeQJ3mA== +flow-bin@^0.182.0: + version "0.182.0" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.182.0.tgz#1dacbd72465743670412ada015d3182deda6f966" + integrity sha512-Ux90c2sMfoV/VVjOEFT2OHFJFnyfoIbTK/5AKAMnU4Skfru1G+FyS5YLu3XxQl0R6mpA9+rrFlPfYZq/5B+J3w== fluent-syntax@0.13.0: version "0.13.0" From aed33a49ccac5f42ea1bde6e97f2f470edcd6574 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 4 Oct 2022 13:42:34 -0400 Subject: [PATCH 19/24] Flow upgrade to 0.185 ghstack-source-id: 8104710c9643aa54961a02546f253dc99d70dd5d Pull Request resolved: https://github.com/facebook/react/pull/25420 --- package.json | 2 +- packages/react-client/src/ReactFlightClient.js | 1 + .../src/app/InspectableElements/EdgeCaseObjects.js | 2 ++ .../src/client/ReactDOMFloatClient.js | 1 + .../src/ReactFabricEventEmitter.js | 1 + .../react-reconciler/src/ReactFiberWorkLoop.new.js | 10 +++++++--- .../react-reconciler/src/ReactFiberWorkLoop.old.js | 10 +++++++--- .../src/ReactFlightWebpackNodeRegister.js | 1 + scripts/flow/config/flowconfig | 3 ++- yarn.lock | 8 ++++---- 10 files changed, 27 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index b3c25420349d6..b8260ff5c0f4d 100644 --- a/package.json +++ b/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.182.0", + "flow-bin": "^0.185.0", "glob": "^7.1.6", "glob-stream": "^6.1.0", "google-closure-compiler": "^20200517.0.0", diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 44815dce4b5b9..33db1c494b2d9 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -321,6 +321,7 @@ function initializeModelChunk(chunk: ResolvedModelChunk): void { initializingChunkBlockedModel !== null && initializingChunkBlockedModel.deps > 0 ) { + // $FlowFixMe[incompatible-type]: found when upgrading Flow initializingChunkBlockedModel.value = value; // We discovered new dependencies on modules that are not yet resolved. // We have to go the BLOCKED state until they're resolved. diff --git a/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js b/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js index 5c3eb7e3d5f68..d2a73510aef4b 100644 --- a/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js +++ b/packages/react-devtools-shell/src/app/InspectableElements/EdgeCaseObjects.js @@ -16,7 +16,9 @@ const objectWithModifiedHasOwnProperty = { }; const objectWithNullProto = Object.create(null); +// $FlowFixMe[prop-missing] found when upgrading Flow objectWithNullProto.foo = 'abc'; +// $FlowFixMe[prop-missing] found when upgrading Flow objectWithNullProto.bar = 123; export default function EdgeCaseObjects(): React.Node { diff --git a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js index dbe74440146fc..22a8a17fadf31 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js +++ b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js @@ -528,6 +528,7 @@ function createStyleResource( } else { const hint = preloadResources.get(href); if (hint) { + // $FlowFixMe[incompatible-type]: found when upgrading Flow resource.hint = hint; // If a preload for this style Resource already exists there are certain props we want to adopt // on the style Resource, primarily focussed on making sure the style network pathways utilize diff --git a/packages/react-native-renderer/src/ReactFabricEventEmitter.js b/packages/react-native-renderer/src/ReactFabricEventEmitter.js index 49f83b43758df..272d41208ccb7 100644 --- a/packages/react-native-renderer/src/ReactFabricEventEmitter.js +++ b/packages/react-native-renderer/src/ReactFabricEventEmitter.js @@ -117,6 +117,7 @@ export function dispatchEvent( const event = {eventName: topLevelType, nativeEvent}; // $FlowFixMe[class-object-subtyping] found when upgrading Flow RawEventEmitter.emit(topLevelType, event); + // $FlowFixMe[class-object-subtyping] found when upgrading Flow RawEventEmitter.emit('*', event); // Heritage plugin event system diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index c32c6bed13f0e..19a98052cd742 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js @@ -404,18 +404,19 @@ export function addMarkerProgressCallbackToPendingTransition( ) { if (enableTransitionTracing) { if (currentPendingTransitionCallbacks === null) { - currentPendingTransitionCallbacks = { + currentPendingTransitionCallbacks = ({ transitionStart: null, transitionProgress: null, transitionComplete: null, markerProgress: new Map(), markerIncomplete: null, markerComplete: null, - }; + }: PendingTransitionCallbacks); } if (currentPendingTransitionCallbacks.markerProgress === null) { - // $FlowFixMe[incompatible-use] found when upgrading Flow + // $FlowFixMe[incompatible-use] + // $FlowFixMe[incompatible-type] currentPendingTransitionCallbacks.markerProgress = new Map(); } @@ -445,6 +446,7 @@ export function addMarkerIncompleteCallbackToPendingTransition( if (currentPendingTransitionCallbacks.markerIncomplete === null) { // $FlowFixMe[incompatible-use] found when upgrading Flow + // $FlowFixMe[incompatible-type] found when upgrading Flow currentPendingTransitionCallbacks.markerIncomplete = new Map(); } @@ -473,6 +475,7 @@ export function addMarkerCompleteCallbackToPendingTransition( if (currentPendingTransitionCallbacks.markerComplete === null) { // $FlowFixMe[incompatible-use] found when upgrading Flow + // $FlowFixMe[incompatible-type] found when upgrading Flow currentPendingTransitionCallbacks.markerComplete = new Map(); } @@ -501,6 +504,7 @@ export function addTransitionProgressCallbackToPendingTransition( if (currentPendingTransitionCallbacks.transitionProgress === null) { // $FlowFixMe[incompatible-use] found when upgrading Flow + // $FlowFixMe[incompatible-type] found when upgrading Flow currentPendingTransitionCallbacks.transitionProgress = new Map(); } diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index 339bee2ea0879..6b8efdba30695 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js @@ -404,18 +404,19 @@ export function addMarkerProgressCallbackToPendingTransition( ) { if (enableTransitionTracing) { if (currentPendingTransitionCallbacks === null) { - currentPendingTransitionCallbacks = { + currentPendingTransitionCallbacks = ({ transitionStart: null, transitionProgress: null, transitionComplete: null, markerProgress: new Map(), markerIncomplete: null, markerComplete: null, - }; + }: PendingTransitionCallbacks); } if (currentPendingTransitionCallbacks.markerProgress === null) { - // $FlowFixMe[incompatible-use] found when upgrading Flow + // $FlowFixMe[incompatible-use] + // $FlowFixMe[incompatible-type] currentPendingTransitionCallbacks.markerProgress = new Map(); } @@ -445,6 +446,7 @@ export function addMarkerIncompleteCallbackToPendingTransition( if (currentPendingTransitionCallbacks.markerIncomplete === null) { // $FlowFixMe[incompatible-use] found when upgrading Flow + // $FlowFixMe[incompatible-type] found when upgrading Flow currentPendingTransitionCallbacks.markerIncomplete = new Map(); } @@ -473,6 +475,7 @@ export function addMarkerCompleteCallbackToPendingTransition( if (currentPendingTransitionCallbacks.markerComplete === null) { // $FlowFixMe[incompatible-use] found when upgrading Flow + // $FlowFixMe[incompatible-type] found when upgrading Flow currentPendingTransitionCallbacks.markerComplete = new Map(); } @@ -501,6 +504,7 @@ export function addTransitionProgressCallbackToPendingTransition( if (currentPendingTransitionCallbacks.transitionProgress === null) { // $FlowFixMe[incompatible-use] found when upgrading Flow + // $FlowFixMe[incompatible-type] found when upgrading Flow currentPendingTransitionCallbacks.transitionProgress = new Map(); } diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js index 0adff81020373..4c9b3447d028c 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js +++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js @@ -101,6 +101,7 @@ module.exports = function register() { name: '*', // Represents the whole object instead of a particular import. async: false, }; + // $FlowFixMe[incompatible-call] found when upgrading Flow module.exports = new Proxy(moduleReference, proxyHandlers); }; diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig index fadeb06f0bb75..7e0724cdcec47 100644 --- a/scripts/flow/config/flowconfig +++ b/scripts/flow/config/flowconfig @@ -43,9 +43,10 @@ untyped-type-import=error %CI_MAX_WORKERS% exact_by_default=true munge_underscores=false +inference_mode=classic # Substituted by createFlowConfig.js: %REACT_RENDERER_FLOW_OPTIONS% [version] -^0.182.0 +^0.185.0 diff --git a/yarn.lock b/yarn.lock index 696a20379ab4a..992fb5c4adfd0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7912,10 +7912,10 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== -flow-bin@^0.182.0: - version "0.182.0" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.182.0.tgz#1dacbd72465743670412ada015d3182deda6f966" - integrity sha512-Ux90c2sMfoV/VVjOEFT2OHFJFnyfoIbTK/5AKAMnU4Skfru1G+FyS5YLu3XxQl0R6mpA9+rrFlPfYZq/5B+J3w== +flow-bin@^0.185.0: + version "0.185.2" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.185.2.tgz#b45a07d45cf641198e86e47848e35f64b0688c4c" + integrity sha512-Vphs8Z4Qo17dzlPKe/l8M85JvGn1Tf5NV6xESZLg8p9ktdIbNUYaxnq/WBQPoESiLrGdrC2v+rfezfh3tvxkvQ== fluent-syntax@0.13.0: version "0.13.0" From af9afe9b3f622aa5eb4caf873025423ba8163c9f Mon Sep 17 00:00:00 2001 From: lauren Date: Tue, 4 Oct 2022 12:29:36 -0700 Subject: [PATCH 20/24] Update safe-string-coercion to handle additions of string literals (#25286) * Update safe-string-coercion to handle additions of string literals Adding strings shouldn't trigger a lint violation of this rule, since adding strings are always safe. --- .../safe-string-coercion-test.internal.js | 31 ++++++++++++++--- scripts/eslint-rules/safe-string-coercion.js | 34 ++++++++++++++++--- 2 files changed, 57 insertions(+), 8 deletions(-) diff --git a/scripts/eslint-rules/__tests__/safe-string-coercion-test.internal.js b/scripts/eslint-rules/__tests__/safe-string-coercion-test.internal.js index 32c58a4351719..e1dfc0c69ec2d 100644 --- a/scripts/eslint-rules/__tests__/safe-string-coercion-test.internal.js +++ b/scripts/eslint-rules/__tests__/safe-string-coercion-test.internal.js @@ -11,6 +11,15 @@ const rule = require('../safe-string-coercion'); const {RuleTester} = require('eslint'); + +RuleTester.setDefaultConfig({ + parser: require.resolve('babel-eslint'), + parserOptions: { + ecmaVersion: 6, + sourceType: 'module', + }, +}); + const ruleTester = new RuleTester(); const missingDevCheckMessage = @@ -57,7 +66,7 @@ ruleTester.run('eslint-rules/safe-string-coercion', rule, { } `, ` - if (__DEV__) { checkFormFieldValueStringCoercion (obj) } + if (__DEV__) { checkFormFieldValueStringCoercion (obj) } '' + obj; `, ` @@ -87,6 +96,9 @@ ruleTester.run('eslint-rules/safe-string-coercion', rule, { // doesn't violate this rule. "if (typeof obj === 'string') { if (typeof obj === 'string' && obj.length) {} else {'' + obj} }", "if (typeof obj === 'string') if (typeof obj === 'string' && obj.length) {} else {'' + obj}", + "'' + ''", + "'' + '' + ''", + "`test${foo}` + ''", ], invalid: [ { @@ -145,7 +157,7 @@ ruleTester.run('eslint-rules/safe-string-coercion', rule, { }, { code: ` - if (__D__) { checkFormFieldValueStringCoercion (obj) } + if (__D__) { checkFormFieldValueStringCoercion (obj) } '' + obj; `, errors: [ @@ -156,7 +168,7 @@ ruleTester.run('eslint-rules/safe-string-coercion', rule, { }, { code: ` - if (__DEV__) { checkFormFieldValueStringCoercion (obj) } + if (__DEV__) { checkFormFieldValueStringCoercion (obj) } '' + notobjj; `, errors: [ @@ -172,7 +184,7 @@ ruleTester.run('eslint-rules/safe-string-coercion', rule, { code: ` if (__DEV__) { checkFormFieldValueStringCoercion (obj) } // must be right before the check call - someOtherCode(); + someOtherCode(); '' + objj; `, errors: [ @@ -261,5 +273,16 @@ ruleTester.run('eslint-rules/safe-string-coercion', rule, { }, ], }, + { + code: `'' + obj + ''`, + errors: [ + {message: missingDevCheckMessage + '\n' + message}, + {message: missingDevCheckMessage + '\n' + message}, + ], + }, + { + code: `foo\`text\` + ""`, + errors: [{message: missingDevCheckMessage + '\n' + message}], + }, ], }); diff --git a/scripts/eslint-rules/safe-string-coercion.js b/scripts/eslint-rules/safe-string-coercion.js index 3a6c8ebb142b6..39259f89742bf 100644 --- a/scripts/eslint-rules/safe-string-coercion.js +++ b/scripts/eslint-rules/safe-string-coercion.js @@ -17,6 +17,15 @@ function isEmptyLiteral(node) { ); } +function isStringLiteral(node) { + return ( + // TaggedTemplateExpressions can return non-strings + (node.type === 'TemplateLiteral' && + node.parent.type !== 'TaggedTemplateExpression') || + (node.type === 'Literal' && typeof node.value === 'string') + ); +} + // Symbols and Temporal.* objects will throw when using `'' + value`, but that // pattern can be faster than `String(value)` because JS engines can optimize // `+` better in some cases. Therefore, in perf-sensitive production codepaths @@ -120,9 +129,9 @@ function isSafeTypeofExpression(originalValueNode, node) { return false; } -/** +/** Returns true if the code is inside an `if` block that validates the value - excludes symbols and objects. Examples: + excludes symbols and objects. Examples: * if (typeof value === 'string') { } * if (typeof value === 'string' || typeof value === 'number') { } * if (typeof value === 'string' || someOtherTest) { } @@ -259,7 +268,24 @@ function hasCoercionCheck(node) { } } -function plusEmptyString(context, node) { +function isOnlyAddingStrings(node) { + if (node.operator !== '+') { + return; + } + if (isStringLiteral(node.left) && isStringLiteral(node.right)) { + // It's always safe to add string literals + return true; + } + if (node.left.type === 'BinaryExpression' && isStringLiteral(node.right)) { + return isOnlyAddingStrings(node.left); + } +} + +function checkBinaryExpression(context, node) { + if (isOnlyAddingStrings(node)) { + return; + } + if ( node.operator === '+' && (isEmptyLiteral(node.left) || isEmptyLiteral(node.right)) @@ -337,7 +363,7 @@ module.exports = { }, create(context) { return { - BinaryExpression: node => plusEmptyString(context, node), + BinaryExpression: node => checkBinaryExpression(context, node), CallExpression: node => coerceWithStringConstructor(context, node), }; }, From 3b6826ed9e76207d9ab7a513a069fd67b69599a8 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 4 Oct 2022 15:39:26 -0400 Subject: [PATCH 21/24] Flow: inference_mode=constrain_writes This mode is going to be the new default in Flow going forward. There was an unfortuante large number of suppressions in this update. More on the changes can be found in this [Flow blog post](https://medium.com/flow-type/new-flow-language-rule-constrained-writes-4c70e375d190). Added some of the required annotations using the provided codemod: ```sh node_modules/.bin/flow codemod annotate-declarations --write . ``` ghstack-source-id: 0b168e1b23f1305083e71d0b931b732e94705c73 Pull Request resolved: https://github.com/facebook/react/pull/25422 --- packages/react-cache/src/LRU.js | 2 +- .../react-debug-tools/src/ReactDebugHooks.js | 5 +++-- packages/react-devtools-core/src/backend.js | 4 ++++ .../react-devtools-core/src/standalone.js | 1 + .../backend/DevToolsFiberComponentStack.js | 3 ++- .../src/backend/legacy/renderer.js | 4 ++++ .../src/backend/profilingHooks.js | 3 ++- .../src/backend/renderer.js | 22 +++++++++++++------ .../src/backend/views/Highlighter/Overlay.js | 4 ++-- .../src/backend/views/utils.js | 2 +- .../src/devtools/cache.js | 4 +++- .../src/devtools/store.js | 10 +++++---- .../Components/NativeStyleEditor/context.js | 6 ++++- .../devtools/views/Components/NewKeyValue.js | 2 +- .../views/Components/OwnersListContext.js | 6 ++++- .../views/Components/SelectedTreeHighlight.js | 3 ++- .../devtools/views/Components/TreeContext.js | 2 +- .../src/devtools/views/Profiler/Tooltip.js | 4 ++-- .../src/devtools/views/hooks.js | 2 +- .../src/dynamicImportCache.js | 2 +- .../src/registerDevToolsEventLogger.js | 2 +- .../src/view-base/useCanvasInteraction.js | 1 + .../src/client/ReactDOMFloatClient.js | 2 +- .../src/client/ReactDOMHostConfig.js | 3 ++- .../src/events/DOMPluginEventSystem.js | 15 +++++++------ packages/react-fs/src/ReactFilesystem.js | 5 +++++ .../src/ReactNativeAttributePayload.js | 3 +++ .../src/legacy-events/EventPluginRegistry.js | 1 + packages/react-pg/src/ReactPostgres.js | 2 +- .../src/ReactChildFiber.new.js | 2 +- .../src/ReactChildFiber.old.js | 2 +- .../src/ReactFiberBeginWork.new.js | 7 ++++++ .../src/ReactFiberBeginWork.old.js | 7 ++++++ .../src/ReactFiberClassUpdateQueue.new.js | 6 +++-- .../src/ReactFiberClassUpdateQueue.old.js | 6 +++-- .../src/ReactFiberCommitWork.new.js | 12 +++++++--- .../src/ReactFiberCommitWork.old.js | 12 +++++++--- .../src/ReactFiberCompleteWork.new.js | 9 ++++++++ .../src/ReactFiberCompleteWork.old.js | 9 ++++++++ .../src/ReactFiberComponentStack.js | 3 ++- .../src/ReactFiberContext.new.js | 3 ++- .../src/ReactFiberContext.old.js | 3 ++- .../src/ReactFiberHooks.new.js | 2 ++ .../src/ReactFiberHooks.old.js | 2 ++ .../src/ReactFiberHotReloading.new.js | 1 + .../src/ReactFiberHotReloading.old.js | 1 + .../src/ReactFiberNewContext.new.js | 2 +- .../src/ReactFiberNewContext.old.js | 2 +- .../src/ReactFiberReconciler.new.js | 2 +- .../src/ReactFiberReconciler.old.js | 2 +- .../src/ReactFiberScope.new.js | 4 ++-- .../src/ReactFiberScope.old.js | 4 ++-- .../src/ReactFiberSyncTaskQueue.new.js | 3 ++- .../src/ReactFiberSyncTaskQueue.old.js | 3 ++- .../src/ReactFiberThrow.new.js | 3 ++- .../src/ReactFiberThrow.old.js | 3 ++- .../src/ReactFiberTreeReflection.js | 7 +++--- .../src/ReactFiberWorkLoop.new.js | 8 ++++--- .../src/ReactFiberWorkLoop.old.js | 8 ++++--- .../src/ReactPostPaintCallback.js | 2 +- .../src/ReactStrictModeWarnings.new.js | 2 +- .../src/ReactStrictModeWarnings.old.js | 2 +- .../src/ReactTestSelectors.js | 10 ++++----- .../src/ReactFlightWebpackPlugin.js | 1 + .../src/ReactFizzComponentStack.js | 3 ++- packages/react-server/src/ReactFizzHooks.js | 6 ++++- .../src/ReactTestRenderer.js | 2 ++ packages/react/src/ReactAct.js | 1 + .../src/useSyncExternalStoreWithSelector.js | 2 +- scripts/flow/config/flowconfig | 1 - 70 files changed, 207 insertions(+), 88 deletions(-) diff --git a/packages/react-cache/src/LRU.js b/packages/react-cache/src/LRU.js index 8462849c4463b..60f6e6ea099a1 100644 --- a/packages/react-cache/src/LRU.js +++ b/packages/react-cache/src/LRU.js @@ -57,7 +57,7 @@ export function createLRU(limit: number): LRU { // Delete entries from the cache, starting from the end of the list. if (first !== null) { const resolvedFirst: Entry = (first: any); - let last = resolvedFirst.previous; + let last: null | Entry = resolvedFirst.previous; while (size > targetSize && last !== null) { const onDelete = last.onDelete; const previous = last.previous; diff --git a/packages/react-debug-tools/src/ReactDebugHooks.js b/packages/react-debug-tools/src/ReactDebugHooks.js index 6409647772eff..2bd458d06757d 100644 --- a/packages/react-debug-tools/src/ReactDebugHooks.js +++ b/packages/react-debug-tools/src/ReactDebugHooks.js @@ -217,7 +217,7 @@ function useImperativeHandle( // and if there is a ref callback it might not store it but if it does we // have no way of knowing where. So let's only enable introspection of the // ref itself if it is using the object form. - let instance = undefined; + let instance: ?T = undefined; if (ref !== null && typeof ref === 'object') { instance = ref.current; } @@ -716,6 +716,7 @@ export function inspectHooks( } finally { readHookLog = hookLog; hookLog = []; + // $FlowFixMe[incompatible-use] found when upgrading Flow currentDispatcher.current = previousDispatcher; } const rootStack = ErrorStackParser.parse(ancestorStackError); @@ -723,7 +724,7 @@ export function inspectHooks( } function setupContexts(contextMap: Map, any>, fiber: Fiber) { - let current = fiber; + let current: null | Fiber = fiber; while (current) { if (current.tag === ContextProvider) { const providerType: ReactProviderType = current.type; diff --git a/packages/react-devtools-core/src/backend.js b/packages/react-devtools-core/src/backend.js index b63cd13006e3d..48a1348ee05cc 100644 --- a/packages/react-devtools-core/src/backend.js +++ b/packages/react-devtools-core/src/backend.js @@ -146,6 +146,7 @@ export function connectToDevTools(options: ?ConnectOptions) { } }, ); + // $FlowFixMe[incompatible-use] found when upgrading Flow bridge.addListener( 'updateComponentFilters', (componentFilters: Array) => { @@ -165,10 +166,12 @@ export function connectToDevTools(options: ?ConnectOptions) { // Ideally the backend would save the filters itself, but RN doesn't provide a sync storage solution. // So for now we just fall back to using the default filters... if (window.__REACT_DEVTOOLS_COMPONENT_FILTERS__ == null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow bridge.send('overrideComponentFilters', savedComponentFilters); } // TODO (npm-packages) Warn if "isBackendStorageAPISupported" + // $FlowFixMe[incompatible-call] found when upgrading Flow const agent = new Agent(bridge); agent.addListener('shutdown', () => { // If we received 'shutdown' from `agent`, we assume the `bridge` is already shutting down, @@ -181,6 +184,7 @@ export function connectToDevTools(options: ?ConnectOptions) { // Setup React Native style editor if the environment supports it. if (resolveRNStyle != null || hook.resolveRNStyle != null) { setupNativeStyleEditor( + // $FlowFixMe[incompatible-call] found when upgrading Flow bridge, agent, ((resolveRNStyle || hook.resolveRNStyle: any): ResolveNativeStyle), diff --git a/packages/react-devtools-core/src/standalone.js b/packages/react-devtools-core/src/standalone.js index 315b6bcaf936e..6e1f403f9800d 100644 --- a/packages/react-devtools-core/src/standalone.js +++ b/packages/react-devtools-core/src/standalone.js @@ -256,6 +256,7 @@ function initialize(socket: WebSocket) { socket.close(); }); + // $FlowFixMe[incompatible-call] found when upgrading Flow store = new Store(bridge, { checkBridgeProtocolCompatibility: true, supportsNativeInspection: true, diff --git a/packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js b/packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js index 4bec30e92b45f..c1e1a2ed04b31 100644 --- a/packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js +++ b/packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js @@ -84,9 +84,10 @@ export function getStackByFiberInDevAndProd( ): string { try { let info = ''; - let node = workInProgress; + let node: Fiber = workInProgress; do { info += describeFiber(workTagMap, node, currentDispatcherRef); + // $FlowFixMe[incompatible-type] we bail out when we get a null node = node.return; } while (node); return info; diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js index 1f53b61d71e82..48cbe21f5bb08 100644 --- a/packages/react-devtools-shared/src/backend/legacy/renderer.js +++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js @@ -248,6 +248,7 @@ export function attach( parentIDStack.pop(); return result; } catch (err) { + // $FlowFixMe[incompatible-type] found when upgrading Flow parentIDStack = []; throw err; } finally { @@ -284,6 +285,7 @@ export function attach( parentIDStack.pop(); return result; } catch (err) { + // $FlowFixMe[incompatible-type] found when upgrading Flow parentIDStack = []; throw err; } finally { @@ -320,6 +322,7 @@ export function attach( parentIDStack.pop(); return result; } catch (err) { + // $FlowFixMe[incompatible-type] found when upgrading Flow parentIDStack = []; throw err; } finally { @@ -351,6 +354,7 @@ export function attach( return result; } catch (err) { + // $FlowFixMe[incompatible-type] found when upgrading Flow parentIDStack = []; throw err; } finally { diff --git a/packages/react-devtools-shared/src/backend/profilingHooks.js b/packages/react-devtools-shared/src/backend/profilingHooks.js index a6c314584c140..c91bb36a16148 100644 --- a/packages/react-devtools-shared/src/backend/profilingHooks.js +++ b/packages/react-devtools-shared/src/backend/profilingHooks.js @@ -799,7 +799,7 @@ export function createProfilingHooks({ function getParentFibers(fiber: Fiber): Array { const parents = []; - let parent = fiber; + let parent: null | Fiber = fiber; while (parent !== null) { parents.push(parent); parent = parent.return; @@ -824,6 +824,7 @@ export function createProfilingHooks({ warning: null, }; currentFiberStacks.set(event, getParentFibers(fiber)); + // $FlowFixMe[incompatible-use] found when upgrading Flow currentTimelineData.schedulingEvents.push(event); } } diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index c4ff00e08f423..4e9dbb3156c1c 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -2269,7 +2269,7 @@ export function attach( // This is a naive implementation that shallowly recourses children. // We might want to revisit this if it proves to be too inefficient. - let child = childSet; + let child: null | Fiber = childSet; while (child !== null) { findReorderedChildrenRecursively(child, nextChildren); child = child.sibling; @@ -2846,11 +2846,11 @@ export function attach( // https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberTreeReflection.js function getNearestMountedFiber(fiber: Fiber): null | Fiber { let node = fiber; - let nearestMounted = fiber; + let nearestMounted: null | Fiber = fiber; if (!fiber.alternate) { // If there is no alternate, this might be a new tree that isn't inserted // yet. If it is, then it will have a pending insertion effect on it. - let nextNode = node; + let nextNode: Fiber = node; do { node = nextNode; if ((node.flags & (Placement | Hydrating)) !== NoFlags) { @@ -2859,6 +2859,7 @@ export function attach( // if that one is still mounted. nearestMounted = node.return; } + // $FlowFixMe[incompatible-type] we bail out when we get a null nextNode = node.return; } while (nextNode); } else { @@ -3097,7 +3098,7 @@ export function attach( const owners: Array = [fiberToSerializedElement(fiber)]; if (_debugOwner) { - let owner = _debugOwner; + let owner: null | Fiber = _debugOwner; while (owner !== null) { owners.unshift(fiberToSerializedElement(owner)); owner = owner._debugOwner || null; @@ -3256,7 +3257,7 @@ export function attach( let owners = null; if (_debugOwner) { owners = []; - let owner = _debugOwner; + let owner: null | Fiber = _debugOwner; while (owner !== null) { owners.push(fiberToSerializedElement(owner)); owner = owner._debugOwner || null; @@ -3687,18 +3688,22 @@ export function attach( // This will enable us to send patches without re-inspecting if hydrated paths are requested. // (Reducing how often we shallow-render is a better DX for function components that use hooks.) const cleanedInspectedElement = {...mostRecentlyInspectedElement}; + // $FlowFixMe[prop-missing] found when upgrading Flow cleanedInspectedElement.context = cleanForBridge( cleanedInspectedElement.context, createIsPathAllowed('context', null), ); + // $FlowFixMe[prop-missing] found when upgrading Flow cleanedInspectedElement.hooks = cleanForBridge( cleanedInspectedElement.hooks, createIsPathAllowed('hooks', 'hooks'), ); + // $FlowFixMe[prop-missing] found when upgrading Flow cleanedInspectedElement.props = cleanForBridge( cleanedInspectedElement.props, createIsPathAllowed('props', null), ); + // $FlowFixMe[prop-missing] found when upgrading Flow cleanedInspectedElement.state = cleanForBridge( cleanedInspectedElement.state, createIsPathAllowed('state', null), @@ -3709,6 +3714,7 @@ export function attach( responseID: requestID, type: 'full-data', // $FlowFixMe[incompatible-return] found when upgrading Flow + // $FlowFixMe[prop-missing] found when upgrading Flow value: cleanedInspectedElement, }; } @@ -4420,13 +4426,15 @@ export function attach( // The return path will contain Fibers that are "invisible" to the store // because their keys and indexes are important to restoring the selection. function getPathForElement(id: number): Array | null { - let fiber = idToArbitraryFiberMap.get(id); + let fiber: ?Fiber = idToArbitraryFiberMap.get(id); if (fiber == null) { return null; } const keyPath = []; while (fiber !== null) { + // $FlowFixMe[incompatible-call] found when upgrading Flow keyPath.push(getPathFrame(fiber)); + // $FlowFixMe[incompatible-use] found when upgrading Flow fiber = fiber.return; } keyPath.reverse(); @@ -4443,7 +4451,7 @@ export function attach( return null; } // Find the closest Fiber store is aware of. - let fiber = trackedPathMatchFiber; + let fiber: null | Fiber = trackedPathMatchFiber; while (fiber !== null && shouldFilterFiber(fiber)) { fiber = fiber.return; } diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js index 577aaf912860e..4457d67e19e13 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js @@ -282,7 +282,7 @@ function findTipPos(dims, bounds, tipSize) { const tipWidth = Math.max(tipSize.width, 60); const margin = 5; - let top; + let top: number | string; if (dims.top + dims.height + tipHeight <= bounds.top + bounds.height) { if (dims.top + dims.height < bounds.top + 0) { top = bounds.top + margin; @@ -299,7 +299,7 @@ function findTipPos(dims, bounds, tipSize) { top = bounds.top + bounds.height - tipHeight - margin; } - let left = dims.left + margin; + let left: number | string = dims.left + margin; if (dims.left < bounds.left) { left = bounds.left + margin; } diff --git a/packages/react-devtools-shared/src/backend/views/utils.js b/packages/react-devtools-shared/src/backend/views/utils.js index 43c6ffdc197a2..2e61cf90acb16 100644 --- a/packages/react-devtools-shared/src/backend/views/utils.js +++ b/packages/react-devtools-shared/src/backend/views/utils.js @@ -84,7 +84,7 @@ export function getNestedBoundingClientRect( const ownerIframe = getOwnerIframe(node); if (ownerIframe && ownerIframe !== boundaryWindow) { const rects = [node.getBoundingClientRect()]; - let currentIframe = ownerIframe; + let currentIframe: null | HTMLElement = ownerIframe; let onlyOneMore = false; while (currentIframe) { const rect = getBoundingClientRectWithBorderOffset(currentIframe); diff --git a/packages/react-devtools-shared/src/devtools/cache.js b/packages/react-devtools-shared/src/devtools/cache.js index 693153715bfc2..b0a01a443845a 100644 --- a/packages/react-devtools-shared/src/devtools/cache.js +++ b/packages/react-devtools-shared/src/devtools/cache.js @@ -88,7 +88,9 @@ const resourceConfigs: Map, Config> = new Map(); function getEntriesForResource( resource: any, ): Map | WeakMap { - let entriesForResource = ((entries.get(resource): any): Map); + let entriesForResource: Map | WeakMap = ((entries.get( + resource, + ): any): Map); if (entriesForResource === undefined) { const config = resourceConfigs.get(resource); entriesForResource = diff --git a/packages/react-devtools-shared/src/devtools/store.js b/packages/react-devtools-shared/src/devtools/store.js index 11d4a9a5f1f39..fb0c6d868fad4 100644 --- a/packages/react-devtools-shared/src/devtools/store.js +++ b/packages/react-devtools-shared/src/devtools/store.js @@ -763,7 +763,7 @@ export default class Store extends EventEmitter<{ const weightDelta = 1 - element.weight; - let parentElement = ((this._idToElement.get( + let parentElement: void | Element = ((this._idToElement.get( element.parentID, ): any): Element); while (parentElement != null) { @@ -789,7 +789,7 @@ export default class Store extends EventEmitter<{ : currentElement.weight; const weightDelta = newWeight - oldWeight; - let parentElement = ((this._idToElement.get( + let parentElement: void | Element = ((this._idToElement.get( currentElement.parentID, ): any): Element); while (parentElement != null) { @@ -806,8 +806,10 @@ export default class Store extends EventEmitter<{ currentElement = currentElement.parentID !== 0 - ? this.getElementByID(currentElement.parentID) - : null; + ? // $FlowFixMe[incompatible-type] found when upgrading Flow + this.getElementByID(currentElement.parentID) + : // $FlowFixMe[incompatible-type] found when upgrading Flow + null; } } diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js index 583ac1e70d837..1ce7ff078a743 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/NativeStyleEditor/context.js @@ -66,7 +66,11 @@ const resource: Resource< return request.promise; } - let resolveFn = ((null: any): ResolveFn); + let resolveFn: + | ResolveFn + | (( + result: Promise | StyleAndLayoutFrontend, + ) => void) = ((null: any): ResolveFn); const promise = new Promise(resolve => { resolveFn = resolve; }); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js b/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js index 04c141e6f6cf9..0190f7dece19e 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/NewKeyValue.js @@ -57,7 +57,7 @@ export default function NewKeyValue({ const {id} = inspectedElement; const rendererID = store.getRendererIDForElement(id); if (rendererID !== null) { - let basePath = newPath; + let basePath: Array = newPath; if (hookID != null) { basePath = parseHookPathForEdit(basePath); } diff --git a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js index a6f929c46dacf..eadf2037f0510 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/OwnersListContext.js @@ -49,7 +49,11 @@ const resource: Resource< return request.promise; } - let resolveFn = ((null: any): ResolveFn); + let resolveFn: + | ResolveFn + | (( + result: Promise> | Array, + ) => void) = ((null: any): ResolveFn); const promise = new Promise(resolve => { resolveFn = resolve; }); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js index 05b34ab66ed7e..08e7f51b557ec 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedTreeHighlight.js @@ -7,6 +7,7 @@ * @flow */ +import type {Element} from './types'; import * as React from 'react'; import {useContext, useMemo} from 'react'; import {TreeStateContext} from './TreeContext'; @@ -53,7 +54,7 @@ export default function SelectedTreeHighlight(_: {}): React.Node { } let stopIndex = null; - let current = element; + let current: null | Element = element; while (current !== null) { if (current.isCollapsed || current.children.length === 0) { // We've found the last/deepest descendant. diff --git a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js index 90208c5bae387..027bf1d652f14 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/TreeContext.js @@ -294,7 +294,7 @@ function reduceTreeState(store: Store, state: State, action: Action): State { ) { const leafElement = store.getElementByID(ownerSubtreeLeafElementID); if (leafElement !== null) { - let currentElement = leafElement; + let currentElement: null | Element = leafElement; while (currentElement !== null) { if (currentElement.ownerID === selectedElementID) { selectedElementIndex = store.getIndexOfElementID( diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js index 5287cf3d56308..baf61f82822be 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js @@ -57,8 +57,8 @@ const TOOLTIP_OFFSET = 5; // Method used to find the position of the tooltip based on current mouse position function getTooltipPosition(element, mousePosition) { const {height, mouseX, mouseY, width} = mousePosition; - let top = 0; - let left = 0; + let top: number | string = 0; + let left: number | string = 0; if (mouseY + TOOLTIP_OFFSET + element.offsetHeight >= height) { if (mouseY - TOOLTIP_OFFSET - element.offsetHeight > 0) { diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js index 8366a221611fe..3baf29d0f7e4c 100644 --- a/packages/react-devtools-shared/src/devtools/views/hooks.js +++ b/packages/react-devtools-shared/src/devtools/views/hooks.js @@ -238,7 +238,7 @@ export function useModalDismissSignal( // Delay until after the current call stack is empty, // in case this effect is being run while an event is currently bubbling. // In that case, we don't want to listen to the pre-existing event. - let timeoutID = setTimeout(() => { + let timeoutID: null | TimeoutID = setTimeout(() => { timeoutID = null; // It's important to listen to the ownerDocument to support the browser extension. diff --git a/packages/react-devtools-shared/src/dynamicImportCache.js b/packages/react-devtools-shared/src/dynamicImportCache.js index 3e6c2f262837a..df55475add70c 100644 --- a/packages/react-devtools-shared/src/dynamicImportCache.js +++ b/packages/react-devtools-shared/src/dynamicImportCache.js @@ -136,7 +136,7 @@ export function loadModule(moduleLoaderFunction: ModuleLoaderFunction): Module { ); // Eventually timeout and stop trying to load the module. - let timeoutID = setTimeout(function onTimeout() { + let timeoutID: null | TimeoutID = setTimeout(function onTimeout() { if (__DEBUG__) { console.log( `[dynamicImportCache] loadModule("${moduleLoaderFunction.name}") onTimeout()`, diff --git a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js index 4b044cf086119..72e5a635eab3c 100644 --- a/packages/react-devtools-shared/src/registerDevToolsEventLogger.js +++ b/packages/react-devtools-shared/src/registerDevToolsEventLogger.js @@ -13,7 +13,7 @@ import {registerEventLogger} from 'react-devtools-shared/src/Logger'; import {enableLogger} from 'react-devtools-feature-flags'; let loggingIFrame = null; -let missedEvents = []; +let missedEvents: Array = []; type LoggerContext = { page_url: ?string, diff --git a/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js b/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js index 367569e65a6ab..628debee34b7c 100644 --- a/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js +++ b/packages/react-devtools-timeline/src/view-base/useCanvasInteraction.js @@ -125,6 +125,7 @@ export function useCanvasInteraction( } function localToCanvasCoordinates(localCoordinates: Point): Point { + // $FlowFixMe[incompatible-call] found when upgrading Flow const canvasRect = cacheFirstGetCanvasBoundingRect(canvas); return { x: localCoordinates.x - canvasRect.left, diff --git a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js index 22a8a17fadf31..500cdfb79f9c8 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js +++ b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js @@ -595,7 +595,7 @@ function createPreloadResource( const limitedEscapedHref = escapeSelectorAttributeValueInsideDoubleQuotes( href, ); - let element = ownerDocument.querySelector( + let element: null | Instance | HTMLElement = ownerDocument.querySelector( `link[rel="preload"][href="${limitedEscapedHref}"]`, ); if (!element) { diff --git a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js b/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js index a6c193e17edbe..63c854a92acdd 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js +++ b/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js @@ -593,7 +593,7 @@ export function clearSuspenseBoundary( parentInstance: Instance, suspenseInstance: SuspenseInstance, ): void { - let node = suspenseInstance; + let node: Node = suspenseInstance; // Delete all nodes within this suspense boundary. // There might be nested nodes so we need to keep track of how // deep we are and only break out when we're back on top. @@ -620,6 +620,7 @@ export function clearSuspenseBoundary( depth++; } } + // $FlowFixMe[incompatible-type] we bail out when we get a null node = nextNode; } while (node); // TODO: Warn, we didn't find the end comment boundary. diff --git a/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js b/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js index 131578fae8b6e..60565a7af8d71 100644 --- a/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js +++ b/packages/react-dom-bindings/src/events/DOMPluginEventSystem.js @@ -427,7 +427,7 @@ function addTrappedEventListener( ); // If passive option is not supported, then the event will be // active and not passive. - let isPassiveListener = undefined; + let isPassiveListener: void | boolean = undefined; if (passiveBrowserEventsSupported) { // Browsers introduced an intervention, making these events // passive by default on document. React doesn't bind them @@ -578,7 +578,7 @@ export function dispatchEventForPluginEventSystem( // root boundaries that match that of our current "rootContainer". // If we find that "rootContainer", we find the parent fiber // sub-tree for that root and make that our ancestor instance. - let node = targetInst; + let node: null | Fiber = targetInst; mainLoop: while (true) { if (node === null) { @@ -823,6 +823,7 @@ function getParent(inst: Fiber | null): Fiber | null { return null; } do { + // $FlowFixMe[incompatible-use] found when upgrading Flow inst = inst.return; // TODO: If this is a HostRoot we might want to bail out. // That is depending on if we want nested subtrees (layers) to bubble @@ -841,14 +842,14 @@ function getParent(inst: Fiber | null): Fiber | null { * different trees. */ function getLowestCommonAncestor(instA: Fiber, instB: Fiber): Fiber | null { - let nodeA = instA; - let nodeB = instB; + let nodeA: null | Fiber = instA; + let nodeB: null | Fiber = instB; let depthA = 0; - for (let tempA = nodeA; tempA; tempA = getParent(tempA)) { + for (let tempA: null | Fiber = nodeA; tempA; tempA = getParent(tempA)) { depthA++; } let depthB = 0; - for (let tempB = nodeB; tempB; tempB = getParent(tempB)) { + for (let tempB: null | Fiber = nodeB; tempB; tempB = getParent(tempB)) { depthB++; } @@ -886,7 +887,7 @@ function accumulateEnterLeaveListenersForEvent( const registrationName = event._reactName; const listeners: Array = []; - let instance = target; + let instance: null | Fiber = target; while (instance !== null) { if (instance === common) { break; diff --git a/packages/react-fs/src/ReactFilesystem.js b/packages/react-fs/src/ReactFilesystem.js index da8d43c535243..2d376a4dca940 100644 --- a/packages/react-fs/src/ReactFilesystem.js +++ b/packages/react-fs/src/ReactFilesystem.js @@ -153,6 +153,7 @@ export function lstat(path: string, options?: {bigint?: boolean}): mixed { if (!record) { const thenable = fs.lstat(path, {bigint}); record = createRecordFromThenable(thenable); + // $FlowFixMe[incompatible-call] found when upgrading Flow lstatCache.push(bigint, record); } // $FlowFixMe[incompatible-call] found when upgrading Flow @@ -203,6 +204,7 @@ export function readdir( if (!record) { const thenable = fs.readdir(path, {encoding, withFileTypes}); record = createRecordFromThenable(thenable); + // $FlowFixMe[incompatible-call] found when upgrading Flow readdirCache.push(encoding, withFileTypes, record); } // $FlowFixMe[incompatible-call] found when upgrading Flow @@ -302,6 +304,7 @@ export function readlink( if (!record) { const thenable = fs.readlink(path, {encoding}); record = createRecordFromThenable(thenable); + // $FlowFixMe[incompatible-call] found when upgrading Flow readlinkCache.push(encoding, record); } // $FlowFixMe[incompatible-call] found when upgrading Flow @@ -344,6 +347,7 @@ export function realpath( if (!record) { const thenable = fs.realpath(path, {encoding}); record = createRecordFromThenable(thenable); + // $FlowFixMe[incompatible-call] found when upgrading Flow realpathCache.push(encoding, record); } // $FlowFixMe[incompatible-call] found when upgrading Flow @@ -379,6 +383,7 @@ export function stat(path: string, options?: {bigint?: boolean}): mixed { if (!record) { const thenable = fs.stat(path, {bigint}); record = createRecordFromThenable(thenable); + // $FlowFixMe[incompatible-call] found when upgrading Flow statCache.push(bigint, record); } // $FlowFixMe[incompatible-call] found when upgrading Flow diff --git a/packages/react-native-renderer/src/ReactNativeAttributePayload.js b/packages/react-native-renderer/src/ReactNativeAttributePayload.js index effdf12bace1e..64d73a503b273 100644 --- a/packages/react-native-renderer/src/ReactNativeAttributePayload.js +++ b/packages/react-native-renderer/src/ReactNativeAttributePayload.js @@ -64,6 +64,7 @@ function restoreDeletedValuesInNestedArray( } else if (node && removedKeyCount > 0) { const obj = node; for (const propKey in removedKeys) { + // $FlowFixMe[incompatible-use] found when upgrading Flow if (!removedKeys[propKey]) { continue; } @@ -78,9 +79,11 @@ function restoreDeletedValuesInNestedArray( } if (typeof nextProp === 'function') { + // $FlowFixMe[incompatible-type] found when upgrading Flow nextProp = true; } if (typeof nextProp === 'undefined') { + // $FlowFixMe[incompatible-type] found when upgrading Flow nextProp = null; } diff --git a/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js b/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js index 7944c120a7294..eb12251a3e8a0 100644 --- a/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js +++ b/packages/react-native-renderer/src/legacy-events/EventPluginRegistry.js @@ -42,6 +42,7 @@ function recomputePluginOrdering(): void { } for (const pluginName in namesToPlugins) { const pluginModule = namesToPlugins[pluginName]; + // $FlowFixMe[incompatible-use] found when upgrading Flow const pluginIndex = eventPluginOrder.indexOf(pluginName); if (pluginIndex <= -1) { diff --git a/packages/react-pg/src/ReactPostgres.js b/packages/react-pg/src/ReactPostgres.js index 1bad8df2aae4a..46426817ee43f 100644 --- a/packages/react-pg/src/ReactPostgres.js +++ b/packages/react-pg/src/ReactPostgres.js @@ -82,7 +82,7 @@ Pool.prototype.query = function(query: string, values?: Array) { const outerMap = unstable_getCacheForType(this.createRecordMap); let innerMap: NestedMap = outerMap; - let key = query; + let key: mixed = query; if (values != null) { // If we have parameters, each becomes as a nesting layer for Maps. // We want to find (or create as needed) the innermost Map, and return that. diff --git a/packages/react-reconciler/src/ReactChildFiber.new.js b/packages/react-reconciler/src/ReactChildFiber.new.js index 179310ec46a91..a7b2d3e949797 100644 --- a/packages/react-reconciler/src/ReactChildFiber.new.js +++ b/packages/react-reconciler/src/ReactChildFiber.new.js @@ -319,7 +319,7 @@ function createChildReconciler(shouldTrackSideEffects): ChildReconciler { // instead. const existingChildren: Map = new Map(); - let existingChild = currentFirstChild; + let existingChild: null | Fiber = currentFirstChild; while (existingChild !== null) { if (existingChild.key !== null) { existingChildren.set(existingChild.key, existingChild); diff --git a/packages/react-reconciler/src/ReactChildFiber.old.js b/packages/react-reconciler/src/ReactChildFiber.old.js index 74abb553458f7..4c880a3e5283d 100644 --- a/packages/react-reconciler/src/ReactChildFiber.old.js +++ b/packages/react-reconciler/src/ReactChildFiber.old.js @@ -319,7 +319,7 @@ function createChildReconciler(shouldTrackSideEffects): ChildReconciler { // instead. const existingChildren: Map = new Map(); - let existingChild = currentFirstChild; + let existingChild: null | Fiber = currentFirstChild; while (existingChild !== null) { if (existingChild.key !== null) { existingChildren.set(existingChild.key, existingChild); diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.new.js b/packages/react-reconciler/src/ReactFiberBeginWork.new.js index 3ba2334894d88..9e9c4bd9700d0 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.new.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.new.js @@ -592,6 +592,7 @@ function updateSimpleMemoComponent( try { outerMemoType = init(payload); } catch (x) { + // $FlowFixMe[incompatible-type] found when upgrading Flow outerMemoType = null; } // Inner propTypes will be validated in the function component path. @@ -2990,12 +2991,15 @@ function propagateSuspenseContextChange( if (node === workInProgress) { return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow while (node.sibling === null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow if (node.return === null || node.return === workInProgress) { return; } node = node.return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow node.sibling.return = node.return; node = node.sibling; } @@ -3596,13 +3600,16 @@ function remountFiber( // eslint-disable-next-line react-internal/prod-error-codes throw new Error('Expected parent to have a child.'); } + // $FlowFixMe[incompatible-use] found when upgrading Flow while (prevSibling.sibling !== oldWorkInProgress) { + // $FlowFixMe[incompatible-use] found when upgrading Flow prevSibling = prevSibling.sibling; if (prevSibling === null) { // eslint-disable-next-line react-internal/prod-error-codes throw new Error('Expected to find the previous sibling.'); } } + // $FlowFixMe[incompatible-use] found when upgrading Flow prevSibling.sibling = newWorkInProgress; } diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.old.js b/packages/react-reconciler/src/ReactFiberBeginWork.old.js index f654dce025175..bd12a989801f0 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.old.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.old.js @@ -592,6 +592,7 @@ function updateSimpleMemoComponent( try { outerMemoType = init(payload); } catch (x) { + // $FlowFixMe[incompatible-type] found when upgrading Flow outerMemoType = null; } // Inner propTypes will be validated in the function component path. @@ -2990,12 +2991,15 @@ function propagateSuspenseContextChange( if (node === workInProgress) { return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow while (node.sibling === null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow if (node.return === null || node.return === workInProgress) { return; } node = node.return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow node.sibling.return = node.return; node = node.sibling; } @@ -3596,13 +3600,16 @@ function remountFiber( // eslint-disable-next-line react-internal/prod-error-codes throw new Error('Expected parent to have a child.'); } + // $FlowFixMe[incompatible-use] found when upgrading Flow while (prevSibling.sibling !== oldWorkInProgress) { + // $FlowFixMe[incompatible-use] found when upgrading Flow prevSibling = prevSibling.sibling; if (prevSibling === null) { // eslint-disable-next-line react-internal/prod-error-codes throw new Error('Expected to find the previous sibling.'); } } + // $FlowFixMe[incompatible-use] found when upgrading Flow prevSibling.sibling = newWorkInProgress; } diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js index 6b76bd9453223..3688599a173cd 100644 --- a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js +++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.new.js @@ -325,7 +325,7 @@ export function enqueueCapturedUpdate( const firstBaseUpdate = queue.firstBaseUpdate; if (firstBaseUpdate !== null) { // Loop through the updates and clone them. - let update = firstBaseUpdate; + let update: Update = firstBaseUpdate; do { const clone: Update = { eventTime: update.eventTime, @@ -345,6 +345,7 @@ export function enqueueCapturedUpdate( newLast.next = clone; newLast = clone; } + // $FlowFixMe[incompatible-type] we bail out when we get a null update = update.next; } while (update !== null); @@ -534,7 +535,7 @@ export function processUpdateQueue( let newFirstBaseUpdate = null; let newLastBaseUpdate = null; - let update = firstBaseUpdate; + let update: Update = firstBaseUpdate; do { // TODO: Don't need this field anymore const updateEventTime = update.eventTime; @@ -620,6 +621,7 @@ export function processUpdateQueue( } } } + // $FlowFixMe[incompatible-type] we bail out when we get a null update = update.next; if (update === null) { pendingQueue = queue.shared.pending; diff --git a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js index 0a2d3c4e75117..c4a3bf603e6f1 100644 --- a/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js +++ b/packages/react-reconciler/src/ReactFiberClassUpdateQueue.old.js @@ -325,7 +325,7 @@ export function enqueueCapturedUpdate( const firstBaseUpdate = queue.firstBaseUpdate; if (firstBaseUpdate !== null) { // Loop through the updates and clone them. - let update = firstBaseUpdate; + let update: Update = firstBaseUpdate; do { const clone: Update = { eventTime: update.eventTime, @@ -345,6 +345,7 @@ export function enqueueCapturedUpdate( newLast.next = clone; newLast = clone; } + // $FlowFixMe[incompatible-type] we bail out when we get a null update = update.next; } while (update !== null); @@ -534,7 +535,7 @@ export function processUpdateQueue( let newFirstBaseUpdate = null; let newLastBaseUpdate = null; - let update = firstBaseUpdate; + let update: Update = firstBaseUpdate; do { // TODO: Don't need this field anymore const updateEventTime = update.eventTime; @@ -620,6 +621,7 @@ export function processUpdateQueue( } } } + // $FlowFixMe[incompatible-type] we bail out when we get a null update = update.next; if (update === null) { pendingQueue = queue.shared.pending; diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js index 18d30effcb704..3a7a696c05c30 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js @@ -1316,7 +1316,7 @@ function abortParentMarkerTransitionsForDeletedFiber( if (enableTransitionTracing) { // Find all pending markers that are waiting on child suspense boundaries in the // aborted subtree and cancels them - let fiber = abortedFiber; + let fiber: null | Fiber = abortedFiber; while (fiber !== null) { switch (fiber.tag) { case TracingMarkerComponent: @@ -1785,6 +1785,7 @@ function getHostSibling(fiber: Fiber): ?Instance { // last sibling. return null; } + // $FlowFixMe[incompatible-type] found when upgrading Flow node = node.return; } node.sibling.return = node.return; @@ -1951,7 +1952,7 @@ function commitDeletionEffects( // TODO: Instead of searching up the fiber return path on every deletion, we // can track the nearest host component on the JS stack as we traverse the // tree during the commit phase. This would make insertions faster, too. - let parent = returnFiber; + let parent: null | Fiber = returnFiber; findParent: while (parent !== null) { switch (parent.tag) { case HostComponent: { @@ -2332,7 +2333,10 @@ function getRetryCache(finishedWork) { } case OffscreenComponent: { const instance: OffscreenInstance = finishedWork.stateNode; - let retryCache = instance._retryCache; + // $FlowFixMe[incompatible-type-arg] found when upgrading Flow + let retryCache: null | Set | WeakSet = + // $FlowFixMe[incompatible-type] found when upgrading Flow + instance._retryCache; if (retryCache === null) { // $FlowFixMe[incompatible-type] retryCache = instance._retryCache = new PossiblyWeakSet(); @@ -3818,7 +3822,9 @@ function detachAlternateSiblings(parentFiber: Fiber) { if (detachedChild !== null) { previousFiber.child = null; do { + // $FlowFixMe[incompatible-use] found when upgrading Flow const detachedSibling = detachedChild.sibling; + // $FlowFixMe[incompatible-use] found when upgrading Flow detachedChild.sibling = null; detachedChild = detachedSibling; } while (detachedChild !== null); diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js index fb2e9ab00e746..22c91330f1d20 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js @@ -1316,7 +1316,7 @@ function abortParentMarkerTransitionsForDeletedFiber( if (enableTransitionTracing) { // Find all pending markers that are waiting on child suspense boundaries in the // aborted subtree and cancels them - let fiber = abortedFiber; + let fiber: null | Fiber = abortedFiber; while (fiber !== null) { switch (fiber.tag) { case TracingMarkerComponent: @@ -1785,6 +1785,7 @@ function getHostSibling(fiber: Fiber): ?Instance { // last sibling. return null; } + // $FlowFixMe[incompatible-type] found when upgrading Flow node = node.return; } node.sibling.return = node.return; @@ -1951,7 +1952,7 @@ function commitDeletionEffects( // TODO: Instead of searching up the fiber return path on every deletion, we // can track the nearest host component on the JS stack as we traverse the // tree during the commit phase. This would make insertions faster, too. - let parent = returnFiber; + let parent: null | Fiber = returnFiber; findParent: while (parent !== null) { switch (parent.tag) { case HostComponent: { @@ -2332,7 +2333,10 @@ function getRetryCache(finishedWork) { } case OffscreenComponent: { const instance: OffscreenInstance = finishedWork.stateNode; - let retryCache = instance._retryCache; + // $FlowFixMe[incompatible-type-arg] found when upgrading Flow + let retryCache: null | Set | WeakSet = + // $FlowFixMe[incompatible-type] found when upgrading Flow + instance._retryCache; if (retryCache === null) { // $FlowFixMe[incompatible-type] retryCache = instance._retryCache = new PossiblyWeakSet(); @@ -3818,7 +3822,9 @@ function detachAlternateSiblings(parentFiber: Fiber) { if (detachedChild !== null) { previousFiber.child = null; do { + // $FlowFixMe[incompatible-use] found when upgrading Flow const detachedSibling = detachedChild.sibling; + // $FlowFixMe[incompatible-use] found when upgrading Flow detachedChild.sibling = null; detachedChild = detachedSibling; } while (detachedChild !== null); diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js index eec23dfe83538..b2bdbb0e0bca6 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js @@ -239,12 +239,15 @@ if (supportsMutation) { if (node === workInProgress) { return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow while (node.sibling === null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow if (node.return === null || node.return === workInProgress) { return; } node = node.return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow node.sibling.return = node.return; node = node.sibling; } @@ -359,12 +362,15 @@ if (supportsMutation) { if (node === workInProgress) { return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow while (node.sibling === null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow if (node.return === null || node.return === workInProgress) { return; } node = node.return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow node.sibling.return = node.return; node = node.sibling; } @@ -424,12 +430,15 @@ if (supportsMutation) { if (node === workInProgress) { return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow while (node.sibling === null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow if (node.return === null || node.return === workInProgress) { return; } node = node.return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow node.sibling.return = node.return; node = node.sibling; } diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js index 10be55575c530..e0d1dc4b66325 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js @@ -239,12 +239,15 @@ if (supportsMutation) { if (node === workInProgress) { return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow while (node.sibling === null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow if (node.return === null || node.return === workInProgress) { return; } node = node.return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow node.sibling.return = node.return; node = node.sibling; } @@ -359,12 +362,15 @@ if (supportsMutation) { if (node === workInProgress) { return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow while (node.sibling === null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow if (node.return === null || node.return === workInProgress) { return; } node = node.return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow node.sibling.return = node.return; node = node.sibling; } @@ -424,12 +430,15 @@ if (supportsMutation) { if (node === workInProgress) { return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow while (node.sibling === null) { + // $FlowFixMe[incompatible-use] found when upgrading Flow if (node.return === null || node.return === workInProgress) { return; } node = node.return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow node.sibling.return = node.return; node = node.sibling; } diff --git a/packages/react-reconciler/src/ReactFiberComponentStack.js b/packages/react-reconciler/src/ReactFiberComponentStack.js index 3821758c67a47..354aca57160e9 100644 --- a/packages/react-reconciler/src/ReactFiberComponentStack.js +++ b/packages/react-reconciler/src/ReactFiberComponentStack.js @@ -60,9 +60,10 @@ function describeFiber(fiber: Fiber): string { export function getStackByFiberInDevAndProd(workInProgress: Fiber): string { try { let info = ''; - let node = workInProgress; + let node: Fiber = workInProgress; do { info += describeFiber(node); + // $FlowFixMe[incompatible-type] we bail out when we get a null node = node.return; } while (node); return info; diff --git a/packages/react-reconciler/src/ReactFiberContext.new.js b/packages/react-reconciler/src/ReactFiberContext.new.js index 23be350d21688..85dec63499bb9 100644 --- a/packages/react-reconciler/src/ReactFiberContext.new.js +++ b/packages/react-reconciler/src/ReactFiberContext.new.js @@ -303,7 +303,7 @@ function findCurrentUnmaskedContext(fiber: Fiber): Object { ); } - let node = fiber; + let node: Fiber = fiber; do { switch (node.tag) { case HostRoot: @@ -316,6 +316,7 @@ function findCurrentUnmaskedContext(fiber: Fiber): Object { break; } } + // $FlowFixMe[incompatible-type] we bail out when we get a null node = node.return; } while (node !== null); diff --git a/packages/react-reconciler/src/ReactFiberContext.old.js b/packages/react-reconciler/src/ReactFiberContext.old.js index d4ba6c7c9f1c3..2e763a86c3f75 100644 --- a/packages/react-reconciler/src/ReactFiberContext.old.js +++ b/packages/react-reconciler/src/ReactFiberContext.old.js @@ -303,7 +303,7 @@ function findCurrentUnmaskedContext(fiber: Fiber): Object { ); } - let node = fiber; + let node: Fiber = fiber; do { switch (node.tag) { case HostRoot: @@ -316,6 +316,7 @@ function findCurrentUnmaskedContext(fiber: Fiber): Object { break; } } + // $FlowFixMe[incompatible-type] we bail out when we get a null node = node.return; } while (node !== null); diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js index 638f072150aa3..0c676de1a48da 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.new.js +++ b/packages/react-reconciler/src/ReactFiberHooks.new.js @@ -387,7 +387,9 @@ function areHookInputsEqual( ); } } + // $FlowFixMe[incompatible-use] found when upgrading Flow for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) { + // $FlowFixMe[incompatible-use] found when upgrading Flow if (is(nextDeps[i], prevDeps[i])) { continue; } diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js index badad3a53bf6d..e0a1ee6070a30 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.old.js +++ b/packages/react-reconciler/src/ReactFiberHooks.old.js @@ -387,7 +387,9 @@ function areHookInputsEqual( ); } } + // $FlowFixMe[incompatible-use] found when upgrading Flow for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) { + // $FlowFixMe[incompatible-use] found when upgrading Flow if (is(nextDeps[i], prevDeps[i])) { continue; } diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.new.js b/packages/react-reconciler/src/ReactFiberHotReloading.new.js index 223ba8088d8fa..0b226a3de9a61 100644 --- a/packages/react-reconciler/src/ReactFiberHotReloading.new.js +++ b/packages/react-reconciler/src/ReactFiberHotReloading.new.js @@ -303,6 +303,7 @@ function scheduleFibersWithFamiliesRecursively( if (failedBoundaries !== null) { if ( failedBoundaries.has(fiber) || + // $FlowFixMe[incompatible-use] found when upgrading Flow (alternate !== null && failedBoundaries.has(alternate)) ) { needsRemount = true; diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.old.js b/packages/react-reconciler/src/ReactFiberHotReloading.old.js index 0d4af2cad05e4..91d045a8944cb 100644 --- a/packages/react-reconciler/src/ReactFiberHotReloading.old.js +++ b/packages/react-reconciler/src/ReactFiberHotReloading.old.js @@ -303,6 +303,7 @@ function scheduleFibersWithFamiliesRecursively( if (failedBoundaries !== null) { if ( failedBoundaries.has(fiber) || + // $FlowFixMe[incompatible-use] found when upgrading Flow (alternate !== null && failedBoundaries.has(alternate)) ) { needsRemount = true; diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js index a311b101d3a4e..fc6432977793a 100644 --- a/packages/react-reconciler/src/ReactFiberNewContext.new.js +++ b/packages/react-reconciler/src/ReactFiberNewContext.new.js @@ -525,7 +525,7 @@ function propagateParentContextChanges( // Collect all the parent providers that changed. Since this is usually small // number, we use an Array instead of Set. let contexts = null; - let parent = workInProgress; + let parent: null | Fiber = workInProgress; let isInsidePropagationBailout = false; while (parent !== null) { if (!isInsidePropagationBailout) { diff --git a/packages/react-reconciler/src/ReactFiberNewContext.old.js b/packages/react-reconciler/src/ReactFiberNewContext.old.js index 0833d58806e9b..a39bd89354acd 100644 --- a/packages/react-reconciler/src/ReactFiberNewContext.old.js +++ b/packages/react-reconciler/src/ReactFiberNewContext.old.js @@ -525,7 +525,7 @@ function propagateParentContextChanges( // Collect all the parent providers that changed. Since this is usually small // number, we use an Array instead of Set. let contexts = null; - let parent = workInProgress; + let parent: null | Fiber = workInProgress; let isInsidePropagationBailout = false; while (parent !== null) { if (!isInsidePropagationBailout) { diff --git a/packages/react-reconciler/src/ReactFiberReconciler.new.js b/packages/react-reconciler/src/ReactFiberReconciler.new.js index db77d28ff132b..08ded0097bbbf 100644 --- a/packages/react-reconciler/src/ReactFiberReconciler.new.js +++ b/packages/react-reconciler/src/ReactFiberReconciler.new.js @@ -525,7 +525,7 @@ export function findHostInstanceWithNoPortals( return hostFiber.stateNode; } -let shouldErrorImpl = fiber => null; +let shouldErrorImpl: Fiber => ?boolean = fiber => null; export function shouldError(fiber: Fiber): ?boolean { return shouldErrorImpl(fiber); diff --git a/packages/react-reconciler/src/ReactFiberReconciler.old.js b/packages/react-reconciler/src/ReactFiberReconciler.old.js index aabd5d4b2ab3e..d71bf1c04baaa 100644 --- a/packages/react-reconciler/src/ReactFiberReconciler.old.js +++ b/packages/react-reconciler/src/ReactFiberReconciler.old.js @@ -525,7 +525,7 @@ export function findHostInstanceWithNoPortals( return hostFiber.stateNode; } -let shouldErrorImpl = fiber => null; +let shouldErrorImpl: Fiber => ?boolean = fiber => null; export function shouldError(fiber: Fiber): ?boolean { return shouldErrorImpl(fiber); diff --git a/packages/react-reconciler/src/ReactFiberScope.new.js b/packages/react-reconciler/src/ReactFiberScope.new.js index ccc589a9dfe60..7754cc6b54570 100644 --- a/packages/react-reconciler/src/ReactFiberScope.new.js +++ b/packages/react-reconciler/src/ReactFiberScope.new.js @@ -86,7 +86,7 @@ function collectScopedNodesFromChildren( fn: ReactScopeQuery, scopedNodes: Array, ): void { - let child = startingChild; + let child: null | Fiber = startingChild; while (child !== null) { collectScopedNodes(child, fn, scopedNodes); child = child.sibling; @@ -97,7 +97,7 @@ function collectFirstScopedNodeFromChildren( startingChild: Fiber, fn: ReactScopeQuery, ): Object | null { - let child = startingChild; + let child: null | Fiber = startingChild; while (child !== null) { const scopedNode = collectFirstScopedNode(child, fn); if (scopedNode !== null) { diff --git a/packages/react-reconciler/src/ReactFiberScope.old.js b/packages/react-reconciler/src/ReactFiberScope.old.js index ccc589a9dfe60..7754cc6b54570 100644 --- a/packages/react-reconciler/src/ReactFiberScope.old.js +++ b/packages/react-reconciler/src/ReactFiberScope.old.js @@ -86,7 +86,7 @@ function collectScopedNodesFromChildren( fn: ReactScopeQuery, scopedNodes: Array, ): void { - let child = startingChild; + let child: null | Fiber = startingChild; while (child !== null) { collectScopedNodes(child, fn, scopedNodes); child = child.sibling; @@ -97,7 +97,7 @@ function collectFirstScopedNodeFromChildren( startingChild: Fiber, fn: ReactScopeQuery, ): Object | null { - let child = startingChild; + let child: null | Fiber = startingChild; while (child !== null) { const scopedNode = collectFirstScopedNode(child, fn); if (scopedNode !== null) { diff --git a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js index a1ef7d64bbf2e..2c86d0ae712d3 100644 --- a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js +++ b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.new.js @@ -63,8 +63,9 @@ export function flushSyncCallbacks(): null { // $FlowFixMe[incompatible-use] found when upgrading Flow for (; i < queue.length; i++) { // $FlowFixMe[incompatible-use] found when upgrading Flow - let callback = queue[i]; + let callback: SchedulerCallback = queue[i]; do { + // $FlowFixMe[incompatible-type] we bail out when we get a null callback = callback(isSync); } while (callback !== null); } diff --git a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js index 9286a9d156e6e..d914acf75f264 100644 --- a/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js +++ b/packages/react-reconciler/src/ReactFiberSyncTaskQueue.old.js @@ -63,8 +63,9 @@ export function flushSyncCallbacks(): null { // $FlowFixMe[incompatible-use] found when upgrading Flow for (; i < queue.length; i++) { // $FlowFixMe[incompatible-use] found when upgrading Flow - let callback = queue[i]; + let callback: SchedulerCallback = queue[i]; do { + // $FlowFixMe[incompatible-type] we bail out when we get a null callback = callback(isSync); } while (callback !== null); } diff --git a/packages/react-reconciler/src/ReactFiberThrow.new.js b/packages/react-reconciler/src/ReactFiberThrow.new.js index d4e69b7c66940..b96df89fd54be 100644 --- a/packages/react-reconciler/src/ReactFiberThrow.new.js +++ b/packages/react-reconciler/src/ReactFiberThrow.new.js @@ -488,7 +488,7 @@ function throwException( // We didn't find a boundary that could handle this type of exception. Start // over and traverse parent path again, this time treating the exception // as an error. - let workInProgress = returnFiber; + let workInProgress: Fiber = returnFiber; do { switch (workInProgress.tag) { case HostRoot: { @@ -528,6 +528,7 @@ function throwException( default: break; } + // $FlowFixMe[incompatible-type] we bail out when we get a null workInProgress = workInProgress.return; } while (workInProgress !== null); } diff --git a/packages/react-reconciler/src/ReactFiberThrow.old.js b/packages/react-reconciler/src/ReactFiberThrow.old.js index cdc7d3c2a79e4..c3ab61a5dc130 100644 --- a/packages/react-reconciler/src/ReactFiberThrow.old.js +++ b/packages/react-reconciler/src/ReactFiberThrow.old.js @@ -488,7 +488,7 @@ function throwException( // We didn't find a boundary that could handle this type of exception. Start // over and traverse parent path again, this time treating the exception // as an error. - let workInProgress = returnFiber; + let workInProgress: Fiber = returnFiber; do { switch (workInProgress.tag) { case HostRoot: { @@ -528,6 +528,7 @@ function throwException( default: break; } + // $FlowFixMe[incompatible-type] we bail out when we get a null workInProgress = workInProgress.return; } while (workInProgress !== null); } diff --git a/packages/react-reconciler/src/ReactFiberTreeReflection.js b/packages/react-reconciler/src/ReactFiberTreeReflection.js index 67600492d13ff..da60614dfc6fb 100644 --- a/packages/react-reconciler/src/ReactFiberTreeReflection.js +++ b/packages/react-reconciler/src/ReactFiberTreeReflection.js @@ -30,11 +30,11 @@ const ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner; export function getNearestMountedFiber(fiber: Fiber): null | Fiber { let node = fiber; - let nearestMounted = fiber; + let nearestMounted: null | Fiber = fiber; if (!fiber.alternate) { // If there is no alternate, this might be a new tree that isn't inserted // yet. If it is, then it will have a pending insertion effect on it. - let nextNode = node; + let nextNode: Fiber = node; do { node = nextNode; if ((node.flags & (Placement | Hydrating)) !== NoFlags) { @@ -43,6 +43,7 @@ export function getNearestMountedFiber(fiber: Fiber): null | Fiber { // if that one is still mounted. nearestMounted = node.return; } + // $FlowFixMe[incompatible-type] we bail out when we get a null nextNode = node.return; } while (nextNode); } else { @@ -339,7 +340,7 @@ export function doesFiberContain( parentFiber: Fiber, childFiber: Fiber, ): boolean { - let node = childFiber; + let node: null | Fiber = childFiber; const parentFiberAlternate = parentFiber.alternate; while (node !== null) { if (node === parentFiber || node === parentFiberAlternate) { diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index 19a98052cd742..6cbe3fad2741a 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js @@ -742,7 +742,7 @@ export function scheduleUpdateOnFiber( root === rootCommittingMutationOrLayoutEffects ) { if (fiber.mode & ProfileMode) { - let current = fiber; + let current: null | Fiber = fiber; while (current !== null) { if (current.tag === Profiler) { const {id, onNestedUpdateScheduled} = current.memoizedProps; @@ -2195,7 +2195,7 @@ function resumeSuspendedUnitOfWork( function completeUnitOfWork(unitOfWork: Fiber): void { // Attempt to complete the current unit of work, then move to the next // sibling. If there are no more siblings, return to the parent fiber. - let completedWork = unitOfWork; + let completedWork: Fiber = unitOfWork; do { // The current, flushed, state of this fiber is the alternate. Ideally // nothing should rely on this, but relying on it here means that we don't @@ -2281,6 +2281,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void { return; } // Otherwise, return to the parent + // $FlowFixMe[incompatible-type] we bail out when we get a null completedWork = returnFiber; // Update the next thing we're working on in case something throws. workInProgress = completedWork; @@ -3388,7 +3389,7 @@ function invokeEffectsInDev( fiberFlags: Flags, invokeEffectFn: (fiber: Fiber) => void, ) { - let current = firstChild; + let current: null | Fiber = firstChild; let subtreeRoot = null; while (current != null) { const primarySubtreeFlag = current.subtreeFlags & fiberFlags; @@ -3445,6 +3446,7 @@ export function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber: Fiber) { if (didWarnStateUpdateForNotYetMountedComponent.has(componentName)) { return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow didWarnStateUpdateForNotYetMountedComponent.add(componentName); } else { didWarnStateUpdateForNotYetMountedComponent = new Set([componentName]); diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index 6b8efdba30695..100b9c7b6f4e4 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js @@ -742,7 +742,7 @@ export function scheduleUpdateOnFiber( root === rootCommittingMutationOrLayoutEffects ) { if (fiber.mode & ProfileMode) { - let current = fiber; + let current: null | Fiber = fiber; while (current !== null) { if (current.tag === Profiler) { const {id, onNestedUpdateScheduled} = current.memoizedProps; @@ -2195,7 +2195,7 @@ function resumeSuspendedUnitOfWork( function completeUnitOfWork(unitOfWork: Fiber): void { // Attempt to complete the current unit of work, then move to the next // sibling. If there are no more siblings, return to the parent fiber. - let completedWork = unitOfWork; + let completedWork: Fiber = unitOfWork; do { // The current, flushed, state of this fiber is the alternate. Ideally // nothing should rely on this, but relying on it here means that we don't @@ -2281,6 +2281,7 @@ function completeUnitOfWork(unitOfWork: Fiber): void { return; } // Otherwise, return to the parent + // $FlowFixMe[incompatible-type] we bail out when we get a null completedWork = returnFiber; // Update the next thing we're working on in case something throws. workInProgress = completedWork; @@ -3388,7 +3389,7 @@ function invokeEffectsInDev( fiberFlags: Flags, invokeEffectFn: (fiber: Fiber) => void, ) { - let current = firstChild; + let current: null | Fiber = firstChild; let subtreeRoot = null; while (current != null) { const primarySubtreeFlag = current.subtreeFlags & fiberFlags; @@ -3445,6 +3446,7 @@ export function warnAboutUpdateOnNotYetMountedFiberInDEV(fiber: Fiber) { if (didWarnStateUpdateForNotYetMountedComponent.has(componentName)) { return; } + // $FlowFixMe[incompatible-use] found when upgrading Flow didWarnStateUpdateForNotYetMountedComponent.add(componentName); } else { didWarnStateUpdateForNotYetMountedComponent = new Set([componentName]); diff --git a/packages/react-reconciler/src/ReactPostPaintCallback.js b/packages/react-reconciler/src/ReactPostPaintCallback.js index a52623caa089b..aaa60db90c9dd 100644 --- a/packages/react-reconciler/src/ReactPostPaintCallback.js +++ b/packages/react-reconciler/src/ReactPostPaintCallback.js @@ -9,7 +9,7 @@ import {requestPostPaintCallback} from './ReactFiberHostConfig'; let postPaintCallbackScheduled = false; -let callbacks = []; +let callbacks: Array void)> = []; export function schedulePostPaintCallback(callback: (endTime: number) => void) { callbacks.push(callback); diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.new.js b/packages/react-reconciler/src/ReactStrictModeWarnings.new.js index c9e5ffce85cfb..41916797d0121 100644 --- a/packages/react-reconciler/src/ReactStrictModeWarnings.new.js +++ b/packages/react-reconciler/src/ReactStrictModeWarnings.new.js @@ -31,7 +31,7 @@ if (__DEV__) { const findStrictRoot = (fiber: Fiber): Fiber | null => { let maybeStrictRoot = null; - let node = fiber; + let node: null | Fiber = fiber; while (node !== null) { if (node.mode & StrictLegacyMode) { maybeStrictRoot = node; diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.old.js b/packages/react-reconciler/src/ReactStrictModeWarnings.old.js index c9e5ffce85cfb..41916797d0121 100644 --- a/packages/react-reconciler/src/ReactStrictModeWarnings.old.js +++ b/packages/react-reconciler/src/ReactStrictModeWarnings.old.js @@ -31,7 +31,7 @@ if (__DEV__) { const findStrictRoot = (fiber: Fiber): Fiber | null => { let maybeStrictRoot = null; - let node = fiber; + let node: null | Fiber = fiber; while (node !== null) { if (node.mode & StrictLegacyMode) { maybeStrictRoot = node; diff --git a/packages/react-reconciler/src/ReactTestSelectors.js b/packages/react-reconciler/src/ReactTestSelectors.js index 3ce6720c85a77..bda36f6d2a1aa 100644 --- a/packages/react-reconciler/src/ReactTestSelectors.js +++ b/packages/react-reconciler/src/ReactTestSelectors.js @@ -28,11 +28,11 @@ import { supportsTestSelectors, } from './ReactFiberHostConfig'; -let COMPONENT_TYPE = 0b000; -let HAS_PSEUDO_CLASS_TYPE = 0b001; -let ROLE_TYPE = 0b010; -let TEST_NAME_TYPE = 0b011; -let TEXT_TYPE = 0b100; +let COMPONENT_TYPE: symbol | number = 0b000; +let HAS_PSEUDO_CLASS_TYPE: symbol | number = 0b001; +let ROLE_TYPE: symbol | number = 0b010; +let TEST_NAME_TYPE: symbol | number = 0b011; +let TEXT_TYPE: symbol | number = 0b100; if (typeof Symbol === 'function' && Symbol.for) { const symbolFor = Symbol.for; diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js index b7dcb25369899..1a64b305ff443 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js +++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackPlugin.js @@ -88,6 +88,7 @@ export default class ReactFlightWebpackPlugin { ) { this.clientReferences = [(options.clientReferences: $FlowFixMe)]; } else { + // $FlowFixMe[incompatible-type] found when upgrading Flow this.clientReferences = options.clientReferences; } if (typeof options.chunkName === 'string') { diff --git a/packages/react-server/src/ReactFizzComponentStack.js b/packages/react-server/src/ReactFizzComponentStack.js index 1fa49453d31b2..cbdd6648336ad 100644 --- a/packages/react-server/src/ReactFizzComponentStack.js +++ b/packages/react-server/src/ReactFizzComponentStack.js @@ -39,7 +39,7 @@ export function getStackByComponentStackNode( ): string { try { let info = ''; - let node = componentStack; + let node: ComponentStackNode = componentStack; do { switch (node.tag) { case 0: @@ -52,6 +52,7 @@ export function getStackByComponentStackNode( info += describeClassComponentFrame(node.type, null, null); break; } + // $FlowFixMe[incompatible-type] we bail out when we get a null node = node.parent; } while (node); return info; diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js index c2ed08aeb033e..d87c3a6daebf5 100644 --- a/packages/react-server/src/ReactFizzHooks.js +++ b/packages/react-server/src/ReactFizzHooks.js @@ -147,7 +147,9 @@ function areHookInputsEqual( ); } } + // $FlowFixMe[incompatible-use] found when upgrading Flow for (let i = 0; i < prevDeps.length && i < nextDeps.length; i++) { + // $FlowFixMe[incompatible-use] found when upgrading Flow if (is(nextDeps[i], prevDeps[i])) { continue; } @@ -344,7 +346,7 @@ export function useReducer( renderPhaseUpdates.delete(queue); // $FlowFixMe[incompatible-use] found when upgrading Flow let newState = workInProgressHook.memoizedState; - let update = firstRenderPhaseUpdate; + let update: Update = firstRenderPhaseUpdate; do { // Process this render phase update. We don't have to check the // priority because it will always be the same as the current @@ -357,6 +359,7 @@ export function useReducer( if (__DEV__) { isInHookUserCodeInDev = false; } + // $FlowFixMe[incompatible-type] we bail out when we get a null update = update.next; } while (update !== null); @@ -442,6 +445,7 @@ function useRef(initialValue: T): {current: T} { if (__DEV__) { Object.seal(ref); } + // $FlowFixMe[incompatible-use] found when upgrading Flow workInProgressHook.memoizedState = ref; return ref; } else { diff --git a/packages/react-test-renderer/src/ReactTestRenderer.js b/packages/react-test-renderer/src/ReactTestRenderer.js index 0b5947729bbe6..1bcd724eb7ec1 100644 --- a/packages/react-test-renderer/src/ReactTestRenderer.js +++ b/packages/react-test-renderer/src/ReactTestRenderer.js @@ -468,6 +468,7 @@ function create( let concurrentUpdatesByDefault = null; if (typeof options === 'object' && options !== null) { if (typeof options.createNodeMock === 'function') { + // $FlowFixMe[incompatible-type] found when upgrading Flow createNodeMock = options.createNodeMock; } if (options.unstable_isConcurrent === true) { @@ -561,6 +562,7 @@ function create( return; } updateContainer(null, root, null, null); + // $FlowFixMe[incompatible-type] found when upgrading Flow container = null; root = null; }, diff --git a/packages/react/src/ReactAct.js b/packages/react/src/ReactAct.js index 6a3712ef0b7f1..b4846205eb927 100644 --- a/packages/react/src/ReactAct.js +++ b/packages/react/src/ReactAct.js @@ -207,6 +207,7 @@ function flushActQueue(queue) { for (; i < queue.length; i++) { let callback = queue[i]; do { + // $FlowFixMe[incompatible-type] found when upgrading Flow callback = callback(true); } while (callback !== null); } diff --git a/packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js b/packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js index c7012e615ecd1..b61edccaac414 100644 --- a/packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js +++ b/packages/use-sync-external-store/src/useSyncExternalStoreWithSelector.js @@ -43,7 +43,7 @@ export function useSyncExternalStoreWithSelector( // copies of the hook/component. let hasMemo = false; let memoizedSnapshot; - let memoizedSelection; + let memoizedSelection: Selection; const memoizedSelector = nextSnapshot => { if (!hasMemo) { // The first time the hook is called, there is no memoized result. diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig index 7e0724cdcec47..92d91ac8a086a 100644 --- a/scripts/flow/config/flowconfig +++ b/scripts/flow/config/flowconfig @@ -43,7 +43,6 @@ untyped-type-import=error %CI_MAX_WORKERS% exact_by_default=true munge_underscores=false -inference_mode=classic # Substituted by createFlowConfig.js: %REACT_RENDERER_FLOW_OPTIONS% From 9813edef2964d5d01308540e4eb7804dfc95425f Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 4 Oct 2022 15:39:26 -0400 Subject: [PATCH 22/24] Flow upgrade to 0.188 ghstack-source-id: 5c359b97cc0a2587cf55ff879c863415a2c13127 Pull Request resolved: https://github.com/facebook/react/pull/25423 --- package.json | 2 +- packages/react-devtools-core/src/editor.js | 1 + .../src/backend/DevToolsComponentStackFrame.js | 1 + .../src/app/DeeplyNestedComponents/index.js | 1 + .../src/app/InspectableElements/CustomHooks.js | 1 + packages/react-dom-bindings/src/events/SyntheticEvent.js | 1 + packages/react-dom/src/client/ReactDOMRoot.js | 3 +++ packages/react-pg/src/ReactPostgres.js | 1 + packages/react-reconciler/src/ReactFiberCommitWork.new.js | 1 + packages/react-reconciler/src/ReactFiberCommitWork.old.js | 1 + packages/react-reconciler/src/ReactFiberHooks.new.js | 1 + packages/react-reconciler/src/ReactFiberHooks.old.js | 1 + packages/react-reconciler/src/ReactFiberWorkLoop.new.js | 2 ++ packages/react-reconciler/src/ReactFiberWorkLoop.old.js | 2 ++ packages/shared/ReactComponentStackFrame.js | 1 + scripts/flow/config/flowconfig | 2 +- yarn.lock | 8 ++++---- 17 files changed, 24 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index b8260ff5c0f4d..b3288286d7842 100644 --- a/package.json +++ b/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.185.0", + "flow-bin": "^0.188.0", "glob": "^7.1.6", "glob-stream": "^6.1.0", "google-closure-compiler": "^20200517.0.0", diff --git a/packages/react-devtools-core/src/editor.js b/packages/react-devtools-core/src/editor.js index 1867551e57385..f424208bc943d 100644 --- a/packages/react-devtools-core/src/editor.js +++ b/packages/react-devtools-core/src/editor.js @@ -173,6 +173,7 @@ export function launchEditor( // There's an existing editor process already and it's attached // to the terminal, so go kill it. Otherwise two separate editor // instances attach to the stdin/stdout which gets confusing. + // $FlowFixMe[incompatible-use] found when upgrading Flow childProcess.kill('SIGKILL'); } diff --git a/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js b/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js index 1c5631e84f833..3b529bd618e41 100644 --- a/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js +++ b/packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js @@ -121,6 +121,7 @@ export function describeNativeComponentFrame( } catch (x) { control = x; } + // $FlowFixMe[prop-missing] found when upgrading Flow fn.call(Fake.prototype); } } else { diff --git a/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js b/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js index 03cc54c1500e1..dda89a3cd48e6 100644 --- a/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js +++ b/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js @@ -18,6 +18,7 @@ function wrapWithHoc(Component, index) { // $FlowFixMe const displayName = Component.displayName || Component.name; + // $FlowFixMe[incompatible-type] found when upgrading Flow HOC.displayName = `withHoc${index}(${displayName})`; return HOC; } diff --git a/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js b/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js index 9b76deb01dd0d..04e586853f5be 100644 --- a/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js +++ b/packages/react-devtools-shell/src/app/InspectableElements/CustomHooks.js @@ -109,6 +109,7 @@ function wrapWithHoc(Component) { } // $FlowFixMe const displayName = Component.displayName || Component.name; + // $FlowFixMe[incompatible-type] found when upgrading Flow Hoc.displayName = `withHoc(${displayName})`; return Hoc; } diff --git a/packages/react-dom-bindings/src/events/SyntheticEvent.js b/packages/react-dom-bindings/src/events/SyntheticEvent.js index 2d75b647aca80..c7263dda2da46 100644 --- a/packages/react-dom-bindings/src/events/SyntheticEvent.js +++ b/packages/react-dom-bindings/src/events/SyntheticEvent.js @@ -81,6 +81,7 @@ function createSyntheticEvent(Interface: EventInterfaceType) { return this; } + // $FlowFixMe[prop-missing] found when upgrading Flow assign(SyntheticBaseEvent.prototype, { preventDefault: function() { this.defaultPrevented = true; diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js index 13498ae1fa96e..ddd52b76865e9 100644 --- a/packages/react-dom/src/client/ReactDOMRoot.js +++ b/packages/react-dom/src/client/ReactDOMRoot.js @@ -94,6 +94,7 @@ function ReactDOMRoot(internalRoot: FiberRoot) { this._internalRoot = internalRoot; } +// $FlowFixMe[prop-missing] found when upgrading Flow ReactDOMHydrationRoot.prototype.render = ReactDOMRoot.prototype.render = function( children: ReactNodeList, ): void { @@ -139,6 +140,7 @@ ReactDOMHydrationRoot.prototype.render = ReactDOMRoot.prototype.render = functio updateContainer(children, root, null, null); }; +// $FlowFixMe[prop-missing] found when upgrading Flow ReactDOMHydrationRoot.prototype.unmount = ReactDOMRoot.prototype.unmount = function(): void { if (__DEV__) { if (typeof arguments[0] === 'function') { @@ -260,6 +262,7 @@ function scheduleHydration(target: Node) { queueExplicitHydrationTarget(target); } } +// $FlowFixMe[prop-missing] found when upgrading Flow ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = scheduleHydration; export function hydrateRoot( diff --git a/packages/react-pg/src/ReactPostgres.js b/packages/react-pg/src/ReactPostgres.js index 46426817ee43f..c3d2e3557f275 100644 --- a/packages/react-pg/src/ReactPostgres.js +++ b/packages/react-pg/src/ReactPostgres.js @@ -77,6 +77,7 @@ export function Pool(options: mixed) { type NestedMap = Map; +// $FlowFixMe[prop-missing] found when upgrading Flow Pool.prototype.query = function(query: string, values?: Array) { const pool = this.pool; const outerMap = unstable_getCacheForType(this.createRecordMap); diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js index 3a7a696c05c30..4066f37b3b02a 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js @@ -1237,6 +1237,7 @@ function abortRootTransitions( transitionInstance.pendingBoundaries !== null && transitionInstance.pendingBoundaries.has(deletedOffscreenInstance) ) { + // $FlowFixMe[incompatible-use] found when upgrading Flow transitionInstance.pendingBoundaries.delete( deletedOffscreenInstance, ); diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js index 22c91330f1d20..0fd77ff2dd1d4 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js @@ -1237,6 +1237,7 @@ function abortRootTransitions( transitionInstance.pendingBoundaries !== null && transitionInstance.pendingBoundaries.has(deletedOffscreenInstance) ) { + // $FlowFixMe[incompatible-use] found when upgrading Flow transitionInstance.pendingBoundaries.delete( deletedOffscreenInstance, ); diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js index 0c676de1a48da..7ed2249524d8b 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.new.js +++ b/packages/react-reconciler/src/ReactFiberHooks.new.js @@ -1944,6 +1944,7 @@ function mountEvent) => Return>( "A function wrapped in useEvent can't be called during rendering.", ); } + // $FlowFixMe[prop-missing] found when upgrading Flow return eventFn._impl.apply(undefined, arguments); }; eventFn._impl = callback; diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js index e0a1ee6070a30..559b96fb1a209 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.old.js +++ b/packages/react-reconciler/src/ReactFiberHooks.old.js @@ -1944,6 +1944,7 @@ function mountEvent) => Return>( "A function wrapped in useEvent can't be called during rendering.", ); } + // $FlowFixMe[prop-missing] found when upgrading Flow return eventFn._impl.apply(undefined, arguments); }; eventFn._impl = callback; diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index 6cbe3fad2741a..90591f8f0ba76 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js @@ -1425,6 +1425,7 @@ function markRootSuspended(root, suspendedLanes) { suspendedLanes, workInProgressRootInterleavedUpdatedLanes, ); + // $FlowFixMe[incompatible-call] found when upgrading Flow markRootSuspended_dontCallThisOneDirectly(root, suspendedLanes); } @@ -2066,6 +2067,7 @@ function workLoopConcurrent() { } while (workInProgress !== null && !shouldYield()) { + // $FlowFixMe[incompatible-call] found when upgrading Flow performUnitOfWork(workInProgress); } } diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index 100b9c7b6f4e4..49b62e545e0bb 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js @@ -1425,6 +1425,7 @@ function markRootSuspended(root, suspendedLanes) { suspendedLanes, workInProgressRootInterleavedUpdatedLanes, ); + // $FlowFixMe[incompatible-call] found when upgrading Flow markRootSuspended_dontCallThisOneDirectly(root, suspendedLanes); } @@ -2066,6 +2067,7 @@ function workLoopConcurrent() { } while (workInProgress !== null && !shouldYield()) { + // $FlowFixMe[incompatible-call] found when upgrading Flow performUnitOfWork(workInProgress); } } diff --git a/packages/shared/ReactComponentStackFrame.js b/packages/shared/ReactComponentStackFrame.js index ddf2d094d2a92..e1f067f2654a5 100644 --- a/packages/shared/ReactComponentStackFrame.js +++ b/packages/shared/ReactComponentStackFrame.js @@ -123,6 +123,7 @@ export function describeNativeComponentFrame( } catch (x) { control = x; } + // $FlowFixMe[prop-missing] found when upgrading Flow fn.call(Fake.prototype); } } else { diff --git a/scripts/flow/config/flowconfig b/scripts/flow/config/flowconfig index 92d91ac8a086a..5525dd81e6016 100644 --- a/scripts/flow/config/flowconfig +++ b/scripts/flow/config/flowconfig @@ -48,4 +48,4 @@ munge_underscores=false %REACT_RENDERER_FLOW_OPTIONS% [version] -^0.185.0 +^0.188.0 diff --git a/yarn.lock b/yarn.lock index 992fb5c4adfd0..49abd32449176 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7912,10 +7912,10 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138" integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA== -flow-bin@^0.185.0: - version "0.185.2" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.185.2.tgz#b45a07d45cf641198e86e47848e35f64b0688c4c" - integrity sha512-Vphs8Z4Qo17dzlPKe/l8M85JvGn1Tf5NV6xESZLg8p9ktdIbNUYaxnq/WBQPoESiLrGdrC2v+rfezfh3tvxkvQ== +flow-bin@^0.188.0: + version "0.188.1" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.188.1.tgz#1043ec955eec8cd402ec9fb4c49054bf14368c06" + integrity sha512-tQehbFoeXKz/MZqEClBB2ezuT1HHKoBlv6t8mAoUdFk1PaFhqcEmjx+1Bn0xygykrqHy0FY6C3z+AGleOnFbdQ== fluent-syntax@0.13.0: version "0.13.0" From ea04a486a7c27771f7eea896565c0980927ed3b4 Mon Sep 17 00:00:00 2001 From: Jan Kassens Date: Tue, 4 Oct 2022 16:18:12 -0400 Subject: [PATCH 23/24] Flow: remove unused suppressions (#25424) Removes $FlowFixMe's that are no longer needed. Used flow/tool from the Flow repo: ``` ~/Developer/flow/tool update-suppressions . ``` --- packages/react-cache/src/ReactCacheOld.js | 1 - packages/react-client/src/ReactFlightClient.js | 1 - .../NativeStyleEditor/setupNativeStyleEditor.js | 1 - .../react-devtools-shared/src/backend/console.js | 4 ---- .../src/backend/profilingHooks.js | 1 - .../react-devtools-shared/src/backend/renderer.js | 4 ---- .../src/backend/views/Highlighter/index.js | 1 - .../react-devtools-shared/src/devtools/cache.js | 1 - .../views/Components/InspectedElementHooksTree.js | 2 -- .../src/devtools/views/Components/Tree.js | 1 - packages/react-devtools-shared/src/hook.js | 2 -- .../hooks/parseHookNames/parseSourceAndMetadata.js | 1 - .../src/inspectedElementMutableSource.js | 2 -- .../src/app/DeeplyNestedComponents/index.js | 1 - .../src/app/ElementTypes/index.js | 1 - .../src/view-base/utils/normalizeWheel.js | 10 ++-------- .../src/client/ReactDOMComponent.js | 1 - .../src/events/checkPassiveEvents.js | 1 - .../src/events/plugins/BeforeInputEventPlugin.js | 3 --- .../src/events/plugins/ChangeEventPlugin.js | 1 - .../src/events/plugins/EnterLeaveEventPlugin.js | 4 ---- .../src/events/plugins/SelectEventPlugin.js | 1 - .../src/events/plugins/SimpleEventPlugin.js | 2 -- .../src/server/ReactDOMServerFormatConfig.js | 2 -- .../react-dom-bindings/src/shared/DOMProperty.js | 1 - packages/react-fs/src/ReactFilesystem.js | 1 - packages/react-reconciler/src/ReactFiberAct.new.js | 1 - packages/react-reconciler/src/ReactFiberAct.old.js | 1 - .../src/ReactFiberCommitWork.new.js | 3 --- .../src/ReactFiberCommitWork.old.js | 3 --- .../src/ReactFiberCompleteWork.new.js | 2 -- .../src/ReactFiberCompleteWork.old.js | 2 -- .../react-reconciler/src/ReactFiberHooks.new.js | 1 - .../react-reconciler/src/ReactFiberHooks.old.js | 1 - .../src/ReactFiberHotReloading.new.js | 2 -- .../src/ReactFiberHotReloading.old.js | 2 -- .../react-reconciler/src/ReactFiberWorkLoop.new.js | 13 +------------ .../react-reconciler/src/ReactFiberWorkLoop.old.js | 13 +------------ packages/react-refresh/src/ReactFreshRuntime.js | 14 +++++++------- .../src/ReactFlightWebpackNodeRegister.js | 1 - packages/react-server/src/ReactFizzHooks.js | 3 --- packages/react-server/src/ReactFlightHooks.js | 1 - packages/react-server/src/ReactFlightServer.js | 3 --- .../src/ReactFlightServerConfigStream.js | 2 -- packages/react/src/ReactStartTransition.js | 2 -- packages/scheduler/src/forks/SchedulerMock.js | 3 --- 46 files changed, 11 insertions(+), 113 deletions(-) diff --git a/packages/react-cache/src/ReactCacheOld.js b/packages/react-cache/src/ReactCacheOld.js index edd75e5861c64..3661df00ca907 100644 --- a/packages/react-cache/src/ReactCacheOld.js +++ b/packages/react-cache/src/ReactCacheOld.js @@ -122,7 +122,6 @@ function accessResult( ); const newResult: PendingResult = { status: Pending, - // $FlowFixMe[method-unbinding] value: thenable, }; // $FlowFixMe[escaped-generic] discovered when updating Flow diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js index 33db1c494b2d9..44815dce4b5b9 100644 --- a/packages/react-client/src/ReactFlightClient.js +++ b/packages/react-client/src/ReactFlightClient.js @@ -321,7 +321,6 @@ function initializeModelChunk(chunk: ResolvedModelChunk): void { initializingChunkBlockedModel !== null && initializingChunkBlockedModel.deps > 0 ) { - // $FlowFixMe[incompatible-type]: found when upgrading Flow initializingChunkBlockedModel.value = value; // We discovered new dependencies on modules that are not yet resolved. // We have to go the BLOCKED state until they're resolved. diff --git a/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js index fee2847f05e6d..22b9e74850e87 100644 --- a/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js +++ b/packages/react-devtools-shared/src/backend/NativeStyleEditor/setupNativeStyleEditor.js @@ -129,7 +129,6 @@ function measureStyle( return; } - // $FlowFixMe the parameter types of an unknown function are unknown instance.measure((x, y, width, height, left, top) => { // RN Android sometimes returns undefined here. Don't send measurements in this case. // https://github.com/jhen0409/react-native-debugger/issues/84#issuecomment-304611817 diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js index 0ca957f216c6f..025180b872dae 100644 --- a/packages/react-devtools-shared/src/backend/console.js +++ b/packages/react-devtools-shared/src/backend/console.js @@ -181,7 +181,6 @@ export function patch({ unpatchFn = () => { for (const method in originalConsoleMethods) { try { - // $FlowFixMe property error|warn is not writable. targetConsole[method] = originalConsoleMethods[method]; } catch (error) {} } @@ -279,7 +278,6 @@ export function patch({ overrideMethod.__REACT_DEVTOOLS_ORIGINAL_METHOD__ = originalMethod; originalMethod.__REACT_DEVTOOLS_OVERRIDE_METHOD__ = overrideMethod; - // $FlowFixMe property error|warn is not writable. targetConsole[method] = overrideMethod; } catch (error) {} }); @@ -321,7 +319,6 @@ export function patchForStrictMode() { unpatchForStrictModeFn = () => { for (const method in originalConsoleMethods) { try { - // $FlowFixMe property error|warn is not writable. targetConsole[method] = originalConsoleMethods[method]; } catch (error) {} } @@ -355,7 +352,6 @@ export function patchForStrictMode() { overrideMethod.__REACT_DEVTOOLS_STRICT_MODE_ORIGINAL_METHOD__ = originalMethod; originalMethod.__REACT_DEVTOOLS_STRICT_MODE_OVERRIDE_METHOD__ = overrideMethod; - // $FlowFixMe property error|warn is not writable. targetConsole[method] = overrideMethod; } catch (error) {} }); diff --git a/packages/react-devtools-shared/src/backend/profilingHooks.js b/packages/react-devtools-shared/src/backend/profilingHooks.js index c91bb36a16148..5cadc175e4bfc 100644 --- a/packages/react-devtools-shared/src/backend/profilingHooks.js +++ b/packages/react-devtools-shared/src/backend/profilingHooks.js @@ -53,7 +53,6 @@ let supportsUserTimingV3 = false; if (supportsUserTiming) { const CHECK_V3_MARK = '__v3'; const markOptions = {}; - // $FlowFixMe: Ignore Flow complaining about needing a value Object.defineProperty(markOptions, 'startTime', { get: function() { supportsUserTimingV3 = true; diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js index 4e9dbb3156c1c..bcf3d94ecca8c 100644 --- a/packages/react-devtools-shared/src/backend/renderer.js +++ b/packages/react-devtools-shared/src/backend/renderer.js @@ -387,7 +387,6 @@ export function getInternalReactConstants( const symbolOrNumber = typeof type === 'object' && type !== null ? type.$$typeof : type; - // $FlowFixMe Flow doesn't know about typeof "symbol" return typeof symbolOrNumber === 'symbol' ? // $FlowFixMe `toString()` doesn't match the type signature? symbolOrNumber.toString() @@ -3275,7 +3274,6 @@ export function attach( for (const method in console) { try { originalConsoleMethods[method] = console[method]; - // $FlowFixMe property error|warn is not writable. console[method] = () => {}; } catch (error) {} } @@ -3290,7 +3288,6 @@ export function attach( // Restore original console functionality. for (const method in originalConsoleMethods) { try { - // $FlowFixMe property error|warn is not writable. console[method] = originalConsoleMethods[method]; } catch (error) {} } @@ -3713,7 +3710,6 @@ export function attach( id, responseID: requestID, type: 'full-data', - // $FlowFixMe[incompatible-return] found when upgrading Flow // $FlowFixMe[prop-missing] found when upgrading Flow value: cleanedInspectedElement, }; diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js index 3005f2481be06..4717db95162d4 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js @@ -119,7 +119,6 @@ export default function setupHighlighter( 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. - // $FlowFixMe Flow only knows about 'start' | 'end' node.scrollIntoView({block: 'nearest', inline: 'nearest'}); } diff --git a/packages/react-devtools-shared/src/devtools/cache.js b/packages/react-devtools-shared/src/devtools/cache.js index b0a01a443845a..8cc902d95f2a0 100644 --- a/packages/react-devtools-shared/src/devtools/cache.js +++ b/packages/react-devtools-shared/src/devtools/cache.js @@ -128,7 +128,6 @@ function accessResult( ); const newResult: PendingResult = { status: Pending, - // $FlowFixMe[method-unbinding] value: thenable, }; entriesForResource.set(key, newResult); diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js index 27e7ec69ce0b0..ce781506463cf 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js @@ -138,7 +138,6 @@ export function InnerHooksTreeView({ inspectedElement, path, }: InnerHooksTreeViewProps): React.Node { - // $FlowFixMe "Missing type annotation for U" whatever that means return hooks.map((hook, index) => ( {hookDisplayName || 'Anonymous'} {' '} - {/* $FlowFixMe */} {displayValue} diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js index 089d98ecebadb..64c779c2f2f51 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js @@ -409,7 +409,6 @@ export default function Tree(props: Props): React.Node { tabIndex={0}> {({height, width}) => ( - // $FlowFixMe https://github.com/facebook/flow/issues/7341 { for (const method in originalConsoleMethods) { try { - // $FlowFixMe property error|warn is not writable. targetConsole[method] = originalConsoleMethods[method]; } catch (error) {} } @@ -302,7 +301,6 @@ export function installHook(target: any): DevToolsHook | null { overrideMethod.__REACT_DEVTOOLS_STRICT_MODE_ORIGINAL_METHOD__ = originalMethod; originalMethod.__REACT_DEVTOOLS_STRICT_MODE_OVERRIDE_METHOD__ = overrideMethod; - // $FlowFixMe property error|warn is not writable. targetConsole[method] = overrideMethod; } catch (error) {} }); diff --git a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js index 15c3202b88457..ba3c1e096b67b 100644 --- a/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js +++ b/packages/react-devtools-shared/src/hooks/parseHookNames/parseSourceAndMetadata.js @@ -186,7 +186,6 @@ function findHookNames( } const key = getHookSourceLocationKey(hookSource); - // $FlowFixMe[incompatible-call] found when upgrading Flow map.set(key, name); }); diff --git a/packages/react-devtools-shared/src/inspectedElementMutableSource.js b/packages/react-devtools-shared/src/inspectedElementMutableSource.js index 7c3704ee424fb..96021dd2ae25e 100644 --- a/packages/react-devtools-shared/src/inspectedElementMutableSource.js +++ b/packages/react-devtools-shared/src/inspectedElementMutableSource.js @@ -137,7 +137,6 @@ export function inspectElement({ // A path has been hydrated. // Merge it with the latest copy we have locally and resolve with the merged value. - // $FlowFixMe[incompatible-type] found when upgrading Flow inspectedElement = inspectedElementCache.get(id) || null; if (inspectedElement !== null) { // Clone element @@ -151,7 +150,6 @@ export function inspectElement({ hydrateHelper(value, ((path: any): Path)), ); - // $FlowFixMe[incompatible-call] found when upgrading Flow inspectedElementCache.set(id, inspectedElement); return [inspectedElement, type]; diff --git a/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js b/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js index dda89a3cd48e6..8e172a3ae55b7 100644 --- a/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js +++ b/packages/react-devtools-shell/src/app/DeeplyNestedComponents/index.js @@ -15,7 +15,6 @@ function wrapWithHoc(Component, index) { return ; } - // $FlowFixMe const displayName = Component.displayName || Component.name; // $FlowFixMe[incompatible-type] found when upgrading Flow diff --git a/packages/react-devtools-shell/src/app/ElementTypes/index.js b/packages/react-devtools-shell/src/app/ElementTypes/index.js index d105bff9e1d05..c0e82bb925482 100644 --- a/packages/react-devtools-shell/src/app/ElementTypes/index.js +++ b/packages/react-devtools-shell/src/app/ElementTypes/index.js @@ -15,7 +15,6 @@ import { memo, Component, Fragment, - // $FlowFixMe Flow doesn't know about the Profiler import yet Profiler, StrictMode, Suspense, diff --git a/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js b/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js index 82fe9ec35c0ee..6e8a620b4e02e 100644 --- a/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js +++ b/packages/react-devtools-timeline/src/view-base/utils/normalizeWheel.js @@ -71,17 +71,11 @@ export function normalizeWheel(event: WheelEvent): NormalizedWheelDelta { let deltaX = event.deltaX; let deltaY = event.deltaY; - if ( - // $FlowFixMe DOM_DELTA_LINE missing from WheelEvent - event.deltaMode === WheelEvent.DOM_DELTA_LINE - ) { + if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) { // delta in LINE units deltaX *= LINE_HEIGHT; deltaY *= LINE_HEIGHT; - } else if ( - // $FlowFixMe DOM_DELTA_PAGE missing from WheelEvent - event.deltaMode === WheelEvent.DOM_DELTA_PAGE - ) { + } else if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) { // delta in PAGE units deltaX *= PAGE_HEIGHT; deltaY *= PAGE_HEIGHT; diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js index 17255b9fcc80d..25e37d01c2210 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js +++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js @@ -419,7 +419,6 @@ export function createElement( const firstChild = ((div.firstChild: any): HTMLScriptElement); domElement = div.removeChild(firstChild); } else if (typeof props.is === 'string') { - // $FlowFixMe `createElement` should be updated for Web Components domElement = ownerDocument.createElement(type, {is: props.is}); } else { // Separate else branch instead of using `props.is || undefined` above because of a Firefox bug. diff --git a/packages/react-dom-bindings/src/events/checkPassiveEvents.js b/packages/react-dom-bindings/src/events/checkPassiveEvents.js index 396060867414b..b67e87277d2e4 100644 --- a/packages/react-dom-bindings/src/events/checkPassiveEvents.js +++ b/packages/react-dom-bindings/src/events/checkPassiveEvents.js @@ -16,7 +16,6 @@ export let passiveBrowserEventsSupported: boolean = false; if (canUseDOM) { try { const options = {}; - // $FlowFixMe: Ignore Flow complaining about needing a value Object.defineProperty(options, 'passive', { get: function() { passiveBrowserEventsSupported = true; diff --git a/packages/react-dom-bindings/src/events/plugins/BeforeInputEventPlugin.js b/packages/react-dom-bindings/src/events/plugins/BeforeInputEventPlugin.js index a4554f6c9213a..d00e22b3bab69 100644 --- a/packages/react-dom-bindings/src/events/plugins/BeforeInputEventPlugin.js +++ b/packages/react-dom-bindings/src/events/plugins/BeforeInputEventPlugin.js @@ -227,10 +227,8 @@ function extractCompositionEvent( } } - // $FlowFixMe[incompatible-call] found when upgrading Flow const listeners = accumulateTwoPhaseListeners(targetInst, eventType); if (listeners.length > 0) { - // $FlowFixMe[incompatible-type] const event: ReactSyntheticEvent = new SyntheticCompositionEvent( eventType, domEventName, @@ -403,7 +401,6 @@ function extractBeforeInputEvent( const listeners = accumulateTwoPhaseListeners(targetInst, 'onBeforeInput'); if (listeners.length > 0) { - // $FlowFixMe[incompatible-type] const event: ReactSyntheticEvent = new SyntheticInputEvent( 'onBeforeInput', 'beforeinput', diff --git a/packages/react-dom-bindings/src/events/plugins/ChangeEventPlugin.js b/packages/react-dom-bindings/src/events/plugins/ChangeEventPlugin.js index cc99bd3ad1264..d4e397c3e9805 100644 --- a/packages/react-dom-bindings/src/events/plugins/ChangeEventPlugin.js +++ b/packages/react-dom-bindings/src/events/plugins/ChangeEventPlugin.js @@ -59,7 +59,6 @@ function createAndAccumulateChangeEvent( enqueueStateRestore(((target: any): Node)); const listeners = accumulateTwoPhaseListeners(inst, 'onChange'); if (listeners.length > 0) { - // $FlowFixMe[incompatible-type] const event: ReactSyntheticEvent = new SyntheticEvent( 'onChange', 'change', diff --git a/packages/react-dom-bindings/src/events/plugins/EnterLeaveEventPlugin.js b/packages/react-dom-bindings/src/events/plugins/EnterLeaveEventPlugin.js index 4183b8785620a..29484a5cd5118 100644 --- a/packages/react-dom-bindings/src/events/plugins/EnterLeaveEventPlugin.js +++ b/packages/react-dom-bindings/src/events/plugins/EnterLeaveEventPlugin.js @@ -104,7 +104,6 @@ function extractEvents( const nearestMounted = getNearestMountedFiber(to); if ( to !== nearestMounted || - // $FlowFixMe[incompatible-use] found when upgrading Flow (to.tag !== HostComponent && to.tag !== HostText) ) { to = null; @@ -135,8 +134,6 @@ function extractEvents( const fromNode = from == null ? win : getNodeFromInstance(from); const toNode = to == null ? win : getNodeFromInstance(to); - // $FlowFixMe[prop-missing] - // $FlowFixMe[incompatible-type] const leave: KnownReactSyntheticEvent = new SyntheticEventCtor( leaveEventType, eventTypePrefix + 'leave', @@ -153,7 +150,6 @@ function extractEvents( // the first ancestor. Next time, we will ignore the event. const nativeTargetInst = getClosestInstanceFromNode((nativeEventTarget: any)); if (nativeTargetInst === targetInst) { - // $FlowFixMe[prop-missing] const enterEvent: KnownReactSyntheticEvent = new SyntheticEventCtor( enterEventType, eventTypePrefix + 'enter', diff --git a/packages/react-dom-bindings/src/events/plugins/SelectEventPlugin.js b/packages/react-dom-bindings/src/events/plugins/SelectEventPlugin.js index 2032b02565329..950b505fe9961 100644 --- a/packages/react-dom-bindings/src/events/plugins/SelectEventPlugin.js +++ b/packages/react-dom-bindings/src/events/plugins/SelectEventPlugin.js @@ -116,7 +116,6 @@ function constructSelectEvent(dispatchQueue, nativeEvent, nativeEventTarget) { 'onSelect', ); if (listeners.length > 0) { - // $FlowFixMe[incompatible-type] const event: ReactSyntheticEvent = new SyntheticEvent( 'onSelect', 'select', diff --git a/packages/react-dom-bindings/src/events/plugins/SimpleEventPlugin.js b/packages/react-dom-bindings/src/events/plugins/SimpleEventPlugin.js index 07c9ec94c7104..78df13154b364 100644 --- a/packages/react-dom-bindings/src/events/plugins/SimpleEventPlugin.js +++ b/packages/react-dom-bindings/src/events/plugins/SimpleEventPlugin.js @@ -173,7 +173,6 @@ function extractEvents( ); if (listeners.length > 0) { // Intentionally create event lazily. - // $FlowFixMe[incompatible-type] const event: ReactSyntheticEvent = new SyntheticEventCtor( reactName, reactEventType, @@ -206,7 +205,6 @@ function extractEvents( ); if (listeners.length > 0) { // Intentionally create event lazily. - // $FlowFixMe[incompatible-type] const event: ReactSyntheticEvent = new SyntheticEventCtor( reactName, reactEventType, diff --git a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js index cedc935f7ac26..22429ac70d183 100644 --- a/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js +++ b/packages/react-dom-bindings/src/server/ReactDOMServerFormatConfig.js @@ -511,7 +511,6 @@ function pushAttribute( // shouldRemoveAttribute switch (typeof value) { case 'function': - // $FlowFixMe symbol is perfectly valid here case 'symbol': // eslint-disable-line return; case 'boolean': { @@ -620,7 +619,6 @@ function pushAttribute( // shouldRemoveAttribute switch (typeof value) { case 'function': - // $FlowFixMe symbol is perfectly valid here case 'symbol': // eslint-disable-line return; case 'boolean': { diff --git a/packages/react-dom-bindings/src/shared/DOMProperty.js b/packages/react-dom-bindings/src/shared/DOMProperty.js index c4ae688aff35f..5333e47db580c 100644 --- a/packages/react-dom-bindings/src/shared/DOMProperty.js +++ b/packages/react-dom-bindings/src/shared/DOMProperty.js @@ -123,7 +123,6 @@ export function shouldRemoveAttributeWithWarning( } switch (typeof value) { case 'function': - // $FlowFixMe symbol is perfectly valid here case 'symbol': // eslint-disable-line return true; case 'boolean': { diff --git a/packages/react-fs/src/ReactFilesystem.js b/packages/react-fs/src/ReactFilesystem.js index 2d376a4dca940..c47ca6f256959 100644 --- a/packages/react-fs/src/ReactFilesystem.js +++ b/packages/react-fs/src/ReactFilesystem.js @@ -121,7 +121,6 @@ export function access(path: string, mode?: number): void { record = createRecordFromThenable(thenable); accessCache.push(mode, record); } - // $FlowFixMe[incompatible-call] found when upgrading Flow readRecord(record); // No return value. } diff --git a/packages/react-reconciler/src/ReactFiberAct.new.js b/packages/react-reconciler/src/ReactFiberAct.new.js index fbb12f4bd178b..bdad7161f6518 100644 --- a/packages/react-reconciler/src/ReactFiberAct.new.js +++ b/packages/react-reconciler/src/ReactFiberAct.new.js @@ -40,7 +40,6 @@ export function isLegacyActEnvironment(fiber: Fiber): boolean { export function isConcurrentActEnvironment(): void | boolean { if (__DEV__) { const isReactActEnvironmentGlobal = - // $FlowFixMe – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined' ? IS_REACT_ACT_ENVIRONMENT : undefined; diff --git a/packages/react-reconciler/src/ReactFiberAct.old.js b/packages/react-reconciler/src/ReactFiberAct.old.js index 90f771b594059..7dc4eb7015b82 100644 --- a/packages/react-reconciler/src/ReactFiberAct.old.js +++ b/packages/react-reconciler/src/ReactFiberAct.old.js @@ -40,7 +40,6 @@ export function isLegacyActEnvironment(fiber: Fiber): boolean { export function isConcurrentActEnvironment(): void | boolean { if (__DEV__) { const isReactActEnvironmentGlobal = - // $FlowFixMe – Flow doesn't know about IS_REACT_ACT_ENVIRONMENT global typeof IS_REACT_ACT_ENVIRONMENT !== 'undefined' ? IS_REACT_ACT_ENVIRONMENT : undefined; diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.new.js b/packages/react-reconciler/src/ReactFiberCommitWork.new.js index 4066f37b3b02a..7e489ccfe74ba 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.new.js @@ -350,7 +350,6 @@ function commitBeforeMutationEffects_begin() { // Let's skip the whole loop if it's off. if (enableCreateEventHandleAPI) { // TODO: Should wrap this in flags check, too, as optimization - // $FlowFixMe[incompatible-use] found when upgrading Flow const deletions = fiber.deletions; if (deletions !== null) { for (let i = 0; i < deletions.length; i++) { @@ -360,10 +359,8 @@ function commitBeforeMutationEffects_begin() { } } - // $FlowFixMe[incompatible-use] found when upgrading Flow const child = fiber.child; if ( - // $FlowFixMe[incompatible-use] found when upgrading Flow (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags && child !== null ) { diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.old.js b/packages/react-reconciler/src/ReactFiberCommitWork.old.js index 0fd77ff2dd1d4..4957356c30383 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.old.js @@ -350,7 +350,6 @@ function commitBeforeMutationEffects_begin() { // Let's skip the whole loop if it's off. if (enableCreateEventHandleAPI) { // TODO: Should wrap this in flags check, too, as optimization - // $FlowFixMe[incompatible-use] found when upgrading Flow const deletions = fiber.deletions; if (deletions !== null) { for (let i = 0; i < deletions.length; i++) { @@ -360,10 +359,8 @@ function commitBeforeMutationEffects_begin() { } } - // $FlowFixMe[incompatible-use] found when upgrading Flow const child = fiber.child; if ( - // $FlowFixMe[incompatible-use] found when upgrading Flow (fiber.subtreeFlags & BeforeMutationMask) !== NoFlags && child !== null ) { diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js index b2bdbb0e0bca6..ef85cb32be9a2 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.new.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.new.js @@ -357,7 +357,6 @@ if (supportsMutation) { node = node.child; continue; } - // $FlowFixMe This is correct but Flow is confused by the labeled break. node = (node: Fiber); if (node === workInProgress) { return; @@ -425,7 +424,6 @@ if (supportsMutation) { node = node.child; continue; } - // $FlowFixMe This is correct but Flow is confused by the labeled break. node = (node: Fiber); if (node === workInProgress) { return; diff --git a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js index e0d1dc4b66325..be5ff0d1ab3a8 100644 --- a/packages/react-reconciler/src/ReactFiberCompleteWork.old.js +++ b/packages/react-reconciler/src/ReactFiberCompleteWork.old.js @@ -357,7 +357,6 @@ if (supportsMutation) { node = node.child; continue; } - // $FlowFixMe This is correct but Flow is confused by the labeled break. node = (node: Fiber); if (node === workInProgress) { return; @@ -425,7 +424,6 @@ if (supportsMutation) { node = node.child; continue; } - // $FlowFixMe This is correct but Flow is confused by the labeled break. node = (node: Fiber); if (node === workInProgress) { return; diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js index 7ed2249524d8b..f430a4cad6baf 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.new.js +++ b/packages/react-reconciler/src/ReactFiberHooks.new.js @@ -771,7 +771,6 @@ if (enableUseMemoCacheHook) { function use(usable: Usable): T { if (usable !== null && typeof usable === 'object') { // $FlowFixMe[method-unbinding] - // $FlowFixMe[prop-missing] if (typeof usable.then === 'function') { // This is a thenable. const thenable: Thenable = (usable: any); diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js index 559b96fb1a209..d5add2ffec5c4 100644 --- a/packages/react-reconciler/src/ReactFiberHooks.old.js +++ b/packages/react-reconciler/src/ReactFiberHooks.old.js @@ -771,7 +771,6 @@ if (enableUseMemoCacheHook) { function use(usable: Usable): T { if (usable !== null && typeof usable === 'object') { // $FlowFixMe[method-unbinding] - // $FlowFixMe[prop-missing] if (typeof usable.then === 'function') { // This is a thenable. const thenable: Thenable = (usable: any); diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.new.js b/packages/react-reconciler/src/ReactFiberHotReloading.new.js index 0b226a3de9a61..32ddb28afa365 100644 --- a/packages/react-reconciler/src/ReactFiberHotReloading.new.js +++ b/packages/react-reconciler/src/ReactFiberHotReloading.new.js @@ -51,7 +51,6 @@ import { import {enableFloat} from 'shared/ReactFeatureFlags'; let resolveFamily: RefreshHandler | null = null; -// $FlowFixMe Flow gets confused by a WeakSet feature check below. let failedBoundaries: WeakSet | null = null; export const setRefreshHandler = (handler: RefreshHandler | null): void => { @@ -212,7 +211,6 @@ export function markFailedErrorBoundaryForHotReloading(fiber: Fiber) { return; } if (failedBoundaries === null) { - // $FlowFixMe Flow got confused by the feature check above. failedBoundaries = new WeakSet(); } failedBoundaries.add(fiber); diff --git a/packages/react-reconciler/src/ReactFiberHotReloading.old.js b/packages/react-reconciler/src/ReactFiberHotReloading.old.js index 91d045a8944cb..0b553eaad3162 100644 --- a/packages/react-reconciler/src/ReactFiberHotReloading.old.js +++ b/packages/react-reconciler/src/ReactFiberHotReloading.old.js @@ -51,7 +51,6 @@ import { import {enableFloat} from 'shared/ReactFeatureFlags'; let resolveFamily: RefreshHandler | null = null; -// $FlowFixMe Flow gets confused by a WeakSet feature check below. let failedBoundaries: WeakSet | null = null; export const setRefreshHandler = (handler: RefreshHandler | null): void => { @@ -212,7 +211,6 @@ export function markFailedErrorBoundaryForHotReloading(fiber: Fiber) { return; } if (failedBoundaries === null) { - // $FlowFixMe Flow got confused by the feature check above. failedBoundaries = new WeakSet(); } failedBoundaries.add(fiber); diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js index 90591f8f0ba76..ff1f2d02364a1 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.new.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.new.js @@ -415,8 +415,6 @@ export function addMarkerProgressCallbackToPendingTransition( } if (currentPendingTransitionCallbacks.markerProgress === null) { - // $FlowFixMe[incompatible-use] - // $FlowFixMe[incompatible-type] currentPendingTransitionCallbacks.markerProgress = new Map(); } @@ -445,8 +443,6 @@ export function addMarkerIncompleteCallbackToPendingTransition( } if (currentPendingTransitionCallbacks.markerIncomplete === null) { - // $FlowFixMe[incompatible-use] found when upgrading Flow - // $FlowFixMe[incompatible-type] found when upgrading Flow currentPendingTransitionCallbacks.markerIncomplete = new Map(); } @@ -474,8 +470,6 @@ export function addMarkerCompleteCallbackToPendingTransition( } if (currentPendingTransitionCallbacks.markerComplete === null) { - // $FlowFixMe[incompatible-use] found when upgrading Flow - // $FlowFixMe[incompatible-type] found when upgrading Flow currentPendingTransitionCallbacks.markerComplete = new Map(); } @@ -503,8 +497,6 @@ export function addTransitionProgressCallbackToPendingTransition( } if (currentPendingTransitionCallbacks.transitionProgress === null) { - // $FlowFixMe[incompatible-use] found when upgrading Flow - // $FlowFixMe[incompatible-type] found when upgrading Flow currentPendingTransitionCallbacks.transitionProgress = new Map(); } @@ -1680,8 +1672,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber { if (workInProgress !== null) { let interruptedWork = workInProgressIsSuspended ? workInProgress - : // $FlowFixMe[incompatible-use] found when upgrading Flow - workInProgress.return; + : workInProgress.return; while (interruptedWork !== null) { const current = interruptedWork.alternate; unwindInterruptedWork( @@ -3065,12 +3056,10 @@ export function attachPingListener( pingCache.set(wakeable, threadIDs); } } - // $FlowFixMe[incompatible-use] found when upgrading Flow if (!threadIDs.has(lanes)) { workInProgressRootDidAttachPingListener = true; // Memoize using the thread ID to prevent redundant listeners. - // $FlowFixMe[incompatible-use] found when upgrading Flow threadIDs.add(lanes); const ping = pingSuspendedRoot.bind(null, root, wakeable, lanes); if (enableUpdaterTracking) { diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js index 49b62e545e0bb..9f9c70ff2c0dd 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.old.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.old.js @@ -415,8 +415,6 @@ export function addMarkerProgressCallbackToPendingTransition( } if (currentPendingTransitionCallbacks.markerProgress === null) { - // $FlowFixMe[incompatible-use] - // $FlowFixMe[incompatible-type] currentPendingTransitionCallbacks.markerProgress = new Map(); } @@ -445,8 +443,6 @@ export function addMarkerIncompleteCallbackToPendingTransition( } if (currentPendingTransitionCallbacks.markerIncomplete === null) { - // $FlowFixMe[incompatible-use] found when upgrading Flow - // $FlowFixMe[incompatible-type] found when upgrading Flow currentPendingTransitionCallbacks.markerIncomplete = new Map(); } @@ -474,8 +470,6 @@ export function addMarkerCompleteCallbackToPendingTransition( } if (currentPendingTransitionCallbacks.markerComplete === null) { - // $FlowFixMe[incompatible-use] found when upgrading Flow - // $FlowFixMe[incompatible-type] found when upgrading Flow currentPendingTransitionCallbacks.markerComplete = new Map(); } @@ -503,8 +497,6 @@ export function addTransitionProgressCallbackToPendingTransition( } if (currentPendingTransitionCallbacks.transitionProgress === null) { - // $FlowFixMe[incompatible-use] found when upgrading Flow - // $FlowFixMe[incompatible-type] found when upgrading Flow currentPendingTransitionCallbacks.transitionProgress = new Map(); } @@ -1680,8 +1672,7 @@ function prepareFreshStack(root: FiberRoot, lanes: Lanes): Fiber { if (workInProgress !== null) { let interruptedWork = workInProgressIsSuspended ? workInProgress - : // $FlowFixMe[incompatible-use] found when upgrading Flow - workInProgress.return; + : workInProgress.return; while (interruptedWork !== null) { const current = interruptedWork.alternate; unwindInterruptedWork( @@ -3065,12 +3056,10 @@ export function attachPingListener( pingCache.set(wakeable, threadIDs); } } - // $FlowFixMe[incompatible-use] found when upgrading Flow if (!threadIDs.has(lanes)) { workInProgressRootDidAttachPingListener = true; // Memoize using the thread ID to prevent redundant listeners. - // $FlowFixMe[incompatible-use] found when upgrading Flow threadIDs.add(lanes); const ping = pingSuspendedRoot.bind(null, root, wakeable, lanes); if (enableUpdaterTracking) { diff --git a/packages/react-refresh/src/ReactFreshRuntime.js b/packages/react-refresh/src/ReactFreshRuntime.js index 2a971185f337a..1cce12585e48a 100644 --- a/packages/react-refresh/src/ReactFreshRuntime.js +++ b/packages/react-refresh/src/ReactFreshRuntime.js @@ -47,15 +47,16 @@ const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map; // We never remove these associations. // It's OK to reference families, but use WeakMap/Set for types. const allFamiliesByID: Map = new Map(); -const allFamiliesByType: // $FlowFixMe -WeakMap | Map = new PossiblyWeakMap(); +const allFamiliesByType: + | WeakMap + | Map = new PossiblyWeakMap(); const allSignaturesByType: // $FlowFixMe WeakMap | Map = new PossiblyWeakMap(); // This WeakMap is read by React, so we only put families // that have actually been edited here. This keeps checks fast. -// $FlowFixMe -const updatedFamiliesByType: // $FlowFixMe -WeakMap | Map = new PossiblyWeakMap(); +const updatedFamiliesByType: + | WeakMap + | Map = new PossiblyWeakMap(); // This is cleared on every performReactRefresh() call. // It is an array of [Family, NextType] tuples. @@ -74,8 +75,7 @@ const failedRoots: Set = new Set(); // In environments that support WeakMap, we also remember the last element for every root. // It needs to be weak because we do this even for roots that failed to mount. // If there is no WeakMap, we won't attempt to do retrying. -// $FlowFixMe -const rootElements: WeakMap | null = // $FlowFixMe +const rootElements: WeakMap | null = typeof WeakMap === 'function' ? new WeakMap() : null; let isPerformingRefresh = false; diff --git a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js index 4c9b3447d028c..6ddfa87bc657e 100644 --- a/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js +++ b/packages/react-server-dom-webpack/src/ReactFlightWebpackNodeRegister.js @@ -9,7 +9,6 @@ const url = require('url'); -// $FlowFixMe const Module = require('module'); module.exports = function register() { diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js index d87c3a6daebf5..8db3f319e3cc1 100644 --- a/packages/react-server/src/ReactFizzHooks.js +++ b/packages/react-server/src/ReactFizzHooks.js @@ -184,7 +184,6 @@ function createWorkInProgressHook(): Hook { if (workInProgressHook.next === null) { isReRender = false; // Append to the end of the list - // $FlowFixMe[incompatible-use] found when upgrading Flow workInProgressHook = workInProgressHook.next = createHook(); } else { // There's already a work-in-progress. Reuse it. @@ -529,7 +528,6 @@ function throwOnUseEventCall() { export function useEvent) => Return>( callback: F, ): EventFunctionWrapper { - // $FlowIgnore[incompatible-return] useEvent doesn't work in Fizz return throwOnUseEventCall; } @@ -594,7 +592,6 @@ function useId(): string { function use(usable: Usable): T { if (usable !== null && typeof usable === 'object') { // $FlowFixMe[method-unbinding] - // $FlowFixMe[prop-missing] if (typeof usable.then === 'function') { // This is a thenable. const thenable: Thenable = (usable: any); diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js index fe485824c93a4..07de6602e6288 100644 --- a/packages/react-server/src/ReactFlightHooks.js +++ b/packages/react-server/src/ReactFlightHooks.js @@ -146,7 +146,6 @@ function useId(): string { function use(usable: Usable): T { if (usable !== null && typeof usable === 'object') { // $FlowFixMe[method-unbinding] - // $FlowFixMe[prop-missing] if (typeof usable.then === 'function') { // This is a thenable. const thenable: Thenable = (usable: any); diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js index 41ccc9867dd8a..02823183ea949 100644 --- a/packages/react-server/src/ReactFlightServer.js +++ b/packages/react-server/src/ReactFlightServer.js @@ -273,7 +273,6 @@ function attemptResolveElement( ); } } - // $FlowFixMe issue discovered when updating Flow return [ REACT_ELEMENT_TYPE, type, @@ -768,7 +767,6 @@ export function resolveModelToJSON( // $FlowFixMe `description` might be undefined const name: string = value.description; - // $FlowFixMe `name` might be undefined if (Symbol.for(name) !== value) { throw new Error( 'Only global symbols received from Symbol.for(...) can be passed to client components. ' + @@ -898,7 +896,6 @@ function emitModuleChunk( id: number, moduleMetaData: ModuleMetaData, ): void { - // $FlowFixMe ModuleMetaData is not a ReactModel const processedChunk = processModuleChunk(request, id, moduleMetaData); request.completedModuleChunks.push(processedChunk); } diff --git a/packages/react-server/src/ReactFlightServerConfigStream.js b/packages/react-server/src/ReactFlightServerConfigStream.js index 7944137288eb5..8aa9e96d9ddf6 100644 --- a/packages/react-server/src/ReactFlightServerConfigStream.js +++ b/packages/react-server/src/ReactFlightServerConfigStream.js @@ -121,7 +121,6 @@ export function processModelChunk( id: number, model: ReactModel, ): Chunk { - // $FlowFixMe: `json` might be `undefined` when model is a symbol. const json: string = stringify(model, request.toJSON); const row = serializeRowHeader('J', id) + json + '\n'; return stringToChunk(row); @@ -142,7 +141,6 @@ export function processModuleChunk( id: number, moduleMetaData: ReactModel, ): Chunk { - // $FlowFixMe: `json` might be `undefined` when moduleMetaData is a symbol. const json: string = stringify(moduleMetaData); const row = serializeRowHeader('M', id) + json + '\n'; return stringToChunk(row); diff --git a/packages/react/src/ReactStartTransition.js b/packages/react/src/ReactStartTransition.js index daafea7e9e67e..cf4359cf8d49f 100644 --- a/packages/react/src/ReactStartTransition.js +++ b/packages/react/src/ReactStartTransition.js @@ -20,7 +20,6 @@ export function startTransition( const currentTransition = ReactCurrentBatchConfig.transition; if (__DEV__) { - // $FlowFixMe[incompatible-use] found when upgrading Flow ReactCurrentBatchConfig.transition._updatedFibers = new Set(); } @@ -48,7 +47,6 @@ export function startTransition( 'Otherwise concurrent mode guarantees are off the table.', ); } - // $FlowFixMe[incompatible-use] found when upgrading Flow currentTransition._updatedFibers.clear(); } } diff --git a/packages/scheduler/src/forks/SchedulerMock.js b/packages/scheduler/src/forks/SchedulerMock.js index ef1d03a9bd595..389edcb699e35 100644 --- a/packages/scheduler/src/forks/SchedulerMock.js +++ b/packages/scheduler/src/forks/SchedulerMock.js @@ -520,7 +520,6 @@ function unstable_flushNumberOfYields(count: number): void { try { let hasMoreWork = true; do { - // $FlowFixMe[not-a-function] found when upgrading Flow hasMoreWork = cb(true, currentMockTime); } while (hasMoreWork && !didStop); if (!hasMoreWork) { @@ -546,7 +545,6 @@ function unstable_flushUntilNextPaint(): false { try { let hasMoreWork = true; do { - // $FlowFixMe[not-a-function] found when upgrading Flow hasMoreWork = cb(true, currentMockTime); } while (hasMoreWork && !didStop); if (!hasMoreWork) { @@ -593,7 +591,6 @@ function unstable_flushAllWithoutAsserting(): boolean { try { let hasMoreWork = true; do { - // $FlowFixMe[not-a-function] found when upgrading Flow hasMoreWork = cb(true, currentMockTime); } while (hasMoreWork); if (!hasMoreWork) { From 2872a26e14627f90e812048f21feb6d0c8cc0244 Mon Sep 17 00:00:00 2001 From: Josh Story Date: Tue, 4 Oct 2022 16:11:15 -0700 Subject: [PATCH 24/24] track resources in different roots separately (#25388) * track resources in different roots separately * flow types * add test demonstrating portals deep into shadowRoots * revert hostcontext changes * lints * funge style cache key a la ReactDOMComponentTree * hide hacks in componentTree --- .../src/client/ReactDOMComponentTree.js | 10 ++ .../src/client/ReactDOMFloatClient.js | 99 +++++++++------ .../src/client/ReactDOMHostConfig.js | 3 +- .../src/__tests__/ReactDOMFloat-test.js | 116 ++++++++++++++++++ .../src/ReactFiberHostContext.js | 21 ++++ .../src/ReactFiberHostContext.new.js | 6 + .../src/ReactFiberHostContext.old.js | 6 + scripts/error-codes/codes.json | 2 +- 8 files changed, 220 insertions(+), 43 deletions(-) create mode 100644 packages/react-reconciler/src/ReactFiberHostContext.js diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js b/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js index 064646a7c1f91..5c45949f97419 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js +++ b/packages/react-dom-bindings/src/client/ReactDOMComponentTree.js @@ -7,6 +7,7 @@ * @flow */ +import type {FloatRoot, StyleResource} from './ReactDOMFloatClient'; import type {Fiber} from 'react-reconciler/src/ReactInternalTypes'; import type {ReactScopeInstance} from 'shared/ReactTypes'; import type { @@ -42,6 +43,7 @@ const internalContainerInstanceKey = '__reactContainer$' + randomKey; const internalEventHandlersKey = '__reactEvents$' + randomKey; const internalEventHandlerListenersKey = '__reactListeners$' + randomKey; const internalEventHandlesSetKey = '__reactHandles$' + randomKey; +const internalRootNodeStylesSetKey = '__reactStyles$' + randomKey; export function detachDeletedInstance(node: Instance): void { // TODO: This function is only called on host components. I don't think all of @@ -266,3 +268,11 @@ export function doesTargetHaveEventHandle( } return eventHandles.has(eventHandle); } + +export function getStylesFromRoot(root: FloatRoot): Map { + let styles = (root: any)[internalRootNodeStylesSetKey]; + if (!styles) { + styles = (root: any)[internalRootNodeStylesSetKey] = new Map(); + } + return styles; +} diff --git a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js index 500cdfb79f9c8..cf803261ab92f 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js +++ b/packages/react-dom-bindings/src/client/ReactDOMFloatClient.js @@ -7,9 +7,11 @@ * @flow */ -import type {Instance} from './ReactDOMHostConfig'; +import type {Instance, Container} from './ReactDOMHostConfig'; + import ReactDOMSharedInternals from 'shared/ReactDOMSharedInternals.js'; const {Dispatcher} = ReactDOMSharedInternals; +import {DOCUMENT_NODE} from '../shared/HTMLNodeType'; import { validateUnmatchedLinkResourceProps, validatePreloadResourceDifference, @@ -21,7 +23,9 @@ import { validatePreinitArguments, } from '../shared/ReactDOMResourceValidation'; import {createElement, setInitialProperties} from './ReactDOMComponent'; +import {getStylesFromRoot} from './ReactDOMComponentTree'; import {HTML_NAMESPACE} from '../shared/DOMNamespaces'; +import {getCurrentRootHostContainer} from 'react-reconciler/src/ReactFiberHostContext'; // The resource types we support. currently they match the form for the as argument. // In the future this may need to change, especially when modules / scripts are supported @@ -47,7 +51,7 @@ type StyleProps = { 'data-rprec': string, [string]: mixed, }; -type StyleResource = { +export type StyleResource = { type: 'style', // Ref count for resource @@ -66,7 +70,7 @@ type StyleResource = { loaded: boolean, error: mixed, instance: ?Element, - ownerDocument: Document, + root: FloatRoot, }; type Props = {[string]: mixed}; @@ -79,11 +83,6 @@ type Resource = StyleResource | PreloadResource; // e = errored type StyleResourceLoadingState = Promise & {s?: 'l' | 'e'}; -// When rendering we set the currentDocument if one exists. we use this for Resources -// we encounter during render. If this is null and we are dispatching preloads and -// other calls on the ReactDOM module we look for the window global and get the document from there -let currentDocument: ?Document = null; - // It is valid to preload even when we aren't actively rendering. For cases where Float functions are // called when there is no rendering we track the last used document. It is not safe to insert // arbitrary resources into the lastCurrentDocument b/c it may not actually be the document @@ -93,14 +92,17 @@ let currentDocument: ?Document = null; let lastCurrentDocument: ?Document = null; let previousDispatcher = null; -export function prepareToRenderResources(ownerDocument: Document) { - currentDocument = lastCurrentDocument = ownerDocument; +export function prepareToRenderResources(rootContainer: Container) { + // Flot thinks that getRootNode returns a Node but it actually returns a + // Document or ShadowRoot + const rootNode: FloatRoot = (rootContainer.getRootNode(): any); + lastCurrentDocument = getDocumentFromRoot(rootNode); + previousDispatcher = Dispatcher.current; Dispatcher.current = ReactDOMClientDispatcher; } export function cleanupAfterRenderResources() { - currentDocument = null; Dispatcher.current = previousDispatcher; previousDispatcher = null; } @@ -110,9 +112,16 @@ export function cleanupAfterRenderResources() { // from Internals -> ReactDOM -> FloatClient -> Internals so this doesn't introduce a new one. export const ReactDOMClientDispatcher = {preload, preinit}; +export type FloatRoot = Document | ShadowRoot; + // global maps of Resources const preloadResources: Map = new Map(); -const styleResources: Map = new Map(); + +function getCurrentResourceRoot(): null | FloatRoot { + const currentContainer = getCurrentRootHostContainer(); + // $FlowFixMe flow should know currentContainer is a Node and has getRootNode + return currentContainer ? currentContainer.getRootNode() : null; +} // Preloads are somewhat special. Even if we don't have the Document // used by the root that is rendering a component trying to insert a preload @@ -121,13 +130,22 @@ const styleResources: Map = new Map(); // lastCurrentDocument if that exists. As a fallback we will use the window.document // if available. function getDocumentForPreloads(): ?Document { - try { - return currentDocument || lastCurrentDocument || window.document; - } catch (error) { - return null; + const root = getCurrentResourceRoot(); + if (root) { + return root.ownerDocument || root; + } else { + try { + return lastCurrentDocument || window.document; + } catch (error) { + return null; + } } } +function getDocumentFromRoot(root: FloatRoot): Document { + return root.ownerDocument || root; +} + // -------------------------------------- // ReactDOM.Preload // -------------------------------------- @@ -200,8 +218,9 @@ function preinit(href: string, options: PreinitOptions) { typeof options === 'object' && options !== null ) { + const resourceRoot = getCurrentResourceRoot(); const as = options.as; - if (!currentDocument) { + if (!resourceRoot) { // We are going to emit a preload as a best effort fallback since this preinit // was called outside of a render. Given the passive nature of this fallback // we do not warn in dev when props disagree if there happens to already be a @@ -223,6 +242,7 @@ function preinit(href: string, options: PreinitOptions) { switch (as) { case 'style': { + const styleResources = getStylesFromRoot(resourceRoot); const precedence = options.precedence || 'default'; let resource = styleResources.get(href); if (resource) { @@ -241,8 +261,8 @@ function preinit(href: string, options: PreinitOptions) { options, ); resource = createStyleResource( - // $FlowFixMe[incompatible-call] found when upgrading Flow - currentDocument, + styleResources, + resourceRoot, href, precedence, resourceProps, @@ -303,9 +323,10 @@ export function getResource( pendingProps: Props, currentProps: null | Props, ): null | Resource { - if (!currentDocument) { + const resourceRoot = getCurrentResourceRoot(); + if (!resourceRoot) { throw new Error( - '"currentDocument" was expected to exist. This is a bug in React.', + '"resourceRoot" was expected to exist. This is a bug in React.', ); } switch (type) { @@ -313,6 +334,7 @@ export function getResource( const {rel} = pendingProps; switch (rel) { case 'stylesheet': { + const styleResources = getStylesFromRoot(resourceRoot); let didWarn; if (__DEV__) { if (currentProps) { @@ -348,8 +370,8 @@ export function getResource( } else { const resourceProps = stylePropsFromRawProps(styleRawProps); resource = createStyleResource( - // $FlowFixMe[incompatible-call] found when upgrading Flow - currentDocument, + styleResources, + resourceRoot, href, precedence, resourceProps, @@ -384,8 +406,7 @@ export function getResource( } else { const resourceProps = preloadPropsFromRawProps(preloadRawProps); resource = createPreloadResource( - // $FlowFixMe[incompatible-call] found when upgrading Flow - currentDocument, + getDocumentFromRoot(resourceRoot), href, resourceProps, ); @@ -463,7 +484,8 @@ function createResourceInstance( } function createStyleResource( - ownerDocument: Document, + styleResources: Map, + root: FloatRoot, href: string, precedence: string, props: StyleProps, @@ -479,7 +501,7 @@ function createStyleResource( const limitedEscapedHref = escapeSelectorAttributeValueInsideDoubleQuotes( href, ); - const existingEl = ownerDocument.querySelector( + const existingEl = root.querySelector( `link[rel="stylesheet"][href="${limitedEscapedHref}"]`, ); const resource = { @@ -492,7 +514,7 @@ function createStyleResource( preloaded: false, loaded: false, error: false, - ownerDocument, + root, instance: null, }; styleResources.set(href, resource); @@ -567,7 +589,7 @@ function immediatelyPreloadStyleResource(resource: StyleResource) { const {href, props} = resource; const preloadProps = preloadPropsFromStyleProps(props); resource.hint = createPreloadResource( - resource.ownerDocument, + getDocumentFromRoot(resource.root), href, preloadProps, ); @@ -613,11 +635,11 @@ function createPreloadResource( function acquireStyleResource(resource: StyleResource): Instance { if (!resource.instance) { - const {props, ownerDocument, precedence} = resource; + const {props, root, precedence} = resource; const limitedEscapedHref = escapeSelectorAttributeValueInsideDoubleQuotes( props.href, ); - const existingEl = ownerDocument.querySelector( + const existingEl = root.querySelector( `link[rel="stylesheet"][data-rprec][href="${limitedEscapedHref}"]`, ); if (existingEl) { @@ -649,11 +671,11 @@ function acquireStyleResource(resource: StyleResource): Instance { const instance = createResourceInstance( 'link', resource.props, - ownerDocument, + getDocumentFromRoot(root), ); attachLoadListeners(instance, resource); - insertStyleInstance(instance, precedence, ownerDocument); + insertStyleInstance(instance, precedence, root); resource.instance = instance; } } @@ -724,11 +746,9 @@ function onResourceError( function insertStyleInstance( instance: Instance, precedence: string, - ownerDocument: Document, + root: FloatRoot, ): void { - const nodes = ownerDocument.querySelectorAll( - 'link[rel="stylesheet"][data-rprec]', - ); + const nodes = root.querySelectorAll('link[rel="stylesheet"][data-rprec]'); const last = nodes.length ? nodes[nodes.length - 1] : null; let prior = last; for (let i = 0; i < nodes.length; i++) { @@ -746,9 +766,8 @@ function insertStyleInstance( // must exist. ((prior.parentNode: any): Node).insertBefore(instance, prior.nextSibling); } else { - // @TODO call getRootNode on root.container. if it is a Document, insert into head - // if it is a ShadowRoot insert it into the root node. - const parent = ownerDocument.head; + const parent = + root.nodeType === DOCUMENT_NODE ? ((root: any): Document).head : root; if (parent) { parent.insertBefore(instance, parent.firstChild); } else { diff --git a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js b/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js index 63c854a92acdd..780fb59e571d5 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js +++ b/packages/react-dom-bindings/src/client/ReactDOMHostConfig.js @@ -41,7 +41,6 @@ import { warnForDeletedHydratableText, warnForInsertedHydratedElement, warnForInsertedHydratedText, - getOwnerDocumentFromRootContainer, } from './ReactDOMComponent'; import {getSelectionInformation, restoreSelection} from './ReactInputSelection'; import setTextContent from './setTextContent'; @@ -1376,7 +1375,7 @@ function isHostResourceInstance(instance: Instance | Container): boolean { export function prepareRendererToRender(rootContainer: Container) { if (enableFloat) { - prepareToRenderResources(getOwnerDocumentFromRootContainer(rootContainer)); + prepareToRenderResources(rootContainer); } } diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js index 3484c172c4cf2..6c45c68839a14 100644 --- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js @@ -552,6 +552,122 @@ describe('ReactDOMFloat', () => { }); }); + describe('document encapsulation', () => { + // @gate enableFloat + it('can support styles inside portals to a shadowRoot', async () => { + const shadow = document.body.attachShadow({mode: 'open'}); + const root = ReactDOMClient.createRoot(container); + root.render( + <> + + {ReactDOM.createPortal( +
+ + shadow +
, + shadow, + )} + container + , + ); + expect(Scheduler).toFlushWithoutYielding(); + expect(getVisibleChildren(document)).toEqual( + + + + + + +
container
+ + , + ); + expect(getVisibleChildren(shadow)).toEqual([ + , +
shadow
, + ]); + }); + // @gate enableFloat + it('can support styles inside portals to an element in shadowRoots', async () => { + const template = document.createElement('template'); + template.innerHTML = + "
"; + const shadow = document.body.attachShadow({mode: 'open'}); + shadow.appendChild(template.content); + + const shadowContainer1 = shadow.getElementById('shadowcontainer1'); + const shadowContainer2 = shadow.getElementById('shadowcontainer2'); + const root = ReactDOMClient.createRoot(container); + root.render( + <> + + {ReactDOM.createPortal( +
+ + 1 +
, + shadow, + )} + {ReactDOM.createPortal( +
+ + 2 +
, + shadowContainer1, + )} + {ReactDOM.createPortal( +
+ + 3 +
, + shadowContainer2, + )} + container + , + ); + expect(Scheduler).toFlushWithoutYielding(); + expect(getVisibleChildren(document)).toEqual( + + + + + + + + + +
container
+ + , + ); + expect(getVisibleChildren(shadow)).toEqual([ + , + , + , + , +
+
+
2
+
+
+
3
+
+
, +
1
, + ]); + }); + }); + describe('style resources', () => { // @gate enableFloat it('treats link rel stylesheet elements as a style resource when it includes a precedence when server rendering', async () => { diff --git a/packages/react-reconciler/src/ReactFiberHostContext.js b/packages/react-reconciler/src/ReactFiberHostContext.js new file mode 100644 index 0000000000000..461ecdd492ab3 --- /dev/null +++ b/packages/react-reconciler/src/ReactFiberHostContext.js @@ -0,0 +1,21 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + */ + +import type {Container} from './ReactFiberHostConfig'; +import {enableNewReconciler} from 'shared/ReactFeatureFlags'; + +import {getCurrentRootHostContainer as getCurrentRootHostContainer_old} from './ReactFiberHostContext.old'; + +import {getCurrentRootHostContainer as getCurrentRootHostContainer_new} from './ReactFiberHostContext.new'; + +export function getCurrentRootHostContainer(): null | Container { + return enableNewReconciler + ? getCurrentRootHostContainer_new() + : getCurrentRootHostContainer_old(); +} diff --git a/packages/react-reconciler/src/ReactFiberHostContext.new.js b/packages/react-reconciler/src/ReactFiberHostContext.new.js index 282414a658cba..1ea596222bfa5 100644 --- a/packages/react-reconciler/src/ReactFiberHostContext.new.js +++ b/packages/react-reconciler/src/ReactFiberHostContext.new.js @@ -38,6 +38,11 @@ function requiredContext(c: Value | NoContextT): Value { return (c: any); } +function getCurrentRootHostContainer(): null | Container { + const container = rootInstanceStackCursor.current; + return container === NO_CONTEXT ? null : (container: any); +} + function getRootHostContainer(): Container { const rootInstance = requiredContext(rootInstanceStackCursor.current); return rootInstance; @@ -101,6 +106,7 @@ function popHostContext(fiber: Fiber): void { } export { + getCurrentRootHostContainer, getHostContext, getRootHostContainer, popHostContainer, diff --git a/packages/react-reconciler/src/ReactFiberHostContext.old.js b/packages/react-reconciler/src/ReactFiberHostContext.old.js index a4735b4bb6976..293c432e032fc 100644 --- a/packages/react-reconciler/src/ReactFiberHostContext.old.js +++ b/packages/react-reconciler/src/ReactFiberHostContext.old.js @@ -38,6 +38,11 @@ function requiredContext(c: Value | NoContextT): Value { return (c: any); } +function getCurrentRootHostContainer(): null | Container { + const container = rootInstanceStackCursor.current; + return container === NO_CONTEXT ? null : (container: any); +} + function getRootHostContainer(): Container { const rootInstance = requiredContext(rootInstanceStackCursor.current); return rootInstance; @@ -101,6 +106,7 @@ function popHostContext(fiber: Fiber): void { } export { + getCurrentRootHostContainer, getHostContext, getRootHostContainer, popHostContainer, diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json index 1112e284460e0..48fcf61717273 100644 --- a/scripts/error-codes/codes.json +++ b/scripts/error-codes/codes.json @@ -431,6 +431,6 @@ "443": "acquireResource encountered a resource type it did not expect: \"%s\". this is a bug in React.", "444": "getResource encountered a resource type it did not expect: \"%s\". this is a bug in React.", "445": "\"currentResources\" was expected to exist. This is a bug in React.", - "446": "\"currentDocument\" was expected to exist. This is a bug in React.", + "446": "\"resourceRoot\" was expected to exist. This is a bug in React.", "447": "While attempting to insert a Resource, React expected the Document to contain a head element but it was not found." }