{{# if(this.promise.isPending) }}
Loading…
{{/ if }}
{{# if(this.promise.isRejected) }}
Error: {{ this.promise.reason }}
{{/ if }}
{{# if(this.promise.isResolved) }}
Result: {{ this.promise.value }}
{{/ if }}
const target = new HTMLElement();
target.innerHTML = `Loading…`;
fetch('').then(r=>r.body).then((val) => `Result: ${val}`, (reason) => `Error: ${reason}`)
.then(html => { target.innerHTML = html; });
const html = ({ val, reason }={}) => `${(!val && !reason)
? `Loading…` : val
? `Result: ${val}`
: `Error: ${reason}`}`
const el = async (htmlTemplate, promise) => {
const target = new HTMLElement();
const updateTarget = (template) => target.innerHTML = template;
promise.then((val) => ({ val }), (reason) => ({ reason }))
.then(htmlTemplate).then(updateTarget);
updateTarget(await htmlTemplate());
return target;
}
// Custom Element that shows promise result or loading
el(html, fetch('').then(r=>r.body));
// Advanced info
// html() // => `Loading...`
// html({ val: "hi"}) // => `Result: hi`
// html({ reason: "bad"}) // => `Error: bad`