feat: introduce a render function for SSR

examples/lit-ssr/component.ts

@@ -0,0 +1,34 @@
+import UAParser from 'ua-parser-js'
+import { LitElement, css, html } from 'lit';
+
+export class SimpleGreeting extends LitElement {
+  static shadowRootOptions: ShadowRootInit = { mode: 'closed' }
+
+  static properties = {
+    name: {},
+  };
+
+  // Define scoped styles right with your component, in plain CSS
+  static styles = css`
+    :host {
+      color: blue;
+    }
+  `;
+
+  name: string;
+
+  constructor() {
+    super();
+    const ua = new UAParser(navigator.userAgent);
+
+    // Declare reactive properties
+    this.name = ua.getBrowser().name || 'World';
+  }
+
+  // Render the UI as a function of component state
+  render() {
+    return html`<p>Hello, ${this.name}!</p>`;
+  }
+}
+
+customElements.define('simple-greeting', SimpleGreeting);

examples/lit-ssr/example.ts

@@ -0,0 +1,48 @@
+import path from 'node:path'
+import Koa from 'koa'
+
+import { run, render, type RunnerArgs, createSession } from '../../dist/index.js'
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname)
+const app = new Koa()
+
+app.use(async (ctx) => {
+    const browserName = ctx.query.browserName || 'chrome'
+    const browserVersion = ctx.query.browserVersion || 'canary'
+    const sessionName = ctx.query.sessionName
+    const runParams: RunnerArgs = { browserName, browserVersion, rootDir: __dirname }
+
+    if (sessionName) {
+        runParams.sessionName = sessionName
+    }
+
+    if (ctx.path === '/favicon.ico') {
+        return
+    }
+
+    /**
+     * Example of server side rendering without using an SSR helper
+     */
+    if (ctx.path === '/render') {
+        ctx.body = await render(/*html*/`
+            <script type="module" src="/component.ts"></script>
+            <simple-greeting></simple-greeting>
+        `, runParams)
+        return
+    }
+
+    /**
+     * Example of server side rendering using an SSR helper
+     */
+    ctx.body = await run(async () => {
+        const { render } = await import('@lit-labs/ssr');
+        const { html } = await import('lit');
+        await import('./component.ts');
+
+        const dom = await render(html`<simple-greeting></simple-greeting>`);
+        return Array.from(dom).join('\n')
+    }, runParams)
+})
+
+app.listen(3000)
+console.log('Server running at http://localhost:3000/');

examples/lit-hydrate/package.json → examples/lit-ssr/package.json

@@ -4,9 +4,11 @@
     "type": "module",
     "dependencies": {
         "koa": "^2.15.0",
-        "lit": "^3.1.2"
+        "lit": "^3.1.2",
+        "ua-parser-js": "^1.0.37"
     },
     "devDependencies": {
-        "@lit-labs/ssr": "^3.2.2"
+        "@lit-labs/ssr": "^3.2.2",
+        "@types/ua-parser-js": "^0.7.39"
     }
 }