Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update React to v17 #5793

Merged
merged 69 commits into from
Mar 31, 2021
Merged

Update React to v17 #5793

merged 69 commits into from
Mar 31, 2021

Conversation

swissspidy
Copy link
Collaborator

@swissspidy swissspidy commented Dec 22, 2020

Summary

To learn more about React 17:

React 17 blog post: https://reactjs.org/blog/2020/10/20/react-v17.html
Breaking changes: https://reactjs.org/blog/2020/08/10/react-v17-rc.html#other-breaking-changes
New JSX transform: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

Side effect: This also avoids some misleading SharedArrayBuffer warnings that were fixed in React 17.0.2, see https://github.com/facebook/react/blob/7c4e6aae3ef4e77596125f30b801c84800e949a9/CHANGELOG.md#react-dom

Relevant Technical Choices

  • Removes unneeded imports of React using the provided codemod (npx react-codemod update-react-imports).
    This is done in preparation of using the new JSX transform, since the new JSX transform doesn’t require React to be in scope.
    Note: These imports are already unneeded today, and basically dead code. It doesn’t hurt to keep them, but they can be removed safely.
  • Also cleans up code in lots of places to get rid of console warnings (DOM validation warnings, incorrect prop types
  • Mocks @wordpress/element (currently on React 16.x) in tests to map to React 17.
    Avoids issues with mismatching React versions used for code and tests.
    These can be removed once @wordpress/element upgrades too (Update to React 17.0.1 WordPress/gutenberg#26847)

To-do

  • Use new JSX transform (in follow-up PR)
    Turns out this requires some changes to the Karma config and how we spy on React.createElement, as this spy needs to be changed to work against react/jsx-runtime.

User-facing changes

N/A

Testing Instructions

N/A


Fixes #6938

@swissspidy swissspidy added Type: Enhancement New feature or improvement of an existing feature Group: WordPress Changes related to WordPress or Gutenberg integration Pod: WP & Infra labels Dec 22, 2020
@google-cla google-cla bot added the cla: yes label Dec 22, 2020
@github-actions
Copy link
Contributor

github-actions bot commented Dec 22, 2020

Size Change: +3.85 kB (0%)

Total Size: 1.66 MB

Filename Size Change
assets/js/edit-story.js 340 kB +126 B (0%)
assets/js/vendors-edit-story-stories-dashboard-********************.js 269 kB +1.86 kB (+1%)
assets/js/web-stories-activation-notice.js 70 kB +1.72 kB (+3%)
assets/js/web-stories-block.js 429 kB +142 B (0%)
ℹ️ View Unchanged
Filename Size Change
assets/css/carousel-view-rtl.css 715 B 0 B
assets/css/carousel-view.css 716 B 0 B
assets/css/edit-story-rtl.css 792 B 0 B
assets/css/edit-story.css 792 B 0 B
assets/css/stories-dashboard-rtl.css 768 B 0 B
assets/css/stories-dashboard.css 768 B 0 B
assets/css/vendors-edit-story-rtl.css 752 B 0 B
assets/css/vendors-edit-story.css 752 B 0 B
assets/css/web-stories-block-rtl.css 3.23 kB 0 B
assets/css/web-stories-block.css 3.26 kB 0 B
assets/css/web-stories-embed-rtl.css 284 B 0 B
assets/css/web-stories-embed.css 284 B 0 B
assets/css/web-stories-list-styles-rtl.css 2.26 kB 0 B
assets/css/web-stories-list-styles.css 2.27 kB 0 B
assets/css/web-stories-theme-style-twentyeleven-rtl.css 102 B 0 B
assets/css/web-stories-theme-style-twentyeleven.css 102 B 0 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css 252 B 0 B
assets/css/web-stories-theme-style-twentyfifteen.css 252 B 0 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 286 B 0 B
assets/css/web-stories-theme-style-twentyfourteen.css 286 B 0 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 311 B 0 B
assets/css/web-stories-theme-style-twentyseventeen.css 311 B 0 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 239 B 0 B
assets/css/web-stories-theme-style-twentysixteen.css 239 B 0 B
assets/css/web-stories-theme-style-twentyten-rtl.css 144 B 0 B
assets/css/web-stories-theme-style-twentyten.css 145 B 0 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 263 B 0 B
assets/css/web-stories-theme-style-twentytwelve.css 263 B 0 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwenty.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css 263 B 0 B
assets/css/web-stories-theme-style-twentytwentyone.css 265 B 0 B
assets/css/web-stories-widget-rtl.css 489 B 0 B
assets/css/web-stories-widget.css 489 B 0 B
assets/js/carousel-view.js 3.72 kB 0 B
assets/js/chunk-fonts-********************.js 45.2 kB 0 B
assets/js/chunk-web-stories-template-0-********************.js 10.5 kB 0 B
assets/js/chunk-web-stories-template-1-********************.js 11.3 kB 0 B
assets/js/chunk-web-stories-template-2-********************.js 10.9 kB 0 B
assets/js/chunk-web-stories-template-3-********************.js 10.6 kB 0 B
assets/js/chunk-web-stories-template-4-********************.js 12.7 kB 0 B
assets/js/chunk-web-stories-template-5-********************.js 7.14 kB 0 B
assets/js/chunk-web-stories-template-6-********************.js 10.3 kB 0 B
assets/js/chunk-web-stories-template-7-********************.js 10.1 kB 0 B
assets/js/chunk-web-stories-textset-0-********************.js 5.23 kB 0 B
assets/js/chunk-web-stories-textset-1-********************.js 6.79 kB 0 B
assets/js/chunk-web-stories-textset-2-********************.js 7.81 kB 0 B
assets/js/chunk-web-stories-textset-3-********************.js 15.3 kB 0 B
assets/js/chunk-web-stories-textset-4-********************.js 4.38 kB 0 B
assets/js/chunk-web-stories-textset-5-********************.js 5.64 kB 0 B
assets/js/chunk-web-stories-textset-6-********************.js 5.43 kB 0 B
assets/js/chunk-web-stories-textset-7-********************.js 10.3 kB 0 B
assets/js/lightbox.js 986 B 0 B
assets/js/stories-dashboard.js 268 kB +5 B (0%)
assets/js/tinymce-button.js 3.48 kB 0 B
assets/js/vendors-chunk-ffmpeg-********************.js 5.61 kB 0 B
assets/js/vendors-edit-story-********************.js 60 kB -1 B (0%)
assets/js/web-stories-embed.js 492 B 0 B
assets/js/web-stories-widget.js 984 B 0 B

compressed-size-action

@spacedmonkey

This comment has been minimized.

@swissspidy swissspidy added the Dependencies Pull requests that update a dependency file label Jan 5, 2021
@swissspidy

This comment has been minimized.

@spacedmonkey

This comment has been minimized.

@swissspidy swissspidy added the Status: Stale Gives the original author opportunity to update before closing. Can be reopened as needed. label Jan 25, 2021
@swissspidy swissspidy added the Status: Blocked On hold for the time being label Feb 4, 2021
@swissspidy

This comment has been minimized.

@swissspidy swissspidy closed this Feb 4, 2021
@swissspidy swissspidy deleted the chore/react-17 branch February 4, 2021 11:08
@swissspidy swissspidy restored the chore/react-17 branch March 23, 2021 11:23
@swissspidy swissspidy reopened this Mar 23, 2021
# Conflicts:
#	package-lock.json
#	package.json
@spacedmonkey

This comment has been minimized.

@spacedmonkey
Copy link
Contributor

I think we should make sure that #6900 is merged before merging this.

@swissspidy
Copy link
Collaborator Author

I think we should make sure that #6900 is merged before merging this.

I don't see why. There are no real dependencies between these two. Whatever is ready first could go in.

Copy link
Contributor

@spacedmonkey spacedmonkey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes look good to me.

This was referenced Mar 29, 2021
@swissspidy swissspidy merged commit 412075c into main Mar 31, 2021
@swissspidy swissspidy deleted the chore/react-17 branch March 31, 2021 10:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Dependencies Pull requests that update a dependency file Group: WordPress Changes related to WordPress or Gutenberg integration Type: Enhancement New feature or improvement of an existing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Use React 17
4 participants