decouple polyfills for serialization from polyfills needed for users

[thescientist13]

Type of Change

• New Feature Request
• Documentation / Website
• Improvement / Suggestion
• Bug
• Other (please clarify below)

Summary

It was observed as part of #187 that if the @webcomponentsjs/webcomponents were needed in order to get properer serialization out of puppeteer. However, this dependency for puppeteer may be different from what is actually needed by the application / user itself.

The goal of this task to evaluate ways to isolate the dependency needed of puppeteer from Polyfills Plugin

Details

Some potential thoughts

1. Easiest could just be to see if a newer version of puppeteer exists that work (or review additional in browser.js - page.evaluateOnNewDocument) see comment
2. Configure puppeteer with a Chrome instance instead of Chromium - I think this will be harder given Chrome requires platform specific bindings, and is not as portable as Chromimum (which is bundled with puppeteer) so making it work with Chromium will be the best solution
3. Find a way to "side load" these scripts into the browser itself and keep index.html just the CLI / PolyfillsPlugin (e.g. page.evaluateOnNewDocument) - some interesting page APIs that might help
4. Different index.html for puppeteer?

This would also allow us to remove the setupFiles workaround in test-bed.js

[thescientist13]

Ok, looks like there is one newer version of puppeteer / Chromium available. Will see what Chromium 78 brings with it.

$ yarn why puppeteer
yarn why v1.12.3
[1/4] 🤔  Why do we have the module "puppeteer"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "_project_#@greenwood#cli" depends on it
   - Hoisted from "_project_#@greenwood#cli#puppeteer"
info Disk size without dependencies: "247.43MB"
info Disk size with unique dependencies: "248.07MB"
info Disk size with transitive dependencies: "249.8MB"
info Number of shared dependencies: 32
✨  Done in 0.95s.

https://pptr.dev/#?product=Puppeteer

Wonder if maybe we'll just need to manually point puppeteer to Chrome instead of Chromium?

edit: nope, that didn't work. Let me try configuring puppeteer with Chrome then.

[thescientist13]

So played around and found some interesting APIs we could try and use but the sequencing of it all might be kind of tricky.
https://pptr.dev/#?product=Puppeteer&version=v1.19.0&show=api-class-page

In particular, something like addScriptToPage only happens after the page has been goto, so I think the final solution will be closer to the 4th option in the description, by creating a custom index.html for puppeteer so we can

1. Read the contents of index.html template (change)
2. Insert the polyfill (change)
3. serialize the page
4. get the contents
5. replace the same polyfill script with an empty string (change)

Might be a little hacky since it will but it will definitely allow us to decouple the Polyfill plugin from the build itself. Hoping all these new steps can happen within the same file at least.