handling puppeteer serialization issues with lit 2 and Shady DOM

[thescientist13]

Related Issue

resolves #675, and fixes the critical TODOs from #611

1. Find cause of big logo flash / FOUC
2. broken component rendering and styles when pre-rendering with puppeteer

Summary of Changes

1. Reading the Polyfills section of the lit.dev docs informs that if using webcomponents-bundle.js (like we do for puppeteer) then we should also include lit.polyfill-support.js and well, it worked! Silly me for not just RTFM sooner, lol.

Deploy preview available at #726

TODO

1. lit/polyfill-support.js should only be conditionally added if the user is actually using lit, so we should add a check, otherwise it will be 404 for non lit users. Could reuse refactor root package node modules resolution #725
2. Should track the above into its own plugin-polyfills-lit, likely as part of our next Project. - create Lit specific polyfill plugin #728

> this work is ongoing, just wanted to get something out there for conversation's sake

Summary of Changes

1. Removing the static optimization setting makes things work, likely because this preserves CSS-in-JS styles missing when the component's JS is not available at runtime anymore. Would like to it make work just like lit@1 though.

---

Also, not sure why path to evergreen.svg is unhappy now on nested routes?

[thescientist13]

Hmm, not sure what's up with this build failure / stalling in Windows.
https://github.com/ProjectEvergreen/greenwood/runs/3611389959?check_suite_focus=true

prerendering page... /
prerendering page... /plugins/context/
prerendering page... /plugins/custom-plugins/
prerendering page... /plugins/
prerendering page... /plugins/resource/
prerendering page... /plugins/rollup/
prerendering page... /plugins/server/
(node:4368) UnhandledPromiseRejectionWarning: Error: EBUSY: resource busy or locked, copyfile 'D:\a\greenwood\greenwood\node_modules\@webcomponents\webcomponentsjs\bundles\webcomponents-sd-ce-pf.js' -> 'D:\a\greenwood\greenwood\public\bundles\webcomponents-sd-ce-pf.js'
prerendering complete for page /about/goals/.
(Use `node --trace-warnings ...` to show where the warning was created)
prerendering complete for page /about/how-it-works/.
(node:4368) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
prerendering complete for page /about/features/.
(node:4368) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
prerendering complete for page /docs/configuration/.
prerendering complete for page /about/.
prerendering complete for page /docs/component-model/.
prerendering complete for page /docs/css-and-images/.

Tested on a Windows VM and everything was fine, so I guess some sort of race condition? Only thing I can think of is [here in plugin-polyfills maybe there are some async shenanigans happening? 🤔

await Promise.all(polyfillFiles.map(async (file) => {
  const from = path.join(cwd, nodeModuleRoot, file);
  const to = path.join(outputDir, file);

  return !fs.existsSync(to)
    ? fs.promises.copyFile(from, to)
    : Promise.resolve();
}));