Skip to content

Commit

Permalink
(docs) show lit html dep in SSR docs examples
Browse files Browse the repository at this point in the history
  • Loading branch information
thescientist13 committed Jan 14, 2024
1 parent 493860b commit 0fcbd41
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 4 deletions.
8 changes: 6 additions & 2 deletions packages/lit-dev-content/site/docs/v2/ssr/server-usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ The template can contain custom elements, which are rendered in turn, along with

```ts
import {render} from '@lit-labs/ssr';
import {html} from 'lit';

const result = render(html`
<h1>Hello SSR!</h1>
Expand Down Expand Up @@ -68,6 +69,7 @@ This is the preferred way to handle SSR results when integrating with a streamin
```ts
import {render} from '@lit-labs/ssr';
import {RenderResultReadable} from '@lit-labs/ssr/lib/render-result-readable.js';
import {html} from 'lit';

// Using Koa to stream
app.use(async (ctx) => {
Expand All @@ -87,9 +89,10 @@ app.use(async (ctx) => {
```ts
import {render} from '@lit-labs/ssr';
import {collectResult} from '@lit-labs/ssr/lib/render-result.js';
import {html} from 'lit';

const result = render(html`<my-element></my-element>`);
const html = await collectResult(result);
const contents = await collectResult(result);
```

#### `collectResultSync()`
Expand All @@ -103,10 +106,11 @@ Because this function doesn't support async rendering, it's recommended to only
```ts
import {render} from '@lit-labs/ssr';
import {collectResultSync} from '@lit-labs/ssr/lib/render-result.js';
import {html} from 'lit';

const result = render(html`<my-element></my-element>`);
// Throws if `result` contains a Promise!
const html = collectResultSync(result);
const contents = collectResultSync(result);
```

### Render options
Expand Down
9 changes: 7 additions & 2 deletions packages/lit-dev-content/site/docs/v3/ssr/server-usage.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ The template can contain custom elements. If the custom elements are defined on

```ts
import {render} from '@lit-labs/ssr';
import {html} from 'lit';
// Import `my-element` on the server to server render it.
import './my-element.js';

Expand All @@ -42,6 +43,7 @@ const result = render(html`
To render a single element, you render a template that only contains that element:

```ts
import {html} from 'lit';
import './my-element.js';

const result = render(html`<my-element></my-element>`);
Expand Down Expand Up @@ -72,6 +74,7 @@ This is the preferred way to handle SSR results when integrating with a streamin
```ts
import {render} from '@lit-labs/ssr';
import {RenderResultReadable} from '@lit-labs/ssr/lib/render-result-readable.js';
import {html} from 'lit';

// Using Koa to stream
app.use(async (ctx) => {
Expand All @@ -91,9 +94,10 @@ app.use(async (ctx) => {
```ts
import {render} from '@lit-labs/ssr';
import {collectResult} from '@lit-labs/ssr/lib/render-result.js';
import {html} from 'lit';

const result = render(html`<my-element></my-element>`);
const html = await collectResult(result);
const contents = await collectResult(result);
```

#### `collectResultSync()`
Expand All @@ -107,10 +111,11 @@ Because this function doesn't support async rendering, it's recommended to only
```ts
import {render} from '@lit-labs/ssr';
import {collectResultSync} from '@lit-labs/ssr/lib/render-result.js';
import {html} from 'lit';

const result = render(html`<my-element></my-element>`);
// Throws if `result` contains a Promise!
const html = collectResultSync(result);
const contents = collectResultSync(result);
```

### Render options
Expand Down

0 comments on commit 0fcbd41

Please sign in to comment.