feat: streaming rendering with Suspense boundaries as flush trigger

[JoviDeCroock]

Changes

• Updates against current master
• Polyfills mask as we stopped setting that explicitly without useId invocations

Preact

I use a build of Preact with comments enabled for the demo https://github.com/preactjs/preact/pull/4128

Notes

While creating this demo I noticed a bug where when we suspend twice from a streaming boundary we end up in an infinite loop, also we can't unset _parent while streaming this would need to happen after everything 😩

Solved it by using _vnodeId to have consistent ids for Suspense boundaries, keep checking for additions to the boundaries with forkSuspended and more fixes.

Demo

The demo basically forces a less than ideal scenario:

• The first boundary gets flushed which gives us the title and the loading placeholder - hydration pauses
• On the server we are resolving the data for the second boundary (10 pokemons)
• The second boundary gets flushed which gives us the list of 10 pokemons - hydration resumes
• On the client we now hit useQuery which is suspense enabled and throws as it doesn't have the pokemons - hydration pauses
• On the client the 10 pokemons get fetched - hydration finishes

Normally front-end data-fetching libraries will include the data in a <script> tag that gets flushed to the client so the data-restoration is synchronous. This demo however is meant to show off the resumed hydration.