⚛️ Add Suspense and ErrorBoundary examples

[DAreRodz]

I've added two simple examples to check if Suspense and useErrorBoundary work out of the box. Using contexts was already tested, and it works fine, without any problems.

To test error boundaries, I did the following: ✅

• Added a button inside Interactive Child that makes the render throw an error.
• Used the useErrorBoundary hook inside Interactive Parent to render a fallback when an error reaches the component. The fallback shows a button to recover from the error.

To test Suspense, I added a lazy-loaded component that renders inside Interactive Child. 🚧

[luisherranz]

This Suspense wrapper needs to be on the parent block. Otherwise, we are only testing that it works in Preact, aren't we? 😄

[DAreRodz]

Sure, sure! This is just the first step, which is still not working. 😅

I switched the PR back to a draft.

[luisherranz]

Why do you need the key? Is it a Suspense thing?

[DAreRodz]

It's not, I was just testing if I can make Suspense hydration work (see #70 (comment)).

I noticed that even if key could fix the error by making Preact recognize the elements and overwriting it, as key is not serialized during save(), this is not a valid approach.

[luisherranz]

We can use wp-key if necessary and then switch to key in the toVdom (or options.vnode).

Let me know if that helps because I was even thinking that it should be wp-key to make everything related to this hydration prefixed with wp-.

[DAreRodz]

Yes, I was just thinking of using a directive for that. Let me try it.

[luisherranz]

Note here for the future: we need to figure out how this would work with out-of-order hydration. Suspense and ErrorBoundary are even more critical than context. I.e., if we hydrate a children component that throws (an error or a promise) before we hydrate the parent component that catches it (with ErrorBoundary or Suspense) the system may not work as expected.

[DAreRodz]

I'm afraid the Suspense component is not working correctly; it fails during hydration. 😬

Let's say we render the fallback during save(). That's what toVdom() will transform into the initial vDOM.

So, this JSX

<Suspense fallback={<div>Loading...</div>}>
    <LazyParagraph>Hello!</LazyParagraph>
</Suspense>

produces this HTML.

<div>Loading...</div>

Then, when Suspense is hydrated, we have two cases:

1. the lazy loaded component is still being loaded and cannot be rendered; it renders fallback, and so children once the component is ready.
2. the lazy loaded component is ready and renders children right away.

Surprisingly, the fallback is preserved in both cases when children is rendered.

<p>Hello!</p>
<div>Loading...</div>

I'll look deeper later to see if we can make this work.

[DAreRodz]

It turns out that Suspense is not rendering the fallback during hydration. 😕

It does, though, if Suspense is rendered after hydration (e.g., using useEffect() to update some state)...

[luisherranz]

I've tested this in isolation, and even though I can't make Suspense work with preact-render-to-string (I'm not sure it supports it), it works fine when I create the SSR manually: https://codesandbox.io/s/sad-poincare-zzrql8?file=/src/index.js

I'm not sure what we are doing differently here.

[luisherranz]

I'm not sure if I'm doing something wrong, but in isolation, I'm not getting the same behavior with Preact's Suspense as with React's Suspense.

[luisherranz]

@DAreRodz and I were able to reproduce the same behavior on Preact, so it's not something we are doing wrong: https://stackblitz.com/edit/vitejs-vite-r6rhtx?file=src%2Fmain.jsx

It looks like Suspense in Preact is still a bit buggy (it's still an experimental API).

[DAreRodz]

I've removed the Suspense example. We can merge the useErrorBoundary one and try again with Suspense once the API is more stable.

[luisherranz]

LGTM!