\n- {hook.id !== null && (\n-
\n- {String(hook.id + 1)}\n+const Hook: component(...props: HookProps) = memo(\n+ ({hook, hookNames}: HookProps) => {\n+ const hookSource = hook.hookSource;\n+ const hookName = useMemo(() => {\n+ if (!hookSource || !hookNames) return null;\n+ const key = getHookSourceLocationKey(hookSource);\n+ return hookNames.get(key) || null;\n+ }, [hookSource, hookNames]);\n+\n+ return (\n+
- \n+ {hook.id !== null && (\n+ \n+ {String(hook.id + 1)}\n+ <\/span>\n+ )}\n+ \n+ {hook.name}\n+ {hookName && ({hookName})<\/span>}\n <\/span>\n- )}\n- \n- {hook.name}\n- {hookName && ({hookName})<\/span>}\n- <\/span>\n- {hook.subHooks?.map((subHook, index) => (\n- \n- ))}\n- <\/li>\n- <\/ul>\n- );\n-});\n+ {hook.subHooks?.map((subHook, index) => (\n+ \n+ ))}\n+ <\/li>\n+ <\/ul>\n+ );\n+ },\n+);\n \n const shouldKeepHook = (\n hook: HooksNode,\n@@ -105,12 +109,12 @@ const filterHooks = (\n \n type Props = {|\n fiberID: number,\n- hooks: $PropertyType,\n- state: $PropertyType,\n+ hooks: ChangeDescription['hooks'],\n+ state: ChangeDescription['state'],\n displayMode?: 'detailed' | 'compact',\n |};\n \n-const HookChangeSummary: React.AbstractComponent = memo(\n+const HookChangeSummary: component(...props: Props) = memo(\n ({hooks, fiberID, state, displayMode = 'detailed'}: Props) => {\n const {parseHookNames, toggleParseHookNames, inspectedElement} = useContext(\n InspectedElementContext,\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Profiler.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Profiler.js\nindex cb06c98f93..4ac55b46f0 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Profiler.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/Profiler.js\n@@ -190,4 +190,4 @@ const tabsWithTimeline = [\n },\n ];\n \n-export default (portaledContent(Profiler): React.ComponentType<{}>);\n+export default (portaledContent(Profiler): component());\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.js\nindex c013ec7595..d9f80f0053 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/Profiler\/SnapshotCommitListItem.js\n@@ -96,7 +96,6 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {\n );\n }\n \n-export default (memo(\n- SnapshotCommitListItem,\n- areEqual,\n-): React.ComponentType);\n+export default (memo(SnapshotCommitListItem, areEqual): component(\n+ ...props: Props\n+));\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.js\nindex 19c039e1dc..8a53365df5 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/SuspenseTab\/SuspenseTab.js\n@@ -437,4 +437,4 @@ function setResizeCSSVariable(\n }\n }\n \n-export default (portaledContent(SuspenseTab): React$ComponentType<{}>);\n+export default (portaledContent(SuspenseTab): component());\ndiff --git a\/packages\/react-devtools-shared\/src\/devtools\/views\/portaledContent.js b\/packages\/react-devtools-shared\/src\/devtools\/views\/portaledContent.js\nindex fb4455d0a0..ad0ef8e5f0 100644\n--- a\/packages\/react-devtools-shared\/src\/devtools\/views\/portaledContent.js\n+++ b\/packages\/react-devtools-shared\/src\/devtools\/views\/portaledContent.js\n@@ -17,8 +17,8 @@ import ThemeProvider from '.\/ThemeProvider';\n export type Props = {portalContainer?: Element, ...};\n \n export default function portaledContent(\n- Component: React$ComponentType,\n-): React$ComponentType {\n+ Component: component(...props: any),\n+): component(...props: any) {\n return function PortaledContent({portalContainer, ...rest}: Props) {\n const store = useContext(StoreContext);\n \ndiff --git a\/packages\/react-devtools-shared\/src\/events.js b\/packages\/react-devtools-shared\/src\/events.js\nindex 6d53844d83..2442ec20f1 100644\n--- a\/packages\/react-devtools-shared\/src\/events.js\n+++ b\/packages\/react-devtools-shared\/src\/events.js\n@@ -12,7 +12,7 @@ export default class EventEmitter {\n \n addListener>(\n event: Event,\n- listener: (...$ElementType) => any,\n+ listener: (...Events[Event]) => any,\n ): void {\n const listeners = this.listenersMap.get(event);\n if (listeners === undefined) {\n@@ -25,10 +25,7 @@ export default class EventEmitter {\n }\n }\n \n- emit>(\n- event: Event,\n- ...args: $ElementType\n- ): void {\n+ emit>(event: Event, ...args: Events[Event]): void {\n const listeners = this.listenersMap.get(event);\n if (listeners !== undefined) {\n if (listeners.length === 1) {\ndiff --git a\/packages\/react-devtools-shared\/src\/hydration.js b\/packages\/react-devtools-shared\/src\/hydration.js\nindex ecadad7ab3..2468917d93 100644\n--- a\/packages\/react-devtools-shared\/src\/hydration.js\n+++ b\/packages\/react-devtools-shared\/src\/hydration.js\n@@ -133,7 +133,7 @@ export function dehydrate(\n path: Array,\n isPathAllowed: (path: Array) => boolean,\n level: number = 0,\n-): $PropertyType {\n+): DehydratedData['data'] {\n const type = getDataType(data);\n \n let isPathAllowedCheck;\n@@ -479,7 +479,7 @@ export function dehydrate(\n return createDehydrated(type, true, data, cleaned, path);\n } else {\n const object: {\n- [string]: $PropertyType,\n+ [string]: DehydratedData['data'],\n } = {};\n getAllEnumerableKeys(data).forEach(key => {\n const name = key.toString();\n@@ -616,7 +616,7 @@ function dehydrateKey(\n path: Array,\n isPathAllowed: (path: Array) => boolean,\n level: number = 0,\n-): $PropertyType {\n+): DehydratedData['data'] {\n try {\n return dehydrate(\n parent[key],\ndiff --git a\/packages\/react-devtools-shell\/src\/app\/ToDoList\/ListItem.js b\/packages\/react-devtools-shell\/src\/app\/ToDoList\/ListItem.js\nindex f29e8fe418..549d15c31e 100644\n--- a\/packages\/react-devtools-shell\/src\/app\/ToDoList\/ListItem.js\n+++ b\/packages\/react-devtools-shell\/src\/app\/ToDoList\/ListItem.js\n@@ -46,4 +46,4 @@ function ListItem({item, removeItem, toggleItem}: Props) {\n );\n }\n \n-export default (memo(ListItem): React.ComponentType);\n+export default (memo(ListItem): component(...props: Props));\ndiff --git a\/packages\/react-devtools-timeline\/src\/import-worker\/preprocessData.js b\/packages\/react-devtools-timeline\/src\/import-worker\/preprocessData.js\nindex 5dc0423b08..cefcd1e7f4 100644\n--- a\/packages\/react-devtools-timeline\/src\/import-worker\/preprocessData.js\n+++ b\/packages\/react-devtools-timeline\/src\/import-worker\/preprocessData.js\n@@ -123,7 +123,7 @@ function updateLaneToLabelMap(\n \n let profilerVersion = null;\n \n-function getLastType(stack: $PropertyType) {\n+function getLastType(stack: ProcessorState['measureStack']) {\n if (stack.length > 0) {\n const {type} = stack[stack.length - 1];\n return type;\n@@ -131,7 +131,7 @@ function getLastType(stack: $PropertyType) {\n return null;\n }\n \n-function getDepth(stack: $PropertyType) {\n+function getDepth(stack: ProcessorState['measureStack']) {\n if (stack.length > 0) {\n const {depth, type} = stack[stack.length - 1];\n return type === 'render-idle' ? depth : depth + 1;\n@@ -180,7 +180,7 @@ function markWorkCompleted(\n type: ReactMeasureType,\n stopTime: Milliseconds,\n currentProfilerData: TimelineData,\n- stack: $PropertyType,\n+ stack: ProcessorState['measureStack'],\n ) {\n if (stack.length === 0) {\n console.error(\n@@ -214,7 +214,7 @@ function markWorkCompleted(\n \n function throwIfIncomplete(\n type: ReactMeasureType,\n- stack: $PropertyType,\n+ stack: ProcessorState['measureStack'],\n ) {\n const lastIndex = stack.length - 1;\n if (lastIndex >= 0) {\ndiff --git a\/packages\/react-devtools-timeline\/src\/types.js b\/packages\/react-devtools-timeline\/src\/types.js\nindex c28c78d88c..7ba6f935f2 100644\n--- a\/packages\/react-devtools-timeline\/src\/types.js\n+++ b\/packages\/react-devtools-timeline\/src\/types.js\n@@ -79,7 +79,7 @@ export type SchedulingEvent =\n | ReactScheduleRenderEvent\n | ReactScheduleStateUpdateEvent\n | ReactScheduleForceUpdateEvent;\n-export type SchedulingEventType = $PropertyType;\n+export type SchedulingEventType = SchedulingEvent['type'];\n \n export type ReactMeasureType =\n | 'commit'\ndiff --git a\/packages\/react-markup\/src\/ReactMarkupServer.js b\/packages\/react-markup\/src\/ReactMarkupServer.js\nindex 34d234b0be..5f69c3d44a 100644\n--- a\/packages\/react-markup\/src\/ReactMarkupServer.js\n+++ b\/packages\/react-markup\/src\/ReactMarkupServer.js\n@@ -47,7 +47,7 @@ import {\n type ReactMarkupNodeList =\n \/\/ This is the intersection of ReactNodeList and ReactClientValue minus\n \/\/ Client\/ServerReferences.\n- | React$Element>\n+ | component(...props: any)\n | LazyComponent\n | React$Element\n | string\ndiff --git a\/packages\/react-reconciler\/src\/ReactTestSelectors.js b\/packages\/react-reconciler\/src\/ReactTestSelectors.js\nindex de3e95c281..ec30b2112b 100644\n--- a\/packages\/react-reconciler\/src\/ReactTestSelectors.js\n+++ b\/packages\/react-reconciler\/src\/ReactTestSelectors.js\n@@ -48,7 +48,7 @@ type Type = symbol | number;\n \n type ComponentSelector = {\n $$typeof: Type,\n- value: React$ComponentType,\n+ value: component(),\n };\n \n type HasPseudoClassSelector = {\n@@ -79,7 +79,7 @@ type Selector =\n | TestNameSelector;\n \n export function createComponentSelector(\n- component: React$ComponentType,\n+ component: component(),\n ): ComponentSelector {\n return {\n $$typeof: COMPONENT_TYPE,\ndiff --git a\/packages\/react-server\/src\/ReactFlightServer.js b\/packages\/react-server\/src\/ReactFlightServer.js\nindex b8b3af14d5..440748ca2f 100644\n--- a\/packages\/react-server\/src\/ReactFlightServer.js\n+++ b\/packages\/react-server\/src\/ReactFlightServer.js\n@@ -476,7 +476,7 @@ type ReactJSONValue =\n \/\/ Serializable values\n export type ReactClientValue =\n \/\/ Server Elements and Lazy Components are unwrapped on the Server\n- | React$Element>\n+ | React$Element\n | LazyComponent\n \/\/ References are passed by their value\n | ClientReference\ndiff --git a\/packages\/react\/index.development.js b\/packages\/react\/index.development.js\nindex b4c0632b7f..595135e606 100644\n--- a\/packages\/react\/index.development.js\n+++ b\/packages\/react\/index.development.js\n@@ -8,8 +8,6 @@\n *\/\n \n \/\/ Keep in sync with https:\/\/github.com\/facebook\/flow\/blob\/main\/lib\/react.js\n-export type ComponentType<-P> = React$ComponentType
  ;\n-export type AbstractComponent<-Config> = React$AbstractComponent;\n export type ElementType = React$ElementType;\n export type Element<+C> = React$Element;\n export type Key = React$Key;\ndiff --git a\/packages\/react\/index.js b\/packages\/react\/index.js\nindex 4eb8f2dfc2..cbeea0d28b 100644\n--- a\/packages\/react\/index.js\n+++ b\/packages\/react\/index.js\n@@ -8,8 +8,6 @@\n *\/\n \n \/\/ Keep in sync with https:\/\/github.com\/facebook\/flow\/blob\/main\/lib\/react.js\n-export type ComponentType<-P> = React$ComponentType
  ;\n-export type AbstractComponent<-Config> = React$AbstractComponent;\n export type ElementType = React$ElementType;\n export type Element<+C> = React$Element;\n export type MixedElement = React$Element;\ndiff --git a\/yarn.lock b\/yarn.lock\nindex a4ba51b2c9..880f442826 100644\n--- a\/yarn.lock\n+++ b\/yarn.lock\n@@ -9298,12 +9298,12 @@ flatted@^3.2.9:\n resolved \"https:\/\/registry.yarnpkg.com\/flatted\/-\/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a\"\n integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG\/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==\n \n-flow-bin@^0.265:\n- version \"0.265.3\"\n- resolved \"https:\/\/registry.yarnpkg.com\/flow-bin\/-\/flow-bin-0.265.3.tgz#cbaad2115f4622e34920981dc79949824c27f421\"\n- integrity sha512-08PjO2kjuQxy8MxYJNCzmgRpAe1uqTf7kQ+U32QTavRzTD\/7IJASYKFEEvCkVNHlhSy8CTJsN+AQdHsXVqChIw==\n+flow-bin@^0.266:\n+ version \"0.266.1\"\n+ resolved \"https:\/\/registry.yarnpkg.com\/flow-bin\/-\/flow-bin-0.266.1.tgz#8939be6fbd681c4ef8dc4873b22f4b79be76cb0a\"\n+ integrity sha512-c1lg1E8SDcuPSkrOeH0JTcNKMZOzXvqX2DuuXJ0amZec15uyuIi8QlGTO3OzYssMT\/kwFdo5vviJqSUI\/BNFbw==\n \n-flow-remove-types@^2.265:\n+flow-remove-types@^2.266:\n version \"2.279.0\"\n resolved \"https:\/\/registry.yarnpkg.com\/flow-remove-types\/-\/flow-remove-types-2.279.0.tgz#3a3388d9158eba0f82c40d80d31d9640b883a3f5\"\n integrity sha512-bPFloMR\/A2b\/r\/sIsf7Ix0LaMicCJNjwhXc4xEEQVzJCIz5u7C7XDaEOXOiqveKlCYK7DcBNn6R01Cbbc9gsYA==\n","parents":["d260b0d8b8452cb19dc13a3a2ef8bca6cba58d1d"],"body":"- replace `$ElementType` and `$PropertyType` with `T[K]` accesses.\n- Use component types"}

dillon1000/react

Files changed