0.1.28 - Async Iterator Support

💫 Async Iterator Support

For customized complex fallbacks:

import { $, h as html } from "hstd";

async function* UserProfile(userId: string): AsyncGenerator<HSTDFragment> {

    const
        loadingDots: $<number> = $(0, $ => $ % 3),
        loadingDotsInterval: string = setInterval(() => loadingDots.$++, 700)
    ;

    yield html`
        <span>Loading${$`.`.repeat(loadingDots.into($ => $ + 1))}</span>
    `;
    
    const { name, age, link } = await fetch(`/api/user/${userId}`).then(res => res.json());

    clearInterval(loadingDotsInterval);

    yield html`
        <div>
            <label>${name}</label>
            <label>${age}</label>
            <label>${link}</label>
        </div>
    `;

}

document.body.append(...html`${UserProfile("ihasq")}`);

or write your own Suspense:

async function* Suspense({ fallback }, main) {
    yield* fallback;
    yield* await main;
}

document.body.append(...html`
    ${Suspense({ fallback: html`<label>Loading...</label>` },
        User({ id: "ihasq" })
    )}
`)