diff --git a/.eslintrc.js b/.eslintrc.js index 82abfbe632..85783f6c5a 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -547,12 +547,10 @@ module.exports = { }, globals: { - $ElementType: 'readonly', $Flow$ModuleRef: 'readonly', $FlowFixMe: 'readonly', $Keys: 'readonly', $NonMaybeType: 'readonly', - $PropertyType: 'readonly', $ReadOnly: 'readonly', $ReadOnlyArray: 'readonly', $ArrayBufferView: 'readonly', @@ -586,9 +584,7 @@ module.exports = { NavigateEvent: 'readonly', PropagationPhases: 'readonly', PropertyDescriptor: 'readonly', - React$AbstractComponent: 'readonly', React$Component: 'readonly', - React$ComponentType: 'readonly', React$Config: 'readonly', React$Context: 'readonly', React$Element: 'readonly', diff --git a/package.json b/package.json index 20c893e5fb..e8b8e5a39d 100644 --- a/package.json +++ b/package.json @@ -74,8 +74,8 @@ "eslint-plugin-react-internal": "link:./scripts/eslint-rules", "fbjs-scripts": "^3.0.1", "filesize": "^6.0.1", - "flow-bin": "^0.265", - "flow-remove-types": "^2.265", + "flow-bin": "^0.266", + "flow-remove-types": "^2.266", "flow-typed": "^4.1.1", "glob": "^7.1.6", "glob-stream": "^6.1.0", diff --git a/packages/react-devtools-inline/src/frontend.js b/packages/react-devtools-inline/src/frontend.js index 056d5d2c27..b8d1b2ef4d 100644 --- a/packages/react-devtools-inline/src/frontend.js +++ b/packages/react-devtools-inline/src/frontend.js @@ -52,7 +52,7 @@ export function initialize( bridge?: FrontendBridge, store?: Store, } = {}, -): React.ComponentType { +): component(...props: Props) { if (bridge == null) { bridge = createBridge(contentWindow); } diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js index f0638ae896..ccc66744a7 100644 --- a/packages/react-devtools-shared/src/bridge.js +++ b/packages/react-devtools-shared/src/bridge.js @@ -314,7 +314,7 @@ class Bridge< send>( event: EventName, - ...payload: $ElementType + ...payload: OutgoingEvents[EventName] ) { if (this._isShutdown) { console.warn( diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.js b/packages/react-devtools-shared/src/devtools/views/Components/Components.js index cfa73bbad8..1f0927de98 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Components.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.js @@ -235,4 +235,4 @@ function setResizeCSSVariable( } } -export default (portaledContent(Components): React$ComponentType<{}>); +export default (portaledContent(Components): component()); 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 44950acddf..2739325749 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js +++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js @@ -386,6 +386,6 @@ function HookView({ } } -export default (React.memo( - InspectedElementHooksTree, -): React.ComponentType); +export default (React.memo(InspectedElementHooksTree): component( + ...props: HookViewProps +)); diff --git a/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.js b/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.js index 43082e1423..8237a59956 100644 --- a/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.js +++ b/packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.js @@ -115,4 +115,4 @@ function EditorPane({selectedSource}: Props) { ); } -export default (portaledContent(EditorPane): React$ComponentType<{}>); +export default (portaledContent(EditorPane): component()); 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 f747b7ab4a..5bfe0a299f 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js @@ -132,7 +132,6 @@ function CommitFlamegraphListItem({data, index, style}: Props): React.Node { ); } -export default (memo( - CommitFlamegraphListItem, - areEqual, -): React.ComponentType); +export default (memo(CommitFlamegraphListItem, areEqual): component( + ...props: Props +)); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js index 4a8ab9b7e6..707fddf626 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js @@ -79,7 +79,6 @@ function CommitRankedListItem({data, index, style}: Props) { ); } -export default (memo( - CommitRankedListItem, - areEqual, -): React.ComponentType); +export default (memo(CommitRankedListItem, areEqual): component( + ...props: Props +)); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HookChangeSummary.js b/packages/react-devtools-shared/src/devtools/views/Profiler/HookChangeSummary.js index e5c8f9c0fa..5ce3eec42b 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/HookChangeSummary.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HookChangeSummary.js @@ -38,34 +38,38 @@ type HookProps = { hookNames: Map | null, }; -const Hook: React.AbstractComponent = memo(({hook, hookNames}) => { - const hookSource = hook.hookSource; - const hookName = useMemo(() => { - if (!hookSource || !hookNames) return null; - const key = getHookSourceLocationKey(hookSource); - return hookNames.get(key) || null; - }, [hookSource, hookNames]); +const Hook: component(...props: HookProps) = memo( + ({hook, hookNames}: HookProps) => { + const hookSource = hook.hookSource; + const hookName = useMemo(() => { + if (!hookSource || !hookNames) return null; + const key = getHookSourceLocationKey(hookSource); + return hookNames.get(key) || null; + }, [hookSource, hookNames]); - return ( -
    -
  • - {hook.id !== null && ( - - {String(hook.id + 1)} + return ( +
      +
    • + {hook.id !== null && ( + + {String(hook.id + 1)} + + )} + + {hook.name} + {hookName && ({hookName})} - )} - - {hook.name} - {hookName && ({hookName})} - - {hook.subHooks?.map((subHook, index) => ( - - ))} -
      • -
    - ); -}); + {hook.subHooks?.map((subHook, index) => ( + + ))} +
    • +
+ ); + }, +); const shouldKeepHook = ( hook: HooksNode, @@ -105,12 +109,12 @@ const filterHooks = ( type Props = {| fiberID: number, - hooks: $PropertyType, - state: $PropertyType, + hooks: ChangeDescription['hooks'], + state: ChangeDescription['state'], displayMode?: 'detailed' | 'compact', |}; -const HookChangeSummary: React.AbstractComponent = memo( +const HookChangeSummary: component(...props: Props) = memo( ({hooks, fiberID, state, displayMode = 'detailed'}: Props) => { const {parseHookNames, toggleParseHookNames, inspectedElement} = useContext( InspectedElementContext, diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js index cb06c98f93..4ac55b46f0 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js @@ -190,4 +190,4 @@ const tabsWithTimeline = [ }, ]; -export default (portaledContent(Profiler): React.ComponentType<{}>); +export default (portaledContent(Profiler): component()); diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js index c013ec7595..d9f80f0053 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SnapshotCommitListItem.js @@ -96,7 +96,6 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) { ); } -export default (memo( - SnapshotCommitListItem, - areEqual, -): React.ComponentType); +export default (memo(SnapshotCommitListItem, areEqual): component( + ...props: Props +)); diff --git a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js index 19c039e1dc..8a53365df5 100644 --- a/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js +++ b/packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js @@ -437,4 +437,4 @@ function setResizeCSSVariable( } } -export default (portaledContent(SuspenseTab): React$ComponentType<{}>); +export default (portaledContent(SuspenseTab): component()); diff --git a/packages/react-devtools-shared/src/devtools/views/portaledContent.js b/packages/react-devtools-shared/src/devtools/views/portaledContent.js index fb4455d0a0..ad0ef8e5f0 100644 --- a/packages/react-devtools-shared/src/devtools/views/portaledContent.js +++ b/packages/react-devtools-shared/src/devtools/views/portaledContent.js @@ -17,8 +17,8 @@ import ThemeProvider from './ThemeProvider'; export type Props = {portalContainer?: Element, ...}; export default function portaledContent( - Component: React$ComponentType, -): React$ComponentType { + Component: component(...props: any), +): component(...props: any) { return function PortaledContent({portalContainer, ...rest}: Props) { const store = useContext(StoreContext); diff --git a/packages/react-devtools-shared/src/events.js b/packages/react-devtools-shared/src/events.js index 6d53844d83..2442ec20f1 100644 --- a/packages/react-devtools-shared/src/events.js +++ b/packages/react-devtools-shared/src/events.js @@ -12,7 +12,7 @@ export default class EventEmitter { addListener>( event: Event, - listener: (...$ElementType) => any, + listener: (...Events[Event]) => any, ): void { const listeners = this.listenersMap.get(event); if (listeners === undefined) { @@ -25,10 +25,7 @@ export default class EventEmitter { } } - emit>( - event: Event, - ...args: $ElementType - ): void { + emit>(event: Event, ...args: Events[Event]): void { const listeners = this.listenersMap.get(event); if (listeners !== undefined) { if (listeners.length === 1) { diff --git a/packages/react-devtools-shared/src/hydration.js b/packages/react-devtools-shared/src/hydration.js index ecadad7ab3..2468917d93 100644 --- a/packages/react-devtools-shared/src/hydration.js +++ b/packages/react-devtools-shared/src/hydration.js @@ -133,7 +133,7 @@ export function dehydrate( path: Array, isPathAllowed: (path: Array) => boolean, level: number = 0, -): $PropertyType { +): DehydratedData['data'] { const type = getDataType(data); let isPathAllowedCheck; @@ -479,7 +479,7 @@ export function dehydrate( return createDehydrated(type, true, data, cleaned, path); } else { const object: { - [string]: $PropertyType, + [string]: DehydratedData['data'], } = {}; getAllEnumerableKeys(data).forEach(key => { const name = key.toString(); @@ -616,7 +616,7 @@ function dehydrateKey( path: Array, isPathAllowed: (path: Array) => boolean, level: number = 0, -): $PropertyType { +): DehydratedData['data'] { try { return dehydrate( parent[key], diff --git a/packages/react-devtools-shell/src/app/ToDoList/ListItem.js b/packages/react-devtools-shell/src/app/ToDoList/ListItem.js index f29e8fe418..549d15c31e 100644 --- a/packages/react-devtools-shell/src/app/ToDoList/ListItem.js +++ b/packages/react-devtools-shell/src/app/ToDoList/ListItem.js @@ -46,4 +46,4 @@ function ListItem({item, removeItem, toggleItem}: Props) { ); } -export default (memo(ListItem): React.ComponentType); +export default (memo(ListItem): component(...props: Props)); diff --git a/packages/react-devtools-timeline/src/import-worker/preprocessData.js b/packages/react-devtools-timeline/src/import-worker/preprocessData.js index 5dc0423b08..cefcd1e7f4 100644 --- a/packages/react-devtools-timeline/src/import-worker/preprocessData.js +++ b/packages/react-devtools-timeline/src/import-worker/preprocessData.js @@ -123,7 +123,7 @@ function updateLaneToLabelMap( let profilerVersion = null; -function getLastType(stack: $PropertyType) { +function getLastType(stack: ProcessorState['measureStack']) { if (stack.length > 0) { const {type} = stack[stack.length - 1]; return type; @@ -131,7 +131,7 @@ function getLastType(stack: $PropertyType) { return null; } -function getDepth(stack: $PropertyType) { +function getDepth(stack: ProcessorState['measureStack']) { if (stack.length > 0) { const {depth, type} = stack[stack.length - 1]; return type === 'render-idle' ? depth : depth + 1; @@ -180,7 +180,7 @@ function markWorkCompleted( type: ReactMeasureType, stopTime: Milliseconds, currentProfilerData: TimelineData, - stack: $PropertyType, + stack: ProcessorState['measureStack'], ) { if (stack.length === 0) { console.error( @@ -214,7 +214,7 @@ function markWorkCompleted( function throwIfIncomplete( type: ReactMeasureType, - stack: $PropertyType, + stack: ProcessorState['measureStack'], ) { const lastIndex = stack.length - 1; if (lastIndex >= 0) { diff --git a/packages/react-devtools-timeline/src/types.js b/packages/react-devtools-timeline/src/types.js index c28c78d88c..7ba6f935f2 100644 --- a/packages/react-devtools-timeline/src/types.js +++ b/packages/react-devtools-timeline/src/types.js @@ -79,7 +79,7 @@ export type SchedulingEvent = | ReactScheduleRenderEvent | ReactScheduleStateUpdateEvent | ReactScheduleForceUpdateEvent; -export type SchedulingEventType = $PropertyType; +export type SchedulingEventType = SchedulingEvent['type']; export type ReactMeasureType = | 'commit' diff --git a/packages/react-markup/src/ReactMarkupServer.js b/packages/react-markup/src/ReactMarkupServer.js index 34d234b0be..5f69c3d44a 100644 --- a/packages/react-markup/src/ReactMarkupServer.js +++ b/packages/react-markup/src/ReactMarkupServer.js @@ -47,7 +47,7 @@ import { type ReactMarkupNodeList = // This is the intersection of ReactNodeList and ReactClientValue minus // Client/ServerReferences. - | React$Element> + | component(...props: any) | LazyComponent | React$Element | string diff --git a/packages/react-reconciler/src/ReactTestSelectors.js b/packages/react-reconciler/src/ReactTestSelectors.js index de3e95c281..ec30b2112b 100644 --- a/packages/react-reconciler/src/ReactTestSelectors.js +++ b/packages/react-reconciler/src/ReactTestSelectors.js @@ -48,7 +48,7 @@ type Type = symbol | number; type ComponentSelector = { $$typeof: Type, - value: React$ComponentType, + value: component(), }; type HasPseudoClassSelector = { @@ -79,7 +79,7 @@ type Selector = | TestNameSelector; export function createComponentSelector( - component: React$ComponentType, + component: component(), ): ComponentSelector { return { $$typeof: COMPONENT_TYPE, diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js index b8b3af14d5..440748ca2f 100644 --- a/packages/react-server/src/ReactFlightServer.js +++ b/packages/react-server/src/ReactFlightServer.js @@ -476,7 +476,7 @@ type ReactJSONValue = // Serializable values export type ReactClientValue = // Server Elements and Lazy Components are unwrapped on the Server - | React$Element> + | React$Element | LazyComponent // References are passed by their value | ClientReference diff --git a/packages/react/index.development.js b/packages/react/index.development.js index b4c0632b7f..595135e606 100644 --- a/packages/react/index.development.js +++ b/packages/react/index.development.js @@ -8,8 +8,6 @@ */ // Keep in sync with https://github.com/facebook/flow/blob/main/lib/react.js -export type ComponentType<-P> = React$ComponentType

; -export type AbstractComponent<-Config> = React$AbstractComponent; export type ElementType = React$ElementType; export type Element<+C> = React$Element; export type Key = React$Key; diff --git a/packages/react/index.js b/packages/react/index.js index 4eb8f2dfc2..cbeea0d28b 100644 --- a/packages/react/index.js +++ b/packages/react/index.js @@ -8,8 +8,6 @@ */ // Keep in sync with https://github.com/facebook/flow/blob/main/lib/react.js -export type ComponentType<-P> = React$ComponentType

; -export type AbstractComponent<-Config> = React$AbstractComponent; export type ElementType = React$ElementType; export type Element<+C> = React$Element; export type MixedElement = React$Element; diff --git a/yarn.lock b/yarn.lock index a4ba51b2c9..880f442826 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9298,12 +9298,12 @@ flatted@^3.2.9: resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a" integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw== -flow-bin@^0.265: - version "0.265.3" - resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.265.3.tgz#cbaad2115f4622e34920981dc79949824c27f421" - integrity sha512-08PjO2kjuQxy8MxYJNCzmgRpAe1uqTf7kQ+U32QTavRzTD/7IJASYKFEEvCkVNHlhSy8CTJsN+AQdHsXVqChIw== +flow-bin@^0.266: + version "0.266.1" + resolved "https://registry.yarnpkg.com/flow-bin/-/flow-bin-0.266.1.tgz#8939be6fbd681c4ef8dc4873b22f4b79be76cb0a" + integrity sha512-c1lg1E8SDcuPSkrOeH0JTcNKMZOzXvqX2DuuXJ0amZec15uyuIi8QlGTO3OzYssMT/kwFdo5vviJqSUI/BNFbw== -flow-remove-types@^2.265: +flow-remove-types@^2.266: version "2.279.0" resolved "https://registry.yarnpkg.com/flow-remove-types/-/flow-remove-types-2.279.0.tgz#3a3388d9158eba0f82c40d80d31d9640b883a3f5" integrity sha512-bPFloMR/A2b/r/sIsf7Ix0LaMicCJNjwhXc4xEEQVzJCIz5u7C7XDaEOXOiqveKlCYK7DcBNn6R01Cbbc9gsYA==