Update dependencies to support react 17 #8305

chihsuan · 2022-02-14T03:37:09Z

This PR updates the dependencies to support react 17 with the following changes.

Updated dependencies to support react 17. d33b4ea
Updated test snapshots due to wp component package updated. 734749d
~~Added explat-client-react-helpers.tsx from wp-calypso/packages/explat-client-react-helpers to pacakges/explat as temporary solution to support react 17. 22befc9~~ -> Update webpack.config for latest published explat-client-react-helpers. c2fc69a
Updated SnackbarList with latest react-spring. 37ca4a5
Removed '@wordpress/components/src/visually-hidden/style' import (included in wp-components). 42a4dde
Updated interpolateComponents import path -> '@automattic/interpolate-components' 18b60b9
~~Updated createNotice actions param onclick (deprecated) -> callback. 4666b8f~~ -> Update dependencies to support react 17 #8305 (review)
Fixed task-list-item and display-options tests. a00c320 2b03298

Details: p90Yrv-2Lk-p2

Detailed test instructions:

Check out this branch
Clean repo: npm run clean && rm -rf node_modules && rm -rf packages/**/node_modules
Reinstall and build: npm install && npm run build
Test: npm run test
Smoke test the whole app

rjchow

Nice work! Appreciate this very laborious and often thankless work.
Automated tests and smoke testing went well, almost all the changes look fine.

I went over the changelogs of every package that was updated and the only things that stood out were:

Most of them had breaking changes of IE11 deprecation and Node.JS LTS 12 as the minimum version - wonder if we should add this to our own changelog?
@wordpress/components deprecated some props (isPrimary, isSecondary, isTertiary, isLink) in <Button> and we use those props, so we should probably make a separate issue to fix them before they completely remove support. https://github.com/WordPress/gutenberg/blob/81e8e0f7c999df3cc43ef97cb2913779c0190eff/packages/components/CHANGELOG.md#deprecation-1

chihsuan · 2022-02-15T09:31:40Z

* Most of them had breaking changes of IE11 deprecation and Node.JS LTS 12 as the minimum version - wonder if we should add this to our own changelog?

* @wordpress/components deprecated some props (isPrimary, isSecondary, isTertiary, isLink) in `<Button>` and we use those props, so we should probably make a separate issue to fix them before they completely remove support. https://github.com/WordPress/gutenberg/blob/81e8e0f7c999df3cc43ef97cb2913779c0190eff/packages/components/CHANGELOG.md#deprecation-1

@rjchow Thanks for spotting them. I've add IE11 deprecation note to changelogs in bd4a659. I think our minimum Node JS version is already 12 as defined in the package.json.

Also created a follow-up issue #8313 for <Button>

ilyasfoo

Thanks so much for the work here, @chihsuan! It's super neat that you've also properly separated the changes into different commits, definitely helped with reviewing there.

I've found an issue with createNotice changes. Everything else is looking good so far!

ilyasfoo · 2022-02-17T06:28:14Z

client/homescreen/activity-panel/reviews/index.js

@@ -69,7 +69,7 @@ class ReviewsPanel extends Component {
 							actions: [
 								{
 									label: __( 'Undo', 'woocommerce-admin' ),
-									onClick: () => {
+									callback: () => {


Updated createNotice actions param onclick (deprecated) -> callback. 4666b8f

I've tested this change and found out the new callback didn't get triggered. I've tried to change it back to onClick and it worked. Also, looking at the source for core/notices, I'm seeing onClick is still used (at least in the typedef) and no reference to callback is found. Kinda weird, where did you find the deprecated notice for onClick? 🤔

Good catch. I think you're right. It's still using onClick. I found the callback from typescript warnings and @types/wordpress__notices.

.

https://www.npmjs.com/package/@types/wordpress__notices

The last published is a year ago. : (

Let me drop this commit 4666b8f and possibly fill an issue on Gutenberg.

I've reverted the changes and confirmed they actually changed from callback to onClick (WordPress/gutenberg#17206), but didn't update the file in DefinitelyTyped repo.

Ah, I see. Yeah it seems that'll need an update

Update: I've raised a discussion DefinitelyTyped/DefinitelyTyped#58850 based on DefinitelyTyped/DefinitelyTyped#53377.

Thanks! It seems that the original owner for the type module was an a11n, but no longer works here.

I tagged the other maintainers from @types/wordpress__components 🥲

Update pkg Update @wordpress/api-fetch and gridicons

wp-components has included it

Update changelogs

Update webpack config comment Fix grammar

ilyasfoo

I confirm that createNotice is working again. LGTM!

adrianduffell

Smoke test went well for me! Nice job on this @chihsuan 👍

…n#8305) * Upgrade dependencies to support react17 Update pkg Update @wordpress/api-fetch and gridicons * Update test snapshots * Update SnackbarList with latest react-spring * Mock data.dispatch for task-list-item.test.tsx * Remove '@wordpress/components/src/visually-hidden/style' import wp-components has included it * Update interpolateComponents import path * Fix display-options test * Add changelogs Update changelogs * Add @automattic/explat-client-react-helpers back * Update webpack.config for explat-client-react-helpers Update webpack config comment Fix grammar

chihsuan self-assigned this Feb 14, 2022

github-actions bot added needs changelog entry and removed needs changelog entry labels Feb 14, 2022

chihsuan force-pushed the update/react-17 branch from 1dcab4e to fb9dd72 Compare February 14, 2022 04:32

chihsuan added status: needs review labels Feb 14, 2022

chihsuan requested a review from a team February 14, 2022 08:33

rjchow self-requested a review February 15, 2022 02:31

rjchow approved these changes Feb 15, 2022

View reviewed changes

chihsuan mentioned this pull request Feb 15, 2022

Some props in @wordpress/components <Button> are deprecated #8313

Closed

deepakpathania mentioned this pull request Feb 15, 2022

Update to React 17 Automattic/woocommerce-payments#825

Closed

chihsuan force-pushed the update/react-17 branch 2 times, most recently from fc46931 to 44ec66c Compare February 17, 2022 03:19

ilyasfoo self-requested a review February 17, 2022 04:41

ilyasfoo suggested changes Feb 17, 2022

View reviewed changes

chihsuan force-pushed the update/react-17 branch 3 times, most recently from c2fc69a to 9d9ce64 Compare February 17, 2022 09:43

chihsuan added 10 commits February 18, 2022 16:04

Upgrade dependencies to support react17

963f938

Update pkg Update @wordpress/api-fetch and gridicons

Update test snapshots

6979a36

Update SnackbarList with latest react-spring

50a8318

Mock data.dispatch for task-list-item.test.tsx

17a8d93

Remove '@wordpress/components/src/visually-hidden/style' import

f3b18eb

wp-components has included it

Update interpolateComponents import path

d659770

Fix display-options test

d350f0a

Add changelogs

c2a7f71

Update changelogs

Add @automattic/explat-client-react-helpers back

5dd34aa

Update webpack.config for explat-client-react-helpers

074b51f

Update webpack config comment Fix grammar

chihsuan force-pushed the update/react-17 branch from 9d9ce64 to 074b51f Compare February 18, 2022 08:05

ilyasfoo self-requested a review February 18, 2022 09:07

ilyasfoo approved these changes Feb 18, 2022

View reviewed changes

adrianduffell self-requested a review February 18, 2022 09:14

adrianduffell approved these changes Feb 18, 2022

View reviewed changes

adrianduffell added status: ready to merge and removed status: needs review labels Feb 18, 2022

chihsuan merged commit 5c20660 into main Feb 21, 2022

chihsuan deleted the update/react-17 branch February 21, 2022 02:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update dependencies to support react 17 #8305

Update dependencies to support react 17 #8305

chihsuan commented Feb 14, 2022 •

edited

Loading

rjchow left a comment •

edited

Loading

chihsuan commented Feb 15, 2022

ilyasfoo left a comment

ilyasfoo Feb 17, 2022

chihsuan Feb 17, 2022 •

edited

Loading

chihsuan Feb 17, 2022

chihsuan Feb 17, 2022

chihsuan Feb 17, 2022

ilyasfoo Feb 17, 2022

chihsuan Feb 18, 2022

ilyasfoo Feb 18, 2022

chihsuan Feb 18, 2022

ilyasfoo left a comment

adrianduffell left a comment

Update dependencies to support react 17 #8305

Update dependencies to support react 17 #8305

Conversation

chihsuan commented Feb 14, 2022 • edited Loading

Detailed test instructions:

rjchow left a comment • edited Loading

Choose a reason for hiding this comment

chihsuan commented Feb 15, 2022

ilyasfoo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chihsuan Feb 17, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ilyasfoo left a comment

Choose a reason for hiding this comment

adrianduffell left a comment

Choose a reason for hiding this comment

chihsuan commented Feb 14, 2022 •

edited

Loading

rjchow left a comment •

edited

Loading

chihsuan Feb 17, 2022 •

edited

Loading