Question: how to render async inside template

[Slađan Ristić]

I see that only hyperHTML can render a promise inside a template.

How would I render a template which has another template but as a Promise?

[Andrea Giammarchi]

this project renders any asynchronous chunk of the page through promises:
https://github.com/WebReflection/hn

the live version is here:
https://webreflection.github.io/hn/top/?1

TL;DR ... whenever you resolve a promise, re-render again, it's gonna be fine 👍

[Andrea Giammarchi]

more details here: https://medium.com/@WebReflection/an-isomorphic-hacker-news-pwa-a26c3b9adf2c

TL;DR you don't need promises within holes, as the performance of re-rendering these are just fine

[Slađan Ristić]

Thank you for you response. The standards approach looks very nice.

[Slađan Ristić]

Just to explain, I am just re-rendering in a small new project I am working on. The re-rendeing uses async generators, similar to what is described here: https://crank.js.org/blog/introducing-crank

[Slađan Ristić]

Not sure if you would get email updates on edits of my comments, sorry if my multiple replies are not needed.
I am basically doing the same thing with what you do with the fx function but async. And my question was about how to have multiple of such "update-queues" in a page. Your example only has one. But I found it is not hard to do, if a parent awaits a promise of its children last output (Promise, because the "getter" goes through the same queue as a new URL) before rendering. Again, only one parent at the top of the async tree calls updatePage, as you do.

const component = createComponent();

(async () => {
  for await (const update of component.stateStream) {
    if (update.state) {
      const html = await component.render(update.state);
      render(document.body, html);
    }
  }
})().catch((error) => console.error(error));

export const createComponent = (): Component<State> => {
  const service = new Service();
  const subComponent2 = createSubComponent2();
  const rerender = () => service.update();

  const render = async (state: State) => {
    const update2 = await subComponent2.state;
    return html`
      <section>
        <button onclick=${rerender}>rerender</button>
        <p>count ${state.count}</p>
      </section>

      <section>
        ${update2.state && subComponent2.render(update2.state)}
      </section>
    `;
  };

  return {
    render,
    get state() {
      return service.state;
    },
    get stateStream() {
      return service.stateStream;
    },
  };