[pull] main from facebook:main

.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',
@@ -567,6 +565,7 @@ module.exports = {
     BigInt: 'readonly',
     BigInt64Array: 'readonly',
     BigUint64Array: 'readonly',
+    CacheType: 'readonly',
     Class: 'readonly',
     ClientRect: 'readonly',
     CopyInspectedElementPath: 'readonly',
@@ -586,9 +585,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',

flow-typed/environments/node.js

@@ -3236,7 +3236,7 @@ declare module 'util' {
   declare class TextDecoder {
     constructor(
       encoding?: string,
-      options: {
+      options?: {
         fatal?: boolean,
         ignoreBOM?: boolean,
         ...
@@ -3253,8 +3253,12 @@ declare module 'util' {
 
   declare class TextEncoder {
     constructor(): void;
-    encode(input?: string): Uint8Array;
-    encoding: string;
+    encode(input: string): Uint8Array;
+    encodeInto(
+      input: string,
+      buffer: Uint8Array
+    ): {written: number, read: number};
+    encoding: 'utf-8';
   }
 
   declare var types: {

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.263",
-    "flow-remove-types": "^2.263",
+    "flow-bin": "^0.274",
+    "flow-remove-types": "^2.274",
     "flow-typed": "^4.1.1",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",

packages/internal-test-utils/enqueueTask.js

@@ -11,6 +11,7 @@ const {MessageChannel} = require('node:worker_threads');
 
 export default function enqueueTask(task: () => void): void {
   const channel = new MessageChannel();
+  // $FlowFixMe[prop-missing]
   channel.port1.onmessage = () => {
     channel.port1.close();
     task();

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);
   }

packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -1317,9 +1317,9 @@ export function attach(
     if (componentLogsEntry === undefined) {
       componentLogsEntry = {
         errors: new Map(),
-        errorsCount: 0,
+        errorsCount: 0 as number,
         warnings: new Map(),
-        warningsCount: 0,
+        warningsCount: 0 as number,
       };
       fiberToComponentLogsMap.set(fiber, componentLogsEntry);
     }
@@ -6705,7 +6705,7 @@ export function attach(
     if (isMostRecentlyInspectedElement(id) && !forceFullData) {
       if (!hasElementUpdatedSinceLastInspected) {
         if (path !== null) {
-          let secondaryCategory = null;
+          let secondaryCategory: 'suspendedBy' | 'hooks' | null = null;
           if (path[0] === 'hooks') {
             secondaryCategory = 'hooks';
           }

packages/react-devtools-shared/src/backend/flight/renderer.js

@@ -118,9 +118,9 @@ export function attach(
     if (componentLogsEntry === undefined) {
       componentLogsEntry = {
         errors: new Map(),
-        errorsCount: 0,
+        errorsCount: 0 as number,
         warnings: new Map(),
-        warningsCount: 0,
+        warningsCount: 0 as number,
       };
       componentInfoToComponentLogsMap.set(componentInfo, componentLogsEntry);
     }

packages/react-devtools-shared/src/backend/profilingHooks.js

@@ -278,6 +278,7 @@ export function createProfilingHooks({
 
     const top = currentReactMeasuresStack.pop();
     // $FlowFixMe[incompatible-type]
+    // $FlowFixMe[incompatible-use]
     if (top.type !== type) {
       console.error(
         'Unexpected type "%s" completed at %sms before "%s" completed.',

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(

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());

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
+));

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());

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
+));

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
+));

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,

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());

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
+));

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());

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);
 

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) {

packages/react-devtools-shared/src/hookNamesCache.js

@@ -103,7 +103,7 @@ export function loadHookNames(
 
     let timeoutID: $FlowFixMe | null;
     let didTimeout = false;
-    let status = 'unknown';
+    let status: 'success' | 'error' | 'timeout' | 'unknown' = 'unknown';
     let resolvedHookNames: HookNames | null = null;
 
     const wake = () => {

packages/react-devtools-shared/src/hooks/parseHookNames/loadSourceAndMetadata.js

@@ -64,7 +64,7 @@ import type {FetchFileWithCaching} from 'react-devtools-shared/src/devtools/view
 
 // Prefer a cached albeit stale response to reduce download time.
 // We wouldn't want to load/parse a newer version of the source (even if one existed).
-const FETCH_OPTIONS = {cache: 'force-cache'};
+const FETCH_OPTIONS = {cache: 'force-cache' as CacheType};
 
 const MAX_SOURCE_LENGTH = 100_000_000;
 

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],

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));