Update/npm to yarn main

[scinos]

Changes proposed in this Pull Request

• Migrate to yarn

Testing instructions

Nothing really to review/test, the content of this PR has been already tested/reviewed following the plan in #40882

I'll add extra notes if something pops up.

[matticbot]

Test live: https://calypso.live/?branch=update/npm-to-yarn-main

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~21 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
entry-gutenboarding         +222 B  (+0.0%)      -29 B  (-0.0%)
entry-main                   +90 B  (+0.0%)      +28 B  (+0.0%)
entry-login                  +90 B  (+0.0%)      +29 B  (+0.0%)
entry-domains-landing        +56 B  (+0.0%)       -7 B  (-0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~7992 bytes added 📈 [gzipped])

name              parsed_size            gzip_size
devdocs              +37839 B  (+24.2%)   +12669 B  (+30.3%)
checkout             -22328 B   (-1.7%)    -4317 B   (-1.3%)
stats                   -37 B   (-0.0%)      -29 B   (-0.0%)
settings-writing        -37 B   (-0.0%)      -20 B   (-0.0%)
post-editor             -37 B   (-0.0%)      -31 B   (-0.0%)
backups                 -37 B   (-0.0%)     -126 B   (-0.2%)
activity                -37 B   (-0.0%)      -55 B   (-0.0%)
comments                -36 B   (-0.0%)      -47 B   (-0.0%)
help                    -35 B   (-0.0%)      -16 B   (-0.0%)
concierge               -35 B   (-0.0%)      -12 B   (-0.0%)
woocommerce             +22 B   (+0.0%)      -12 B   (-0.0%)
purchases               +22 B   (+0.0%)      -12 B   (-0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~83519 bytes added 📈 [gzipped])

name                                   parsed_size           gzip_size
async-load-design-playground              +98575 B  (+5.8%)   +27875 B  (+7.1%)
async-load-design                         +98575 B  (+5.5%)   +27875 B  (+6.8%)
async-load-design-blocks                  +98559 B  (+3.6%)   +27843 B  (+4.3%)
async-load-lib-happychat-connection         +270 B  (+0.4%)       +9 B  (+0.1%)
async-load-signup-steps-clone-point          -37 B  (-0.0%)      -36 B  (-0.1%)
async-load-blocks-calendar-popover           -36 B  (-0.0%)      -31 B  (-0.1%)
async-load-blocks-inline-help-popover        -35 B  (-0.0%)      -16 B  (-0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[matticbot]

Caution: This PR affects files in the FSE Plugin on WordPress.com
Please ensure your changes work on WordPress.com before merging.

D41901-code has been created so you can easily test it on your sandbox. See this FieldGuide page about developing in the FSE Plugin for more info: PCYsg-ly5-p2

[scinos]

This branch will introduce the following changes in the dependency tree (compared with master in 1d03056):

Package	Dependency	NPM	YARN
@svgr/plugin-jsx@5.3.1	@babel/core@^7.7.5	@babel/core@7.9.0	@babel/core@7.9.0
istanbul-lib-instrument@4.0.1	@babel/core@^7.7.5	@babel/core@7.8.4	@babel/core@7.9.0
jest-config@24.9.0	@babel/core@^7.7.5	@babel/core@7.8.4	@babel/core@7.9.0
jest-config@24.9.0	@babel/core@^7.7.5	@babel/core@7.9.0	@babel/core@7.9.0
react-docgen@5.3.0	@babel/core@^7.7.5	@babel/core@7.8.4	@babel/core@7.9.0
@babel/core@7.8.4	@babel/template@^7.8.3	@babel/template@7.8.3	@babel/template@7.8.6
@babel/helper-function-name@7.8.3	@babel/template@^7.8.3	@babel/template@7.8.3	@babel/template@7.8.6
@babel/helper-module-transforms@7.8.3	@babel/template@^7.8.3	@babel/template@7.8.3	@babel/template@7.8.6
@babel/helper-remap-async-to-generator@7.8.3	@babel/template@^7.8.3	@babel/template@7.8.3	@babel/template@7.8.6
@babel/helper-simple-access@7.8.3	@babel/template@^7.8.3	@babel/template@7.8.3	@babel/template@7.8.6
@babel/helper-wrap-function@7.8.3	@babel/template@^7.8.3	@babel/template@7.8.3	@babel/template@7.8.6
@babel/helpers@7.8.4	@babel/template@^7.8.3	@babel/template@7.8.3	@babel/template@7.8.6
@babel/helpers@7.9.2	@babel/template@^7.8.3	@babel/template@7.8.6	@babel/template@7.8.6
jest-jasmine2@24.9.0	@babel/traverse@^7.1.0	@babel/traverse@7.8.4	@babel/traverse@7.9.0
jest-jasmine2@24.9.0	@babel/traverse@^7.1.0	@babel/traverse@7.9.0	@babel/traverse@7.9.0
jest-jasmine2@25.1.0	@babel/traverse@^7.1.0	@babel/traverse@7.8.4	@babel/traverse@7.9.0
@babel/preset-modules@0.1.3	@babel/types@^7.4.4	@babel/types@7.8.3	@babel/types@7.9.0
@svgr/hast-util-to-babel-ast@4.3.2	@babel/types@^7.4.4	@babel/types@7.8.3	@babel/types@7.9.0
jest-snapshot@24.9.0	@babel/types@^7.4.4	@babel/types@7.8.3	@babel/types@7.9.0
jest-snapshot@24.9.0	@babel/types@^7.4.4	@babel/types@7.9.0	@babel/types@7.9.0
espree@6.1.2	acorn@^7.1.0	acorn@7.1.0	acorn@7.1.1
jsdom@15.2.1	acorn@^7.1.0	acorn@7.1.1	acorn@7.1.1
browserslist@4.11.1	caniuse-lite@^1.0.30001038	caniuse-lite@1.0.30001039	caniuse-lite@1.0.30001041
browserslist@4.11.1	caniuse-lite@^1.0.30001038	caniuse-lite@1.0.30001041	caniuse-lite@1.0.30001041
domutils@1.5.1	dom-serializer@0	dom-serializer@0.1.1	dom-serializer@0.2.2
domutils@1.5.1	dom-serializer@0	dom-serializer@0.2.2	dom-serializer@0.2.2
htmlparser2@3.10.1	domutils@^1.5.1	domutils@1.5.1	domutils@1.7.0
htmlparser2@3.10.1	domutils@^1.5.1	domutils@1.7.0	domutils@1.7.0
browserslist@4.11.1	electron-to-chromium@^1.3.390	electron-to-chromium@1.3.397	electron-to-chromium@1.3.403
browserslist@4.11.1	electron-to-chromium@^1.3.390	electron-to-chromium@1.3.397	electron-to-chromium@1.3.403
@storybook/core@5.3.14	find-cache-dir@^3.0.0	find-cache-dir@3.3.1	find-cache-dir@3.3.1
moment-timezone-data-webpack-plugin@1.1.0	find-cache-dir@^3.0.0	find-cache-dir@3.2.0	find-cache-dir@3.3.1
url-loader@2.3.0	loader-utils@^1.2.3	loader-utils@1.2.3	loader-utils@1.2.3
url-loader@3.0.0	loader-utils@^1.2.3	loader-utils@1.4.0	loader-utils@1.2.3
p-locate@2.0.0	p-limit@^1.1.0	p-limit@1.1.0	p-limit@1.3.0
p-locate@2.0.0	p-limit@^1.1.0	p-limit@1.3.0	p-limit@1.3.0
minipass@2.9.0	safe-buffer@^5.1.2	safe-buffer@5.1.2	safe-buffer@5.1.2
minipass@2.9.0	safe-buffer@^5.1.2	safe-buffer@5.2.0	safe-buffer@5.1.2
tar@4.4.13	safe-buffer@^5.1.2	safe-buffer@5.1.2	safe-buffer@5.1.2
tar@4.4.13	safe-buffer@^5.1.2	safe-buffer@5.2.0	safe-buffer@5.1.2
url-loader@2.3.0	schema-utils@^2.5.0	schema-utils@2.6.4	schema-utils@2.6.4
url-loader@3.0.0	schema-utils@^2.5.0	schema-utils@2.6.5	schema-utils@2.6.4
@wordpress/components@9.2.1	reakit@^1.0.0-beta.12	reakit@1.0.0-beta.16	reakit@1.0.0-beta.16
@wordpress/components@9.3.0	reakit@^1.0.0-beta.12	reakit@1.0.0-beta.14	reakit@1.0.0-beta.16
yargs@13.2.4	yargs-parser@^13.1.0	yargs-parser@13.1.1	yargs-parser@13.1.2
yargs@13.2.4	yargs-parser@^13.1.0	yargs-parser@13.1.2	yargs-parser@13.1.2

How to read the table

The first column shows the package, and the second column shows a dependency range of that package. The third column is how NPM resolved that range in our current tree, the fourth column is how YARN will resolve it in this PR. Example:

Package	Dependency	NPM	YARN
istanbul-lib-instrument@4.0.1	@babel/core@^7.7.5	@babel/core@7.8.4	@babel/core@7.9.0

|istanbul-lib-instrument@4.0.1 has a dependency on @babel/core@^7.7.5. In our current tree, that is resolved as @babel/core@7.8.4. However, with yarn, it will be resolved as @babel/core@7.9.0

Why this happens

The easiest way to understand this is that once yarn sees a dependency range in the tree (eg: @babel/core@^7.7.5) it will always be resolved by the same version (eg: @babel/core@7.9.0). Therefore, everybody depending on @babel/core@^7.7.5 will get @babel/core@7.9.0, no exceptions.

This was not true in NPM, where the same dependency can be resolved by different versions in different parts of the tree.

Resolution strategy

When possible, I've changed the dependency tree to bump a version instead of downgrading an existing one. For example, before yargs@13.2.4 were getting yargs-parser@13.1.1 and yargs-parser@13.1.2. Now it will always get yargs-parser@13.1.2 (the higher version). The assumption is that downgrading is riskier than upgrading.

However, this was not always possible. For example, url-loader@3.0.0 was getting loader-utils@1.4.0 in NPM, but will get loader-utils@1.2.3. The reason is that if I change it to 1.4.0, many packages that were getting 1.2.3 in NPM will get 1.4.0 now. I think downgrading one dependency is safer than upgrading dozens.

Validation

Here is how you can generate the data yourself and check it is correct:

• Checkout this branch
• Install deps and generate a dependency tree (NODE_OPTIONS=--max_old_space_size=8192 ./node_modules/.bin/effective-module-tree -o list >> ../yarn-tree
• Do the same for master
• Do a diff between both trees (diff yarn-tree master-tree > tree.diff).
• Open it in an editor. All the differences you see should be already accounted for in the table above.

[scinos]

Note about failing ci/wp-desktop.

Unfortunately, wp-desktop assumes wp-calypso will be built using npm, which is not the case anymore. Due how the "cross-repo" testing works, we can't change it for this branch.

So wp-desktop is failing and this branch and will fail on master the moment we merge this.

The plan is to have a PR in wp-desktop ready with the changes requires to make it work again, and merge it as soon as this PR is merged.

/cc @nsakaimbo