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.

Sign up for GitHub

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

Jump to bottom

Update to React 18 #28710

Merged
merged 15 commits into from
Feb 8, 2023
Merged

Update to React 18 #28710

merged 15 commits into from
Feb 8, 2023

Conversation

anomiex
Copy link
Contributor

@anomiex anomiex commented Feb 1, 2023 •
edited
Loading

Proposed changes:

Update to React 18.

Other information:

  • Have you written new tests for your changes, if applicable?
  • Have you checked the E2E test CI results, and verified that your changes do not break them?
  • Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

p9dueE-6wd-p2

Does this pull request change what data or activity we track or use?

No

Testing instructions:

  • Test everything you can think of that uses React (e.g. Jetpack's dashboard and settings, Jetpack's blocks in the editor, the My Jetpack page, pages for most of the standalone plugins) with WordPress 6.0 (no Gutenberg plugin), WordPress 6.1 (same), WordPress with the latest Gutenberg plugin, wpcom Simple, and wpcom Atomic.

anomiex added 11 commits February 1, 2023 16:23
@anomiex
Add new overrides to .pnpmfile.cjs
c344ab1 
Various indirect deps don't declare support for React 18 yet.
@anomiex
Update packages
fb619e2 
Updates react packages and corresponding `@types/`, all the
`@wordpress/*` and `@types/wordpress__*`, and `@testing-library/react`.

Also updates some indirect deps of `@storybook/addon-actions` and
`@storybook/react` that we have new overrides for.

Also `@testing-library/react-hooks` has been merged into
`@testing-library/react` now, so we need to remove that (and then update
tests to get `renderHook` from the latter package instead).

To regenerate, run
```
pnpm remove -r @testing-library/react-hooks && \
pnpm update -r react@latest react-dom@latest react-test-renderer@latest @types/react@latest @types/react-dom@latest @types/react-test-renderer@latest \
	$(ls -d node_modules/.pnpm/@WordPress+* node_modules/.pnpm/@types+wordpress__* | sed 's!^node_modules/.pnpm/!!;s!+!/!;s!\(.\)@.*$!\1@latest!' | sort -u) \
	@testing-library/react@latest @storybook/addon-actions @storybook/react
```
@anomiex
Replace @testing-library/react-hooks
17343ea 
Functionality mostly merged into `@testing-library/react`
@anomiex
Replace deprecated react-dom methods
00cac6e 
Mostly `render()`, also a few `unmountComponentAtNode()`.
@anomiex
Add newly necessary jest config
601aedd
@anomiex
Declare children in some TypeScript types
2eaff06
@anomiex
Fix missing act() and other needed waiting
aa64ad1
@anomiex
Replace deprecated wp.components.Dropdown position prop
79b0229 
Looks like the actual deprecaion happened back in 2019, so we should be
safe to just replace it.
@anomiex
Add mocking for GB color settings
d612bdd 
Seems odd that the defaults make PanelColorSettings not render at all,
when AFAICT the actual theme defaults supply the right settings, but
that's how it is.
@anomiex
publicize-components: Add a waitFor to hopefully make a test less flaky
a5aa5ce
@anomiex
Change entries and version bumps
aa9de02
@anomiex anomiex added [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. [Type] Janitorial [Pri] Normal labels Feb 1, 2023
@anomiex anomiex self-assigned this Feb 1, 2023
@anomiex anomiex changed the title Update/react 18 Update to React 18 Feb 1, 2023
@github-actions github-actions bot added [Status] Needs Test Review Admin Page React-powered dashboard under the Jetpack menu RNA labels Feb 1, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Feb 1, 2023 •
edited
Loading

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

  • ✅ Include a description of your PR changes.
  • ✅ All commits were linted before commit.
  • ✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
  • ✅ Add testing instructions.
  • ✅ Specify whether this PR includes any changes to data or privacy.
  • ✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Once your PR is ready for review, check one last time that all required checks (other than "Required review") appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team review" label and ask someone from your team review the code.
Once you’ve done so, switch to the "[Status] Needs Review" label; someone from Jetpack Crew will then review this PR and merge it to be included in the next Jetpack release.

Jetpack plugin:

  • Next scheduled release: March 7, 2023.
  • Scheduled code freeze: February 28, 2023.

Boost plugin:

  • Next scheduled release: March 7, 2023.
  • Scheduled code freeze: February 27, 2023.

Social plugin:

  • Next scheduled release: March 7, 2023.
  • Scheduled code freeze: February 28, 2023.

Starter Plugin plugin:

  • Next scheduled release: March 7, 2023.
  • Scheduled code freeze: February 27, 2023.

Protect plugin:

  • Next scheduled release: March 7, 2023.
  • Scheduled code freeze: February 27, 2023.

Videopress plugin:

  • Next scheduled release: March 7, 2023.
  • Scheduled code freeze: February 27, 2023.

Migration plugin:

  • Next scheduled release: March 7, 2023.
  • Scheduled code freeze: February 27, 2023.

@github-actions
Copy link
Contributor

github-actions bot commented Feb 1, 2023 •
edited
Loading

Are you an Automattician? You can now test your Pull Request on WordPress.com. On your sandbox, run

bin/jetpack-downloader test jetpack update/react-18

to get started. More details: p9dueE-5Nn-p2

@anomiex
Handle lack of createRoot in React 17
33889f3 
It doesn't help that `react-dom/client` is not handled by
dependency-extraction-webpack-plugin, so the v18 version gets bundled
but tries to use the v17 version from WP core and breaks.

Fortunately `@wordpress/element` in v5 re-exports the `react-dom/client`
functions, making it easy to check for whether WP core has it or not. So
switch everything over to that.
@anomiex
Copy link
Contributor Author

anomiex commented Feb 3, 2023

Note Boost's Critical CSS feature is currently broken in trunk, that's not an effect of this PR. p1675393194601369/1675373367.797419-slack-CBG1CP4EN

@samiff
Copy link
Contributor

samiff commented Feb 3, 2023

I did some clicking around on a JN site but wasn't able to notice any issues.

@sdixon194
Copy link
Contributor

Checked everything I could - Jurassic Ninja, WoA, Simple site, all standalone plugin pages, dashboards and block editors. Didn't notice any issues.

Looks like there are some merge conflicts. I say we go ahead and merge this so we can get as close to a full cycle of testing as possible.

@anomiex
Copy link
Contributor Author

anomiex commented Feb 6, 2023

I was planning on waiting for Wednesday in case something blows up with the release tomorrow in code that's touched here. But if others think that won't complicate backporting fixes, I'm fine with going ahead now. There's not that much non-test code being touched (mainly just the replacing of react-dom's render with @wordpress/element).

@sdixon194
Copy link
Contributor

I was planning on waiting for Wednesday

Gotcha, that makes sense to me. Let's wait until Wednesday and merge it after 11.8 just to be safe.

@sdixon194 sdixon194 added [Status] Blocked / Hold and removed [Status] Needs Review To request a review from fellow Jetpack developers. Label will be renamed soon. labels Feb 6, 2023
sdixon194
sdixon194 previously approved these changes Feb 6, 2023
View reviewed changes
@anomiex anomiex merged commit d848b47 into trunk Feb 8, 2023
@anomiex anomiex deleted the update/react-18 branch February 8, 2023 18:04
@renatoagds
Copy link
Contributor

Nice work here folks! 👏🏽

@gziolo gziolo mentioned this pull request Feb 13, 2023
Merged
6 tasks
anomiex added a commit that referenced this pull request Feb 13, 2023
@anomiex
Update React peer deps to v18
c3bd837 
When #28710 updated the React dependencies, our packages' peer
dependencies were overlooked. Update them too.
@anomiex anomiex mentioned this pull request Feb 13, 2023
Merged
3 tasks
anomiex added a commit that referenced this pull request Feb 22, 2023
@anomiex
Update React peer deps to v18 (#28924)
d46a696 
When #28710 updated the React dependencies, our packages' peer
dependencies were overlooked. Update them too.
@anomiex anomiex mentioned this pull request Jun 21, 2023
Merged
1 task
jeherve added a commit that referenced this pull request Aug 30, 2023
@jeherve
General: remove WP 6.1 backwards compatibility checks
84b9188 
See #31638

This mostly removes checks that were added in #28710
@anomiex anomiex mentioned this pull request Jul 23, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@samiff samiff samiff approved these changes

@sdixon194 sdixon194 sdixon194 left review comments

Assignees

@anomiex anomiex

Labels
Admin Page React-powered dashboard under the Jetpack menu [Block] Ad [Block] Button [Block] Dialogue [Block] GIF [Block] Latest Instagram Posts [Block] Mailchimp [Block] Map [Block] Pinterest [Block] Send a message [Block] Subscriptions [Block] Tiled Gallery [JS Package] API [JS Package] Base Styles [JS Package] Components [JS Package] Connection [JS Package] Eslint Config Target Es [JS Package] I18n Loader Webpack Plugin [JS Package] IDC [JS Package] Licensing [JS Package] Partner Coupon [JS Package] Publicize Components [JS Package] Shared Extension Utils [JS Package] Storybook [JS Package] Webpack Config [Package] Action Bar This package no longer exists in the monorepo. [Package] Ad aka WordAds [Package] Assets [Package] Backup [Package] Blaze [Package] Connection [Package] Forms [Package] Identity Crisis This package no longer exists in the monorepo. It was merged into [Package] Connection. [Package] Jitm [Package] Lazy Images This package no longer exists in the monorepo. [Package] My Jetpack [Package] Publicize [Package] Search Contains core Search functionality for Jetpack and Search plugins [Package] VideoPress [Plugin] Boost A feature to speed up the site and improve performance. [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Plugin] Migration [Plugin] Protect A plugin with features to protect a site: brute force protection, security scanning, and a WAF. [Plugin] Social Issues about the Jetpack Social plugin [Plugin] Starter Plugin [Plugin] VideoPress A standalone plugin to add high-quality VideoPress videos to your site. [Pri] Normal RNA [Status] Blocked / Hold [Status] Needs Test Review [Type] Janitorial
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@anomiex @samiff @sdixon194 @renatoagds