Update react and react-dom to latest experimental release

next.config.js

@@ -1,6 +1,5 @@
 const { patchWebpackConfig } = require("next-global-css");
 const { RetryChunkLoadPlugin } = require("webpack-retry-chunk-load-plugin");
-const { WebpackReactSourcemapsPlugin } = require("@acemarke/react-prod-sourcemaps");
 
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
@@ -139,8 +138,6 @@ const baseNextConfig = {
       );
     }
 
-    config.plugins.push(WebpackReactSourcemapsPlugin({ debug: false }));
-
     // Allow CSS imported from `node_modules`, to work around an error
     // from importing `<Editor>` from `@redux-devtools/ui`
     patchWebpackConfig(config, { isServer });
@@ -150,7 +147,7 @@ const baseNextConfig = {
     };
 
     const sourceMapRegExp =
-      /node_modules.+(immer|@reduxjs|react-resizable-panels|react-window|suspense|use-context-menu).+\.js$/;
+      /node_modules.+(immer|@reduxjs|react-resizable-panels|react|react-dom|react-window|suspense|use-context-menu).+\.js$/;
 
     config.module.rules.push({
       test: sourceMapRegExp,

packages/e2e-tests/tests/logpoints-10_too_many_points_to_find.test.ts

@@ -11,8 +11,9 @@ import { verifyFocusModeVisible } from "../helpers/timeline";
 import test from "../testFixtureCloneRecording";
 
 // We need > 10k hits
+// Line 150 has >20k hits
 const sourceUrl = "react-dom.production.js";
-const lineNumber = 149;
+const lineNumber = 150;
 
 // trunk-ignore(gitleaks/generic-api-key)
 test.use({ exampleKey: "breakpoints-01" });

packages/e2e-tests/tests/logpoints-11_too_many_points_to_run_analysis.test.ts

@@ -11,9 +11,9 @@ import { getFocusBeginTime, getFocusEndTime, setFocusRange } from "../helpers/ti
 import test, { expect } from "../testFixtureCloneRecording";
 
 // We need 500...10k hits
-// Line 44 has 4.9k hits
+// Line 248 has 847 hits
 const sourceUrl = "react-dom.production.js";
-const lineNumber = 251;
+const lineNumber = 248;
 
 // trunk-ignore(gitleaks/generic-api-key)
 test.use({ exampleKey: "breakpoints-01" });

packages/e2e-tests/tests/react_devtools-02-integrations.test.ts

@@ -59,65 +59,9 @@ test("react_devtools-02: RDT integrations (Chromium)", async ({
   const componentNames = await getAllVisibleComponentNames(page);
 
   /*
-    In production, the first 20-ish component names normally look like this (flattened):
-    [
-      "ea", 
-      "J", 
-      "X", 
-      "z", 
-      "Context.Provider", 
-      "Context.Provider", 
-      "Anonymous", 
-      "Context.Provider", 
-      "Context.Provider", 
-      "Context.Provider", 
-      "Context.Provider", 
-      "n8", 
-      "O", 
-      "Anonymous", 
-      "Anonymous"
-      "Auth0Provider", 
-      "iU",   
-      "Context.Provider", 
-      "Context.Consumer", 
-      "da", 
-      "dn"
-      "Anonymous", 
-      "Anonymous"
-    ]
-
-    In development, however, they are (minus dev-only components):
-
-    [
-      'Root',
-      'Head',
-      'AppContainer',
-      'Container',
-      'AppRouterContext.Provider',
-      'SearchParamsContext.Provider',
-      'PathnameContextProviderAdapter',
-      'PathnameContext.Provider',
-      'RouterContext.Provider',
-      'HeadManagerContext.Provider',
-      'ImageConfigContext.Provider',
-      'App',
-      'SystemProvider',
-      'Head',
-      'SideEffect',
-      'Auth0Provider',
-      'Auth0Provider', // twice? wut?
-      'Context.Provider',
-      'Context.Consumer',
-      'SSRRecordingPage',
-      'RecordingHead',
-      'Head',
-      'SideEffect'
-    ]
-
-
-    In practice, the routine's name processing currently lose the specific context names, 
-    and a couple components aren't getting their names mapped.
-    But, assuming the routine name mapping worked, we _should_ end up with this:
+    The first 20-ish component names normally look like the list below (flattened)
+    In practice, the routine's name processing currently lose the specific context names,
+    but assuming the routine name mapping worked, we _should_ end up with this:
   */
   const expectedComponentNames = [
     "Root",
@@ -136,7 +80,7 @@ test("react_devtools-02: RDT integrations (Chromium)", async ({
     "Head",
     "SideEffect",
     "Auth0Provider",
-    "iN",
+    "Auth0Provider",
     "Context.Provider",
     "Context.Consumer",
     "SSRRecordingPage",
@@ -240,18 +184,18 @@ test("react_devtools-02: RDT integrations (Chromium)", async ({
   // Re-select "App" just so we're back at the top
   await getReactComponents(page).first().click();
 
-  // Should render our `<LazyOffscreen>` components, but _not_ `<Offscreen>`,
+  // Should render our `<LazyActivity>` components, but _not_ `<Activity>`,
   // because RDT already filters those out by default
-  debugPrint(page, `Checking rendering of <Offscreen> components`);
+  debugPrint(page, `Checking rendering of <Activity> components`);
 
-  await searchComponents(page, "Offscreen");
+  await searchComponents(page, "Activity");
   await verifySearchResults(page, {
     currentNumber: 1,
     totalNumber: 6,
   });
 
   const offscreenSearchComponentNames = await getAllVisibleComponentNames(page);
   expect(offscreenSearchComponentNames.length).toBeGreaterThan(0);
-  expect(offscreenSearchComponentNames.includes("LazyOffscreen")).toBe(true);
-  expect(offscreenSearchComponentNames.includes("Offscreen")).toBe(false);
+  expect(offscreenSearchComponentNames.includes("LazyActivity")).toBe(true);
+  expect(offscreenSearchComponentNames.includes("Activity")).toBe(false);
 });

packages/replay-next/components/Expandable.tsx

@@ -11,7 +11,7 @@ import React, {
 import { ExpandablesContext } from "replay-next/src/contexts/ExpandablesContext";
 
 import Icon from "./Icon";
-import LazyOffscreen from "./LazyOffscreen";
+import LazyActivity from "./LazyActivity";
 import styles from "./Expandable.module.css";
 
 export type RenderChildrenFunction = () => ReactNode;
@@ -117,14 +117,14 @@ export default function Expandable({
         {header}
       </span>
 
-      <LazyOffscreen mode={isOpen ? "visible" : "hidden"}>
+      <LazyActivity mode={isOpen ? "visible" : "hidden"}>
         <span
           className={`${childrenClassName} ${styles.Children}`}
           data-test-name="ExpandableChildren"
         >
           {children}
         </span>
-      </LazyOffscreen>
+      </LazyActivity>
     </span>
   );
 }

packages/replay-next/components/LazyOffscreen.tsx → packages/replay-next/components/LazyActivity.tsx

@@ -1,11 +1,11 @@
-import { unstable_Offscreen as Offscreen, ReactNode, useEffect, useRef } from "react";
+import { unstable_Activity as Activity, ReactNode, useEffect, useRef } from "react";
 
-// Wrapper around the Offscreen API that defers rendering the Offscreen tree initially,
+// Wrapper around the Activity API that defers rendering the Activity tree initially,
 // until it's been explicitly marked as "visible".
 //
 // This allows UIs that make heavy use of Suspense (such as the Object Inspector)
 // to avoid sending a flood of protocol requests when initially mounted.
-export default function LazyOffscreen({
+export default function LazyActivity({
   children,
   mode,
 }: {
@@ -25,5 +25,5 @@ export default function LazyOffscreen({
     return null;
   }
 
-  return <Offscreen children={children} mode={mode} />;
+  return <Activity children={children} mode={mode} />;
 }

packages/replay-next/components/console/ConsoleRoot.tsx

@@ -1,8 +1,8 @@
 import classNames from "classnames";
 import {
+  unstable_Activity as Activity,
   KeyboardEvent,
   MouseEvent,
-  unstable_Offscreen as Offscreen,
   ReactNode,
   RefObject,
   Suspense,
@@ -93,7 +93,7 @@ function Console({
   // _If_ it's off initially, we want to completely skip rendering it, which
   // avoids making the "fetch events" calls during app startup to speed up loading.
   // But, if it's ever been shown and toggled off, continue rendering it
-  // inside the `<Offscreen>` to preserve state.
+  // inside the `<Activity>` to preserve state.
   const renderFilters = isMenuOpen || showFiltersByDefault || menuValueHasBeenToggled;
 
   const onKeyDown = (event: KeyboardEvent) => {
@@ -156,7 +156,7 @@ function Console({
       onKeyDown={onKeyDown}
     >
       <PanelGroup autoSaveId="ConsoleRoot" direction="horizontal">
-        <Offscreen mode={isMenuOpen ? "visible" : "hidden"}>
+        <Activity mode={isMenuOpen ? "visible" : "hidden"}>
           <>
             <Panel
               className={styles.LeftPanel}
@@ -189,7 +189,7 @@ function Console({
               <PanelResizeHandle className={styles.PanelResizeHandle} />
             </div>
           </>
-        </Offscreen>
+        </Activity>
 
         <Panel className={styles.RightPanel} defaultSize={75} id="console" minSize={50} order={2}>
           <div className={styles.RightColumnActionsRow}>

packages/replay-next/components/inspector/HTMLExpandable.tsx

@@ -8,7 +8,7 @@ import { ReactNode, Suspense, useContext, useState } from "react";
 import { ExpandablesContext } from "replay-next/src/contexts/ExpandablesContext";
 
 import Icon from "../Icon";
-import LazyOffscreen from "../LazyOffscreen";
+import LazyActivity from "../LazyActivity";
 import Loader from "../Loader";
 import HTMLChildrenRenderer from "./HTMLChildrenRenderer";
 import HTMLElementRenderer from "./values/HTMLElementRenderer";
@@ -78,7 +78,7 @@ export default function HTMLExpandable({
         />
       </span>
 
-      <LazyOffscreen mode={isOpen ? "visible" : "hidden"}>
+      <LazyActivity mode={isOpen ? "visible" : "hidden"}>
         <span className={styles.Children} data-test-name="ExpandableChildren">
           <Suspense fallback={<Loader />}>
             <HTMLChildrenRenderer object={object} path={path} pauseId={pauseId} />
@@ -94,7 +94,7 @@ export default function HTMLExpandable({
             showOpeningTag={false}
           />
         </span>
-      </LazyOffscreen>
+      </LazyActivity>
     </span>
   );
 }

packages/replay-next/components/sources/Source.tsx

@@ -78,7 +78,7 @@ function SourceRenderer({
 
   useLayoutEffect(
     () => () => {
-      // If a hover preview is visible when this Source is hidden for Offscreen
+      // If a hover preview is visible when this Source is hidden for Activity
       // make sure to clean it up so it doesn't remain visible.
       setHoveredState(null);
     },

packages/replay-next/components/sources/SourceList.tsx

@@ -93,7 +93,7 @@ export default function SourceList({
 
   useLayoutEffect(
     () => () => {
-      // The Offscreen API cleans up layout effects when hiding views.
+      // The Activity API cleans up layout effects when hiding views.
       // For our purposes, that's the same as an "unmount".
       hasMountedRef.current = false;
     },

packages/replay-next/components/sources/SourceListRowMouseEvents.tsx

@@ -122,7 +122,7 @@ export function SourceListRowMouseEvents({
     committedValuesRef.current.toggleBreakpoint = toggleBreakpoint;
   });
 
-  // Use a layout effect rather than a passive effect so event listeners will be removed if the parent Offscreen is hidden
+  // Use a layout effect rather than a passive effect so event listeners will be removed if the parent Activity is hidden
   useLayoutEffect(() => {
     const rowElement = document.querySelector(
       `[data-test-source-id="${sourceId}"] [data-test-name="SourceLine"][data-test-line-number="${lineNumber}"]`

packages/replay-next/components/sources/Sources.tsx

@@ -6,7 +6,7 @@ import { getSourceFileName } from "replay-next/src/utils/source";
 import { ReplayClientContext } from "shared/client/ReplayClientContext";
 
 import Icon from "../Icon";
-import LazyOffscreen from "../LazyOffscreen";
+import LazyActivity from "../LazyActivity";
 import Source from "./Source";
 import SourceFileNameSearch from "./SourceFileNameSearch";
 import {
@@ -147,12 +147,12 @@ function Sources() {
           {activeSourceIds.map(sourceId => {
             const source = getSourceSuspends(client, sourceId);
             return (
-              <LazyOffscreen
+              <LazyActivity
                 key={sourceId}
                 mode={sourceId === focusedSourceId ? "visible" : "hidden"}
               >
                 <Source source={source!} />
-              </LazyOffscreen>
+              </LazyActivity>
             );
           })}
         </div>