document default page export support for Lit SSR based routes

[thescientist13]

Summary

Greenwood is adding support for using a custom element as the default export for Lit SSR's renderer plugin

import { LitElement, html } from "lit";

export default class ProductsPage extends LitElement {
  connectedCallback() {
    this.products = [{
        id: 1,
        name: "Product 1",
      }, {
        id: 2,
        name: "Product 2",
      }];
  }

  render() {
    const { products } = this;

    return html`
      <h1>Products Page</h1>
      <ul>
        ${products.map((product) => {
          const { id, name } = product;

          return html`<li>${id}) ${name}</li>`;
        })}
      </ul>
    `;
  }
}

Additional Details

As documented here in the Lit docs
https://github.com/lit/lit/tree/main/packages/labs/ssr#notes-and-limitations

For constructor props / dynamic routing, properties will need to be used for LitElement, etc

// src/pages/product/[id].js
import { LitElement, html } from "lit";

export default class ProductDetailsPage extends LitElement {
  static get properties() {
    return {
      id: { type: Number },
    };
  }

  render() {
    const { id } = this;

    return html`
      <h1>Product Details Page</h1>
      <p>Product ID: ${id}</p>
    `;
  }
}

Greenwood Issue

ProjectEvergreen/greenwood#1646