demo/restore products page and upgrade to Lit v3

[thescientist13]

resolves #3 / #6

Changes

1. Upgraded lit to v3 and update import for render
2. Refactor renderToString to use new collectResult SSR API

TODO

1. Products page has double rendering in dev
   
2. All SSR fails when running serve

        ReferenceError: HTMLElement is not defined
        at file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/public/api/card.04a6f554.js:204:752
        at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
        at async Promise.all (index 0)
        at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
        at async file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/node_modules/@greenwood/cli/src/lifecycles/serve.js:305:29
        at async file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/node_modules/@greenwood/cli/src/lifecycles/serve.js:275:7
        at async file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/node_modules/@greenwood/cli/src/lifecycles/serve.js:233:5
        at async file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/node_modules/@greenwood/cli/src/lifecycles/serve.js:200:5
      

3. Global registry conflicts when running greenwood serve, ex. load the API routes a couple times (seems fine when run on serverless) - feature/discussion 1117 Isolation Mode (v1) ProjectEvergreen/greenwood#1206
   • maybe this is why workers are good?

   Error: Failed to execute 'define' on 'CustomElementRegistry': the name "app-card" has already been used with this registry
   at CustomElementRegistry.define (file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/public/lit-element.2f782e55.js:220:23)
   at file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/public/api/card.658da880.js:11316:16
   at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
   at async Promise.all (index 0)
   at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
   at async file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/node_modules/@greenwood/cli/src/lifecycles/serve.js:305:29
   at async file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/node_modules/@greenwood/cli/src/lifecycles/serve.js:275:7
   at async file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/node_modules/@greenwood/cli/src/lifecycles/serve.js:233:5
   at async file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/node_modules/@greenwood/cli/src/lifecycles/serve.js:200:5

---

Upstream Needs Tracking / Notes

ProjectEvergreen/greenwood#1197

Greenwood CLI

1. Looks like are we missing HTML intercepting and optimizing during SSR pages bundling
2. prune hydration data / page data from compilation
3. plugins have to manage their own type="module-shim"
4. Adjacent needs - Blocking issues
   • custom response and constructor props for SSR pages ProjectEvergreen/greenwood#1177
   • add support for (progressive) hydration for compatible renderers (globalThis for state?) ProjectEvergreen/greenwood#880 (will WCC need hydration support?)

Lit Renderer

1. Upgrade lit renderer plugin to lit v3 SSR
2. "Full" Hydration support
3. Document Caveats in Lit Renderer Plugin README
   • @lit-labs/ssr-client as a first party dependency
   • hydration script is needed
   • have to use getBody / getPage API
   • hydration will be needed? - export const hydration = true
   • data loader will be needed? - export const function loader() => { /* ... */ }

---

Thoughts / Questions

1. How come the Lit card re-renders on client side? (make a repro repo)
   • need the polyfill?
   • chrome doesn't already support it?
2. After this, could we suggest adding ourselves to the list of tools here (or maybe after the website redesign)? - https://lit.dev/docs/ssr/overview/

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
greenwood-demo-adapter-vercel-lit	❌ Failed (Inspect)			Feb 27, 2024 2:47am
greenwood-lit-ssr	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 27, 2024 2:47am

[thescientist13]

So interestingly, if I add the hydration support script from Lit, the double products page render goes away but....

<script type="module" src="/node_modules/@lit-labs/ssr-client/lit-element-hydrate-support.js"></script>

The interactivity breaks lolsad, The constructor is definitely running based on the logging, but not the render function? 🤔

[thescientist13]

Will keep this as a reference and will drive through the polished through #12