Skip to content

Update react and react-dom to latest experimental release - #10314

Merged
bvaughn merged 6 commits into
mainfrom
upgrade-react-experimental-package
Feb 13, 2024
Merged

Update react and react-dom to latest experimental release#10314
bvaughn merged 6 commits into
mainfrom
upgrade-react-experimental-package

Conversation

@bvaughn

@bvaughn bvaughn commented Feb 13, 2024 •
edited
Loading

Copy link
Copy Markdown
Contributor

This should allow us to remove the react-prod-sourcemaps Webpack plug-in, which is a step toward unblocking a potential Webpack to Turbo migration.

I think the biggest change on the React side was renaming unstable_Offscreen to unstable_Acitivy -> react/react#27640

  • Update react and react-dom packages
    • Replace all unstable_Offscreen references with unstable_Activity
  • Update next.config to include react and react-dom source-maps in bundle
    • Remove @acemarke/react-prod-sourcemaps Webpack plug-in
    • Verify production deploy (still) has source-maps for react and react-dom
  • Update breakpoints-01 golden recording to one created from this PR
    • Update logpoints-10 and logpoints-11 tests as needed to account for line number changes

@bvaughn
bvaughn requested review from hbenl and markerikson February 13, 2024 15:39
@vercel

vercel Bot commented Feb 13, 2024 •
edited
Loading

Copy link
Copy Markdown

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 Feb 13, 2024 7:42pm

@replay-io

replay-io Bot commented Feb 13, 2024 •
edited
Loading

Copy link
Copy Markdown

E2E Tests

Status Complete ↗︎
Commit ebc4e9c
Results
⚠️ 3 Flaky
  • fe-1875 :: verify that steps go to the right point in time (Replay 1, Replay 2)
  • playwright-04: Test Step buttons and menu item (Replay 1, Replay 2)
  • stepping-05_chromium: Test stepping in pretty-printed code (Replay 1, Replay 2)
    • ✅ 101 Passed
  • 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/new-test-suites/tests-01: basic tests
  • authenticated/new-test-suites/tests-02: test with no recording
  • authenticated/new-test-suites/tests-03: test ID in the URL
  • 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_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
  • 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-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-02: Sourcemapped 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-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
  • 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
  • playwright-01: Basic Test Suites panel functionality
  • playwright-02: Test Step timeline behavior
  • playwright-03: Test Step interactions
  • 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: repaints the screen screen when stepping over code that modifies the DOM
  • resizable-panels-01: Left side Toolbar and Video should be collapsible
  • restart debugging session
  • scopes_rerender: Test that scopes are rerendered
  • 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
  • test-suite-dashboard/test-runs-01: passed run in main branch with source
  • test-suite-dashboard/test-runs-02: failed run in temp branch without source
  • test-suite-dashboard/test-runs-03: flaky run in main branch with source
  • test-suite-dashboard/test-runs-04: test ID in the URL

    • @bvaughn
    bvaughn force-pushed the upgrade-react-experimental-package branch from 1fdfffc to a7eb514 Compare February 13, 2024 16:54
    @socket-security

    socket-security Bot commented Feb 13, 2024 •
    edited
    Loading

    Copy link
    Copy Markdown

    New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

    Package New capabilities Transitives Size Publisher
    npm/[email protected] environment +2 18.2 MB react-bot
    npm/[email protected] environment 0 648 kB react-bot

    🚮 Removed packages: npm/@acemarke/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

    View full report↗︎

    @bvaughn

    bvaughn commented Feb 13, 2024 •
    edited
    Loading

    Copy link
    Copy Markdown
    Contributor Author

    RDT 02 test is failing because of the Offscreen -> Activity rename. Going to see if I can update the golden recording to be based off of the test run from this branch.

    @bvaughn
    bvaughn force-pushed the upgrade-react-experimental-package branch from a7eb514 to b0adc07 Compare February 13, 2024 17:18
    @bvaughn

    bvaughn commented Feb 13, 2024 •
    edited
    Loading

    Copy link
    Copy Markdown
    Contributor Author

    Bummer. It looks like react/react-dom are missing source maps here.

    After updating the Next config regex, the latest deploy has the correct source-maps!

    @bvaughn

    bvaughn commented Feb 13, 2024

    Copy link
    Copy Markdown
    Contributor Author

    I think everything should be good to go now. One more CI run.

    @bvaughn
    bvaughn merged commit 336c141 into main Feb 13, 2024
    @bvaughn
    bvaughn deleted the upgrade-react-experimental-package branch February 13, 2024 19:49

    This branch was successfully deployed

    1 active deployment
    Preview — 566be836 Deployed Feb 13, 2024 by vercel[bot]
    View deployment
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

    Reviewers

    @markerikson markerikson markerikson approved these changes
    @replay-soc2 replay-soc2[bot] replay-soc2[bot] approved these changes
    @hbenl hbenl Awaiting requested review from hbenl

    Assignees

    No one assigned

    Labels

    None yet

    Projects

    None yet

    Milestone

    No milestone

    Development

    Successfully merging this pull request may close these issues.

    2 participants

    @bvaughn @markerikson