Suspense and error handle in web-components

[aralroca]

Suspense: Generate a suspense phase if your web-component is async and you want to show something while the promise is pending. It also should work during HTML streaming.

export default async function MyWebComponent({}, { state }) {
  const foo = await fetch(/* ... */).then((r) => r.text());

  return <div>{foo}</div>;
}

MyWebComponent.suspense = (props, webContext) => <div>loading...</div>;

Error: generate a error phase if your web-component throws an error and you want to show something without crash the rest of the page.

import { WebContext } from 'brisa';

export default function SomeWebComponent() {
   /* some code */
}

SomeWebComponent.error = ({ error }, webContext: WebContext) => {
  return <p>Oops! {error.message}</p>;
};