restore products page (support async work in Lit SSR page routes)

[thescientist13]

Unfortunately the products page is not working currently because of a couple issues

1. There is no way in Lit (SSR) to do any async work it seems, and so the content is empty - restore products page (support async work in Lit SSR page routes) #3 (comment)
   
2. Production bundling / serving seems to broken - restore products page (support async work in Lit SSR page routes) #3 (comment)
3. Seems when testing with sync work, the content is duplicated? Might need a lit polyfill for this?
   

If we can solve these, we should update the Caveats section of the Lit renderer plugin docs

[thescientist13]

Regarding async work..

The hope is that something like this in our SSR page routes.

import { html, LitElement } from 'lit';
import { getProducts } from '../services/products.js';
import '../components/card.js';

export default class ProductsPage extends LitElement {

  constructor() {
    super();
    this.products = [];
  }

  async connectedCallback() {
    super.connectedCallback();

    this.products = await getProducts();
  }

  render() {
    // ...
  }
}

// for now these are needed for the Lit specific implementations
customElements.define('products-page', ProductsPage);
export const tagName = 'products-page';

We should contribute to some of the following conversations

• [labs/ssr] ElementRenderer async rendering interoperability? lit/lit#3219
• [labs/ssr] do we need special ssr only async decorators? lit/lit#2469

[thescientist13]

Regarding bundling / serving, I think these errors are both probably related to - ProjectEvergreen/greenwood#1118

When building we can see our ="hack" around dynamically generating output files is not picking up on our products.js page route

$ greenwood build
-------------------------------------------------------
Welcome to Greenwood (v0.29.0-alpha.5) ♻️
-------------------------------------------------------
Initializing project config
Initializing project workspace contexts
Generating graph of workspace files...
building from local sources...
Running Greenwood with the build command.
pages to generate
 /
 /search/
 /404/
generated page... /
generated page... /404/
generated page... /search/
success, done generating all pages!
bundling static assets...
Circular dependency: node_modules/@lit-labs/ssr/lib/render-lit-html.js -> node_modules/@lit-labs/ssr/lib/lit-element-renderer.js -> node_modules/@lit-labs/ssr/lib/render-lit-html.js
Could not find entry path match for bundle => __products.js
optimizing static pages....
copying file... src/favicon.ico
copying file... .greenwood/manifest.json
✨  Done in 1.57s.

Then when actually serving the page, we get window is not defined error

-------------------------------------------------------
Welcome to Greenwood (v0.29.0-alpha.5) ♻️
-------------------------------------------------------
Initializing project config
Initializing project workspace contexts
Loading graph from build output...
Loading manifest from build output...
Loading resources from build output...
Running Greenwood with the serve command.
Started server at localhost:8080
ReferenceError: window is not defined
    at file:///Users/owenbuckley/Workspace/github/greenwood-demo-adapter-vercel-lit/public/lit-element.8119ea05.js:6:11
    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:297: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

---

The reason I think this is bundling related is if I look at the _public/_products.js file, we can see it is not inlining the handler function

export { h as handler } from './_products.86331d20.js';
import 'node:http';
import 'node:https';
import 'node:zlib';
import 'node:stream';
import 'node:buffer';
import 'node:util';
import 'node:url';
import 'node:net';
import 'node:fs';
import 'node:path';
import './lit-element.8119ea05.js';
import 'buffer';
import 'stream';

For example, our test case, the bundled SSR page would look like this

import { e as executeRouteModule } from './execute-route-module.6d1fac51.js';
import 'stream';
import 'http';
import 'url';
import 'punycode';
import 'https';
import 'zlib';
import 'module';
import 'buffer';

async function handler(request) {
  // ...
  const moduleUrl = new URL('./_artists.js', import.meta.url);
}

export { handler };

---

My hope is that by implementing ProjectEvergreen/greenwood#1118 we can eliminate any chunking in our SSR and API routes so that we can get one single, predictable, file output.

[thescientist13]

Some additional reading / research

• https://github.com/lit/lit/releases/tag/%40lit-labs%2Fssr%403.2.0 (server only html function)
• [labs/ssr] do we need special ssr only async decorators? lit/lit#2469 (comment)
• [ssr] It isn't possible to SSR a LitElement passed as node into a template lit/lit#4400
• [labs/ssr] Add ServerController interface allowing async work during SSR lit/lit#4390