Premier rendu

Tout ce qu’il faut pour transformer votre premier composant JSX en une chaîne HTML.

Bonjour le monde#

renderToString retourne toujours une Promise<string>, même lorsque l’arbre est synchrone. Vous pouvez envoyer cette chaîne dans une réponse HTTP ou l’écrire dans un fichier.

import { renderToString } from "@vincle/core";

const html = await renderToString(
  <html lang="en">
    <head>
      <title>Hello, world!</title>
    </head>
    <body>
      <h1>Hello, world!</h1>
    </body>
  </html>,
);

<html lang="en">
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Les composants sont des fonctions#

Un composant est une fonction ordinaire : il reçoit des props et retourne du JSX. Les éléments imbriqués arrivent dans children. Aucun cycle de vie ni hook n’est nécessaire.

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

function Layout({ title, children }: { title: string; children: JSX.Element | JSX.Element[] }) {
  return (
    <html lang="en">
      <head>
        <title>{title}</title>
      </head>
      <body>{children}</body>
    </html>
  );
}

const html = await renderToString(
  <Layout title="My page">
    <h1>Welcome</h1>
    <p>This is a page rendered with Vincle.</p>
  </Layout>,
);

Les valeurs sont échappées#

Les valeurs sont échappées selon leur position. Réservez raw() au HTML de confiance que vous avez produit ou assaini. Consultez le modèle de sécurité.

import { renderToString, raw } from "@vincle/core";

// User input is HTML-escaped automatically
const userInput = '<script>alert("xss")</script>';
const html = await renderToString(<p>{userInput}</p>);

// Use raw() only for trusted HTML you generated yourself
const trustedHtml = "<em>rendered from your own markdown</em>";
const html2 = await renderToString(<article>{raw(trustedHtml)}</article>);

<p>&lt;script&gt;alert("xss")&lt;/script&gt;</p>
<article><em>rendered from your own markdown</em></article>

L’asynchrone fonctionne directement#

Un composant peut être async. Le moteur attend son résultat et parcourt les composants dans l’ordre du document : le composant qui a besoin des données peut les charger directement.

import { renderToString } from "@vincle/core";

declare const db: {
  users: {
    findById(id: string): Promise<{ name: string; email: string }>;
  };
};

async function UserCard({ id }: { id: string }) {
  const user = await db.users.findById(id);
  return (
    <div class="card">
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

const html = await renderToString(<UserCard id="42" />);

Pour continuer#

Continuez avec les éléments et attributs, les composants et le chargement de données.