Composants Flow

Les composants Flow organisent le document et les ressources sans ajouter de runtime applicatif imposé.

Defer#

<Defer> crée une région différée avec un contenu de repli. Une fonction de contenu peut recevoir le signal d’annulation et retourner une promesse ou une séquence asynchrone.

import { Defer } from "@vincle/flow";

async function HeavyDashboard() {
  const data = await fetch("https://api.example.com/dashboard");
  const json = await data.json();
  return <pre>{JSON.stringify(json, null, 2)}</pre>;
}

// fallback is shown in the shell immediately.
<Defer target="dashboard" fallback={<p>Loading dashboard…</p>}>
  <HeavyDashboard />
</Defer>;

Slot#

<Slot> est un point d’insertion nommé, sans travail asynchrone propre. Un <Defer> ciblant le même identifiant fournit son contenu.

import { Slot, Defer } from "@vincle/flow";

async function LiveComments() {
  const res = await fetch("https://api.example.com/comments");
  const comments: Array<{ id: string; text: string }> = await res.json();
  return (
    <ul>
      {comments.map((c) => (
        <li key={c.id}>{c.text}</li>
      ))}
    </ul>
  );
}

function Page() {
  return (
    <html>
      <body>
        <Slot name="comments">
          <p>Loading comments…</p>
        </Slot>

        <Defer target="comments" timeout={5000}>
          <LiveComments />
        </Defer>
      </body>
    </html>
  );
}

Style / Script : émission des ressources#

<Style> et <Script> émettent les ressources dans la structure initiale. Le nom permet la déduplication : la première occurrence gagne. Les factories ne sont évaluées que lors de l’émission effective.

import { Style, Script } from "@vincle/flow/components";

const Page = () => (
  <>
    <Style name="page.css" media="screen">
      {`.hero { color: red; }`}
    </Style>
    <Script name="page.js" defer src="/page.js" />
    <main>…</main>
  </>
);