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`<div class="bg-base-200"><span class="loading loading-infinity loading-md"></span> Custom Loading...</div>`,
        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>`;
}

There is no special "flight" syntax or anything else weird going on here. Just regular old streaming HTML with slot placeholders and template elements, plus a small JavaScript shim to replace the loading placeholders with the actual content when it streams in for wide browser compatibility. Hyperspan takes care of all of this for you. It just works.

If you want to learn more about streaming in Hyperspan, check out the Streaming Documentation.