Scripts: Download Puppeteer's Chromium binary on-demand

[aduth]

Currently, if a project defines @wordpress/scripts as a dependency, it establishes a transitive dependency on puppeteer such that installing the scripts package requires the developer to download Puppeteer's Chromium binary. This can be a substantial download (80Mb+), and is often unnecessary depending upon whether the consuming project intends to use the scripts module's end-to-end testing features.

⇒ npm i @wordpress/scripts   

...

Downloading Chromium r575458 - 80.4 Mb [====================] 99% 0.0s 
Chromium downloaded to /Users/andrew/Documents/Code/rememo/node_modules/puppeteer/.local-chromium/mac-575458

We should consider how to optimize this. One option may be to lazily download Puppeteer only when necessary, i.e. as part of the end-to-end scripts themselves.

This may require a few steps:

• Removing puppeteer as an explicit dependency
  • Still as an optionalDependencies ? Or not at all mentioned.
  • Or otherwise instructing Puppeteer installer to not yet download Chromium
    • See PUPPETEER_SKIP_CHROMIUM_DOWNLOAD environment variable
• Updating end-to-end test scripts to install Puppeteer / download Chromium if not already installed / downloaded

Implementation notes:

There may be a module we could leverage for this purpose. Some brief searching yielded few results:

• https://www.npmjs.com/package/lazy-require
• https://www.npmjs.com/package/optional-dev-dependency

Or: Simply calling npm install as a synchronous subprocess in the script(s) itself.

[gziolo]

A few notes here:

1. jest-puppeteer is about to enable support for Firefox. As of today in their master branch they have PR landed feat: support "browser" config option argos-ci/jest-puppeteer#220 which removes peerDependency on puppeteer. Instead, it asks the package consumer to install puppeteer or puppeteer-firefox depending on which browser they would like to use. We could follow this path for @wordpress/scripts, however, this doesn't solve the issue that installing one of those packages will download Chromium/Firefox on npm installl.
2. There is also puppeteer-core which is a special version of puppeteer which omits Chromium download. It probably won't work with the next version of jest-puppeteer unless aliased to puppeteer. We would also have to download Chromium with a script. Overall, I find it very fragile.
3. PUPPETEER_SKIP_CHROMIUM_DOWNLOAD environment variable (and its variations) needs to be defined in the root of the project. That means, we can't set it inside @wordpress/scripts to simplify tasks for npm package consumers. The second downside is that with this flag enabled, downloading Chromium/Firefix needs to be tackled outside of puppeteer.

This topic was also discussed in Bugzilla in the chat related to Puppeteer upgrade in Gutenberg which unblocks testing with puppeteer-firefox:
https://bugzilla.mozilla.org/show_bug.cgi?id=1539202#c7

@gziolo: Do you know if there any plans to defer installing Chromium until you run Puppeteer for the first time? Well, my point is why would you install Chromium if you want to test with Firefox?

@ochameau: Not that I know off, it looks like everything is based on npm packages.
The recent work on Jest seems to force the install of both chromium and firefox puppeteers:
argos-ci/jest-puppeteer#220

I'll try to open up the discussion with puppeteers contributors.

[gziolo]

Starting with #15712 we skip Chromium download in Travis by default. It should be revisited again once this issue is worked on.

[gziolo]

I opened this patch puppeteer/puppeteer#5325 against Puppeteer to explore some better ideas on how this could be solved on the @wordpress/scripts side.

[gziolo]

I opened this patch puppeteer/puppeteer#5325 against Puppeteer to explore some better ideas on how this could be solved on the @wordpress/scripts side.

Started #20215 that uses the latest version of puppeteer-core with the linked patch applied.