Site-kit-wp: Chore: upgrade all package dependencies.

[adamsilverstein]

Task Description

• Update dependencies in package.json.
• Update dependencies in composer.json.
• Verify build and codebase works correctly.

---

_Do not alter or remove anything below. The following sections will be managed by moderators only._

Acceptance criteria

• All our Composer and NPM packages should be updated to their latest versions.
• Functionality should not be affected.
• If there are certain packages that we cannot update without breakage or making severe changes, they should be discussed on a case-by-case basis.

Implementation Brief

• All packages within composer.json and package.json should be updated to their latest versions as long as doing so does not result in site breakages - in which case this needs to be discussed.
• composer.json - run composer outdated - gives a list of packages which have updates. Incrementally update versions. Checking for breakages.
• package.json - run npm outdated - - gives a list of dependency packages which have updates. Incrementally update versions. Checking for breakages .

QA Brief

Changelog entry

• Update the majority of 3P dependencies to their latest versions.

[aaemnnosttv]

IB ✅

[eugene-manuilov]

After working on npm dependencies I stuck with a weird issue that blocked everything. I can't troubleshoot it too much because the error message is very vague and it looks like the issue happens inside of @wordpress/data package.

I would be grateful if @tofumatt or anyone from the team can look at it too. The latest commint in my branch (enhancement/1356-upgrade-dependencies) that works for me is 5daf1d4251639ebd7c37e3b2c59756dc9c4ff160. The next two commits are develop branch merging and updating a few php dependencies. So my guess is that something in the develop branch started causing this issue in conjunctions with npm updates.

Here is the screenshot of the issue that I see in my browser:

[eugene-manuilov]

@felixarntz @aaemnnosttv @tofumatt i have prepared a few separate PRs to upgrade dependencies in chunks. Could you please review it and merge if possible? I need it to be merged to unblock another updates.

• Gulp tasks: https://github.com/google/site-kit-wp/pull/1737
• Babel and webpack: https://github.com/google/site-kit-wp/pull/1738
• Material packages: https://github.com/google/site-kit-wp/pull/1739 (depends on babel/webpack PR to be merged)
• Link changes: https://github.com/google/site-kit-wp/pull/1740

[felixarntz]

@eugene-manuilov I've approved and merged all 4 PRs. What's left here now? Would be great if you could provide an update, and then we can decide whether we're gonna invest the time or create separate follow-up issues for later.

[eugene-manuilov]

@felixarntz here is one more PR: https://github.com/google/site-kit-wp/pull/1759 - it updates non wordpress packages. Once it's merged the remaining part will be to upgrade wordpress dependencies and test related packages.

[felixarntz]

@eugene-manuilov Merged!

[eugene-manuilov]

Here is a PR https://github.com/google/site-kit-wp/pull/1762 to upgrade all WordPress dependencies except @wordpress/data and @wordpress/script which can't be upgraded to the latest versions yet. It also includes a few additional changes to address deprecation warnings which have appeared after testing library upgrade.

[felixarntz]

With #1762 merged, we can consider this one completed for now. I've opened #1769, #1770 and #1771 for the remaining updates, we don't need to get to those right away though, especially since figuring them out will likely require some more time investment.

Overall, in the future let's approach dependency updates more granularly. We should also think about putting a regular routine in place where we update dependencies so that they don't get as outdated over time again. Maybe we should force the versions where we know updating causes breakage in package.json.

[felixarntz]

Actually we'll still need to update PHP dependencies.

[aaemnnosttv]

QA 🆗 needs :octocat:

Due to the size of this issue and changes I'll review the remaining outdated packages; all other behavioral changes will be covered by general QA for release and other issues now (some things have already been caught and addressed before this).

$ composer outdated
dealerdirect/phpcodesniffer-composer-installer v0.5.0             v0.7.0             PHP_CodeSniffer Standards Composer Installer ...
guzzlehttp/guzzle                              5.3.4              6.5.5              Guzzle is a PHP HTTP client library and frame...
guzzlehttp/ringphp                             1.1.1              1.1.1              Provides a simple API and specification that ...
Package guzzlehttp/ringphp is abandoned, you should avoid using it. No replacement was suggested.
guzzlehttp/streams                             3.0.0              3.0.0              Provides a simple abstraction over streams of...
Package guzzlehttp/streams is abandoned, you should avoid using it. No replacement was suggested.
phpunit/phpunit-mock-objects                   3.4.4              3.4.4              Mock Object library for PHPUnit
Package phpunit/phpunit-mock-objects is abandoned, you should avoid using it. No replacement was suggested.
roave/security-advisories                      dev-master 881b9e4 dev-master 9f386db Prevents installation of composer packages wi...
symfony/polyfill-ctype                         v1.17.1            v1.18.0            Symfony polyfill for ctype functions

• ⚠️ dealerdirect/phpcodesniffer-composer-installer probably could have been upgraded but are locked at minor version
  Needs issue for upgrading in the future
• Abandoned packages are required by:
  
  
  
  • google/apiclient
  
  
  • phpunit/phpunit-mock-objects (we can't upgrade phpunit due to minimum PHP version compatibility)
  
  
• roave/security-advisories and symfony/polyfill-ctype are very recent minor/patch releases

$ npm outdated
Package                          Current   Wanted   Latest  Location
@babel/plugin-transform-runtime   7.10.4   7.10.5   7.10.5  googlesitekit
@material/button                   2.3.0    2.3.0    7.0.0  googlesitekit
@material/checkbox                 2.3.0    2.3.0    7.0.0  googlesitekit
@material/dialog                   2.3.0    2.3.0    7.0.0  googlesitekit
@material/form-field               2.3.0    2.3.0    7.0.0  googlesitekit
@material/layout-grid             0.41.0   0.41.0    7.0.0  googlesitekit
@material/linear-progress          1.1.0    1.1.0    7.0.0  googlesitekit
@material/list                     2.3.0    2.3.0    7.0.0  googlesitekit
@material/menu                     2.3.0    2.3.0    7.0.0  googlesitekit
@material/radio                    2.3.0    2.3.0    7.0.0  googlesitekit
@material/ripple                   2.3.0    2.3.0    7.0.0  googlesitekit
@material/select                   2.3.1    2.3.1    7.0.0  googlesitekit
@material/switch                   2.3.0    2.3.0    7.0.0  googlesitekit
@material/textfield                2.3.1    2.3.1    7.0.0  googlesitekit
@material/theme                    1.1.0    1.1.0    7.0.0  googlesitekit
@testing-library/jest-dom         5.11.0   5.11.1   5.11.1  googlesitekit
@testing-library/react            10.4.5   10.4.7   10.4.7  googlesitekit
@wordpress/data                   4.12.0   4.22.1   4.22.1  googlesitekit
@wordpress/scripts                 3.4.0    3.4.0   12.1.1  googlesitekit
backstopjs                         3.8.8    3.8.8    5.0.1  googlesitekit
eslint                             6.8.0    6.8.0    7.4.0  googlesitekit
eslint-plugin-jest               22.21.0  22.21.0  23.18.0  googlesitekit
focus-trap-react                   6.0.0    6.0.0    7.0.1  googlesitekit
puppeteer                         1.20.0   1.20.0    5.1.0  googlesitekit
react                            16.12.0  16.13.1  16.13.1  googlesitekit
react-dom                        16.12.0  16.13.1  16.13.1  googlesitekit

• @babel/plugin-transform-runtime latest patch version was just published 2 days ago
• @material/* upgrades were moved to a new issue https://github.com/google/site-kit-wp/issues/1771
• @wordpress/data upgrade moved to a new issue https://github.com/google/site-kit-wp/issues/1769
• @wordpress/scripts upgrade moved to a new issue https://github.com/google/site-kit-wp/issues/1770
• ⚠️ backstopjs needs its own issue as well as this one has been problematic to upgrade in the past
• ⚠️ eslint and eslint-plugin-* need an issue
• ⚠️ focus-trap-react was rolled back to v6 in https://github.com/google/site-kit-wp/pull/1735#issuecomment-658085786 due to errors but does not have an issue for addressing in the future (not sure if it warrants its own?)
• ⚠️ puppeteer - I'm not sure we need this as a top-level dependency as it's required by both @wordpress/scripts (should be the version used in e2e) and by backstopjs, storybook-chrome-screenshot - should get its own issue to upgrade or remove from dev-dependencies
• react and react-dom were rolled back to 16.12 in https://github.com/google/site-kit-wp/pull/1762#issuecomment-657808836 after encountering errors with the latest version. Issue for upgrading it is https://github.com/google/site-kit-wp/issues/1769

Overall, nothing blocking here but a few issues should be created for handling the remaining upgrades that do not have one yet.

@eugene-manuilov would you please create the remaining issues here (or link me to them if any of these are already covered and I just missed them? 😄 ) for packages that still need to be upgraded?

[aaemnnosttv]

Also I just noticed that Husky hooks are not working anymore when committing via an app and we should probably downgrade it to v3. See https://github.com/typicode/husky/issues/639

[eugene-manuilov]

• backstopjs: #1794
• eslint and eslint-plugin-*: #1796
• puppeteer: #1797
• focus-trap-react: #1798

[eugene-manuilov]

@aaemnnosttv new issues are created. Please, let me know if you want me to add something to it.

[aaemnnosttv]

Thanks @eugene-manuilov

I think we could use issues for upgrading dealerdirect/phpcodesniffer-composer-installer and downgrading husky but those don't need to block this. I'll create them tomorrow unless someone beats me to it 😄

QA ✅