[pull] main from facebook:main

.eslintrc.js

@@ -583,8 +583,11 @@ module.exports = {
     mixin$Animatable: 'readonly',
     MouseEventHandler: 'readonly',
     NavigateEvent: 'readonly',
+    PerformanceMeasureOptions: 'readonly',
     PropagationPhases: 'readonly',
     PropertyDescriptor: 'readonly',
+    PropertyDescriptorMap: 'readonly',
+    Proxy$traps: 'readonly',
     React$Component: 'readonly',
     React$Config: 'readonly',
     React$Context: 'readonly',

package.json

@@ -74,15 +74,15 @@
     "eslint-plugin-react-internal": "link:./scripts/eslint-rules",
     "fbjs-scripts": "^3.0.1",
     "filesize": "^6.0.1",
-    "flow-bin": "^0.274",
-    "flow-remove-types": "^2.274",
+    "flow-bin": "^0.279.0",
+    "flow-remove-types": "^2.279.0",
     "flow-typed": "^4.1.1",
     "glob": "^7.1.6",
     "glob-stream": "^6.1.0",
     "google-closure-compiler": "^20230206.0.0",
     "gzip-size": "^5.1.1",
-    "hermes-eslint": "^0.25.1",
-    "hermes-parser": "^0.25.1",
+    "hermes-eslint": "^0.32.0",
+    "hermes-parser": "^0.32.0",
     "jest": "^29.4.2",
     "jest-cli": "^29.4.2",
     "jest-diff": "^29.4.2",

packages/eslint-plugin-react-hooks/package.json

@@ -41,7 +41,7 @@
   "dependencies": {
     "@babel/core": "^7.24.4",
     "@babel/parser": "^7.24.4",
-    "@babel/plugin-transform-private-methods": "^7.24.4",
+    "@babel/plugin-proposal-private-methods": "^7.18.6",
     "hermes-parser": "^0.25.1",
     "zod": "^3.22.4",
     "zod-validation-error": "^3.0.3"

packages/react-client/src/ReactFlightPerformanceTrack.js

@@ -153,7 +153,7 @@ export function logComponentAborted(
     const entryName =
       isPrimaryEnv || env === undefined ? name : name + ' [' + env + ']';
     if (__DEV__) {
-      const properties = [
+      const properties: Array<[string, string]> = [
         [
           'Aborted',
           'The stream was aborted before this Component finished rendering.',
@@ -215,7 +215,7 @@ export function logComponentErrored(
             String(error.message)
           : // eslint-disable-next-line react-internal/safe-string-coercion
             String(error);
-      const properties = [['Error', message]];
+      const properties: Array<[string, string]> = [['Error', message]];
       if (componentInfo.key != null) {
         addValueToProperties('key', componentInfo.key, properties, 0, '');
       }

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -789,7 +789,7 @@ const Dispatcher: DispatcherType = {
 
 // create a proxy to throw a custom error
 // in case future versions of React adds more hooks
-const DispatcherProxyHandler = {
+const DispatcherProxyHandler: Proxy$traps<DispatcherType> = {
   get(target: DispatcherType, prop: string) {
     if (target.hasOwnProperty(prop)) {
       // $FlowFixMe[invalid-computed-prop]

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

@@ -2217,7 +2217,7 @@ export function attach(
     }
     if (typeof instance.getClientRects === 'function') {
       // DOM
-      const result = [];
+      const result: Array<Rect> = [];
       const doc = instance.ownerDocument;
       const win = doc && doc.defaultView;
       const scrollX = win ? win.scrollX : 0;
@@ -7455,6 +7455,13 @@ export function attach(
   }
 
   function overrideSuspense(id: number, forceFallback: boolean) {
+    if (!supportsTogglingSuspense) {
+      // TODO:: Add getter to decide if overrideSuspense is available.
+      // Currently only available on inspectElement.
+      // Probably need a different affordance to batch since the timeline
+      // fallback is not the same as resuspending.
+      return;
+    }
     if (
       typeof setSuspenseHandler !== 'function' ||
       typeof scheduleUpdate !== 'function'

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js

@@ -223,7 +223,10 @@ function HookView({
   const hookDisplayName = hookName ? (
     <>
       {name}
-      {!!hookName && <span className={styles.HookName}>({hookName})</span>}
+      {
+        // $FlowFixMe[constant-condition]
+        !!hookName && <span className={styles.HookName}>({hookName})</span>
+      }
     </>
   ) : (
     name

packages/react-devtools-shared/src/devtools/views/ModalDialog.js

@@ -75,7 +75,7 @@ function dialogReducer(state: State, action: Action) {
             content: action.content,
             id: action.id,
             title: action.title || null,
-          },
+          } as Dialog,
         ],
       };
     default:

packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js

@@ -64,7 +64,7 @@ function getTooltipPosition(
     mouseY: number,
     width: number,
   },
-) {
+): {left: string, top: string} {
   const {height, mouseX, mouseY, width} = mousePosition;
   let top: number | string = 0;
   let left: number | string = 0;
@@ -108,7 +108,13 @@ function getMousePosition(
       }
     }
 
-    const {height, left, top, width} = targetContainer.getBoundingClientRect();
+    const {height, left, top, width} =
+      targetContainer.getBoundingClientRect() as {
+        height: number,
+        left: number,
+        top: number,
+        width: number,
+      };
 
     const mouseX = mouseEvent.clientX - left;
     const mouseY = mouseEvent.clientY - top;

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.css

@@ -110,6 +110,7 @@
   padding: 0.25rem;
   display: flex;
   flex-direction: row;
+  align-items: flex-start;
 }
 
 .Timeline {

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTab.js

@@ -20,6 +20,7 @@ import InspectedElement from '../Components/InspectedElement';
 import portaledContent from '../portaledContent';
 import styles from './SuspenseTab.css';
 import SuspenseRects from './SuspenseRects';
+import SuspenseTimeline from './SuspenseTimeline';
 import SuspenseTreeList from './SuspenseTreeList';
 import Button from '../Button';
 import typeof {SyntheticPointerEvent} from 'react-dom-bindings/src/events/SyntheticEvent';
@@ -46,10 +47,6 @@ type LayoutState = {
 };
 type LayoutDispatch = (action: LayoutAction) => void;
 
-function SuspenseTimeline() {
-  return <div className={styles.Timeline}>timeline</div>;
-}
-
 function ToggleTreeList({
   dispatch,
   state,
@@ -309,7 +306,9 @@ function SuspenseTab(_: {}) {
         <div className={styles.TreeView}>
           <div className={styles.TimelineWrapper}>
             <ToggleTreeList dispatch={dispatch} state={state} />
-            <SuspenseTimeline />
+            <div className={styles.Timeline}>
+              <SuspenseTimeline />
+            </div>
             <ToggleInspectedElement
               dispatch={dispatch}
               state={state}

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseTimeline.css

@@ -0,0 +1,20 @@
+.SuspenseTimelineSlider {
+  width: 100%;
+}
+
+.SuspenseTimelineMarkers {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.SuspenseTimelineMarkers > * {
+  flex: 1 1 0;
+  overflow: visible;
+  visibility: hidden;
+  width: 0
+}
+
+.SuspenseTimelineActiveMarker {
+  visibility: visible;
+}