Premiers pas

Verso compile un template en fonction JavaScript. Pas d’instance de moteur à conserver, pas de résolveur de vues à configurer, rien à enregistrer — vous compilez un fichier et vous appelez le résultat.

Installation

Verso est publié sur npm sous le nom verso et prend en charge Node.js 18 et plus récent. Pas de dépendances pair optionnelles ni de scripts post-installation.

$ npm install verso
$ pnpm add verso
$ yarn add verso

Le paquet expose trois points d’entrée :

Votre premier template

Un template est du texte brut avec des interpolations entre doubles accolades. L’extension est par convention .vs, mais rien dans la bibliothèque n’en dépend.

<h1>{{title}}</h1>
<p>Signed in as {{user.name}}.</p>

Compilez-le une fois, puis appelez-le autant de fois que vous voulez :

import { compileFile } from 'verso';

const hello = await compileFile('views/hello.vs');

hello({ title: 'Dashboard', user: { name: 'Ada' } });
// → '<h1>Dashboard</h1>\n<p>Signed in as Ada.</p>'

La valeur renvoyée est une fonction ordinaire. Elle ne capture qu’une poignée de références à des utilitaires : vous pouvez la sérialiser, la mettre en cache sur disque ou l’envoyer à un worker.

Compiler depuis une chaîne

Quand le template ne vient pas du système de fichiers — une ligne de base de données, le corps d’une requête, une fixture de test —, utilisez compile() en lui donnant un nom pour les messages d’erreur :

import { compile } from 'verso';

const row = compile('<td>{{value}}</td>', { name: 'row' });

Passer des données

Le premier argument d’un template compilé est l’objet de données. Les propriétés sont cherchées avec la sémantique du chaînage optionnel : une valeur intermédiaire manquante produit une chaîne vide au lieu d’une exception.

page({ user: null });   // {{user.name}} renders as ''
page({});               // same

Un second argument porte des options de rendu — des valeurs locales qui ne font pas partie du modèle de données, comme un identifiant de requête ou une fonction de traduction :

page(data, { locals: { t: translate, nonce: req.nonce } });

Dans le template, elles sont accessibles via {{@t('save')}} et {{@nonce}}. Le préfixe @ les garde visiblement séparées de vos données, ce qui compte plus qu’il n’y paraît quand les templates grossissent.

Streaming

Pour des pages assemblées à partir de plusieurs sources lentes, générez le rendu dans un flux plutôt que dans une chaîne. Verso envoie chaque bloc de premier niveau dès qu’il est prêt :

import { compileFile, renderToStream } from 'verso';

const page = await compileFile('views/report.vs');

server.get('/report', (req, res) => {
  res.type('html');
  renderToStream(page, { id: req.params.id }).pipe(res);
});

Les blocs marqués {{#defer}} se résolvent dans le désordre et sont remis à leur place par un script en ligne de 400 octets. Si JavaScript est désactivé, ils apparaissent à la fin du document dans l’ordre du source — dégradé, mais complet.

Bundlers et étapes de build

Précompiler les templates garde le parseur hors de votre bundle de production. La CLI écrit un module ES par template :

$ verso build views/ --out dist/views/ --format esm

Des plugins officiels existent pour Vite et esbuild, et chacun fait une soixantaine de lignes — si vous utilisez autre chose, copier l’un d’eux est souvent plus rapide que configurer un chargeur générique.

Pour aller plus loin

La référence de la syntaxe couvre les blocs, les filtres et les partials. La référence de l’API documente chaque fonction et option exportée. Si vous intégrez Verso à une chaîne de build, la référence de la CLI est le plus court chemin.