Implement async function component rendering

[andreafuturi]

Implement async function component rendering.

• src/diff/index.js

  • Add async/await support in the diff function to handle async function components.
  • Check if the component returns a Promise and await it in the diff function.
  • Update the commitRoot function to handle async components.
  • Add async/await support in the diffElementNodes function.
  • Add async/await support in the diffChildren function.

• src/component.js

  • Add async/await support in the renderComponent function to handle async function components.
  • Check if the component returns a Promise and await it in the renderComponent function.
  • Add async/await support in the process function to handle async function components.

• src/render.js

  • Add async/await support in the render function to handle async function components.
  • Check if the component returns a Promise and await it in the render function.
  • Add async/await support in the hydrate function to handle async function components.

• compat/client.js

  • Add async/await support in the render function to handle async function components.
  • Check if the component returns a Promise and await it in the render function.
  • Add async/await support in the hydrateRoot function to handle async function components.

• compat/client.mjs

  • Add async/await support in the render function to handle async function components.
  • Check if the component returns a Promise and await it in the render function.
  • Add async/await support in the hydrateRoot function to handle async function components.

• test/browser/asyncFunctionComponent.test.js

  • Add tests to ensure async function components render correctly.
  • Add tests to handle async operations properly in async function components.

---

For more details, open the Copilot Workspace session.

[rschristian]

Hey, may I ask what prompted this? Is there something in particular you're after or trying to fix?

[andreafuturi]

Sure! I was exploring a way to have async components functions in Preact to be able to await blocking functions outside of hooks.

I need to implement server side data fetching in a framework I'm building https://github.com/andreafuturi/Singularity

I found some solutions online but everything is outdated or not working so I decided to see if I can do something myself with the help of AI.

[rschristian]

Well, a truly async renderer would involve considerably more work than sprinkling async/await in a few places, not to mention, just adding await is a considerable breaking change that has a massive impact on the bundle size. There's pretty much no way we could merge this into Preact X.

Is there a reason why suspense doesn't work for your needs? Suspense, plus renderToStringAsync() from RTS should fit that use case pretty nicely.

[andreafuturi]

Yes I could have imagined it would need quite some work, but for sure I wasn't considering it could even influences bundle size.

Yes I tried Suspense before with no luck, I might have to try it again. What's this RTS you're talking about?

I can seem to find renderToStringAsync only for React

[rschristian]

RTS = render to string; preact-render-to-string, specifically. Docs for rtsAsync.

[andreafuturi]

Wow thank you! That works now, I have no idea why I have already seen Suspense and lazy documentation but I never noticed there was a renderToStringAsync export in preact-render-to-string. I always used the normal rendertoString function and that for sure was the problem! Thanks again :)

[JoviDeCroock]

@andreafuturi do take the pitfalls lined out in #4442 in account when you do suspended hydration

[rschristian]

rtsAsync is fairly new tbf! But you can utilize it for data fetching and the like beyond just lazy for sure.

I realize our docs are quite lacking here so I'm working on getting some proper SSR demos built next, hopefully it'll help people in the future. Sorry for the inconvenience, we're trying to get better at docs/showing off all the things you can take advantage of.

[andreafuturi]

Aaah ok I see, no worries at all! I completely understand, thanks for the amazing work 🙏🏻 Keep it up!