renderToStatic

Construit un document HTML statique et, si nécessaire, des fichiers de fragments différés.

Signature#

renderToStatic(fn, options?) fournit le HTML de la page et la méthode d’émission des fragments lorsque des options de fragments sont configurées.

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

// Pure static: no adapter, no emitFragments
function renderToStatic<T>(fn: (ctx: PureStaticContext) => T): Promise<T>;

// With deferred fragments: adapter required
function renderToStatic<T>(fn: (ctx: StaticContext) => T, options: StaticOptions): Promise<T>;

Options#

Sans options, le rendu est purement statique. Pour des fragments séparés, fournissez adapter et generatePath(id) ; écrivez ensuite chaque résultat à l’emplacement correspondant.

Option	Type	Valeur par défaut	Description
`adapter`	`Adapter`	Obligatoire	Adaptateur de représentation des fragments
`generatePath`	`(id: string) => string`	(id) => `/fragments/${id}.html`	Chemin d’URL de chaque fragment

Contextes#

La page et les fragments partagent les contextes de rendu nécessaires. Les ressources Style et Script appartiennent à la structure initiale.

Méthode	Signature	Description
`renderPage`	`(node: () => JSX.Element) => Promise<string>`	Rend la page en chaîne HTML complète
`emitFragments`	`(emit: (id: string, url: string, html: string) => void \| Promise<void>) => Promise<void>`	Produit les fragments et appelle le callback pour chacun

Utilisation#

Écrivez le document, puis appelez emitFragments pour produire les fichiers des fragments. Chaque fichier contient la représentation attendue par l’adaptateur.

import type { JSX } from "@vincle/core";

import { renderToStatic } from "@vincle/flow";
import { NativeAdapter } from "@vincle/flow/adapters";
import { writeFile } from "node:fs/promises";

declare const pages: { Component: () => JSX.Element; out: string }[];

await renderToStatic(
  async (ctx) => {
    for (const page of pages) {
      const html = await ctx.renderPage(() => <page.Component />);
      await writeFile(page.out, "<!DOCTYPE html>\n" + html);
    }

    // One .html file per deferred fragment, already Frame-wrapped.
    await ctx.emitFragments((_id, url, html) => writeFile("./dist" + url, html));
  },
  { adapter: NativeAdapter },
);