CanJS Translation

README.md

{{# 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`