Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

upgrade website to lit@2 #611

Merged
merged 19 commits into from
Oct 6, 2021

Conversation

thescientist13
Copy link
Member

@thescientist13 thescientist13 commented May 20, 2021

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
  2. Need to get lit-redux-router upgraded to Lit@2 (for 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
  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 thescientist13 added enhancement Improve something existing (e.g. no docs, new APIs, etc) help wanted Extra attention is needed question Further information is requested website Tasks related to the projects website / documentation documentation Greenwood specific docs CLI SSR discussion tied to an ongoing discussion or meeting notes labels May 20, 2021
@thescientist13 thescientist13 added this to the 1.0 milestone May 20, 2021
@thescientist13 thescientist13 self-assigned this May 20, 2021
@thescientist13 thescientist13 changed the title Enhancement/upgrade website lit 2 support Enhancement/upgrade website lit@2 support May 20, 2021
@thescientist13 thescientist13 changed the title Enhancement/upgrade website lit@2 support Enhancement/upgrade website lit@2 support (wildcard export all declaration support) May 21, 2021
@thescientist13 thescientist13 changed the title Enhancement/upgrade website lit@2 support (wildcard export all declaration support) Enhancement/upgrade website lit@2 support and wildcard export all declaration support May 21, 2021
@thescientist13 thescientist13 removed the documentation Greenwood specific docs label May 22, 2021
@thescientist13 thescientist13 removed CLI help wanted Extra attention is needed labels May 22, 2021
@thescientist13 thescientist13 changed the title Enhancement/upgrade website lit@2 support and wildcard export all declaration support upgrade website to lit@2 May 22, 2021
@thescientist13 thescientist13 added chore unit testing, maintenance, etc and removed enhancement Improve something existing (e.g. no docs, new APIs, etc) labels May 22, 2021
@thescientist13 thescientist13 force-pushed the enhancement/upgrade-website-lit-2-support branch from 209feae to 30c661c Compare May 27, 2021 20:09
@thescientist13 thescientist13 removed their assignment May 27, 2021
@thescientist13
Copy link
Member Author

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

@thescientist13
Copy link
Member Author

Hmm, (only?) after rebasing it seems that occasionally the manifestation of #675 comes back, even though Shady DOM looks correct in the raw HTML
Screen Shot 2021-09-23 at 1 26 10 PM
Screen Shot 2021-09-23 at 11 16 52 AM

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 thescientist13 added the P0 Critical issue that should get addressed ASAP label Sep 24, 2021
@thescientist13 thescientist13 force-pushed the enhancement/upgrade-website-lit-2-support branch from b60c1a3 to 8969fa0 Compare September 28, 2021 00:13
@thescientist13
Copy link
Member Author

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 "lit@2.0.0-rc.2"
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#lit@2.0.0"
info This module exists because "_project_#@greenwood#cli" depends on it.
=> Found "@greenwood/www#lit@2.0.0"
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 "lit-html@2.0.0"
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#lit-html@2.0.0-rc.3"
info This module exists because "_project_#lit" depends on it.
=> Found "lit-element#lit-html@2.0.0-rc.3"
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 "lit-element@3.0.0-rc.2"
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#lit-element@3.0.0"
info Reasons this module exists
   - "_project_#@greenwood#cli#lit" depends on it
   - Hoisted from "_project_#@greenwood#cli#lit#lit-element"
=> Found "@greenwood/www#lit-element@3.0.0"
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 "lit@2.0.0"
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 "lit-html@2.0.0"
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 "lit-element@3.0.0"
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
Screen Shot 2021-09-27 at 8 17 10 PM

With Resolutions
Screen Shot 2021-09-27 at 8 23 39 PM

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).

@thescientist13 thescientist13 marked this pull request as ready for review October 4, 2021 16:00
@thescientist13 thescientist13 added the Plugins Greenwood Plugins label Oct 4, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
alpha.0 chore unit testing, maintenance, etc CLI discussion tied to an ongoing discussion or meeting notes P0 Critical issue that should get addressed ASAP Plugins Greenwood Plugins SSR v0.17.0 website Tasks related to the projects website / documentation
Projects
None yet
2 participants