Streaming Content Example

Each content chunk will stream render in and render in-place whenever it is done loading. This is built into Hyperspan HTML Templates and doesn't require any special syntax to enable — it is just calling an async function as a template variable.

Example Streaming Code

The code to enable this streaming behavior is a simple html template:

import { html, placeholder } from '@hyperspan/html';

const tmpl = html`
  <section class="flex gap-4">
    <div class="card">
      <h2>Content Block 1</h2>
      <p>Waits 1000ms to render</p>
      ${AsyncRenderBlock(1000, 'Rendered after 1000ms!')}
    </div>

    <div class="card">
      <h2>Content Block 2</h2>
      <p>Waits 5000ms to render</p>
      ${placeholder(
        html`<span>Custom Loading HTML...</span>`,
        AsyncRenderBlock(5000, 'Rendered after 5000ms!')
      )}
    </div>

    <div class="card">
      <h2>Content Block 3</h2>
      <p>Waits 3000ms to render</p>
      ${AsyncRenderBlock(3000, 'Rendered after 3000ms!')}
    </div>
  </section>
  `;

AsyncRenderBlock is just a standard async function:

async function AsyncRenderBlock(waitMs: number, msg: string) {
  await sleep(waitMs);

  return html`<div>${msg}</div>`;
}