I checked your approach. My first attempt looked a
lot like yours, but I used an AsyncGenerator. Then I benchmarked it and found out it was slow as heck so I started thinking about other ways to do it.
Iterables/Generators seem like they work well for this problem and it's the first thing I reached for too, but out-of-order streaming is really hard to do with the generator yield syntax. You have to yield things one by one as they come in, and you can't await or you're back to a slow AsyncGenerator. I wound up radically simplifying my template function to just return { content: string, asyncContent: Promise[] } instead and then made different render strategies that handle the resolution of the asyncContent differently: https://github.com/vlucas/hyperspan/blob/main/packages/html/...
I'd love to chat about the approach I used. My email is on my website.