Update Flow to 0.266 (#34271)

kassens · web-flow · commit 05addfc6631c · 2025-08-22T15:46:41.000-04:00
- replace `$ElementType` and `$PropertyType` with `T[K]` accesses.
- Use component types
diff --git 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
@@ -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
@@ -52,7 +52,7 @@ export function initialize(
     bridge?: FrontendBridge,
     store?: Store,
   } = {},
-): React.ComponentType<Props> {
+): 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
@@ -314,7 +314,7 @@ class Bridge<
 
   send<EventName: $Keys<OutgoingEvents>>(
     event: EventName,
-    ...payload: $ElementType<OutgoingEvents, EventName>
+    ...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
@@ -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
@@ -386,6 +386,6 @@ function HookView({
   }
 }
 
-export default (React.memo(
-  InspectedElementHooksTree,
-): React.ComponentType<HookViewProps>);
+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
@@ -115,4 +115,4 @@ function EditorPane({selectedSource}: Props) {
     </div>
   );
 }
-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
@@ -132,7 +132,6 @@ function CommitFlamegraphListItem({data, index, style}: Props): React.Node {
   );
 }
 
-export default (memo(
-  CommitFlamegraphListItem,
-  areEqual,
-): React.ComponentType<Props>);
+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
@@ -79,7 +79,6 @@ function CommitRankedListItem({data, index, style}: Props) {
   );
 }
 
-export default (memo(
-  CommitRankedListItem,
-  areEqual,
-): React.ComponentType<Props>);
+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
@@ -38,34 +38,38 @@ type HookProps = {
   hookNames: Map<string, string> | null,
 };
 
-const Hook: React.AbstractComponent<HookProps> = 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]);
-
-  return (
-    <ul className={styles.Hook}>
-      <li>
-        {hook.id !== null && (
-          <span className={styles.PrimitiveHookNumber}>
-            {String(hook.id + 1)}
+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 (
+      <ul className={styles.Hook}>
+        <li>
+          {hook.id !== null && (
+            <span className={styles.PrimitiveHookNumber}>
+              {String(hook.id + 1)}
+            </span>
+          )}
+          <span
+            className={
+              hook.id !== null ? styles.PrimitiveHookName : styles.Name
+            }>
+            {hook.name}
+            {hookName && <span className={styles.HookName}>({hookName})</span>}
           </span>
-        )}
-        <span
-          className={hook.id !== null ? styles.PrimitiveHookName : styles.Name}>
-          {hook.name}
-          {hookName && <span className={styles.HookName}>({hookName})</span>}
-        </span>
-        {hook.subHooks?.map((subHook, index) => (
-          <Hook key={hook.id} hook={subHook} hookNames={hookNames} />
-        ))}
-      </li>
-    </ul>
-  );
-});
+          {hook.subHooks?.map((subHook, index) => (
+            <Hook key={hook.id} hook={subHook} hookNames={hookNames} />
+          ))}
+        </li>
+      </ul>
+    );
+  },
+);
 
 const shouldKeepHook = (
   hook: HooksNode,
@@ -105,12 +109,12 @@ const filterHooks = (
 
 type Props = {|
   fiberID: number,
-  hooks: $PropertyType<ChangeDescription, 'hooks'>,
-  state: $PropertyType<ChangeDescription, 'state'>,
+  hooks: ChangeDescription['hooks'],
+  state: ChangeDescription['state'],
   displayMode?: 'detailed' | 'compact',
 |};
 
-const HookChangeSummary: React.AbstractComponent<Props> = 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
@@ -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
@@ -96,7 +96,6 @@ function SnapshotCommitListItem({data: itemData, index, style}: Props) {
   );
 }
 
-export default (memo(
-  SnapshotCommitListItem,
-  areEqual,
-): React.ComponentType<Props>);
+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
@@ -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
@@ -17,8 +17,8 @@ import ThemeProvider from './ThemeProvider';
 export type Props = {portalContainer?: Element, ...};
 
 export default function portaledContent(
-  Component: React$ComponentType<any>,
-): React$ComponentType<any> {
+  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
@@ -12,7 +12,7 @@ export default class EventEmitter<Events: Object> {
 
   addListener<Event: $Keys<Events>>(
     event: Event,
-    listener: (...$ElementType<Events, Event>) => any,
+    listener: (...Events[Event]) => any,
   ): void {
     const listeners = this.listenersMap.get(event);
     if (listeners === undefined) {
@@ -25,10 +25,7 @@ export default class EventEmitter<Events: Object> {
     }
   }
 
-  emit<Event: $Keys<Events>>(
-    event: Event,
-    ...args: $ElementType<Events, Event>
-  ): void {
+  emit<Event: $Keys<Events>>(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
@@ -133,7 +133,7 @@ export function dehydrate(
   path: Array<string | number>,
   isPathAllowed: (path: Array<string | number>) => boolean,
   level: number = 0,
-): $PropertyType<DehydratedData, 'data'> {
+): 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<DehydratedData, 'data'>,
+          [string]: DehydratedData['data'],
         } = {};
         getAllEnumerableKeys(data).forEach(key => {
           const name = key.toString();
@@ -616,7 +616,7 @@ function dehydrateKey(
   path: Array<string | number>,
   isPathAllowed: (path: Array<string | number>) => boolean,
   level: number = 0,
-): $PropertyType<DehydratedData, 'data'> {
+): 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
@@ -46,4 +46,4 @@ function ListItem({item, removeItem, toggleItem}: Props) {
   );
 }
 
-export default (memo(ListItem): React.ComponentType<Props>);
+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
@@ -123,15 +123,15 @@ function updateLaneToLabelMap(
 
 let profilerVersion = null;
 
-function getLastType(stack: $PropertyType<ProcessorState, 'measureStack'>) {
+function getLastType(stack: ProcessorState['measureStack']) {
   if (stack.length > 0) {
     const {type} = stack[stack.length - 1];
     return type;
   }
   return null;
 }
 
-function getDepth(stack: $PropertyType<ProcessorState, 'measureStack'>) {
+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<ProcessorState, 'measureStack'>,
+  stack: ProcessorState['measureStack'],
 ) {
   if (stack.length === 0) {
     console.error(
@@ -214,7 +214,7 @@ function markWorkCompleted(
 
 function throwIfIncomplete(
   type: ReactMeasureType,
-  stack: $PropertyType<ProcessorState, 'measureStack'>,
+  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
@@ -79,7 +79,7 @@ export type SchedulingEvent =
   | ReactScheduleRenderEvent
   | ReactScheduleStateUpdateEvent
   | ReactScheduleForceUpdateEvent;
-export type SchedulingEventType = $PropertyType<SchedulingEvent, 'type'>;
+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
@@ -47,7 +47,7 @@ import {
 type ReactMarkupNodeList =
   // This is the intersection of ReactNodeList and ReactClientValue minus
   // Client/ServerReferences.
-  | React$Element<React$ComponentType<any>>
+  | component(...props: any)
   | LazyComponent<ReactMarkupNodeList, any>
   | React$Element<string>
   | string
diff --git 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<empty>,
+  value: component(),
 };
 
 type HasPseudoClassSelector = {
@@ -79,7 +79,7 @@ type Selector =
   | TestNameSelector;
 
 export function createComponentSelector(
-  component: React$ComponentType<empty>,
+  component: component(),
 ): ComponentSelector {
   return {
     $$typeof: COMPONENT_TYPE,
diff --git 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$ComponentType<any>>
+  | React$Element<component(...props: any)>
   | LazyComponent<ReactClientValue, any>
   // References are passed by their value
   | ClientReference<any>
diff --git 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<P>;
-export type AbstractComponent<-Config> = React$AbstractComponent<Config>;
 export type ElementType = React$ElementType;
 export type Element<+C> = React$Element<C>;
 export type Key = React$Key;
diff --git 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<P>;
-export type AbstractComponent<-Config> = React$AbstractComponent<Config>;
 export type ElementType = React$ElementType;
 export type Element<+C> = React$Element<C>;
 export type MixedElement = React$Element<ElementType>;
diff --git 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==
