Interface: SuspenseProps<Value>

import {
  AsyncTimeoutError,
  Suspense,
  defineAsyncComponent,
  html,
  type AsyncComponent,
  type AsyncComponentOptions,
  type AsyncLoadContext,
  type AsyncSource,
  type SuspenseProps,
} from '@gluonjs/core';

type ProductProps = { id: string };
const options = {
  loader: async ({ signal, attempt }: AsyncLoadContext) => {
    if (signal.aborted) throw signal.reason;
    console.log('load attempt', attempt);
    return ({ id }: ProductProps) => html`<article>Product ${id}</article>`;
  },
  loading: ({ id }: ProductProps) => html`<p>Loading ${id}…</p>`,
  error: (error: unknown, retry: () => void) => html`<button @click=${retry}>${String(error)}</button>`,
  timeout: 5_000,
} satisfies AsyncComponentOptions<ProductProps>;
const ProductPage: AsyncComponent<ProductProps> = defineAsyncComponent(options);
await ProductPage.preload();
const source: AsyncSource<string> = async ({ signal }) => signal.aborted ? 'cancelled' : 'In stock';
const suspense = { source, fallback: html`<span>Checking…</span>`, children: (value: string) => html`<span>${value}</span>` } satisfies SuspenseProps<string>;
console.log(ProductPage.resolved, ProductPage({ id: 'orbit-lamp' }), Suspense(suspense));
ProductPage.reset();
console.log(new AsyncTimeoutError(5_000).timeout);