chore(@automattic/page-template-modal): Use the same dependencies than ETK

[scinos]

Changes proposed in this Pull Request

• [ETK] Replace "*" version ranges with the actual range extracted from yarn.lock
• [@automattic/page-template-modal] Use the same versions than ETK

Testing instructions

• Note that the dist files produced by ETK have not changed. To verify: build ETK in this branch and trunk, and diff all files inside dist/**/* folders. Example: for file in apps/editing-toolkit/**/dist/**/*; do diff $file ../wp-calypso-trunk/$file; done

[matticbot]

Test live: https://calypso.live/?branch=fix/sync-dependencies-with-etk

[matticbot]

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

App Entrypoints (~363 bytes removed 📉 [gzipped])

name                 parsed_size           gzip_size
entry-gutenboarding       -169 B  (-0.0%)     -363 B  (-0.1%)

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

Sections (~2 bytes removed 📉 [gzipped])

name             parsed_size           gzip_size
woocommerce            -64 B  (-0.0%)       -2 B  (-0.0%)
settings               -64 B  (-0.0%)       -2 B  (-0.0%)
reader                 -64 B  (-0.0%)       -2 B  (-0.0%)
plugins                -64 B  (-0.0%)       -2 B  (-0.0%)
jetpack-connect        -64 B  (-0.0%)       -2 B  (-0.0%)
hosting                -64 B  (-0.0%)       -2 B  (-0.0%)
account                -64 B  (-0.0%)       -2 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 (~687 bytes removed 📉 [gzipped])

name                                                 parsed_size           gzip_size
async-load-design-wordpress-components-gallery           -1339 B  (-0.2%)     -687 B  (-0.4%)
async-load-quick-language-switcher                         -64 B  (-0.0%)       -2 B  (-0.0%)
async-load-design-playground                               -64 B  (-0.0%)       -2 B  (-0.0%)
async-load-design-blocks                                   -64 B  (-0.0%)       -2 B  (-0.0%)
async-load-design                                          -64 B  (-0.0%)       -2 B  (-0.0%)
async-load-calypso-components-web-preview-component        -64 B  (-0.0%)       -2 B  (-0.0%)
async-load-calypso-blocks-nav-unification-modal            -64 B  (-0.1%)       -2 B  (-0.0%)
async-load-calypso-blocks-editor-checkout-modal            -64 B  (-0.0%)       -2 B  (-0.0%)
async-load-automattic-search                               -64 B  (-0.1%)       -2 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 Editing Toolkit Plugin on WordPress.com
Please ensure your changes work on WordPress.com before merging.

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

[noahtallen]

Makes sense to me. 👍

Should we add a lint check to make sure we aren't using * for versions? I think there must be some confusion about how to handle dependencies across the monorepo

[roo2]

rebased and no differences to the build outputs for me either using that diff command, LGTM 👍

[scinos]

Should we add a lint check to make sure we aren't using * for versions?

That's an excellent idea! Once we reached "zero *" state (I think ETK was the only one left), I'll start working on some plugin for eslint to lint or package.json files.