Aan de slag

Verso compileert een template naar een JavaScript-functie. Er is geen engine-instantie om bij te houden, geen view-resolver om te configureren en niets om te registreren — je compileert een bestand en roept het resultaat aan.

Installatie

Verso staat op npm als verso en ondersteunt Node.js 18 en nieuwer. Er zijn geen optionele peer-afhankelijkheden en geen post-installscripts.

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

Het pakket heeft drie ingangen:

Je eerste template

Een template is platte tekst met interpolaties tussen dubbele accolades. De extensie is meestal .vs, maar niets in de bibliotheek hangt daarvan af.

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

Compileer het één keer en roep het daarna zo vaak aan als je wilt:

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>'

De teruggegeven waarde is een gewone functie. Ze sluit alleen over een handvol helperverwijzingen, dus je kunt haar serialiseren, op schijf cachen of naar een worker sturen.

Compileren vanuit een string

Komt het template niet uit het bestandssysteem — een databaserij, een request-body, een testfixture —, gebruik dan compile() en geef het een naam voor foutmeldingen:

import { compile } from 'verso';

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

Data meegeven

Het eerste argument van een gecompileerd template is het dataobject. Eigenschappen worden opgezocht met optional-chaining-semantiek: een ontbrekende tussenwaarde levert een lege string op in plaats van een fout.

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

Een tweede argument bevat opties voor het renderen — lokale waarden die geen deel zijn van het datamodel, zoals een request-id of een vertaalfunctie:

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

In het template zijn ze bereikbaar als {{@t('save')}} en {{@nonce}}. Het voorvoegsel @ houdt ze zichtbaar gescheiden van je data, wat belangrijker is dan het klinkt zodra templates groeien.

Streaming

Voor pagina’s die uit meerdere trage bronnen bestaan, render je naar een stream in plaats van een string. Verso stuurt elk blok op het hoogste niveau door zodra het klaar is:

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);
});

Blokken gemarkeerd met {{#defer}} worden in willekeurige volgorde klaar en door een inline script van 400 bytes op hun plek gezet. Is JavaScript uitgeschakeld, dan verschijnen uitgestelde blokken aan het eind van het document in bronvolgorde — beperkt, maar volledig.

Bundlers en buildstappen

Voorgecompileerde templates houden de parser uit je productiebundel. De CLI schrijft één ES-module per template:

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

Er zijn officiële plug-ins voor Vite en esbuild, en beide zijn zo’n zestig regels — gebruik je iets anders, dan is één ervan kopiëren meestal sneller dan een generieke loader configureren.

Hoe nu verder

De syntaxisreferentie behandelt blokken, filters en partials. De API-referentie documenteert elke geëxporteerde functie en optie. Bouw je Verso in een buildpipeline in, dan is de CLI-referentie de kortste weg.