Update Flow to 0.266 (#34271)

- replace `$ElementType` and `$PropertyType` with `T[K]` accesses. - Use component types
2026-01-15 12:15:22 +00:00 · 2025-08-22 15:46:41 -04:00
parent d260b0d8b8
commit 05addfc663
25 changed files with 75 additions and 85 deletions
--- 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',
--- 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",
--- 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);
  }
--- 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(
--- 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());
--- 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
+));
--- 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());
--- 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
+));
--- 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
+));
--- 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]);
+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)}
+    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,
--- 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());
--- 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
+));
--- 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());
--- 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);

--- 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) {
--- 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],
--- 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));
--- 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<ProcessorState, 'measureStack'>) {
+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<ProcessorState, 'measureStack'>) {
  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) {
--- 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'
--- 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
--- 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,
--- 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>
--- 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;
--- 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>;
--- 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==