$await

With the $await directive you can choose what to render based on the current state of a Promise.

const query = fetch("https://example.org/products.json").then((res) => res.json());

$await(query, $element("span", {}, "Loading...")).
$then((result: object) => $element("pre", {}, JSON.stringify(result, null, 8))).
$catch(() => $element("span", {}, "ohno"))
.mount(document.body);

Every renderable is optional, so you can omit any states you don’t care about.

const query = fetch("https://example.org/products.json").then((res) => res.json());

$await(query).
$catch(() => $element("span", {}, "I knew it wouldn't work"))
.mount(document.body);

The promise can be a store which makes it really easy to retry a failed promise.

const makeQuery = () => fetch("https://example.org/products.json").then((res) => res.json());
const query = $store(makeQuery());

$await(query, $element("span", {}, "Loading...")).
$then((result: object) => $element("pre", {}, JSON.stringify(result, null, 8))).
$catch(() => $element("button", { on: { click: () => query.value = makeQuery() } }, "Retry"))
.mount(document.body);