upgrade website to lit@2

[thescientist13]

Related Issue

related to this discussion on SSR
#576 and includes fix for #675

In order for the website, using Lit to benefit from SSR, we would need to be on the latest version so figured I would start work on the discussion by introducing Lit@2 as a first step

Summary of Changes

1. Upgraded website to Lit@2 and got website working with 1st party components (see TODO section 👇 )
2. Added ExportAllDeclaration case when walking a module with acorn
3. Did a little refactoring around setting entries into importMap and added bare import "re-map" support
4. Ensured backwards compatibility locally with my website project
5. Per Lit's website, shipping polyfill-support.js with our polyfill plugin for now, but will refactor that into its own plugin(s) as part of Add support for additional (SSR) rendering options through a render plugin type #709 where dedicated Lit plugins will be created

Also, LitElement bundle size dropped significantly, going from 27KB -> 15KB! ⚡

Will be doing some further research after this on how to actually implement SSR and hydration with Lit, as another PR (or more!)

TODO

1. Need to get @evergreen-wc upgraded to Lit@2, or vendor for the short term
   • opened issue to initiate discussion - Upgrade to / support new version lit@2 hutchgrant/evergreen-web-components#33
2. Need to get lit-redux-router upgraded to Lit@2 (for SPA mode spec)
   • opened issue to initiate discussion Upgrade to latest version / distribution of Lit@2 fernandopasik/lit-redux-router#55
   • re-enable SPA mode spec
3. Get specs passing
4. Needs add import and directory support to export map subpath exports #672 merged and rebased into this PR
5. Find cause of big logo flash / FOUC - after more debugging, may be related to observations seen in the below TODO - Lit@2 Shady DOM styles not present when pre-rendering with puppeteer #675 (comment)
6. find a solution to Lit@2 Shady DOM styles not present when pre-rendering with puppeteer #675
7. Breakout plugin-node-modules changes into standalone PR that should get merged first - added support for export wildcard module syntax #613
8. Lit perf benchmark
9. Update website documentation and samples and merge (only when Lit@2 is out of RC)
10. Potential (new) issue resulting from doing a rebase? 😞 - created intermittent pre-rendered content duplication with Lit@2 and MPA mode #739
11. Communicate final lit bumps to relevant dependencies - using Yarn resolutions for now
    • lit-redux-router - already bumped, and updated the project here
    • @evergreen-wc - upgrade to Lit@2 final release hutchgrant/evergreen-web-components#34
    • @Lion - Update Lit to v2 ing-bank/lion#1489
12. ship lit polyfills to prod as well like with @webcomponentsjs bundles?

---

As this has a couple upstream dependencies, it may be worth considering breaking out the rollup.config.js change from this PR.

[thescientist13]

@hutchgrant
Updated with the newest version of @evergreen-wc and everything is looking good! 👀 👌

[thescientist13]

Hmm, (only?) after rebasing it seems that occasionally the manifestation of #675 comes back, even though Shady DOM looks correct in the raw HTML

Will have to test on the pre-rebase branch to see if I can reproduce or not and if it's perhaps a Lit regression or not?

[thescientist13]

Latest Update

Not not able to reproduce #611 (comment) after 10 local runs so thinking things are OK so will push a rebase up, but also thinking a couple more things might help improve stability

Lit Versions / Resolutions

Currently there are multiple copies of Lit and libs because a number of packages are on rc release

% yarn why lit
yarn why v1.22.5
[1/4] 🤔  Why do we have the module "lit"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "lit"
info Reasons this module exists
   - "workspace-aggregator-c98fa550-b58a-4b7e-926a-1d051b41a008" depends on it
   - Hoisted from "_project_#@greenwood#www#@evergreen-wc#eve-button#lit"
   - Hoisted from "_project_#@greenwood#www#@evergreen-wc#eve-container#lit"
   - Hoisted from "_project_#@greenwood#cli#@lion#button#@lion#core#lit"
info Disk size without dependencies: "560KB"
info Disk size with unique dependencies: "3.08MB"
info Disk size with transitive dependencies: "3.11MB"
info Number of shared dependencies: 4
=> Found "@greenwood/cli#[email protected]"
info This module exists because "_project_#@greenwood#cli" depends on it.
=> Found "@greenwood/www#[email protected]"
info This module exists because "_project_#@greenwood#www" depends on it.
✨  Done in 0.98s.
owenbuckley@Owens-MBP-2 greenwood % yarn why lit-html
yarn why v1.22.5
[1/4] 🤔  Why do we have the module "lit-html"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "lit-html"
info Reasons this module exists
   - "workspace-aggregator-e7e16504-8779-4300-9c30-e33c7a221128" depends on it
   - Hoisted from "_project_#@greenwood#cli#lit#lit-html"
   - Hoisted from "_project_#@greenwood#www#lit#lit-html"
   - Hoisted from "_project_#@greenwood#cli#lit#lit-element#lit-html"
   - Hoisted from "_project_#@greenwood#www#lit#lit-element#lit-html"
info Disk size without dependencies: "1.29MB"
info Disk size with unique dependencies: "1.32MB"
info Disk size with transitive dependencies: "1.32MB"
info Number of shared dependencies: 1
=> Found "lit#[email protected]"
info This module exists because "_project_#lit" depends on it.
=> Found "lit-element#[email protected]"
info This module exists because "_project_#lit#lit-element" depends on it.
✨  Done in 0.92s.
owenbuckley@Owens-MBP-2 greenwood % yarn why lit-element
yarn why v1.22.5
[1/4] 🤔  Why do we have the module "lit-element"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "_project_#lit" depends on it
   - Hoisted from "_project_#lit#lit-element"
info Disk size without dependencies: "544KB"
info Disk size with unique dependencies: "2.54MB"
info Disk size with transitive dependencies: "2.56MB"
info Number of shared dependencies: 3
=> Found "@greenwood/cli#[email protected]"
info Reasons this module exists
   - "_project_#@greenwood#cli#lit" depends on it
   - Hoisted from "_project_#@greenwood#cli#lit#lit-element"
=> Found "@greenwood/www#[email protected]"
info Reasons this module exists
   - "_project_#@greenwood#www#lit" depends on it
   - Hoisted from "_project_#@greenwood#www#lit#lit-element"
✨  Done in 0.97s.

Might opt to leverage Yarn resolutions for now to get something like this

% yarn why lit
yarn why v1.22.5
[1/4] 🤔  Why do we have the module "lit"...?
[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#lit"
   - Hoisted from "_project_#@greenwood#www#lit"
   - Hoisted from "_project_#@greenwood#www#@evergreen-wc#eve-button#lit"
   - Hoisted from "_project_#@greenwood#www#@evergreen-wc#eve-container#lit"
   - Hoisted from "_project_#@greenwood#cli#@lion#button#@lion#core#lit"
info Disk size without dependencies: "560KB"
info Disk size with unique dependencies: "3.08MB"
info Disk size with transitive dependencies: "3.11MB"
info Number of shared dependencies: 3
✨  Done in 0.95s.
owenbuckley@Owens-MBP-2 greenwood % yarn why lit-html
yarn why v1.22.5
[1/4] 🤔  Why do we have the module "lit-html"...?
[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#lit" depends on it
   - Hoisted from "_project_#@greenwood#cli#lit#lit-html"
   - Hoisted from "_project_#@greenwood#cli#lit#lit-element#lit-html"
info Disk size without dependencies: "1.29MB"
info Disk size with unique dependencies: "1.32MB"
info Disk size with transitive dependencies: "1.32MB"
info Number of shared dependencies: 1
✨  Done in 0.85s.
owenbuckley@Owens-MBP-2 greenwood % yarn why lit-element
yarn why v1.22.5
[1/4] 🤔  Why do we have the module "lit-element"...?
[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#lit" depends on it
   - Hoisted from "_project_#@greenwood#cli#lit#lit-element"
info Disk size without dependencies: "544KB"
info Disk size with unique dependencies: "2.54MB"
info Disk size with transitive dependencies: "2.56MB"
info Number of shared dependencies: 2
✨  Done in 0.89s.

This should also help eliminate duplicate bundles, as it looks like eve-container is bundling its own version of lit
Without resolutions

With Resolutions

Should open up issues on our dependencies to get everything aligned on the ^2.0.0 semver ranger

@webcomponents bundle

This would be a good time to update to the latest version (2.6.0).