feat: async generator functions / async components

[gustavopch]

trafficstars

Hey, thanks for your work on this lib.

Crank.js allows components to be defined as async generator functions. For example:

async function IPAddress () {
  const res = await fetch("https://api.ipify.org");
  const address = await res.text();
  return <div>Your IP Address: {address}</div>;
}

await renderer.render(<IPAddress />, document.body);
console.log(document.body.innerHTML); // <div>Your IP Address: 127.0.0.1</div>

Can Hacky support it too? It seems it would be mostly a matter of adding await in some parts of the code.

[aidenybai]

This would be cool to support, but I'm not exactly sure how to implement this at the moment. I'll look into how Crank.js implements this feature.

[gustavopch]

@aidenybai I'd imagine something like this applied to https://github.com/aidenybai/hacky/blob/105fa12777990b7680c4964beea142392a772bc9/src/component.ts and then likely other changes to add await to data.diff() where it's called:

-  data.diff = () => {
+  data.diff = async () => {
-    const next = <VNode | VNode[]>component.next().value;
+    const next = await (await <VNode | VNode[]>component.next()).value;
     if (Array.isArray(next)) {
       return <VNode>h('_', undefined, ...next);
     } else {
       return <VNode>next;
     }
   };