serve

Construit une Response HTTP à partir d’une page Flow et des options de négociation.

Signature#

serve(request, page, adapter, options?) prend la requête, une fonction produisant la page et un adaptateur, puis retourne la réponse encodée.

import { serve } from "@vincle/flow/http";

function serve(
  req: Request,
  page: (n: Negotiation) => JSX.Element,
  adapter: StreamingAdapter,
  opts?: FlowOptions & ResponseInit & { negotiate?: Negotiate; mode?: "full" | "fragment" },
): Promise<Response>;

Paramètres#

La requête transmet son signal d’annulation. Les options configurent le mode, les en-têtes, la négociation, les erreurs et les délais.

Utilisation#

Utilisez la fonction dans votre routeur ou votre serveur compatible avec les API Web.

import { serve } from "@vincle/flow/http";
import { NativeAdapter } from "@vincle/flow/adapters";

Bun.serve({
  port: 3000,
  fetch(req) {
    return serve(req, () => <HomePage />, NativeAdapter);
  },
});

Avec la négociation HTMX#

negotiateHtmx sélectionne le fragment indiqué par HTMX. La réponse conserve les informations Vary nécessaires pour distinguer les modes de rendu dans les caches.

import { serve, negotiateHtmx } from "@vincle/flow/http";
import { HtmxAdapter } from "@vincle/flow/adapters";

Bun.serve({
  port: 3000,
  fetch(req) {
    return serve(req, () => <Page />, HtmxAdapter, {
      negotiate: negotiateHtmx,
    });
  },
});

Avec une négociation personnalisée#

Une fonction de négociation personnalisée peut déterminer le fragment et les en-têtes de variation d’après la requête.

import type { Negotiate } from "@vincle/flow";

const negotiateMyLib: Negotiate = (req) => {
  const fragment = req.headers.get("X-Fragment-Id") ?? undefined;
  return {
    headers: { Vary: "X-Fragment-Id" },
    target: fragment,
  };
};

Avec un gestionnaire d’erreur personnalisé#

onError reçoit une erreur de contenu différé et peut retourner un remplacement adapté au fragment.

serve(req, () => <Page />, NativeAdapter, {
  onError: (error, { id, kind }) => {
    console.error(`Fragment ${id} failed:`, error);
    return <p>Unavailable</p>;
  },
});

Avec des en-têtes#

Ajoutez vos en-têtes via les options. Le type de contenu HTML et les en-têtes nécessaires à la négociation sont composés dans la réponse.

serve(req, () => <Page />, NativeAdapter, {
  headers: { "X-Custom": "value" },
  status: 200,
});

Options#

Les options comprennent adapter, negotiate, signal, onError, defaultTimeout et headers.