Update RDT fork for 2024-07

[markerikson]

This PR:

• Updates the RDT built bundle with changes for the last month, built from replayio/react@57ff604 (#15)

References with reviewable changes:

• Upstream RDT changes: [DO NOT MERGE] React DevTools-related code changes, 2024-06 - 2024-07 react#16
• Flow/Lint fixes: Fix Flow and lint issues in Replay RDT fork react#17

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
devtools	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 2, 2024 9:53pm

[replay-io]

E2E Tests

Status	Complete ↗︎
Commit	07ba759
Results	⚠️ 1 Flaky jump-to-code-02: Redux J2C functionality (Replay 1, Replay 2) ✅ 108 Passed async-stack: should detect async stacks outside the focus window authenticated/comments-01: Test add, edit, and delete comment functionality authenticated/comments-02: Test shared comments and replies (Replay 1, Replay 2) authenticated/comments-03: Comment previews authenticated/logpoints-01: Shared logpoints functionality (Replay 1, Replay 2) authenticated/passport-01: Time travel authenticated/passport-02: Infrared inspection authenticated/passport-03: Swiss army knife authenticated/passport-04: Multiplayer breakpoints-01: Test basic breakpoint functionality breakpoints-02: Test unhandled divergence while evaluating at a breakpoint breakpoints-03: Test stepping forward through breakpoints when rewound before the first one breakpoints-04: catch, finally, generators, and async/await breakpoints-05: Test interaction of breakpoints with debugger statements breakpoints-06: Test log point in a sourcemapped file breakpoints-07: rewind and seek using command bar and console messages breakpoints-08: should be temporarily disabled console_async: support console evaluations in async frames console_dock: Should show the correct docking behavior for recordings with video console_errors: Test that errors and warnings from various sources are shown in the console console_eval: support console evaluations console_warp-01: should support warping to console messages console_warp-02: support pausing, warping, stepping and evaluating console messages console-expressions-01: should cache input eager eval and terminal expressions per instance cypress-01: Basic Test Suites panel functionality cypress-02: Test Step timeline behavior cypress-03: Test Step interactions cypress-04: Test Step buttons and menu item cypress-05: Test DOM node preview on user action step hover deleted-recording: Show error message for deleted recording elements-search: Element panel should support basic and advanced search modes fe-1875 :: verify that steps go to the right point in time file-search-01: should search files focus_mode-01: should filter messages as regions based on the active focus mode highlighter: element highlighter works everywhere inspector-computed-01: Basic computed styles can be viewed inspector-computed-02: Complex computed styles can be viewed inspector-elements-01: Basic DOM tree node display inspector-elements-02_node-picker: element picker and iframe behavior inspector-elements-03: Nested node picker and selection behavior inspector-elements-04: Keyboard shortcuts should select the right DOM nodes inspector-elements-05_search: element picker and iframe behavior inspector-rules-01: Basic CSS rules should be viewed inspector-rules-03: Shorthand CSS rules should be viewed jump-to-code-01: Test basic jumping functionality logpoints-01: log-points appear in the correct order and allow time warping logpoints-02: conditional log-points logpoints-03: should display event properties in the console logpoints-04: should display exceptions in the console logpoints-05: should auto-complete based on log point location logpoints-06: should be temporarily disabled logpoints-07: should use the correct scope in auto-complete logpoints-08: should support jumping directly to a hit point via the capsule input logpoints-09: should support pending edits logpoints-10: too-many-points-to-find UX logpoints-11: too-many-points-to-run-analysis UX logpoints-12: should auto save when removing conditions network-01: should filter requests by type and text network-02: should show details for the selected request network-03: should sync and display the current time in relation to the network requests node_console_dock: Should show the correct docking behavior for recordings without video node_console-01: Basic node console behavior node_console-02: uncaught exceptions should show up node_control_flow: catch, finally, generators, and async/await node_logpoint-01: Basic node logpoints node_object_preview: Showing console objects in node node_quick_open_modal-01: Test basic searching functionality node_spawn: Basic subprocess spawning node_stepping-01: Test stepping in async frames and async call stacks node_worker-01: make sure node workers don't cause crashes object_preview-01: expressions in the console after time warping object_preview-02: should allow objects in scope to be inspected object_preview-03: Test previews when switching between frames and stepping object_preview-04: Test scope mapping and switching between generated/original sources object_preview-05: Should support logging objects as values object_preview-06: HTML elements object_preview-07: inspect objects in the console while paused somewhere else object_preview-08: should render ellipsis for collapsed objects with truncated properties playwright-01: Basic Test Suites panel functionality playwright-02: Test Step timeline behavior playwright-03: Test Step interactions playwright-04: Test Step buttons and menu item playwright-05: Test DOM node previews on user action step hover react_devtools-01: Basic RDT behavior react_devtools-02: RDT integrations (Chromium) react_devtools-03: process and display multiple React versions in page react_devtools-04: Component selection is maintained when seeking to a new point redux_devtools: Test Redux DevTools. repaint-01: repaints the screen screen when stepping over code that modifies the DOM repaint-02: repaints on hover repaint-03: repaints on seek repaint-04: prefers nearest (<=) paint when seeking between paints repaint-05: prefers current time if pause creation failed outside of the focus window repaint-06: repaints the screen screen when stepping over code that modifies the DOM resizable-panels-01: Left side Toolbar and Video should be collapsible restart-session: restart debugging session scopes_rerender: Test that scopes are rerendered session-destroyed: errors caused by session failure should bubble to the root source-line-highlights: Test source line highlighting sourcemap_stacktrace: Test that stacktraces are sourcemapped stacking: Element highlighter selects the correct element when they overlap stepping-01: Test basic step-over/back functionality stepping-02: Test fixes for some simple stepping bugs stepping-03: Stepping past the beginning or end of a frame should act like a step-out stepping-04: Test stepping in a frame other than the top frame stepping-05: Test stepping in pretty-printed code stepping-06: Test stepping in async frames and async call stacks stepping-07: Test quick stepping using the keyboard

[markerikson]

Looks like we lost the DEVTOOLS_PLACEHOLDER variable somewhere in the merge / rebase process.

Scratch that, it's in our devtools code_...

[markerikson]

Well, this is clearly busted somehow.

It may have something to do with the comments I added to react_backend_compact.js, but I'm still trying to sort that out locally :(

[bvaughn]

Gonna stamp to unblock even though CI is busted

[markerikson]

For posterity's sake, what I learned:

Our code:

const rdtInjectionExpression = `(${installReactDevToolsIntoPause})()`
  .replace("INSTALL_HOOK_PLACEHOLDER", `(${injectGlobalHookSource})`)
  .replace("DEVTOOLS_PLACEHOLDER", `(${reactDevtoolsBackendSource})`);

console.log("RDT expression: ", rdtInjectionExpression);

Snipped output from the minified RDT bundle:

=t)return null;const{_debugOwner:n,stateNode:r,key:o,memoizedProps:i,memoizedState:s,dependencies:l,tag:a,type:u}=t,c=yt(t),f=!(a!==I&&a!==ne&&a!==C||!s&&!l),d=!f&&a!==w,h=g(u);let y=!1,v=null;if(a===_||a===I||a===R||a===A||a===F||a===L||a===C||a===ne)y=!0,r&&null!=r.context&&(c===DEVTOOLS_PLACEHOLDER&!u.contextTypes&&!u.contextType||(v=r.context));else if(h!==$e&&h!==ze||void 0===u._context&&u.Provider===u){if(h===Je){const e=u._context;v=e._currentValue||null;let n=t.return;for(;null!==n;){const t=n.type;if(g(t)===ze&&t===e){v=n.memoizedProps.value;break

prettified minified code:

            (y = !0),
              r &&
                null != r.context &&
                ((c === $ && !u.contextTypes && !u.contextType) ||
                  (v = r.context));

so that became:

(c===DEVTOOLS_PLACEHOLDER&!u.contextTypes&&

IT'S REPLACING THE DOLLAR SIGN WITH THE SEARCH TEXT?!?!?!?!?

more specifically:

• The minifier for this build of the RDT is spitting out a $ as a minified variable name
• that's fine-ish if the code still has whitespace
  = but with whitespace stripped, c == $ && whatever becomes c==$&&
• and $& is a magic replacement token

and the answer is to pass a function as the replacer rather than the string directly:

const rdtInjectionExpression = `(${installReactDevToolsIntoPause})()`
  .replace("INSTALL_HOOK_PLACEHOLDER", () => `(${injectGlobalHookSource})`)
  .replace("DEVTOOLS_PLACEHOLDER2", () => `(${reactDevtoolsBackendSource})`);

because that apparently ignores special characters:

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#specifying_a_function_as_the_replacement