feature/issue 1197 Lit v3 upgrade and SSR fixes and enhancements

[thescientist13]

Related Issue

resolves #1197

Depends on the following PRs being merged first

1. feature/discussion 1117 Isolation Mode (v1) #1206
2. feature/issue 142 adopt ESM and bundler friendly fork of acorn-jsx wcc#143
3. Feature/issue 140 adopt ESM and bundler friendly fork of escodegen wcc#141

See demo repo - thescientist13/greenwood-lit-ssr#9

Summary of Changes

1. Upgrade docs / Lit renderer plugin to v3
2. Add custom exportConditions for SSR pages and API routes to now include node (like used in Lit's SSR implementation)
3. Found some areas where we missing were HTML intercepting and optimizing during SSR pages bundling
4. Removed need for Lit polyfill-support in the CLI (see create Lit specific polyfill plugin #728)
   • This configuration is suitable for serving to modern browsers that can run ES2021 JS without polyfills
5. Update Lit Renderer plugin README for new usage (getBody API)
6. Upgrade WCC to version 0.12.0

TODO

1. Implement basic hydration support for client script - https://lit.dev/docs/ssr/client-usage/#[email protected]
   • should it be conditional?
2. Will want to track full data hydration support as part of add support for (progressive) hydration for compatible renderers (globalThis for state?) #880 and custom response and constructor props for SSR pages #1177
   • export const hydration = true
   • data loader will be needed? - export const function loader() => { /* ... */ }
3. Find a solution around the customElements.define issue - feature/discussion 1117 Isolation Mode (v1) #1206
   • is it a risk to not have this check in WCC?
   • VM modules (for greenwood serve only)? - https://lit.dev/docs/ssr/server-usage/#running-ssr-in-a-vm-module-or-the-global-scope
   • https://github.com/lit/lit/tree/main/packages/labs/ssr/src/demo
   • see Encapsulating SSR Rendering (Isolation Mode) #1117
   • maybe we should have an "isolation" export to bring Workers back in on an opt-in basis?
4. Needs to handle some downstream dependency ESM patches for WCC
   • fork acorn-jsx to achieve our own ESM compat? - adopt a bundle friendly and ESM compatible version of acorn-jsx wcc#142
     • Provide an ES Module version acornjs/acorn-jsx#112
     • tokTypes of acorn-jsx will be different TokenType classes if acorn itself is loaded via ESM acornjs/acorn-jsx#133
     • Add support for ES Module acornjs/acorn-jsx#113
   • fork our own version of escodegen - adopt a bundle friendly and ESM compatible fork of escodegen wcc#140
     • require of _package.json_ complicates bundling estools/escodegen#455
     • then we can remove our custom greenwoodJsonLoader
5. Update Lit Renderer Package README
   • getBody limitation for SSR pages
6. looks like we don't need to enable preferBuiltins for Lit in our Rollup config anymore?
7. WCC version 0.12.0 and delete patches/ + postinstall - https://github.com/ProjectEvergreen/wcc/releases/tag/0.12.0
8. Default Hydration Settings for plugins and docs
   • WCC - false
   • Lit - true
9. clean up TODOs / comments / cross-tracking
   • confirm import map snapshot changes - confirmed that this got moved to SSR client - [ssr-client] Move experimental hydrate modules lit/lit#3720
     • before - https://unpkg.com/browse/[email protected]/
     • after - https://unpkg.com/browse/[email protected]/
   • lit polyfills removal / overlap w/ layouts + pages work - Layouts (Templates) and Pages #955
   • should polyfills plugin only optimize? - could be an issue when prerendering, they assume window

---

Thoughts / Questions

1. check if exportConditions are still needed after upgrade Rollup and all plugins to 3.x #1087
   • yes, but just node - [node-resolve] Support conditional exports defined in package.json rollup/plugins#362 (comment)
2. plugins have to manage their own type="module-shim" 🤔
   • yes for now, but I think we can probably plan to get this into the release move import maps shim to polyfills plugin #1114
3. Lit - should track as part of v0.30.0 release blog post
   • discussion about "Server Only Components"
   • could we suggest adding ourselves to the list of tools here (or maybe after the website redesign)? - https://lit.dev/docs/ssr/overview/
4. How come the Lit card re-renders on client side in our demo repo? - ah, most likely due to not populating the data on the client side - Hydration always results in duplicate render lit/lit#3651
   • need the polyfill?
   • chrome doesn't already support it? (is this a shadowrootmode thing?)