feature/restore products page with Lit v3 (#12)

* restore products page with Lit v3

* patch missing SSR page chunks

* patch in namespacing of SSR page chunks

* narrow chunks on chunk naming convention

* upgrade latest greenwood alpha.1

* remove patch package

package.json

@@ -13,7 +13,6 @@
   "keywords": [
     "Greenwood",
     "Vercel",
-    "WCC",
     "Web Components",
     "Serverless",
     "Edge",
@@ -24,16 +23,16 @@
     "clean": "rimraf public .greenwood .vercel",
     "dev": "greenwood develop",
     "build": "greenwood build",
-    "serve": "greenwood build && greenwood serve",
+    "serve": "npm run clean && greenwood build && greenwood serve",
     "start": "npm run serve"
   },
   "dependencies": {
-    "lit": "^2.8.0"
+    "lit": "^3.1.0"
   },
   "devDependencies": {
-    "@greenwood/cli": "~0.29.0",
-    "@greenwood/plugin-adapter-vercel": "~0.29.0",
-    "@greenwood/plugin-renderer-lit": "~0.29.0",
+    "@greenwood/cli": "~0.30.0-alpha.1",
+    "@greenwood/plugin-adapter-vercel": "~0.30.0-alpha.1",
+    "@greenwood/plugin-renderer-lit": "~0.30.0-alpha.1",
     "rimraf": "^5.0.0"
   }
 }

src/api/fragment.js

@@ -1,16 +1,18 @@
-import { render } from '@lit-labs/ssr/lib/render-with-global-dom-shim.js';
+import { render } from '@lit-labs/ssr';
+import { collectResult } from '@lit-labs/ssr/lib/render-result.js'
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { getProducts } from '../services/products.js';
-import { renderFromHTML } from '../services/render-to-string.js';
 import '../components/card.js';
 
+export const isolation = true;
+
 export async function handler(request) {
   const params = new URLSearchParams(request.url.slice(request.url.indexOf('?')));
   const limit = params.has('limit') ? parseInt(params.get('limit'), 10) : 5;
   const offset = params.has('offset') ? parseInt(params.get('offset'), 10) : 0;
   const products = (await getProducts()).slice(offset, offset + limit);
-  const body = await renderFromHTML(render(html`
+  const body = await collectResult(render(html`
     ${
       unsafeHTML(products.map((item, idx) => {
         const { title, thumbnail } = item;

src/api/search.js

@@ -1,10 +1,12 @@
-import { render } from '@lit-labs/ssr/lib/render-with-global-dom-shim.js';
+import { render } from '@lit-labs/ssr';
+import { collectResult } from '@lit-labs/ssr/lib/render-result.js'
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { getProducts } from '../services/products.js';
-import { renderFromHTML } from '../services/render-to-string.js';
 import '../components/card.js';
 
+export const isolation = true;
+
 export async function handler(request) {
   const formData = await request.formData();
   const term = formData.has('term') ? formData.get('term') : '';
@@ -17,7 +19,7 @@ export async function handler(request) {
   if (products.length === 0) {
     body = 'No results found.';
   } else {
-    body = await renderFromHTML(render(html`
+    body = await collectResult(render(html`
       ${
         unsafeHTML(products.map((item, idx) => {
           const { title, thumbnail } = item;

src/pages/index.html

@@ -48,7 +48,7 @@ <h2>JSON API</h2>
       <h2 id="greeting-output"></h2>
     </article>
     <article>
-      <h2>Fragments API (w/ WCC)</h2>
+      <h2>Fragments API (w/ Lit+SSR)</h2>
       <p>This is an example of a Greenwood API route returning an HTML response that is generated by server-rendering a Web Component (with Declarative Shadow DOM).  This same component is loaded on the client-side too, so that when you click the <i>Product Details</i> button, state and interactivity can still be resumed. You can see it fire in the network tab as <i>/api/fragment</i></p>
       <div id="load-products-output" class="products-cards-container" aria-live="polite"></div>
       <button id="load-products">Load More Products</button>

src/pages/products.js

@@ -0,0 +1,23 @@
+import { html } from 'lit';
+import { getProducts } from '../services/products.js';
+import '../components/card.js';
+
+export const isolation = true;
+
+export async function getBody() {
+  const products = await getProducts();
+
+  return html`
+    ${
+      products.map((product, idx) => {
+        const { title, thumbnail } = product;
+        return html`
+          <app-card
+            title="${idx + 1}) ${title}"
+            thumbnail="${thumbnail}"
+          ></app-card>
+        `;
+      })
+    }
+  `;
+}

src/pages/search.html

@@ -27,7 +27,7 @@
 
   <body>
     <article>
-      <h2>Search API (w/ WCC)</h2>
+      <h2>Search API (w/ Lit+SSR)</h2>
       <p>This is an example of a Greenwood API leveraging the FormData API and returning an HTML response that is generated by server-rendering a Web Component (with Declarative Shadow DOM).  This same component is loaded on the client-side too, so that when you click the <i>Item Details</i> button, state and interactivity can still be resumed. You can see it fire in the network tab as <i>/api/search</i></p>
       <form id="search">
         <label for="term">

src/templates/app.html

@@ -31,7 +31,9 @@ <h1>Demos</h1>
         <a href="https://github.com/ProjectEvergreen/greenwood-demo-adapter-vercel" title="Link to demonstration repo">Greenwood demonstration repo</a>
         showcasing various features deployed to and running on Vercel serverless functions.
       </p>
-      <page-outlet></page-outlet>
+      <section class="products-cards-container">
+        <page-outlet></page-outlet>
+      </section>
     </main>
 
     <footer>